@luscii-healthtech/web-ui 0.2.1 → 0.4.0

package/dist/components/ListTable/ListTable.d.ts

@@ -1,19 +1,21 @@
 /// <reference types="react" />
 import { TextProps } from "../Text/Text";
 import { RestPropped } from "../../types/general.types";
-import { Localization, OnPaginationChange } from "../PaginationMenu/PaginationMenu.types";
+import { Localization, OnPaginationChange, PageSize } from "../PaginationMenu/PaginationMenu.types";
 export declare type ListTableItem = RestPropped;
 export interface ListTableProps<ItemType extends ListTableItem, CellType> extends RestPropped {
     items?: ItemType[];
     configuration: ListTablePropsConfiguration<ItemType, CellType>;
     pageCount?: number;
     currentPage?: number;
-    onRowClick?: (arg: ItemType) => void;
     onPaginationChange?: OnPaginationChange;
+    pageSize?: PageSize;
+    localization?: Localization;
+    resultCount?: number;
+    onRowClick?: (arg: ItemType) => void;
     isLoading?: boolean;
     showHeader?: boolean;
     className?: string;
-    localization: Localization;
 }
 export interface ListTablePropsConfiguration<ItemType extends ListTableItem, CellType> {
     emptyValue?: string;
@@ -28,5 +30,5 @@ export interface ListTablePropsConfigurationField<ItemType extends ListTableItem
     field: (arg: ItemType) => string | CellType;
     textProps?: Omit<TextProps, "text">;
 }
-export declare function ListTable<ItemType extends ListTableItem, CellType>({ items, configuration, pageCount, currentPage, onPaginationChange, onRowClick, isLoading, showHeader, className, localization, ...restProps }: ListTableProps<ItemType, CellType>): JSX.Element;
+export declare function ListTable<ItemType extends ListTableItem, CellType>({ items, configuration, pageCount, currentPage, onPaginationChange, pageSize, localization, resultCount, onRowClick, isLoading, showHeader, className, ...restProps }: ListTableProps<ItemType, CellType>): JSX.Element;
 export default ListTable;

package/dist/components/Section/SectionItem.d.ts

@@ -0,0 +1,9 @@
+import React, { SyntheticEvent } from "react";
+import "./SectionItem.scss";
+export interface SectionItemProps {
+    className?: string;
+    onClick?: (event: SyntheticEvent) => void;
+    children?: React.ReactNode;
+}
+export declare const SectionItem: React.FC<SectionItemProps>;
+export default SectionItem;

package/dist/components/{TextListItem/TextListItem.d.ts → Section/SectionItemWithContent.d.ts}

@@ -1,6 +1,6 @@
-export default TextListItem;
-declare function TextListItem(props: any): JSX.Element;
-declare namespace TextListItem {
+export default SectionItemWithContent;
+declare function SectionItemWithContent(props: any): JSX.Element;
+declare namespace SectionItemWithContent {
     export namespace propTypes {
         export const text: PropTypes.Validator<string>;
         export const icon: PropTypes.Requireable<string | object>;

package/dist/components/Steps/Step.d.ts

@@ -7,4 +7,4 @@ export interface StepProps {
         step: string;
     };
 }
-export declare const Step: ({ title, stepNumber, active, localization }: StepProps) => JSX.Element;
+export declare const Step: ({ title, stepNumber, active, localization, }: StepProps) => JSX.Element;

package/dist/components/Tag/Tag.d.ts

@@ -13,5 +13,5 @@ export interface TagProps {
     size?: TagSize;
     className?: string;
 }
-declare const Tag: ({ text, colorTheme, className, size }: TagProps) => JSX.Element;
+declare const Tag: ({ text, colorTheme, className, size, }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Text/Text.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
 import { RestPropped } from "../../types/general.types";
 import "./Text.scss";
-export declare type TextStyle = "sm" | "sm-strong" | "base" | "strong" | "lg" | "lg-strong" | "xl" | "xl-strong" | string;
-export declare type TextColor = "base" | "gray-500" | "gray-200" | "white" | "blue" | "red" | "green" | "amber" | "inherit";
+export declare type TextStyle = "sm" | "sm-strong" | "base" | "strong" | "lg" | "lg-strong" | "xl" | "xl-strong";
+export declare type TextColor = "base" | "slate-500" | "slate-200" | "white" | "blue-800" | "red" | "green" | "amber";
+export declare type TextHoverColor = "blue-900" | "white";
 export interface TextProps extends RestPropped {
     text: string;
     type?: TextStyle;
     inline?: boolean;
     color?: TextColor;
-    hoverColor?: TextColor;
+    hoverColor?: TextHoverColor;
+    hoverInGroup?: boolean;
     className?: string;
     containsDangerousHtml?: boolean;
     truncate?: boolean;

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { default as InfoBlock } from "./components/InfoBlock/InfoBlock";
 export { InfoField } from "./components/InfoField/InfoField";
 export { INPUT_TYPES, default as Input } from "./components/Input/Input";
 export { default as Line } from "./components/Line/Line";
-export { default as ListItem, ListItemProps, } from "./components/ListItem/ListItem";
+export { default as SectionItem, SectionItemProps, } from "./components/Section/SectionItem";
 export { ListTable, ListTableProps, ListTablePropsConfiguration, ListTablePropsConfigurationField, } from "./components/ListTable/ListTable";
 export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
@@ -45,7 +45,7 @@ export { default as TextArea } from "./components/Textarea/Textarea";
 export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
-export { default as TextListItem } from "./components/TextListItem/TextListItem";
+export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { Title, TitleStyle } from "./components/Title/Title";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 export { default as Text } from "./components/Text/Text";

package/dist/web-ui.cjs.development.css

@@ -546,6 +546,64 @@
   .cweb-list-item.cweb-list-item-clickable:hover {
     background-color: #f2fafd; }
 
+.cweb-section .cweb-button:last-of-type {
+  margin-right: 24px; }
+
+.cweb-section .cweb-button:not(:last-of-type) {
+  margin-right: 8px; }
+
+.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
+  margin-left: auto;
+  width: 32px;
+  height: 32px; }
+
+.cweb-section .cweb-button.add-button {
+  background: url("../../assets/add.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
+    background: url("../../assets/add_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section .cweb-button.edit-button {
+  background: url("../../assets/edit.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
+    background: url("../../assets/edit_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section .cweb-button.delete-button {
+  background: url("../../assets/delete.svg") no-repeat center;
+  background-size: contain; }
+  .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
+    background: url("../../assets/delete_hover.svg") no-repeat center;
+    background-size: contain; }
+
+.cweb-section > .cweb-section-header {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #eeeeee;
+  width: 100%;
+  padding: 18px 24px; }
+
+.cweb-section > .cweb-section-footer {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  border-top: 1px solid #eeeeee;
+  width: 100%;
+  padding: 1rem 24px 1rem 24px; }
+  .cweb-section > .cweb-section-footer img {
+    width: 32px;
+    height: 32px; }
+
+.cweb-section-text-item .cweb-section-text-item-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px; }
+
 .cweb-loading {
   display: flex;
   justify-content: center;
@@ -745,59 +803,6 @@
   .cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {
     border: 1px solid #ff6266 !important; }
 
-.cweb-section .cweb-button:last-of-type {
-  margin-right: 24px; }
-
-.cweb-section .cweb-button:not(:last-of-type) {
-  margin-right: 8px; }
-
-.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {
-  margin-left: auto;
-  width: 32px;
-  height: 32px; }
-
-.cweb-section .cweb-button.add-button {
-  background: url("../../assets/add.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {
-    background: url("../../assets/add_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section .cweb-button.edit-button {
-  background: url("../../assets/edit.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {
-    background: url("../../assets/edit_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section .cweb-button.delete-button {
-  background: url("../../assets/delete.svg") no-repeat center;
-  background-size: contain; }
-  .cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {
-    background: url("../../assets/delete_hover.svg") no-repeat center;
-    background-size: contain; }
-
-.cweb-section > .cweb-section-header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  border-bottom: 1px solid #eeeeee;
-  width: 100%;
-  padding: 18px 24px; }
-
-.cweb-section > .cweb-section-footer {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  border-top: 1px solid #eeeeee;
-  width: 100%;
-  padding: 1rem 24px 1rem 24px; }
-  .cweb-section > .cweb-section-footer img {
-    width: 32px;
-    height: 32px; }
-
 .cweb-textarea {
   border: 1px solid #cccccc;
   border-radius: 4px;
@@ -917,11 +922,6 @@
     .editor .rdw-editor .rdw-editor-main .DraftEditor-root {
       margin: 0 12px; }
 
-.cweb-text-list-item .cweb-text-list-item-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 16px; }
-
 @font-face {
   font-family: "AvenirNextLTPro-Regular";
   src: url("../../styles/fonts/avenir/3A0AF8_1_0.eot");

package/dist/web-ui.cjs.development.js

@@ -27,6 +27,33 @@ var htmlToDraft = _interopDefault(require('html-to-draftjs'));
 require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
 
 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-700",
+    "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 selectedHoverColor = props.hoverColor && !props.hoverInGroup && allowedHoverColors[props.hoverColor];
+  var selectedGroupHoverColor = props.hoverColor && props.hoverInGroup && allowedGroupHoverColors[props.hoverColor];
   var containerProps = {
     "data-test-id": props["data-test-id"],
     className: classNames( // apply different style classes
@@ -45,17 +72,7 @@ var Text = function Text(props) {
       inline: props.inline,
       // FIXME: this class doesn't do anything without a max-width
       truncate: props.truncate
-    }, {
-      "text-slate-700": props.color === "base",
-      "text-slate-500": props.color === "gray-500",
-      "text-slate-200": props.color === "gray-200",
-      "text-red-700": props.color === "red",
-      "text-green-700": props.color === "green",
-      "text-yellow-700": props.color === "amber",
-      "text-blue-700": props.color === "blue",
-      "text-white": props.color === "white",
-      "text-primary-dark": props.color === "blue"
-    }, {
+    }, allowedColors[props.color || "base"], selectedHoverColor, selectedGroupHoverColor, {
       "in-html-link": props.containsDangerousHtml
     }, //can be used to overwrite other classes like the color
     props.className)
@@ -956,13 +973,13 @@ var Checkbox = function Checkbox(_ref) {
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col"
   }, text && /*#__PURE__*/React__default.createElement(Text, {
-    className: "ml-2 select-none text-left",
+    className: "ml-2 text-left select-none",
     text: text,
     "data-test-id": "checkbox-text"
   }), explanation && /*#__PURE__*/React__default.createElement(Text, {
-    className: "ml-2 select-none text-left",
+    className: "ml-2 text-left select-none",
     text: explanation,
-    color: "gray-500",
+    color: "slate-500",
     "data-test-id": "checkbox-explanation"
   }))));
 };
@@ -1437,7 +1454,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         "data-test-id": item.text,
         text: item.title,
         type: "sm",
-        color: "gray-500",
+        color: "slate-500",
         truncate: true
       })), item.subItems.map(function (subItem) {
         return _this.renderIndividualItem(subItem);
@@ -1706,7 +1723,7 @@ var InfoField = function InfoField(props) {
   }, containerProps), /*#__PURE__*/React__default.createElement(Text, {
     text: props.label,
     type: "sm",
-    color: "gray-500",
+    color: "slate-500",
     className: classNames({
       "break-words": props.supportsMultiline
     }, {
@@ -1881,7 +1898,7 @@ Line.propTypes = {
 };
 
 var _excluded$7 = ["children", "className", "onClick"];
-var ListItem = function ListItem(props) {
+var SectionItem = function SectionItem(props) {
   var children = props.children,
       className = props.className,
       onClick = props.onClick,
@@ -1912,7 +1929,7 @@ var PaginationMenuSmall = function PaginationMenuSmall(props) {
     className: "ml-4",
     text: props.currentPageNumber + " / " + props.pageCount,
     type: "sm",
-    color: "gray-500"
+    color: "slate-500"
   }), /*#__PURE__*/React__default.createElement(TertiaryButton, {
     className: "ml-4",
     "data-test-id": "next-button",
@@ -2120,7 +2137,7 @@ var PaginationMenuLarge = function PaginationMenuLarge(props) {
     className: "ml-4 flex flex-row items-center"
   }, /*#__PURE__*/React__default.createElement(Text, {
     text: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount),
-    color: "gray-500"
+    color: "slate-500"
   }), /*#__PURE__*/React__default.createElement(SecondaryButton, {
     "data-test-id": "prev-button",
     text: props.localization.previous,
@@ -2224,7 +2241,7 @@ function ListTableCell(_ref) {
       text: emptyValue
     }, textProps, {
       className: textClassName,
-      color: "gray-500"
+      color: "slate-500"
     })), hasValue && isString(value) && /*#__PURE__*/React__default.createElement(Text, Object.assign({
       text: value
     }, textProps, {
@@ -2301,7 +2318,7 @@ function ListTableHeader(_ref) {
   })));
 }
 
-var _excluded$9 = ["items", "configuration", "pageCount", "currentPage", "onPaginationChange", "onRowClick", "isLoading", "showHeader", "className", "localization"];
+var _excluded$9 = ["items", "configuration", "pageCount", "currentPage", "onPaginationChange", "pageSize", "localization", "resultCount", "onRowClick", "isLoading", "showHeader", "className"];
 function ListTable(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -2311,13 +2328,15 @@ function ListTable(_ref) {
       _ref$currentPage = _ref.currentPage,
       currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
       onPaginationChange = _ref.onPaginationChange,
+      pageSize = _ref.pageSize,
+      localization = _ref.localization,
+      resultCount = _ref.resultCount,
       onRowClick = _ref.onRowClick,
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       _ref$showHeader = _ref.showHeader,
       showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
       className = _ref.className,
-      localization = _ref.localization,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   // For not displaying empty view at creation
@@ -2356,17 +2375,20 @@ function ListTable(_ref) {
     src: SearchNotFoundImage,
     alt: "no-image-found"
   }), /*#__PURE__*/React__default.createElement(Text, {
-    className: classNames("no-item-found-text", "w-56 text-base text-gray-600 text-center whitespace-pre-wrap"),
+    className: classNames("no-item-found-text", "w-56 text-base text-center whitespace-pre-wrap"),
+    color: "slate-500",
     text: configuration.emptyListText
   }))))), !showEmptyView && pageCount > 0 && onPaginationChange && /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: configuration.fields.length
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classNames("cweb-list-table-footer", "flex justify-center flex-row items-center", "h-20 py-4 px-4")
   }, /*#__PURE__*/React__default.createElement(PaginationMenu, {
-    onChange: onPaginationChange,
     pageCount: pageCount,
     currentPageNumber: currentPage,
-    localization: localization
+    onChange: onPaginationChange,
+    pageSize: pageSize,
+    localization: localization,
+    resultCount: resultCount
   })))))));
 }
 
@@ -2687,11 +2709,7 @@ var NavMenuItem = function NavMenuItem(props) {
       currentImg = _useState[0],
       setCurrentImg = _useState[1];
 
-  var _useState2 = React.useState(props.isSelected ? "white" : "gray-200"),
-      textColor = _useState2[0],
-      setTextColor = _useState2[1];
-
-  var classes = classNames(["flex", "flex-row", "items-center", "w-auto", "rounded", "px-2", "py-1", "my-2", "mx-2", "hover:bg-gray-600", "transition", "ease-in", "duration-150", "lg:last:pb-2", "focus:outline-primary"], {
+  var classes = classNames(["flex", "flex-row", "items-center", "w-auto", "rounded", "px-2", "py-1", "my-2", "mx-2", "hover:bg-gray-600", "transition", "ease-in", "duration-150", "lg:last:pb-2", "focus:outline-primary", "group"], {
     "bg-nav-menu": !props.isSelected,
     "bg-gray-600": props.isSelected
   });
@@ -2699,14 +2717,12 @@ var NavMenuItem = function NavMenuItem(props) {
   var handleOnMouseOver = function handleOnMouseOver() {
     if (!props.isSelected) {
       setCurrentImg(props.imgOnHover);
-      setTextColor("white");
     }
   };
 
   var handleOnMouseOut = function handleOnMouseOut() {
     if (!props.isSelected) {
       setCurrentImg(props.img);
-      setTextColor("gray-200");
     }
   };
 
@@ -2723,7 +2739,9 @@ var NavMenuItem = function NavMenuItem(props) {
   }), /*#__PURE__*/React.createElement(Text, {
     type: "strong",
     text: props.title,
-    color: textColor
+    hoverInGroup: true,
+    color: "slate-200",
+    hoverColor: "white"
   }));
 
   function handleMenuClick(event) {
@@ -2816,18 +2834,26 @@ var TextLink = function TextLink(props) {
 
 var NotificationBanner = function NotificationBanner(props) {
   var classes = classNames("w-full px-6 py-2 flex flex-row items-center border border-solid rounded", props.className, {
-    "bg-slate-100 border-slate-700": props.color === "base",
-    "bg-blue-100 border-blue-700": props.color === "blue",
-    "bg-red-100 border-red-700": props.color === "red",
-    "bg-green-100 border-green-700": props.color === "green",
-    "bg-yellow-100 border-yellow-700": props.color === "amber"
+    "bg-slate-50 border-slate-700": props.color === "base",
+    "bg-blue-50 border-blue-700": props.color === "blue",
+    "bg-red-50 border-red-700": props.color === "red",
+    "bg-green-50 border-green-700": props.color === "green",
+    "bg-yellow-50 border-yellow-700": props.color === "amber"
   });
+  var textColor = {
+    red: "red",
+    amber: "amber",
+    green: "green",
+    base: "base",
+    // Blue must be 800 here to pass the contrast test
+    blue: "blue-800"
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes
   }, props.icon, /*#__PURE__*/React__default.createElement(Text, {
-    className: "first:ml-0 ml-4",
+    className: "ml-4 first:ml-0",
     text: props.text,
-    color: props.color
+    color: props.color ? textColor[props.color] : "base"
   }), props.linkProps && /*#__PURE__*/React__default.createElement(TextLink, {
     className: "ml-4",
     text: props.linkProps.text,
@@ -2994,7 +3020,7 @@ var Step = function Step(_ref) {
   }), /*#__PURE__*/React__default.createElement(Text, {
     text: localization.step + " " + stepNumber,
     type: "strong",
-    color: active ? "blue" : "gray-500"
+    color: active ? "blue-800" : "slate-500"
   }), /*#__PURE__*/React__default.createElement(Text, {
     text: title,
     type: "strong"
@@ -3786,24 +3812,26 @@ var TagColorTheme;
 })(TagColorTheme || (TagColorTheme = {}));
 
 var Tag = function Tag(_ref) {
+  var _textColor;
+
   var text = _ref.text,
       _ref$colorTheme = _ref.colorTheme,
       colorTheme = _ref$colorTheme === void 0 ? TagColorTheme.Gray : _ref$colorTheme,
       className = _ref.className,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? TagSize.base : _ref$size;
-  var containerClassName = classNames("inline py-1 px-2 rounded-lg", className, {
-    "bg-red-100 text-red-700": colorTheme === TagColorTheme.Red,
-    "bg-orange-100 text-amber-700": colorTheme === TagColorTheme.Amber,
-    "bg-green-100 text-green-800": colorTheme === TagColorTheme.Green,
-    "bg-slate-100 text-slate-600": colorTheme === TagColorTheme.Gray,
-    "bg-blue-50 text-blue-800": colorTheme === TagColorTheme.Blue
-  });
+  var textColor = (_textColor = {}, _textColor[TagColorTheme.Red] = "red", _textColor[TagColorTheme.Amber] = "amber", _textColor[TagColorTheme.Green] = "green", _textColor[TagColorTheme.Gray] = "base", _textColor[TagColorTheme.Blue] = "blue-800", _textColor);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: containerClassName
+    className: classNames("inline py-1 px-2 rounded-lg", className, {
+      "bg-red-50": colorTheme === TagColorTheme.Red,
+      "bg-orange-50": colorTheme === TagColorTheme.Amber,
+      "bg-green-50": colorTheme === TagColorTheme.Green,
+      "bg-slate-50": colorTheme === TagColorTheme.Gray,
+      "bg-blue-50": colorTheme === TagColorTheme.Blue
+    })
   }, /*#__PURE__*/React__default.createElement(Text, {
     inline: true,
-    color: "inherit",
+    color: textColor[colorTheme],
     text: text,
     type: size === TagSize.small ? "sm" : "base"
   }));
@@ -3997,7 +4025,7 @@ var TextEditorV2 = function TextEditorV2(_ref) {
 
 var _excluded$f = ["text", "icon", "className", "iconClass", "onClick"];
 
-function TextListItem(props) {
+function SectionItemWithContent(props) {
   var text = props.text,
       icon = props.icon,
       className = props.className,
@@ -4005,9 +4033,9 @@ function TextListItem(props) {
       onClick = props.onClick,
       rest = _objectWithoutPropertiesLoose(props, _excluded$f);
 
-  var mergedClasses = classNames("cweb-text-list-item", className);
-  var iconClasses = classNames("cweb-text-list-item-icon", iconClass);
-  return /*#__PURE__*/React__default.createElement(ListItem, _extends({
+  var mergedClasses = classNames("cweb-section-text-item", className);
+  var iconClasses = classNames("cweb-section-text-item-icon", iconClass);
+  return /*#__PURE__*/React__default.createElement(SectionItem, _extends({
     className: mergedClasses,
     onClick: onClick
   }, rest), icon && /*#__PURE__*/React__default.createElement("img", {
@@ -4019,7 +4047,7 @@ function TextListItem(props) {
   }));
 }
 
-TextListItem.propTypes = {
+SectionItemWithContent.propTypes = {
   text: PropTypes.string.isRequired,
   icon: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   className: PropTypes.string,
@@ -4055,7 +4083,7 @@ function ViewItem(_ref) {
     className: "vitals-view-item-title-line flex justify-start flex-row items-start"
   }, titlePropsMerged && /*#__PURE__*/React__default.createElement(Text, Object.assign({
     className: classNames(titlePropsMerged.className, "vitals-view-item-title mb-1 mr-2"),
-    color: "gray-500"
+    color: "slate-500"
   }, titlePropsMerged)), titleAccessory), contentPropsMerged && (contentPropsMerged == null ? void 0 : contentPropsMerged.map(function (textProps) {
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, textProps, {
       key: textProps.key || textProps.text
@@ -4934,7 +4962,6 @@ exports.Input = Input;
 exports.LeftArrowIcon = LeftArrowIcon;
 exports.LightBulbIcon = LightBulbIcon;
 exports.Line = Line;
-exports.ListItem = ListItem;
 exports.ListTable = ListTable;
 exports.LoadingIndicator = LoadingIndicator;
 exports.LockIcon = LockIcon;
@@ -4958,6 +4985,8 @@ exports.SearchCancelIcon = SearchCancelIcon$1;
 exports.SearchIcon = SearchIcon$1;
 exports.SecondaryButton = SecondaryButton;
 exports.Section = Section;
+exports.SectionItem = SectionItem;
+exports.SectionItemWithContent = SectionItemWithContent;
 exports.SettingsMenuButton = SettingsMenuButton;
 exports.SmallCircleIcon = SmallCircleIcon;
 exports.SmallDiamondIcon = SmallDiamondIcon;
@@ -4977,7 +5006,6 @@ exports.TextArea = Textarea;
 exports.TextEditor = TextEditor;
 exports.TextEditorV2 = TextEditorV2;
 exports.TextLink = TextLink;
-exports.TextListItem = TextListItem;
 exports.Title = Title;
 exports.ViewItem = ViewItem;
 //# sourceMappingURL=web-ui.cjs.development.js.map