@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
75 lines (74 loc) • 2.65 kB
JavaScript
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { SerendieSymbolAlertCircleFilled as p, SerendieSymbolAlertCircle as y } from "@serendie/symbols";
import { cx as b } from "../../styled-system/css/cx.js";
import { sva as g } from "../../styled-system/css/sva.js";
const t = g({
slots: ["container", "icon", "title", "description"],
base: {
container: {
display: "grid",
gridTemplateColumns: "24px 1fr",
columnGap: "sd.system.dimension.spacing.twoExtraSmall",
rowGap: "sd.system.dimension.spacing.extraSmall",
p: "sd.system.dimension.spacing.small",
borderRadius: "sd.system.dimension.radius.medium"
},
title: {
textStyle: "sd.system.typography.body.medium_compact",
expanded: {
textStyle: "sd.system.typography.body.medium_expanded"
}
},
description: {
gridArea: "2 / 2 / 3 / 3",
textStyle: "sd.system.typography.body.medium_compact",
expanded: {
textStyle: "sd.system.typography.body.medium_expanded"
}
}
},
variants: {
type: {
information: {
container: {
bg: "sd.system.color.component.surfaceContainer",
color: "sd.system.color.component.onSurface"
}
},
error: {
container: {
bg: "sd.system.color.impression.negativeContainer",
color: "sd.system.color.impression.onNegativeContainer",
borderWidth: "sd.system.dimension.border.medium",
borderStyle: "solid",
borderColor: "sd.system.color.impression.negativeContainer"
},
icon: {
color: "sd.system.color.impression.negative"
}
},
warning: {
container: {
bg: "sd.system.color.impression.noticeContainer",
color: "sd.system.color.impression.onNoticeContainer",
borderWidth: "sd.system.dimension.border.medium",
borderStyle: "solid",
borderColor: "sd.system.color.impression.noticeContainer"
}
}
}
},
defaultVariants: {
type: "information"
}
}), h = (n) => {
const [s, { title: d, icon: r, description: a, className: m, ...c }] = t.splitVariantProps(n), o = t(s), i = s.type || "alert-circle";
return /* @__PURE__ */ l("div", { className: b(o.container, m), ...c, children: [
/* @__PURE__ */ e("div", { className: o.icon, children: r || (i === "error" || i === "warning" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(y, {})) }),
/* @__PURE__ */ e("h2", { className: o.title, children: d }),
/* @__PURE__ */ e("p", { className: o.description, children: a })
] });
};
export {
h as Banner
};