sevago-library 1.1.3 → 1.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sevago-library
 
+## 1.1.4
+
+### Patch Changes
+
+- feat: add tablet media query constant and update components for improved responsiveness
+
 ## 1.1.3
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -1393,10 +1393,12 @@ const OPACITY = {
   0: "00"
 };
 const PAGE_TAKE_DEFAULT = { page: 1, take: 10 };
+const TABLET_MEDIA = "@media (min-width: 768px) and (max-width: 1366px)";
 const other_const = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   OPACITY,
-  PAGE_TAKE_DEFAULT
+  PAGE_TAKE_DEFAULT,
+  TABLET_MEDIA
 }, Symbol.toStringTag, { value: "Module" }));
 const ANIMATION_TIME = 300;
 const SCALE_VALUE = "scale(1.05)";
@@ -39650,7 +39652,7 @@ const getFocusedListItemIndex = (listElement) => {
   return children.indexOf(getActiveElement(listElement));
 };
 const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";
-function mergeSx(...sxProps) {
+function mergeSx$1(...sxProps) {
   return sxProps.reduce((acc, sxProp) => {
     if (Array.isArray(sxProp)) {
       acc.push(...sxProp);
@@ -67767,7 +67769,7 @@ const MobileDateTimePicker = /* @__PURE__ */ React__namespace.forwardRef(functio
         hidden: false
       }, (_c = defaultizedProps.slotProps) == null ? void 0 : _c.tabs),
       layout: _extends({}, (_d = defaultizedProps.slotProps) == null ? void 0 : _d.layout, {
-        sx: mergeSx([{
+        sx: mergeSx$1([{
           [`& .${multiSectionDigitalClockClasses.root}`]: {
             width: DIALOG_WIDTH
           },
@@ -74153,6 +74155,34 @@ const ButtonUploadFileElement = ({
     /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", accept, hidden: true, multiple, ref: fileInputRef, onChange: change })
   ] });
 };
+const mergeSx = (...items) => {
+  return items.flatMap((item) => {
+    if (!item) return [];
+    return Array.isArray(item) ? item : [item];
+  });
+};
+const buttonRootSx = {
+  minWidth: 100,
+  textTransform: "none",
+  borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
+  width: "fit-content",
+  [TABLET_MEDIA]: {
+    minWidth: 120,
+    minHeight: 44,
+    px: 2.5,
+    py: 1,
+    "& .MuiButton-startIcon .material-symbols-rounded, & .MuiButton-endIcon .material-symbols-rounded": {
+      fontSize: 22
+    }
+  }
+};
+const buttonContentSx = {
+  ...TYPOGRAPHY.textSm.regular,
+  whiteSpace: "nowrap",
+  [TABLET_MEDIA]: {
+    ...TYPOGRAPHY.textMd.medium
+  }
+};
 const ButtonElement = ({
   content,
   loading = false,
@@ -74161,7 +74191,6 @@ const ButtonElement = ({
   variant = "contained",
   sx,
   disabled = false,
-  permission,
   ...rest
 }) => {
   const { palette } = material.useTheme();
@@ -74172,13 +74201,7 @@ const ButtonElement = ({
       variant,
       startIcon: !loading && startIcon ? typeof startIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: startIcon, sx: { cursor: "pointer" } }) : startIcon : void 0,
       endIcon: !loading && endIcon ? typeof endIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: endIcon, sx: { cursor: "pointer" } }) : endIcon : void 0,
-      sx: {
-        minWidth: 100,
-        textTransform: "none",
-        borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
-        width: "fit-content",
-        ...sx
-      },
+      sx: mergeSx(buttonRootSx, sx),
       disabled,
       children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
         LoadingComponent,
@@ -74187,7 +74210,7 @@ const ButtonElement = ({
           size: "small",
           sx: { minHeight: "24.5px" }
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textSm.regular, whiteSpace: "nowrap" }, children: content })
+      ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: buttonContentSx, children: content })
     }
   );
 };
@@ -74292,6 +74315,31 @@ const getButtonColor = (button, position) => {
     ...buttonProps
   };
 };
+const dialogTitleTextSx = {
+  fontSize: "16px",
+  [TABLET_MEDIA]: {
+    fontSize: "18px",
+    lineHeight: "26px"
+  }
+};
+const dialogTitleIconSx = {
+  [TABLET_MEDIA]: {
+    fontSize: 22
+  }
+};
+const dialogCloseButtonSx = {
+  [TABLET_MEDIA]: {
+    width: 44,
+    height: 44,
+    padding: 1.25
+  }
+};
+const dialogCloseIconSx = {
+  fontSize: 20,
+  [TABLET_MEDIA]: {
+    fontSize: 24
+  }
+};
 const DialogElement = ({
   iconLabel = "",
   label,
@@ -74361,10 +74409,11 @@ const DialogElement = ({
                     icon: iconLabel,
                     content: label.toLowerCase(),
                     size: "medium",
-                    sxText: { fontSize: "16px", ...sxTitle }
+                    sxIcon: dialogTitleIconSx,
+                    sxText: { ...dialogTitleTextSx, ...sxTitle }
                   }
                 ),
-                closeButton && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => onClose == null ? void 0 : onClose({}, "escapeKeyDown"), children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close", sx: { fontSize: 20 } }) })
+                closeButton && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => onClose == null ? void 0 : onClose({}, "escapeKeyDown"), sx: dialogCloseButtonSx, children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close", sx: dialogCloseIconSx }) })
               ] }),
               nodeLabel
             ]
@@ -74412,15 +74461,7 @@ const DialogElement = ({
                 /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { sx: { flex: 1, justifyContent: "flex-end" }, children: [
                   styledButtonLeft && /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { ...styledButtonLeft, fullWidth }),
                   styledButtonCenter && /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { ...styledButtonCenter, fullWidth }),
-                  styledButtonRight && /* @__PURE__ */ jsxRuntime.jsx(
-                    ButtonElement,
-                    {
-                      ...styledButtonRight,
-                      fullWidth,
-                      loading: styledButtonRight.loading,
-                      sx: { bgcolor: styledButtonRight.color }
-                    }
-                  )
+                  styledButtonRight && /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { ...styledButtonRight, fullWidth, loading: styledButtonRight.loading })
                 ] })
               ] }) })
             }
@@ -77496,7 +77537,6 @@ const AppsSidebar = ({
   onClickApp
 }) => {
   if (!isOpen) return null;
-  const theme = useTheme();
   const appsGroupObj = Object.keys(APP_OBJ).reduce(
     (r2, key) => {
       if (blacklist.includes(key)) return r2;
@@ -77534,7 +77574,7 @@ const AppsSidebar = ({
           left: position === "left" ? 0 : "auto",
           right: position === "right" ? 0 : "auto",
           height: "100%",
-          backgroundColor: theme.palette.common.white,
+          backgroundColor: BACKGROUND[50],
           zIndex: 100,
           padding: PADDING_GAP_LAYOUT,
           overflowY: "auto"
@@ -77554,8 +77594,8 @@ const AppsSidebar = ({
                 iconRadius: 5.5,
                 titleVariant: "body1",
                 captionVariant: "caption",
-                titleColor: theme.palette.grey[800],
-                captionColor: theme.palette.grey[600],
+                titleColor: GRAY[500],
+                captionColor: GRAY[500],
                 onClickApp,
                 showPagination: false
               }