@luscii-healthtech/web-ui 52.5.0 → 52.6.1

package/dist/index.development.js

@@ -1258,7 +1258,7 @@ const createSpacingClassNames = (keys, spacingPropsArg) => {
   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 BoxInner = (props, ref) => {
   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(allSpacingPropNames, props);
   const shadowClassName = createShadowClassName(elevation);
@@ -1311,11 +1311,12 @@ const Box = (props) => {
     "ui:cursor-grab": cursor === "grab",
     "ui:cursor-grabbing": cursor === "grabbing"
   }, shadowClassName, borderRadiusClassName, borderRadiusLeftClassName, borderRadiusRightClassName);
-  return jsxRuntime.jsx(Element, Object.assign({ className: tailwindMerge.twMerge(boxClasses, className) }, attributesWithoutSpacingKeys));
+  return jsxRuntime.jsx(Element, Object.assign({ ref, className: tailwindMerge.twMerge(boxClasses, className) }, attributesWithoutSpacingKeys));
 };
+const Box = React__namespace.default.forwardRef(BoxInner);
 
-const Stack = (props) => {
-  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 StackInner = (props, ref) => {
+  const { children, gap, _gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false, divider, as } = props, attributes = __rest(props, ["children", "gap", "_gap", "align", "justify", "axis", "className", "reverse", "wrap", "divider", "as"]);
   const stackClasses = classNames__default.default(`ui:flex`, {
     "ui:flex-row": axis === "x",
     "ui:flex-col": axis === "y",
@@ -1364,19 +1365,26 @@ const Stack = (props) => {
   const classes = tailwindMerge.twMerge(stackClasses, className);
   if (divider) {
     const numberOfChildNodes = React__namespace.default.Children.toArray(children).length;
-    return jsxRuntime.jsx(Box, Object.assign({ className: classes }, attributes, { children: React__namespace.default.Children.map(children, (child, index) => {
-      const isLastItem = index >= numberOfChildNodes - 1;
-      if (React__namespace.default.isValidElement(child) === false) {
-        return null;
-      }
-      if (isLastItem) {
-        return child;
-      }
-      return jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [child, divider] });
-    }) }));
+    return (
+      // @ts-expect-error - Complex polymorphic type intersection between Stack and Box props
+      jsxRuntime.jsx(Box, Object.assign({ as, ref, className: classes }, attributes, { children: React__namespace.default.Children.map(children, (child, index) => {
+        const isLastItem = index >= numberOfChildNodes - 1;
+        if (React__namespace.default.isValidElement(child) === false) {
+          return null;
+        }
+        if (isLastItem) {
+          return child;
+        }
+        return jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [child, divider] });
+      }) }))
+    );
   }
-  return jsxRuntime.jsx(Box, Object.assign({ className: classes }, attributes, { children }));
+  return (
+    // @ts-expect-error - Complex polymorphic type intersection between Stack and Box props
+    jsxRuntime.jsx(Box, Object.assign({ as, ref, className: classes }, attributes, { children }))
+  );
 };
+const Stack = React__namespace.default.forwardRef(StackInner);
 
 const BaseListHeader = ({ title, subtitle, button, headerAccessory, transparent, withBorder }) => {
   const hasHeaderComponent = Boolean(button || headerAccessory);