@notificationapi/react 1.4.0 → 1.5.0

package/dist/components/Preferences/PreferenceInput.js

@@ -1,8 +1,1453 @@
-import "react/jsx-runtime";
-import "../../assets/channelUtils.js";
-import "../../assets/Typography.js";
-import { P as i } from "../../assets/PreferenceInput.js";
-import "../../assets/Divider.js";
+import { jsxs as R, jsx as i, Fragment as ne } from "react/jsx-runtime";
+import { g as we, a as Ce } from "../../assets/channelUtils.js";
+import { T as _ } from "../../assets/Typography.js";
+import * as g from "react";
+import { e as L, g as q, s as w, K as ee, c as j, P as o, h as v, b as D, m as I, u as W, a as A, J as ke, I as Se } from "../../assets/DefaultPropsProvider.js";
+import { c as Q } from "../../assets/createSimplePaletteValueFilter.js";
+import { u as H, f as ue, c as Re, S as Oe } from "../../assets/Stack.js";
+import { B as xe, r as K, a as $e } from "../../assets/ButtonBase.js";
+import { a as fe, u as Pe } from "../../assets/dividerClasses.js";
+import { u as Te } from "../../assets/resolveComponentProps.js";
+import { c as be } from "../../assets/createSvgIcon.js";
+import { D as Fe } from "../../assets/Divider.js";
+function Ne(e) {
+  return L("PrivateSwitchBase", e);
+}
+q("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
+const Be = (e) => {
+  const {
+    classes: t,
+    checked: r,
+    disabled: a,
+    edge: s
+  } = e, c = {
+    root: ["root", r && "checked", a && "disabled", s && `edge${v(s)}`],
+    input: ["input"]
+  };
+  return D(c, Ne, t);
+}, Ie = w(xe)({
+  padding: 9,
+  borderRadius: "50%",
+  variants: [{
+    props: {
+      edge: "start",
+      size: "small"
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: ({
+      edge: e,
+      ownerState: t
+    }) => e === "start" && t.size !== "small",
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: "end",
+      size: "small"
+    },
+    style: {
+      marginRight: -3
+    }
+  }, {
+    props: ({
+      edge: e,
+      ownerState: t
+    }) => e === "end" && t.size !== "small",
+    style: {
+      marginRight: -12
+    }
+  }]
+}), ze = w("input", {
+  shouldForwardProp: ee
+})({
+  cursor: "inherit",
+  position: "absolute",
+  opacity: 0,
+  width: "100%",
+  height: "100%",
+  top: 0,
+  left: 0,
+  margin: 0,
+  padding: 0,
+  zIndex: 1
+}), oe = /* @__PURE__ */ g.forwardRef(function(t, r) {
+  const {
+    autoFocus: a,
+    checked: s,
+    checkedIcon: c,
+    className: l,
+    defaultChecked: u,
+    disabled: f,
+    disableFocusRipple: p = !1,
+    edge: d = !1,
+    icon: n,
+    id: m,
+    inputProps: k,
+    inputRef: S,
+    name: N,
+    onBlur: y,
+    onChange: P,
+    onFocus: b,
+    readOnly: T,
+    required: O = !1,
+    tabIndex: M,
+    type: C,
+    value: G,
+    ...X
+  } = t, [z, U] = fe({
+    controlled: s,
+    default: !!u,
+    name: "SwitchBase",
+    state: "checked"
+  }), x = H(), J = (F) => {
+    b && b(F), x && x.onFocus && x.onFocus(F);
+  }, E = (F) => {
+    y && y(F), x && x.onBlur && x.onBlur(F);
+  }, B = (F) => {
+    if (F.nativeEvent.defaultPrevented)
+      return;
+    const se = F.target.checked;
+    U(se), P && P(F, se);
+  };
+  let $ = f;
+  x && typeof $ > "u" && ($ = x.disabled);
+  const ve = C === "checkbox" || C === "radio", Z = {
+    ...t,
+    checked: z,
+    disabled: $,
+    disableFocusRipple: p,
+    edge: d
+  }, ae = Be(Z);
+  return /* @__PURE__ */ R(Ie, {
+    component: "span",
+    className: j(ae.root, l),
+    centerRipple: !0,
+    focusRipple: !p,
+    disabled: $,
+    tabIndex: null,
+    role: void 0,
+    onFocus: J,
+    onBlur: E,
+    ownerState: Z,
+    ref: r,
+    ...X,
+    children: [/* @__PURE__ */ i(ze, {
+      autoFocus: a,
+      checked: s,
+      defaultChecked: u,
+      className: ae.input,
+      disabled: $,
+      id: ve ? m : void 0,
+      name: N,
+      onChange: B,
+      readOnly: T,
+      ref: S,
+      required: O,
+      ownerState: Z,
+      tabIndex: M,
+      type: C,
+      ...C === "checkbox" && G === void 0 ? {} : {
+        value: G
+      },
+      ...k
+    }), z ? c : n]
+  });
+});
+process.env.NODE_ENV !== "production" && (oe.propTypes = {
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: o.bool,
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: o.bool,
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: o.node.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * @ignore
+   */
+  defaultChecked: o.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: o.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: o.oneOf(["end", "start", !1]),
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: o.node.isRequired,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: o.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: K,
+  /*
+   * @ignore
+   */
+  name: o.string,
+  /**
+   * @ignore
+   */
+  onBlur: o.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: o.func,
+  /**
+   * @ignore
+   */
+  onFocus: o.func,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: o.bool,
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.object,
+  /**
+   * @ignore
+   */
+  tabIndex: o.oneOfType([o.number, o.string]),
+  /**
+   * The input component prop `type`.
+   */
+  type: o.string.isRequired,
+  /**
+   * The value of the component.
+   */
+  value: o.any
+});
+function je(e) {
+  return L("MuiFormControlLabel", e);
+}
+const V = q("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlacementTop", "labelPlacementBottom", "disabled", "label", "error", "required", "asterisk"]), Me = (e) => {
+  const {
+    classes: t,
+    disabled: r,
+    labelPlacement: a,
+    error: s,
+    required: c
+  } = e, l = {
+    root: ["root", r && "disabled", `labelPlacement${v(a)}`, s && "error", c && "required"],
+    label: ["label", r && "disabled"],
+    asterisk: ["asterisk", s && "error"]
+  };
+  return D(l, je, t);
+}, Ee = w("label", {
+  name: "MuiFormControlLabel",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: r
+    } = e;
+    return [{
+      [`& .${V.label}`]: t.label
+    }, t.root, t[`labelPlacement${v(r.labelPlacement)}`]];
+  }
+})(I(({
+  theme: e
+}) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  cursor: "pointer",
+  // For correct alignment with the text.
+  verticalAlign: "middle",
+  WebkitTapHighlightColor: "transparent",
+  marginLeft: -11,
+  marginRight: 16,
+  // used for row presentation of radio/checkbox
+  [`&.${V.disabled}`]: {
+    cursor: "default"
+  },
+  [`& .${V.label}`]: {
+    [`&.${V.disabled}`]: {
+      color: (e.vars || e).palette.text.disabled
+    }
+  },
+  variants: [{
+    props: {
+      labelPlacement: "start"
+    },
+    style: {
+      flexDirection: "row-reverse",
+      marginRight: -11
+    }
+  }, {
+    props: {
+      labelPlacement: "top"
+    },
+    style: {
+      flexDirection: "column-reverse"
+    }
+  }, {
+    props: {
+      labelPlacement: "bottom"
+    },
+    style: {
+      flexDirection: "column"
+    }
+  }, {
+    props: ({
+      labelPlacement: t
+    }) => t === "start" || t === "top" || t === "bottom",
+    style: {
+      marginLeft: 16
+      // used for row presentation of radio/checkbox
+    }
+  }]
+}))), Le = w("span", {
+  name: "MuiFormControlLabel",
+  slot: "Asterisk",
+  overridesResolver: (e, t) => t.asterisk
+})(I(({
+  theme: e
+}) => ({
+  [`&.${V.error}`]: {
+    color: (e.vars || e).palette.error.main
+  }
+}))), he = /* @__PURE__ */ g.forwardRef(function(t, r) {
+  const a = W({
+    props: t,
+    name: "MuiFormControlLabel"
+  }), {
+    checked: s,
+    className: c,
+    componentsProps: l = {},
+    control: u,
+    disabled: f,
+    disableTypography: p,
+    inputRef: d,
+    label: n,
+    labelPlacement: m = "end",
+    name: k,
+    onChange: S,
+    required: N,
+    slots: y = {},
+    slotProps: P = {},
+    value: b,
+    ...T
+  } = a, O = H(), M = f ?? u.props.disabled ?? (O == null ? void 0 : O.disabled), C = N ?? u.props.required, G = {
+    disabled: M,
+    required: C
+  };
+  ["checked", "name", "onChange", "value", "inputRef"].forEach(($) => {
+    typeof u.props[$] > "u" && typeof a[$] < "u" && (G[$] = a[$]);
+  });
+  const X = ue({
+    props: a,
+    muiFormControl: O,
+    states: ["error"]
+  }), z = {
+    ...a,
+    disabled: M,
+    labelPlacement: m,
+    required: C,
+    error: X.error
+  }, U = Me(z), x = {
+    slots: y,
+    slotProps: {
+      ...l,
+      ...P
+    }
+  }, [J, E] = $e("typography", {
+    elementType: _,
+    externalForwardedProps: x,
+    ownerState: z
+  });
+  let B = n;
+  return B != null && B.type !== _ && !p && (B = /* @__PURE__ */ i(J, {
+    component: "span",
+    ...E,
+    className: j(U.label, E == null ? void 0 : E.className),
+    children: B
+  })), /* @__PURE__ */ R(Ee, {
+    className: j(U.root, c),
+    ownerState: z,
+    ref: r,
+    ...T,
+    children: [/* @__PURE__ */ g.cloneElement(u, G), C ? /* @__PURE__ */ R("div", {
+      children: [B, /* @__PURE__ */ R(Le, {
+        ownerState: z,
+        "aria-hidden": !0,
+        className: U.asterisk,
+        children: [" ", "*"]
+      })]
+    }) : B]
+  });
+});
+process.env.NODE_ENV !== "production" && (he.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the component appears selected.
+   */
+  checked: o.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  componentsProps: o.shape({
+    typography: o.object
+  }),
+  /**
+   * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
+   */
+  control: o.element.isRequired,
+  /**
+   * If `true`, the control is disabled.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the label is rendered as it is passed without an additional typography node.
+   */
+  disableTypography: o.bool,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: K,
+  /**
+   * A text or an element to be used in an enclosing label element.
+   */
+  label: o.node,
+  /**
+   * The position of the label.
+   * @default 'end'
+   */
+  labelPlacement: o.oneOf(["bottom", "end", "start", "top"]),
+  /**
+   * @ignore
+   */
+  name: o.string,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: o.func,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: o.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: o.shape({
+    typography: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    typography: o.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The value of the component.
+   */
+  value: o.any
+});
+function qe(e) {
+  return L("MuiFormGroup", e);
+}
+q("MuiFormGroup", ["root", "row", "error"]);
+const De = (e) => {
+  const {
+    classes: t,
+    row: r,
+    error: a
+  } = e;
+  return D({
+    root: ["root", r && "row", a && "error"]
+  }, qe, t);
+}, Ge = w("div", {
+  name: "MuiFormGroup",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: r
+    } = e;
+    return [t.root, r.row && t.row];
+  }
+})({
+  display: "flex",
+  flexDirection: "column",
+  flexWrap: "wrap",
+  variants: [{
+    props: {
+      row: !0
+    },
+    style: {
+      flexDirection: "row"
+    }
+  }]
+}), me = /* @__PURE__ */ g.forwardRef(function(t, r) {
+  const a = W({
+    props: t,
+    name: "MuiFormGroup"
+  }), {
+    className: s,
+    row: c = !1,
+    ...l
+  } = a, u = H(), f = ue({
+    props: a,
+    muiFormControl: u,
+    states: ["error"]
+  }), p = {
+    ...a,
+    row: c,
+    error: f.error
+  }, d = De(p);
+  return /* @__PURE__ */ i(Ge, {
+    className: j(d.root, s),
+    ownerState: p,
+    ref: r,
+    ...l
+  });
+});
+process.env.NODE_ENV !== "production" && (me.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * Display group of elements in a compact row.
+   * @default false
+   */
+  row: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+const Ue = be(/* @__PURE__ */ i("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+}), "RadioButtonUnchecked"), Ve = be(/* @__PURE__ */ i("path", {
+  d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+}), "RadioButtonChecked"), _e = w("span", {
+  shouldForwardProp: ee
+})({
+  position: "relative",
+  display: "flex"
+}), Ae = w(Ue)({
+  // Scale applied to prevent dot misalignment in Safari
+  transform: "scale(1)"
+}), We = w(Ve)(I(({
+  theme: e
+}) => ({
+  left: 0,
+  position: "absolute",
+  transform: "scale(0)",
+  transition: e.transitions.create("transform", {
+    easing: e.transitions.easing.easeIn,
+    duration: e.transitions.duration.shortest
+  }),
+  variants: [{
+    props: {
+      checked: !0
+    },
+    style: {
+      transform: "scale(1)",
+      transition: e.transitions.create("transform", {
+        easing: e.transitions.easing.easeOut,
+        duration: e.transitions.duration.shortest
+      })
+    }
+  }]
+})));
+function te(e) {
+  const {
+    checked: t = !1,
+    classes: r = {},
+    fontSize: a
+  } = e, s = {
+    ...e,
+    checked: t
+  };
+  return /* @__PURE__ */ R(_e, {
+    className: r.root,
+    ownerState: s,
+    children: [/* @__PURE__ */ i(Ae, {
+      fontSize: a,
+      className: r.background,
+      ownerState: s
+    }), /* @__PURE__ */ i(We, {
+      fontSize: a,
+      className: r.dot,
+      ownerState: s
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" && (te.propTypes = {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: o.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense radio styling.
+   */
+  fontSize: o.oneOf(["small", "medium"])
+});
+const re = /* @__PURE__ */ g.createContext(void 0);
+process.env.NODE_ENV !== "production" && (re.displayName = "RadioGroupContext");
+function He() {
+  return g.useContext(re);
+}
+function Ke(e) {
+  return L("MuiRadio", e);
+}
+const ie = q("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"]), Xe = (e) => {
+  const {
+    classes: t,
+    color: r,
+    size: a
+  } = e, s = {
+    root: ["root", `color${v(r)}`, a !== "medium" && `size${v(a)}`]
+  };
+  return {
+    ...t,
+    ...D(s, Ke, t)
+  };
+}, Je = w(oe, {
+  shouldForwardProp: (e) => ee(e) || e === "classes",
+  name: "MuiRadio",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: r
+    } = e;
+    return [t.root, r.size !== "medium" && t[`size${v(r.size)}`], t[`color${v(r.color)}`]];
+  }
+})(I(({
+  theme: e
+}) => ({
+  color: (e.vars || e).palette.text.secondary,
+  [`&.${ie.disabled}`]: {
+    color: (e.vars || e).palette.action.disabled
+  },
+  variants: [{
+    props: {
+      color: "default",
+      disabled: !1,
+      disableRipple: !1
+    },
+    style: {
+      "&:hover": {
+        backgroundColor: e.vars ? `rgba(${e.vars.palette.action.activeChannel} / ${e.vars.palette.action.hoverOpacity})` : A(e.palette.action.active, e.palette.action.hoverOpacity)
+      }
+    }
+  }, ...Object.entries(e.palette).filter(Q()).map(([t]) => ({
+    props: {
+      color: t,
+      disabled: !1,
+      disableRipple: !1
+    },
+    style: {
+      "&:hover": {
+        backgroundColor: e.vars ? `rgba(${e.vars.palette[t].mainChannel} / ${e.vars.palette.action.hoverOpacity})` : A(e.palette[t].main, e.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(e.palette).filter(Q()).map(([t]) => ({
+    props: {
+      color: t,
+      disabled: !1
+    },
+    style: {
+      [`&.${ie.checked}`]: {
+        color: (e.vars || e).palette[t].main
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: !1
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      "&:hover": {
+        "@media (hover: none)": {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  }]
+})));
+function Ze(e, t) {
+  return typeof t == "object" && t !== null ? e === t : String(e) === String(t);
+}
+const le = /* @__PURE__ */ i(te, {
+  checked: !0
+}), ce = /* @__PURE__ */ i(te, {}), ge = /* @__PURE__ */ g.forwardRef(function(t, r) {
+  const a = W({
+    props: t,
+    name: "MuiRadio"
+  }), {
+    checked: s,
+    checkedIcon: c = le,
+    color: l = "primary",
+    icon: u = ce,
+    name: f,
+    onChange: p,
+    size: d = "medium",
+    className: n,
+    disabled: m,
+    disableRipple: k = !1,
+    ...S
+  } = a, N = H();
+  let y = m;
+  N && typeof y > "u" && (y = N.disabled), y ?? (y = !1);
+  const P = {
+    ...a,
+    disabled: y,
+    disableRipple: k,
+    color: l,
+    size: d
+  }, b = Xe(P), T = He();
+  let O = s;
+  const M = Re(p, T && T.onChange);
+  let C = f;
+  return T && (typeof O > "u" && (O = Ze(T.value, a.value)), typeof C > "u" && (C = T.name)), /* @__PURE__ */ i(Je, {
+    type: "radio",
+    icon: /* @__PURE__ */ g.cloneElement(u, {
+      fontSize: ce.props.fontSize ?? d
+    }),
+    checkedIcon: /* @__PURE__ */ g.cloneElement(c, {
+      fontSize: le.props.fontSize ?? d
+    }),
+    disabled: y,
+    ownerState: P,
+    classes: b,
+    name: C,
+    checked: O,
+    onChange: M,
+    ref: r,
+    className: j(b.root, n),
+    ...S
+  });
+});
+process.env.NODE_ENV !== "production" && (ge.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: o.bool,
+  /**
+   * The icon to display when the component is checked.
+   * @default <RadioButtonIcon checked />
+   */
+  checkedIcon: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   * @default false
+   */
+  disableRipple: o.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   * @default <RadioButtonIcon />
+   */
+  icon: o.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: o.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: K,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: o.string,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: o.func,
+  /**
+   * If `true`, the `input` element is required.
+   * @default false
+   */
+  required: o.bool,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense radio styling.
+   * @default 'medium'
+   */
+  size: o.oneOfType([o.oneOf(["medium", "small"]), o.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   */
+  value: o.any
+});
+function Qe(e) {
+  return L("MuiRadioGroup", e);
+}
+q("MuiRadioGroup", ["root", "row", "error"]);
+const Ye = (e) => {
+  const {
+    classes: t,
+    row: r,
+    error: a
+  } = e;
+  return D({
+    root: ["root", r && "row", a && "error"]
+  }, Qe, t);
+}, ye = /* @__PURE__ */ g.forwardRef(function(t, r) {
+  const {
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions: a,
+    children: s,
+    className: c,
+    defaultValue: l,
+    name: u,
+    onChange: f,
+    value: p,
+    ...d
+  } = t, n = g.useRef(null), m = Ye(t), [k, S] = fe({
+    controlled: p,
+    default: l,
+    name: "RadioGroup"
+  });
+  g.useImperativeHandle(a, () => ({
+    focus: () => {
+      let b = n.current.querySelector("input:not(:disabled):checked");
+      b || (b = n.current.querySelector("input:not(:disabled)")), b && b.focus();
+    }
+  }), []);
+  const N = Te(r, n), y = Pe(u), P = g.useMemo(() => ({
+    name: y,
+    onChange(b) {
+      S(b.target.value), f && f(b, b.target.value);
+    },
+    value: k
+  }), [y, f, S, k]);
+  return /* @__PURE__ */ i(re.Provider, {
+    value: P,
+    children: /* @__PURE__ */ i(me, {
+      role: "radiogroup",
+      ref: N,
+      className: j(m.root, c),
+      ...d,
+      children: s
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (ye.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: o.any,
+  /**
+   * The name used to reference the value of the control.
+   * If you don't provide this prop, it falls back to a randomly generated name.
+   */
+  name: o.string,
+  /**
+   * Callback fired when a radio button is selected.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {string} value The value of the selected radio button.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: o.func,
+  /**
+   * Value of the selected radio button. The DOM API casts this to a string.
+   */
+  value: o.any
+});
+function eo(e) {
+  return L("MuiSwitch", e);
+}
+const h = q("MuiSwitch", ["root", "edgeStart", "edgeEnd", "switchBase", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium", "checked", "disabled", "input", "thumb", "track"]), oo = (e) => {
+  const {
+    classes: t,
+    edge: r,
+    size: a,
+    color: s,
+    checked: c,
+    disabled: l
+  } = e, u = {
+    root: ["root", r && `edge${v(r)}`, `size${v(a)}`],
+    switchBase: ["switchBase", `color${v(s)}`, c && "checked", l && "disabled"],
+    thumb: ["thumb"],
+    track: ["track"],
+    input: ["input"]
+  }, f = D(u, eo, t);
+  return {
+    ...t,
+    // forward the disabled and checked classes to the SwitchBase
+    ...f
+  };
+}, to = w("span", {
+  name: "MuiSwitch",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: r
+    } = e;
+    return [t.root, r.edge && t[`edge${v(r.edge)}`], t[`size${v(r.size)}`]];
+  }
+})({
+  display: "inline-flex",
+  width: 34 + 12 * 2,
+  height: 14 + 12 * 2,
+  overflow: "hidden",
+  padding: 12,
+  boxSizing: "border-box",
+  position: "relative",
+  flexShrink: 0,
+  zIndex: 0,
+  // Reset the stacking context.
+  verticalAlign: "middle",
+  // For correct alignment with the text.
+  "@media print": {
+    colorAdjust: "exact"
+  },
+  variants: [{
+    props: {
+      edge: "start"
+    },
+    style: {
+      marginLeft: -8
+    }
+  }, {
+    props: {
+      edge: "end"
+    },
+    style: {
+      marginRight: -8
+    }
+  }, {
+    props: {
+      size: "small"
+    },
+    style: {
+      width: 40,
+      height: 24,
+      padding: 7,
+      [`& .${h.thumb}`]: {
+        width: 16,
+        height: 16
+      },
+      [`& .${h.switchBase}`]: {
+        padding: 4,
+        [`&.${h.checked}`]: {
+          transform: "translateX(16px)"
+        }
+      }
+    }
+  }]
+}), ro = w(oe, {
+  name: "MuiSwitch",
+  slot: "SwitchBase",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: r
+    } = e;
+    return [t.switchBase, {
+      [`& .${h.input}`]: t.input
+    }, r.color !== "default" && t[`color${v(r.color)}`]];
+  }
+})(I(({
+  theme: e
+}) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  zIndex: 1,
+  // Render above the focus ripple.
+  color: e.vars ? e.vars.palette.Switch.defaultColor : `${e.palette.mode === "light" ? e.palette.common.white : e.palette.grey[300]}`,
+  transition: e.transitions.create(["left", "transform"], {
+    duration: e.transitions.duration.shortest
+  }),
+  [`&.${h.checked}`]: {
+    transform: "translateX(20px)"
+  },
+  [`&.${h.disabled}`]: {
+    color: e.vars ? e.vars.palette.Switch.defaultDisabledColor : `${e.palette.mode === "light" ? e.palette.grey[100] : e.palette.grey[600]}`
+  },
+  [`&.${h.checked} + .${h.track}`]: {
+    opacity: 0.5
+  },
+  [`&.${h.disabled} + .${h.track}`]: {
+    opacity: e.vars ? e.vars.opacity.switchTrackDisabled : `${e.palette.mode === "light" ? 0.12 : 0.2}`
+  },
+  [`& .${h.input}`]: {
+    left: "-100%",
+    width: "300%"
+  }
+})), I(({
+  theme: e
+}) => ({
+  "&:hover": {
+    backgroundColor: e.vars ? `rgba(${e.vars.palette.action.activeChannel} / ${e.vars.palette.action.hoverOpacity})` : A(e.palette.action.active, e.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
+    }
+  },
+  variants: [...Object.entries(e.palette).filter(Q(["light"])).map(([t]) => ({
+    props: {
+      color: t
+    },
+    style: {
+      [`&.${h.checked}`]: {
+        color: (e.vars || e).palette[t].main,
+        "&:hover": {
+          backgroundColor: e.vars ? `rgba(${e.vars.palette[t].mainChannel} / ${e.vars.palette.action.hoverOpacity})` : A(e.palette[t].main, e.palette.action.hoverOpacity),
+          "@media (hover: none)": {
+            backgroundColor: "transparent"
+          }
+        },
+        [`&.${h.disabled}`]: {
+          color: e.vars ? e.vars.palette.Switch[`${t}DisabledColor`] : `${e.palette.mode === "light" ? ke(e.palette[t].main, 0.62) : Se(e.palette[t].main, 0.55)}`
+        }
+      },
+      [`&.${h.checked} + .${h.track}`]: {
+        backgroundColor: (e.vars || e).palette[t].main
+      }
+    }
+  }))]
+}))), ao = w("span", {
+  name: "MuiSwitch",
+  slot: "Track",
+  overridesResolver: (e, t) => t.track
+})(I(({
+  theme: e
+}) => ({
+  height: "100%",
+  width: "100%",
+  borderRadius: 14 / 2,
+  zIndex: -1,
+  transition: e.transitions.create(["opacity", "background-color"], {
+    duration: e.transitions.duration.shortest
+  }),
+  backgroundColor: e.vars ? e.vars.palette.common.onBackground : `${e.palette.mode === "light" ? e.palette.common.black : e.palette.common.white}`,
+  opacity: e.vars ? e.vars.opacity.switchTrack : `${e.palette.mode === "light" ? 0.38 : 0.3}`
+}))), so = w("span", {
+  name: "MuiSwitch",
+  slot: "Thumb",
+  overridesResolver: (e, t) => t.thumb
+})(I(({
+  theme: e
+}) => ({
+  boxShadow: (e.vars || e).shadows[1],
+  backgroundColor: "currentColor",
+  width: 20,
+  height: 20,
+  borderRadius: "50%"
+}))), Y = /* @__PURE__ */ g.forwardRef(function(t, r) {
+  const a = W({
+    props: t,
+    name: "MuiSwitch"
+  }), {
+    className: s,
+    color: c = "primary",
+    edge: l = !1,
+    size: u = "medium",
+    sx: f,
+    ...p
+  } = a, d = {
+    ...a,
+    color: c,
+    edge: l,
+    size: u
+  }, n = oo(d), m = /* @__PURE__ */ i(so, {
+    className: n.thumb,
+    ownerState: d
+  });
+  return /* @__PURE__ */ R(to, {
+    className: j(n.root, s),
+    sx: f,
+    ownerState: d,
+    children: [/* @__PURE__ */ i(ro, {
+      type: "checkbox",
+      icon: m,
+      checkedIcon: m,
+      ref: r,
+      ownerState: d,
+      ...p,
+      classes: {
+        ...n,
+        root: n.switchBase
+      }
+    }), /* @__PURE__ */ i(ao, {
+      className: n.track,
+      ownerState: d
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Y.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: o.bool,
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked: o.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   * @default false
+   */
+  disableRipple: o.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: o.oneOf(["end", "start", !1]),
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: o.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: o.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: K,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: o.func,
+  /**
+   * If `true`, the `input` element is required.
+   * @default false
+   */
+  required: o.bool,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense switch styling.
+   * @default 'medium'
+   */
+  size: o.oneOfType([o.oneOf(["medium", "small"]), o.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value: o.any
+});
+const no = (e, t) => {
+  const r = [
+    "EMAIL",
+    "INAPP_WEB",
+    "SMS",
+    "CALL",
+    "PUSH",
+    "WEB_PUSH",
+    "SLACK"
+  ];
+  return r.indexOf(e) - r.indexOf(t);
+}, de = (e, t) => {
+  const r = ["off", "instant", "hourly", "daily", "weekly", "monthly"];
+  return r.indexOf(e) - r.indexOf(t);
+}, pe = (e) => ({
+  off: "Off",
+  instant: "Instant",
+  hourly: "Hourly",
+  daily: "Daily",
+  weekly: "Weekly",
+  monthly: "Monthly"
+})[e], vo = ({
+  notification: e,
+  preferences: t,
+  updateDelivery: r,
+  subNotificationId: a
+}) => /* @__PURE__ */ i(ne, { children: e.channels.sort(no).map((s, c) => {
+  const l = t.find(
+    (n) => n.notificationId === e.notificationId && n.channel === s
+  );
+  if (!l)
+    return null;
+  const u = we(s), f = Ce(s), p = Object.keys(
+    e.options[s]
+  ).filter(
+    (n) => n !== "defaultDeliveryOption" && n !== "defaultDeliverOption"
+  );
+  let d;
+  return p.length === 1 ? d = /* @__PURE__ */ i(_, { variant: "body1", children: pe(l.delivery) }) : p.length === 2 && p.includes("off") ? d = /* @__PURE__ */ i(
+    Y,
+    {
+      checked: l.delivery !== "off",
+      onChange: (n, m) => {
+        if (m) {
+          const k = p.find((S) => S !== "off");
+          r(
+            e.notificationId,
+            s,
+            k,
+            a
+          );
+        } else
+          r(
+            e.notificationId,
+            s,
+            "off",
+            a
+          );
+      }
+    }
+  ) : d = /* @__PURE__ */ R(ne, { children: [
+    /* @__PURE__ */ i(
+      Y,
+      {
+        checked: l.delivery !== "off",
+        onChange: (n, m) => {
+          if (m) {
+            const k = p.sort(de).find((S) => S !== "off");
+            r(
+              e.notificationId,
+              s,
+              k,
+              a
+            );
+          } else
+            r(
+              e.notificationId,
+              s,
+              "off",
+              a
+            );
+        }
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          width: "100%",
+          marginTop: 8,
+          maxHeight: l.delivery !== "off" ? 1e3 : 0,
+          overflow: "hidden",
+          transition: "max-height 0.3s ease"
+        },
+        children: /* @__PURE__ */ R("div", { children: [
+          /* @__PURE__ */ i("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ i(_, { variant: "body1", fontWeight: 600, children: "Choose frequency:" }) }),
+          /* @__PURE__ */ i(
+            ye,
+            {
+              value: l.delivery,
+              onChange: (n) => {
+                r(
+                  e.notificationId,
+                  s,
+                  n.target.value,
+                  a
+                );
+              },
+              children: /* @__PURE__ */ i(Oe, { direction: "column", style: { paddingTop: 10 }, children: p.filter((n) => n !== "off").sort(de).map((n) => /* @__PURE__ */ i(
+                he,
+                {
+                  control: /* @__PURE__ */ i(ge, {}),
+                  value: n,
+                  label: pe(n)
+                },
+                n
+              )) })
+            }
+          )
+        ] })
+      }
+    )
+  ] }), /* @__PURE__ */ R("div", { children: [
+    /* @__PURE__ */ R(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          marginTop: c === 0 ? 0 : 12,
+          marginBottom: c === e.channels.length - 1 ? 0 : 12
+        },
+        children: [
+          /* @__PURE__ */ R(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8
+              },
+              children: [
+                f,
+                /* @__PURE__ */ i(_, { variant: "body1", children: u })
+              ]
+            }
+          ),
+          d
+        ]
+      }
+    ),
+    c !== e.channels.length - 1 && /* @__PURE__ */ i(Fe, {})
+  ] }, s);
+}) });
 export {
-  i as PreferenceInput
+  vo as PreferenceInput
 };