allaw-ui 2.0.4 → 2.0.6

package/dist/assets/allaw-font.svg

@@ -104,18 +104,18 @@
 <glyph unicode="&#xe94e;" glyph-name="apple" data-tags="apple" d="M798.293 128c-35.413-52.907-72.96-104.533-130.133-105.387-57.173-1.28-75.52 33.707-140.373 33.707-65.28 0-85.333-32.853-139.521-34.987-55.893-2.133-98.133 56.32-133.973 107.947-72.96 105.387-128.853 299.52-53.76 430.080 37.12 64.853 103.68 105.813 175.787 107.093 54.615 0.853 106.668-37.12 140.375-37.12 33.28 0 96.427 45.653 162.56 38.827 27.733-1.28 105.387-11.093 155.307-84.48-3.84-2.56-92.587-54.613-91.733-162.56 1.28-128.853 113.067-171.947 114.347-172.373-1.28-2.987-17.92-61.44-58.88-120.747zM554.667 810.667c31.147 35.413 82.773 62.293 125.44 64 5.547-49.92-14.507-100.267-44.373-136.107-29.44-36.267-78.080-64.427-125.867-60.587-6.4 49.067 17.493 100.267 44.8 132.693z" />
 <glyph unicode="&#xe94f;" glyph-name="linkedin" data-tags="linkedin" d="M1024-64h-204.8v358.349c0 98.304-43.366 153.139-121.139 153.139-84.634 0-134.861-57.139-134.861-153.139v-358.349h-204.8v665.6h204.8v-74.854c0 0 64.256 112.742 209.050 112.742 144.845 0 251.75-88.371 251.75-271.258v-432.23zM125.030 708.045c-69.069 0-125.030 56.422-125.030 126.003 0 69.53 55.962 125.952 125.030 125.952 69.018 0 124.979-56.422 124.979-125.952 0.051-69.581-55.962-126.003-124.979-126.003v0zM0-64h256v665.6h-256v-665.6z" />
 <glyph unicode="&#xe950;" glyph-name="microsoft-outlook" data-tags="microsoft-outlook" d="M1024 644.821v-447.061c0-9.813-3.413-18.091-10.155-24.576-6.741-6.571-15.019-9.813-24.747-9.813h-364.672v296.917l68.267-52.437c4.352-3.627 9.771-5.376 16.171-5.376 6.315 0 11.819 1.749 16.597 5.419zM624.427 731.051h364.672c9.003 0 16.768-2.688 23.168-8.192 6.4-5.461 9.984-12.8 10.581-21.76l-314.411-250.709-84.011 66.091zM571.904 923.136v-950.229l-571.904 98.816v749.867l571.989 101.547zM399.147 446.123c-0.853 48.341-13.355 88.405-37.504 120.064-23.68 31.573-54.4 48.256-90.923 49.664-35.157-1.408-65.237-18.048-89.6-49.664-24.32-31.659-36.48-71.765-37.12-120.064 0.64-47.659 13.44-87.339 37.76-119.083 24.363-31.573 54.357-48.341 89.643-50.176 36.48 1.493 67.157 18.091 91.52 49.92 24.32 31.915 37.12 71.68 37.76 119.339zM266.027 552.021c18.389-0.853 33.877-10.923 46.208-30.592 12.16-19.669 18.56-44.587 18.56-74.752 0-30.763-6.357-55.765-18.56-75.563-12.843-19.797-28.16-30.037-46.763-30.037s-33.92 9.643-46.72 29.44-18.56 44.8-18.56 74.837c0 30.080 5.76 55.083 18.56 74.24 12.117 19.2 27.563 29.44 46.123 30.763z" />
-<glyph unicode="&#xe951;" d="M277.333 682.667h469.333v-469.333h-469.333v469.333z" />
-<glyph unicode="&#xe952;" d="M547.84 513.707l21.504-30.72 33.792 24.576v-178.176h36.864v233.472h-30.72z" />
-<glyph unicode="&#xe953;" glyph-name="microsoftoutlook" data-tags="microsoft-outlook" d="M1024 644.821v-447.061c0-9.813-3.413-18.091-10.155-24.576-6.741-6.571-15.019-9.813-24.747-9.813h-364.672v296.917l68.267-52.437c4.352-3.627 9.771-5.376 16.171-5.376 6.315 0 11.819 1.749 16.597 5.419zM624.427 731.051h364.672c9.003 0 16.768-2.688 23.168-8.192 6.4-5.461 9.984-12.8 10.581-21.76l-314.411-250.709-84.011 66.091zM571.904 923.136v-950.229l-571.904 98.816v749.867l571.989 101.547zM399.147 446.123c-0.853 48.341-13.355 88.405-37.504 120.064-23.68 31.573-54.4 48.256-90.923 49.664-35.157-1.408-65.237-18.048-89.6-49.664-24.32-31.659-36.48-71.765-37.12-120.064 0.64-47.659 13.44-87.339 37.76-119.083 24.363-31.573 54.357-48.341 89.643-50.176 36.48 1.493 67.157 18.091 91.52 49.92 24.32 31.915 37.12 71.68 37.76 119.339zM266.027 552.021c18.389-0.853 33.877-10.923 46.208-30.592 12.16-19.669 18.56-44.587 18.56-74.752 0-30.763-6.357-55.765-18.56-75.563-12.843-19.797-28.16-30.037-46.763-30.037s-33.92 9.643-46.72 29.44-18.56 44.8-18.56 74.837c0 30.080 5.76 55.083 18.56 74.24 12.117 19.2 27.563 29.44 46.123 30.763z" />
-<glyph unicode="&#xe954;" d="M489.451 453.44c13.333 12.245 21.611 29.227 21.611 47.979 0 37.269-32.704 67.584-72.896 67.584-34.176 0-63.403-21.525-71.040-52.331l35.349-8.981c3.52 14.165 18.517 24.448 35.691 24.448 20.096 0 36.459-13.781 36.459-30.72s-16.363-30.72-36.459-30.72h-21.269v-36.864h21.269c23.061 0 42.517-16.021 42.517-34.987 0-19.285-18.475-34.987-41.195-34.987-20.523 0-38.059 13.013-40.832 30.251l-35.989-5.888c5.589-34.901 38.613-61.227 76.8-61.227 42.816 0 77.653 32.235 77.653 71.851 0 21.824-10.752 41.408-27.669 54.592z" />
-<glyph unicode="&#xe955;" d="M725.333 64h-426.667l-21.333 85.333 21.333 85.333h426.667l21.333-85.333z" />
-<glyph unicode="&#xe956;" d="M810.667 213.333l85.333 21.333v426.667l-85.333 21.333-85.333-21.333v-426.667z" />
-<glyph unicode="&#xe957;" d="M725.333 661.333l21.333 85.333-21.333 85.333h-533.333c-35.349 0-64-28.651-64-64v-533.333l85.333-21.333 85.333 21.333v426.667h426.667z" />
-<glyph unicode="&#xe958;" d="M725.333 234.667v-170.667l170.667 170.667z" />
-<glyph unicode="&#xe959;" d="M832 832h-106.667v-170.667h170.667v106.667c0 35.349-28.651 64-64 64z" />
+<glyph unicode="&#xe951;" d="M781.474 717.474h-538.947v-538.947h538.947z" />
+<glyph unicode="&#xe952;" d="M781.474-64l242.526 242.526-121.263 20.69-121.263-20.69-22.133-110.918z" />
+<glyph unicode="&#xe953;" glyph-name="play" data-tags="play" horiz-adv-x="877" d="M94.48-63.141c-32.274 5.287-63.377 26.516-79.643 54.361-6.986 11.959-12.17 28.677-13.919 44.888-1.224 11.345-1.224 812.334 0 823.68 3.044 28.221 13.476 49.939 32.911 68.519 34.712 33.184 82.082 40.948 123.653 20.265 10.169-5.059 666.111-405.913 674.048-411.918 26.288-19.891 41.424-46.683 45.222-80.048 2.187-19.213-3.817-46.177-14.211-63.816-7.59-12.88-18.692-25.036-30.619-33.527-9.888-7.039-665.618-407.55-674.44-411.939-8.208-4.084-18.146-7.57-27.483-9.641-8.259-1.832-26.744-2.261-35.519-0.823z" />
+<glyph unicode="&#xe954;" d="M0 178.526v-161.684c0-44.665 36.177-80.842 80.842-80.842h161.684l24.901 121.263-24.901 121.263-132.13 20.69-110.397-20.69z" />
+<glyph unicode="&#xe955;" d="M1024 717.474v161.684c0 44.665-36.177 80.842-80.842 80.842h-161.684c-14.755-60.143-22.133-104.404-22.133-132.783s7.378-64.96 22.133-109.743c53.638-15.36 94.059-23.039 121.263-23.039s67.625 7.68 121.263 23.039z" />
+<glyph unicode="&#xe956;" d="M1024 717.474h-242.526v-538.947h242.526z" />
+<glyph unicode="&#xe957;" d="M781.474 178.526h-538.947v-242.526h538.947z" />
+<glyph unicode="&#xe958;" d="M781.474 960h-700.632c-44.665 0-80.842-36.177-80.842-80.842v-700.632h242.526v538.947h538.947v242.526z" />
+<glyph unicode="&#xe959;" d="M353.078 299.385c-20.143 13.608-34.088 33.482-41.701 59.756l46.754 19.267c4.244-16.168 11.655-28.699 22.232-37.592 10.509-8.893 23.309-13.272 38.265-13.272 15.293 0 28.429 4.648 39.411 13.945s16.505 21.154 16.505 35.503c0 14.686-5.794 26.678-17.381 35.975s-26.139 13.945-43.52 13.945h-27.015v46.282h24.253c14.956 0 27.554 4.042 37.794 12.126s15.36 19.133 15.36 33.213c0 12.531-4.581 22.501-13.743 29.979s-20.749 11.251-34.829 11.251c-13.743 0-24.657-3.638-32.741-10.981-8.079-7.363-14.153-16.659-17.651-27.015l-46.282 19.267c6.131 17.381 17.381 32.741 33.886 46.013s37.592 19.941 63.192 19.941c18.931 0 35.975-3.638 51.065-10.981s26.947-17.516 35.503-30.451c8.556-13.002 12.8-27.554 12.8-43.722 0-16.505-3.975-30.451-11.924-41.903s-17.718-20.211-29.305-26.341v-2.762c14.962-6.169 27.959-16.3 37.592-29.305 9.768-13.137 14.686-28.834 14.686-47.158s-4.648-34.695-13.945-49.044c-9.297-14.349-22.164-25.667-38.467-33.886-16.371-8.219-34.762-12.396-55.175-12.396-23.646-0.067-45.474 6.737-65.617 20.346v0zM640.269 531.402l-51.335-37.12-25.667 38.939 92.093 66.425h35.301v-313.331h-50.392v245.086z" />
 <glyph unicode="&#xe95a;" d="M48.762 911.238h438.857v-438.857h-438.857v438.857z" />
 <glyph unicode="&#xe95b;" d="M48.762 423.619h438.857v-438.857h-438.857v438.857z" />
 <glyph unicode="&#xe95c;" d="M536.381 911.238h438.857v-438.857h-438.857v438.857z" />
 <glyph unicode="&#xe95d;" d="M536.381 423.619h438.857v-438.857h-438.857v438.857z" />
-<glyph unicode="&#xe95e;" d="M192 64h106.667v170.667h-170.667v-106.667c0-35.349 28.651-64 64-64z" />
+<glyph unicode="&#xe95e;" glyph-name="pause" data-tags="pause" horiz-adv-x="852" d="M120.549-63.781c-30.987 2.728-62.772 16.694-83.089 36.51-7.98 7.784-19.121 23.746-24.747 35.459-3.943 8.209-8.485 22.227-10.946 33.781-1.689 7.93-1.767 25.902-1.767 406.061v397.764l2.163 9.978c4.328 19.965 9.62 32.571 20.789 49.516 18.252 27.694 46.525 45.229 85.396 52.962 7.789 1.55 14.76 1.748 61.495 1.748 57.274 0 58.175-0.068 78.959-5.953 18.476-5.232 40.961-18.214 53.822-31.074 7.785-7.785 19.009-23.971 24.34-35.099 4.383-9.149 7.906-19.859 10.559-32.1l2.163-9.978v-397.764c0-380.159-0.078-398.132-1.767-406.061-2.461-11.554-7.003-25.572-10.946-33.781-5.626-11.713-16.767-27.675-24.747-35.459-12.784-12.468-34.44-25.149-51.73-30.29-20.106-5.978-21.889-6.128-75.772-6.377-27.38-0.127-51.758-0.056-54.174 0.156zM633.006-63.781c-30.987 2.728-62.772 16.694-83.089 36.51-7.98 7.784-19.121 23.746-24.747 35.459-3.943 8.209-8.485 22.227-10.946 33.781-1.689 7.93-1.767 25.902-1.767 406.061v397.764l2.163 9.978c4.328 19.965 9.621 32.571 20.789 49.516 18.252 27.694 46.525 45.229 85.396 52.962 7.789 1.55 14.76 1.748 61.495 1.748 57.274 0 58.175-0.068 78.959-5.953 18.476-5.232 40.961-18.214 53.822-31.074 7.785-7.785 19.009-23.971 24.34-35.099 4.383-9.149 7.906-19.859 10.559-32.1l2.163-9.978v-397.764c0-380.159-0.078-398.132-1.767-406.061-2.461-11.554-7.003-25.572-10.946-33.781-5.626-11.713-16.767-27.675-24.747-35.459-12.784-12.468-34.441-25.149-51.73-30.29-20.106-5.978-21.889-6.128-75.772-6.377-27.38-0.127-51.758-0.056-54.174 0.156z" />
 </font></defs></svg>

package/dist/components/atoms/buttons/PrimaryButton.css

@@ -7,9 +7,7 @@
   height: 42px;
   padding: 1rem 1.3rem;
   border-radius: 24px;
-  transition:
-    background-color 0.2s,
-    opacity 0.2s;
+  transition: background-color 0.2s, opacity 0.2s;
   border: 0px;
   cursor: pointer;
   text-wrap: nowrap;
@@ -62,6 +60,23 @@
   pointer-events: none;
 }
 
+.primary-button-loading-dots {
+  width: 1.25rem;
+  display: inline-block;
+  text-align: left;
+  font-size: 0.9rem;
+}
+
+.primary-button-warning {
+  background: var(--red-tag-dark, #e15151);
+  color: var(--pure-white, #fff);
+  border: none;
+}
+
+.primary-button-warning:hover {
+  background: #c14040;
+}
+
 @keyframes pulse-background {
   0% {
     background-color: #171e25;
@@ -73,10 +88,3 @@
     background-color: #1985e8;
   }
 }
-
-.primary-button-loading-dots {
-  width: 1.25rem;
-  display: inline-block;
-  text-align: left;
-  font-size: 0.9rem;
-}

package/dist/components/atoms/buttons/PrimaryButton.d.ts

@@ -12,6 +12,7 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
     fullWidth?: boolean;
     type?: "button" | "submit" | "reset";
     isLoading?: boolean;
+    variant?: "default" | "warning";
 }
 declare const PrimaryButton: React.ForwardRefExoticComponent<PrimaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default PrimaryButton;

package/dist/components/atoms/buttons/PrimaryButton.js

@@ -61,7 +61,7 @@ import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "re
 import "./PrimaryButton.css";
 import "../../../styles/global.css";
 var PrimaryButton = forwardRef(function (_a, ref) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading"]);
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, variant = _a.variant, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant"]);
     var buttonRef = React.useRef(null);
     var _f = useState(false), internalIsLoading = _f[0], setInternalIsLoading = _f[1];
     var _g = useState(""), loadingDots = _g[0], setLoadingDots = _g[1];
@@ -108,7 +108,7 @@ var PrimaryButton = forwardRef(function (_a, ref) {
             }
         });
     }); };
-    return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(isButtonLoading ? "primary-button-loading" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
+    return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(isButtonLoading ? "primary-button-loading" : "").concat(variant === "warning" ? "primary-button-warning" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
         startIcon && (React.createElement("span", { className: "primary-button-icon ".concat(startIconName) })),
         React.createElement("span", { className: "primary-button-label" }, label),
         isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) }))));

package/dist/components/atoms/buttons/PrimaryButton.stories.d.ts

@@ -61,15 +61,24 @@ declare namespace _default {
             }
             export { control_5 as control };
         }
-        export namespace parameters {
-            namespace backgrounds {
-                let _default: string;
-                export { _default as default };
-                export let values: {
-                    name: string;
-                    value: string;
-                }[];
+        export namespace variant {
+            export namespace control_6 {
+                let type_7: string;
+                export { type_7 as type };
+                let options_1: string[];
+                export { options_1 as options };
             }
+            export { control_6 as control };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
         }
     }
 }
@@ -83,4 +92,5 @@ export const Loading: any;
 export const SubmitButton: any;
 export const ResetButton: any;
 export const AsyncButton: any;
+export const WarningButton: any;
 import PrimaryButton from "./PrimaryButton";

package/dist/components/atoms/buttons/PrimaryButton.stories.js

@@ -95,18 +95,24 @@ export default {
                 type: "boolean",
             },
         },
-        parameters: {
-            backgrounds: {
-                default: "light",
-                values: [
-                    { name: "light", value: "#ffffff" },
-                    { name: "grey", value: "#728ea7" },
-                    { name: "figma", value: "#404040" },
-                    { name: "dark", value: "#171e25" },
-                ],
+        variant: {
+            control: {
+                type: "select",
+                options: ["default", "warning"],
             },
         },
     },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
 };
 var Template = function (args) { return React.createElement(PrimaryButton, __assign({}, args)); };
 export var Default = Template.bind({});
@@ -145,3 +151,5 @@ AsyncButton.args = __assign(__assign({}, Default.args), { label: "Async Action",
             }
         });
     }); } });
+export var WarningButton = Template.bind({});
+WarningButton.args = __assign(__assign({}, Default.args), { label: "Warning", variant: "warning" });

package/dist/components/molecules/billingCount/BillingCount.css

@@ -1,28 +1,62 @@
 .billing-button-wrapper {
-    padding: 0.5rem 1rem;
-    background-color: #F4F7FB;
-    border: 1px solid var(--primary-venom-grey, #E6EDF5);
-    border-radius: 5px;
-    font-family: Inter;
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
-    font-weight: 600;
-    color: black;
-    align-items: center;
-    cursor: pointer;
+  padding: 0.5rem 1rem;
+  background-color: #f4f7fb;
+  border: 1px solid var(--primary-venom-grey, #e6edf5);
+  border-radius: 5px;
+  font-family: Inter;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  font-weight: 600;
+  color: black;
+  align-items: center;
+  cursor: pointer;
+  max-height: 38px;
+  transition: transform 0.2s ease-in-out;
 }
 
 .billing-button-wrapper > i {
-    color: #25BEEB;
-    font-weight: 500;
-    font-size: 16px;
+  color: #25beeb;
+  font-weight: 500;
+  font-size: 16px;
+  min-width: 16px;
 }
 
 .billing-button-wrapper:active {
-    outline: 1px solid #25BEEB;
+  outline: 1px solid #25beeb;
+}
+
+.billing-time {
+  min-width: 70px;
+  text-align: center;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.icon-wrapper i {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  color: #25beeb;
+  font-weight: 800;
+}
+
+@keyframes borderOpacity {
+  0% {
+    border-color: rgba(37, 190, 235, 0.16);
+  }
+  50% {
+    border-color: rgba(37, 190, 235, 1);
+  }
+  100% {
+    border-color: rgba(37, 190, 235, 0.16);
+  }
 }
 
 .isRunning {
-    outline: 1px solid #25BEEB;
-}
+  border: 1px solid rgba(37, 190, 235, 0.2);
+  animation: borderOpacity 3s infinite ease-in-out;
+}

package/dist/components/molecules/billingCount/BillingCount.d.ts

@@ -3,6 +3,8 @@ import "./BillingCount.css";
 export type BillingCountProps = {
     onEnd: (time: number) => void;
     setIsStarted?: (value: boolean) => void;
+    resetTimer?: boolean;
+    pauseTimer?: boolean;
 };
-declare function BillingCount({ onEnd, setIsStarted }: BillingCountProps): React.JSX.Element;
+declare const BillingCount: ({ onEnd, setIsStarted, pauseTimer, resetTimer, }: BillingCountProps) => React.JSX.Element;
 export default BillingCount;

package/dist/components/molecules/billingCount/BillingCount.js

@@ -1,75 +1,146 @@
-import React, { useEffect, useState } from "react";
-import { differenceInSeconds } from "date-fns";
+import React, { useEffect, useState, useRef } from "react";
 import "./BillingCount.css";
-function BillingCount(_a) {
-    var onEnd = _a.onEnd, setIsStarted = _a.setIsStarted;
-    var _b = useState(false), started = _b[0], setStarted = _b[1];
-    var _c = useState(0), time = _c[0], setTime = _c[1];
-    // Load saved start time and elapsed time from localStorage on component mount
+var LOCAL_STORAGE_KEYS = {
+    START_TIME: "startTimeBilling",
+    ELAPSED_TIME: "elapsedTime",
+    IS_RUNNING: "isRunning",
+};
+var BillingCount = function (_a) {
+    var onEnd = _a.onEnd, setIsStarted = _a.setIsStarted, pauseTimer = _a.pauseTimer, resetTimer = _a.resetTimer;
+    var _b = useState(0), time = _b[0], setTime = _b[1];
+    var _c = useState(false), isPaused = _c[0], setIsPaused = _c[1];
+    var _d = useState(false), isRunning = _d[0], setIsRunning = _d[1];
+    var _e = useState(false), isInitialized = _e[0], setIsInitialized = _e[1];
+    var intervalRef = useRef(null);
     useEffect(function () {
-        var savedStartTime = localStorage.getItem("startTimeBilling");
-        var savedElapsedTime = parseInt(localStorage.getItem("elapsedTime") || "0", 10);
-        if (savedStartTime) {
-            var elapsed = differenceInSeconds(new Date(), new Date(savedStartTime)) + savedElapsedTime;
-            setTime(elapsed);
-            setStarted(true);
+        setIsInitialized(true);
+    }, []);
+    useEffect(function () {
+        setTime(getSavedElapsedTime());
+    }, []);
+    useEffect(function () {
+        if (!isInitialized)
+            return;
+        if (resetTimer)
+            setTime(0);
+        setIsPaused(false);
+        setIsRunning(false);
+        clearTimerData();
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
         }
-        else {
-            setTime(savedElapsedTime);
+        else if (pauseTimer) {
+            pauseTimerHandler();
         }
-    }, []);
-    // Update the timer every second if started
+        else if (!pauseTimer && !isRunning && isPaused) {
+            startTimerHandler();
+        }
+    }, [resetTimer]);
     useEffect(function () {
-        var interval;
-        if (started) {
-            interval = setInterval(function () {
-                var savedStartTime = localStorage.getItem("startTimeBilling");
-                if (savedStartTime) {
-                    var elapsed = differenceInSeconds(new Date(), new Date(savedStartTime)) + parseInt(localStorage.getItem("elapsedTime") || "0", 10);
-                    setTime(elapsed);
-                }
-            }, 1000); // Update every second
+        if (isRunning && !isPaused) {
+            intervalRef.current = setInterval(function () {
+                setTime(function (prevTime) {
+                    var newElapsedTime = prevTime + 1;
+                    updateElapsedTime(newElapsedTime);
+                    return newElapsedTime;
+                });
+            }, 1000);
         }
-        return function () { return clearInterval(interval); };
-    }, [started]);
-    var handleButtonClick = function () {
-        if (started) {
-            // Stop timer and reset
-            setIsStarted && setIsStarted(false);
-            var savedStartTime = localStorage.getItem("startTimeBilling");
-            if (savedStartTime) {
-                var finalElapsedTime = differenceInSeconds(new Date(), new Date(savedStartTime)) + parseInt(localStorage.getItem("elapsedTime") || "0", 10);
-                onEnd(finalElapsedTime); // Callback with final time
-            }
-            localStorage.removeItem("startTimeBilling");
-            localStorage.removeItem("elapsedTime");
-            setTime(0);
-            setStarted(false);
+        else if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+        return function () {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+        };
+    }, [isRunning, isPaused]);
+    useEffect(function () {
+        if (!isInitialized)
+            return;
+        if (resetTimer) {
+            pauseTimerHandler();
+        }
+        else if (!pauseTimer && !resetTimer) {
+            startTimerHandler();
+        }
+        else if (pauseTimer) {
+            pauseTimerHandler();
+        }
+    }, [pauseTimer, resetTimer]);
+    // Gestion de reprise de chrono en cas de refresh de page
+    useEffect(function () {
+        var savedElapsedTime = getSavedElapsedTime();
+        var savedIsRunning = localStorage.getItem(LOCAL_STORAGE_KEYS.IS_RUNNING) === "true";
+        setTime(savedElapsedTime);
+        if (savedIsRunning && savedElapsedTime > 0) {
+            setIsRunning(true);
+            setIsStarted && setIsStarted(true);
         }
         else {
-            // Start timer from 0
+            setIsRunning(false);
+            setIsStarted && setIsStarted(false);
+        }
+    }, [setIsStarted]);
+    // Mise a jour du temps de session
+    var updateElapsedTime = function (elapsedTime) {
+        localStorage.setItem(LOCAL_STORAGE_KEYS.ELAPSED_TIME, elapsedTime.toString());
+    };
+    // Cleanup du localStorage après un reset de session de travail
+    var clearTimerData = function () {
+        localStorage.removeItem(LOCAL_STORAGE_KEYS.START_TIME);
+        localStorage.removeItem(LOCAL_STORAGE_KEYS.ELAPSED_TIME);
+        localStorage.removeItem(LOCAL_STORAGE_KEYS.IS_RUNNING);
+    };
+    var getSavedElapsedTime = function () {
+        return parseInt(localStorage.getItem(LOCAL_STORAGE_KEYS.ELAPSED_TIME) || "0", 10);
+    };
+    var getCurrentElapsedTime = function () {
+        var savedStartTime = localStorage.getItem(LOCAL_STORAGE_KEYS.START_TIME);
+        if (savedStartTime) {
+            return getSavedElapsedTime();
+        }
+        return getSavedElapsedTime();
+    };
+    var startTimerHandler = function () {
+        if (!isRunning) {
+            localStorage.setItem(LOCAL_STORAGE_KEYS.START_TIME, new Date().toISOString());
+            localStorage.setItem(LOCAL_STORAGE_KEYS.IS_RUNNING, "true");
+            setTime(getSavedElapsedTime());
+            setIsRunning(true);
             setIsStarted && setIsStarted(true);
-            localStorage.setItem("startTimeBilling", new Date().toISOString());
-            setStarted(true);
         }
     };
-    // Format the time in hours, minutes, and seconds
+    var pauseTimerHandler = function () {
+        if (isRunning) {
+            var elapsed = getCurrentElapsedTime();
+            updateElapsedTime(elapsed);
+            localStorage.setItem(LOCAL_STORAGE_KEYS.IS_RUNNING, "false");
+            setTime(elapsed);
+            setIsRunning(false);
+            setIsStarted && setIsStarted(false);
+        }
+    };
+    var handleButtonClick = function () {
+        if (!isRunning) {
+            startTimerHandler();
+        }
+        else {
+            pauseTimerHandler();
+            onEnd(getCurrentElapsedTime());
+        }
+    };
     var formatTime = function (seconds) {
         var hrs = Math.floor(seconds / 3600);
         var mins = Math.floor((seconds % 3600) / 60);
         var secs = seconds % 60;
-        return "".concat(hrs.toString().padStart(2, "0"), ":").concat(mins.toString().padStart(2, "0"), ":").concat(secs.toString().padStart(2, "0"));
+        return "".concat(hrs.toString().padStart(2, "0"), ":").concat(mins
+            .toString()
+            .padStart(2, "0"), ":").concat(secs.toString().padStart(2, "0"));
     };
-    return React.createElement("button", { onClick: handleButtonClick, className: "billing-button-wrapper ".concat(started ? "isRunning" : "") },
+    return (React.createElement("button", { onClick: handleButtonClick, className: "billing-button-wrapper ".concat(isRunning ? "isRunning" : "") },
         React.createElement("i", { className: "allaw-icon-clock" }),
-        formatTime(time),
-        React.createElement("svg", { width: "11px", height: "11px", viewBox: "-0.5 0 7 7", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("g", { id: "Page-1", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
-                React.createElement("g", { id: "Dribbble-Light-Preview", transform: "translate(-347.000000, -3766.000000)", fill: "#25BEEB" },
-                    React.createElement("g", { id: "icons", transform: "translate(56.000000, 160.000000)" },
-                        React.createElement("path", { d: "M296.494737,3608.57322 L292.500752,3606.14219 C291.83208,3605.73542 291,3606.25002 291,3607.06891 L291,3611.93095 C291,3612.7509 291.83208,3613.26444 292.500752,3612.85767 L296.494737,3610.42771 C297.168421,3610.01774 297.168421,3608.98319 296.494737,3608.57322", id: "play-[#1003]" }))))));
-}
+        React.createElement("span", { className: "billing-time" }, formatTime(time)),
+        React.createElement("i", { className: isRunning ? "allaw-icon-pause" : "allaw-icon-play", style: { fontSize: "12px", color: "#25BEEB", fontWeight: 800 } })));
+};
 export default BillingCount;
-/*
-
-*/ 

package/dist/components/molecules/stepper/ConfirmationModal.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Stepper.css";
+interface ConfirmationModalProps {
+    show: boolean;
+    title: string;
+    description: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    isDanger?: boolean;
+}
+declare const ConfirmationModal: React.FC<ConfirmationModalProps>;
+export default ConfirmationModal;

package/dist/components/molecules/stepper/ConfirmationModal.js

@@ -0,0 +1,26 @@
+import React from "react";
+import "./Stepper.css";
+import PrimaryButton from "../../atoms/buttons/PrimaryButton";
+import SecondaryButton from "../../atoms/buttons/SecondaryButton";
+import Heading from "../../atoms/typography/Heading";
+import Paragraph from "../../atoms/typography/Paragraph";
+var ConfirmationModal = function (_a) {
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b;
+    var handleOutsideClick = function (e) {
+        if (e.target === e.currentTarget) {
+            onCancel();
+        }
+    };
+    if (!show)
+        return null;
+    return (React.createElement("div", { className: "confirmation-modal", onClick: handleOutsideClick },
+        React.createElement("div", { className: "confirmation-modal-content" },
+            React.createElement("div", { className: "confirmation-modal-heading-wrapper" },
+                React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
+            React.createElement("div", { className: "confirmation-modal-paragraph-wrapper" },
+                React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: "confirmation-modal-paragraph" })),
+            React.createElement("div", { className: "confirmation-modal-buttons" },
+                React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true }),
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, endIconName: "allaw-icon-check", endIcon: true })))));
+};
+export default ConfirmationModal;

package/dist/components/molecules/stepper/Stepper.css

@@ -103,3 +103,75 @@
     border-bottom-right-radius: 0;
   }
 }
+
+.stepper-container.modal-active {
+  position: relative;
+}
+
+.stepper-container.modal-active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  filter: brightness(50%);
+  z-index: 1000;
+  pointer-events: none;
+  border-radius: 16px;
+}
+
+.confirmation-modal {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1100;
+}
+
+.confirmation-modal-content {
+  background: #fff;
+  border-radius: 16px;
+  padding: 2rem;
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.confirmation-modal-heading-wrapper {
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: start;
+}
+
+.confirmation-modal-paragraph-wrapper {
+  margin-bottom: 2.5rem;
+}
+
+.confirmation-modal-paragraph {
+  text-align: left;
+}
+
+.confirmation-modal-buttons {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.confirmation-modal-buttons button {
+  flex: 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/components/molecules/stepper/Stepper.d.ts

@@ -30,6 +30,16 @@ export interface StepperProps {
     showProgressBar?: boolean[];
     onClose?: () => void;
     validateStep?: (step: number) => boolean | Promise<boolean>;
+    confirmationModal?: {
+        show: boolean;
+        title: string;
+        description: string;
+        confirmLabel: string;
+        cancelLabel: string;
+        isDanger: boolean;
+    };
+    onModalConfirm?: () => void;
+    onModalCancel?: () => void;
 }
 declare const Stepper: React.FC<StepperProps>;
 export default Stepper;

package/dist/components/molecules/stepper/Stepper.js

@@ -43,9 +43,11 @@ import "../../../styles/icons.css";
 import ProgressBar from "../../atoms/progressBars/ProgressBar";
 import PrimaryButton from "../../atoms/buttons/PrimaryButton";
 import SecondaryButton from "../../atoms/buttons/SecondaryButton";
+import ConfirmationModal from "./ConfirmationModal";
 var Stepper = function (_a) {
-    var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? [] : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, children = _a.children, _d = _a.secondaryButton, secondaryButton = _d === void 0 ? [] : _d, _e = _a.primaryButton, primaryButton = _e === void 0 ? [] : _e, _f = _a.showProgressBar, showProgressBar = _f === void 0 ? [] : _f, onClose = _a.onClose, validateStep = _a.validateStep;
-    var _g = useState(false), isVisible = _g[0], setIsVisible = _g[1];
+    var _b, _c, _d, _e, _f;
+    var steps = _a.steps, currentStep = _a.currentStep, _g = _a.startIcon, startIcon = _g === void 0 ? [] : _g, _h = _a.endIcon, endIcon = _h === void 0 ? true : _h, children = _a.children, _j = _a.secondaryButton, secondaryButton = _j === void 0 ? [] : _j, _k = _a.primaryButton, primaryButton = _k === void 0 ? [] : _k, _l = _a.showProgressBar, showProgressBar = _l === void 0 ? [] : _l, onClose = _a.onClose, validateStep = _a.validateStep, confirmationModal = _a.confirmationModal, onModalCancel = _a.onModalCancel, onModalConfirm = _a.onModalConfirm;
+    var _m = useState(false), isVisible = _m[0], setIsVisible = _m[1];
     var portalContainerRef = useRef(null);
     var stepperContainerRef = useRef(null);
     useEffect(function () {
@@ -93,7 +95,6 @@ var Stepper = function (_a) {
     var currentShowProgressBar = showProgressBar[currentStep - 1] !== false;
     var currentShowStartIcon = startIcon[currentStep - 1];
     var handleClose = useCallback(function () {
-        setIsVisible(false);
         if (onClose) {
             onClose();
         }
@@ -107,7 +108,7 @@ var Stepper = function (_a) {
         }
     }, [handleClose]);
     var stepperContent = (React.createElement("div", { className: "stepper-overlay ".concat(isVisible ? "visible" : ""), onMouseDown: handleMouseDown },
-        React.createElement("div", { className: "stepper-container", onClick: function (e) { return e.stopPropagation(); }, ref: stepperContainerRef },
+        React.createElement("div", { className: "stepper-container ".concat((confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.show) ? "modal-active" : ""), onClick: function (e) { return e.stopPropagation(); }, ref: stepperContainerRef },
             React.createElement(ProgressBar, { steps: steps, currentStep: currentStep, startIcon: currentShowStartIcon, endIcon: endIcon, onStartIconClick: handlePrevious, onEndIconClick: handleClose, showProgressBar: currentShowProgressBar }),
             React.createElement("div", { className: "stepper-content" }, children[currentStep - 1]),
             React.createElement("div", { className: "stepper-buttons ".concat(!(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && !(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show)
@@ -116,7 +117,8 @@ var Stepper = function (_a) {
                 (currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
                     React.createElement(SecondaryButton, { fullWidth: true, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, currentStep); } }))),
                 (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
-                    React.createElement(PrimaryButton, { fullWidth: true, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, disabled: currentPrimaryButton.disabled, onClick: handleNext })))))));
+                    React.createElement(PrimaryButton, { fullWidth: true, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, disabled: currentPrimaryButton.disabled, onClick: handleNext })))),
+            React.createElement(ConfirmationModal, { show: (_b = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.show) !== null && _b !== void 0 ? _b : false, title: (_c = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.title) !== null && _c !== void 0 ? _c : "Confirmation", description: (_d = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.description) !== null && _d !== void 0 ? _d : "Voulez-vous continuer ?", confirmLabel: (_e = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.confirmLabel) !== null && _e !== void 0 ? _e : "Confirmer", cancelLabel: (_f = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.cancelLabel) !== null && _f !== void 0 ? _f : "Annuler", onConfirm: onModalConfirm !== null && onModalConfirm !== void 0 ? onModalConfirm : (function () { }), onCancel: onModalCancel !== null && onModalCancel !== void 0 ? onModalCancel : (function () { }), isDanger: confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.isDanger }))));
     return portalContainerRef.current && isVisible
         ? ReactDOM.createPortal(stepperContent, portalContainerRef.current)
         : null;

package/dist/stories/Header.stories.d.ts

@@ -7,9 +7,9 @@ declare const meta: {
         layout: string;
     };
     args: {
-        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogin: import("@vitest/spy").Mock<[], void>;
+        onLogout: import("@vitest/spy").Mock<[], void>;
+        onCreateAccount: import("@vitest/spy").Mock<[], void>;
     };
 };
 export default meta;

package/dist/styles/icons.css

@@ -293,6 +293,25 @@ li {
   content: "\e950";
   color: #0072c6;
 }
+.allaw-icon-microsoft .path1:before {
+  content: "\e95a";
+  color: rgb(242, 80, 34);
+}
+.allaw-icon-microsoft .path2:before {
+  content: "\e95b";
+  margin-left: -1em;
+  color: rgb(0, 164, 239);
+}
+.allaw-icon-microsoft .path3:before {
+  content: "\e95c";
+  margin-left: -1em;
+  color: rgb(127, 186, 0);
+}
+.allaw-icon-microsoft .path4:before {
+  content: "\e95d";
+  margin-left: -1em;
+  color: rgb(255, 185, 0);
+}
 .allaw-icon-google-calendar .path1:before {
   content: "\e951";
   color: rgb(255, 255, 255);
@@ -300,22 +319,22 @@ li {
 .allaw-icon-google-calendar .path2:before {
   content: "\e952";
   margin-left: -1em;
-  color: rgb(66, 133, 244);
+  color: rgb(234, 67, 53);
 }
 .allaw-icon-google-calendar .path3:before {
   content: "\e954";
   margin-left: -1em;
-  color: rgb(25, 103, 210);
+  color: rgb(24, 128, 56);
 }
 .allaw-icon-google-calendar .path4:before {
   content: "\e955";
   margin-left: -1em;
-  color: rgb(251, 188, 4);
+  color: rgb(25, 103, 210);
 }
 .allaw-icon-google-calendar .path5:before {
   content: "\e956";
   margin-left: -1em;
-  color: rgb(24, 128, 56);
+  color: rgb(251, 188, 4);
 }
 .allaw-icon-google-calendar .path6:before {
   content: "\e957";
@@ -325,33 +344,16 @@ li {
 .allaw-icon-google-calendar .path7:before {
   content: "\e958";
   margin-left: -1em;
-  color: rgb(234, 67, 53);
+  color: rgb(66, 133, 244);
 }
 .allaw-icon-google-calendar .path8:before {
   content: "\e959";
   margin-left: -1em;
-  color: none;
-}
-.allaw-icon-microsoft .path1:before {
-  content: "\e95a";
-  color: rgb(242, 80, 34);
-}
-.allaw-icon-microsoft .path2:before {
-  content: "\e95b";
-  margin-left: -1em;
-  color: rgb(0, 164, 239);
-}
-.allaw-icon-microsoft .path3:before {
-  content: "\e95c";
-  margin-left: -1em;
-  color: rgb(127, 186, 0);
-}
-.allaw-icon-microsoft .path4:before {
-  content: "\e95d";
-  margin-left: -1em;
-  color: rgb(255, 185, 0);
+  color: rgb(66, 133, 244);
 }
-.allaw-icon-microsoftoutlook:before {
+.allaw-icon-play:before {
   content: "\e953";
-  color: #0072c6;
+}
+.allaw-icon-pause:before {
+  content: "\e95e";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",