@luscii-healthtech/web-ui 2.5.2 → 2.7.1

package/dist/components/CenteredHero/CenteredHero.d.ts

@@ -1,22 +1,12 @@
-export default CenteredHero;
-declare function CenteredHero({ title, text, image, buttons, className }: {
-    title: any;
-    text: any;
-    image: any;
-    buttons: any;
-    className: any;
-}): JSX.Element;
-declare namespace CenteredHero {
-    export namespace propTypes {
-        export const title: PropTypes.Requireable<string>;
-        export const text: PropTypes.Requireable<string>;
-        export const image: PropTypes.Requireable<string>;
-        export const buttons: PropTypes.Requireable<(PropTypes.InferProps<{
-            title: PropTypes.Validator<string>;
-            handleOnClick: PropTypes.Validator<(...args: any[]) => any>;
-            type: PropTypes.Validator<"primary" | "secondary">;
-        }> | null | undefined)[]>;
-        export const className: PropTypes.Requireable<string>;
-    }
+/// <reference types="react" />
+import { ButtonProps } from "../Button/Button.types";
+export declare type BackgroundColor = "white" | "slate-50";
+export interface CenteredHeroProps {
+    title: string;
+    text: string;
+    image: string;
+    buttons: ButtonProps[];
+    background?: BackgroundColor;
 }
-import PropTypes from "prop-types";
+declare const CenteredHero: ({ title, text, image, buttons, background, }: CenteredHeroProps) => JSX.Element;
+export default CenteredHero;

package/dist/web-ui-tailwind.css

@@ -691,8 +691,8 @@ video {
 
 .bg-red-400 {
   --bg-opacity: 1;
-  background-color: #fc8181;
-  background-color: rgba(252, 129, 129, var(--bg-opacity));
+  background-color: #FF6266;
+  background-color: rgba(255, 98, 102, var(--bg-opacity));
 }
 
 .bg-orange-50 {
@@ -1328,11 +1328,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1382,6 +1377,10 @@ video {
   margin-left: 0.75rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mr-4 {
   margin-right: 1rem;
 }
@@ -1406,10 +1405,6 @@ video {
   margin-left: 1.5rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .ml-10 {
   margin-left: 2.5rem;
 }
@@ -2054,6 +2049,10 @@ video {
   width: 6rem;
 }
 
+.w-36 {
+  width: 9rem;
+}
+
 .w-46 {
   width: 11.5rem;
 }
@@ -2066,10 +2065,6 @@ video {
   width: 26rem;
 }
 
-.w-200 {
-  width: 50rem;
-}
-
 .w-auto {
   width: auto;
 }

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

@@ -177,7 +177,7 @@ var WarningIcon = function WarningIcon(props) {
   }));
 };
 
-var css_248z$1 = "#application-toaster {\n  position: fixed;\n  left: 50%;\n  transform: translate(-50%, 150%);\n  bottom: 48px;\n  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n#application-toaster.shelved {\n  transform: translate(-50%, 150%);\n}\n\n#application-toaster.expanded {\n  transform: translate(-50%, 0);\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-title\"] {\n  --text-opacity: 1;\n  color: #2f855a;\n  color: rgba(47, 133, 90, var(--text-opacity));\n}\n\n#application-toaster.type-success .failure-icon {\n  display: none;\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] {\n  --bg-opacity: 1;\n  background-color: #E7F5EC;\n  background-color: rgba(231, 245, 236, var(--bg-opacity));\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n  --bg-opacity: 1;\n  background-color: #68d391;\n  background-color: rgba(104, 211, 145, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-title\"] {\n  --text-opacity: 1;\n  color: #c53030;\n  color: rgba(197, 48, 48, var(--text-opacity));\n}\n\n#application-toaster.type-failure .success-icon {\n  display: none;\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] {\n  --bg-opacity: 1;\n  background-color: #FFF1F1;\n  background-color: rgba(255, 241, 241, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n  --bg-opacity: 1;\n  background-color: #fc8181;\n  background-color: rgba(252, 129, 129, var(--bg-opacity));\n}\n";
+var css_248z$1 = "#application-toaster {\n  position: fixed;\n  left: 50%;\n  transform: translate(-50%, 200%);\n  bottom: 48px;\n  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n#application-toaster.shelved {\n  transform: translate(-50%, 200%);\n}\n\n#application-toaster.expanded {\n  transform: translate(-50%, 0);\n}\n\n#application-toaster.type-success {\n  --bg-opacity: 1;\n  background-color: #E7F5EC;\n  background-color: rgba(231, 245, 236, var(--bg-opacity));\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-title\"] {\n  --text-opacity: 1;\n  color: #2f855a;\n  color: rgba(47, 133, 90, var(--text-opacity));\n}\n\n#application-toaster.type-success .failure-icon {\n  display: none;\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] {\n  --bg-opacity: 1;\n  background-color: #E7F5EC;\n  background-color: rgba(231, 245, 236, var(--bg-opacity));\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n  --bg-opacity: 1;\n  background-color: #52B093;\n  background-color: rgba(82, 176, 147, var(--bg-opacity));\n}\n\n#application-toaster.type-failure {\n  --bg-opacity: 1;\n  background-color: #FFF1F1;\n  background-color: rgba(255, 241, 241, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-title\"] {\n  --text-opacity: 1;\n  color: #c53030;\n  color: rgba(197, 48, 48, var(--text-opacity));\n}\n\n#application-toaster.type-failure .success-icon {\n  display: none;\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] {\n  --bg-opacity: 1;\n  background-color: #FFF1F1;\n  background-color: rgba(255, 241, 241, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n  --bg-opacity: 1;\n  background-color: #FF6266;\n  background-color: rgba(255, 98, 102, var(--bg-opacity));\n}\n";
 styleInject(css_248z$1);
 
 var TOASTER_TYPE_OPTIONS = {
@@ -200,7 +200,7 @@ var Toaster = function Toaster(_ref) {
     style: styleOverwrite,
     id: "application-toaster",
     "data-test-id": "toaster-panel-" + type,
-    className: classNames("bg-white cursor-pointer", "rounded-md shadow-md", "min-h-13 max-h-19 w-104 transition-transform", {
+    className: classNames("bg-white cursor-pointer", "rounded-md shadow-lg", "min-h-13 max-h-19 w-104 transition-transform", {
       shelved: !isVisible,
       expanded: isVisible,
       "type-success": isSuccess,
@@ -1130,49 +1130,42 @@ Title.defaultProps = {
   type: "base"
 };
 
-CenteredHero.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string,
-  image: PropTypes.string,
-  buttons: /*#__PURE__*/PropTypes.arrayOf( /*#__PURE__*/PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    handleOnClick: PropTypes.func.isRequired,
-    type: /*#__PURE__*/PropTypes.oneOf([BUTTON_ROLES.PRIMARY, BUTTON_ROLES.SECONDARY]).isRequired
-  })),
-  className: PropTypes.string
-};
-
-function CenteredHero(_ref) {
+var CenteredHero = function CenteredHero(_ref) {
   var title = _ref.title,
       text = _ref.text,
       image = _ref.image,
       buttons = _ref.buttons,
-      className = _ref.className;
+      _ref$background = _ref.background,
+      background = _ref$background === void 0 ? "slate-50" : _ref$background;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(className, "p-6 my-6 flex flex-col items-center w-200 ml-auto mr-auto")
+    className: classNames("p-6 flex flex-col items-center align-center w-full", {
+      "bg-white": background === "white",
+      "bg-slate-50": background === "slate-50"
+    })
   }, image && /*#__PURE__*/React__default.createElement("img", {
-    src: image
+    src: image,
+    className: "h-36 w-36 mb-4"
   }), title && /*#__PURE__*/React__default.createElement(Title, {
-    className: "mt-8 mb-2",
     text: title,
     type: "base"
   }), text && /*#__PURE__*/React__default.createElement(Text, {
     text: text
   }), (buttons == null ? void 0 : buttons.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row mt-8"
+    className: "flex flex-row mt-4"
   }, buttons.filter(function (button) {
     return button.title && button.handleOnClick && button.type;
   }).map(function (button) {
     return /*#__PURE__*/React__default.createElement(Button, {
       className: "mr-4 last:mr-0",
       key: button.title,
-      role: button.type,
+      role: button.role,
+      type: button.type,
       title: button.title,
-      text: button.title,
+      text: button.text,
       onClick: button.handleOnClick
     });
   })));
-}
+};
 
 var css_248z$5 = ".cweb-checkbox {\n  outline: none;\n  transition: all 0.3s ease;\n}\n\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n}\n\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border: 1px solid #ff6266;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon {\n  display: block;\n}\n\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #0074dd;\n}\n\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n  width: 56px;\n  height: 28px;\n  position: relative;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #d1d5db;\n  border-radius: 16px;\n}\n\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n  position: relative;\n  display: block;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  top: 4px;\n  left: 4px;\n  background-color: white;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n  background-color: #6abfa6;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n  left: 32px;\n}\n";
 styleInject(css_248z$5);
@@ -2289,6 +2282,7 @@ function LoadingIndicator(_ref) {
     className: containerClassName
   }), /*#__PURE__*/React__default.createElement("img", {
     src: asSpinner ? spinnerToRender : img$e,
+    "data-chromatic": "ignore",
     className: classNames("text-gray-600 fill-current stroke-current", {
       "h-4 w-4": asSpinner,
       "h-12 w-12": !asSpinner
@@ -2920,6 +2914,7 @@ var ListItem = function ListItem(_ref) {
     className: "w-6 h-6"
   }), !loadIconError && icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
     src: icon,
+    "data-chromatic": "ignore",
     alt: "list-item-icon",
     className: "w-6 h-6 text-sm",
     onLoad: onListItemIconLoad,