sevago-library 1.0.3 → 1.0.7

package/dist/index.cjs.js

@@ -73709,6 +73709,68 @@ const TextFieldElement = ({
     )
   ] });
 };
+const TagElement = ({
+  type,
+  content,
+  width: width2 = "fit-content",
+  variation = "caption",
+  size = "medium",
+  variant = "contained",
+  sx,
+  color: color2,
+  iconProps
+}) => {
+  const TAG_VARIANT = {
+    contained: {
+      backgroundColor: type,
+      color: color2 || "white"
+    },
+    outlined: {
+      backgroundColor: lightenColor(type, 0.8),
+      color: type
+    },
+    "outlined-border": {
+      backgroundColor: lightenColor(type, 0.8),
+      border: `1px solid ${type}`,
+      color: type
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: iconProps ? /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Stack,
+    {
+      sx: {
+        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+        width: width2,
+        textAlign: "center",
+        textWrap: "nowrap",
+        ...TAG_SIZE[size],
+        ...TAG_VARIANT[variant],
+        ...sx
+      },
+      children: [
+        iconProps && iconProps,
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: variation, children: content })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    material.Typography,
+    {
+      variant: variation,
+      sx: {
+        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+        width: width2,
+        textAlign: "center",
+        textWrap: "nowrap",
+        justifyContent: "center",
+        ...getLimitLineCss(1),
+        ...TAG_SIZE[size],
+        ...TAG_VARIANT[variant],
+        ...sx
+      },
+      children: content
+    }
+  ) });
+};
 const TypographyInfoUser = ({
   items,
   columns = 2,
@@ -73734,37 +73796,27 @@ const TypographyInfoUser = ({
         system.Stack,
         {
           sx: {
-            display: direction === "row" ? "grid" : "flex",
             gridTemplateColumns: direction === "row" ? columns === 1 ? "1fr 3fr" : gridTemplateColumns2 : "unset",
             height: "fit-content",
-            flexDirection: direction === "column" ? "column" : "row"
+            flexDirection: direction === "column" ? "column" : "row",
+            gap: 0
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              material.Typography,
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { sx: { ...TYPOGRAPHY.textSm.regular, color: COMMON.gray6, flex: 1 }, children: [
+              highlightYellow(item.label, highlightQuery ?? "", showEmptyAsDots),
+              ":"
+            ] }),
+            item.statusTag ? /* @__PURE__ */ jsxRuntime.jsx(
+              TagElement,
               {
-                sx: {
-                  ...TYPOGRAPHY.textSm.regular,
-                  color: COMMON.gray6,
-                  flex: 1
-                },
-                children: [
-                  highlightYellow(item.label, highlightQuery ?? "", showEmptyAsDots),
-                  ":"
-                ]
+                sx: { textTransform: "none", width: "100%", ...sx },
+                content: item.value,
+                type: item.color || "inherit"
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
               material.Typography,
               {
-                sx: {
-                  ...TYPOGRAPHY.textSm.regular,
-                  color: COMMON.black,
-                  flex: 1,
-                  borderBottom: `1px solid ${COMMON.gray8}`,
-                  textAlign: "right",
-                  ...item.sxValue
-                },
+                sx: { ...TYPOGRAPHY.textSm.regular, color: COMMON.black, flex: 1, ...item.sxValue },
                 children: highlightYellow(item.value, highlightQuery ?? "", showEmptyAsDots)
               }
             )
@@ -75989,68 +76041,6 @@ const tableArgTypes = {
   getRowMenu: { control: false },
   onDisabled: { control: false }
 };
-const TagElement = ({
-  type,
-  content,
-  width: width2 = "fit-content",
-  variation = "caption",
-  size = "medium",
-  variant = "contained",
-  sx,
-  color: color2,
-  iconProps
-}) => {
-  const TAG_VARIANT = {
-    contained: {
-      backgroundColor: type,
-      color: color2 || "white"
-    },
-    outlined: {
-      backgroundColor: lightenColor(type, 0.8),
-      color: type
-    },
-    "outlined-border": {
-      backgroundColor: lightenColor(type, 0.8),
-      border: `1px solid ${type}`,
-      color: type
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: iconProps ? /* @__PURE__ */ jsxRuntime.jsxs(
-    material.Stack,
-    {
-      sx: {
-        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
-        width: width2,
-        textAlign: "center",
-        textWrap: "nowrap",
-        ...TAG_SIZE[size],
-        ...TAG_VARIANT[variant],
-        ...sx
-      },
-      children: [
-        iconProps && iconProps,
-        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: variation, children: content })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    material.Typography,
-    {
-      variant: variation,
-      sx: {
-        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
-        width: width2,
-        textAlign: "center",
-        textWrap: "nowrap",
-        justifyContent: "center",
-        ...getLimitLineCss(1),
-        ...TAG_SIZE[size],
-        ...TAG_VARIANT[variant],
-        ...sx
-      },
-      children: content
-    }
-  ) });
-};
 const UserInfo = ({
   name = "Hệ thống",
   department = "Hệ thống",