@luscii-healthtech/web-ui 2.34.0 → 2.35.0

package/dist/components/TabLinks/TabLinks.d.ts

@@ -10,5 +10,5 @@ interface TabLinksProps {
     navigate: NavigateFn;
     location: WindowLocation;
 }
-declare const TabLinks: ({ patientUuid, items, navigate, location }: TabLinksProps) => JSX.Element;
+declare const TabLinks: ({ patientUuid, items, navigate, location, }: TabLinksProps) => JSX.Element;
 export default TabLinks;

package/dist/web-ui-tailwind.css

@@ -1988,12 +1988,6 @@ video {
   color: rgba(100, 116, 139, var(--text-opacity));
 }
 
-.text-slate-700 {
-  --text-opacity: 1;
-  color: #334155;
-  color: rgba(51, 65, 85, var(--text-opacity));
-}
-
 .text-slate-800 {
   --text-opacity: 1;
   color: #1e293b;
@@ -2048,10 +2042,10 @@ video {
   color: rgba(100, 116, 139, var(--text-opacity));
 }
 
-.hover\:text-slate-700:hover {
+.hover\:text-slate-800:hover {
   --text-opacity: 1;
-  color: #334155;
-  color: rgba(51, 65, 85, var(--text-opacity));
+  color: #1e293b;
+  color: rgba(30, 41, 59, var(--text-opacity));
 }
 
 .hover\:text-slate-900:hover {
@@ -2078,10 +2072,10 @@ video {
   color: rgba(100, 116, 139, var(--text-opacity));
 }
 
-.focus\:text-slate-700:focus {
+.focus\:text-slate-800:focus {
   --text-opacity: 1;
-  color: #334155;
-  color: rgba(51, 65, 85, var(--text-opacity));
+  color: #1e293b;
+  color: rgba(30, 41, 59, var(--text-opacity));
 }
 
 .group:hover .group-hover\:text-white {

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

@@ -579,7 +579,7 @@ var Text = function Text(props) {
    * https://v1.tailwindcss.com/docs/controlling-file-size
    */
   var allowedColors = {
-    base: "text-slate-700",
+    base: "text-slate-800",
     "slate-500": "text-slate-500",
     "slate-200": "text-slate-200",
     red: "text-red-700",
@@ -968,7 +968,7 @@ var Title = function Title(props) {
 
   var containerClassName = classNames("title", //this is used to load the correct font from the css
   "font-bold", {
-    "text-slate-700": !((_props$className = props.className) != null && _props$className.match(/\s(text-)/)),
+    "text-slate-800": !((_props$className = props.className) != null && _props$className.match(/\s(text-)/)),
     "text-base": props.type === "xs",
     "text-xl": props.type === "sm",
     "text-2xl": props.type === "base",
@@ -1470,7 +1470,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       "pr-11": clearable
     }, {
       "text-slate-400 bg-slate-50": isDisabled,
-      "text-slate-700": !isDisabled,
+      "text-slate-800": !isDisabled,
       "border-input-border": !isDisabled && !isError,
       "hover:border-input-border-dark": !isDisabled,
       "border-red-700": isError,
@@ -1685,7 +1685,7 @@ var AccordionList = function AccordionList(_ref) {
         return !isSearchEnabled || isSubstring(listItem.title, searchString) || isSubstring(listItem.subtitle, searchString);
       });
 
-      if (filteredListItems.length === 0) {
+      if (!isSearchEnabled && filteredListItems.length === 0) {
         return null;
       }
 
@@ -2559,7 +2559,7 @@ var NotificationBanner = function NotificationBanner(props) {
       _props$centerContent = props.centerContent,
       centerContent = _props$centerContent === void 0 ? false : _props$centerContent;
   var classes = classNames("px-6 py-4 min-h-13 flex flex-row items-center border border-solid rounded", props.className, {
-    "bg-slate-100 border-slate-300 text-slate-700": props.color === "base",
+    "bg-slate-100 border-slate-300 text-slate-800": props.color === "base",
     "bg-blue-50 border-blue-700 text-blue-800": props.color === "blue",
     "bg-red-50 border-red-700 text-red-700": props.color === "red",
     "bg-green-50 border-green-700 text-green-700": props.color === "green",
@@ -2809,7 +2809,7 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
   })));
 };
 
-var css_248z$a = ".cweb-box-shadow-default {\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-box-shadow-default {\n    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper {\n  z-index: 5;\n}\n\n.react-datepicker-popper[data-placement^=\"bottom\"] {\n  margin-top: 4px;\n}\n\n.react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n}\n\n.react-datepicker-popper[data-placement^=\"top\"] {\n  margin-bottom: 4px;\n}\n\n.react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  border: 0;\n  transform: rotate(90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  border: 0;\n  transform: rotate(-90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #334155;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #0074dd !important;\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #045baa !important;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n    .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #334155;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n      .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n      .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #0074dd;\n  border-color: #0074dd;\n  cursor: pointer;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-names,\n  .cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n\n.cweb-datepicker-calendar .react-datepicker__month {\n  padding-bottom: 8px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-names,\n  .cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-name,\n  .cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #334155;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #0074dd;\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #0074dd;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #0074dd;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}\n";
+var css_248z$a = ".cweb-box-shadow-default {\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-box-shadow-default {\n    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper {\n  z-index: 5;\n}\n\n.react-datepicker-popper[data-placement^=\"bottom\"] {\n  margin-top: 4px;\n}\n\n.react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n}\n\n.react-datepicker-popper[data-placement^=\"top\"] {\n  margin-bottom: 4px;\n}\n\n.react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  border: 0;\n  transform: rotate(90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  border: 0;\n  transform: rotate(-90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #0074dd !important;\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #045baa !important;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n    .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n      .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n      .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #0074dd;\n  border-color: #0074dd;\n  cursor: pointer;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-names,\n  .cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n\n.cweb-datepicker-calendar .react-datepicker__month {\n  padding-bottom: 8px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-names,\n  .cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-name,\n  .cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #0074dd;\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #0074dd;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #0074dd;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}\n";
 styleInject(css_248z$a);
 
 var _excluded$9 = ["className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected"];
@@ -2870,7 +2870,7 @@ var Datepicker = /*#__PURE__*/function (_Component) {
         otherProps = _objectWithoutPropertiesLoose(_this$props2, _excluded$9);
 
     var dateFormat = this.getDateFormat();
-    var pickerClassName = classNames("cweb-datepicker text-slate-700 text-sm", className);
+    var pickerClassName = classNames("cweb-datepicker text-slate-800 text-sm", className);
 
     var getCloseButtonText = function getCloseButtonText() {
       if (!closeButtonText) {
@@ -5807,7 +5807,7 @@ var TabbarItem = function TabbarItem(_ref) {
   };
 
   var itemClassName = classNames("flex first:ml-0 ml-2 flex-row cursor-pointer py-2 px-3 rounded-lg focus:outline-primary transition ease-in duration-150", className, {
-    "bg-slate-100 text-slate-700 hover:text-slate-700 focus:text-slate-700": isSelected,
+    "bg-slate-100 text-slate-800 hover:text-slate-800 focus:text-slate-800": isSelected,
     "bg-slate-50 text-slate-500 hover:bg-slate-100 hover:text-slate-500 focus:text-slate-500 opacity-75": !isSelected
   });
   return /*#__PURE__*/React__default.createElement("div", {
@@ -5887,7 +5887,8 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       text: name,
       color: "blue-800"
     })) : /*#__PURE__*/React__default.createElement(Text, {
-      text: name
+      text: name,
+      type: "strong"
     }));
   });
   return /*#__PURE__*/React__default.createElement("ul", {
@@ -5968,7 +5969,7 @@ var TabLinks = function TabLinks(_ref4) {
   var linkProps = function linkProps(_ref5) {
     var isCurrent = _ref5.isCurrent;
     return isCurrent ? {
-      className: "mr-2 bg-slate-100 is-selected py-3 px-4 rounded-lg text-sm font-semibold transition ease-in duration-150 text-slate-700 hover:text-slate-700 focus:text-slate-700 focus:outline-primary"
+      className: "mr-2 bg-slate-100 is-selected py-3 px-4 rounded-lg text-sm font-semibold transition ease-in duration-150 text-slate-800 hover:text-slate-800 focus:text-slate-800 focus:outline-primary"
     } : {
       className: "mr-2 text-slate-500 py-3 px-4 text-sm hover:bg-slate-100 hover:text-slate-500 focus:text-slate-500 rounded-lg transition ease-in duration-150 focus:outline-primary"
     };