@payfit/unity-components
Version:
85 lines (84 loc) • 2.62 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { CircularIconButton as t } from "../icon-button/CircularIconButton.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
//#region src/components/alert/Alert.tsx
var o = r({
slots: {
base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200 uy:[&>*:first-child:not(header)]:sm:pt-50",
icon: "uy:sm:mt-50 uy:flex uy:justify-between uy:items-center uy:sm:items-start"
},
variants: { variant: {
info: {
base: "uy:bg-surface-info-lowest uy:border-border-info-lowest",
icon: "uy:text-content-info"
},
warning: {
base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest",
icon: "uy:text-content-warning"
},
success: {
base: "uy:bg-surface-success-lowest uy:border-border-success-lowest",
icon: "uy:text-content-success"
},
danger: {
base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest",
icon: "uy:text-content-danger"
},
insight: {
base: "uy:bg-surface-neutral-lowest uy:border-surface-neutral-lowest",
icon: "uy:text-content-neutral-lowest"
}
} },
defaultVariants: { variant: "info" }
}), s = {
info: "InfoFilled",
warning: "WarningFilled",
success: "CheckCircleFilled",
danger: "WarningCircleFilled",
insight: "LightbulbFilamentFilled"
}, c = n(({ children: n, variant: r = "info", isDismissable: c = !1, onDismiss: l, dismissButtonLabel: u, ...d }, f) => {
let { base: p, content: m, icon: h } = o({ variant: r }), g = s[r], _ = {
role: r === "danger" ? "alert" : "status",
"aria-live": r === "danger" ? "assertive" : "polite",
"aria-atomic": !0,
"aria-relevant": "additions removals"
};
return /* @__PURE__ */ a("div", {
...d,
"data-dd-privacy": "mask",
ref: f,
className: p(),
..._,
children: [
/* @__PURE__ */ a("div", {
className: h(),
children: [/* @__PURE__ */ i(e, {
src: g,
size: 24,
role: "presentation"
}), c && u && /* @__PURE__ */ i(t, {
title: u,
icon: "CloseOutlined",
onPress: l,
className: "uy:sm:hidden"
})]
}),
/* @__PURE__ */ i("section", {
className: m(),
children: n
}),
c && u && /* @__PURE__ */ i(t, {
title: u,
icon: "CloseOutlined",
onPress: l,
className: "uy:hidden uy:sm:flex"
})
]
});
});
c.displayName = "Alert";
//#endregion
export { c as Alert };