@kosdev-code/kos-ddk-model-components 3.0.5 → 3.0.7

package/components/holders/holder-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"holder-card.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/holders/holder-card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAEL,kBAAkB,EAEnB,MAAM,gCAAgC,CAAC;AA6BxC,UAAU,KAAK;IACb,MAAM,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACvC;AA+CD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAqQrD,CAAC"}
+{"version":3,"file":"holder-card.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/holders/holder-card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAEL,kBAAkB,EAEnB,MAAM,gCAAgC,CAAC;AA6BxC,UAAU,KAAK;IACb,MAAM,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACvC;AA+CD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAsQrD,CAAC"}

package/components/holders/macro-holder-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"macro-holder-card.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/holders/macro-holder-card.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAuHpE,UAAU,oBAAoB;IAC5B,MAAM,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAID,eAAO,MAAM,eAAe,2DAMvB,oBAAoB;;CA+IxB,CAAC"}
+{"version":3,"file":"macro-holder-card.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/holders/macro-holder-card.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAwHpE,UAAU,oBAAoB;IAC5B,MAAM,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAID,eAAO,MAAM,eAAe,2DAMvB,oBAAoB;;CAoKxB,CAAC"}

package/components/remote-nns-modal/remote-nns-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remote-nns-modal.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/remote-nns-modal/remote-nns-modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,gCAAgC,CAAC;AAcxC,UAAU,mBAAoB,SAAQ,eAAe;IACnD,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,gCACI,mBAAmB;;CAqLjD,CAAC"}
+{"version":3,"file":"remote-nns-modal.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/remote-nns-modal/remote-nns-modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,gCAAgC,CAAC;AAcxC,UAAU,mBAAoB,SAAQ,eAAe;IACnD,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,gCACI,mBAAmB;;CAoLjD,CAAC"}

package/components/replace-pump/replace-pump.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"replace-pump.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/replace-pump/replace-pump.tsx"],"names":[],"mappings":"AACA,OAAO,EAUL,KAAK,eAAe,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAuB/D,UAAU,gBAAiB,SAAQ,eAAe;IAChD,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,0BACC,gBAAgB;;CAuGxC,CAAC"}
+{"version":3,"file":"replace-pump.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/replace-pump/replace-pump.tsx"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,eAAe,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAc/D,UAAU,gBAAiB,SAAQ,eAAe;IAChD,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,0BACC,gBAAgB;;CAuGxC,CAAC"}

package/components/setup-sidebar/setup-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup-sidebar.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/setup-sidebar/setup-sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,YAAY,EAEb,MAAM,iCAAiC,CAAC;AAGzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,uBAAuB,EAExB,MAAM,kCAAkC,CAAC;AAE1C,eAAO,MAAM,QAAQ;;;qFAKpB,CAAC;AAEF,eAAO,MAAM,SAAS;;;qFASrB,CAAC;AAEF,KAAK,iBAAiB,GAAG,YAAY,GACnC,uBAAuB,GAAG;IAAE,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAAC;AAEzE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA+BpE,CAAC;AAEL,eAAO,MAAM,YAAY,4GAA2C,CAAC"}
+{"version":3,"file":"setup-sidebar.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/setup-sidebar/setup-sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,YAAY,EAEb,MAAM,iCAAiC,CAAC;AAGzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,uBAAuB,EAExB,MAAM,kCAAkC,CAAC;AAE1C,eAAO,MAAM,QAAQ;;;qFAMpB,CAAC;AAEF,eAAO,MAAM,SAAS;;;qFASrB,CAAC;AAEF,KAAK,iBAAiB,GAAG,YAAY,GACnC,uBAAuB,GAAG;IAAE,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,CAAC;AAEzE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA+BpE,CAAC;AAEL,eAAO,MAAM,YAAY,4GAA2C,CAAC"}

package/components/spm-field-calibration/input-step/index.d.ts

@@ -0,0 +1,2 @@
+export * from './input-step';
+//# sourceMappingURL=index.d.ts.map

package/components/spm-field-calibration/input-step/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/kos-ddk-model-components/src/components/spm-field-calibration/input-step/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/components/spm-field-calibration/input-step/input-step.d.ts

@@ -0,0 +1,11 @@
+interface InputStepProps {
+    fixed?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    value: number;
+    onChange: (value: number) => void;
+}
+export declare const InputStep: ({ fixed, step, min, max, value, onChange, }: InputStepProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=input-step.d.ts.map

package/components/spm-field-calibration/input-step/input-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-step.d.ts","sourceRoot":"","sources":["../../../../../../packages/kos-ddk-model-components/src/components/spm-field-calibration/input-step/input-step.tsx"],"names":[],"mappings":"AA+BA,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,SAAS,GAAI,6CAOvB,cAAc,qDAsBhB,CAAC"}

package/components/spm-field-calibration/spm-field-calibration-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spm-field-calibration-modal.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/spm-field-calibration/spm-field-calibration-modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AA4BnE,UAAU,6BAA8B,SAAQ,eAAe;IAC7D,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB,0BACZ,6BAA6B;;CA4TrD,CAAC"}
+{"version":3,"file":"spm-field-calibration-modal.d.ts","sourceRoot":"","sources":["../../../../../packages/kos-ddk-model-components/src/components/spm-field-calibration/spm-field-calibration-modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AA4BnE,UAAU,6BAA8B,SAAQ,eAAe;IAC7D,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB,0BACZ,6BAA6B;;CAuYrD,CAAC"}

package/index.cjs

@@ -215,7 +215,7 @@ class GenericTroubleAction extends TroubleAction {
 }
 const TROUBLE_PRIME = "PrimeTrouble";
 const TROUBLE_PURGE = "PurgeTrouble";
-const Container$4 = styled.div`
+const Container$3 = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -235,7 +235,7 @@ const AgitatorModal = kosUiSdk.kosComponent(
         contain: componentModeOverride !== "compact",
         onClosed: onComplete,
         show: !closing,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Container$4, { children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Container$3, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             kosDdkComponents.Header,
             {
@@ -560,7 +560,7 @@ const CalibrateModal = kosUiSdk.kosComponent(
           setState("failure");
           break;
       }
-    }, [future?.endState, future?.reason, state]);
+    }, [future, future?.endState, future?.reason, state]);
     const workflow = React.useMemo(() => {
       return {
         "high-flow-test-idle": {
@@ -711,7 +711,7 @@ const CalibrateModal = kosUiSdk.kosComponent(
         failure: {
           information: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("calibration-failed") }),
-            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.BodyMediumInformation, { children: t(`error.${error || "unknownError"}`) })
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.BodyMediumInformation, { children: t(`error.${error}`) })
           ] }),
           footer: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: onComplete, children: t("exit-calibration") }),
           status: "error"
@@ -6948,8 +6948,8 @@ const HolderCard = kosUiSdk.kosComponent(
     const data = useTroubleData(troubleModel);
     const hasFuelGuage = holder.hasFuelGuage;
     const fillPercent = holder.fillPercent;
-    const holderColor = holder.removed ? "var(--ddk-component-dashboard-card-background-color-unassigned)" : disabled ? "var(--ddk-generic-color-grey-50)" : hasTroubles ? `${troubleModel?.color}` : assigned ? void 0 : "var(--ddk-component-dashboard-card-background-color-unassigned)";
-    const holderHeaderColor = holder.removed ? "var(--ddk-component-dashboard-card-header-background-color)" : void 0;
+    const holderColor = holder.removed ? "var(--ddk-component-dashboard-card-background-color-removed)" : disabled ? "var(--ddk-component-dashboard-card-background-color-disabled)" : hasTroubles ? `${troubleModel?.color}` : holder.unassigned ? "var(--ddk-component-dashboard-card-background-color-unassigned)" : void 0;
+    const holderHeaderColor = !isCompact && holder.removed ? "var(--ddk-component-dashboard-card-header-background-color-removed)" : void 0;
     const isLight = isLightColor$1(holderColor);
     const fontColor = disabled ? "white" : holder.unassigned ? "var(--ddk-generic-color-grey-30)" : hasTroubles ? getFontColor$1(isLight) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
     const footerFontColor = disabled ? "white" : hasTroubles ? getFooterFontColor(isLight, holder) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
@@ -7134,7 +7134,7 @@ const HolderGroupView = kosUiSdk.kosComponent(
 const log$1 = kosUiSdk.KosLog.createLogger({ name: "holder-group-view" });
 log$1.debug("holder-group-view component loaded");
 const EXCLUDE_MACROS = ["water", "carb", "ns", "nns"];
-const Container$3 = styled.div`
+const Container$2 = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -7208,9 +7208,10 @@ const MacroHolderCard = kosUiSdk.kosComponent(
     const troubleCount = visibleTroubles?.length ?? 0;
     const troubleModel = visibleTroubles?.[0];
     const hasTroubles = visibleTroubles ? visibleTroubles.length > 0 : false;
-    const holderColor = hasTroubles ? `${troubleModel?.color}` : void 0;
+    const holderColor = holder.removed ? "var(--ddk-component-dashboard-card-background-color-removed)" : hasTroubles ? `${troubleModel?.color}` : holder.unassigned ? "var(--ddk-component-dashboard-card-background-color-unassigned)" : void 0;
+    const holderHeaderColor = !isCompact && holder.removed ? "var(--ddk-component-dashboard-card-header-background-color-removed)" : void 0;
     const isLight = isLightColor(holderColor);
-    const fontColor = hasTroubles ? getFontColor(isLight) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
+    const fontColor = holder.unassigned ? "var(--ddk-generic-color-grey-30)" : hasTroubles ? getFontColor(isLight) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
     const abbreviatedName = kosDdkComponents.useAbbreviation(
       holder.name,
       componentModeOverride === "compact"
@@ -7227,8 +7228,8 @@ const MacroHolderCard = kosUiSdk.kosComponent(
     const key = kosUiSdk.ExtensionManager.executeDashboardKeyFactory(holder) || "";
     const exts = getExtensions(DashboardPumpDetailExtension.id);
     const details = exts.filter((ext) => !!ext.data).reduce((acc, ext) => {
-      const data = ext.data;
-      acc[data.dashboardKey] = ext.data;
+      const data2 = ext.data;
+      acc[data2.dashboardKey] = ext.data;
       return acc;
     }, {});
     const hasExtension = !!details[key];
@@ -7246,7 +7247,11 @@ const MacroHolderCard = kosUiSdk.kosComponent(
     );
     const MainContent = HolderContent ? /* @__PURE__ */ jsxRuntime.jsx(HolderContent, { holder, onComplete: () => setShowModal(false) }) : hasExtension && DashboardPumpDetailComponent ? /* @__PURE__ */ jsxRuntime.jsx(DashboardPumpDetailComponent, { module: details[key]?.id, holder }) : null;
     const troubleLabels = troubleLabelFactory(troubleModel);
-    const footer = hasTroubles ? /* @__PURE__ */ jsxRuntime.jsx(Footer$2, { color: fontColor, children: t(troubleLabels.summary) }) : null;
+    const data = useTroubleData(troubleModel);
+    const footer = hasTroubles ? /* @__PURE__ */ jsxRuntime.jsx(Footer$2, { color: fontColor, children: t(troubleLabels.summary, {
+      context: troubleModel?.deferred ? "queued" : void 0,
+      data
+    }) }) : null;
     const handleCardSelect = React.useCallback(() => {
       if (holder.sortedPumps.length > 0) {
         if (role === "technician") {
@@ -7263,6 +7268,7 @@ const MacroHolderCard = kosUiSdk.kosComponent(
         kosDdkComponents.HolderDashboardCard,
         {
           avatar,
+          headerBackgroundColor: holderHeaderColor,
           backgroundColor: holderColor,
           body: hasTroubles ? null : macroSummaryContent,
           footer,
@@ -7281,7 +7287,7 @@ const MacroHolderCard = kosUiSdk.kosComponent(
           ...modalOptions,
           show: showModal,
           onClose: () => setShowModal(false),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Container$3, { children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Container$2, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               kosDdkComponents.Header,
               {
@@ -8283,7 +8289,7 @@ const WaterPumpCard = kosUiSdk.kosComponent(
     ] });
   }
 );
-const Container$2 = styled.section`
+const Container$1 = styled.section`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -8326,7 +8332,7 @@ const RebootView = ({ onComplete }) => {
             CloseButton: kosDdkComponents.CompactCloseButton
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Container$2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Container$1, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.QuestionIconStyle, {}),
             /* @__PURE__ */ jsxRuntime.jsx(TextContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.UtilityModalHeading, { children: t("modal-heading", "Are you sure you want to reboot dispenser?") }) })
@@ -8357,10 +8363,13 @@ const RemoteNNSModal = kosUiSdk.kosComponent(
     const holder = remoteTray.holder;
     const pumps = holder.pumps.data.filter((pump) => pump.childPump);
     const disabling = remoteTray.remoteTrayEnabled.value === true;
-    const readyToSubmit = () => pumps.every((pump) => {
-      const value = pumpCodes[pump.name];
-      return value !== void 0 && value !== null && value !== "";
-    });
+    const readyToSubmit = React.useCallback(
+      () => pumps.every((pump) => {
+        const value = pumpCodes[pump.name];
+        return value !== void 0 && value !== null && value !== "";
+      }),
+      [pumpCodes, pumps]
+    );
     const changePumpCode = React.useCallback((pumpName, pumpCode) => {
       setPumpCodes((pumpCodes2) => {
         return { ...pumpCodes2, [pumpName]: pumpCode };
@@ -8410,13 +8419,7 @@ const RemoteNNSModal = kosUiSdk.kosComponent(
       } else {
         setState("pump");
       }
-    }, [
-      disabling,
-      pumpCodes,
-      pumps,
-      remoteTray.remoteTrayEnabled,
-      toggleRemoteTray
-    ]);
+    }, [pumpCodes, pumps, toggleRemoteTray]);
     const workflow = React.useMemo(() => {
       return {
         idle: {
@@ -8475,14 +8478,16 @@ const RemoteNNSModal = kosUiSdk.kosComponent(
         }
       };
     }, [
-      changePumpCode,
       disabling,
+      handlePumpCodeChange,
       onComplete,
       pumpCodes,
       pumpErrors,
       pumps,
+      readyToSubmit,
       submit,
-      t
+      t,
+      toggleRemoteTray
     ]);
     return /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.WorkflowModal, { ...workflow[state], onClose: () => onComplete() });
   }
@@ -8530,14 +8535,6 @@ const ReplaceLine = kosUiSdk.kosComponent(
     return /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.StatusBar, { show: status !== void 0, onClose: close, children: status === "failure" ? /* @__PURE__ */ jsxRuntime.jsx(FailureMessage, { children: t(error || "unknownError") }) : status === "success" ? /* @__PURE__ */ jsxRuntime.jsx(SuccessMessage, { children: t("success") }) : null });
   }
 );
-const Container$1 = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  gap: 32px;
-  height: 100%;
-`;
 const ReplacePump = kosUiSdk.kosComponent(
   ({ pump, onComplete }) => {
     const [closing, setClosing] = React.useState(false);
@@ -8583,7 +8580,7 @@ const ReplacePump = kosUiSdk.kosComponent(
           contain: componentModeOverride !== "compact",
           onClosed: onComplete,
           show: !closing,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Container$1, { children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(kosDdkComponents.ModalContainer, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               kosDdkComponents.Header,
               {
@@ -8788,15 +8785,16 @@ const StepItem = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
+  padding: var(--ddk-component-setup-sidebar-step-item-padding);
 `;
 const StepTitle = styled.div`
-  color: var(--ddk-generic-color-grey-100, #171717);
-  font-size: var(--ddk-component-sidebar-font-size-medium);
-  font-style: normal;
-  font-weight: 600;
-  line-height: 135%;
-  letter-spacing: 0.44px;
-  white-space: nowrap;
+  color: var(--ddk-component-step-title-color);
+  font-size: var(--ddk-component-step-title-font-weight);
+  font-style: var(--ddk-component-step-title-font-weight);
+  font-weight: var(--ddk-component-step-title-font-weight);
+  line-height: var(--ddk-component-step-title-line-height);
+  letter-spacing: var(--ddk-component-step-title-letter-spacing);
+  white-space: var(--ddk-component-step-title-white-space);
   overflow: hidden;
 `;
 const SetupSidebarComp = kosUiSdk.kosComponent(({ setupStepContainer, onStepSelected, ...props }) => {
@@ -8851,9 +8849,55 @@ const Software = kosUiSdk.kosComponent(() => {
     ) }, index2))
   ] }, index));
 });
-const LabelInformationPreformatted = styled(kosDdkComponents.LabelInformation)`
-  white-space: pre-wrap;
+const InputStepContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: 32px;
+  width: 100%;
+`;
+const ValueContainer = styled(kosDdkComponents.HeadingExtraLarge)`
+  border-bottom: 1px solid var(--ddk-semantic-control-border-color-default);
+  border-top: 1px solid var(--ddk-semantic-control-border-color-default);
+  color: var(--ddk-semantic-control-color-default);
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  padding: 24px 0;
+`;
+const IconButton = styled(kosDdkComponents.Button)`
+  font-size: var(--ddk-component-input-step-font-size);
+  font-weight: var(--ddk-component-input-step-font-weight);
+  width: var(--ddk-component-input-step-button-width);
+  height: var(--ddk-component-input-step-button-height);
+  min-width: var(--ddk-component-input-step-button-width);
+  min-height: var(--ddk-component-input-step-button-height);
+  border-radius: var(--ddk-component-input-step-button-border-radius);
 `;
+const InputStep = ({
+  fixed = 1,
+  step = 0.1,
+  min = 0,
+  max = 100,
+  value,
+  onChange
+}) => {
+  const increase = React.useCallback(() => {
+    let nextValue = value + step;
+    if (nextValue > max) nextValue = max;
+    onChange(nextValue);
+  }, [max, onChange, step, value]);
+  const decrease = React.useCallback(() => {
+    let nextValue = value - step;
+    if (nextValue < min) nextValue = min;
+    onChange(nextValue);
+  }, [min, onChange, step, value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputStepContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onPointerDown: decrease, children: "-" }),
+    /* @__PURE__ */ jsxRuntime.jsx(ValueContainer, { children: value.toFixed(fixed) }),
+    /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onPointerDown: increase, children: "+" })
+  ] });
+};
+const DEFAULT_CALIBRATION_VALUE = 8;
 const SPMFieldCalibrationModal = kosUiSdk.kosComponent(
   ({ pump, onComplete }) => {
     const { t } = kosUiSdk.useKosTranslation("common", {
@@ -8863,6 +8907,12 @@ const SPMFieldCalibrationModal = kosUiSdk.kosComponent(
     const [error, setError] = React.useState();
     const [volume1, setVolume1] = React.useState();
     const [volume2, setVolume2] = React.useState();
+    const { calibrateVolume } = usePumpCalibration(pump);
+    React.useEffect(() => {
+      if (!calibrateVolume) return;
+      if (volume1 === void 0) setVolume1(calibrateVolume.toString());
+      if (volume2 === void 0) setVolume2(calibrateVolume.toString());
+    }, [calibrateVolume, volume1, volume2]);
     const { clearFuture, future } = useFutureContainer(pump);
     React.useEffect(() => {
       switch (future?.endState) {
@@ -8899,19 +8949,28 @@ const SPMFieldCalibrationModal = kosUiSdk.kosComponent(
     const workflow = React.useMemo(() => {
       return {
         "preparation-idle": {
-          information: /* @__PURE__ */ jsxRuntime.jsx(LabelInformationPreformatted, { children: t("preparation-idle-info") }),
-          footer: /* @__PURE__ */ jsxRuntime.jsx(
-            kosDdkComponents.Button,
-            {
-              onPointerDown: () => {
-                clearFuture();
-                pump.performPreCalibrate();
-                setState("preparation-in-progress");
-              },
-              children: t("preparation-action")
-            }
-          ),
-          status: "information"
+          information: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("preparation-idle-step") }),
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.InfoMessage, { children: t("preparation-idle-alert") }),
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.InstructionCard, { children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("preparation-idle-info-1") }),
+              /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("preparation-idle-info-2") })
+            ] }) })
+          ] }),
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              kosDdkComponents.Button,
+              {
+                onPointerDown: () => {
+                  clearFuture();
+                  pump.performPreCalibrate();
+                  setState("preparation-in-progress");
+                },
+                children: t("preparation-action")
+              }
+            )
+          ] })
         },
         "preparation-in-progress": {
           information: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("preparation-progress-info") }),
@@ -8925,19 +8984,25 @@ const SPMFieldCalibrationModal = kosUiSdk.kosComponent(
         },
         "preparation-failed": {},
         "calibration-idle": {
-          information: /* @__PURE__ */ jsxRuntime.jsx(LabelInformationPreformatted, { children: t("calibration-idle-info") }),
-          footer: /* @__PURE__ */ jsxRuntime.jsx(
-            kosDdkComponents.Button,
-            {
-              onPointerDown: () => {
-                clearFuture();
-                pump.performCalibrate();
-                setState("calibration-in-progress");
-              },
-              children: t("calibrate")
-            }
-          ),
-          status: "information"
+          information: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("calibration-idle-step") }),
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.InfoMessage, { children: t("calibration-idle-alert") }),
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.InstructionCard, { children: t("calibration-idle-info-1") })
+          ] }),
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              kosDdkComponents.Button,
+              {
+                onPointerDown: () => {
+                  clearFuture();
+                  pump.performCalibrate();
+                  setState("calibration-in-progress");
+                },
+                children: t("calibrate")
+              }
+            )
+          ] })
         },
         "calibration-in-progress": {
           information: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("calibration-progress-info") }),
@@ -8947,49 +9012,64 @@ const SPMFieldCalibrationModal = kosUiSdk.kosComponent(
           information: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("calibration-input-info") }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              kosDdkComponents.InputCard,
+              InputStep,
               {
-                label: "Volume",
-                unitValue: "ml",
-                layout: "num",
                 onChange: (value) => {
-                  if (value === void 0) return;
-                  setVolume1(value);
+                  setVolume1(value.toString());
                 },
-                value: volume1 !== void 0 ? volume1 : ""
+                value: volume1 !== void 0 ? Number(volume1) : DEFAULT_CALIBRATION_VALUE
               }
             )
           ] }),
-          footer: /* @__PURE__ */ jsxRuntime.jsx(
-            kosDdkComponents.Button,
-            {
-              disabled: volume1 === void 0,
-              onPointerDown: () => {
-                if (volume1 === void 0) return;
-                setState("verification-idle");
-              },
-              children: t("proceed")
-            }
-          ),
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              kosDdkComponents.Button,
+              {
+                disabled: volume1 === void 0,
+                onPointerDown: () => {
+                  if (volume1 === void 0) return;
+                  setState("calibration-input-confirmation");
+                },
+                children: t("proceed")
+              }
+            )
+          ] })
+        },
+        "calibration-input-confirmation": {
+          information: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("calibration-confirm-info", {
+            data: { volume: Number(volume1).toFixed(1) }
+          }) }),
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: () => setState("calibration-input"), children: t("go-back") }),
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: () => setState("verification-idle"), children: t("confirm-and-proceed") })
+          ] }),
           status: "information"
         },
-        // Todo: calibration-input-confirmation if necessary...
-        "calibration-input-confirmation": {},
         "verification-idle": {
-          information: /* @__PURE__ */ jsxRuntime.jsx(LabelInformationPreformatted, { children: t("verification-idle-info") }),
-          footer: /* @__PURE__ */ jsxRuntime.jsx(
-            kosDdkComponents.Button,
-            {
-              onPointerDown: async () => {
-                if (volume1 === void 0) return;
-                clearFuture();
-                pump.performVerify(volume1, future?.clientData);
-                setState("verification-in-progress");
-              },
-              children: t("initiate-verification-pour")
-            }
-          ),
-          status: "information"
+          information: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("verification-idle-step") }),
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.InfoMessage, { children: t("verification-idle-alert") }),
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.InstructionCard, { children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("verification-idle-info-1") }),
+              /* @__PURE__ */ jsxRuntime.jsx("li", { children: t("verification-idle-info-2") })
+            ] }) })
+          ] }),
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              kosDdkComponents.Button,
+              {
+                onPointerDown: async () => {
+                  if (volume1 === void 0) return;
+                  clearFuture();
+                  pump.performVerify(volume1, future?.clientData);
+                  setState("verification-in-progress");
+                },
+                children: t("initiate-verification-pour")
+              }
+            )
+          ] })
         },
         "verification-in-progress": {
           information: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("verification-progress-info") }),
@@ -9000,45 +9080,59 @@ const SPMFieldCalibrationModal = kosUiSdk.kosComponent(
           information: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("verification-input-info") }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              kosDdkComponents.InputCard,
+              InputStep,
               {
-                label: "Volume",
-                unitValue: "ml",
-                layout: "num",
                 onChange: (value) => {
-                  if (value === void 0) return;
-                  setVolume2(value);
+                  setVolume2(value.toString());
                 },
-                value: volume2 !== void 0 ? volume2 : ""
+                value: volume2 !== void 0 ? Number(volume2) : DEFAULT_CALIBRATION_VALUE
+              }
+            )
+          ] }),
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              kosDdkComponents.Button,
+              {
+                disabled: volume2 === void 0,
+                onPointerDown: async () => {
+                  setState("verification-input-confirmation");
+                },
+                children: t("proceed")
+              }
+            )
+          ] })
+        },
+        "verification-input-confirmation": {
+          information: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("calibration-confirm-info", {
+            data: { volume: Number(volume2).toFixed(1) }
+          }) }),
+          footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: () => setState("verification-input"), children: t("go-back") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              kosDdkComponents.Button,
+              {
+                onPointerDown: async () => {
+                  if (volume1 === void 0 || volume2 === void 0) return;
+                  clearFuture();
+                  const [error2, data] = await pump.performComplete(
+                    volume1,
+                    volume2,
+                    future?.clientData
+                  );
+                  if (error2) {
+                    setError(error2);
+                    setState("failure");
+                  } else {
+                    setState("verification-success");
+                  }
+                },
+                children: t("confirm-and-proceed")
               }
             )
           ] }),
-          footer: /* @__PURE__ */ jsxRuntime.jsx(
-            kosDdkComponents.Button,
-            {
-              disabled: volume2 === void 0,
-              onPointerDown: async () => {
-                if (volume1 === void 0 || volume2 === void 0) return;
-                clearFuture();
-                const [error2, data] = await pump.performComplete(
-                  volume1,
-                  volume2,
-                  future?.clientData
-                );
-                if (error2) {
-                  setError(error2);
-                  setState("failure");
-                } else {
-                  setState("verification-success");
-                }
-              },
-              children: t("proceed")
-            }
-          ),
           status: "information"
         },
-        // Todo: verification-input-confirmation if necessary...
-        "verification-input-confirmation": {},
         "verification-success": {
           information: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.LabelInformation, { children: t("verification-success-info") }),
           footer: /* @__PURE__ */ jsxRuntime.jsx(kosDdkComponents.Button, { onPointerDown: onComplete, children: t("exit-calibration") }),