@luscii-healthtech/web-ui 42.2.0 → 42.2.2

package/dist/index.development.js

@@ -3139,17 +3139,28 @@ const TopBar = (props) => {
 TopBar.Actions = Actions$1;
 
 function Card(props) {
-  const { actions: __, as: Element = "div", children, border, className, elevation, elevationOnHover, padding = true, title: _, borderRadius = "m" } = props, rest = __rest(props, ["actions", "as", "children", "border", "className", "elevation", "elevationOnHover", "padding", "title", "borderRadius"]);
+  const { actions: __, as: Element = "div", children, border, className, elevation, elevationOnHover, padding = true, title: _, borderRadius = "m", highlighted = false } = props, rest = __rest(props, ["actions", "as", "children", "border", "className", "elevation", "elevationOnHover", "padding", "title", "borderRadius", "highlighted"]);
   const hasHoverEffect = !(elevation === elevationOnHover || elevationOnHover === void 0);
   const hoverShadowClassName = createShadowClassName(elevationOnHover, {
     modifier: "hover",
     transition: true
   });
-  const classes = classNames__default.default("ui:overflow-hidden", "ui:bg-white", "ui:transition-colors ui:duration-300", className, hoverShadowClassName, {
-    "ui:border ui:border-slate-300": border,
-    "ui:hover:border-slate-400": hasHoverEffect
+  const classes = classNames__default.default("ui:overflow-hidden", "ui:bg-white", "ui:transition-colors ui:duration-300", className, hoverShadowClassName, "ui:transition-shadow ui:duration-300", "ui:relative", "ui:before:contain-strict ui:before:transition[transform, opacity] ui:before:delay-50 ui:before:duration-150 ui:before:motion-reduce:duration-[0ms]!", "ui:before:origin-left ui:before:absolute ui:before:left-0 ui:before:content-[''] ui:before:inset-y-0 ui:before:ease-in-out", {
+    "ui:before:opacity-0 ui:before:scale-x-0": !highlighted,
+    "ui:before:opacity-100 ui:before:scale-x-100": highlighted,
+    "relative ui:before:bg-primary": highlighted,
+    "ui:before:w-xxxxs": ["none", "xxxxs"].includes(borderRadius),
+    "ui:before:w-xxxs": borderRadius === "xxxs",
+    "ui:before:w-xxs": borderRadius === "xxs",
+    "ui:before:w-xs": borderRadius === "xs",
+    "ui:before:w-s": borderRadius === "s",
+    "ui:before:w-m": ["m", "l", "xl", "xxl"].includes(borderRadius)
+    // We cap at `ui:before:w-m` otherwise the bar overlaps the contents of the Card.
   });
-  return jsxRuntime.jsx(Box, Object.assign({ as: Element, elevation, borderRadius }, rest, { className: classes, children: jsxRuntime.jsxs(Box, { className: "ui:bg-white", children: [jsxRuntime.jsx(RenderTopBar, Object.assign({}, props)), padding ? jsxRuntime.jsx(Padding$1, { children }) : children] }) }));
+  return jsxRuntime.jsx(Box, Object.assign({ as: Element, elevation: highlighted && !elevation ? "large" : elevation, borderRadius }, rest, { className: classes, children: jsxRuntime.jsxs(Box, { className: classNames__default.default("ui:bg-white ui:rounded-inherit ui:border ui:border-transparent ui:transition[border-color] ui:duration-300 ui:motion-reduce:duration-[0ms]!", {
+    "ui:border-slate-300": border || highlighted,
+    "ui:hover:border-slate-400": hasHoverEffect
+  }), children: [jsxRuntime.jsx(RenderTopBar, Object.assign({}, props)), padding ? jsxRuntime.jsx(Padding$1, { children }) : children] }) }));
 }
 Card.Title = (props) => jsxRuntime.jsx(Title, Object.assign({ variant: "sm" }, props));
 Card.TopBar = TopBar;
@@ -4149,7 +4160,7 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
      * since the spacing needed will be occupied by the `belowHeader` component itself.
      */
     { "ui:mt-xl": !belowHeader }
-  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }), children, jsxRuntime.jsx(Line, { left: accessoriesToRender !== null && accessoriesToRender !== void 0 ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
+  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }), children, jsxRuntime.jsx(Line, { left: accessory ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
 };
 const PageHeaderBlock = ({ header, title }) => {
   if (!title && !header) {