@ews-admin/global-design-system 1.18.0 → 1.21.0

package/dist/index.js

@@ -52,7 +52,7 @@ function buildUrls(environment) {
     return {
         bffUrl: `https://${prefix}api.${domain}/bff/api/v1`,
         loginBffUrl: `https://${prefix}api.${domain}/login-bff/api/v1`,
-        appUrl: `https://${prefix}app.${domain}`,
+        appUrl: environment === "prod" ? `https://${prefix}${domain}` : `https://${prefix}app.${domain}`,
         loginUrl: `https://${prefix}login.${domain}`,
         dashboardUrl: `https://${prefix}dashboard.${domain}`,
         adminUrl: `https://${prefix}admin.${domain}`,
@@ -34164,6 +34164,7 @@ function classNames(...args) {
 var styles_default = ".reactEasyCrop_Container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  user-select: none;\n  touch-action: none;\n  cursor: move;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n  max-width: unset; /* prevent global img/video reset rules from constraining the cropper media */\n}\n\n.reactEasyCrop_Contain {\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n  width: 100%;\n  height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n  width: auto;\n  height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  box-sizing: border-box;\n  box-shadow: 0 0 0 9999em;\n  color: rgba(0, 0, 0, 0.5);\n  overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n  border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 0;\n  bottom: 0;\n  left: 33.33%;\n  right: 33.33%;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 33.33%;\n  bottom: 33.33%;\n  left: 0;\n  right: 0;\n  border-left: 0;\n  border-right: 0;\n}\n";
 //#endregion
 //#region src/Cropper.tsx
+const RESIZE_EMIT_DEBOUNCE_TIME = 250;
 const MIN_ZOOM = 1;
 const MAX_ZOOM = 3;
 const KEYBOARD_STEP = 1;
@@ -34202,11 +34203,13 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 		this.rafDragTimeout = null;
 		this.rafPinchTimeout = null;
 		this.wheelTimer = null;
+		this.resizeEmitTimer = null;
 		this.currentDoc = typeof document !== "undefined" ? document : null;
 		this.currentWindow = typeof window !== "undefined" ? window : null;
 		this.resizeObserver = null;
 		this.previousCropSize = null;
 		this.isInitialized = false;
+		this.dragInteractionSource = null;
 		this.state = {
 			cropSize: null,
 			hasWheelJustStarted: false,
@@ -34220,10 +34223,13 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 					isFirstResize = false;
 					return;
 				}
-				this.computeSizes();
+				this.computeSizes({ isResizeTriggered: true });
 			});
 			this.resizeObserver.observe(this.containerRef);
 		};
+		this.onWindowResize = () => {
+			this.computeSizes({ isResizeTriggered: true });
+		};
 		this.preventZoomSafari = (e) => e.preventDefault();
 		this.cleanEvents = () => {
 			if (!this.currentDoc) return;
@@ -34260,7 +34266,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 				this.props.onZoomChange && this.props.onZoomChange(zoom);
 			}
 		};
-		this.computeSizes = () => {
+		this.computeSizes = ({ isResizeTriggered = false } = {}) => {
 			const mediaRef = this.imageRef.current || this.videoRef.current;
 			if (mediaRef && this.containerRef) {
 				var _this$imageRef$curren, _this$videoRef$curren, _this$imageRef$curren2, _this$videoRef$curren2, _this$state$cropSize, _this$state$cropSize2;
@@ -34307,7 +34313,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 				if (this.props.setMediaSize) this.props.setMediaSize(this.mediaSize);
 				const cropSize = this.props.cropSize ? this.props.cropSize : getCropSize(this.mediaSize.width, this.mediaSize.height, this.containerRect.width, this.containerRect.height, this.props.aspect, this.props.rotation);
 				if (((_this$state$cropSize = this.state.cropSize) === null || _this$state$cropSize === void 0 ? void 0 : _this$state$cropSize.height) !== cropSize.height || ((_this$state$cropSize2 = this.state.cropSize) === null || _this$state$cropSize2 === void 0 ? void 0 : _this$state$cropSize2.width) !== cropSize.width) this.props.onCropSizeChange && this.props.onCropSizeChange(cropSize);
-				this.setState({ cropSize }, this.recomputeCropPosition);
+				this.setState({ cropSize }, () => this.recomputeCropPosition({ isResizeTriggered }));
 				if (this.props.setCropSize) this.props.setCropSize(cropSize);
 				return cropSize;
 			}
@@ -34327,7 +34333,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			this.currentDoc.addEventListener("mousemove", this.onMouseMove);
 			this.currentDoc.addEventListener("mouseup", this.onDragStopped);
 			this.saveContainerPosition();
-			this.onDragStart(Cropper.getMousePoint(e));
+			this.onDragStart(Cropper.getMousePoint(e), "mouse");
 		};
 		this.onMouseMove = (e) => this.onDrag(Cropper.getMousePoint(e));
 		this.onScroll = (e) => {
@@ -34343,7 +34349,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			this.currentDoc.addEventListener("touchend", this.onDragStopped);
 			this.saveContainerPosition();
 			if (e.touches.length === 2) this.onPinchStart(e);
-			else if (e.touches.length === 1) this.onDragStart(Cropper.getTouchPoint(e.touches[0]));
+			else if (e.touches.length === 1) this.onDragStart(Cropper.getTouchPoint(e.touches[0]), "touch");
 		};
 		this.onTouchMove = (e) => {
 			e.preventDefault();
@@ -34372,14 +34378,15 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 		this.onGestureEnd = (e) => {
 			this.cleanEvents();
 		};
-		this.onDragStart = ({ x, y }) => {
+		this.onDragStart = ({ x, y }, source) => {
 			var _this$props$onInterac, _this$props;
 			this.dragStartPosition = {
 				x,
 				y
 			};
 			this.dragStartCrop = _objectSpread2({}, this.props.crop);
-			(_this$props$onInterac = (_this$props = this.props).onInteractionStart) === null || _this$props$onInterac === void 0 || _this$props$onInterac.call(_this$props);
+			this.dragInteractionSource = source;
+			(_this$props$onInterac = (_this$props = this.props).onInteractionStart) === null || _this$props$onInterac === void 0 || _this$props$onInterac.call(_this$props, { source });
 		};
 		this.onDrag = ({ x, y }) => {
 			if (!this.currentWindow) return;
@@ -34398,11 +34405,12 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			});
 		};
 		this.onDragStopped = () => {
-			var _this$props$onInterac2, _this$props2;
+			var _this$props$onInterac2, _this$props2, _this$dragInteraction;
 			this.isTouching = false;
 			this.cleanEvents();
 			this.emitCropData();
-			(_this$props$onInterac2 = (_this$props2 = this.props).onInteractionEnd) === null || _this$props$onInterac2 === void 0 || _this$props$onInterac2.call(_this$props2);
+			(_this$props$onInterac2 = (_this$props2 = this.props).onInteractionEnd) === null || _this$props$onInterac2 === void 0 || _this$props$onInterac2.call(_this$props2, { source: (_this$dragInteraction = this.dragInteractionSource) !== null && _this$dragInteraction !== void 0 ? _this$dragInteraction : "mouse" });
+			this.dragInteractionSource = null;
 		};
 		this.onWheel = (e) => {
 			if (!this.currentWindow) return;
@@ -34414,12 +34422,12 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			this.setNewZoom(newZoom, point, { shouldUpdatePosition: true });
 			if (!this.state.hasWheelJustStarted) this.setState({ hasWheelJustStarted: true }, () => {
 				var _this$props$onInterac3, _this$props3;
-				return (_this$props$onInterac3 = (_this$props3 = this.props).onInteractionStart) === null || _this$props$onInterac3 === void 0 ? void 0 : _this$props$onInterac3.call(_this$props3);
+				return (_this$props$onInterac3 = (_this$props3 = this.props).onInteractionStart) === null || _this$props$onInterac3 === void 0 ? void 0 : _this$props$onInterac3.call(_this$props3, { source: "wheel" });
 			});
 			if (this.wheelTimer) clearTimeout(this.wheelTimer);
 			this.wheelTimer = this.currentWindow.setTimeout(() => this.setState({ hasWheelJustStarted: false }, () => {
 				var _this$props$onInterac4, _this$props4;
-				return (_this$props$onInterac4 = (_this$props4 = this.props).onInteractionEnd) === null || _this$props$onInterac4 === void 0 ? void 0 : _this$props$onInterac4.call(_this$props4);
+				return (_this$props$onInterac4 = (_this$props4 = this.props).onInteractionEnd) === null || _this$props$onInterac4 === void 0 ? void 0 : _this$props$onInterac4.call(_this$props4, { source: "wheel" });
 			}), 250);
 		};
 		this.getPointOnContainer = ({ x, y }, containerTopLeft) => {
@@ -34456,6 +34464,10 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			return computeCroppedArea(this.props.restrictPosition ? restrictPosition(this.props.crop, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : this.props.crop, this.mediaSize, this.state.cropSize, this.getAspect(), this.props.zoom, this.props.rotation, this.props.restrictPosition);
 		};
 		this.emitCropData = () => {
+			if (this.resizeEmitTimer) {
+				clearTimeout(this.resizeEmitTimer);
+				this.resizeEmitTimer = null;
+			}
 			const cropData = this.getCropData();
 			if (!cropData) return;
 			const { croppedAreaPercentages, croppedAreaPixels } = cropData;
@@ -34468,7 +34480,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			const { croppedAreaPercentages, croppedAreaPixels } = cropData;
 			if (this.props.onCropAreaChange) this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
 		};
-		this.recomputeCropPosition = () => {
+		this.recomputeCropPosition = ({ isResizeTriggered = false } = {}) => {
 			var _this$previousCropSiz, _this$previousCropSiz2;
 			if (!this.state.cropSize) return;
 			let adjustedCrop = this.props.crop;
@@ -34485,7 +34497,15 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			const newPosition = this.props.restrictPosition ? restrictPosition(adjustedCrop, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : adjustedCrop;
 			this.previousCropSize = this.state.cropSize;
 			this.props.onCropChange(newPosition);
-			this.emitCropData();
+			if (isResizeTriggered) this.debouncedEmitCropData();
+			else this.emitCropData();
+		};
+		this.debouncedEmitCropData = () => {
+			if (!this.currentWindow) return;
+			if (this.resizeEmitTimer) clearTimeout(this.resizeEmitTimer);
+			this.resizeEmitTimer = this.currentWindow.setTimeout(() => {
+				this.emitCropData();
+			}, RESIZE_EMIT_DEBOUNCE_TIME);
 		};
 		this.onKeyDown = (event) => {
 			const { crop, onCropChange, keyboardStep, zoom, rotation } = this.props;
@@ -34515,7 +34535,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			if (this.props.restrictPosition) newCrop = restrictPosition(newCrop, this.mediaSize, this.state.cropSize, zoom, rotation);
 			if (!event.repeat) {
 				var _this$props$onInterac5, _this$props5;
-				(_this$props$onInterac5 = (_this$props5 = this.props).onInteractionStart) === null || _this$props$onInterac5 === void 0 || _this$props$onInterac5.call(_this$props5);
+				(_this$props$onInterac5 = (_this$props5 = this.props).onInteractionStart) === null || _this$props$onInterac5 === void 0 || _this$props$onInterac5.call(_this$props5, { source: "keyboard" });
 			}
 			onCropChange(newCrop);
 		};
@@ -34531,7 +34551,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 				default: return;
 			}
 			this.emitCropData();
-			(_this$props$onInterac6 = (_this$props6 = this.props).onInteractionEnd) === null || _this$props$onInterac6 === void 0 || _this$props$onInterac6.call(_this$props6);
+			(_this$props$onInterac6 = (_this$props6 = this.props).onInteractionEnd) === null || _this$props$onInterac6 === void 0 || _this$props$onInterac6.call(_this$props6, { source: "keyboard" });
 		};
 	}
 	componentDidMount() {
@@ -34540,7 +34560,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 			if (this.containerRef.ownerDocument) this.currentDoc = this.containerRef.ownerDocument;
 			if (this.currentDoc.defaultView) this.currentWindow = this.currentDoc.defaultView;
 			this.initResizeObserver();
-			if (typeof window.ResizeObserver === "undefined") this.currentWindow.addEventListener("resize", this.computeSizes);
+			if (typeof window.ResizeObserver === "undefined") this.currentWindow.addEventListener("resize", this.onWindowResize);
 			this.props.zoomWithScroll && this.containerRef.addEventListener("wheel", this.onWheel, { passive: false });
 			this.containerRef.addEventListener("gesturestart", this.onGestureStart);
 		}
@@ -34560,8 +34580,9 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 	componentWillUnmount() {
 		var _this$resizeObserver;
 		if (!this.currentDoc || !this.currentWindow) return;
-		if (typeof window.ResizeObserver === "undefined") this.currentWindow.removeEventListener("resize", this.computeSizes);
+		if (typeof window.ResizeObserver === "undefined") this.currentWindow.removeEventListener("resize", this.onWindowResize);
 		(_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
+		if (this.resizeEmitTimer) clearTimeout(this.resizeEmitTimer);
 		if (this.containerRef) this.containerRef.removeEventListener("gesturestart", this.preventZoomSafari);
 		if (this.styleRef) {
 			var _this$styleRef$parent;
@@ -34610,7 +34631,7 @@ var Cropper$1 = class Cropper extends React__namespace.Component {
 		const pointB = Cropper.getTouchPoint(e.touches[1]);
 		this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
 		this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
-		this.onDragStart(getCenter(pointA, pointB));
+		this.onDragStart(getCenter(pointA, pointB), "touch");
 	}
 	onPinchMove(e) {
 		if (!this.currentDoc || !this.currentWindow) return;
@@ -35129,6 +35150,12 @@ const TagList = ({ items, maxVisible = DEFAULT_MAX, showMoreLabel, showLessLabel
     return (jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [visible.map((label, i) => renderTag ? (renderTag(label, i)) : (jsxRuntime.jsx(Tag, { label: label, variant: variant }, i))), hasMore && !expanded && (jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "..." })), hasMore && (jsxRuntime.jsx("button", { onClick: handleToggle, className: "text-xs text-ews-primary hover:underline", children: expanded ? showLessLabel : showMoreLabel }))] }));
 };
 
+/**
+ * Full-width payment reminder banner (red gradient) used above the app
+ * content when a licence payment is due soon or overdue.
+ */
+const PaymentDueBanner = ({ title, subtitle, warning, ctaLabel, onCtaClick, onDismiss, dismissLabel = "Close", }) => (jsxRuntime.jsx("div", { "data-testid": "payment-banner", className: "overflow-hidden bg-gradient-to-r from-red-600 to-red-700 shadow-lg", children: jsxRuntime.jsx("div", { className: "px-6 py-8 sm:px-8", children: jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 sm:flex-row sm:items-center sm:justify-between sm:space-y-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [jsxRuntime.jsx(TriangleAlert, { className: "w-8 h-8 text-white shrink-0" }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("h3", { className: "text-2xl font-bold text-white", children: title }), subtitle && (jsxRuntime.jsx("p", { className: "mt-2 text-base text-red-100", children: subtitle })), warning && (jsxRuntime.jsx("p", { className: "mt-1 text-sm font-medium text-red-200", children: warning }))] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col flex-shrink-0 gap-3 sm:flex-row sm:gap-4 sm:items-center", children: [jsxRuntime.jsx("button", { onClick: onCtaClick, className: "w-full px-8 py-3 text-base font-semibold text-red-600 bg-white rounded-lg shadow-sm transition-all duration-200 sm:w-auto hover:bg-red-50 hover:shadow-md", children: ctaLabel }), onDismiss && (jsxRuntime.jsx("button", { onClick: onDismiss, className: "self-start p-2 rounded-full transition-colors bg-white/10 hover:bg-white/20 sm:self-auto", "aria-label": dismissLabel, children: jsxRuntime.jsx(X, { className: "w-5 h-5 text-white" }) }))] })] }) }) }));
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, specialties: availableSpecialties, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, title = "Medical Specialties", label = "Select Specialties", getSelectedCountText, }) => {
     const [filteredSpecialties, setFilteredSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -39539,6 +39566,7 @@ exports.PauseOctagon = OctagonPause;
 exports.PauseOctagonIcon = OctagonPause;
 exports.PawPrint = PawPrint;
 exports.PawPrintIcon = PawPrint;
+exports.PaymentDueBanner = PaymentDueBanner;
 exports.PcCase = PcCase;
 exports.PcCaseIcon = PcCase;
 exports.Pen = Pen;