@loczer/storefront-sdk 0.196.0 → 0.197.0

package/dist/components/BookingPeriodSelector/components/BookingEndTimeField.js

@@ -23,11 +23,11 @@ var d = (e, t, n) => new Intl.NumberFormat(t, {
 		})] }) : a ?? o ?? void 0;
 		return {
 			value: e.value,
-			label: e.label,
+			label: e.value,
 			disabled: r,
 			description: u
 		};
-	}), M = j.some((e) => !e.disabled), N = v !== "local" && (v !== "ready" || !M), P = v === "loading" ? f.timeSlotsLoading : v === "error" ? f.timeSlotsLoadError : v === "ready" && !M ? f.timeSlotsUnavailable : f.endTime, F = j.find((e) => !e.disabled)?.value, I = o(h ?? F ?? null), L = t();
+	}), M = j.some((e) => !e.disabled), N = v !== "local" && (v !== "ready" || !M), P = v === "loading" ? "" : v === "error" ? f.timeSlotsLoadError : v === "ready" && !M ? f.timeSlotsUnavailable : f.endTime, F = j.find((e) => !e.disabled)?.value, I = o(h ?? F ?? null), L = t();
 	return a(() => {
 		y || (I.current = h ?? F ?? null);
 	}, [

package/dist/components/BookingPeriodSelector/components/BookingStartTimeField.js

@@ -23,11 +23,11 @@ var d = (e, t, n) => new Intl.NumberFormat(t, {
 		})] }) : i ?? a ?? void 0;
 		return {
 			value: e.value,
-			label: e.label,
+			label: e.value,
 			disabled: n,
 			description: o
 		};
-	}), A = k.some((e) => !e.disabled), j = v !== "local" && (v !== "ready" || !A), M = v === "loading" ? f.timeSlotsLoading : v === "error" ? f.timeSlotsLoadError : v === "ready" && !A ? f.timeSlotsUnavailable : f.startTime, N = k.find((e) => !e.disabled)?.value, P = o(h ?? N ?? null), F = t();
+	}), A = k.some((e) => !e.disabled), j = v !== "local" && (v !== "ready" || !A), M = v === "loading" ? "" : v === "error" ? f.timeSlotsLoadError : v === "ready" && !A ? f.timeSlotsUnavailable : f.startTime, N = k.find((e) => !e.disabled)?.value, P = o(h ?? N ?? null), F = t();
 	return a(() => {
 		y || (P.current = h ?? N ?? null);
 	}, [

package/dist/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookingTimeSlotsStatus.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.tsx"],"names":[],"mappings":"AAMA,KAAK,2BAA2B,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,wBAGpC,2BAA2B,mDA4D7B,CAAA"}
+{"version":3,"file":"BookingTimeSlotsStatus.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.tsx"],"names":[],"mappings":"AAMA,KAAK,2BAA2B,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,wBAGpC,2BAA2B,mDA0D7B,CAAA"}

package/dist/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.js

@@ -6,14 +6,14 @@ import { cn as i } from "@rpcbase/ui";
 var a = ({ className: a, testId: o = "booking-time-slots-status" }) => {
 	let { labels: s, startTimeSlotsStatus: c, endTimeSlotsStatus: l, retryStartTimeSlots: u, retryEndTimeSlots: d, hasAvailableTimeSlots: f } = t();
 	if (c === "local" && l === "local") return null;
-	let p = c === "error" || l === "error", m = c === "loading" || l === "loading";
-	if (!p && !m && f) return null;
-	let h = p ? s.timeSlotsLoadError : m ? s.timeSlotsLoading : s.timeSlotsUnavailable;
+	let p = c === "error" || l === "error";
+	if (!p && (c === "loading" || l === "loading" || f)) return null;
+	let m = p ? s.timeSlotsLoadError : s.timeSlotsUnavailable;
 	return /* @__PURE__ */ r("div", {
 		role: p ? "alert" : "status",
 		"data-testid": o,
 		className: i("flex flex-wrap items-center gap-2 rounded-md border px-3 py-2 text-sm", p ? "border-destructive/40 bg-destructive/5 text-destructive" : "border-border bg-muted/40 text-muted-foreground", a),
-		children: [/* @__PURE__ */ n("span", { children: h }), p ? /* @__PURE__ */ n(e, {
+		children: [/* @__PURE__ */ n("span", { children: m }), p ? /* @__PURE__ */ n(e, {
 			type: "button",
 			variant: "outline",
 			size: "sm",

package/dist/components/BookingPeriodSelector/components/internal/BookingHourPickerField.d.ts

@@ -2,6 +2,6 @@ import { HourPickerFieldProps } from './StorefrontHourPickerField';
 type BookingHourPickerFieldProps = HourPickerFieldProps & {
     portalContainer?: HTMLElement | null;
 };
-export declare const BookingHourPickerField: ({ options, className, inputClassName, portalContainer, ...props }: BookingHourPickerFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BookingHourPickerField: ({ className, inputClassName, portalContainer, ...props }: BookingHourPickerFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=BookingHourPickerField.d.ts.map

package/dist/components/BookingPeriodSelector/components/internal/BookingHourPickerField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookingHourPickerField.d.ts","sourceRoot":"","sources":["../../../../../src/components/BookingPeriodSelector/components/internal/BookingHourPickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,6BAA6B,CAAA;AAIpC,KAAK,2BAA2B,GAAG,oBAAoB,GAAG;IACxD,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,mEAMpC,2BAA2B,4CAmB7B,CAAA"}
+{"version":3,"file":"BookingHourPickerField.d.ts","sourceRoot":"","sources":["../../../../../src/components/BookingPeriodSelector/components/internal/BookingHourPickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,6BAA6B,CAAA;AAIpC,KAAK,2BAA2B,GAAG,oBAAoB,GAAG;IACxD,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,0DAKpC,2BAA2B,4CAO7B,CAAA"}

package/dist/components/BookingPeriodSelector/components/internal/BookingHourPickerField.js

@@ -2,25 +2,11 @@ import { cn as e } from "../../../../lib/utils.js";
 import { HourPickerField as t } from "./StorefrontHourPickerField.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/BookingPeriodSelector/components/internal/BookingHourPickerField.tsx
-var r = ({ options: r, className: i, inputClassName: a, portalContainer: o, ...s }) => {
-	let c = r.map((e) => ({
-		...e,
-		selectedLabel: /* @__PURE__ */ n("span", {
-			"data-slot": "booking-hour-picker-desktop-selected-label",
-			children: e.label
-		}),
-		compactSelectedLabel: /* @__PURE__ */ n("span", {
-			"data-slot": "booking-hour-picker-mobile-selected-label",
-			children: e.value
-		})
-	}));
-	return /* @__PURE__ */ n(t, {
-		...s,
-		options: c,
-		className: e("w-full min-w-0", i),
-		inputClassName: e("min-w-0", a),
-		portalContainer: o
-	});
-};
+var r = ({ className: r, inputClassName: i, portalContainer: a, ...o }) => /* @__PURE__ */ n(t, {
+	...o,
+	className: e("w-full min-w-0", r),
+	inputClassName: e("min-w-0", i),
+	portalContainer: a
+});
 //#endregion
 export { r as BookingHourPickerField };

package/dist/components/BookingPeriodSelector/components/internal/StorefrontHourPickerField.d.ts

@@ -2,8 +2,6 @@ import * as React from "react";
 export type HourPickerOption = {
     value: string;
     label: string;
-    selectedLabel?: React.ReactNode;
-    compactSelectedLabel?: React.ReactNode;
     disabled?: boolean;
     description?: React.ReactNode;
 };

package/dist/components/BookingPeriodSelector/components/internal/StorefrontHourPickerField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorefrontHourPickerField.d.ts","sourceRoot":"","sources":["../../../../../src/components/BookingPeriodSelector/components/internal/StorefrontHourPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,CAAA;AAyYD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACrC,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,EACP,WAA2B,EAC3B,SAAS,EACT,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,EACV,eAAe,GAChB,EAAE,oBAAoB,2CA6ctB;yBA9de,eAAe;;;AAke/B,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GAAG;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA6YD,wBAAgB,eAAe,CAAC,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAMlF;yBANe,eAAe"}
+{"version":3,"file":"StorefrontHourPickerField.d.ts","sourceRoot":"","sources":["../../../../../src/components/BookingPeriodSelector/components/internal/StorefrontHourPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,CAAA;AAyYD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CACrC,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,EACP,WAA2B,EAC3B,SAAS,EACT,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,EACV,eAAe,GAChB,EAAE,oBAAoB,2CA0ctB;yBA3de,eAAe;;;AA+d/B,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GAAG;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAyYD,wBAAgB,eAAe,CAAC,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAMlF;yBANe,eAAe"}

package/dist/components/BookingPeriodSelector/components/internal/StorefrontHourPickerField.js

@@ -280,7 +280,7 @@ function T({ id: o, value: s, onChange: l, onValueUpdate: u, options: d, placeho
 		let e = j.current, t = z.current;
 		!(e instanceof HTMLElement) || !t || H(m(e, t, D));
 	}, [D]);
-	t.useLayoutEffect(() => {
+	return t.useLayoutEffect(() => {
 		if (!G || _ || typeof window > "u") return;
 		Q();
 		let e = window.requestAnimationFrame(Q);
@@ -333,9 +333,7 @@ function T({ id: o, value: s, onChange: l, onValueUpdate: u, options: d, placeho
 			return;
 		}
 		r > e.scrollTop + e.clientHeight && (e.scrollTop = Math.max(0, r - e.clientHeight));
-	}, [I, G]);
-	let $ = d.find((e) => e.value === s);
-	return /* @__PURE__ */ r("div", {
+	}, [I, G]), /* @__PURE__ */ r("div", {
 		"data-slot": "hours-picker-input",
 		className: e("w-[150px]", h),
 		ref: R,
@@ -348,7 +346,6 @@ function T({ id: o, value: s, onChange: l, onValueUpdate: u, options: d, placeho
 				onValueUpdate: X,
 				onCommit: Z,
 				options: d,
-				selectedLabel: $?.selectedLabel,
 				disabled: _,
 				readOnly: v,
 				open: G,
@@ -392,7 +389,7 @@ function T({ id: o, value: s, onChange: l, onValueUpdate: u, options: d, placeho
 									"data-value": t.value,
 									"data-state": n ? "checked" : "unchecked",
 									"data-disabled": t.disabled ? "" : void 0,
-									className: e("relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", I === t.value && "bg-accent text-accent-foreground"),
+									className: e("relative flex w-full select-none items-center justify-center rounded-sm px-2 py-1.5 text-center text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", I === t.value && "bg-accent text-accent-foreground"),
 									onMouseDown: (e) => {
 										e.preventDefault();
 									},
@@ -412,7 +409,7 @@ function T({ id: o, value: s, onChange: l, onValueUpdate: u, options: d, placeho
 											className: "h-4 w-4"
 										}) : null
 									}), /* @__PURE__ */ i("div", {
-										className: "flex flex-col",
+										className: "flex w-full min-w-0 flex-col items-center",
 										children: [/* @__PURE__ */ r("span", { children: t.label }), t.description == null ? null : /* @__PURE__ */ r("span", {
 											"data-slot": "description",
 											className: "text-xs text-muted-foreground",
@@ -502,7 +499,7 @@ function E({ id: s, value: l, onChange: u, onValueUpdate: d, options: f, placeho
 			e.removeEventListener("pointerdown", n, !0), t.removeEventListener("keydown", r, !0);
 		};
 	}, [H, U]);
-	let q = f.find((e) => e.value === l), J = q?.compactSelectedLabel ?? q?.selectedLabel ?? q?.label ?? l, Y = f.findIndex((e) => e.value === R), X = Y >= 0 ? `${j}-option-${Y}` : void 0;
+	let q = f.find((e) => e.value === l)?.label ?? l, J = f.findIndex((e) => e.value === R), Y = J >= 0 ? `${j}-option-${J}` : void 0;
 	return /* @__PURE__ */ i("div", {
 		"data-slot": "hours-picker-field",
 		className: e("w-[150px]", g),
@@ -515,7 +512,7 @@ function E({ id: s, value: l, onChange: u, onValueUpdate: d, options: f, placeho
 			"aria-expanded": H,
 			"aria-controls": `${j}-content`,
 			"aria-haspopup": "listbox",
-			"aria-activedescendant": H ? X : void 0,
+			"aria-activedescendant": H ? Y : void 0,
 			disabled: v,
 			"data-testid": E,
 			"data-hydrated": O ? "true" : void 0,
@@ -549,7 +546,7 @@ function E({ id: s, value: l, onChange: u, onValueUpdate: d, options: f, placeho
 			},
 			children: [/* @__PURE__ */ r("span", {
 				className: "line-clamp-1 text-left",
-				children: l ? J : h
+				children: l ? q : h
 			}), /* @__PURE__ */ r(o, {
 				"aria-hidden": !0,
 				className: "h-4 w-4 shrink-0 opacity-50"
@@ -586,7 +583,7 @@ function E({ id: s, value: l, onChange: u, onValueUpdate: d, options: f, placeho
 								"data-value": t.value,
 								"data-state": o ? "checked" : "unchecked",
 								"data-disabled": t.disabled ? "" : void 0,
-								className: e("relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", s && "bg-accent text-accent-foreground"),
+								className: e("relative flex w-full select-none items-center justify-center rounded-sm px-2 py-1.5 text-center text-sm outline-none cursor-pointer", t.disabled && "pointer-events-none opacity-50", s && "bg-accent text-accent-foreground"),
 								onMouseDown: (e) => {
 									e.preventDefault();
 								},
@@ -600,7 +597,7 @@ function E({ id: s, value: l, onChange: u, onValueUpdate: d, options: f, placeho
 										className: "h-4 w-4"
 									}) : null
 								}), /* @__PURE__ */ i("div", {
-									className: "flex flex-col",
+									className: "flex w-full min-w-0 flex-col items-center",
 									children: [/* @__PURE__ */ r("span", { children: t.label }), t.description == null ? null : /* @__PURE__ */ r("span", {
 										"data-slot": "description",
 										className: "text-xs text-muted-foreground",
@@ -624,206 +621,193 @@ function D({ compact: e = !1, ...t }) {
 	return r(e ? E : T, { ...t });
 }
 D.displayName = "HourPickerField";
-function O({ id: n, placeholder: a, value: s, onValueUpdate: c, onCommit: u, options: d, selectedLabel: f, disabled: p, readOnly: m, open: g, setOpen: x, inputClassName: S, triggerTestId: w, isHydrated: T, highlightedValueRef: E, setHighlightedValue: D, markKeyboardNavigation: O, inputRef: k, onDraftValueHandlerChange: A }) {
-	let j = t.useRef(!1), M = t.useRef(!1), N = t.useRef(!1), P = t.useRef(null), F = t.useRef(null), I = t.useRef(!1), [L, R] = t.useState(() => s || ""), [z, B] = t.useState(!1);
-	t.useEffect(() => (A((e) => {
-		R(e), B(!1);
+function O({ id: n, placeholder: a, value: s, onValueUpdate: c, onCommit: u, options: d, disabled: f, readOnly: p, open: m, setOpen: g, inputClassName: x, triggerTestId: S, isHydrated: w, highlightedValueRef: T, setHighlightedValue: E, markKeyboardNavigation: D, inputRef: O, onDraftValueHandlerChange: k }) {
+	let A = t.useRef(!1), j = t.useRef(!1), M = t.useRef(!1), N = t.useRef(null), P = t.useRef(null), F = t.useRef(!1), [I, L] = t.useState(() => s || "");
+	t.useEffect(() => (k((e) => {
+		L(e);
 	}), () => {
-		A(null);
-	}), [A]);
-	let V = t.useCallback((e) => {
-		let t = E.current ?? s ?? "", n = d.findIndex((e) => e.value === t);
+		k(null);
+	}), [k]);
+	let R = t.useCallback((e) => {
+		let t = T.current ?? s ?? "", n = d.findIndex((e) => e.value === t);
 		n === -1 && (n = e === 1 ? -1 : d.length);
 		for (let t = n + e; t >= 0 && t < d.length; t += e) {
 			let e = d[t];
 			if (b(e)) {
-				D(e.value), P.current = e.value, R(e.value), B(!1), c(e.value);
+				E(e.value), N.current = e.value, L(e.value), c(e.value);
 				return;
 			}
 		}
 	}, [
-		E,
+		T,
 		c,
 		d,
-		D,
+		E,
 		s
 	]);
 	t.useEffect(() => {
-		j.current || (R(s || ""), B(!1));
+		A.current || L(s || "");
 	}, [s]), t.useEffect(() => {
-		F.current = _(L);
-	}, [L]), t.useEffect(() => {
-		s === null && (I.current = !1);
+		P.current = _(I);
+	}, [I]), t.useEffect(() => {
+		s === null && (F.current = !1);
 	}, [s]);
-	let H = s != null && f != null && !z, U = e("peer flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "transition-[border-color,box-shadow]", !L && "text-muted-foreground", H && "text-transparent", g && "ring-2 ring-primary ring-offset-2", "[&_[data-slot='description']]:hidden", S);
+	let z = e("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-left text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "transition-[border-color,box-shadow]", !I && "text-muted-foreground", m && "ring-2 ring-primary ring-offset-2", "[&_[data-slot='description']]:hidden", x);
 	return /* @__PURE__ */ i("div", {
 		className: "relative",
-		children: [
-			/* @__PURE__ */ r(l, {
-				id: n,
-				"data-testid": w,
-				"data-hydrated": T ? "true" : void 0,
-				type: "text",
-				disabled: p,
-				readOnly: m,
-				inputRef: k,
-				autoComplete: "off",
-				mask: [{
-					mask: "00:00",
-					lazy: !0
-				}, {
-					mask: "0:00",
-					lazy: !0
-				}],
-				dispatch: (e, t) => {
-					let n = (t.value + e).replace(/\D/g, "");
-					if (n.length <= 2 || n.length >= 4) return t.compiledMasks[0];
-					let r = h(Number(n.slice(0, 2)));
-					return d.some((e) => e.value.startsWith(`${r}:`)) ? t.compiledMasks[0] : t.compiledMasks[1];
-				},
-				placeholder: a,
-				value: L,
-				className: U,
-				onAccept: (e, t, n) => {
-					if (!n) return;
-					B(!0);
-					let r = typeof e == "string" ? e : String(e ?? ""), i = r.replace(/\D/g, ""), a = _(r);
-					if (F.current !== a) {
-						if (F.current = a, R(r), i.length !== 0) {
-							I.current = !1;
-							return;
-						}
-						s && !I.current && (I.current = !0, u(null));
+		children: [/* @__PURE__ */ r(l, {
+			id: n,
+			"data-testid": S,
+			"data-hydrated": w ? "true" : void 0,
+			type: "text",
+			disabled: f,
+			readOnly: p,
+			inputRef: O,
+			autoComplete: "off",
+			mask: [{
+				mask: "00:00",
+				lazy: !0
+			}, {
+				mask: "0:00",
+				lazy: !0
+			}],
+			dispatch: (e, t) => {
+				let n = (t.value + e).replace(/\D/g, "");
+				if (n.length <= 2 || n.length >= 4) return t.compiledMasks[0];
+				let r = h(Number(n.slice(0, 2)));
+				return d.some((e) => e.value.startsWith(`${r}:`)) ? t.compiledMasks[0] : t.compiledMasks[1];
+			},
+			placeholder: a,
+			value: I,
+			className: z,
+			onAccept: (e, t, n) => {
+				if (!n) return;
+				let r = typeof e == "string" ? e : String(e ?? ""), i = r.replace(/\D/g, ""), a = _(r);
+				if (P.current !== a) {
+					if (P.current = a, L(r), i.length !== 0) {
+						F.current = !1;
+						return;
 					}
-				},
-				onComplete: (e, t, n) => {
-					if (!n) return;
-					let r = typeof e == "string" ? e : String(e ?? "");
-					if (P.current === r) {
-						P.current = null;
+					s && !F.current && (F.current = !0, u(null));
+				}
+			},
+			onComplete: (e, t, n) => {
+				if (!n) return;
+				let r = typeof e == "string" ? e : String(e ?? "");
+				if (N.current === r) {
+					N.current = null;
+					return;
+				}
+				let i = v(r, d);
+				if (!i) return;
+				if (i.selectableValue) {
+					if (E(i.selectableValue), L(i.selectableValue), s === i.selectableValue) return;
+					u(i.selectableValue);
+					return;
+				}
+				let a = y(i.parsed);
+				if (a == null) return;
+				let o = C(a, d);
+				o && E(o.value);
+			},
+			onPointerDown: () => {
+				j.current = !0, !f && (m || g(!0));
+			},
+			onMouseDown: (e) => {
+				j.current = !0, M.current = typeof document < "u" && document.activeElement === e.currentTarget, !f && (m || g(!0));
+			},
+			onClick: () => {
+				f || m || g(!0);
+			},
+			onKeyDown: (e) => {
+				if (!f) {
+					if (e.key === "Tab" && m && !e.defaultPrevented) {
+						g(!1);
 						return;
 					}
-					let i = v(r, d);
-					if (!i) return;
-					if (i.selectableValue) {
-						if (D(i.selectableValue), R(i.selectableValue), B(!1), s === i.selectableValue) return;
-						u(i.selectableValue);
+					if (e.key === "Escape") {
+						if (!m) return;
+						e.preventDefault(), g(!1);
 						return;
 					}
-					let a = y(i.parsed);
-					if (a == null) return;
-					let o = C(a, d);
-					o && D(o.value);
-				},
-				onPointerDown: () => {
-					M.current = !0, !p && (g || x(!0));
-				},
-				onMouseDown: (e) => {
-					M.current = !0, N.current = typeof document < "u" && document.activeElement === e.currentTarget, !p && (g || x(!0));
-				},
-				onClick: () => {
-					p || g || x(!0);
-				},
-				onKeyDown: (e) => {
-					if (!p) {
-						if (e.key === "Tab" && g && !e.defaultPrevented) {
-							x(!1);
+					if (!m && !e.defaultPrevented && (e.key.length === 1 || e.key === "Backspace" || e.key === "Delete") && !e.ctrlKey && !e.metaKey && !e.altKey && g(!0), e.key === "ArrowDown" || e.key === "ArrowUp") {
+						if (D(), e.preventDefault(), !m) {
+							g(!0);
 							return;
 						}
-						if (e.key === "Escape") {
-							if (!g) return;
-							e.preventDefault(), x(!1);
-							return;
-						}
-						if (!g && !e.defaultPrevented && (e.key.length === 1 || e.key === "Backspace" || e.key === "Delete") && !e.ctrlKey && !e.metaKey && !e.altKey && x(!0), e.key === "ArrowDown" || e.key === "ArrowUp") {
-							if (O(), e.preventDefault(), !g) {
-								x(!0);
-								return;
-							}
-							V(e.key === "ArrowDown" ? 1 : -1);
+						R(e.key === "ArrowDown" ? 1 : -1);
+						return;
+					}
+					if (e.key === "Enter") {
+						D();
+						let t = v(I, d);
+						if (!t) {
+							if (!m || I.trim() !== "") return;
+							let t = d.find((e) => e.value === T.current), n = (b(t) ? t?.value : void 0) ?? d.find((e) => b(e))?.value;
+							if (!n) return;
+							e.preventDefault(), E(n), L(n), u(n), g(!1);
 							return;
 						}
-						if (e.key === "Enter") {
-							O();
-							let t = v(L, d);
-							if (!t) {
-								if (!g || L.trim() !== "") return;
-								let t = d.find((e) => e.value === E.current), n = (b(t) ? t?.value : void 0) ?? d.find((e) => b(e))?.value;
-								if (!n) return;
-								e.preventDefault(), D(n), R(n), B(!1), u(n), x(!1);
-								return;
-							}
-							if (t.selectableValue) {
-								e.preventDefault(), D(t.selectableValue), R(t.selectableValue), B(!1), u(t.selectableValue), x(!1);
-								return;
-							}
-							let n = y(t.parsed);
-							if (n == null) return;
-							let r = C(n, d);
-							if (!r) return;
-							e.preventDefault(), D(r.value), R(r.value), B(!1), u(r.value), x(!1);
+						if (t.selectableValue) {
+							e.preventDefault(), E(t.selectableValue), L(t.selectableValue), u(t.selectableValue), g(!1);
 							return;
 						}
-					}
-				},
-				onFocus: (e) => {
-					let t = !M.current || !N.current;
-					if (M.current = !1, N.current = !1, j.current = !0, t) {
-						let t = e.currentTarget;
-						requestAnimationFrame(() => t.select());
-					}
-					p || g || x(!0);
-				},
-				onBlur: () => {
-					j.current = !1, B(!1);
-					let e = L.trim();
-					if (!e) {
-						R(s || "");
-						return;
-					}
-					let t = v(e, d);
-					if (!t) {
-						R(s || "");
+						let n = y(t.parsed);
+						if (n == null) return;
+						let r = C(n, d);
+						if (!r) return;
+						e.preventDefault(), E(r.value), L(r.value), u(r.value), g(!1);
 						return;
 					}
-					if (!t.selectableValue) {
-						R(s || "");
-						return;
-					}
-					R(t.selectableValue), s !== t.selectableValue && u(t.selectableValue);
 				}
-			}),
-			H ? /* @__PURE__ */ r("span", {
-				"aria-hidden": "true",
-				"data-slot": "hours-picker-input-selected-label",
-				className: e("pointer-events-none absolute inset-y-0 left-3 right-10 flex min-w-0 items-center bg-background text-base text-foreground md:text-sm", p && "opacity-50"),
-				children: /* @__PURE__ */ r("span", {
-					className: "min-w-0 truncate",
-					children: f
-				})
-			}) : null,
-			/* @__PURE__ */ r("button", {
-				type: "button",
-				tabIndex: -1,
-				disabled: p,
-				"data-slot": "hours-picker-input-toggle",
-				className: e("absolute right-1 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"),
-				"aria-label": g ? "Close time picker" : "Open time picker",
-				onPointerDown: (e) => {
-					e.preventDefault();
-				},
-				onMouseDown: (e) => {
-					e.preventDefault();
-				},
-				onClick: () => {
-					p || x(!g);
-				},
-				children: /* @__PURE__ */ r(o, {
-					"aria-hidden": !0,
-					className: "size-4"
-				})
+			},
+			onFocus: (e) => {
+				let t = !j.current || !M.current;
+				if (j.current = !1, M.current = !1, A.current = !0, t) {
+					let t = e.currentTarget;
+					requestAnimationFrame(() => t.select());
+				}
+				f || m || g(!0);
+			},
+			onBlur: () => {
+				A.current = !1;
+				let e = I.trim();
+				if (!e) {
+					L(s || "");
+					return;
+				}
+				let t = v(e, d);
+				if (!t) {
+					L(s || "");
+					return;
+				}
+				if (!t.selectableValue) {
+					L(s || "");
+					return;
+				}
+				L(t.selectableValue), s !== t.selectableValue && u(t.selectableValue);
+			}
+		}), /* @__PURE__ */ r("button", {
+			type: "button",
+			tabIndex: -1,
+			disabled: f,
+			"data-slot": "hours-picker-input-toggle",
+			className: e("absolute right-1 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"),
+			"aria-label": m ? "Close time picker" : "Open time picker",
+			onPointerDown: (e) => {
+				e.preventDefault();
+			},
+			onMouseDown: (e) => {
+				e.preventDefault();
+			},
+			onClick: () => {
+				f || g(!m);
+			},
+			children: /* @__PURE__ */ r(o, {
+				"aria-hidden": !0,
+				className: "size-4"
 			})
-		]
+		})]
 	});
 }
 //#endregion

package/dist/index.d.ts

@@ -2010,8 +2010,6 @@ declare type HeaderProps = {
 declare type HourPickerOption = {
     value: string;
     label: string;
-    selectedLabel?: React_2.ReactNode;
-    compactSelectedLabel?: React_2.ReactNode;
     disabled?: boolean;
     description?: React_2.ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loczer/storefront-sdk",
-  "version": "0.196.0",
+  "version": "0.197.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"