@luscii-healthtech/web-ui 46.5.0 → 47.0.0

package/dist/index.development.js

@@ -235,8 +235,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$g = "/* https://stackoverflow.com/a/13924997 */\n.ui\\: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$g);
+var css_248z$f = "/* https://stackoverflow.com/a/13924997 */\n.ui\\: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$f);
 
 const newVariants = /* @__PURE__ */ new Set([
   "body-base-light",
@@ -1003,8 +1003,8 @@ toast.info = (message) => {
   showToaster({ message, type: "success", showIcon: true, title: "" });
 };
 
-var css_248z$f = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/** Load Avenir fonts for titles */\n@font-face {\n  font-family: \"AvenirNextLTPro-Regular\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"AvenirNextLTPro-Bold\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
-styleInject(css_248z$f);
+var css_248z$e = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/** Load Avenir fonts for titles */\n@font-face {\n  font-family: \"AvenirNextLTPro-Regular\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"AvenirNextLTPro-Bold\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
+styleInject(css_248z$e);
 
 const Title = (props) => {
   const { variant: variantFromProps = "base", type, className, text, children, color, level, ref } = props, rest = __rest(props, ["variant", "type", "className", "text", "children", "color", "level", "ref"]);
@@ -1080,8 +1080,8 @@ const isSubstring = (string, searchTerm, caseSensitive = false) => {
   return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
 };
 
-var css_248z$e = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
-styleInject(css_248z$e);
+var css_248z$d = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
+styleInject(css_248z$d);
 
 const ListItemSkeleton = () => {
   return jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:p-4", children: [jsxRuntime.jsx("div", { className: "skeleton-box is-circle ui:mr-2", style: { width: `${32}px`, height: `${32}px` } }), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [jsxRuntime.jsx("div", { className: "skeleton-box ui:mb-1", style: { width: `${160}px`, height: `${14}px` } }), jsxRuntime.jsx("div", { className: "skeleton-box", style: { width: `${110}px`, height: `${14}px` } })] }), jsxRuntime.jsx("div", { className: "skeleton-box is-button ui:ml-auto ui:rounded-full", style: { width: `${24}px`, height: `${24}px` } })] });
@@ -1546,47 +1546,14 @@ const DraggableBaseList = (_a) => {
   return jsxRuntime.jsx(BaseList, Object.assign({}, props, { items, itemComponent: DraggableBaseListItem }));
 };
 
-var css_248z$d = ".dropzone-dashed-border {\n  border-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 fill%3D%22none%22%3E  %3Cpath fill%3D%22%230074DD%22 fill-rule%3D%22evenodd%22    d%3D%22M8 0v1h8V0H8Zm0 23v1h8v-1H8ZM0 8h1v8H0V8Zm24 0h-1v8h1V8ZM1 0h3v1H1v3H0V0h1ZM0 23v-3h1v3h3v1H0v-1Zm20 0v1h4v-4h-1v3h-3Zm0-22V0h4v4h-1V1h-3Z%22    clip-rule%3D%22evenodd%22 %2F%3E%3C%2Fsvg%3E\") 1 1 1 1;\n  border-image-width: 4px;\n  border-image-slice: 4 4 4 4;\n  border-image-repeat: round;\n}";
-styleInject(css_248z$d);
-
-const DefaultState = ({ icon, message, horizontal = false, alignMessage = "center" }) => {
-  if (!icon && !message) {
-    return null;
-  }
-  const alignLeft = horizontal || alignMessage === "left";
-  const className = classNames__default.default("ui:p-4 ui:flex ui:items-center", {
-    "ui:flex-col ui:justify-center": !alignLeft,
-    "ui:flex-row ui:w-full ": alignLeft
-  });
-  return jsxRuntime.jsxs("div", { className, children: [icon && jsxRuntime.jsx(Icon, { name: icon, className: classNames__default.default("ui:text-slate-500", {
-    "ui:mb-2": message && !alignLeft,
-    "ui:mr-2": alignLeft
-  }) }), message && jsxRuntime.jsx(Text, { type: "base", color: "slate-500", className: "ui:text-center", text: message })] });
-};
-const DropzonePresentation = React.forwardRef(({ message, icon, isHighlighted, isClickable, className, dataTestId, children, horizontal, alignMessage }, ref) => {
-  const classes = classNames__default.default("ui:border ui:flex ui:items-center ui:justify-center ui:border-primary", {
-    "dropzone-dashed-border": !isHighlighted,
-    "ui:bg-white": !isHighlighted,
-    "ui:bg-blue-50": isHighlighted,
-    "ui:border-dashed": !isHighlighted,
-    "ui:border-solid": isHighlighted,
-    "ui:hover:bg-blue-100 ui:transition-colors ui:ease-in-out ui:duration-300": isClickable
+const Dropzone = React.forwardRef((props, ref) => {
+  const { isHighlighted = false, className, children } = props, rest = __rest(props, ["isHighlighted", "className", "children"]);
+  const classes = classNames__default.default("ui:border ui:items-center ui:border-primary", {
+    "ui:bg-surface ui:border-dashed": !isHighlighted,
+    "ui:bg-primary-background ui:border-solid": isHighlighted
   }, className);
-  return jsxRuntime.jsx("div", { className: classes, ref, "data-test-id": dataTestId, children: children || jsxRuntime.jsx(DefaultState, { icon, message, horizontal, alignMessage }) });
+  return jsxRuntime.jsx("div", Object.assign({ className: classes, ref }, rest, { children }));
 });
-const Dropzone = (_a) => {
-  var { draggableIdentifier: identifier, disabled, data, dataTestId, onClick } = _a, props = __rest(_a, ["draggableIdentifier", "disabled", "data", "dataTestId", "onClick"]);
-  const { setNodeRef, isOver } = core.useDroppable({
-    id: identifier,
-    disabled,
-    data
-  });
-  const presentation = jsxRuntime.jsx(DropzonePresentation, Object.assign({ ref: setNodeRef, isHighlighted: isOver, isClickable: onClick && !disabled }, props, { dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : `dropzone-${identifier}` }));
-  if (onClick) {
-    return jsxRuntime.jsx("button", { onClick, disabled, className: "ui:block ui:w-full ui:rounded ui:focus:outline-primary", children: presentation });
-  }
-  return presentation;
-};
 
 const SortableBaseListItem = (_a) => {
   var { draggableData } = _a, props = __rest(_a, ["draggableData"]);
@@ -1600,7 +1567,7 @@ const SortableBaseListItem = (_a) => {
   });
   const styleTransform = utilities.CSS.Transform.toString(transform);
   if (isDragging) {
-    return jsxRuntime.jsxs("div", { style: { transform: styleTransform, position: "relative" }, children: [jsxRuntime.jsx(DropzonePresentation, { className: "ui:absolute ui:h-full ui:w-full" }), jsxRuntime.jsx("div", { className: "ui:invisible", children: jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: props.__isNested ? false : true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) })) })] });
+    return jsxRuntime.jsxs("div", { style: { transform: styleTransform, position: "relative" }, children: [jsxRuntime.jsx(Dropzone, { className: "ui:absolute ui:h-full ui:w-full" }), jsxRuntime.jsx("div", { className: "ui:invisible", children: jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: props.__isNested ? false : true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) })) })] });
   }
   return jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: props.__isNested ? false : true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) }));
 };