@luscii-healthtech/web-ui 2.5.2 → 2.7.1

package/dist/web-ui.esm.js

@@ -169,7 +169,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 = {
@@ -192,7 +192,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,
@@ -1122,49 +1122,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);
@@ -2281,6 +2274,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
@@ -2912,6 +2906,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,