@wistia/ui 0.25.10 → 0.26.0-beta.11ebca9f.285b827

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.25.10
+ * @license @wistia/ui v0.26.0-beta.11ebca9f.285b827
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -5036,9 +5036,6 @@ const ZoomOutIcon = (props) => /* @__PURE__ */ jsx("svg", {
 });
 //#endregion
 //#region src/components/Icon/iconMap.ts
-/**
-* This file is auto-generated by the generateIconMap script on 4/22/2026.
-*/
 const iconMap = {
 	"ab-test": AbTestIcon,
 	accessibility: AccessibilityIcon,
@@ -5338,7 +5335,7 @@ const StyledIcon = styled.svg`
 * Note that icons should not be used directly for interactivity.
 * If you need an interactive element, use IconButton.
 */
-const Icon = ({ useInlineStyles = true, invertColor, colorScheme = "inherit", size = "lg", style, type, ...props }) => {
+const IconComponent = ({ useInlineStyles = true, invertColor, colorScheme = "inherit", size = "lg", style, type, ...props }) => {
 	const responsiveSize = useResponsiveProp(size);
 	if (isNil(type)) throw new Error("An Icon component requires a `type` prop to be provided");
 	if (isNil(iconMap[type])) throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
@@ -5364,7 +5361,8 @@ const Icon = ({ useInlineStyles = true, invertColor, colorScheme = "inherit", si
 		color: iconColor
 	});
 };
-Icon.displayName = "Icon_UI";
+IconComponent.displayName = "Icon_UI";
+const Icon = IconComponent;
 //#endregion
 //#region src/components/Link/Link.tsx
 const generateHref = (href, type, disabled) => {
@@ -5977,7 +5975,7 @@ Badge.displayName = "Badge_UI";
 //#region src/private/helpers/makePolymorphic/makePolymorphic.tsx
 /**
 * makePolymorphic takes a component (typically a forwardRef component) and returns a new version
-* that supports polymorphism via a `renderAs` prop. The returned component’s types automatically
+* that supports polymorphism via a `renderAs` prop. The returned component's types automatically
 * merge the intrinsic props of the rendered element with the custom props of the original
 * component, while including support for children and refs.
 *
@@ -9799,11 +9797,11 @@ const Menu = forwardRef(({ align = "start", children, disabled = false, compact
 			modal: false,
 			...controlProps,
 			children: [/* @__PURE__ */ jsx(Menu$1.Trigger, { render: isNotUndefined(trigger) ? trigger : /* @__PURE__ */ jsx(Button, {
+				...triggerProps,
 				ref,
 				disabled,
 				forceState: isOpen ? "active" : void 0,
 				rightIcon: /* @__PURE__ */ jsx(Icon, { type: "caret-down" }),
-				...triggerProps,
 				children: label
 			}) }), /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
 				align,
@@ -10286,6 +10284,680 @@ const Divider = ({ orientation = "horizontal", inset = "space-00", ...props }) =
 	});
 };
 Divider.displayName = "Divider_UI";
+const SECONDS_PER_HOUR = 3600;
+const TEN_HOURS = 36e3;
+const ONE_HUNDREDTH_OF_A_SECOND = .01;
+const MAX_TIME = TEN_HOURS - ONE_HUNDREDTH_OF_A_SECOND;
+const NUMBER_STRINGS = [
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9"
+];
+//#endregion
+//#region src/components/DurationInput/durationFormatting.ts
+const hoursFormatter = new Intl.NumberFormat("en-US", {
+	maximumFractionDigits: 0,
+	useGrouping: false
+});
+const minutesFormatter = new Intl.NumberFormat("en-US", {
+	maximumFractionDigits: 0,
+	minimumIntegerDigits: 1
+});
+const tensOfMinutesFormatter = new Intl.NumberFormat("en-US", {
+	maximumFractionDigits: 0,
+	minimumIntegerDigits: 2
+});
+const getSecondsFormatter = (decimalUnitLength) => {
+	return new Intl.NumberFormat("en-US", {
+		maximumFractionDigits: decimalUnitLength,
+		minimumFractionDigits: decimalUnitLength,
+		minimumIntegerDigits: 2
+	});
+};
+const isValidHour = (number) => Number.isInteger(number) && number >= 0;
+const isValidMinute = (number) => Number.isInteger(number) && number >= 0 && number <= 59;
+const isValidSecond = (number) => Number.isFinite(number) && number >= 0 && number < 60;
+const durationInputValueToSeconds = (formattedTimeString) => {
+	const segments = formattedTimeString.split(":");
+	if (segments.length <= 3) {
+		const [seconds = 0, minutes = 0, hours = 0] = segments.reverse().map(Number);
+		if (isValidSecond(seconds) && isValidMinute(minutes) && isValidHour(hours)) return hours * SECONDS_PER_HOUR + minutes * 60 + seconds;
+	}
+	throw new SyntaxError(`Invalid time (${formattedTimeString})`);
+};
+const getFormattedHours = ({ hours, maxUnit }) => {
+	if (maxUnit !== "hours") return null;
+	return hoursFormatter.format(hours);
+};
+const getFormattedMinutes = ({ minutes, maxUnit }) => {
+	if (maxUnit === "seconds") return null;
+	if (maxUnit === "minutes") return minutesFormatter.format(minutes);
+	return tensOfMinutesFormatter.format(minutes);
+};
+const getFormattedSeconds = ({ seconds, decimalUnitLength }) => {
+	return getSecondsFormatter(decimalUnitLength).format(seconds);
+};
+const convertSecondsToHMSUnits = (durationInSeconds) => {
+	const seconds = durationInSeconds % 60;
+	const remainingDurationInMinutes = (durationInSeconds - seconds) / 60;
+	const minutes = remainingDurationInMinutes % 60;
+	return {
+		hours: (remainingDurationInMinutes - minutes) / 60,
+		minutes,
+		seconds
+	};
+};
+const secondsToDurationInputValue = ({ seconds: durationInSeconds, maxUnit, decimalUnitLength }) => {
+	const { hours, minutes, seconds } = convertSecondsToHMSUnits(durationInSeconds);
+	return [
+		getFormattedHours({
+			hours,
+			maxUnit
+		}),
+		getFormattedMinutes({
+			minutes,
+			maxUnit
+		}),
+		getFormattedSeconds({
+			seconds,
+			decimalUnitLength
+		})
+	].filter(Boolean).join(":");
+};
+const getMaxUnit = (seconds) => {
+	if (seconds >= 3600) return "hours";
+	if (seconds >= 600) return "tens-of-minutes";
+	if (seconds >= 60) return "minutes";
+	return "seconds";
+};
+const clampSeconds = ({ maxSeconds, minSeconds, seconds }) => {
+	return Math.min(Math.max(seconds, minSeconds), maxSeconds);
+};
+const roundSeconds = (seconds, decimalUnitLength) => {
+	const multiplier = decimalUnitLength === 0 ? 1 : 100;
+	return Math.round(seconds * multiplier) / multiplier;
+};
+const getDurationBounds = ({ decimalUnitLength, maxSeconds, minSeconds }) => {
+	const roundedMaxSeconds = roundSeconds(maxSeconds, decimalUnitLength);
+	const roundedMinSeconds = roundSeconds(minSeconds, decimalUnitLength);
+	if (roundedMaxSeconds < roundedMinSeconds) return {
+		maxSeconds: roundedMaxSeconds,
+		minSeconds: roundedMaxSeconds
+	};
+	return {
+		maxSeconds: roundedMaxSeconds,
+		minSeconds: roundedMinSeconds
+	};
+};
+//#endregion
+//#region src/components/DurationInput/durationSelection.ts
+const getEmptySelectionRanges = () => ({
+	hours: {
+		start: null,
+		end: null
+	},
+	"tens-of-minutes": {
+		start: null,
+		end: null
+	},
+	minutes: {
+		start: null,
+		end: null
+	},
+	seconds: {
+		start: null,
+		end: null
+	},
+	"hundredths-of-seconds": {
+		start: null,
+		end: null
+	}
+});
+const getSegmentRange = ({ segment, offset }) => {
+	return {
+		nextOffset: offset + segment.length + 1,
+		range: {
+			start: offset,
+			end: offset + segment.length
+		}
+	};
+};
+const getSecondsRanges = ({ segment, offset }) => {
+	const decimalSeparatorIndex = segment.indexOf(".");
+	const ranges = {
+		seconds: {
+			start: offset,
+			end: offset + (decimalSeparatorIndex === -1 ? segment.length : decimalSeparatorIndex)
+		},
+		"hundredths-of-seconds": {
+			start: null,
+			end: null
+		}
+	};
+	if (decimalSeparatorIndex !== -1 && decimalSeparatorIndex < segment.length - 1) ranges["hundredths-of-seconds"] = {
+		start: offset + decimalSeparatorIndex + 1,
+		end: offset + segment.length
+	};
+	return ranges;
+};
+const getSelectionRanges = ({ inputValue, maxUnit }) => {
+	const ranges = getEmptySelectionRanges();
+	const segments = inputValue.split(":");
+	let offset = 0;
+	if (maxUnit === "hours") {
+		const [hours = "", minutes = "", seconds = ""] = segments;
+		const hoursResult = getSegmentRange({
+			segment: hours,
+			offset
+		});
+		ranges.hours = hoursResult.range;
+		offset = hoursResult.nextOffset;
+		const minutesResult = getSegmentRange({
+			segment: minutes,
+			offset
+		});
+		ranges["tens-of-minutes"] = minutesResult.range;
+		offset = minutesResult.nextOffset;
+		Object.assign(ranges, getSecondsRanges({
+			segment: seconds,
+			offset
+		}));
+		return ranges;
+	}
+	if (maxUnit === "tens-of-minutes") {
+		const [minutes = "", seconds = ""] = segments;
+		const minutesResult = getSegmentRange({
+			segment: minutes,
+			offset
+		});
+		ranges["tens-of-minutes"] = minutesResult.range;
+		offset = minutesResult.nextOffset;
+		Object.assign(ranges, getSecondsRanges({
+			segment: seconds,
+			offset
+		}));
+		return ranges;
+	}
+	if (maxUnit === "minutes") {
+		const [minutes = "", seconds = ""] = segments;
+		const minutesResult = getSegmentRange({
+			segment: minutes,
+			offset
+		});
+		ranges.minutes = minutesResult.range;
+		offset = minutesResult.nextOffset;
+		Object.assign(ranges, getSecondsRanges({
+			segment: seconds,
+			offset
+		}));
+		return ranges;
+	}
+	const [seconds = ""] = segments;
+	Object.assign(ranges, getSecondsRanges({
+		segment: seconds,
+		offset
+	}));
+	return ranges;
+};
+//#endregion
+//#region src/components/DurationInput/types.ts
+const DURATION_UNITS = [
+	"hours",
+	"hundredths-of-seconds",
+	"minutes",
+	"seconds",
+	"tens-of-minutes"
+];
+const isDurationUnit = (unit) => {
+	return isNotNil(unit) && DURATION_UNITS.some((durationUnit) => durationUnit === unit);
+};
+//#endregion
+//#region src/components/DurationInput/useDurationInput.ts
+const useDurationInput = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeValueInSeconds, valueInSeconds }) => {
+	const [inputSelection, setInputSelection] = useState(null);
+	const [anyKeyIsDown, setAnyKeyIsDown] = useState(false);
+	const inputRef = useRef(null);
+	const secondDigitMightBeTypedNext = useRef(false);
+	const { maxSeconds: roundedMaxSeconds, minSeconds: roundedMinSeconds } = useMemo(() => getDurationBounds({
+		decimalUnitLength,
+		maxSeconds,
+		minSeconds
+	}), [
+		decimalUnitLength,
+		maxSeconds,
+		minSeconds
+	]);
+	const maxUnit = useMemo(() => getMaxUnit(roundedMaxSeconds), [roundedMaxSeconds]);
+	const boundedValueInSeconds = useMemo(() => clampSeconds({
+		maxSeconds: roundedMaxSeconds,
+		minSeconds: roundedMinSeconds,
+		seconds: valueInSeconds
+	}), [
+		roundedMaxSeconds,
+		roundedMinSeconds,
+		valueInSeconds
+	]);
+	const [inputValue, setInputValue] = useState(() => secondsToDurationInputValue({
+		decimalUnitLength,
+		maxUnit,
+		seconds: boundedValueInSeconds
+	}));
+	const selectionRanges = useMemo(() => getSelectionRanges({
+		inputValue,
+		maxUnit
+	}), [inputValue, maxUnit]);
+	const decimalStep = decimalUnitLength === 0 ? 0 : ONE_HUNDREDTH_OF_A_SECOND;
+	const maybeSetInputValueAndTriggerOnChange = useCallback((candidateInputValue) => {
+		const seconds = durationInputValueToSeconds(candidateInputValue);
+		if (seconds < roundedMinSeconds || seconds > roundedMaxSeconds) return;
+		setInputValue(candidateInputValue);
+		onChangeValueInSeconds(seconds);
+	}, [
+		onChangeValueInSeconds,
+		roundedMaxSeconds,
+		roundedMinSeconds
+	]);
+	const selectUnit = useCallback((unit) => {
+		if (unit == null) {
+			setInputSelection(null);
+			return;
+		}
+		const { start, end } = selectionRanges[unit];
+		if (start == null || end == null) {
+			setInputSelection(null);
+			return;
+		}
+		inputRef.current?.setSelectionRange(start, end);
+		setInputSelection({
+			start,
+			end
+		});
+	}, [selectionRanges]);
+	const getUnitForSelectionIndices = useCallback(({ selectionStart, selectionEnd }) => {
+		const result = Object.entries(selectionRanges).find(([, { start, end }]) => {
+			if (start === null || end === null) return false;
+			return selectionStart >= start && selectionEnd <= end;
+		})?.[0] ?? null;
+		if (!isDurationUnit(result)) return null;
+		return result;
+	}, [selectionRanges]);
+	const selectedUnit = useMemo(() => {
+		if (inputSelection == null) return null;
+		const { start: selectionStart, end: selectionEnd } = inputSelection;
+		const foundUnit = getUnitForSelectionIndices({
+			selectionStart,
+			selectionEnd
+		});
+		if (!isDurationUnit(foundUnit)) return null;
+		return foundUnit;
+	}, [getUnitForSelectionIndices, inputSelection]);
+	const selectUnitToRight = useCallback(() => {
+		requestAnimationFrame(() => {
+			if (inputSelection == null) return;
+			const unitToSelect = getUnitForSelectionIndices({
+				selectionEnd: inputSelection.end + 1,
+				selectionStart: inputSelection.end + 1
+			});
+			if (unitToSelect == null) return;
+			selectUnit(unitToSelect);
+		});
+	}, [
+		getUnitForSelectionIndices,
+		inputSelection,
+		selectUnit
+	]);
+	const selectUnitToLeft = useCallback(() => {
+		if (inputSelection == null) return;
+		const unitToSelect = getUnitForSelectionIndices({
+			selectionEnd: inputSelection.start - 1,
+			selectionStart: inputSelection.start - 1
+		});
+		if (unitToSelect == null) return;
+		selectUnit(unitToSelect);
+	}, [
+		getUnitForSelectionIndices,
+		inputSelection,
+		selectUnit
+	]);
+	const incrementBySeconds = useCallback((secondsToIncrementBy) => {
+		const newValue = durationInputValueToSeconds(inputValue) + secondsToIncrementBy;
+		if (newValue > roundedMaxSeconds) return;
+		maybeSetInputValueAndTriggerOnChange(secondsToDurationInputValue({
+			decimalUnitLength,
+			maxUnit,
+			seconds: newValue
+		}));
+	}, [
+		decimalUnitLength,
+		inputValue,
+		maxUnit,
+		maybeSetInputValueAndTriggerOnChange,
+		roundedMaxSeconds
+	]);
+	const decrementBySeconds = useCallback((secondsToDecrementBy) => {
+		const newValue = durationInputValueToSeconds(inputValue) - secondsToDecrementBy;
+		if (newValue < roundedMinSeconds) return;
+		maybeSetInputValueAndTriggerOnChange(secondsToDurationInputValue({
+			decimalUnitLength,
+			maxUnit,
+			seconds: newValue
+		}));
+	}, [
+		decimalUnitLength,
+		inputValue,
+		maxUnit,
+		maybeSetInputValueAndTriggerOnChange,
+		roundedMinSeconds
+	]);
+	const incrementSelectedUnit = useCallback(() => {
+		if (selectedUnit == null) return;
+		if (selectedUnit === "hours") {
+			incrementBySeconds(SECONDS_PER_HOUR);
+			return;
+		}
+		if (selectedUnit === "minutes" || selectedUnit === "tens-of-minutes") {
+			incrementBySeconds(60);
+			return;
+		}
+		if (selectedUnit === "seconds") {
+			incrementBySeconds(1);
+			return;
+		}
+		incrementBySeconds(decimalStep);
+	}, [
+		decimalStep,
+		incrementBySeconds,
+		selectedUnit
+	]);
+	const decrementSelectedUnit = useCallback(() => {
+		if (selectedUnit == null) return;
+		if (selectedUnit === "hours") {
+			decrementBySeconds(SECONDS_PER_HOUR);
+			return;
+		}
+		if (selectedUnit === "minutes" || selectedUnit === "tens-of-minutes") {
+			decrementBySeconds(60);
+			return;
+		}
+		if (selectedUnit === "seconds") {
+			decrementBySeconds(1);
+			return;
+		}
+		decrementBySeconds(decimalStep);
+	}, [
+		decimalStep,
+		decrementBySeconds,
+		selectedUnit
+	]);
+	const setSelectedUnitToZero = useCallback(() => {
+		if (selectedUnit == null || inputSelection == null) return;
+		const textToLeftOfSelection = inputValue.slice(0, inputSelection.start);
+		const textToRightOfSelection = inputValue.slice(inputSelection.end);
+		if (selectedUnit === "hours") {
+			maybeSetInputValueAndTriggerOnChange(`0${textToRightOfSelection}`);
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "tens-of-minutes") {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}00${textToRightOfSelection}`);
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "minutes") {
+			maybeSetInputValueAndTriggerOnChange(`0${textToRightOfSelection}`);
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "seconds") {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}00${textToRightOfSelection}`);
+			selectUnitToRight();
+			return;
+		}
+		maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}${"0".repeat(decimalUnitLength)}`);
+		selectUnitToRight();
+	}, [
+		decimalUnitLength,
+		inputSelection,
+		inputValue,
+		maybeSetInputValueAndTriggerOnChange,
+		selectUnitToRight,
+		selectedUnit
+	]);
+	const onInputSelect = useCallback((event) => {
+		if (anyKeyIsDown) return;
+		const { selectionStart, selectionEnd } = event.currentTarget;
+		if (selectionStart === null || selectionEnd === null) return;
+		selectUnit(getUnitForSelectionIndices({
+			selectionStart,
+			selectionEnd
+		}));
+	}, [
+		anyKeyIsDown,
+		getUnitForSelectionIndices,
+		selectUnit
+	]);
+	const restoreSelectionToSelectedUnit = useCallback(() => {
+		requestAnimationFrame(() => {
+			selectUnit(selectedUnit);
+		});
+	}, [selectUnit, selectedUnit]);
+	const prepareForPossibleSecondDigit = useCallback(() => {
+		secondDigitMightBeTypedNext.current = true;
+		restoreSelectionToSelectedUnit();
+	}, [restoreSelectionToSelectedUnit]);
+	const onTypeNumber = useCallback((number) => {
+		if (inputSelection == null) return;
+		const selectedText = inputValue.slice(inputSelection.start, inputSelection.end);
+		const textToLeftOfSelection = inputValue.slice(0, inputSelection.start);
+		const textToRightOfSelection = inputValue.slice(inputSelection.end);
+		if (selectedUnit === "hours") {
+			maybeSetInputValueAndTriggerOnChange(`${number.toString()}${textToRightOfSelection}`);
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "tens-of-minutes" && number >= 60 / 10 && !secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}0${number.toString()}${textToRightOfSelection}`);
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "tens-of-minutes" && !secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}${number.toString()}0${textToRightOfSelection}`);
+			prepareForPossibleSecondDigit();
+			return;
+		}
+		if (selectedUnit === "tens-of-minutes" && secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}${selectedText[0]}${number.toString()}${textToRightOfSelection}`);
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "minutes") {
+			maybeSetInputValueAndTriggerOnChange(`${number.toString()}${textToRightOfSelection}`);
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "seconds" && number >= 60 / 10 && !secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}0${number.toString()}${textToRightOfSelection}`);
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "seconds" && !secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}${number.toString()}0${textToRightOfSelection}`);
+			prepareForPossibleSecondDigit();
+			return;
+		}
+		if (selectedUnit === "seconds" && secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}${selectedText[0]}${number.toString()}${textToRightOfSelection}`);
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToRight();
+			return;
+		}
+		if (selectedUnit === "hundredths-of-seconds" && !secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}${number.toString()}0`);
+			prepareForPossibleSecondDigit();
+			return;
+		}
+		if (selectedUnit === "hundredths-of-seconds" && secondDigitMightBeTypedNext.current) {
+			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}${selectedText[0]}${number.toString()}`);
+			secondDigitMightBeTypedNext.current = false;
+			restoreSelectionToSelectedUnit();
+		}
+	}, [
+		inputSelection,
+		inputValue,
+		maybeSetInputValueAndTriggerOnChange,
+		prepareForPossibleSecondDigit,
+		restoreSelectionToSelectedUnit,
+		selectUnitToRight,
+		selectedUnit
+	]);
+	const onKeyDown = useCallback((event) => {
+		setAnyKeyIsDown(true);
+		if (inputRef.current == null || inputSelection == null) return;
+		const { start: selectionStart, end: selectionEnd } = inputSelection;
+		const { key } = event;
+		if (key === "ArrowRight") {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToRight();
+			return;
+		}
+		if (key === "ArrowLeft") {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToLeft();
+			return;
+		}
+		if (key === "ArrowUp") {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			incrementSelectedUnit();
+			restoreSelectionToSelectedUnit();
+			return;
+		}
+		if (key === "ArrowDown") {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			decrementSelectedUnit();
+			restoreSelectionToSelectedUnit();
+			return;
+		}
+		if (key === "Tab" && !event.shiftKey && selectionEnd < inputRef.current.value.length) {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToRight();
+			return;
+		}
+		if (key === "Tab" && event.shiftKey && selectionStart > 0) {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToLeft();
+			return;
+		}
+		if (key === ":") {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			selectUnitToRight();
+			return;
+		}
+		if (key === "." && decimalUnitLength > 0) {
+			event.preventDefault();
+			secondDigitMightBeTypedNext.current = false;
+			selectUnit("hundredths-of-seconds");
+			return;
+		}
+		if (NUMBER_STRINGS.includes(key)) {
+			event.preventDefault();
+			onTypeNumber(Number(key));
+			return;
+		}
+		if (key === "Backspace") {
+			event.preventDefault();
+			setSelectedUnitToZero();
+			restoreSelectionToSelectedUnit();
+		}
+	}, [
+		decimalUnitLength,
+		decrementSelectedUnit,
+		incrementSelectedUnit,
+		inputSelection,
+		onTypeNumber,
+		restoreSelectionToSelectedUnit,
+		selectUnit,
+		selectUnitToLeft,
+		selectUnitToRight,
+		setSelectedUnitToZero
+	]);
+	const onKeyUp = useCallback(() => {
+		setAnyKeyIsDown(false);
+	}, []);
+	useEffect(() => {
+		setInputValue(secondsToDurationInputValue({
+			decimalUnitLength,
+			maxUnit,
+			seconds: boundedValueInSeconds
+		}));
+	}, [
+		boundedValueInSeconds,
+		decimalUnitLength,
+		inputValue,
+		maxUnit
+	]);
+	return {
+		inputRef,
+		inputValue,
+		onInputSelect,
+		onKeyDown,
+		onKeyUp
+	};
+};
+//#endregion
+//#region src/components/DurationInput/DurationInput.tsx
+const EXTRA_INPUT_WIDTH_CH = 2;
+const getInputWidth = (inputValue) => {
+	return `calc(${inputValue.length + EXTRA_INPUT_WIDTH_CH}ch + var(--wui-input-horizontal-padding) + var(--wui-input-horizontal-padding))`;
+};
+/**
+* DurationInput lets users edit a duration value using a keyboard-friendly time input.
+*/
+const DurationInput = ({ decimalUnitLength = 2, disabled = false, fullWidth = false, maxSeconds = MAX_TIME, minSeconds = 0, onChangeValueInSeconds, valueInSeconds, onFocus, style, ...props }) => {
+	const { inputRef, inputValue, onInputSelect, onKeyDown, onKeyUp } = useDurationInput({
+		decimalUnitLength,
+		maxSeconds,
+		minSeconds,
+		onChangeValueInSeconds,
+		valueInSeconds
+	});
+	const inputWidth = fullWidth ? void 0 : getInputWidth(inputValue);
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		ref: inputRef,
+		disabled,
+		fullWidth,
+		monospace: true,
+		onChange: () => {},
+		onFocus,
+		onKeyDown,
+		onKeyUp,
+		onSelect: onInputSelect,
+		style: {
+			width: inputWidth,
+			textAlign: "right",
+			...style
+		},
+		type: "text",
+		value: inputValue
+	});
+};
 //#endregion
 //#region src/components/EditableHeading/EditableHeading.tsx
 const StyledInput$1 = styled(Input)`
@@ -12910,7 +13582,7 @@ PopoverClose.displayName = "PopoverClose_UI";
 * A pre-styled close button intended to be placed inside a `PopoverContent`.
 * For a custom close control, use `PopoverClose` directly.
 */
-const PopoverCloseButton = ({ label = "Close" } = {}) => /* @__PURE__ */ jsx(PopoverClose, { render: /* @__PURE__ */ jsx(IconButton, {
+const PopoverCloseButton = ({ label = "Close" }) => /* @__PURE__ */ jsx(PopoverClose, { render: /* @__PURE__ */ jsx(IconButton, {
 	"data-wui-popover-close": true,
 	label,
 	variant: "ghost",
@@ -13245,59 +13917,59 @@ const imageCoverStyles = css`
   }
 `;
 const StyledCard = styled.label`
-  --wui-radio-card-border-color: var(--wui-color-border-secondary);
-  --wui-radio-card-background-color: var(--wui-color-bg-surface);
-  --wui-radio-card-cursor: pointer;
-  --wui-radio-card-border-width: 1px;
-  --wui-radio-card-border-radius: var(--wui-border-radius-02);
-
-  position: relative;
-  display: inline-flex;
-  padding: ${({ $padding }) => `var(--wui-${$padding})`};
-  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-  border: var(--wui-radio-card-border-width) solid var(--wui-radio-card-border-color);
-  border-radius: var(--wui-radio-card-border-radius);
-  background-color: var(--wui-radio-card-background-color);
-  cursor: var(--wui-radio-card-cursor);
-  overflow: hidden;
-  transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
+    --wui-radio-card-border-color: var(--wui-color-border-secondary);
+    --wui-radio-card-background-color: var(--wui-color-bg-surface);
+    --wui-radio-card-cursor: pointer;
+    --wui-radio-card-border-width: 1px;
+    --wui-radio-card-border-radius: var(--wui-border-radius-02);
 
-  svg {
+    position: relative;
+    display: inline-flex;
+    padding: ${({ $padding }) => `var(--wui-${$padding})`};
+    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
+    border: var(--wui-radio-card-border-width) solid var(--wui-radio-card-border-color);
+    border-radius: var(--wui-radio-card-border-radius);
+    background-color: var(--wui-radio-card-background-color);
+    cursor: var(--wui-radio-card-cursor);
+    overflow: hidden;
     transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
-  }
 
-  &:hover {
-    --wui-radio-card-border-color: var(--wui-color-border-secondary-hover);
-  }
-
-  &:active {
-    --wui-radio-card-border-color: var(--wui-color-border-secondary-active);
-  }
+    svg {
+      transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
+    }
 
-  &:has(input:checked) {
-    ${({ $isGated }) => $isGated ? getColorScheme("purple") : checkedStyles}
-  }
+    &:hover {
+      --wui-radio-card-border-color: var(--wui-color-border-secondary-hover);
+    }
 
-  &:has(input:disabled) {
-    ${disabledStyles}
-  }
+    &:active {
+      --wui-radio-card-border-color: var(--wui-color-border-secondary-active);
+    }
 
-  &:has(input:focus-visible) {
-    ${focusStyles}
-  }
+    &:has(input:checked) {
+      ${({ $isGated }) => $isGated ? getColorScheme("purple") : checkedStyles}
+    }
 
-  &:has([data-wui-radio-card-image]) {
     &:has(input:disabled) {
-      [data-wui-radio-card-image] {
-        filter: grayscale(100%);
-      }
+      ${disabledStyles}
     }
 
-    &:has([data-wui-radio-card-image='cover']) {
-      ${imageCoverStyles}
+    &:has(input:focus-visible) {
+      ${focusStyles}
     }
-  }
-`;
+
+    &:has([data-wui-radio-card-image]) {
+      &:has(input:disabled) {
+        [data-wui-radio-card-image] {
+          filter: grayscale(100%);
+        }
+      }
+
+      &:has([data-wui-radio-card-image='cover']) {
+        ${imageCoverStyles}
+      }
+    }
+  `;
 const StyledHiddenInput = styled.input`
   ${visuallyHiddenStyle}
 `;
@@ -15031,6 +15703,6 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 //#endregion
-export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, isKeyboardKey, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, DurationInput, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, iconSizeMap, isKeyboardKey, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map