welcome-ui/dist/Alert.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as s } from "./jsx-runtime-Bqq1Hxg9.mjs";
import V, { Children as j, cloneElement as m } from "react";
import { Box as B } from "./Box.mjs";
import { Button as w } from "./Button.mjs";
import { CloseButton as _ } from "./CloseButton.mjs";
import { forwardRef as d } from "./System.mjs";
import c, { th as r, css as f, system as D } from "@xstyled/styled-components";
import { Text as O } from "./Text.mjs";
import { VariantIcon as q } from "./VariantIcon.mjs";
const x = c.divBox`
  display: flex;
  gap: md;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
`, A = c(q)`
  position: absolute;
  align-self: flex-start;
`, F = c.divBox(({ icon: o, isFullWidth: e, size: n, variant: i }) => f`
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: ${e ? "100%" : "max-content"};
    ${r("alerts.default")};
    ${r(`alerts.${i}`)};
    ${r(`alerts.sizes.${n}`)};

    ${o !== null && n === "sm" && f`
      ${x} {
        margin-left: calc(${r("icons.sm")} + ${r("space.md")});
      }
    `}

    ${o !== null && n === "md" && f`
      ${x} {
        margin-left: calc(${r("icons.md")} + ${r("space.lg")});
        gap: ${r("space.lg")};
        font-size: ${r("fontSizes.md")};
      }

      ${A} {
        margin-top: -3;
      }
    `}
  `), G = c(O)(({ hasCloseButton: o, variant: e }) => f`
    font-weight: medium;
    ${r("alerts.title.default")};
    ${r(`alerts.title.sizes.${e}`)};
    margin-right: ${o ? "xl" : void 0};
    ${D};
  `), b = ({
  children: o,
  dataTestId: e,
  hasCloseButton: n,
  variant: i
}) => /* @__PURE__ */ s.jsx(G, { "data-testid": e, hasCloseButton: n, variant: i, children: o }), H = d(
  ({
    children: o,
    cta: e,
    dataTestId: n,
    handleClose: i,
    icon: p,
    isFullWidth: S,
    size: a = "sm",
    variant: l = "default",
    ...C
  }, I) => {
    const k = n ? `${n}-close-button` : void 0, E = l === "beige" ? "default" : l, u = l === "ai", R = j.toArray(o).map((t) => t.type === b ? m(t, { hasCloseButton: !!i, variant: a }) : t), $ = (t) => {
      var y;
      if (t) {
        if (t.type === v)
          return m(t, {
            ai: u,
            size: a,
            variant: u ? "primary" : void 0
          });
        if (t.type === h)
          return m(t, {
            ai: u,
            size: a
          });
        if ((y = t.props) != null && y.children)
          return m(t, {
            ...t.props,
            children: j.map(
              t.props.children,
              (T) => $(T)
            )
          });
      }
      return t;
    }, g = V.isValidElement(e) ? $(e) : e;
    return /* @__PURE__ */ s.jsxs(
      F,
      {
        "data-testid": n,
        icon: p,
        isFullWidth: S,
        ref: I,
        size: a,
        variant: l,
        ...C,
        children: [
          !!i && /* @__PURE__ */ s.jsx(
            _,
            {
              dataTestId: k,
              onClick: i,
              position: "absolute",
              right: "sm",
              size: "xs",
              top: "sm"
            }
          ),
          p !== null && /* @__PURE__ */ s.jsx(A, { icon: p, size: a, variant: E }),
          /* @__PURE__ */ s.jsxs(x, { children: [
            /* @__PURE__ */ s.jsx(B, { flex: 1, children: R }),
            !!g && /* @__PURE__ */ s.jsx(B, { alignItems: "center", display: "flex", gap: "sm", children: g })
          ] })
        ]
      }
    );
  }
), v = d(
  ({ variant: o = "secondary", ...e }, n) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: o })
), h = d(
  ({ variant: o = "tertiary", ...e }, n) => /* @__PURE__ */ s.jsx(w, { flexShrink: 0, ref: n, w: "fit-content", ...e, variant: o })
), X = Object.assign(H, {
  Button: v,
  SecondaryButton: h,
  Title: b
});
export {
  X as Alert
};