@pfm-platform/alerts-ui-mui 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -518,11 +518,739 @@ function AlertDeleteButton({
     ] })
   ] });
 }
+var ICON_OPTIONS = [
+  { name: "Notifications", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Notifications, {}), label: "Notifications" },
+  { name: "AccountBalance", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.AccountBalance, {}), label: "Account Balance" },
+  { name: "AccountBalanceWallet", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.AccountBalanceWallet, {}), label: "Wallet" },
+  { name: "TrendingUp", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.TrendingUp, {}), label: "Goal" },
+  { name: "Receipt", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Receipt, {}), label: "Transaction" },
+  { name: "Warning", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Warning, {}), label: "Warning" },
+  { name: "Info", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Info, {}), label: "Info" },
+  { name: "Error", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Error, {}), label: "Error" },
+  { name: "CheckCircle", icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircle, {}), label: "Success" }
+];
+function AlertTypeIcon({ value, onChange, label = "Select Icon" }) {
+  const handleIconClick = (iconName) => {
+    if (onChange) {
+      onChange(iconName);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "repeat(3, 1fr)",
+            sm: "repeat(4, 1fr)",
+            md: "repeat(6, 1fr)"
+          },
+          gap: 1
+        },
+        children: ICON_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          material.IconButton,
+          {
+            onClick: () => handleIconClick(option.name),
+            "aria-label": `Select ${option.label} icon`,
+            "aria-pressed": value === option.name,
+            sx: {
+              border: 1,
+              borderColor: value === option.name ? "primary.main" : "divider",
+              backgroundColor: value === option.name ? "primary.main" : "background.paper",
+              color: value === option.name ? "primary.contrastText" : "text.primary",
+              borderRadius: 1,
+              "&:hover": {
+                backgroundColor: value === option.name ? "primary.dark" : "action.hover",
+                boxShadow: 2
+              },
+              transition: "all 0.2s"
+            },
+            children: option.icon
+          },
+          option.name
+        ))
+      }
+    )
+  ] });
+}
+function AlertDestinationsForm({
+  value = {},
+  onChange,
+  label = "Alert Destinations"
+}) {
+  const [emailEnabled, setEmailEnabled] = react.useState(Boolean(value?.email));
+  const [smsEnabled, setSmsEnabled] = react.useState(Boolean(value?.sms));
+  const [pushEnabled, setPushEnabled] = react.useState(Boolean(value?.push));
+  const [emailInput, setEmailInput] = react.useState(value?.email?.join(", ") || "");
+  const [smsInput, setSmsInput] = react.useState(value?.sms?.join(", ") || "");
+  const [pushInput, setPushInput] = react.useState(value?.push?.join(", ") || "");
+  react.useEffect(() => {
+    const newEmail = value?.email?.join(", ") || "";
+    const newSms = value?.sms?.join(", ") || "";
+    const newPush = value?.push?.join(", ") || "";
+    setEmailInput(newEmail);
+    setSmsInput(newSms);
+    setPushInput(newPush);
+    setEmailEnabled(Boolean(value?.email));
+    setSmsEnabled(Boolean(value?.sms));
+    setPushEnabled(Boolean(value?.push));
+  }, [value?.email, value?.sms, value?.push]);
+  const [emailError, setEmailError] = react.useState(null);
+  const [smsError, setSmsError] = react.useState(null);
+  const [pushError, setPushError] = react.useState(null);
+  const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email.trim());
+  };
+  const validatePhone = (phone) => {
+    const phoneRegex = /^\+?[\d\s-()]+$/;
+    return phoneRegex.test(phone.trim()) && phone.replace(/\D/g, "").length >= 10;
+  };
+  const validatePushToken = (token) => {
+    return token.trim().length > 0;
+  };
+  const buildDestinations = (emailVal, smsVal, pushVal, emailEn, smsEn, pushEn) => {
+    return {
+      email: emailEn && emailVal.trim() ? emailVal.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
+      sms: smsEn && smsVal.trim() ? smsVal.split(",").map((s) => s.trim()).filter(Boolean) : void 0,
+      push: pushEn && pushVal.trim() ? pushVal.split(",").map((p) => p.trim()).filter(Boolean) : void 0
+    };
+  };
+  const handleEmailChange = (inputValue) => {
+    setEmailInput(inputValue);
+    setEmailError(null);
+    if (inputValue.trim()) {
+      const emails = inputValue.split(",").map((e) => e.trim()).filter(Boolean);
+      const invalidEmails = emails.filter((e) => !validateEmail(e));
+      if (invalidEmails.length > 0) {
+        setEmailError(`Invalid email(s): ${invalidEmails.join(", ")}`);
+      }
+    }
+    if (onChange) {
+      const destinations = buildDestinations(inputValue, smsInput, pushInput, emailEnabled, smsEnabled, pushEnabled);
+      onChange(destinations);
+    }
+  };
+  const handleSmsChange = (inputValue) => {
+    setSmsInput(inputValue);
+    setSmsError(null);
+    if (inputValue.trim()) {
+      const phones = inputValue.split(",").map((p) => p.trim()).filter(Boolean);
+      const invalidPhones = phones.filter((p) => !validatePhone(p));
+      if (invalidPhones.length > 0) {
+        setSmsError(`Invalid phone(s): ${invalidPhones.join(", ")}`);
+      }
+    }
+    if (onChange) {
+      const destinations = buildDestinations(emailInput, inputValue, pushInput, emailEnabled, smsEnabled, pushEnabled);
+      onChange(destinations);
+    }
+  };
+  const handlePushChange = (inputValue) => {
+    setPushInput(inputValue);
+    setPushError(null);
+    if (inputValue.trim()) {
+      const tokens = inputValue.split(",").map((t) => t.trim()).filter(Boolean);
+      const invalidTokens = tokens.filter((t) => !validatePushToken(t));
+      if (invalidTokens.length > 0) {
+        setPushError("All push tokens must be non-empty");
+      }
+    }
+    if (onChange) {
+      const destinations = buildDestinations(emailInput, smsInput, inputValue, emailEnabled, smsEnabled, pushEnabled);
+      onChange(destinations);
+    }
+  };
+  const handleEmailEnabledChange = (enabled) => {
+    setEmailEnabled(enabled);
+    setEmailError(null);
+    if (onChange) {
+      const destinations = buildDestinations(emailInput, smsInput, pushInput, enabled, smsEnabled, pushEnabled);
+      onChange(destinations);
+    }
+  };
+  const handleSmsEnabledChange = (enabled) => {
+    setSmsEnabled(enabled);
+    setSmsError(null);
+    if (onChange) {
+      const destinations = buildDestinations(emailInput, smsInput, pushInput, emailEnabled, enabled, pushEnabled);
+      onChange(destinations);
+    }
+  };
+  const handlePushEnabledChange = (enabled) => {
+    setPushEnabled(enabled);
+    setPushError(null);
+    if (onChange) {
+      const destinations = buildDestinations(emailInput, smsInput, pushInput, emailEnabled, smsEnabled, enabled);
+      onChange(destinations);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", sx: { mb: 2 }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Checkbox,
+              {
+                checked: emailEnabled,
+                onChange: (e) => handleEmailEnabledChange(e.target.checked),
+                "aria-label": "Enable email notifications"
+              }
+            ),
+            label: "Email Notifications"
+          }
+        ),
+        emailEnabled && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            label: "Email Addresses",
+            placeholder: "email1@example.com, email2@example.com",
+            value: emailInput,
+            onChange: (e) => handleEmailChange(e.target.value),
+            error: Boolean(emailError),
+            helperText: emailError || "Separate multiple emails with commas",
+            inputProps: {
+              "aria-label": "Email addresses"
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Checkbox,
+              {
+                checked: smsEnabled,
+                onChange: (e) => handleSmsEnabledChange(e.target.checked),
+                "aria-label": "Enable SMS notifications"
+              }
+            ),
+            label: "SMS Notifications"
+          }
+        ),
+        smsEnabled && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            label: "Phone Numbers",
+            placeholder: "+1234567890, +0987654321",
+            value: smsInput,
+            onChange: (e) => handleSmsChange(e.target.value),
+            error: Boolean(smsError),
+            helperText: smsError || "Separate multiple phone numbers with commas",
+            inputProps: {
+              "aria-label": "Phone numbers"
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Checkbox,
+              {
+                checked: pushEnabled,
+                onChange: (e) => handlePushEnabledChange(e.target.checked),
+                "aria-label": "Enable push notifications"
+              }
+            ),
+            label: "Push Notifications"
+          }
+        ),
+        pushEnabled && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            label: "Push Tokens",
+            placeholder: "token1, token2",
+            value: pushInput,
+            onChange: (e) => handlePushChange(e.target.value),
+            error: Boolean(pushError),
+            helperText: pushError || "Separate multiple push tokens with commas",
+            inputProps: {
+              "aria-label": "Push notification tokens"
+            }
+          }
+        ) })
+      ] }),
+      !emailEnabled && !smsEnabled && !pushEnabled && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "info", sx: { mt: 1 }, children: "Select at least one notification method to receive alerts" })
+    ] })
+  ] });
+}
+function AlertDestinationsDialog({
+  open,
+  onClose,
+  onSave,
+  initialValue = {},
+  title = "Configure Alert Destinations"
+}) {
+  const [destinations, setDestinations] = react.useState(initialValue);
+  const [hasChanges, setHasChanges] = react.useState(false);
+  const handleDestinationsChange = (newDestinations) => {
+    setDestinations(newDestinations);
+    setHasChanges(true);
+  };
+  const handleSave = () => {
+    onSave(destinations);
+    setHasChanges(false);
+    onClose();
+  };
+  const handleCancel = () => {
+    setDestinations(initialValue);
+    setHasChanges(false);
+    onClose();
+  };
+  const handleClose = (_event, reason) => {
+    if (reason === "backdropClick" || reason === "escapeKeyDown") {
+      handleCancel();
+    }
+  };
+  const hasAtLeastOneDestination = destinations.email && destinations.email.length > 0 || destinations.sms && destinations.sms.length > 0 || destinations.push && destinations.push.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Dialog,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "sm",
+      fullWidth: true,
+      "aria-labelledby": "alert-destinations-dialog-title",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogTitle, { id: "alert-destinations-dialog-title", children: [
+          title,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              "aria-label": "Close dialog",
+              onClick: handleCancel,
+              sx: {
+                position: "absolute",
+                right: 8,
+                top: 8
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Close, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          AlertDestinationsForm,
+          {
+            value: destinations,
+            onChange: handleDestinationsChange,
+            label: ""
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { sx: { px: 3, pb: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Button,
+            {
+              onClick: handleSave,
+              variant: "contained",
+              disabled: !hasAtLeastOneDestination,
+              "aria-label": "Save destinations",
+              children: "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AlertActionsDialog({
+  open,
+  onClose,
+  onSave,
+  initialValue = [],
+  title = "Configure Alert Actions"
+}) {
+  const [actions, setActions] = react.useState(initialValue.length > 0 ? initialValue : []);
+  const handleAddAction = () => {
+    setActions([...actions, { type: "webhook", config: {} }]);
+  };
+  const handleRemoveAction = (index) => {
+    const newActions = actions.filter((_, i) => i !== index);
+    setActions(newActions);
+  };
+  const handleActionTypeChange = (index, type) => {
+    const newActions = [...actions];
+    newActions[index] = { type, config: {} };
+    setActions(newActions);
+  };
+  const handleConfigChange = (index, key, value) => {
+    const newActions = [...actions];
+    newActions[index] = {
+      ...newActions[index],
+      config: {
+        ...newActions[index].config,
+        [key]: value
+      }
+    };
+    setActions(newActions);
+  };
+  const handleSave = () => {
+    onSave(actions);
+    onClose();
+  };
+  const handleCancel = () => {
+    setActions(initialValue.length > 0 ? initialValue : []);
+    onClose();
+  };
+  const handleClose = (_event, reason) => {
+    if (reason === "backdropClick" || reason === "escapeKeyDown") {
+      handleCancel();
+    }
+  };
+  const getConfigFieldsForType = (type) => {
+    switch (type) {
+      case "webhook":
+        return ["url", "method"];
+      case "email":
+        return ["to", "subject"];
+      case "sms":
+        return ["phoneNumber", "message"];
+      case "custom":
+        return ["command", "args"];
+      default:
+        return [];
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Dialog,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "md",
+      fullWidth: true,
+      "aria-labelledby": "alert-actions-dialog-title",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogTitle, { id: "alert-actions-dialog-title", children: [
+          title,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              "aria-label": "Close dialog",
+              onClick: handleCancel,
+              sx: {
+                position: "absolute",
+                right: 8,
+                top: 8
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Close, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+          actions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: "center", py: 2 }, children: 'No actions configured. Click "Add Action" to get started.' }),
+          actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                p: 2,
+                border: 1,
+                borderColor: "divider",
+                borderRadius: 1,
+                position: "relative"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.IconButton,
+                  {
+                    "aria-label": `Remove action ${index + 1}`,
+                    onClick: () => handleRemoveAction(index),
+                    size: "small",
+                    sx: {
+                      position: "absolute",
+                      right: 8,
+                      top: 8
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Delete, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "subtitle2", sx: { mb: 2 }, children: [
+                  "Action ",
+                  index + 1
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { mb: 2 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { id: `action-type-${index}-label`, children: "Action Type" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    material.Select,
+                    {
+                      labelId: `action-type-${index}-label`,
+                      value: action.type,
+                      label: "Action Type",
+                      onChange: (e) => handleActionTypeChange(index, e.target.value),
+                      inputProps: {
+                        "aria-label": `Action ${index + 1} type`
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "webhook", children: "Webhook" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "email", children: "Email" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "sms", children: "SMS" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "custom", children: "Custom" })
+                      ]
+                    }
+                  )
+                ] }),
+                getConfigFieldsForType(action.type).map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                  material.TextField,
+                  {
+                    fullWidth: true,
+                    label: field.charAt(0).toUpperCase() + field.slice(1),
+                    value: action.config[field] || "",
+                    onChange: (e) => handleConfigChange(index, field, e.target.value),
+                    sx: { mb: 2 },
+                    inputProps: {
+                      "aria-label": `Action ${index + 1} ${field}`
+                    }
+                  },
+                  field
+                ))
+              ]
+            },
+            index
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Button,
+            {
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, {}),
+              onClick: handleAddAction,
+              variant: "outlined",
+              "aria-label": "Add action",
+              children: "Add Action"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { sx: { px: 3, pb: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleCancel, color: "inherit", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Button,
+            {
+              onClick: handleSave,
+              variant: "contained",
+              "aria-label": "Save actions",
+              children: "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AlertNotificationSettings({
+  value = { enabled: true, frequency: "immediate", groupBy: "none" },
+  onChange,
+  title = "Notification Settings"
+}) {
+  const [enabled, setEnabled] = react.useState(value.enabled ?? true);
+  const [quietHoursEnabled, setQuietHoursEnabled] = react.useState(value.quietHours?.enabled ?? false);
+  const [quietHoursStart, setQuietHoursStart] = react.useState(value.quietHours?.start ?? "22:00");
+  const [quietHoursEnd, setQuietHoursEnd] = react.useState(value.quietHours?.end ?? "08:00");
+  const [frequency, setFrequency] = react.useState(
+    value.frequency ?? "immediate"
+  );
+  const [groupBy, setGroupBy] = react.useState(value.groupBy ?? "none");
+  const buildSettings = (isEnabled, qhEnabled, qhStart, qhEnd, freq, group) => {
+    return {
+      enabled: isEnabled,
+      quietHours: qhEnabled ? {
+        enabled: qhEnabled,
+        start: qhStart,
+        end: qhEnd
+      } : void 0,
+      frequency: freq,
+      groupBy: group
+    };
+  };
+  const handleEnabledChange = (isEnabled) => {
+    setEnabled(isEnabled);
+    if (onChange) {
+      const settings = buildSettings(
+        isEnabled,
+        quietHoursEnabled,
+        quietHoursStart,
+        quietHoursEnd,
+        frequency,
+        groupBy
+      );
+      onChange(settings);
+    }
+  };
+  const handleQuietHoursEnabledChange = (qhEnabled) => {
+    setQuietHoursEnabled(qhEnabled);
+    if (onChange) {
+      const settings = buildSettings(enabled, qhEnabled, quietHoursStart, quietHoursEnd, frequency, groupBy);
+      onChange(settings);
+    }
+  };
+  const handleQuietHoursStartChange = (start) => {
+    setQuietHoursStart(start);
+    if (onChange) {
+      const settings = buildSettings(enabled, quietHoursEnabled, start, quietHoursEnd, frequency, groupBy);
+      onChange(settings);
+    }
+  };
+  const handleQuietHoursEndChange = (end) => {
+    setQuietHoursEnd(end);
+    if (onChange) {
+      const settings = buildSettings(enabled, quietHoursEnabled, quietHoursStart, end, frequency, groupBy);
+      onChange(settings);
+    }
+  };
+  const handleFrequencyChange = (freq) => {
+    setFrequency(freq);
+    if (onChange) {
+      const settings = buildSettings(enabled, quietHoursEnabled, quietHoursStart, quietHoursEnd, freq, groupBy);
+      onChange(settings);
+    }
+  };
+  const handleGroupByChange = (group) => {
+    setGroupBy(group);
+    if (onChange) {
+      const settings = buildSettings(enabled, quietHoursEnabled, quietHoursStart, quietHoursEnd, frequency, group);
+      onChange(settings);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: 3 }, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { mb: 3 }, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Switch,
+            {
+              checked: enabled,
+              onChange: (e) => handleEnabledChange(e.target.checked),
+              "aria-label": "Enable notifications"
+            }
+          ),
+          label: "Enable Notifications"
+        }
+      ),
+      enabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { id: "frequency-label", children: "Notification Frequency" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Select,
+            {
+              labelId: "frequency-label",
+              value: frequency,
+              label: "Notification Frequency",
+              onChange: (e) => handleFrequencyChange(e.target.value),
+              inputProps: {
+                "aria-label": "Notification frequency"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "immediate", children: "Immediate" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "hourly", children: "Hourly Digest" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "daily", children: "Daily Digest" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "weekly", children: "Weekly Digest" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { id: "groupby-label", children: "Group Notifications By" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Select,
+            {
+              labelId: "groupby-label",
+              value: groupBy,
+              label: "Group Notifications By",
+              onChange: (e) => handleGroupByChange(e.target.value),
+              inputProps: {
+                "aria-label": "Group notifications by"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "none", children: "None" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "type", children: "Type" }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "priority", children: "Priority" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsxRuntime.jsx(
+                material.Switch,
+                {
+                  checked: quietHoursEnabled,
+                  onChange: (e) => handleQuietHoursEnabledChange(e.target.checked),
+                  "aria-label": "Enable quiet hours"
+                }
+              ),
+              label: "Quiet Hours"
+            }
+          ),
+          quietHoursEnabled && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2, display: "flex", gap: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { sx: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { id: "quiet-start-label", children: "Start Time" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Select,
+                {
+                  labelId: "quiet-start-label",
+                  value: quietHoursStart,
+                  label: "Start Time",
+                  onChange: (e) => handleQuietHoursStartChange(e.target.value),
+                  inputProps: {
+                    "aria-label": "Quiet hours start time"
+                  },
+                  children: Array.from({ length: 24 }, (_, i) => {
+                    const hour = i.toString().padStart(2, "0");
+                    return /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: `${hour}:00`, children: `${hour}:00` }, `${hour}:00`);
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { sx: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { id: "quiet-end-label", children: "End Time" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.Select,
+                {
+                  labelId: "quiet-end-label",
+                  value: quietHoursEnd,
+                  label: "End Time",
+                  onChange: (e) => handleQuietHoursEndChange(e.target.value),
+                  inputProps: {
+                    "aria-label": "Quiet hours end time"
+                  },
+                  children: Array.from({ length: 24 }, (_, i) => {
+                    const hour = i.toString().padStart(2, "0");
+                    return /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: `${hour}:00`, children: `${hour}:00` }, `${hour}:00`);
+                  })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
 
+exports.AlertActionsDialog = AlertActionsDialog;
 exports.AlertCreateForm = AlertCreateForm;
 exports.AlertDeleteButton = AlertDeleteButton;
+exports.AlertDestinationsDialog = AlertDestinationsDialog;
+exports.AlertDestinationsForm = AlertDestinationsForm;
 exports.AlertEditForm = AlertEditForm;
 exports.AlertList = AlertList;
+exports.AlertNotificationSettings = AlertNotificationSettings;
 exports.AlertSummary = AlertSummary;
+exports.AlertTypeIcon = AlertTypeIcon;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map