@bjsdistribution/dms-client-return 0.2.2-prod → 0.2.3-prod

package/dist/common/expand-collapse/index.js

@@ -1,29 +1,29 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import { useState as a } from "react";
-import o from "styled-components";
-import s from "../../assets/icons/ChevronUp.js";
-function y(t) {
-  const [n, i] = a(!0);
-  return /* @__PURE__ */ d(x, { children: [
-    /* @__PURE__ */ e(f, { children: /* @__PURE__ */ d(h, { children: [
-      t.collapsedContent,
-      /* @__PURE__ */ d(l, { children: [
-        t?.extraActions,
-        /* @__PURE__ */ e(c, { onClick: () => i((r) => !r), children: n ? "COLLAPSE" : "SHOW" }),
-        /* @__PURE__ */ e(
-          g,
+import e from "styled-components";
+import p from "../../assets/icons/ChevronUp.js";
+function v(n) {
+  const [t, r] = a(!0);
+  return /* @__PURE__ */ d(l, { children: [
+    /* @__PURE__ */ o(x, { children: /* @__PURE__ */ d(h, { children: [
+      n.collapsedContent,
+      /* @__PURE__ */ d(c, { children: [
+        n?.extraActions,
+        /* @__PURE__ */ o(f, { onClick: () => r((i) => !i), children: t ? "COLLAPSE" : "SHOW" }),
+        /* @__PURE__ */ o(
+          m,
           {
-            onClick: () => i((r) => !r),
-            isExpanded: n,
-            children: /* @__PURE__ */ e(s, {})
+            onClick: () => r((i) => !i),
+            isExpanded: t,
+            children: /* @__PURE__ */ o(p, {})
           }
         )
       ] })
     ] }) }),
-    n && /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(b, { children: t.children }) })
+    t && /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(g, { children: n.children }) })
   ] });
 }
-const p = o.div`
+const s = e.div`
   display: flex;
   background: #ffffff;
   padding: 12px;
@@ -33,7 +33,7 @@ const p = o.div`
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
-`, f = o.div`
+`, x = e.div`
   border: 1px solid #f0f2f2;
   background-color: #f8fafc;
   color: #3a3630;
@@ -44,19 +44,30 @@ const p = o.div`
   border-top-right-radius: 8px;
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
-`, c = o.span`
+
+  @media screen and (max-width: 768px) {
+    padding: 10px 8px;
+    min-width: 0;
+  }
+`, f = e.span`
   font-size: 14px;
   color: #3a3630;
   font-weight: 500;
   font-family: 'lato', sans-serif;
   cursor: pointer;
-`, l = o.div`
+`, c = e.div`
   display: flex;
   gap: 10px;
   align-items: center;
-`, x = o.div`
+
+  @media screen and (max-width: 768px) {
+    flex-shrink: 0;
+    margin-left: auto;
+    gap: 8px;
+  }
+`, l = e.div`
   gap: 0;
-`, g = o.div`
+`, m = e.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,15 +82,22 @@ const p = o.div`
     background: rgba(58, 54, 57, 0.05);
   }
   svg {
-    transform: rotate(${(t) => t.isExpanded ? "360deg" : "180deg"});
+    transform: rotate(${(n) => n.isExpanded ? "360deg" : "180deg"});
   }
-`, b = o.div``, h = o.div`
+`, g = e.div``, h = e.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+
+  @media screen and (max-width: 768px) {
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    box-sizing: border-box;
+    min-width: 0;
+  }
 `;
 export {
-  y as default
+  v as default
 };
 //# sourceMappingURL=index.js.map

package/dist/common/expand-collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/common/expand-collapse/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport ChevronUp from '../../assets/icons/ChevronUp';\n\ninterface IProps {\n  collapsedContent: React.ReactNode;\n  children: React.ReactNode;\n  extraActions?: React.ReactNode;\n}\n\nfunction CollapsableForm(props: IProps) {\n  const [isExpanded, setIsExpanded] = useState<boolean>(true);\n  return (\n    <MainContainer>\n      <CardHeader>\n        <CollapsedContent>\n          {props.collapsedContent}\n          <Container>\n            {props?.extraActions}\n            <Text onClick={() => setIsExpanded(prev => !prev)}>\n              {isExpanded ? 'COLLAPSE' : 'SHOW'}\n            </Text>\n            <IconContainer\n              onClick={() => setIsExpanded(prev => !prev)}\n              isExpanded={isExpanded}\n            >\n              <ChevronUp />\n            </IconContainer>\n          </Container>\n        </CollapsedContent>\n      </CardHeader>\n      {isExpanded && (\n        <CustomizedFormSection>\n          <ExpandedContent>{props.children}</ExpandedContent>\n        </CustomizedFormSection>\n      )}\n    </MainContainer>\n  );\n}\n\nconst CustomizedFormSection = styled.div`\n  display: flex;\n  background: #ffffff;\n  padding: 12px;\n  flex-direction: column;\n  gap: 14px;\n  border: 1px solid #f0f2f2;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n`;\n\nconst CardHeader = styled.div`\n  border: 1px solid #f0f2f2;\n  background-color: #f8fafc;\n  color: #3a3630;\n  font-size: 16px;\n  padding: 10px;\n  border-bottom: 1px solid #ddd;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  font-family: 'Roboto', sans-serif;\n  font-weight: 600;\n`;\n\nconst Text = styled.span`\n  font-size: 14px;\n  color: #3a3630;\n  font-weight: 500;\n  font-family: 'lato', sans-serif;\n  cursor: pointer;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  gap: 10px;\n  align-items: center;\n`;\n\nconst MainContainer = styled.div`\n  gap: 0;\n`;\n\nconst IconContainer = styled.div<{ isExpanded: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 25px;\n  height: 25px;\n  padding: 2px;\n  border-radius: 3px;\n  background: #ffffff;\n  box-shadow: 0px 1px 2px 0px #1018280d;\n  &:hover {\n    background: rgba(58, 54, 57, 0.05);\n  }\n  svg {\n    transform: rotate(${props => (props.isExpanded ? '360deg' : '180deg')});\n  }\n`;\n\nconst ExpandedContent = styled.div``;\n\nconst CollapsedContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n`;\n\nexport default CollapsableForm;\n"],"names":["CollapsableForm","props","isExpanded","setIsExpanded","useState","MainContainer","jsx","CardHeader","CollapsedContent","Container","Text","prev","IconContainer","ChevronUp","CustomizedFormSection","ExpandedContent","styled"],"mappings":";;;;AAUA,SAASA,EAAgBC,GAAe;AACtC,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAkB,EAAI;AAC1D,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,4BAACC,GAAA,EACE,UAAA;AAAA,MAAAP,EAAM;AAAA,wBACNQ,GAAA,EACE,UAAA;AAAA,QAAAR,GAAO;AAAA,QACR,gBAAAK,EAACI,GAAA,EAAK,SAAS,MAAMP,EAAc,CAAAQ,MAAQ,CAACA,CAAI,GAC7C,UAAAT,IAAa,aAAa,OAAA,CAC7B;AAAA,QACA,gBAAAI;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,SAAS,MAAMT,EAAc,CAAAQ,MAAQ,CAACA,CAAI;AAAA,YAC1C,YAAAT;AAAA,YAEA,4BAACW,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACCX,KACC,gBAAAI,EAACQ,GAAA,EACC,4BAACC,GAAA,EAAiB,UAAAd,EAAM,UAAS,EAAA,CACnC;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAMa,IAAwBE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY/BT,IAAaS,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAapBN,IAAOM,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQdP,IAAYO,EAAO;AAAA;AAAA;AAAA;AAAA,GAMnBX,IAAgBW,EAAO;AAAA;AAAA,GAIvBJ,IAAgBI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAeL,CAAAf,MAAUA,EAAM,aAAa,WAAW,QAAS;AAAA;AAAA,GAInEc,IAAkBC,EAAO,OAEzBR,IAAmBQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"index.js","sources":["../../../src/common/expand-collapse/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport ChevronUp from '../../assets/icons/ChevronUp';\n\ninterface IProps {\n  collapsedContent: React.ReactNode;\n  children: React.ReactNode;\n  extraActions?: React.ReactNode;\n}\n\nfunction CollapsableForm(props: IProps) {\n  const [isExpanded, setIsExpanded] = useState<boolean>(true);\n  return (\n    <MainContainer>\n      <CardHeader>\n        <CollapsedContent>\n          {props.collapsedContent}\n          <Container>\n            {props?.extraActions}\n            <Text onClick={() => setIsExpanded(prev => !prev)}>\n              {isExpanded ? 'COLLAPSE' : 'SHOW'}\n            </Text>\n            <IconContainer\n              onClick={() => setIsExpanded(prev => !prev)}\n              isExpanded={isExpanded}\n            >\n              <ChevronUp />\n            </IconContainer>\n          </Container>\n        </CollapsedContent>\n      </CardHeader>\n      {isExpanded && (\n        <CustomizedFormSection>\n          <ExpandedContent>{props.children}</ExpandedContent>\n        </CustomizedFormSection>\n      )}\n    </MainContainer>\n  );\n}\n\nconst CustomizedFormSection = styled.div`\n  display: flex;\n  background: #ffffff;\n  padding: 12px;\n  flex-direction: column;\n  gap: 14px;\n  border: 1px solid #f0f2f2;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n`;\n\nconst CardHeader = styled.div`\n  border: 1px solid #f0f2f2;\n  background-color: #f8fafc;\n  color: #3a3630;\n  font-size: 16px;\n  padding: 10px;\n  border-bottom: 1px solid #ddd;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  font-family: 'Roboto', sans-serif;\n  font-weight: 600;\n\n  @media screen and (max-width: 768px) {\n    padding: 10px 8px;\n    min-width: 0;\n  }\n`;\n\nconst Text = styled.span`\n  font-size: 14px;\n  color: #3a3630;\n  font-weight: 500;\n  font-family: 'lato', sans-serif;\n  cursor: pointer;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  gap: 10px;\n  align-items: center;\n\n  @media screen and (max-width: 768px) {\n    flex-shrink: 0;\n    margin-left: auto;\n    gap: 8px;\n  }\n`;\n\nconst MainContainer = styled.div`\n  gap: 0;\n`;\n\nconst IconContainer = styled.div<{ isExpanded: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 25px;\n  height: 25px;\n  padding: 2px;\n  border-radius: 3px;\n  background: #ffffff;\n  box-shadow: 0px 1px 2px 0px #1018280d;\n  &:hover {\n    background: rgba(58, 54, 57, 0.05);\n  }\n  svg {\n    transform: rotate(${props => (props.isExpanded ? '360deg' : '180deg')});\n  }\n`;\n\nconst ExpandedContent = styled.div``;\n\nconst CollapsedContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n\n  @media screen and (max-width: 768px) {\n    flex-wrap: wrap;\n    gap: 8px 12px;\n    box-sizing: border-box;\n    min-width: 0;\n  }\n`;\n\nexport default CollapsableForm;\n"],"names":["CollapsableForm","props","isExpanded","setIsExpanded","useState","MainContainer","jsx","CardHeader","CollapsedContent","Container","Text","prev","IconContainer","ChevronUp","CustomizedFormSection","ExpandedContent","styled"],"mappings":";;;;AAUA,SAASA,EAAgBC,GAAe;AACtC,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAkB,EAAI;AAC1D,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,4BAACC,GAAA,EACE,UAAA;AAAA,MAAAP,EAAM;AAAA,wBACNQ,GAAA,EACE,UAAA;AAAA,QAAAR,GAAO;AAAA,QACR,gBAAAK,EAACI,GAAA,EAAK,SAAS,MAAMP,EAAc,CAAAQ,MAAQ,CAACA,CAAI,GAC7C,UAAAT,IAAa,aAAa,OAAA,CAC7B;AAAA,QACA,gBAAAI;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,SAAS,MAAMT,EAAc,CAAAQ,MAAQ,CAACA,CAAI;AAAA,YAC1C,YAAAT;AAAA,YAEA,4BAACW,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACCX,KACC,gBAAAI,EAACQ,GAAA,EACC,4BAACC,GAAA,EAAiB,UAAAd,EAAM,UAAS,EAAA,CACnC;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAMa,IAAwBE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY/BT,IAAaS,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBpBN,IAAOM,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQdP,IAAYO,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYnBX,IAAgBW,EAAO;AAAA;AAAA,GAIvBJ,IAAgBI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAeL,CAAAf,MAAUA,EAAM,aAAa,WAAW,QAAS;AAAA;AAAA,GAInEc,IAAkBC,EAAO,OAEzBR,IAAmBQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/common/modals/order-action-modal/OrderActionModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderActionModal.js","sources":["../../../../src/common/modals/order-action-modal/OrderActionModal.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport BackgroundModal from './BackgroundModal';\nimport OrderActionHeader from './header/OrderActionHeader';\nimport OrderActionFooter from './footer/OrderActionFooter';\n\ninterface ActionModalProps {\n  headerTitle: string;\n  showAdditionalInfo?: boolean;\n  infoText?: string;\n  headerActions?: React.ReactNode;\n  /** ReactNode so a modal can show a spinner alongside the label while submitting. */\n  submitBtnTitle?: React.ReactNode;\n  footerActions?: React.ReactNode;\n  children: React.ReactNode;\n  onCloseHeader: () => void;\n  onSubmit: () => void;\n  isSubmitDisabled?: boolean;\n  minWidth?: string; // New optional prop for min-width\n  maxWidth?: string; // New optional prop for min-width\n}\n\nfunction OrderActionModal({\n  minWidth = '30vw',\n  maxWidth = '75vw',\n  ...props\n}: ActionModalProps) {\n  return (\n    <BackgroundModal>\n      <MainContainer minWidth={minWidth} maxWidth={maxWidth}>\n        <OrderActionHeader\n          title={props.headerTitle}\n          onClose={props.onCloseHeader}\n          showInformation={props.showAdditionalInfo}\n          infoText={props.infoText}\n          actions={props.headerActions}\n        />\n        {props.children}\n        <OrderActionFooter\n          submitButtonTitle={props.submitBtnTitle}\n          onSubmit={props.onSubmit}\n          actions={props.footerActions}\n          isSubmitDisabled={props.isSubmitDisabled}\n        />\n      </MainContainer>\n    </BackgroundModal>\n  );\n}\n\n// Styled component with dynamic min-width\nconst MainContainer = styled.div<{ minWidth: string; maxWidth: string }>`\n  min-height: 30vh;\n  max-height: 80vh;\n  border-radius: 12px;\n  background: #fff;\n  box-shadow: 0px 20px 24px -4px #10182814;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow-x: hidden;\n  max-width: ${({ maxWidth }) => maxWidth}; // Dynamic max-width\n  min-width: ${({ minWidth }) => minWidth}; // Dynamic min-width\n`;\n\nexport default OrderActionModal;\n"],"names":["OrderActionModal","minWidth","maxWidth","props","jsx","BackgroundModal","jsxs","MainContainer","OrderActionHeader","OrderActionFooter","styled"],"mappings":";;;;;AAsBA,SAASA,EAAiB;AAAA,EACxB,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GAAqB;AACnB,SACE,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAc,UAAAN,GAAoB,UAAAC,GACjC,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAOL,EAAM;AAAA,QACb,SAASA,EAAM;AAAA,QACf,iBAAiBA,EAAM;AAAA,QACvB,UAAUA,EAAM;AAAA,QAChB,SAASA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhBA,EAAM;AAAA,IACP,gBAAAC;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,mBAAmBN,EAAM;AAAA,QACzB,UAAUA,EAAM;AAAA,QAChB,SAASA,EAAM;AAAA,QACf,kBAAkBA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1B,EAAA,CACF,EAAA,CACF;AAEJ;AAGA,MAAMI,IAAgBG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWd,CAAC,EAAE,UAAAR,EAAA,MAAeA,CAAQ;AAAA,eAC1B,CAAC,EAAE,UAAAD,EAAA,MAAeA,CAAQ;AAAA;"}
+{"version":3,"file":"OrderActionModal.js","sources":["../../../../src/common/modals/order-action-modal/OrderActionModal.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport BackgroundModal from './BackgroundModal';\nimport OrderActionHeader from './header/OrderActionHeader';\nimport OrderActionFooter from './footer/OrderActionFooter';\n\ninterface ActionModalProps {\n  headerTitle: string;\n  showAdditionalInfo?: boolean;\n  infoText?: string;\n  headerActions?: React.ReactNode;\n  submitBtnTitle?: string;\n  footerActions?: React.ReactNode;\n  children: React.ReactNode;\n  onCloseHeader: () => void;\n  onSubmit: () => void;\n  isSubmitDisabled?: boolean;\n  minWidth?: string; // New optional prop for min-width\n  maxWidth?: string; // New optional prop for min-width\n}\n\nfunction OrderActionModal({\n  minWidth = '30vw',\n  maxWidth = '75vw',\n  ...props\n}: ActionModalProps) {\n  return (\n    <BackgroundModal>\n      <MainContainer minWidth={minWidth} maxWidth={maxWidth}>\n        <OrderActionHeader\n          title={props.headerTitle}\n          onClose={props.onCloseHeader}\n          showInformation={props.showAdditionalInfo}\n          infoText={props.infoText}\n          actions={props.headerActions}\n        />\n        {props.children}\n        <OrderActionFooter\n          submitButtonTitle={props.submitBtnTitle}\n          onSubmit={props.onSubmit}\n          actions={props.footerActions}\n          isSubmitDisabled={props.isSubmitDisabled}\n        />\n      </MainContainer>\n    </BackgroundModal>\n  );\n}\n\n// Styled component with dynamic min-width\nconst MainContainer = styled.div<{ minWidth: string; maxWidth: string }>`\n  min-height: 30vh;\n  max-height: 80vh;\n  border-radius: 12px;\n  background: #fff;\n  box-shadow: 0px 20px 24px -4px #10182814;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  overflow-x: hidden;\n  max-width: ${({ maxWidth }) => maxWidth}; // Dynamic max-width\n  min-width: ${({ minWidth }) => minWidth}; // Dynamic min-width\n`;\n\nexport default OrderActionModal;\n"],"names":["OrderActionModal","minWidth","maxWidth","props","jsx","BackgroundModal","jsxs","MainContainer","OrderActionHeader","OrderActionFooter","styled"],"mappings":";;;;;AAqBA,SAASA,EAAiB;AAAA,EACxB,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GAAqB;AACnB,SACE,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EAAc,UAAAN,GAAoB,UAAAC,GACjC,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAOL,EAAM;AAAA,QACb,SAASA,EAAM;AAAA,QACf,iBAAiBA,EAAM;AAAA,QACvB,UAAUA,EAAM;AAAA,QAChB,SAASA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhBA,EAAM;AAAA,IACP,gBAAAC;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,mBAAmBN,EAAM;AAAA,QACzB,UAAUA,EAAM;AAAA,QAChB,SAASA,EAAM;AAAA,QACf,kBAAkBA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1B,EAAA,CACF,EAAA,CACF;AAEJ;AAGA,MAAMI,IAAgBG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWd,CAAC,EAAE,UAAAR,EAAA,MAAeA,CAAQ;AAAA,eAC1B,CAAC,EAAE,UAAAD,EAAA,MAAeA,CAAQ;AAAA;"}

package/dist/common/modals/order-action-modal/footer/OrderActionFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderActionFooter.js","sources":["../../../../../src/common/modals/order-action-modal/footer/OrderActionFooter.tsx"],"sourcesContent":["import { Button } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\n\ninterface FooterProps {\n  submitButtonTitle?: React.ReactNode;\n  cancelButtonTitle?: string;\n  actions?: React.ReactNode;\n  onSubmit: () => void;\n  onCancel?: () => void;\n  isSubmitDisabled?: boolean;\n}\n\nfunction OrderActionFooter(props: FooterProps) {\n  const { isSubmitDisabled } = props;\n  return (\n    <Container>\n      <SubmitButton\n        shape=\"rounded\"\n        colors=\"primary\"\n        onClick={props.onSubmit}\n        disabled={isSubmitDisabled}\n      >\n        {props.submitButtonTitle || 'submit'}\n      </SubmitButton>\n      {props.actions}\n    </Container>\n  );\n}\n\nconst SubmitButton = styled(Button)``;\n\nconst Container = styled.div`\n  display: flex;\n  /* justify-content: space-between; */\n  gap: 15px;\n  align-items: center;\n  width: 100%;\n  background: #f8fafc;\n  border-radius: 0px 0px 6px 6px;\n  padding: 10px 15px 10px 15px;\n  border-top: 1px solid #edebe8;\n  margin-left: 25px;\n`;\n\nexport default OrderActionFooter;\n"],"names":["OrderActionFooter","props","isSubmitDisabled","Container","jsx","SubmitButton","styled","Button"],"mappings":";;;AAaA,SAASA,EAAkBC,GAAoB;AAC7C,QAAM,EAAE,kBAAAC,MAAqBD;AAC7B,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAASJ,EAAM;AAAA,QACf,UAAUC;AAAA,QAET,YAAM,qBAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,IAE7BD,EAAM;AAAA,EAAA,GACT;AAEJ;AAEA,MAAMI,IAAeC,EAAOC,CAAM,KAE5BJ,IAAYG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"OrderActionFooter.js","sources":["../../../../../src/common/modals/order-action-modal/footer/OrderActionFooter.tsx"],"sourcesContent":["import { Button } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\n\ninterface FooterProps {\n  submitButtonTitle?: string;\n  cancelButtonTitle?: string;\n  actions?: React.ReactNode;\n  onSubmit: () => void;\n  onCancel?: () => void;\n  isSubmitDisabled?: boolean;\n}\n\nfunction OrderActionFooter(props: FooterProps) {\n  const { isSubmitDisabled } = props;\n  return (\n    <Container>\n      <SubmitButton\n        shape=\"rounded\"\n        colors=\"primary\"\n        onClick={props.onSubmit}\n        disabled={isSubmitDisabled}\n      >\n        {props.submitButtonTitle || 'submit'}\n      </SubmitButton>\n      {props.actions}\n    </Container>\n  );\n}\n\nconst SubmitButton = styled(Button)``;\n\nconst Container = styled.div`\n  display: flex;\n  /* justify-content: space-between; */\n  gap: 15px;\n  align-items: center;\n  width: 100%;\n  background: #f8fafc;\n  border-radius: 0px 0px 6px 6px;\n  padding: 10px 15px 10px 15px;\n  border-top: 1px solid #edebe8;\n  margin-left: 25px;\n`;\n\nexport default OrderActionFooter;\n"],"names":["OrderActionFooter","props","isSubmitDisabled","Container","jsx","SubmitButton","styled","Button"],"mappings":";;;AAaA,SAASA,EAAkBC,GAAoB;AAC7C,QAAM,EAAE,kBAAAC,MAAqBD;AAC7B,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAASJ,EAAM;AAAA,QACf,UAAUC;AAAA,QAET,YAAM,qBAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,IAE7BD,EAAM;AAAA,EAAA,GACT;AAEJ;AAEA,MAAMI,IAAeC,EAAOC,CAAM,KAE5BJ,IAAYG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/client-portal/ClientPortalResponsive.js

@@ -0,0 +1,148 @@
+import e from "styled-components";
+const i = e.div`
+  max-width: 100%;
+
+  /* ---------- tablet + mobile: header can grow / wrap ---------- */
+  @media (max-width: 1100px) {
+    .headerWrap {
+      height: auto;
+      min-height: 135px;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      padding-bottom: 54px;
+      row-gap: 12px;
+    }
+    .headerWrap > div:first-child {
+      flex: 1 1 160px;
+      min-width: 0;
+    }
+    .headerWrap > div:not(:first-child) {
+      min-width: 0;
+      flex: 0 1 auto;
+    }
+  }
+
+  /* ---------- tablet ---------- */
+  @media (min-width: 768px) and (max-width: 1100px) {
+    .headerWrap > div:first-child {
+      flex: 1 1 100%;
+    }
+    .headerWrap > div:nth-child(2) {
+      flex: 1 1 240px;
+      width: auto;
+    }
+    .headerWrap > div:nth-child(3) {
+      flex: 1 1 260px;
+      min-width: 260px;
+    }
+    .cpManagementBar {
+      flex-wrap: nowrap;
+      gap: 12px;
+    }
+    .cpManagementBar h2 {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .cpTable {
+      overflow-x: auto;
+    }
+    .cpTable table {
+      min-width: 960px;
+    }
+  }
+
+  /* ---------- mobile ---------- */
+  @media (max-width: 767px) {
+    .headerWrap {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-items: stretch;
+      padding: 16px 16px 56px;
+      gap: 12px;
+      border-radius: 0 0 24px 24px;
+    }
+    .headerWrap > div {
+      width: 100%;
+      min-width: 0;
+      flex: none;
+    }
+    .headerWrap > div:first-child {
+      flex: none;
+    }
+    .headerWrap > div > div {
+      margin-top: 0;
+    }
+    /* search bar + date pickers span the full width */
+    .headerWrap > div:not(:first-child) {
+      max-width: 100%;
+    }
+    .headerWrap .ant-picker {
+      width: 100%;
+      min-width: 0;
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .headerWrap > div:nth-child(3) {
+      gap: 4px;
+      height: 40px;
+    }
+    .headerWrap > div:nth-child(3) > .ant-picker {
+      flex: 1 1 0;
+    }
+
+    .cpManagementBar {
+      /* inline margin/width come from ReturnFilter */
+      width: 100% !important;
+      margin: -44px 0 12px !important;
+      height: auto;
+      flex-wrap: wrap;
+      border-radius: 20px;
+      padding: 10px 12px;
+      gap: 10px;
+    }
+    .cpManagementBar h2 {
+      flex: 1 1 100%;
+      font-size: 13px;
+      line-height: 1.3;
+    }
+    .cpManagementBar > div {
+      width: 100%;
+    }
+    .cpManagementBar .dmsBulkFilter {
+      width: 100%;
+    }
+    .cpManagementBar .dmsBulkFilter > div {
+      flex: 1 1 0;
+      justify-content: center;
+      min-width: 0;
+    }
+
+    /* the white cards: no negative gutter on a phone */
+    && .Tableconatiner {
+      width: 100%;
+      margin: 0;
+      padding: 8px;
+      border-radius: 16px;
+    }
+
+    .cpPagination > div {
+      flex-wrap: wrap;
+      justify-content: center;
+      row-gap: 10px;
+    }
+    .cpPagination > div > div {
+      flex-wrap: wrap;
+      justify-content: center;
+      row-gap: 10px;
+      width: 100%;
+    }
+  }
+`;
+export {
+  i as ClientPortalResponsive,
+  i as default
+};
+//# sourceMappingURL=ClientPortalResponsive.js.map

package/dist/components/client-portal/ClientPortalResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientPortalResponsive.js","sources":["../../../src/components/client-portal/ClientPortalResponsive.ts"],"sourcesContent":["import styled from 'styled-components';\n\n/**\n * Client-portal only: responsive layer for the /return/:status pages\n * (header + search + date pickers, title/export bar, table, pagination).\n *\n * It only targets markup rendered inside ReturnOverview, so the internal\n * (non client-portal) return screens that share HeaderWrapper / StyledTable /\n * ReturnPagination are not affected.\n *\n * Breakpoints (same as the host app header):\n *   <= 767px        mobile  -> table turns into cards\n *   768px - 1100px  tablet  -> table scrolls horizontally inside its card\n *   >= 1101px       desktop -> unchanged layout\n */\nexport const ClientPortalResponsive = styled.div`\n  max-width: 100%;\n\n  /* ---------- tablet + mobile: header can grow / wrap ---------- */\n  @media (max-width: 1100px) {\n    .headerWrap {\n      height: auto;\n      min-height: 135px;\n      flex-wrap: wrap;\n      align-items: flex-start;\n      padding-bottom: 54px;\n      row-gap: 12px;\n    }\n    .headerWrap > div:first-child {\n      flex: 1 1 160px;\n      min-width: 0;\n    }\n    .headerWrap > div:not(:first-child) {\n      min-width: 0;\n      flex: 0 1 auto;\n    }\n  }\n\n  /* ---------- tablet ---------- */\n  @media (min-width: 768px) and (max-width: 1100px) {\n    .headerWrap > div:first-child {\n      flex: 1 1 100%;\n    }\n    .headerWrap > div:nth-child(2) {\n      flex: 1 1 240px;\n      width: auto;\n    }\n    .headerWrap > div:nth-child(3) {\n      flex: 1 1 260px;\n      min-width: 260px;\n    }\n    .cpManagementBar {\n      flex-wrap: nowrap;\n      gap: 12px;\n    }\n    .cpManagementBar h2 {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n    }\n\n    .cpTable {\n      overflow-x: auto;\n    }\n    .cpTable table {\n      min-width: 960px;\n    }\n  }\n\n  /* ---------- mobile ---------- */\n  @media (max-width: 767px) {\n    .headerWrap {\n      flex-direction: column;\n      flex-wrap: nowrap;\n      align-items: stretch;\n      padding: 16px 16px 56px;\n      gap: 12px;\n      border-radius: 0 0 24px 24px;\n    }\n    .headerWrap > div {\n      width: 100%;\n      min-width: 0;\n      flex: none;\n    }\n    .headerWrap > div:first-child {\n      flex: none;\n    }\n    .headerWrap > div > div {\n      margin-top: 0;\n    }\n    /* search bar + date pickers span the full width */\n    .headerWrap > div:not(:first-child) {\n      max-width: 100%;\n    }\n    .headerWrap .ant-picker {\n      width: 100%;\n      min-width: 0;\n      padding-left: 0;\n      padding-right: 0;\n    }\n    .headerWrap > div:nth-child(3) {\n      gap: 4px;\n      height: 40px;\n    }\n    .headerWrap > div:nth-child(3) > .ant-picker {\n      flex: 1 1 0;\n    }\n\n    .cpManagementBar {\n      /* inline margin/width come from ReturnFilter */\n      width: 100% !important;\n      margin: -44px 0 12px !important;\n      height: auto;\n      flex-wrap: wrap;\n      border-radius: 20px;\n      padding: 10px 12px;\n      gap: 10px;\n    }\n    .cpManagementBar h2 {\n      flex: 1 1 100%;\n      font-size: 13px;\n      line-height: 1.3;\n    }\n    .cpManagementBar > div {\n      width: 100%;\n    }\n    .cpManagementBar .dmsBulkFilter {\n      width: 100%;\n    }\n    .cpManagementBar .dmsBulkFilter > div {\n      flex: 1 1 0;\n      justify-content: center;\n      min-width: 0;\n    }\n\n    /* the white cards: no negative gutter on a phone */\n    && .Tableconatiner {\n      width: 100%;\n      margin: 0;\n      padding: 8px;\n      border-radius: 16px;\n    }\n\n    .cpPagination > div {\n      flex-wrap: wrap;\n      justify-content: center;\n      row-gap: 10px;\n    }\n    .cpPagination > div > div {\n      flex-wrap: wrap;\n      justify-content: center;\n      row-gap: 10px;\n      width: 100%;\n    }\n  }\n`;\n\nexport default ClientPortalResponsive;\n"],"names":["ClientPortalResponsive","styled"],"mappings":";AAeO,MAAMA,IAAyBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}