@wistia/ui 0.26.0 → 0.26.1

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.26.0
+ * @license @wistia/ui v0.26.1
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -8,7 +8,7 @@
  */
 
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
 import { createGlobalStyle, css, keyframes, styled } from "styled-components";
 import { isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1809,7 +1809,7 @@ const Action = ({ actionButton }) => {
 /**
 * A Toast is a short, non-intrusive notification message that briefly appears on the screen to provide feedback to the user.
 *
-* This page is for screenshots only. For usage, see the [`useToast`](../?path=/docs/hooks-usetoast--docs) hook.
+* This page is for screenshots only. For usage, see the [`useToast`](/hooks/useToast) hook.
 */
 const Toast = ({ action, message, colorScheme = "inherit", icon, ...props }) => {
 	return /* @__PURE__ */ jsxs(StyledToast, {
@@ -5694,7 +5694,7 @@ const StyledLabel$3 = styled.span`
   text-align: left;
 `;
 /**
-* Action Button component is used as one of a group of main actions on the page. It composes [Button]().
+* Action Button component is used as one of a group of main actions on the page. It composes [Button](/components/Button).
 */
 const ActionButton = forwardRef(({ icon, colorScheme = "standard", disabled = false, forceState, hoverColorScheme, variant = "default", children, ...props }, ref) => {
 	const resolvedHoverColorScheme = hoverColorScheme ?? (variant === "gated" ? "purple" : "inherit");
@@ -6513,8 +6513,8 @@ const StyledButton$1 = styled(Button)`
   line-height: 1;
 `;
 /**
-* IconButton behaves like a [Button](?path=/docs/components-button--docs),
-* but only accepts an [Icon](?path=/docs/components-icon--docs) as a child.
+* IconButton behaves like a [Button](/components/Button),
+* but only accepts an [Icon](/components/Icon) as a child.
 */
 const IconButton = forwardRef(({ children, label, size = "md", ...props }, ref) => {
 	const responsiveSize = useResponsiveProp(size);
@@ -6632,7 +6632,7 @@ const StyledBreadcrumbs = styled.nav`
 const BUFFER_WIDTH = 10;
 /**
 * Used to display a screens's location within a hierarchical structure. Each `Breadcrumb` is a composed version of
-* [Button](?path=/docs/components-button--docs). See it's documentation for additional functionality.
+* [Button](/components/Button). See it's documentation for additional functionality.
 */
 const Breadcrumbs = ({ children, ...props }) => {
 	const { isXsAndDown } = useMq();
@@ -6719,7 +6719,7 @@ const prominenceMap = {
 };
 /**
 * A flexible container component that groups related content with consistent spacing and styling.
-* Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
+* Cards can be used to visually distinguish content sections. Extends the [Box component.](/components/Box)
 */
 const Card = ({ children, border = false, borderRadius = "border-radius-04", colorScheme = "inherit", direction = "column", gap = "space-03", height, paddingSize = "space-04", prominence = "secondary", width, ...props }) => /* @__PURE__ */ jsx(StyledCard$1, {
 	$backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -7978,7 +7978,7 @@ const VISUAL_OFFSET = 6;
 const ARROW_EXTENSION = 6;
 /**
 * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
-* For elements that are not interactive, consider using a [Popover]() instead.
+* For elements that are not interactive, consider using a [Popover](/components/Popover) instead.
 *
 */
 const Tooltip = ({ delay = 500, direction = "top", content, children, forceOpen, hideArrow = false, container = null }) => {
@@ -8727,7 +8727,7 @@ const StyledInputContainer = styled.div`
   }
 `;
 /**
-* Capture user input with a text field. Should be used within a [Form]() and [FormField]().
+* Capture user input with a text field. Should be used within a [Form](/components/Form) and [FormField](/components/FormField).
 */
 const Input = forwardRef(({ fullWidth = true, fullHeight = false, monospace = false, type = "text", autoSelect = false, leftIcon, rightIcon, ...props }, externalRef) => {
 	const internalRef = useRef(null);
@@ -9826,7 +9826,7 @@ const ContextMenuPopup = styled(Menu$1.Popup)`
   outline: none;
 `;
 /**
-* The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
+* The ContextMenu is an extended implementation of the [Menu](/components/Menu) component that allows for right-click context menus.
 * It can be used in two ways:
 * 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
 * 2. By providing a `position` prop, which will render the menu at the specified coordinates.
@@ -10217,7 +10217,7 @@ DataListItem.displayName = "DataListItem_UI";
 //#endregion
 //#region src/components/DataList/DataListItemLabel.tsx
 /**
-* The label of the `DataListItem`. Extends the [Text]() component.
+* The label of the `DataListItem`. Extends the [Text](/components/Text) component.
 */
 const DataListItemLabel = (props) => {
 	return /* @__PURE__ */ jsx(Text, {
@@ -10230,7 +10230,7 @@ DataListItemLabel.displayName = "DataListItemLabel_UI";
 //#endregion
 //#region src/components/DataList/DataListItemValue.tsx
 /**
-* The value of the `DataListItem`. Extends the [Text]() component.
+* The value of the `DataListItem`. Extends the [Text](/components/Text) component.
 */
 const DataListItemValue = (props) => {
 	return /* @__PURE__ */ jsx(Text, {
@@ -11444,6 +11444,711 @@ const InputClickToCopy = forwardRef(({ value, onCopy, disabled = false, ...props
 });
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 //#endregion
+//#region src/components/InputDuration/constants.ts
+const SECONDS_PER_MINUTE = 60;
+const MINUTES_PER_HOUR = 60;
+const MAX_MINUTES_UNIT_VALUE = SECONDS_PER_MINUTE - 1;
+const SECONDS_PER_TEN_MINUTES = SECONDS_PER_MINUTE * 10;
+const SECONDS_PER_HOUR = SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
+const TEN_HOURS = SECONDS_PER_HOUR * 10;
+const ONE_HUNDREDTH_OF_A_SECOND = .01;
+const MAX_TIME = TEN_HOURS - ONE_HUNDREDTH_OF_A_SECOND;
+const NUMBER_STRING_SET = new Set([
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9"
+]);
+//#endregion
+//#region src/components/InputDuration/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 <= MAX_MINUTES_UNIT_VALUE;
+const isValidSecond = (number) => Number.isFinite(number) && number >= 0 && number < SECONDS_PER_MINUTE;
+const durationValueToSeconds = (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 * SECONDS_PER_MINUTE + 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 wholeSeconds = Math.trunc(durationInSeconds);
+	const fractionalSeconds = durationInSeconds - wholeSeconds;
+	const { hours, minutes, seconds } = buildTimeDuration(wholeSeconds * milisecondsInSecond);
+	return {
+		hours,
+		minutes,
+		seconds: seconds + fractionalSeconds
+	};
+};
+const secondsToDurationValue = ({ 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 >= SECONDS_PER_HOUR) return "hours";
+	if (seconds >= SECONDS_PER_TEN_MINUTES) return "tens-of-minutes";
+	if (seconds >= SECONDS_PER_MINUTE) 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/InputDuration/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 segments = inputValue.split(":");
+	let offset = 0;
+	if (maxUnit === "hours") {
+		const [hours = "", minutes = "", seconds = ""] = segments;
+		const hoursResult = getSegmentRange({
+			segment: hours,
+			offset
+		});
+		offset = hoursResult.nextOffset;
+		const minutesResult = getSegmentRange({
+			segment: minutes,
+			offset
+		});
+		offset = minutesResult.nextOffset;
+		return {
+			...getEmptySelectionRanges(),
+			hours: hoursResult.range,
+			"tens-of-minutes": minutesResult.range,
+			...getSecondsRanges({
+				segment: seconds,
+				offset
+			})
+		};
+	}
+	if (maxUnit === "tens-of-minutes") {
+		const [minutes = "", seconds = ""] = segments;
+		const minutesResult = getSegmentRange({
+			segment: minutes,
+			offset
+		});
+		offset = minutesResult.nextOffset;
+		return {
+			...getEmptySelectionRanges(),
+			"tens-of-minutes": minutesResult.range,
+			...getSecondsRanges({
+				segment: seconds,
+				offset
+			})
+		};
+	}
+	if (maxUnit === "minutes") {
+		const [minutes = "", seconds = ""] = segments;
+		const minutesResult = getSegmentRange({
+			segment: minutes,
+			offset
+		});
+		offset = minutesResult.nextOffset;
+		return {
+			...getEmptySelectionRanges(),
+			minutes: minutesResult.range,
+			...getSecondsRanges({
+				segment: seconds,
+				offset
+			})
+		};
+	}
+	const [seconds = ""] = segments;
+	return {
+		...getEmptySelectionRanges(),
+		...getSecondsRanges({
+			segment: seconds,
+			offset
+		})
+	};
+};
+//#endregion
+//#region src/components/InputDuration/durationUnits.ts
+const DURATION_UNITS = new Set([
+	"hours",
+	"hundredths-of-seconds",
+	"minutes",
+	"seconds",
+	"tens-of-minutes"
+]);
+const isDurationUnit = (unit) => {
+	return isNotNil(unit) && DURATION_UNITS.has(unit);
+};
+//#endregion
+//#region src/components/InputDuration/useInputDuration.ts
+const useInputDuration = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeValueInSeconds, valueInSeconds }) => {
+	const [inputSelection, setInputSelection] = useState(null);
+	const inputRef = useRef(null);
+	const anyKeyIsDownRef = useRef(false);
+	const selectedUnitRef = 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 = useMemo(() => secondsToDurationValue({
+		decimalUnitLength,
+		maxUnit,
+		seconds: boundedValueInSeconds
+	}), [
+		boundedValueInSeconds,
+		decimalUnitLength,
+		maxUnit
+	]);
+	const selectionRanges = useMemo(() => getSelectionRanges({
+		inputValue,
+		maxUnit
+	}), [inputValue, maxUnit]);
+	const decimalStep = decimalUnitLength === 0 ? 0 : ONE_HUNDREDTH_OF_A_SECOND;
+	const maybeSetInputValueAndTriggerOnChange = useCallback((candidateInputValue) => {
+		const seconds = durationValueToSeconds(candidateInputValue);
+		if (seconds < roundedMinSeconds || seconds > roundedMaxSeconds) return;
+		onChangeValueInSeconds(seconds);
+	}, [
+		onChangeValueInSeconds,
+		roundedMaxSeconds,
+		roundedMinSeconds
+	]);
+	const selectUnit = useCallback((unit) => {
+		selectedUnitRef.current = 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 getFirstSelectableUnit = useCallback(() => {
+		const result = Object.entries(selectionRanges).find(([, { start, end }]) => {
+			return start !== null && end !== null;
+		})?.[0] ?? null;
+		if (!isDurationUnit(result)) return null;
+		return result;
+	}, [selectionRanges]);
+	const selectFirstUnit = useCallback(() => {
+		selectUnit(getFirstSelectableUnit());
+	}, [getFirstSelectableUnit, selectUnit]);
+	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(() => {
+		if (inputSelection == null) return;
+		const unitToSelect = getUnitForSelectionIndices({
+			selectionEnd: inputSelection.end + 1,
+			selectionStart: inputSelection.end + 1
+		});
+		if (unitToSelect == null) return;
+		selectedUnitRef.current = unitToSelect;
+		requestAnimationFrame(() => {
+			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 = durationValueToSeconds(inputValue) + secondsToIncrementBy;
+		if (newValue > roundedMaxSeconds) return;
+		maybeSetInputValueAndTriggerOnChange(secondsToDurationValue({
+			decimalUnitLength,
+			maxUnit,
+			seconds: newValue
+		}));
+	}, [
+		decimalUnitLength,
+		inputValue,
+		maxUnit,
+		maybeSetInputValueAndTriggerOnChange,
+		roundedMaxSeconds
+	]);
+	const decrementBySeconds = useCallback((secondsToDecrementBy) => {
+		const newValue = durationValueToSeconds(inputValue) - secondsToDecrementBy;
+		if (newValue < roundedMinSeconds) return;
+		maybeSetInputValueAndTriggerOnChange(secondsToDurationValue({
+			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(SECONDS_PER_MINUTE);
+			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(SECONDS_PER_MINUTE);
+			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 (anyKeyIsDownRef.current) return;
+		const { selectionStart, selectionEnd } = event.currentTarget;
+		if (selectionStart === null || selectionEnd === null) return;
+		selectUnit(getUnitForSelectionIndices({
+			selectionStart,
+			selectionEnd
+		}));
+	}, [getUnitForSelectionIndices, selectUnit]);
+	const onFocus = useCallback(() => {
+		const selectFirstUnitIfAllTextIsSelected = () => {
+			const input = inputRef.current;
+			if (input == null) return;
+			if (input.selectionStart === 0 && input.selectionEnd === input.value.length) selectFirstUnit();
+		};
+		selectFirstUnitIfAllTextIsSelected();
+		requestAnimationFrame(selectFirstUnitIfAllTextIsSelected);
+	}, [selectFirstUnit]);
+	const restoreSelectionToSelectedUnit = useCallback(() => {
+		selectUnit(selectedUnitRef.current);
+	}, [selectUnit]);
+	useLayoutEffect(() => {
+		if (inputRef.current == null || document.activeElement !== inputRef.current) return;
+		selectUnit(selectedUnitRef.current);
+	}, [inputValue, selectUnit]);
+	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 >= SECONDS_PER_MINUTE / 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 >= SECONDS_PER_MINUTE / 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
+	]);
+	return {
+		inputRef,
+		inputValue,
+		onFocus,
+		onInputSelect,
+		onKeyDown: useCallback((event) => {
+			anyKeyIsDownRef.current = 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_STRING_SET.has(key)) {
+				event.preventDefault();
+				onTypeNumber(Number(key));
+				return;
+			}
+			if (key === "Backspace") {
+				event.preventDefault();
+				setSelectedUnitToZero();
+				restoreSelectionToSelectedUnit();
+			}
+		}, [
+			decimalUnitLength,
+			decrementSelectedUnit,
+			incrementSelectedUnit,
+			inputSelection,
+			onTypeNumber,
+			restoreSelectionToSelectedUnit,
+			selectUnit,
+			selectUnitToLeft,
+			selectUnitToRight,
+			setSelectedUnitToZero
+		]),
+		onKeyUp: useCallback(() => {
+			anyKeyIsDownRef.current = false;
+		}, [])
+	};
+};
+//#endregion
+//#region src/components/InputDuration/InputDuration.tsx
+const EXTRA_INPUT_WIDTH_CH = 4;
+const getInputWidth = (inputValue) => {
+	return `calc(${inputValue.length + EXTRA_INPUT_WIDTH_CH}ch + var(--wui-input-horizontal-padding) + var(--wui-input-horizontal-padding))`;
+};
+/**
+* InputDuration lets users edit a duration value using a keyboard-friendly time input.
+*/
+const InputDuration = forwardRef(({ decimalUnitLength = 2, disabled = false, fullWidth = false, maxSeconds = MAX_TIME, minSeconds = 0, onChangeValueInSeconds, valueInSeconds, onFocus, style, ...props }, externalRef) => {
+	const { inputRef, inputValue, onFocus: onInputFocus, onInputSelect, onKeyDown, onKeyUp } = useInputDuration({
+		decimalUnitLength,
+		maxSeconds,
+		minSeconds,
+		onChangeValueInSeconds,
+		valueInSeconds
+	});
+	const inputWidth = fullWidth ? void 0 : getInputWidth(inputValue);
+	useImperativeHandle(externalRef, () => inputRef.current);
+	const handleFocus = (event) => {
+		onInputFocus();
+		onFocus?.(event);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		ref: inputRef,
+		disabled,
+		fullWidth,
+		inputMode: "numeric",
+		monospace: true,
+		onChange: () => {},
+		onFocus: handleFocus,
+		onKeyDown,
+		onKeyUp,
+		onSelect: onInputSelect,
+		style: {
+			width: inputWidth,
+			textAlign: "right",
+			caretColor: "transparent",
+			...style
+		},
+		type: "text",
+		value: inputValue
+	});
+});
+InputDuration.displayName = "InputDuration_UI";
+//#endregion
 //#region src/components/InputPassword/InputPassword.tsx
 const StyledIconButton = styled(IconButton)`
   /* override size for icon button since prop gets changed by Input */
@@ -14157,7 +14862,7 @@ const StyledSplitButton = styled.span`
   }
 `;
 /**
-* A SplitButton is an extension of [Button]() that adds a menu to the right hand side of the button.
+* A SplitButton is an extension of [Button](/components/Button) that adds a menu to the right hand side of the button.
 */
 const SplitButton = ({ children, menuLabel = "Select an option", menuIcon = /* @__PURE__ */ jsx(Icon, { type: "caret-down" }), menuItems, disabled = false, colorScheme = "inherit", variant = "solid", secondaryAction, size = "md", unstyled = false, menuProps = {}, ...props }) => {
 	return /* @__PURE__ */ jsxs(StyledSplitButton, {
@@ -15029,6 +15734,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, 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 };
+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, InputDuration, 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