braid-design-system
Version:
Themeable design system for the SEEK Group
43 lines (42 loc) • 1.5 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Box } from "../Box/Box.mjs";
import { Column } from "../Column/Column.mjs";
import { Columns } from "../Columns/Columns.mjs";
import { Text } from "../Text/Text.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
import { IconCritical } from "../icons/IconCritical/IconCritical.mjs";
import { IconPromote } from "../icons/IconPromote/IconPromote.mjs";
import { IconInfo } from "../icons/IconInfo/IconInfo.mjs";
import { IconPositive } from "../icons/IconPositive/IconPositive.mjs";
const icons = {
positive: IconPositive,
info: IconInfo,
promote: IconPromote,
critical: IconCritical
};
const Notice = ({
tone = "info",
data,
children,
...restProps
}) => {
const Icon = icons[tone];
return /* @__PURE__ */ jsx(
Box,
{
role: "alert",
"aria-live": "polite",
textAlign: "left",
...buildDataAttributes({ data, validateRestProps: restProps }),
children: /* @__PURE__ */ jsx(DefaultTextPropsProvider, { tone, children: /* @__PURE__ */ jsxs(Columns, { space: iconSlotSpace, children: [
/* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Icon, {}) }) }),
/* @__PURE__ */ jsx(Column, { children })
] }) })
}
);
};
export {
Notice
};