@luscii-healthtech/web-ui 37.3.0 → 37.4.0

package/dist/components/Title/Title.d.ts

@@ -3,7 +3,14 @@ import "./Title.scss";
 import { type TextColor } from "../Text/Text";
 export type TitleStyle = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
 type SharedProps = {
+    /**
+     * @deprecated, use variant instead
+     */
     type?: TitleStyle;
+    /**
+     * @default "base"
+     */
+    variant?: TitleStyle;
     color?: TextColor;
     className?: string;
     ref?: React.ForwardedRef<HTMLHeadingElement>;

package/dist/index.development.js

@@ -1464,7 +1464,7 @@ const ToasterPanel = ({ message = "", title = "", type = TOASTER_TYPE_OPTIONS.SU
   const isFailure = type === TOASTER_TYPE_OPTIONS.FAILURE;
   return React__namespace.default.createElement(
     "div",
-    { "data-test-id": `toaster-panel-${type}`, className: classNames__default.default("ui-rounded-md ui-shadow-lg", "ui-max-h-19 ui-min-h-13 ui-w-104", "ui-relative", "ui-overflow-hidden", {
+    { role: "status", "data-test-id": `toaster-panel-${type}`, className: classNames__default.default("ui-rounded-md ui-shadow-lg", "ui-max-h-19 ui-min-h-13 ui-w-104", "ui-relative", "ui-overflow-hidden", {
       "type-success": isSuccess,
       "type-failure": isFailure,
       "ui-bg-red-50": isFailure,
@@ -1509,7 +1509,7 @@ const ToasterPanel = ({ message = "", title = "", type = TOASTER_TYPE_OPTIONS.SU
         "ui-bg-red-50": isFailure,
         "ui-bg-green-50": isSuccess
       }) },
-      React__namespace.default.createElement("div", { "data-test-id": "toaster-progress-bar", className: classNames__default.default("ui-transiation progress-reverse ui-h-full ui-w-full ui-origin-left ui-animate-[progress-reverse_5s_linear_forwards] ui-duration-[3000ms]", {
+      React__namespace.default.createElement("div", { "data-test-id": "toaster-progress-bar", className: classNames__default.default("ui-transiation progress-reverse ui-duration-[3000ms] ui-h-full ui-w-full ui-origin-left ui-animate-[progress-reverse_5s_linear_forwards]", {
         "ui-bg-red-400": isFailure,
         "ui-bg-green-400": isSuccess
       }), onAnimationEnd })
@@ -1537,22 +1537,23 @@ var css_248z$g = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FI
 styleInject(css_248z$g);
 
 const Title = (props) => {
-  const { type = "base", color, className, ref, text, children } = props;
-  const isSmallTitle = type === "xs" || type === "sm";
+  const { variant: variantFromProps = "base", type, className, text, children, color, ref } = props;
+  const variant = type ? type : variantFromProps;
+  const isSmallTitle = variant === "xs" || variant === "sm";
   const containerClassName = classNames__default.default("ui-font-bold ui-leading-inherit ui-antialiased", allowedColors[color !== null && color !== void 0 ? color : "base"], {
     "title-inter": isSmallTitle,
     "title-avenir": !isSmallTitle
     //this is used to load the correct font from the css
   }, {
-    "ui-text-base": type === "xs",
-    "ui-text-xl": type === "sm",
-    "ui-text-2xl": type === "base",
-    "ui-text-3xl": type === "lg",
-    "ui-text-4xl ": type === "xl",
-    "ui-text-6xl ": type === "2xl"
+    "ui-text-base": variant === "xs",
+    "ui-text-xl": variant === "sm",
+    "ui-text-2xl": variant === "base",
+    "ui-text-3xl": variant === "lg",
+    "ui-text-4xl ": variant === "xl",
+    "ui-text-6xl ": variant === "2xl"
   }, className);
   let ContainerElement;
-  switch (type) {
+  switch (variant) {
     case "sm":
       ContainerElement = "h5";
       break;
@@ -1595,7 +1596,7 @@ const AccordionItem = ({ id, title, content, isCollapsedByDefault = false, onClo
         "ui-border-b ui-border-slate-200": !isCollapsed
       }) },
       React__namespace.default.createElement(Chevron, { className: "ui-shrink-0 ui-self-center ui-text-slate-500" }),
-      isString__default.default(title) ? React__namespace.default.createElement(Title, { type: "xs" }, title) : title
+      isString__default.default(title) ? React__namespace.default.createElement(Title, { variant: "xs" }, title) : title
     ),
     React__namespace.default.createElement("div", { className: classNames__default.default({ "ui-hidden": isCollapsed }) }, content)
   );
@@ -1664,8 +1665,8 @@ const BaseListHeader = ({ title, button, transparent, withBorder }) => {
   return React__namespace.default.createElement(
     "div",
     { "data-test-id": "base-list-header", className },
-    typeof title === "string" && React__namespace.default.createElement(Title, { type: "xs", text: title }),
-    title && typeof title === "object" && React__namespace.default.createElement(Title, Object.assign({ type: "xs" }, title)),
+    typeof title === "string" && React__namespace.default.createElement(Title, { variant: "xs", text: title }),
+    title && typeof title === "object" && React__namespace.default.createElement(Title, Object.assign({ variant: "xs" }, title)),
     button && React__namespace.default.createElement("div", { className: "ui-space-x-3" }, React__namespace.default.createElement(button.buttonType, button.buttonProps))
   );
 };
@@ -2516,7 +2517,7 @@ const CenteredHero = ({ title, text, image, slots, background = "slate-50", imag
       "ui-max-h-36": imageSize === "small",
       "ui-max-h-72": imageSize === "large"
     }) }),
-    title && React__namespace.default.createElement(Title, { type: "base" }, title),
+    title && React__namespace.default.createElement(Title, { variant: "base" }, title),
     text && React__namespace.default.createElement(Text, { className: "ui-text-center" }, text),
     (slots === null || slots === void 0 ? void 0 : slots.bottom) && React__namespace.default.createElement(Box, { mt: "m" }, slots === null || slots === void 0 ? void 0 : slots.bottom)
   );
@@ -2589,7 +2590,7 @@ const AccordionList = (_a) => {
         React__namespace.default.createElement(
           React__namespace.default.Fragment,
           null,
-          title && React__namespace.default.createElement(Title, { type: "sm" }, title),
+          title && React__namespace.default.createElement(Title, { variant: "sm" }, title),
           headerActions && React__namespace.default.createElement(React__namespace.default.Fragment, null, headerActions)
         )
       ),
@@ -3183,7 +3184,7 @@ const ConfirmationDialogTitle = (props) => {
       "ui-items-center ui-justify-center": (_a = props.title) === null || _a === void 0 ? void 0 : _a.icon
     }) },
     props.title.icon && React__namespace.default.createElement(IconComponentOrKey, { name: props.title.icon, className: "dialog-header-icon ui-h-12 ui-w-12 ui-text-primary" }),
-    React__namespace.default.createElement(Title, { text: props.title.title, type: "sm" })
+    React__namespace.default.createElement(Title, { variant: "sm" }, props.title.title)
   ) : null;
 };
 
@@ -5001,7 +5002,7 @@ function Page({
   });
   const accessoriesContent = accessories instanceof Function ? accessories() : accessories;
   const childrenOrContentProp = children || (content instanceof Function ? content() : content);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { id, className: containerClassnames }, /* @__PURE__ */ React__namespace.default.createElement(NavLayout, __spreadValues$1({ menu: navMenu }, navLayoutProps), /* @__PURE__ */ React__namespace.default.createElement("div", { className: mergedPageClasses, "data-test-id": dataTestId }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: accessoryClasses }, /* @__PURE__ */ React__namespace.default.createElement(Title, { "data-test-id": `${dataTestId}-title`, text: maybeTitle }), isPolling && /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ React__namespace.default.createElement("div", { id, className: containerClassnames }, /* @__PURE__ */ React__namespace.default.createElement(NavLayout, __spreadValues$1({ menu: navMenu }, navLayoutProps), /* @__PURE__ */ React__namespace.default.createElement("div", { className: mergedPageClasses, "data-test-id": dataTestId }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: accessoryClasses }, /* @__PURE__ */ React__namespace.default.createElement(Title, { "data-test-id": `${dataTestId}-title` }, maybeTitle), isPolling && /* @__PURE__ */ React__namespace.default.createElement(
     LoadingIndicator,
     {
       asSpinner: true,
@@ -5571,7 +5572,7 @@ const SectionHeader = ({ title, aside, isLoading = false }) => {
     React__namespace.default.createElement(
       Stack,
       { axis: "x", justify: "center", align: "center", gap: "xs" },
-      typeof title === "string" ? React__namespace.default.createElement(Title, { type: "sm" }, title) : title,
+      typeof title === "string" ? React__namespace.default.createElement(Title, { variant: "sm" }, title) : title,
       isLoading && React__namespace.default.createElement(LoadingIndicator, { asSpinner: true })
     ),
     aside
@@ -6184,7 +6185,7 @@ const TimelineHeader = ({ title, buttons, withBorder = true }) => {
   return React__namespace.default.createElement(
     "div",
     { "data-test-id": "timeline-header", className },
-    title && React__namespace.default.createElement(Title, Object.assign({ type: "sm" }, typeof title === "object" ? title : { text: title })),
+    title && React__namespace.default.createElement(Title, Object.assign({ variant: "sm" }, typeof title === "object" ? title : { text: title })),
     hasButtons && React__namespace.default.createElement("div", { className: "ui-flex ui-flex-row ui-space-x-4" }, buttons.map(({ buttonType: ButtonComponent, buttonProps }) => React__namespace.default.createElement(ButtonComponent, Object.assign({}, buttonProps))))
   );
 };
@@ -6449,7 +6450,7 @@ function Card(props) {
     )
   );
 }
-Card.Title = (props) => React__namespace.default.createElement(Title, Object.assign({ type: "sm" }, props));
+Card.Title = (props) => React__namespace.default.createElement(Title, Object.assign({ variant: "sm" }, props));
 Card.TopBar = TopBar;
 Card.Padding = Padding;
 Card.Section = Section;
@@ -6463,7 +6464,7 @@ function RenderTopBar(props) {
       React__namespace.default.createElement(
         TopBar,
         { className: "ui-flex ui-flex-wrap ui-items-center ui-justify-between" },
-        React__namespace.default.createElement(Title, { type: "sm" }, title),
+        React__namespace.default.createElement(Title, { variant: "sm" }, title),
         React__namespace.default.createElement(Actions$1, null, actions)
       )
     );
@@ -6486,7 +6487,7 @@ function RenderTopBar(props) {
       React__namespace.default.createElement(
         TopBar,
         null,
-        React__namespace.default.createElement(Title, { type: "sm" }, title)
+        React__namespace.default.createElement(Title, { variant: "sm" }, title)
       )
     );
   }
@@ -7029,7 +7030,7 @@ const LoadingState = () => {
               { width: "full" },
               React__namespace.default.createElement(
                 Title,
-                { type: "xs" },
+                { variant: "xs" },
                 React__namespace.default.createElement(Skeleton, { width: 120 })
               ),
               React__namespace.default.createElement(
@@ -7077,7 +7078,7 @@ const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, status
               React__namespace.default.createElement(
                 Stack,
                 { width: "full" },
-                (presentation === "bold" || presentation === "highlighted") && React__namespace.default.createElement(Title, { type: "xs" }, title),
+                (presentation === "bold" || presentation === "highlighted") && React__namespace.default.createElement(Title, { variant: "xs" }, title),
                 presentation === "default" && React__namespace.default.createElement(Text, { variant: "base", color: "slate-500" }, title),
                 typeof subtitle === "string" ? React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, subtitle) : subtitle
               )