@luscii-healthtech/web-ui 2.40.0 → 2.40.2

package/dist/web-ui.esm.js

@@ -563,32 +563,46 @@ function styleInject(css, ref) {
 var css_248z = "/* https://stackoverflow.com/a/13924997 */\n\n.text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
 styleInject(css_248z);
 
+/**
+ * One might argue that we're duplicating strings in this file.
+ * That's how tailwind expects to detect used classes, so please do not make
+ * anything dynamic or try to string concat class names.
+ * https://v1.tailwindcss.com/docs/controlling-file-size
+ */
+
+var allowedTextStyles = {
+  sm: "text-xs font-medium",
+  "sm-strong": "text-xs font-semibold",
+  base: "text-sm",
+  strong: "text-sm font-semibold",
+  lg: "",
+  "lg-strong": "font-semibold",
+  xl: "text-lg",
+  "xl-strong": "font-semibold text-lg"
+}; //Extend with other colors that we want to enable for text
+
+var allowedColors = {
+  base: "text-slate-800",
+  "slate-500": "text-slate-500",
+  "slate-200": "text-slate-200",
+  red: "text-red-700",
+  green: "text-green-700",
+  amber: "text-yellow-700",
+  white: "text-white",
+  "blue-800": "text-blue-800"
+};
+var allowedHoverColors = {
+  "blue-900": "hover:text-blue-900",
+  white: "hover:text-white"
+}; // What is a group hover? https://v1.tailwindcss.com/docs/pseudo-class-variants#group-hover
+
+var allowedGroupHoverColors = {
+  "blue-900": "group-hover:text-blue-900",
+  white: "group-hover:text-white"
+};
 var Text = function Text(props) {
-  /**
-   * One might argue that we're duplicating strings in this file.
-   * That's how tailwind expects to detect used classes, so please do not make
-   * anything dynamic or try to string concat class names.
-   * https://v1.tailwindcss.com/docs/controlling-file-size
-   */
-  var allowedColors = {
-    base: "text-slate-800",
-    "slate-500": "text-slate-500",
-    "slate-200": "text-slate-200",
-    red: "text-red-700",
-    green: "text-green-700",
-    amber: "text-yellow-700",
-    white: "text-white",
-    "blue-800": "text-blue-800"
-  };
-  var allowedHoverColors = {
-    "blue-900": "hover:text-blue-900",
-    white: "hover:text-white"
-  }; // What is a group hover? https://v1.tailwindcss.com/docs/pseudo-class-variants#group-hover
-
-  var allowedGroupHoverColors = {
-    "blue-900": "group-hover:text-blue-900",
-    white: "group-hover:text-white"
-  };
+  var _props$type, _props$color;
+
   var selectedHoverColor = props.hoverColor && !props.hoverInGroup && allowedHoverColors[props.hoverColor];
   var selectedGroupHoverColor = props.hoverColor && props.hoverInGroup && allowedGroupHoverColors[props.hoverColor];
   var containerProps = {
@@ -597,21 +611,11 @@ var Text = function Text(props) {
     className: classNames( // apply different style classes
     // for now we stick with font-size 16px on the body
     // so I am adjusting our styles accordingly (one step down)
-    {
-      "text-xs font-medium": props.type === "sm",
-      "text-xs font-semibold": props.type === "sm-strong",
-      "text-sm": props.type === "base",
-      "text-sm font-semibold": props.type === "strong",
-      "": props.type === "lg",
-      "font-semibold": props.type === "lg-strong",
-      "text-lg": props.type === "xl",
-      "font-semibold text-lg": props.type === "xl-strong"
-    }, {
+    allowedTextStyles[(_props$type = props.type) != null ? _props$type : "base"], allowedColors[(_props$color = props.color) != null ? _props$color : "base"], selectedHoverColor, selectedGroupHoverColor, {
       inline: props.inline,
       // FIXME: this class doesn't do anything without a max-width
       truncate: props.truncate,
-      "text-two-lines-max": props.clampLines
-    }, allowedColors[props.color || "base"], selectedHoverColor, selectedGroupHoverColor, {
+      "text-two-lines-max": props.clampLines,
       "in-html-link": props.containsDangerousHtml
     }, //can be used to overwrite other classes like the color
     props.className)
@@ -956,11 +960,10 @@ var css_248z$2 = ".title {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\",
 styleInject(css_248z$2);
 
 var Title = function Title(props) {
-  var _props$className;
+  var _props$color;
 
   var containerClassName = classNames("title", //this is used to load the correct font from the css
-  "font-bold", {
-    "text-slate-800": !((_props$className = props.className) != null && _props$className.match(/\s(text-)/)),
+  "font-bold", allowedColors[(_props$color = props.color) != null ? _props$color : "base"], {
     "text-base": props.type === "xs",
     "text-xl": props.type === "sm",
     "text-2xl": props.type === "base",
@@ -1128,7 +1131,7 @@ var ListItem = function ListItem(_ref) {
   }
 
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classNames("flex last:rounded-b flex-row items-center space-x-4 bg-white", "p-4 border-b last:border-b-0 border-slate-100", {
+    className: classNames("flex last:rounded-b flex-row items-center space-x-4 bg-white", "px-4 border-b last:border-b-0 border-slate-100", {
       "first:rounded-t": roundTop,
       "cursor-pointer": restProps.handleItemClick,
       "hover:bg-blue-50 transition-colors ease-in-out duration-300": restProps.handleItemClick
@@ -1150,7 +1153,9 @@ var ListItem = function ListItem(_ref) {
     onError: onListItemIconLoadError
   }), loadIconError && /*#__PURE__*/React__default.createElement(ImageIcon, {
     className: "w-6 h-6 text-slate-300"
-  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Text, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "py-4"
+  }, /*#__PURE__*/React__default.createElement(Text, {
     type: isSelected ? "strong" : "base",
     text: title
   }), subtitle && /*#__PURE__*/React__default.createElement(Text, {
@@ -1297,6 +1302,11 @@ var List = function List(_ref) {
     });
   }
 
+  var titleProps = title ? _extends({
+    type: "xs"
+  }, typeof title === "object" ? title : {
+    text: title
+  }) : null;
   return /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": dataTestId != null ? dataTestId : "list-component"
   }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
@@ -1310,10 +1320,7 @@ var List = function List(_ref) {
       "justify-start": title && !headerButton,
       "justify-end": !title && headerButton
     })
-  }, title && /*#__PURE__*/React__default.createElement(Title, {
-    type: "xs",
-    text: title
-  }), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
+  }, titleProps && /*#__PURE__*/React__default.createElement(Title, _extends({}, titleProps)), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
     className: "space-x-3"
   }, /*#__PURE__*/React__default.createElement(headerButton.buttonType, headerButton.buttonProps))), /*#__PURE__*/React__default.createElement("ul", {
     ref: listRef
@@ -6441,7 +6448,9 @@ var TimelineStep = function TimelineStep(_ref) {
     className: classNames(borderClassNames, "h-4 first:h-0")
   }), /*#__PURE__*/React__default.createElement("div", {
     className: containerClassNames
-  }, content, /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col"
+  }, content), /*#__PURE__*/React__default.createElement("span", {
     className: classNames("rounded-lg h-4 w-4 absolute top-6 -left-2 -ml-px -mt-px", {
       hidden: ["wide", "withoutDot"].includes(type),
       "bg-blue-800": "base" === type,