amp-workflow-ui 0.1.26 → 0.1.28

package/dist/index.mjs

@@ -1,16 +1,16 @@
-import React7, { createContext, useState, useEffect, useCallback, useContext, useRef } from 'react';
+import React2, { createContext, useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Dialog$1 from '@mui/material/Dialog';
-import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import DialogActions6 from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
-import { Dialog, Box, TextField, styled as styled$1, Chip, DialogTitle, IconButton, useTheme as useTheme$1, Tooltip, CircularProgress, Typography, DialogContent as DialogContent$1, InputAdornment, Button, Grid, DialogActions, Snackbar, Alert, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { Dialog, Box, TextField, styled as styled$1, Chip, useTheme, DialogTitle, IconButton, Tooltip, CircularProgress, Typography, DialogContent as DialogContent$1, InputAdornment, Button, Grid, DialogActions, Snackbar, Alert, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { FilterAlt, CheckCircleOutlineOutlined } from '@mui/icons-material';
 import moment from 'moment';
 import { Box as Box$1 } from '@mui/system';
 import CloseIcon from '@mui/icons-material/Close';
+import { styled, useTheme as useTheme$1 } from '@mui/material/styles';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 // src/context.tsx
@@ -52,7 +52,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/ui/style.css
-styleInject('.hide-scrollbar {\n  overflow: auto !important;\n  -ms-overflow-style: none !important;\n  scrollbar-width: none !important;\n}\n.hide-scrollbar::-webkit-scrollbar {\n  display: none !important;\n}\n.approval-card {\n  position: relative;\n  background-color: #f5f5f5;\n  border-radius: 8px;\n  width: 1069px;\n  min-height: 250px;\n  height: auto;\n  padding: 24px;\n  font-family:\n    "Graphik Web",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  margin-bottom: 10px;\n  display: flex;\n  flex-direction: column;\n}\n.card-title {\n  color: #3f41d1;\n  font-size: 18px;\n  font-weight: 600;\n  text-decoration: underline;\n  text-transform: capitalize;\n  margin-top: -7px;\n  margin-bottom: 24px;\n}\n.vertical-divider {\n  position: absolute;\n  left: 884px;\n  top: 24px;\n  width: 1px;\n  height: 128px;\n  background-color: #d9d9d9;\n}\n.timer-container {\n  position: absolute;\n  left: 916px;\n  top: 24px;\n  width: 121px;\n  height: 121px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.timer-svg {\n  position: absolute;\n  width: 121px;\n  height: 121px;\n}\n.timer-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  z-index: 1;\n}\n.timer-time {\n  color: #3a9f4b;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0.5px;\n}\n.timer-time-expired {\n  color: #e6393e;\n}\n.timer-label {\n  color: #666;\n  font-size: 12px;\n  line-height: 16px;\n}\n.details-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding-right: 185px;\n  margin-bottom: 32px;\n  min-height: 80px;\n}\n.details-row {\n  display: flex;\n  gap: 64px;\n}\n.details-column {\n  display: flex;\n  flex-direction: column;\n}\n.detail-item {\n  color: #666;\n  font-size: 14px;\n  line-height: 21px;\n  text-transform: capitalize;\n  margin: 0;\n}\n.detail-label {\n  font-weight: 500;\n}\n.view-more-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n.view-more-button {\n  background-color: #f5f5f5;\n  border: 1px solid #e697ab;\n  border-radius: 8px;\n  padding: 4px 12px;\n  color: #3e3e3e;\n  font-size: 14px;\n  font-weight: 500;\n  text-transform: capitalize;\n  cursor: pointer;\n  line-height: 21px;\n}\n.expand-icon {\n  color: #666;\n  font-size: 18px;\n  transform: rotate(270deg);\n}\n.actions-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin-bottom: 18px;\n}\n.progress-bar {\n  background-color: white;\n  border: 1px solid #3f41d1;\n  border-radius: 12px;\n  padding: 4px 14px 4px 5px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  height: 40px;\n}\n.bus-icon {\n  width: 35px;\n  height: 29px;\n}\n.progress-steps {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n.step-icon {\n  width: 17px;\n  height: 17px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.step-completed {\n  background-color: #eaebfa;\n}\n.step-approved {\n  background-color: #3a9f4b;\n}\n.step-inactive {\n  background-color: #f6f6f6;\n  border: 1px solid #a3a3a3;\n}\n.step-line {\n  width: 33px;\n  height: 1px;\n}\n.step-line-completed {\n  background-color: #3a9f4b;\n}\n.step-line-inactive {\n  background-color: #e3e3e3;\n}\n.step-chip-current {\n  background-color: #bef2bf !important;\n  color: #3e3e3e !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  height: 29px !important;\n  border-radius: 14.5px !important;\n  text-transform: capitalize;\n}\n.step-chip-next {\n  background-color: #eff4f2 !important;\n  color: #3e3e3e !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  height: 29px !important;\n  border-radius: 14.5px !important;\n  text-transform: capitalize;\n}\n.vertical-separator {\n  width: 1px;\n  height: 29px;\n  background-color: #e3e3e3;\n}\n.assignee-text {\n  color: #666;\n  font-size: 14px;\n  line-height: 21px;\n  text-transform: capitalize;\n}\n.assignee-label {\n  font-weight: 500;\n}\n.action-buttons {\n  display: flex;\n  gap: 14px;\n}\n.btn-reject,\n.btn-send-back {\n  border-color: #666 !important;\n  color: #666 !important;\n  border-radius: 100px !important;\n  text-transform: capitalize !important;\n  font-weight: 500 !important;\n  font-size: 14px !important;\n  height: 40px;\n  min-width: 106px;\n}\n.btn-approve {\n  background-color: #3f41d1 !important;\n  color: white !important;\n  border-radius: 100px !important;\n  text-transform: capitalize !important;\n  font-weight: 500 !important;\n  font-size: 14px !important;\n  height: 40px;\n}\n.btn-approve:hover {\n  background-color: #3436b0 !important;\n}\n.horizontal-divider {\n  width: 100%;\n  height: 1px;\n  background-color: #d9d9d9;\n  margin-bottom: 18px;\n}\n.timeline-container {\n  display: block;\n}\n.timeline-item {\n  width: 215px;\n  height: 157px;\n  position: relative;\n}\n.timeline-card {\n  position: absolute;\n  top: 16px;\n  width: 215px;\n  height: 141px;\n  background-color: white;\n  border-radius: 16px;\n  padding: 16px;\n  position: relative;\n}\n.timeline-card.active {\n  border: 1px solid #3f41d1;\n}\n.timeline-badge {\n  position: absolute !important;\n  top: -16px;\n  left: 8px;\n  width: 32px !important;\n  height: 32px !important;\n  border-radius: 50% !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  text-transform: capitalize !important;\n  border: 3px solid #f6f6f6;\n}\n.badge-l0 {\n  background-color: #eaebfa !important;\n  color: #3f41d1 !important;\n}\n.badge-l1-bg {\n  background-color: #fbcecf !important;\n  color: #3e3e3e !important;\n}\n.badge-l1-approved {\n  background-color: #3a9f4b !important;\n  color: white !important;\n}\n.badge-l1-rejected {\n  background-color: #e6393e !important;\n  color: white !important;\n}\n.badge-l1-sendback {\n  background-color: #dcecf9 !important;\n  color: #237ecd !important;\n}\n.badge-l2-active {\n  background-color: #f4f0ef !important;\n  color: #3e3e3e !important;\n  border: 1px solid #3f41d1 !important;\n}\n.timeline-badge-wrapper {\n  position: absolute;\n  top: -16px;\n  left: 8px;\n  width: 32px;\n  height: 32px;\n}\n.timeline-badge-wrapper .timeline-badge {\n  position: absolute !important;\n  top: 0;\n  left: 0;\n}\n.timeline-badge-wrapper-active {\n  position: absolute;\n  top: -20px;\n  left: 4px;\n  width: 38px;\n  height: 38px;\n}\n.timeline-badge-wrapper-active .timeline-badge {\n  position: absolute !important;\n  top: 3px;\n  left: 3px;\n}\n.timeline-type {\n  color: #666;\n  font-size: 12px;\n  line-height: 13px;\n  text-transform: capitalize;\n  margin-top: 12px;\n  margin-bottom: 8px;\n}\n.timeline-type.approved {\n  color: #3a9f4b;\n  font-weight: 600;\n}\n.timeline-type.rejected {\n  color: #e6393e;\n  font-weight: 600;\n}\n.timeline-type.sendback {\n  color: #237ecd;\n  font-weight: 600;\n}\n.timeline-name {\n  color: #3e3e3e;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n  margin-bottom: 8px;\n  text-transform: capitalize;\n}\n.timeline-message {\n  color: #666;\n  font-size: 12px;\n  line-height: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-bottom: 24px;\n}\n.attachments {\n  color: #0612fb;\n  font-size: 12px;\n  line-height: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-bottom: 24px;\n  cursor: pointer;\n}\n.timeline-date {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  color: #666;\n  font-size: 12px;\n  line-height: 14px;\n  text-align: right;\n  text-transform: capitalize;\n}\n.timeline-connector {\n  width: 45px;\n  height: 157px;\n  flex-shrink: 0;\n}\n.timeline-connector svg {\n  width: 100%;\n  height: 100%;\n}\n@media (max-width: 1200px) {\n  .approval-card {\n    width: 100%;\n    height: auto;\n    min-height: 437px;\n  }\n}\n.flag {\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 3px 4px;\n  border: 2px solid #b28900;\n  border-radius: 5px;\n  color: #b28900;\n  font-size: 12px;\n}\n');
+styleInject('.hide-scrollbar {\n  overflow: auto !important;\n  -ms-overflow-style: none !important;\n  scrollbar-width: none !important;\n}\n.hide-scrollbar::-webkit-scrollbar {\n  display: none !important;\n}\n.approval-card {\n  position: relative;\n  background-color: #f5f5f5;\n  border-radius: 8px;\n  width: 1069px;\n  min-height: 250px;\n  height: auto;\n  padding: 24px;\n  font-family:\n    "Graphik Web",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  margin-bottom: 10px;\n  display: flex;\n  flex-direction: column;\n}\n.card-title {\n  color: #3f41d1;\n  font-size: 18px;\n  font-weight: 600;\n  text-decoration: underline;\n  text-transform: capitalize;\n  margin-top: -7px;\n  margin-bottom: 24px;\n}\n.vertical-divider {\n  position: absolute;\n  left: 884px;\n  top: 24px;\n  width: 1px;\n  height: 128px;\n  background-color: #d9d9d9;\n}\n.timer-container {\n  position: absolute;\n  left: 916px;\n  top: 24px;\n  width: 121px;\n  height: 121px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.timer-svg {\n  position: absolute;\n  width: 121px;\n  height: 121px;\n}\n.timer-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  z-index: 1;\n}\n.timer-time {\n  color: #3a9f4b;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0.5px;\n}\n.timer-time-expired {\n  color: #e6393e;\n}\n.timer-label {\n  color: #666;\n  font-size: 12px;\n  line-height: 16px;\n}\n.details-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding-right: 185px;\n  margin-bottom: 32px;\n  min-height: 80px;\n}\n.details-row {\n  display: flex;\n  gap: 64px;\n}\n.details-column {\n  display: flex;\n  flex-direction: column;\n}\n.detail-item {\n  color: #666;\n  font-size: 14px;\n  line-height: 21px;\n  text-transform: capitalize;\n  margin: 0;\n}\n.detail-label {\n  font-weight: 500;\n}\n.view-more-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n.view-more-button {\n  background-color: #f5f5f5;\n  border: 1px solid #e697ab;\n  border-radius: 8px;\n  padding: 4px 12px;\n  color: #3e3e3e;\n  font-size: 14px;\n  font-weight: 500;\n  text-transform: capitalize;\n  cursor: pointer;\n  line-height: 21px;\n}\n.expand-icon {\n  color: #666;\n  font-size: 18px;\n  transform: rotate(270deg);\n}\n.actions-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin-bottom: 18px;\n}\n.progress-bar {\n  background-color: white;\n  border: 1px solid #3f41d1;\n  border-radius: 12px;\n  padding: 4px 14px 4px 5px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  height: 40px;\n}\n.bus-icon {\n  width: 35px;\n  height: 29px;\n}\n.progress-steps {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n.step-icon {\n  width: 17px;\n  height: 17px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.step-completed {\n  background-color: #eaebfa;\n}\n.step-approved {\n  background-color: #3a9f4b;\n}\n.step-inactive {\n  background-color: #f6f6f6;\n  border: 1px solid #a3a3a3;\n}\n.step-line {\n  width: 33px;\n  height: 1px;\n}\n.step-line-completed {\n  background-color: #3a9f4b;\n}\n.step-line-inactive {\n  background-color: #e3e3e3;\n}\n.step-chip-current {\n  background-color: #bef2bf !important;\n  color: #3e3e3e !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  height: 29px !important;\n  border-radius: 14.5px !important;\n  text-transform: capitalize;\n}\n.step-chip-next {\n  background-color: #eff4f2 !important;\n  color: #3e3e3e !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  height: 29px !important;\n  border-radius: 14.5px !important;\n  text-transform: capitalize;\n}\n.vertical-separator {\n  width: 1px;\n  height: 29px;\n  background-color: #e3e3e3;\n}\n.assignee-text {\n  color: #666;\n  font-size: 14px;\n  line-height: 21px;\n  text-transform: capitalize;\n}\n.assignee-label {\n  font-weight: 500;\n}\n.action-buttons {\n  display: flex;\n  gap: 14px;\n}\n.btn-reject,\n.btn-send-back {\n  border-color: #666 !important;\n  color: #666 !important;\n  border-radius: 100px !important;\n  text-transform: capitalize !important;\n  font-weight: 500 !important;\n  font-size: 14px !important;\n  height: 40px;\n  min-width: 106px;\n}\n.btn-approve {\n  background-color: #3f41d1 !important;\n  color: white !important;\n  border-radius: 100px !important;\n  text-transform: capitalize !important;\n  font-weight: 500 !important;\n  font-size: 14px !important;\n  height: 40px;\n}\n.btn-approve:hover {\n  background-color: #3436b0 !important;\n}\n.horizontal-divider {\n  width: 100%;\n  height: 1px;\n  background-color: #d9d9d9;\n  margin-bottom: 18px;\n}\n.timeline-container {\n  display: block;\n}\n.timeline-item {\n  width: 215px;\n  height: 157px;\n  position: relative;\n}\n.timeline-card {\n  position: absolute;\n  top: 16px;\n  width: 215px;\n  height: 141px;\n  background-color: white;\n  border-radius: 16px;\n  padding: 16px;\n  position: relative;\n}\n.timeline-card.active {\n  border: 1px solid #3f41d1;\n}\n.timeline-badge {\n  position: absolute !important;\n  top: -16px;\n  left: 8px;\n  width: 32px !important;\n  height: 32px !important;\n  border-radius: 50% !important;\n  font-size: 14px !important;\n  font-weight: 500 !important;\n  text-transform: capitalize !important;\n  border: 3px solid #f6f6f6;\n}\n.badge-l0 {\n  background-color: #eaebfa !important;\n  color: #3f41d1 !important;\n}\n.badge-l1-bg {\n  background-color: #fbcecf !important;\n  color: #3e3e3e !important;\n}\n.badge-l1-approved {\n  background-color: #3a9f4b !important;\n  color: white !important;\n}\n.badge-l1-rejected {\n  background-color: #e6393e !important;\n  color: white !important;\n}\n.badge-l1-sendback {\n  background-color: #dcecf9 !important;\n  color: #237ecd !important;\n}\n.badge-l2-active {\n  background-color: #f4f0ef !important;\n  color: #3e3e3e !important;\n  border: 1px solid #3f41d1 !important;\n}\n.timeline-badge-wrapper {\n  position: absolute;\n  top: -16px;\n  left: 8px;\n  width: 32px;\n  height: 32px;\n}\n.timeline-badge-wrapper .timeline-badge {\n  position: absolute !important;\n  top: 0;\n  left: 0;\n}\n.timeline-badge-wrapper-active {\n  position: absolute;\n  top: -20px;\n  left: 4px;\n  width: 38px;\n  height: 38px;\n}\n.timeline-badge-wrapper-active .timeline-badge {\n  position: absolute !important;\n  top: 3px;\n  left: 3px;\n}\n.timeline-type {\n  color: #666;\n  font-size: 12px;\n  line-height: 13px;\n  text-transform: capitalize;\n  margin-top: 12px;\n  margin-bottom: 8px;\n}\n.timeline-type.approved {\n  color: #3a9f4b;\n  font-weight: 600;\n}\n.timeline-type.rejected {\n  color: #e6393e;\n  font-weight: 600;\n}\n.timeline-type.sendback {\n  color: #237ecd;\n  font-weight: 600;\n}\n.timeline-name {\n  color: #3e3e3e;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 17px;\n  margin-bottom: 8px;\n  text-transform: capitalize;\n}\n.timeline-message {\n  color: #666;\n  font-size: 12px;\n  line-height: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-bottom: 24px;\n}\n.attachments {\n  color: #0612fb;\n  font-size: 12px;\n  line-height: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-bottom: 24px;\n  cursor: pointer;\n}\n.timeline-date {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  color: #666;\n  font-size: 12px;\n  line-height: 14px;\n  text-align: right;\n  text-transform: capitalize;\n}\n.timeline-connector {\n  width: 45px;\n  height: 157px;\n  flex-shrink: 0;\n}\n.timeline-connector svg {\n  width: 100%;\n  height: 100%;\n}\n@media (max-width: 1200px) {\n  .approval-card {\n    width: 100%;\n    height: auto;\n    min-height: 437px;\n  }\n}\n.flag {\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 3px 4px;\n  border: 2px solid #b28900;\n  border-radius: 5px;\n  color: #b28900;\n  font-size: 12px;\n}\n');
 
 // src/common-component/index.css
 styleInject('.workflow-btn {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 24px;\n  gap: 8px;\n  height: 40px;\n  border-radius: 100px;\n  border: none;\n  cursor: pointer;\n  font-family: "Graphik Web", sans-serif;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n  text-align: center;\n  text-transform: capitalize;\n  background: transparent;\n  outline: none;\n}\n.workflow-btn.variant-reject,\n.workflow-btn.variant-send-back {\n  background: #FFFFFF;\n  border: 1px solid #666666;\n  color: #666666;\n}\n.workflow-btn.variant-approve {\n  background: #3F41D1;\n  color: #FFFFFF;\n}\n.workflow-btn.variant-status-approved {\n  background: #3A9F4B;\n  color: #CDF3E2;\n}\n.workflow-btn.variant-status-sent-back {\n  background: #237ECD;\n  color: #DCECF9;\n}\n.workflow-btn.variant-status-rejected {\n  background: #FAD7D8;\n  color: #E6393E;\n}\n.workflow-btn.variant-onhold {\n  background: #d184ab;\n  color: #CDF3E2;\n}\n');
@@ -423,7 +423,7 @@ function WorkflowRequestCard({
               ] }),
               (_r = requestDetails == null ? void 0 : requestDetails.levels) == null ? void 0 : _r.map((_, idx) => {
                 const level = idx + 1;
-                return /* @__PURE__ */ jsx(React7.Fragment, { children: userLevel == "L" + level ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                return /* @__PURE__ */ jsx(React2.Fragment, { children: userLevel == "L" + level ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(Chip, { label: "L" + level, className: "step-chip-current" }),
                   (requestDetails == null ? void 0 : requestDetails.levels.length) !== level && /* @__PURE__ */ jsx("div", { className: "step-line step-line-inactive" })
                 ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -893,7 +893,7 @@ function ApproveDialog({
   onSuccess
 }) {
   const { userInfo, api } = useWorkflowContext();
-  const theme = useTheme();
+  const theme = useTheme$1();
   useMediaQuery(theme.breakpoints.down("lg"));
   const [comment, setComment] = useState("");
   const [error, setError] = useState({});
@@ -1063,7 +1063,7 @@ function RejectDialog({
   onSuccess
 }) {
   const { userInfo, api } = useWorkflowContext();
-  const theme = useTheme();
+  const theme = useTheme$1();
   useMediaQuery(theme.breakpoints.down("lg"));
   const DownArrow = () => {
     var _a;
@@ -1290,7 +1290,7 @@ function OnHoldDialog({
   onSuccess
 }) {
   const { userInfo, api } = useWorkflowContext();
-  const theme = useTheme();
+  const theme = useTheme$1();
   useMediaQuery(theme.breakpoints.down("lg"));
   const [comment, setComment] = useState("");
   const [error, setError] = useState({ comment: "" });
@@ -1779,17 +1779,17 @@ function ApprovalWorkflow({
   userInfo
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
-  useTheme$1();
+  useTheme();
   const { api, urlBuilder, loadingComponent, ENV_VARIABLES } = useWorkflowContext();
   const [selectedOption, setSelectedOption] = useState(
     selectedWorkflowsList.length ? "selected" : "Assign To Me"
   );
   console.log("\u{1F680} ~ ApprovalWorkflow ~ selectedOption:", selectedOption);
   const [expandedId, setExpandedId] = useState(null);
-  const [sendDialog, setSendDialog] = React7.useState(null);
-  const [approveTarget, setApproveTarget] = React7.useState(null);
-  const [rejectTarget, setRejectTarget] = React7.useState(null);
-  const [onHoldTarget, setOnHoldTarget] = React7.useState(null);
+  const [sendDialog, setSendDialog] = useState(null);
+  const [approveTarget, setApproveTarget] = useState(null);
+  const [rejectTarget, setRejectTarget] = useState(null);
+  const [onHoldTarget, setOnHoldTarget] = useState(null);
   const [expandedDetails, setExpandedDetails] = useState([]);
   console.log("\u{1F680} ~ ApprovalWorkflow ~ expandedDetails:", expandedDetails);
   const [descriptionView, setDescriptionView] = useState(null);
@@ -1797,6 +1797,7 @@ function ApprovalWorkflow({
   const [viewMoreDetails, setViewMoreDetails] = useState(null);
   const [isViewMoreOpen, setIsViewMoreOpen] = useState(false);
   const [isFilterOpen, setIsFilterOpen] = useState(false);
+  console.log("\u{1F680} ~ PIPELINE TEST");
   const handleOpenViewMore = (details) => {
     setViewMoreDetails(details);
     setIsViewMoreOpen(true);
@@ -1878,7 +1879,7 @@ function ApprovalWorkflow({
   const handleSearchChange = useCallback((value) => {
     setSearchText(value);
   }, []);
-  const observer = React7.useRef(null);
+  const observer = useRef(null);
   const lastCardRef = useCallback(
     (node) => {
       const currentTab = tabs[selectedOption];
@@ -1899,6 +1900,24 @@ function ApprovalWorkflow({
     },
     [tabs, selectedOption]
   );
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      var _a2, _b2, _c2, _d2;
+      if (((_a2 = document.activeElement) == null ? void 0 : _a2.tagName) === "INPUT" || ((_b2 = document.activeElement) == null ? void 0 : _b2.tagName) === "TEXTAREA") {
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        (_c2 = scrollRef.current) == null ? void 0 : _c2.scrollBy({ top: -100, behavior: "smooth" });
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        (_d2 = scrollRef.current) == null ? void 0 : _d2.scrollBy({ top: 100, behavior: "smooth" });
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
   const handleSendBack = (workflowLogId) => {
     setSendDialog(workflowLogId);
   };
@@ -2377,6 +2396,7 @@ function ApprovalWorkflow({
               /* @__PURE__ */ jsxs(
                 Box$1,
                 {
+                  ref: scrollRef,
                   className: "fixedModal hide-scrollbar",
                   sx: {
                     overflowY: "auto",
@@ -2720,7 +2740,7 @@ function ApprovalWorkflow2(props) {
     ENV_VARIABLES,
     ...rest
   } = props;
-  console.log("\u{1F680} ~ ApprovalWorkflow ~ props:", props);
+  console.log("\u{1F680} ~ PIPELINE TEST");
   return /* @__PURE__ */ jsx(
     WorkflowProvider,
     {