@luscii-healthtech/web-ui 59.0.1 → 59.2.0

package/dist/index.development.js

@@ -374,6 +374,42 @@ const SvgActionWeightColoredIcon = (props) => jsxRuntime.jsxs("svg", Object.assi
 }, children: jsxRuntime.jsx("path", { fill: "#fff", d: "M10.255 5.58q1.545-.15 3.435-.15 2.08 0 3.785.182a3.755 3.755 0 0 1 3.188 4.842 4.42 4.42 0 0 1-4.74 3.086 19 19 0 0 0-2.233-.13q-1.022 0-2.001.108a4.385 4.385 0 0 1-4.675-3.064 3.777 3.777 0 0 1 3.241-4.874" }) }), jsxRuntime.jsxs("g", { mask: "url(#a)", children: [jsxRuntime.jsx("path", { fill: "#fff", d: "M10.255 5.58q1.545-.15 3.435-.15 2.08 0 3.785.182a3.755 3.755 0 0 1 3.188 4.842 4.42 4.42 0 0 1-4.74 3.086 19 19 0 0 0-2.233-.13q-1.022 0-2.001.108a4.385 4.385 0 0 1-4.675-3.064 3.777 3.777 0 0 1 3.241-4.874" }), jsxRuntime.jsx("path", { fill: "#F09", fillRule: "evenodd", d: "m13.969 11.43 1.714 3.429h-3.429z", clipRule: "evenodd" })] }), jsxRuntime.jsx("path", { fill: "#0F3554", d: "M13.666 7.84v1.413c0 .158.191.286.428.286s.429-.128.429-.286V7.84c0-.158-.192-.286-.429-.286s-.428.128-.428.286m-3.65 1.044.535 1.223a.314.314 0 0 0 .4.156.28.28 0 0 0 .167-.373l-.536-1.222a.314.314 0 0 0-.399-.156c-.156.06-.231.226-.168.372m7.915 0-.535 1.223a.314.314 0 0 1-.4.156c-.156-.06-.231-.227-.167-.373l.536-1.222a.314.314 0 0 1 .399-.156c.156.06.231.226.167.372", opacity: 0.384 }), jsxRuntime.jsx("path", { fill: "#fff", d: "M18.697 4.686c1.123-.008 2.042.38 2.783 1.17.729.776 1.077 1.883 1.034 3.358-.008.268.183.492.426.5.242.009.446-.202.453-.47.05-1.732-.381-3.107-1.303-4.088-.91-.968-2.05-1.45-3.398-1.441-.243.001-.439.22-.438.488s.2.484.443.483", opacity: 0.252 })] }));
 var ActionWeightColoredIcon = IconWrapper$1(SvgActionWeightColoredIcon);
 
+const SvgAlertAmberColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 9, fill: "var(--ui-color-icon-alerts-medium-amber)" }) }));
+var AlertAmberColoredIcon = IconWrapper$1(SvgAlertAmberColoredIcon);
+
+const SvgAlertCrimsonColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("rect", { width: 18, height: 18, x: 3, y: 3, fill: "var(--ui-color-icon-alerts-high-crimson)", rx: 2 }) }));
+var AlertCrimsonColoredIcon = IconWrapper$1(SvgAlertCrimsonColoredIcon);
+
+const SvgAlertFogColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-neutral-fog)", d: "M20.749 11.02a2.04 2.04 0 0 1 0 1.96l-3.3 6A1.95 1.95 0 0 1 15.745 20h-7.49c-.706 0-1.358-.39-1.704-1.02l-3.3-6a2.04 2.04 0 0 1 0-1.96l3.3-6C6.897 4.39 7.549 4 8.255 4h7.49c.706 0 1.358.39 1.704 1.02z" }) }));
+var AlertFogColoredIcon = IconWrapper$1(SvgAlertFogColoredIcon);
+
+const SvgAlertGraphiteColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-neutral-graphite)", d: "M15.877 4.005a1.95 1.95 0 0 1 1.572 1.015l3.3 6a2.04 2.04 0 0 1 0 1.96l-3.3 6-.068.116a1.95 1.95 0 0 1-1.504.9l-.132.004h-7.49c-.706 0-1.358-.39-1.704-1.02l-3.3-6a2.04 2.04 0 0 1 0-1.96l3.3-6C6.897 4.39 7.549 4 8.255 4h7.49zM6.135 12l2.75 5h6.23l2.75-5-2.75-5h-6.23z" }) }));
+var AlertGraphiteColoredIcon = IconWrapper$1(SvgAlertGraphiteColoredIcon);
+
+const SvgAlertGreenColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-low-green)", d: "M11.19 4.118a1 1 0 0 1 1.62 0l2.693 3.72c.133.183.324.315.542.376l4.485 1.252a1 1 0 0 1 .507 1.594l-2.803 3.447c-.15.186-.23.42-.223.66l.128 4.398a1 1 0 0 1-1.195 1.01l-.124-.033-4.5-1.515a1 1 0 0 0-.64 0l-4.5 1.515a1 1 0 0 1-1.319-.977l.128-4.398a1 1 0 0 0-.17-.589l-.053-.071-2.803-3.447a1 1 0 0 1 .507-1.594l4.485-1.252a1 1 0 0 0 .432-.25l.11-.126zm-1.074 4.893a3 3 0 0 1-1.623 1.13l-3.016.84 1.84 2.264a3 3 0 0 1 .671 1.98l-.087 2.964 3.142-1.057a3 3 0 0 1 1.679-.069l.235.069 3.14 1.056-.085-2.963a3 3 0 0 1 .67-1.98l1.84-2.264-3.015-.84a3 3 0 0 1-1.623-1.13L12 6.408z" }) }));
+var AlertGreenColoredIcon = IconWrapper$1(SvgAlertGreenColoredIcon);
+
+const SvgAlertLeafColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-low-leaf)", d: "M11.19 4.118a1 1 0 0 1 1.62 0l2.693 3.72c.133.183.324.315.542.376l4.485 1.252a1 1 0 0 1 .507 1.594l-2.803 3.447c-.15.186-.23.42-.223.66l.049 1.69-.921 2.737-2.886.084-1.934-.65a1 1 0 0 0-.638 0L7.18 20.541a1 1 0 0 1-1.319-.977l.128-4.398a1 1 0 0 0-.17-.589l-.053-.071-2.803-3.447a1 1 0 0 1 .507-1.594l4.485-1.252a1 1 0 0 0 .432-.25l.11-.126zm6.949 15.447a1 1 0 0 1-1.195 1.01l-.124-.033-2.567-.864 2.886-.084.92-2.738zm-6.403-9.381a5 5 0 0 1-2.706 1.883l-.079.022a5 5 0 0 1 1.036 3.194l-.003.094.421-.14a5 5 0 0 1 2.994-.062l.196.061.42.141-.002-.094a5 5 0 0 1 1.035-3.194l-.078-.022a5 5 0 0 1-2.706-1.883L12 9.819z" }) }));
+var AlertLeafColoredIcon = IconWrapper$1(SvgAlertLeafColoredIcon);
+
+const SvgAlertMintColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-low-mint)", d: "M11.19 4.118a1 1 0 0 1 1.62 0l2.693 3.72a1 1 0 0 0 .542.376l4.485 1.251a1 1 0 0 1 .507 1.594l-2.802 3.448a1 1 0 0 0-.224.66l.128 4.398a1 1 0 0 1-1.319.977l-4.501-1.514a1 1 0 0 0-.638 0L7.18 20.542a1 1 0 0 1-1.319-.977l.128-4.399a1 1 0 0 0-.223-.66L2.963 11.06a1 1 0 0 1 .507-1.594l4.485-1.25a1 1 0 0 0 .542-.378z" }) }));
+var AlertMintColoredIcon = IconWrapper$1(SvgAlertMintColoredIcon);
+
+const SvgAlertNeutralColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-neutral-neutral)", d: "M15.877 4.005a1.95 1.95 0 0 1 1.572 1.015l3.3 6a2.04 2.04 0 0 1 0 1.96l-3.3 6-.068.116a1.95 1.95 0 0 1-1.504.9l-.132.004h-7.49c-.706 0-1.358-.39-1.704-1.02l-3.3-6a2.04 2.04 0 0 1 0-1.96l3.3-6C6.897 4.39 7.549 4 8.255 4h7.49zM8.417 12l1.65 3h3.866l1.649-3-1.65-3h-3.865z" }) }));
+var AlertNeutralColoredIcon = IconWrapper$1(SvgAlertNeutralColoredIcon);
+
+const SvgAlertOakColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 7.5, stroke: "var(--ui-color-icon-alerts-medium-oak)", strokeWidth: 3 }) }));
+var AlertOakColoredIcon = IconWrapper$1(SvgAlertOakColoredIcon);
+
+const SvgAlertRedColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-high-red)", d: "M6 18h12V6H6zm15 1a2 2 0 0 1-1.796 1.99L19 21H5l-.204-.01a2 2 0 0 1-1.785-1.786L3 19V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }));
+var AlertRedColoredIcon = IconWrapper$1(SvgAlertRedColoredIcon);
+
+const SvgAlertSalmonColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-high-salmon)", d: "M8 16h8V8H8zm13 3a2 2 0 0 1-1.796 1.99L19 21H5l-.204-.01a2 2 0 0 1-1.785-1.786L3 19V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }));
+var AlertSalmonColoredIcon = IconWrapper$1(SvgAlertSalmonColoredIcon);
+
+const SvgAlertSunColoredIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "var(--ui-color-icon-alerts-medium-sun)", d: "M16 12a4 4 0 1 0-4 4v5a9 9 0 1 1 0-18 9 9 0 0 1 0 18v-5a4 4 0 0 0 4-4" }) }));
+var AlertSunColoredIcon = IconWrapper$1(SvgAlertSunColoredIcon);
+
 const SvgAmberAlertColoredIcon = (props) => jsxRuntime.jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: [jsxRuntime.jsx("path", { fill: "#B45309", fillRule: "evenodd", d: "M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16m0-3a5 5 0 1 0 0-10 5 5 0 0 0 0 10", clipRule: "evenodd" }), jsxRuntime.jsx("rect", { width: 13, height: 13, x: 5.5, y: 5.5, fill: "#FEF3C7", stroke: "#B45309", strokeWidth: 3, rx: 6.5 })] }));
 var AmberAlertColoredIcon = IconWrapper$1(SvgAmberAlertColoredIcon);
 
@@ -869,6 +905,18 @@ var Icons = /*#__PURE__*/Object.freeze({
     ActionWeightColoredIcon: ActionWeightColoredIcon,
     AddNoteIcon: AddNoteIcon,
     AlarmClockIcon: AlarmClockIcon,
+    AlertAmberColoredIcon: AlertAmberColoredIcon,
+    AlertCrimsonColoredIcon: AlertCrimsonColoredIcon,
+    AlertFogColoredIcon: AlertFogColoredIcon,
+    AlertGraphiteColoredIcon: AlertGraphiteColoredIcon,
+    AlertGreenColoredIcon: AlertGreenColoredIcon,
+    AlertLeafColoredIcon: AlertLeafColoredIcon,
+    AlertMintColoredIcon: AlertMintColoredIcon,
+    AlertNeutralColoredIcon: AlertNeutralColoredIcon,
+    AlertOakColoredIcon: AlertOakColoredIcon,
+    AlertRedColoredIcon: AlertRedColoredIcon,
+    AlertSalmonColoredIcon: AlertSalmonColoredIcon,
+    AlertSunColoredIcon: AlertSunColoredIcon,
     AmberAlertColoredIcon: AmberAlertColoredIcon,
     AmberAlertIcon: AmberAlertIcon,
     ArrowBackward: ArrowBackward,
@@ -5676,6 +5724,27 @@ UnorderedList.Item = Item$1;
 UnorderedList.Padding = Padding;
 UnorderedList.Indent = Indent;
 
+const ICONS = {
+  crimson: AlertCrimsonColoredIcon,
+  salmon: AlertSalmonColoredIcon,
+  red: AlertRedColoredIcon,
+  amber: AlertAmberColoredIcon,
+  sun: AlertSunColoredIcon,
+  oak: AlertOakColoredIcon,
+  mint: AlertMintColoredIcon,
+  leaf: AlertLeafColoredIcon,
+  green: AlertGreenColoredIcon,
+  fog: AlertFogColoredIcon,
+  neutral: AlertNeutralColoredIcon,
+  graphite: AlertGraphiteColoredIcon
+};
+const AlertIcon = (_a) => {
+  var { color, size = "m" } = _a, svgProps = __rest(_a, ["color", "size"]);
+  const Icon = ICONS[color];
+  const dimension = size === "s" ? 20 : 24;
+  return jsxRuntime.jsx(Icon, Object.assign({ width: dimension, height: dimension }, svgProps));
+};
+
 const FullPageModalHeader = ({ actions, title }) => {
   return jsxRuntime.jsxs("div", { className: "ui:flex ui:h-19 ui:flex-row ui:items-center ui:justify-between ui:bg-white ui:px-6", children: [jsxRuntime.jsx(PageTitle, { children: title }), actions && jsxRuntime.jsx("div", { children: actions })] });
 };
@@ -6868,6 +6937,46 @@ const RangeCoverage = Object.assign(RangeCoverageComponent, {
   useAdaptiveTicks
 });
 
+const RANGE_COLORS = {
+  "alerts-high-salmon": "var(--ui-color-icon-alerts-high-salmon)",
+  "alerts-high-crimson": "var(--ui-color-icon-alerts-high-crimson)",
+  "alerts-high-red": "var(--ui-color-icon-alerts-high-red)",
+  "alerts-medium-sun": "var(--ui-color-icon-alerts-medium-sun)",
+  "alerts-medium-oak": "var(--ui-color-icon-alerts-medium-oak)",
+  "alerts-medium-amber": "var(--ui-color-icon-alerts-medium-amber)",
+  "alerts-low-mint": "var(--ui-color-icon-alerts-low-mint)",
+  "alerts-low-leaf": "var(--ui-color-icon-alerts-low-leaf)",
+  "alerts-low-green": "var(--ui-color-icon-alerts-low-green)",
+  "alerts-neutral-fog": "var(--ui-color-icon-alerts-neutral-fog)",
+  "alerts-neutral-neutral": "var(--ui-color-icon-alerts-neutral-neutral)",
+  "alerts-neutral-graphite": "var(--ui-color-icon-alerts-neutral-graphite)"
+};
+const DEFAULT_COLOR = "var(--ui-color-icon-brand-primary-default)";
+const TRACK_COLOR = "var(--ui-color-icon-neutral-secondary-disabled)";
+const DISABLED_COLOR = "var(--ui-color-icon-neutral-primary-default)";
+const TRACK_PATH = "M3 9H37A3 3 0 0 1 37 15H3A3 3 0 0 1 3 9Z";
+const RANGE_PATHS = {
+  // Square on the left, rounded on the right where it meets the track's end.
+  upper: "M20 9H37A3 3 0 0 1 37 15H20Z",
+  // Rounded on the left where it meets the track's end, square on the right.
+  lower: "M20 9H3A3 3 0 0 0 3 15H20Z",
+  // From 30% to 70% of the track, square on both ends.
+  middle: "M12 9H28V15H12Z",
+  // The whole track, when neither bound restricts the range.
+  full: TRACK_PATH
+};
+const RangeTriggerIcon = (_a) => {
+  var { shape, color, disabled = false } = _a, svgProps = __rest(_a, ["shape", "color", "disabled"]);
+  let rangeColor = DEFAULT_COLOR;
+  if (disabled) {
+    rangeColor = DISABLED_COLOR;
+  } else if (color) {
+    rangeColor = RANGE_COLORS[color];
+  }
+  const hasAccessibleName = Boolean(svgProps["aria-label"] || svgProps["aria-labelledby"]);
+  return jsxRuntime.jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 40, height: 24, viewBox: "0 0 40 24", fill: "none" }, svgProps, { role: hasAccessibleName ? "img" : void 0, "aria-hidden": hasAccessibleName ? void 0 : true, children: [jsxRuntime.jsx("path", { d: TRACK_PATH, fill: TRACK_COLOR }), shape === "exact" ? jsxRuntime.jsx("circle", { cx: 20, cy: 12, r: 4, fill: rangeColor }) : jsxRuntime.jsx("path", { d: RANGE_PATHS[shape], fill: rangeColor })] }));
+};
+
 const AsideLayout = (_a) => {
   var { aside, children } = _a, rest = __rest(_a, ["aside", "children"]);
   const containerClasses = classNames__default.default("ui:flex-col ui:md:flex-row");
@@ -7203,6 +7312,19 @@ exports.ActionStepsColoredIcon = ActionStepsColoredIcon;
 exports.ActionWeightColoredIcon = ActionWeightColoredIcon;
 exports.AddNoteIcon = AddNoteIcon;
 exports.AlarmClockIcon = AlarmClockIcon;
+exports.AlertAmberColoredIcon = AlertAmberColoredIcon;
+exports.AlertCrimsonColoredIcon = AlertCrimsonColoredIcon;
+exports.AlertFogColoredIcon = AlertFogColoredIcon;
+exports.AlertGraphiteColoredIcon = AlertGraphiteColoredIcon;
+exports.AlertGreenColoredIcon = AlertGreenColoredIcon;
+exports.AlertIcon = AlertIcon;
+exports.AlertLeafColoredIcon = AlertLeafColoredIcon;
+exports.AlertMintColoredIcon = AlertMintColoredIcon;
+exports.AlertNeutralColoredIcon = AlertNeutralColoredIcon;
+exports.AlertOakColoredIcon = AlertOakColoredIcon;
+exports.AlertRedColoredIcon = AlertRedColoredIcon;
+exports.AlertSalmonColoredIcon = AlertSalmonColoredIcon;
+exports.AlertSunColoredIcon = AlertSunColoredIcon;
 exports.AlertWidget = AlertWidget;
 exports.AmberAlertColoredIcon = AmberAlertColoredIcon;
 exports.AmberAlertIcon = AmberAlertIcon;
@@ -7391,6 +7513,7 @@ exports.PrimaryTabBar = PrimaryTabBar;
 exports.PrinterIcon = PrinterIcon;
 exports.QuestionFilledIcon = QuestionFilledIcon;
 exports.RangeCoverage = RangeCoverage;
+exports.RangeTriggerIcon = RangeTriggerIcon;
 exports.RedAlertColoredIcon = RedAlertColoredIcon;
 exports.RedAlertIcon = RedAlertIcon;
 exports.RefreshIcon = RefreshIcon;