@luscii-healthtech/web-ui 2.43.0 → 2.44.1

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export interface Crumb {
     name: string;
+    key?: string;
     link?: string;
 }
 export interface BreadcrumbProps {

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare type CardProps = {
+    title: string;
+    children: React.ReactNode;
+    dataTestId?: string;
+};
+/**
+ * Card component that centralizes itself inside a container.
+ * Specific variant made with w-135 to suffice the use case needed,
+ * more variants can be added.
+ */
+export declare const Card: React.FC<CardProps>;

package/dist/index.d.ts

@@ -77,3 +77,4 @@ export { IconProps } from "./components/Icons/types/IconProps.type";
 export * from "./components/Icons";
 export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";
+export { Card, type CardProps } from "./components/Card/Card";

package/dist/web-ui-tailwind.css

@@ -645,6 +645,12 @@ video {
   margin-left: calc(1rem * calc(1 - var(--space-x-reverse)));
 }
 
+.space-y-6 > :not(template) ~ :not(template) {
+  --space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--space-y-reverse));
+}
+
 .space-x-6 > :not(template) ~ :not(template) {
   --space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--space-x-reverse));
@@ -2218,6 +2224,10 @@ video {
   width: 33rem;
 }
 
+.w-135 {
+  width: 33.75rem;
+}
+
 .w-216 {
   width: 54rem;
 }

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

@@ -6138,9 +6138,10 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var crumbs = _ref.crumbs;
   var breadcrumbItems = crumbs.map(function (_ref2) {
     var name = _ref2.name,
-        link = _ref2.link;
+        link = _ref2.link,
+        key = _ref2.key;
     return /*#__PURE__*/React__default.createElement("li", {
-      key: name,
+      key: key || name,
       className: "flex flex-row items-center slash-split "
     }, link ? /*#__PURE__*/React__default.createElement(router.Link, {
       to: link
@@ -6796,7 +6797,7 @@ function GenericForm(_ref) {
   }, [defaultValues]);
   var handleSubmit = useFormReturn.handleSubmit;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
+    className: "space-y-6"
   }, /*#__PURE__*/React__default.createElement(Form, {
     fields: fields,
     useFormReturn: useFormReturn
@@ -6817,7 +6818,7 @@ function Form(_ref2) {
   var fields = _ref2.fields,
       useFormReturn = _ref2.useFormReturn;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
+    className: "space-y-6"
   }, fields.map(function (props) {
     return FormFieldMapper(props, useFormReturn);
   }));
@@ -7864,6 +7865,26 @@ var FullPageModal = function FullPageModal(_ref) {
   }, children)));
 };
 
+/**
+ * Card component that centralizes itself inside a container.
+ * Specific variant made with w-135 to suffice the use case needed,
+ * more variants can be added.
+ */
+
+var Card = function Card(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      dataTestId = _ref.dataTestId;
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": dataTestId,
+    className: "flex flex-col p-6 mx-auto bg-white rounded-lg w-135"
+  }, /*#__PURE__*/React__default.createElement(Title, {
+    className: "mb-6",
+    type: "sm",
+    text: title
+  }), children);
+};
+
 exports.AccordionList = AccordionList;
 exports.AddIcon = AddIcon;
 exports.AlertsIcon = AlertsIcon;
@@ -7872,6 +7893,7 @@ exports.Badge = Badge;
 exports.BellIcon = BellIcon;
 exports.Breadcrumbs = Breadcrumbs;
 exports.CRUDPage = CRUDPage;
+exports.Card = Card;
 exports.Carousel = Carousel;
 exports.CenteredHero = CenteredHero;
 exports.ChartIcon = ChartIcon;