@luscii-healthtech/web-ui 46.4.4 → 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` } })] });
@@ -1226,17 +1226,43 @@ const spacingKeys = [
   "mx",
   "my"
 ];
-const createSpacingClassNames = (keys, spacingProps) => {
-  return keys.filter((key) => spacingProps[key]).map((key) => `ui:${key}-${spacingProps[key]}`).join(" ");
+const underscoredSpacingPropNames = [
+  "_p",
+  "_pt",
+  "_pr",
+  "_pb",
+  "_pl",
+  "_px",
+  "_py",
+  "_m",
+  "_mt",
+  "_mr",
+  "_mb",
+  "_ml",
+  "_mx",
+  "_my"
+];
+const allSpacingPropNames = [
+  ...spacingKeys,
+  ...underscoredSpacingPropNames
+];
+const createSpacingClassNames = (keys, spacingPropsArg) => {
+  const underscoredPropKeys = [...underscoredSpacingPropNames];
+  const current = keys.filter((key) => spacingPropsArg[key] && !underscoredPropKeys.includes(key)).map((key) => `ui:${key}-${spacingPropsArg[key]}`).join(" ");
+  const underscored = keys.filter((key) => spacingPropsArg[key] && underscoredPropKeys.includes(key)).map((key) => `ui:${key.replace("_", "")}-f_${spacingPropsArg[key]}`).join(" ");
+  return `${current} ${underscored}`;
 };
 const Box = (props) => {
   const { as: Element = "div", borderRadius, borderRadiusLeft, borderRadiusRight, className, elevation, width, backgroundColor, hoverBackgroundColor, cursor } = props, attributes = __rest(props, ["as", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "className", "elevation", "width", "backgroundColor", "hoverBackgroundColor", "cursor"]);
-  const spacingClasses = createSpacingClassNames(spacingKeys, props);
+  const spacingClasses = createSpacingClassNames(allSpacingPropNames, props);
   const shadowClassName = createShadowClassName(elevation);
   const borderRadiusClassName = createRadiusClassName(borderRadius);
   const borderRadiusLeftClassName = createRadiusLeftClassName(borderRadiusLeft);
   const borderRadiusRightClassName = createRadiusRightClassName(borderRadiusRight);
-  const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
+  const attributesWithoutSpacingKeys = omit__default.default(attributes, [
+    ...spacingKeys,
+    ...underscoredSpacingPropNames
+  ]);
   const boxClasses = classNames__default.default(spacingClasses, {
     "ui:bg-surface": backgroundColor === "surface",
     "ui:bg-background": backgroundColor === "background",
@@ -1283,13 +1309,17 @@ const Box = (props) => {
 };
 
 const Stack = (props) => {
-  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false, divider } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse", "wrap", "divider"]);
+  const { children, gap, _gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false, divider } = props, attributes = __rest(props, ["children", "gap", "_gap", "align", "justify", "axis", "className", "reverse", "wrap", "divider"]);
   const stackClasses = classNames__default.default(`ui:flex`, {
     "ui:flex-row": axis === "x",
     "ui:flex-col": axis === "y",
     "ui:flex-row-reverse": axis === "x" && reverse,
     "ui:flex-col-reverse": axis === "y" && reverse,
     "ui:flex-wrap": wrap,
+    /**
+     * @deprecated
+     * Old spacing system, to be removed in a future major release. Use the `_gap` prop instead.
+     */
     "ui:gap-m": gap === "m",
     "ui:gap-none": gap === "none",
     "ui:gap-xxxxs": gap === "xxxxs",
@@ -1300,6 +1330,16 @@ const Stack = (props) => {
     "ui:gap-l": gap === "l",
     "ui:gap-xl": gap === "xl",
     "ui:gap-xxl": gap === "xxl",
+    "ui:gap-f_none": _gap === "none",
+    "ui:gap-f_xs": _gap === "xs",
+    "ui:gap-f_s": _gap === "s",
+    "ui:gap-f_base": _gap === "base",
+    "ui:gap-f_m": _gap === "m",
+    "ui:gap-f_l": _gap === "l",
+    "ui:gap-f_xl": _gap === "xl",
+    "ui:gap-f_2xl": _gap === "2xl",
+    "ui:gap-f_3xl": _gap === "3xl",
+    "ui:gap-f_4xl": _gap === "4xl",
     "ui:justify-center": justify === "center",
     "ui:justify-start": justify === "start",
     "ui:justify-end": justify === "end",
@@ -1506,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"]);
@@ -1560,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 })) }));
 };