fsk-design-system 1.0.14 → 1.0.16

package/dist/Alert-CGNs1E7Z.js

@@ -0,0 +1,388 @@
+import { j as G } from "./emotion-react-jsx-runtime.browser.esm-BzbZGnbz.js";
+import { S as ee } from "./close-CdIAG4DZ.js";
+import { B as oe } from "./Button-Bt34w4fJ.js";
+import { c as te } from "./emotion-styled-base.browser.esm-B5hPI6jF.js";
+import * as i from "react";
+import { R as ne } from "./CheckCircleFilled-aYCJP93m.js";
+import { R as re } from "./CloseCircleFilled-aRFAKWCB.js";
+import { R as ie } from "./CloseOutlined-DyiYNFyx.js";
+import { R as ce } from "./ExclamationCircleFilled-B4-6opLK.js";
+import { R as ae } from "./InfoCircleFilled-S2iy4_UJ.js";
+import { g as se, e as le, b as L, u as de, c as S, v as me, G as pe, H as w, I as ue, J as ge, h as be, i as fe } from "./genStyleUtils-git9kFa9.js";
+import { b as ye } from "./index-C2fzIJCf.js";
+import { p as Ie } from "./pickAttrs-J0nYVkHF.js";
+import { r as Ce } from "./reactNode-CwSzDQK_.js";
+import { d as ve } from "./warning-CzsCZOlq.js";
+const x = (e, o, t, n, r) => ({
+  background: e,
+  border: `${L(n.lineWidth)} ${n.lineType} ${o}`,
+  [`${r}-icon`]: {
+    color: t
+  }
+}), he = (e) => {
+  const {
+    componentCls: o,
+    motionDurationSlow: t,
+    marginXS: n,
+    marginSM: r,
+    fontSize: c,
+    fontSizeLG: l,
+    lineHeight: d,
+    borderRadiusLG: u,
+    motionEaseInOutCirc: m,
+    withDescriptionIconSize: g,
+    colorText: b,
+    colorTextHeading: I,
+    withDescriptionPadding: C,
+    defaultPadding: a
+  } = e;
+  return {
+    [o]: Object.assign(Object.assign({}, le(e)), {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      padding: a,
+      wordWrap: "break-word",
+      borderRadius: u,
+      [`&${o}-rtl`]: {
+        direction: "rtl"
+      },
+      [`${o}-content`]: {
+        flex: 1,
+        minWidth: 0
+      },
+      [`${o}-icon`]: {
+        marginInlineEnd: n,
+        lineHeight: 0
+      },
+      "&-description": {
+        display: "none",
+        fontSize: c,
+        lineHeight: d
+      },
+      "&-message": {
+        color: I
+      },
+      [`&${o}-motion-leave`]: {
+        overflow: "hidden",
+        opacity: 1,
+        transition: `max-height ${t} ${m}, opacity ${t} ${m},
+        padding-top ${t} ${m}, padding-bottom ${t} ${m},
+        margin-bottom ${t} ${m}`
+      },
+      [`&${o}-motion-leave-active`]: {
+        maxHeight: 0,
+        marginBottom: "0 !important",
+        paddingTop: 0,
+        paddingBottom: 0,
+        opacity: 0
+      }
+    }),
+    [`${o}-with-description`]: {
+      alignItems: "flex-start",
+      padding: C,
+      [`${o}-icon`]: {
+        marginInlineEnd: r,
+        fontSize: g,
+        lineHeight: 0
+      },
+      [`${o}-message`]: {
+        display: "block",
+        marginBottom: n,
+        color: I,
+        fontSize: l
+      },
+      [`${o}-description`]: {
+        display: "block",
+        color: b
+      }
+    },
+    [`${o}-banner`]: {
+      marginBottom: 0,
+      border: "0 !important",
+      borderRadius: 0
+    }
+  };
+}, xe = (e) => {
+  const {
+    componentCls: o,
+    colorSuccess: t,
+    colorSuccessBorder: n,
+    colorSuccessBg: r,
+    colorWarning: c,
+    colorWarningBorder: l,
+    colorWarningBg: d,
+    colorError: u,
+    colorErrorBorder: m,
+    colorErrorBg: g,
+    colorInfo: b,
+    colorInfoBorder: I,
+    colorInfoBg: C
+  } = e;
+  return {
+    [o]: {
+      "&-success": x(r, n, t, e, o),
+      "&-info": x(C, I, b, e, o),
+      "&-warning": x(d, l, c, e, o),
+      "&-error": Object.assign(Object.assign({}, x(g, m, u, e, o)), {
+        [`${o}-description > pre`]: {
+          margin: 0,
+          padding: 0
+        }
+      })
+    }
+  };
+}, Ge = (e) => {
+  const {
+    componentCls: o,
+    iconCls: t,
+    motionDurationMid: n,
+    marginXS: r,
+    fontSizeIcon: c,
+    colorIcon: l,
+    colorIconHover: d
+  } = e;
+  return {
+    [o]: {
+      "&-action": {
+        marginInlineStart: r
+      },
+      [`${o}-close-icon`]: {
+        marginInlineStart: r,
+        padding: 0,
+        overflow: "hidden",
+        fontSize: c,
+        lineHeight: L(c),
+        backgroundColor: "transparent",
+        border: "none",
+        outline: "none",
+        cursor: "pointer",
+        [`${t}-close`]: {
+          color: l,
+          transition: `color ${n}`,
+          "&:hover": {
+            color: d
+          }
+        }
+      },
+      "&-close-text": {
+        color: l,
+        transition: `color ${n}`,
+        "&:hover": {
+          color: d
+        }
+      }
+    }
+  };
+}, Se = (e) => ({
+  withDescriptionIconSize: e.fontSizeHeading3,
+  defaultPadding: `${e.paddingContentVerticalSM}px 12px`,
+  withDescriptionPadding: `${e.paddingMD}px ${e.paddingContentHorizontalLG}px`
+}), Ne = se("Alert", (e) => [he(e), xe(e), Ge(e)], Se);
+var E = function(e, o) {
+  var t = {};
+  for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && o.indexOf(n) < 0 && (t[n] = e[n]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var r = 0, n = Object.getOwnPropertySymbols(e); r < n.length; r++)
+    o.indexOf(n[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[r]) && (t[n[r]] = e[n[r]]);
+  return t;
+};
+const $e = {
+  success: ne,
+  info: ae,
+  error: re,
+  warning: ce
+}, We = (e) => {
+  const {
+    icon: o,
+    prefixCls: t,
+    type: n
+  } = e, r = $e[n] || null;
+  return o ? Ce(o, /* @__PURE__ */ i.createElement("span", {
+    className: `${t}-icon`
+  }, o), () => ({
+    className: S(`${t}-icon`, o.props.className)
+  })) : /* @__PURE__ */ i.createElement(r, {
+    className: `${t}-icon`
+  });
+}, Be = (e) => {
+  const {
+    isClosable: o,
+    prefixCls: t,
+    closeIcon: n,
+    handleClose: r,
+    ariaProps: c
+  } = e, l = n === !0 || n === void 0 ? /* @__PURE__ */ i.createElement(ie, null) : n;
+  return o ? /* @__PURE__ */ i.createElement("button", Object.assign({
+    type: "button",
+    onClick: r,
+    className: `${t}-close-icon`,
+    tabIndex: 0
+  }, c), l) : null;
+}, N = /* @__PURE__ */ i.forwardRef((e, o) => {
+  const {
+    description: t,
+    prefixCls: n,
+    message: r,
+    banner: c,
+    className: l,
+    rootClassName: d,
+    style: u,
+    onMouseEnter: m,
+    onMouseLeave: g,
+    onClick: b,
+    afterClose: I,
+    showIcon: C,
+    closable: a,
+    closeText: v,
+    closeIcon: f,
+    action: $,
+    id: z
+  } = e, A = E(e, ["description", "prefixCls", "message", "banner", "className", "rootClassName", "style", "onMouseEnter", "onMouseLeave", "onClick", "afterClose", "showIcon", "closable", "closeText", "closeIcon", "action", "id"]), [W, V] = i.useState(!1);
+  process.env.NODE_ENV !== "production" && ve("Alert").deprecated(!v, "closeText", "closable.closeIcon");
+  const B = i.useRef(null);
+  i.useImperativeHandle(o, () => ({
+    nativeElement: B.current
+  }));
+  const {
+    getPrefixCls: j,
+    direction: M,
+    closable: y,
+    closeIcon: H,
+    className: J,
+    style: k
+  } = de("alert"), s = j("alert", n), [Y, _, D] = Ne(s), P = (p) => {
+    var h;
+    V(!0), (h = e.onClose) === null || h === void 0 || h.call(e, p);
+  }, R = i.useMemo(() => e.type !== void 0 ? e.type : c ? "warning" : "info", [e.type, c]), Q = i.useMemo(() => typeof a == "object" && a.closeIcon || v ? !0 : typeof a == "boolean" ? a : f !== !1 && f !== null && f !== void 0 ? !0 : !!y, [v, f, a, y]), O = c && C === void 0 ? !0 : C, T = S(s, `${s}-${R}`, {
+    [`${s}-with-description`]: !!t,
+    [`${s}-no-icon`]: !O,
+    [`${s}-banner`]: !!c,
+    [`${s}-rtl`]: M === "rtl"
+  }, J, l, d, D, _), F = Ie(A, {
+    aria: !0,
+    data: !0
+  }), U = i.useMemo(() => typeof a == "object" && a.closeIcon ? a.closeIcon : v || (f !== void 0 ? f : typeof y == "object" && y.closeIcon ? y.closeIcon : H), [f, a, v, H]), K = i.useMemo(() => {
+    const p = a ?? y;
+    if (typeof p == "object") {
+      const {
+        closeIcon: h
+      } = p;
+      return E(p, ["closeIcon"]);
+    }
+    return {};
+  }, [a, y]);
+  return Y(/* @__PURE__ */ i.createElement(ye, {
+    visible: !W,
+    motionName: `${s}-motion`,
+    motionAppear: !1,
+    motionEnter: !1,
+    onLeaveStart: (p) => ({
+      maxHeight: p.offsetHeight
+    }),
+    onLeaveEnd: I
+  }, (p, h) => {
+    let {
+      className: X,
+      style: q
+    } = p;
+    return /* @__PURE__ */ i.createElement("div", Object.assign({
+      id: z,
+      ref: me(B, h),
+      "data-show": !W,
+      className: S(T, X),
+      style: Object.assign(Object.assign(Object.assign({}, k), u), q),
+      onMouseEnter: m,
+      onMouseLeave: g,
+      onClick: b,
+      role: "alert"
+    }, F), O ? /* @__PURE__ */ i.createElement(We, {
+      description: t,
+      icon: e.icon,
+      prefixCls: s,
+      type: R
+    }) : null, /* @__PURE__ */ i.createElement("div", {
+      className: `${s}-content`
+    }, r ? /* @__PURE__ */ i.createElement("div", {
+      className: `${s}-message`
+    }, r) : null, t ? /* @__PURE__ */ i.createElement("div", {
+      className: `${s}-description`
+    }, t) : null), $ ? /* @__PURE__ */ i.createElement("div", {
+      className: `${s}-action`
+    }, $) : null, /* @__PURE__ */ i.createElement(Be, {
+      isClosable: Q,
+      prefixCls: s,
+      closeIcon: U,
+      handleClose: P,
+      ariaProps: K
+    }));
+  }));
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "Alert");
+function He(e, o, t) {
+  return o = w(o), pe(e, ue() ? Reflect.construct(o, t || [], w(e).constructor) : o.apply(e, t));
+}
+let Re = /* @__PURE__ */ function(e) {
+  function o() {
+    var t;
+    return fe(this, o), t = He(this, o, arguments), t.state = {
+      error: void 0,
+      info: {
+        componentStack: ""
+      }
+    }, t;
+  }
+  return ge(o, e), be(o, [{
+    key: "componentDidCatch",
+    value: function(n, r) {
+      this.setState({
+        error: n,
+        info: r
+      });
+    }
+  }, {
+    key: "render",
+    value: function() {
+      const {
+        message: n,
+        description: r,
+        id: c,
+        children: l
+      } = this.props, {
+        error: d,
+        info: u
+      } = this.state, m = (u == null ? void 0 : u.componentStack) || null, g = typeof n > "u" ? (d || "").toString() : n, b = typeof r > "u" ? m : r;
+      return d ? /* @__PURE__ */ i.createElement(N, {
+        id: c,
+        type: "error",
+        message: g,
+        description: /* @__PURE__ */ i.createElement("pre", {
+          style: {
+            fontSize: "0.9em",
+            overflowX: "auto"
+          }
+        }, b)
+      }) : l;
+    }
+  }]);
+}(i.Component);
+const Z = N;
+Z.ErrorBoundary = Re;
+function Oe() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const Xe = /* @__PURE__ */ te(Z, process.env.NODE_ENV === "production" ? {
+  target: "e17981h30"
+} : {
+  target: "e17981h30",
+  label: "StyledAlert"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1osgt02",
+  styles: "padding:var(--gap-md) var(--gap-lg);background-color:var(--color-surface-base-primary);border:1px solid var(--color-border-tertiary);border-radius:var(--radius-md);box-shadow:var(--shadow-alert);.ant-alert-icon{margin-right:var(--gap-4xs);font-size:24px;}.ant-alert-message{font:var(--font-subheading-xl);color:var(--color-text-primary);&:not(:last-child){margin-bottom:var(--gap-3xs);}}.ant-alert-description{font:var(--font-body-regular-m);color:var(--color-text-primary);}.ant-alert-close-icon button svg{width:14px;height:14px;fill:var(--color-icon-tertiary);}svg{width:1em;height:1em;fill:currentColor;}"
+} : {
+  name: "1osgt02",
+  styles: "padding:var(--gap-md) var(--gap-lg);background-color:var(--color-surface-base-primary);border:1px solid var(--color-border-tertiary);border-radius:var(--radius-md);box-shadow:var(--shadow-alert);.ant-alert-icon{margin-right:var(--gap-4xs);font-size:24px;}.ant-alert-message{font:var(--font-subheading-xl);color:var(--color-text-primary);&:not(:last-child){margin-bottom:var(--gap-3xs);}}.ant-alert-description{font:var(--font-body-regular-m);color:var(--color-text-primary);}.ant-alert-close-icon button svg{width:14px;height:14px;fill:var(--color-icon-tertiary);}svg{width:1em;height:1em;fill:currentColor;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6L1VzZXJzL2tpcmlsbC9EZXNrdG9wL3dvcmsvZnNrL2Rlc2lnbi1zeXN0ZW0vZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvQWxlcnQvQWxlcnQuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0MiLCJmaWxlIjoiQzovVXNlcnMva2lyaWxsL0Rlc2t0b3Avd29yay9mc2svZGVzaWduLXN5c3RlbS9mcm9udGVuZC9zcmMvY29tcG9uZW50cy9BbGVydC9BbGVydC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCJcbmltcG9ydCBBbGVydCBmcm9tIFwiYW50ZC9lcy9hbGVydFwiXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBbGVydCA9IHN0eWxlZChBbGVydClgXG4gIHBhZGRpbmc6IHZhcigtLWdhcC1tZCkgdmFyKC0tZ2FwLWxnKTtcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1zdXJmYWNlLWJhc2UtcHJpbWFyeSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbG9yLWJvcmRlci10ZXJ0aWFyeSk7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cy1tZCk7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1hbGVydCk7XG5cbiAgLmFudC1hbGVydC1pY29uIHtcbiAgICBtYXJnaW4tcmlnaHQ6IHZhcigtLWdhcC00eHMpO1xuXG4gICAgZm9udC1zaXplOiAyNHB4O1xuICB9XG5cbiAgLmFudC1hbGVydC1tZXNzYWdlIHtcbiAgICBmb250OiB2YXIoLS1mb250LXN1YmhlYWRpbmcteGwpO1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0LXByaW1hcnkpO1xuXG4gICAgJjpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICAgIG1hcmdpbi1ib3R0b206IHZhcigtLWdhcC0zeHMpO1xuICAgIH1cbiAgfVxuXG4gIC5hbnQtYWxlcnQtZGVzY3JpcHRpb24ge1xuICAgIGZvbnQ6IHZhcigtLWZvbnQtYm9keS1yZWd1bGFyLW0pO1xuICAgIGNvbG9yOiB2YXIoLS1jb2xvci10ZXh0LXByaW1hcnkpO1xuICB9XG5cbiAgLmFudC1hbGVydC1jbG9zZS1pY29uIGJ1dHRvbiBzdmcge1xuICAgIHdpZHRoOiAxNHB4O1xuICAgIGhlaWdodDogMTRweDtcblxuICAgIGZpbGw6IHZhcigtLWNvbG9yLWljb24tdGVydGlhcnkpO1xuICB9XG5cbiAgc3ZnIHtcbiAgICB3aWR0aDogMWVtO1xuICAgIGhlaWdodDogMWVtO1xuXG4gICAgZmlsbDogY3VycmVudENvbG9yO1xuICB9XG5gXG4iXX0= */",
+  toString: Oe
+}), Pe = (e) => /* @__PURE__ */ G(Xe, { closeIcon: /* @__PURE__ */ G(oe, { type: "link-secondary", size: "xs", icon: /* @__PURE__ */ G(ee, {}) }), ...e });
+export {
+  Pe as A
+};