@wistia/ui 3.5.1-beta.53aa0f7d.0398e32 → 3.5.2

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v3.5.1-beta.53aa0f7d.0398e32
+ * @license @wistia/ui v3.5.2
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -10,7 +10,7 @@
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
 import { createGlobalStyle, css, keyframes, styled } from "styled-components";
-import { buildTimeDuration, dateOnlyString, isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined, noOpFn, parseDateString } from "@wistia/utils";
+import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined, noOpFn } from "@wistia/utils";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "sonner";
 import { getValueAndUnit } from "polished";
@@ -127,6 +127,12 @@ const globalStyleAdjustmentsCss = css`
     }
   }
 
+  input,
+  textarea,
+  [contenteditable] {
+    text-wrap: wrap;
+  }
+
   /* Remove default margin in favour of better control in authored CSS */
   body,
   h1,
@@ -365,6 +371,19 @@ const UIProvider = ({ children, id, gatedIcon = "sparkle" }) => {
 	});
 };
 //#endregion
+//#region src/helpers/coerceToBoolean/coerceToBoolean.ts
+/**
+* Converts a boolean string value `value` into a boolean. If passed
+* something other than 'true' or 'false' will coerce value to boolean.
+*
+* @param {*} value - a value of any type
+* @returns {boolean} - that value as a boolean
+*/
+const coerceToBoolean = (value) => {
+	if (value === "true" || value === "false") return value === "true";
+	return Boolean(value);
+};
+//#endregion
 //#region src/helpers/copyToClipboard/copyToClipboard.ts
 /**
 * Copies a string to user's clipboard for easy pasting in another location
@@ -380,6 +399,673 @@ const copyToClipboard = async (textToCopy) => {
 	});
 };
 //#endregion
+//#region src/helpers/dateTime/constants.ts
+const defaultLocales = ["en-US"];
+const defaultTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+const milisecondsInSecond = 1e3;
+const millisecondsInDay = 86400 * milisecondsInSecond;
+//#endregion
+//#region src/helpers/dateTime/buildTimeDuration.ts
+/**
+* Returns an object representing the duration in seconds, minutes and hours.
+*
+* @param {number} numberOfMilliseconds - number of milliseconds
+* @returns {TimeDuration} -
+*/
+const buildTimeDuration = (numberOfMilliseconds) => {
+	const numberOfSeconds = Math.floor(numberOfMilliseconds / milisecondsInSecond);
+	const numberOfMinutes = Math.floor(numberOfSeconds / 60);
+	const numberOfHours = Math.floor(numberOfMinutes / 60);
+	return {
+		seconds: numberOfSeconds - numberOfMinutes * 60,
+		minutes: numberOfMinutes - numberOfHours * 60,
+		hours: numberOfHours
+	};
+};
+//#endregion
+//#region src/helpers/dateTime/isInvalidDate.ts
+/**
+* @param {*} date - a Date object - could be unknown though
+* @returns {boolean} - whether it's a valid date
+*/
+const isInvalidDate = (date) => {
+	if (!isDate(date)) return true;
+	const time = date.getTime();
+	return time === 0 || Number.isNaN(time);
+};
+//#endregion
+//#region src/helpers/dateTime/dateOnlyISOString.ts
+/**
+* Converts a Date object into a date only string formatted to ISO8601.
+*
+* e.g. 2021-06-03
+* @param {*} date a Date object you want to convert into a string - gracefully handles any input
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const dateOnlyISOString = (date, { timeZone = defaultTimeZone } = {}) => {
+	if (!isDate(date) || isInvalidDate(date)) return "";
+	try {
+		const partsAsObject = new Intl.DateTimeFormat(defaultLocales, {
+			year: "numeric",
+			month: "2-digit",
+			day: "2-digit",
+			timeZone
+		}).formatToParts(date).reduce((map, obj) => {
+			map[obj.type] = obj.value;
+			return map;
+		}, {});
+		return `${partsAsObject.year}-${partsAsObject.month}-${partsAsObject.day}`;
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/dateOnlyString.ts
+/**
+* Converts a Date object into a date only string.
+*
+* e.g. Jun 3, 2021 or Jun 3 if `omitYear` is true.
+*
+* @param {*} date a Date object you want to convert into a string - gracefully handles any input
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current user's time zone
+* @param {boolean} options.omitYear - if true, display the date without the year
+* @returns {string} a formatted date string
+*/
+const dateOnlyString = (date, { timeZone = defaultTimeZone, omitYear = false } = {}) => {
+	if (!isDate(date) || isInvalidDate(date)) return "";
+	const formatOptions = omitYear ? {
+		month: "short",
+		day: "numeric",
+		timeZone
+	} : {
+		dateStyle: "medium",
+		timeZone
+	};
+	try {
+		return new Intl.DateTimeFormat(defaultLocales, formatOptions).format(date);
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/dateOnlyStringForSentence.ts
+/**
+* Converts a Date object into a date only string
+* for use in a sentence.
+*
+* e.g. June 3, 2021
+*
+* @param {*} date - a Date object you want to convert into a string - gracefully handles any value
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const dateOnlyStringForSentence = (date, { timeZone = defaultTimeZone } = {}) => {
+	if (!isDate(date) || isInvalidDate(date)) return "";
+	try {
+		return new Intl.DateTimeFormat(defaultLocales, {
+			dateStyle: "long",
+			timeZone
+		}).format(date);
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/dateOnlyStringNumeric.ts
+/**
+* Converts a Date object into a date only string formatted numerically.
+*
+* e.g. 06/03/2021
+* @param {*} date a Date object you want to convert into a string - gracefully handles any input
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const dateOnlyStringNumeric = (date, { timeZone = defaultTimeZone } = {}) => {
+	if (!isDate(date) || isInvalidDate(date)) return "";
+	try {
+		return new Intl.DateTimeFormat(defaultLocales, {
+			year: "numeric",
+			month: "2-digit",
+			day: "2-digit",
+			timeZone
+		}).format(date);
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/dateTimeToDate.ts
+/**
+* @param {Partial<WistiaDateTimeObject> | null} dateTime - a dateTime object
+* @returns {Date | null} - the converted date or null if anything is missing
+*/
+const dateTimeToDate = (dateTime) => {
+	const { year, month, dayOfMonth, hours, minutes } = dateTime ?? {};
+	if (year !== void 0 && month !== void 0 && dayOfMonth !== void 0) return new Date(year, month, dayOfMonth, hours ?? 0, minutes ?? 0);
+	return null;
+};
+//#endregion
+//#region src/helpers/dateTime/dateTimeToISO.ts
+/**
+* @param {Partial<WistiaDateTimeObject>} dateTime - a dateTime object
+* @returns {string | null} - string with the ISO-8601 string or null
+*/
+const dateTimeToISO = (dateTime) => dateTimeToDate(dateTime)?.toISOString() ?? null;
+//#endregion
+//#region src/helpers/dateTime/dateToDateTime.ts
+/**
+* @typedef {Object} WistiaDateTimeObject
+* @property {number} minutes - number of minutes
+* @property {number} hours - number of hours
+* @property {number} dayOfMonth - day of the month
+* @property {number} year - year
+* @property {number} month - month
+*/
+/**
+* @param {Date | null | undefined} date - a Date object
+* @returns {WistiaDateTimeObject | null} - replaceMe
+*/
+const dateToDateTime = (date) => {
+	if (!isDate(date)) return null;
+	return {
+		year: date.getFullYear(),
+		month: date.getMonth(),
+		dayOfMonth: date.getDate(),
+		hours: date.getHours(),
+		minutes: date.getMinutes()
+	};
+};
+//#endregion
+//#region src/helpers/dateTime/dateTimeRounded.ts
+/**
+* @param {Date} dateTime - a dateTime object
+* @param {boolean} toISOString - whether the return value should be an ISO string
+* @returns {string | Date | null} - string or date depending on if toIsoString is true or false. Could be null if there's an error.
+*/
+const dateTimeRounded = (dateTime, toISOString = true) => {
+	const first30Min = dateTime.getMinutes() <= 30;
+	const hours = first30Min ? dateTime.getHours() : dateTime.getHours() + 1;
+	const minutes = first30Min ? 30 : 0;
+	const dateWithTime = {
+		...dateToDateTime(dateTime),
+		hours,
+		minutes
+	};
+	if (toISOString) return dateTimeToISO(dateWithTime);
+	return dateTimeToDate(dateWithTime);
+};
+//#endregion
+//#region src/helpers/dateTime/dateTimeString.ts
+/**
+* Converts a Date object into a date and time string.
+*
+* e.g. Jun 3, 2021, 11:52 AM
+*
+* NOTE: you should probably use timeAgoString when trying to display
+* an updated/created timestamp.
+*
+* @param {*} date - a Date object you want to convert into a string - gracefully handles any value
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const dateTimeString = (date, { timeZone = defaultTimeZone, omitYear = false } = {}) => {
+	if (isNil(date)) return "";
+	const formattedDate = new Date(date);
+	if (isInvalidDate(formattedDate)) return "";
+	try {
+		const baseOptions = {
+			month: "short",
+			day: "numeric",
+			hour: "numeric",
+			minute: "2-digit",
+			timeZone
+		};
+		const options = omitYear ? baseOptions : {
+			...baseOptions,
+			year: "numeric"
+		};
+		return formattedDate.toLocaleDateString(defaultLocales, options);
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/dateTimeStringForSentence.ts
+/**
+* Converts a Date object into a date and time string
+* for use in a sentence.
+*
+* e.g. June 3, 2021, 11:52 AM
+*
+* NOTE: you should probably use timeAgoString when trying to display
+* an updated/created timestamp.
+*
+* @param {*} date - a Date object you want to convert into a string - gracefully handles any value
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const dateTimeStringForSentence = (date, { timeZone = defaultTimeZone } = {}) => {
+	if (!isDate(date) || isInvalidDate(date)) return "";
+	try {
+		const { year, month, day, hour, minute, dayPeriod } = new Intl.DateTimeFormat(defaultLocales, {
+			month: "long",
+			day: "numeric",
+			year: "numeric",
+			hour: "numeric",
+			minute: "2-digit",
+			timeZone
+		}).formatToParts(date).reduce((acc, part) => {
+			if (part.type !== "literal") acc[part.type] = part.value;
+			return acc;
+		}, {});
+		return `${month} ${day}, ${year}, ${hour}:${minute} ${dayPeriod}`;
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/dateUTCOffset.ts
+/**
+* Given a date, shows the UTC offset.
+* @param {Date} date a Date object for calculating offset.
+* @returns {string} - string representing the UTC offset
+*/
+const dateUTCOffset = (date) => {
+	const offsetInHours = date.getTimezoneOffset() / 60 * -1;
+	const hours = Math.round(offsetInHours);
+	const minutes = (offsetInHours - hours) * 60;
+	return `${hours >= 0 ? "+" : ""}${`${hours}`.padStart(2, "0")}:${`${minutes}`.padStart(2, "0")}`;
+};
+//#endregion
+//#region src/helpers/dateTime/dayOfWeekString.ts
+/**
+* Converts a Date object into a month and day string formatted numerically.
+*
+* e.g. Thursday
+* @param {Date} date a Date object you want to convert into a string
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const dayOfWeekString = (date, { timeZone = defaultTimeZone } = {}) => {
+	if (date === null) return "";
+	try {
+		return new Intl.DateTimeFormat(defaultLocales, {
+			weekday: "long",
+			timeZone
+		}).format(date);
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/padTimeInteger.ts
+/**
+* @param {number} num - pads integer with leading zero
+* @returns {string} - integer with padding as string
+*/
+const padTimeInteger = (num) => num.toString().padStart(2, "0");
+//#endregion
+//#region src/helpers/dateTime/mediaDurationString.ts
+/**
+* A string representation of a duration for a media. Assumes most medias
+* are under an hour so only shows hours if media is over hour.
+*
+* @param {number} numberOfMilliseconds - number of milliseconds
+* @returns {string} - a string representation for duration
+*/
+const mediaDurationString = (numberOfMilliseconds) => {
+	const { hours, minutes, seconds } = buildTimeDuration(numberOfMilliseconds);
+	if (hours < 1) return `${minutes}:${padTimeInteger(seconds)}`;
+	return `${hours}:${padTimeInteger(minutes)}:${padTimeInteger(seconds)}`;
+};
+//#endregion
+//#region src/helpers/dateTime/millisecondsToDurationISOString.ts
+/**
+* Given number of miliseconds, returns the iso8601 string rounded down from
+* number of seconds. Mainly copied from https://github.com/wistia/player-modern/blob/master/src/utilities/iso8601Helper.js#L54
+* but modified to support milliseconds
+*
+* @param {number} numberOfMilliseconds - number of milliseconds
+* @returns {string} an iso8601 string format of duration
+*/
+const millisecondsToDurationISOString = (numberOfMilliseconds) => {
+	const { seconds, minutes, hours } = buildTimeDuration(numberOfMilliseconds);
+	let string = "PT";
+	if (hours) string += `${hours}H`;
+	if (minutes) string += `${minutes}M`;
+	if (seconds) string += `${seconds}S`;
+	if (!(seconds || minutes || hours)) string += "0S";
+	return string;
+};
+//#endregion
+//#region src/helpers/dateTime/monthDayStringNumeric.ts
+/**
+* Converts a Date object into a month and day string formatted numerically.
+*
+* e.g. 06/03/2021
+* @param {*} date a Date object you want to convert into a string - gracefully handles any value
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const monthDayStringNumeric = (date, { timeZone = defaultTimeZone } = {}) => {
+	if (!isDate(date) || isInvalidDate(date)) return "";
+	try {
+		return new Intl.DateTimeFormat(defaultLocales, {
+			month: "2-digit",
+			day: "2-digit",
+			timeZone
+		}).format(date);
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/parseDateString.ts
+const MONTH_NAMES = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+const MONTH_ABBREVIATIONS = MONTH_NAMES.map((name) => name.slice(0, 3));
+const startOfDay = (date) => {
+	const result = new Date(date);
+	result.setHours(0, 0, 0, 0);
+	return result;
+};
+const startOfToday = () => startOfDay(/* @__PURE__ */ new Date());
+const startOfTomorrow = () => {
+	const tomorrow = startOfToday();
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	return tomorrow;
+};
+const monthIndexIn = (names, value) => names.findIndex((name) => name.toLowerCase() === value.toLowerCase());
+const toNumberOrUndefined = (value) => value === void 0 ? void 0 : Number(value);
+const DATE_PATTERNS = [
+	{
+		regex: new RegExp(`^(${MONTH_ABBREVIATIONS.join("|")}) (\\d{1,2})(?:, (\\d{1,4}))?$`, "i"),
+		toParts: ([, month, day, year]) => ({
+			monthIndex: monthIndexIn(MONTH_ABBREVIATIONS, month ?? ""),
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: new RegExp(`^(${MONTH_NAMES.join("|")}) (\\d{1,2})(?:, (\\d{1,4}))?$`, "i"),
+		toParts: ([, month, day, year]) => ({
+			monthIndex: monthIndexIn(MONTH_NAMES, month ?? ""),
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: /^(\d{1,2})\/(\d{1,2})(?:\/(\d{1,4}))?$/,
+		toParts: ([, month, day, year]) => ({
+			monthIndex: Number(month) - 1,
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: /^(\d{1,2})-(\d{1,2})(?:-(\d{1,4}))?$/,
+		toParts: ([, month, day, year]) => ({
+			monthIndex: Number(month) - 1,
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: /^(\d{1,4})-(\d{1,2})-(\d{1,2})$/,
+		toParts: ([, year, month, day]) => ({
+			monthIndex: Number(month) - 1,
+			day: Number(day),
+			year: Number(year)
+		})
+	}
+];
+const toValidDate = ({ monthIndex, day, year }, referenceDate) => {
+	if (year === 0) return null;
+	const resolvedYear = year ?? referenceDate.getFullYear();
+	const date = new Date(referenceDate.getFullYear(), 0, 1);
+	date.setFullYear(resolvedYear, monthIndex, day);
+	return date.getFullYear() === resolvedYear && date.getMonth() === monthIndex && date.getDate() === day ? date : null;
+};
+const parseDateString = (str) => {
+	const trimmed = str.trim();
+	if (!trimmed) return null;
+	const lower = trimmed.toLowerCase();
+	if (lower === "today") return startOfToday();
+	if (lower === "tomorrow") return startOfTomorrow();
+	const monthIndex = MONTH_NAMES.findIndex((name) => name.toLowerCase().startsWith(lower));
+	if (monthIndex !== -1) {
+		const today = startOfToday();
+		let date = new Date(today.getFullYear(), monthIndex, 1);
+		if (date.getTime() < Date.now()) date = new Date(today.getFullYear() + 1, monthIndex, 1);
+		return date;
+	}
+	const referenceDate = /* @__PURE__ */ new Date();
+	for (const { regex, toParts } of DATE_PATTERNS) {
+		const match = trimmed.match(regex);
+		if (match) {
+			const parsed = toValidDate(toParts(match), referenceDate);
+			if (parsed !== null) return parsed;
+		}
+	}
+	const native = new Date(trimmed);
+	if (!Number.isNaN(native.getTime())) return startOfDay(native);
+	return null;
+};
+//#endregion
+//#region src/helpers/dateTime/sessionDurationString.ts
+/**
+* A string representation of a duration for a user session. Assumes that
+* sessions may or may not be more than an hour. To prevent confusion all
+* times show hours, even those that are less than an hour.
+*
+* @param {number} numberOfMilliseconds - number of milliseconds
+* @returns {string} - a string representation of duration
+*/
+const sessionDurationString = (numberOfMilliseconds) => {
+	const { hours, minutes, seconds } = buildTimeDuration(numberOfMilliseconds);
+	return `${hours}:${padTimeInteger(minutes)}:${padTimeInteger(seconds)}`;
+};
+//#endregion
+//#region src/helpers/dateTime/getLocalDateParts.ts
+/**
+* Get local year, month, day parts from a Date using Intl.DateTimeFormat.
+* This ignores the time of day (hours, minutes, etc.).
+*
+* @param {Date} date
+* @returns {{ year: number, month: number, day: number }}
+*/
+const getLocalDateParts = (date) => {
+	const parts = new Intl.DateTimeFormat(defaultLocales, {
+		year: "numeric",
+		month: "numeric",
+		day: "numeric",
+		timeZone: defaultTimeZone
+	}).formatToParts(date);
+	const yearPart = parts.find((part) => part.type === "year");
+	const monthPart = parts.find((part) => part.type === "month");
+	const dayPart = parts.find((part) => part.type === "day");
+	if (isNil(yearPart) || isNil(monthPart) || isNil(dayPart)) throw new Error("Failed to parse date parts");
+	return {
+		year: Math.trunc(Number(yearPart.value)),
+		month: Math.trunc(Number(monthPart.value)),
+		day: Math.trunc(Number(dayPart.value))
+	};
+};
+//#endregion
+//#region src/helpers/dateTime/differenceInCalendarDays.ts
+/**
+* Returns the difference in calendar days between two dates in local time,
+* ignoring the time of day.
+*
+* @param {Date|number} dateLeft  - The later date (or timestamp).
+* @param {Date|number} dateRight - The earlier date (or timestamp).
+* @returns {number}              - Number of calendar days (can be negative).
+*/
+const differenceInCalendarDays = (dateLeft, dateRight) => {
+	const leftDate = isDate(dateLeft) ? dateLeft : new Date(dateLeft);
+	const rightDate = isDate(dateRight) ? dateRight : new Date(dateRight);
+	if (Number.isNaN(leftDate.getTime()) || Number.isNaN(rightDate.getTime())) return NaN;
+	const { year: y1, month: m1, day: d1 } = getLocalDateParts(leftDate);
+	const { year: y2, month: m2, day: d2 } = getLocalDateParts(rightDate);
+	const msDiff = new Date(y1, m1 - 1, d1).getTime() - new Date(y2, m2 - 1, d2).getTime();
+	return Math.round(msDiff / millisecondsInDay);
+};
+//#endregion
+//#region src/helpers/dateTime/timeAgoString.ts
+/**
+* Shows time ago relative to current time.
+*
+* examples:
+*
+*   < 1 minute ago
+*
+*   33 minutes ago
+*
+*   Today, 3:30 PM
+*
+*   Yesterday, 6:22 AM
+*
+*   Nov 11, 11:32 AM
+*
+*   Feb 23, 2020, 1:55 PM
+*
+*  or when `includeTime` is false:
+*
+*   Today
+*
+*   Yesterday
+*
+*   on Thursday
+*
+*   Nov 11
+*
+*   Feb 23, 2020
+*
+* NOTE: timeAgoString doesn't support multiple time zones since doing so would
+* complicate calculations for whether to use "Today" or "Yesterday".
+* @param {Date} date - the date relative to now
+* @param {object} options -
+* @param {Date} options.nowAnchor - The date used to calculate relative to now. Defaults to current date but can be overwritten for tests.
+* @param {boolean} options.includeTime - Whether to include the time in the output. Defaults to true.
+* @returns {string} - a string representation of the date.
+*/
+const timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date(), includeTime = true } = {}) => {
+	if (isInvalidDate(date)) return "";
+	const minutesAgo = (nowAnchor.valueOf() - date.valueOf()) / (60 * milisecondsInSecond);
+	const minutesAgoRounded = Math.round(minutesAgo);
+	const differenceInDays = differenceInCalendarDays(nowAnchor, date);
+	const isSameYear = date.getFullYear() === nowAnchor.getFullYear();
+	if (minutesAgo < 0) return dateTimeString(date);
+	if (minutesAgo < 1) return "< 1 minute ago";
+	if (minutesAgoRounded < 2) return "1 minute ago";
+	if (minutesAgoRounded <= 60) return `${minutesAgoRounded} minutes ago`;
+	if (differenceInDays === 0) return includeTime ? `Today, ${Intl.DateTimeFormat(defaultLocales, {
+		hour: "numeric",
+		minute: "2-digit"
+	}).format(date)}` : "Today";
+	if (differenceInDays === 1) return includeTime ? `Yesterday, ${Intl.DateTimeFormat(defaultLocales, {
+		hour: "numeric",
+		minute: "2-digit"
+	}).format(date)}` : "Yesterday";
+	if (differenceInDays < 7 && !includeTime) return `on ${dayOfWeekString(date)}`;
+	return includeTime ? dateTimeString(date, { omitYear: isSameYear }) : dateOnlyString(date, { omitYear: false });
+};
+//#endregion
+//#region src/helpers/dateTime/timeOnlyString.ts
+/**
+* Converts a Date object into a time only string.
+*
+* e.g. 7:30 AM
+* @param {*} date a Date object you want to convert into a string - gracefully handles any value
+* @param {object} options -
+* @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
+* @returns {string} a formatted date string
+*/
+const timeOnlyString = (date, { timeZone = defaultTimeZone } = {}) => {
+	if (!isDate(date) || isInvalidDate(date)) return "";
+	try {
+		return new Intl.DateTimeFormat(defaultLocales, {
+			timeStyle: "short",
+			timeZone
+		}).format(date);
+	} catch (error) {
+		console.error(error);
+		return "";
+	}
+};
+//#endregion
+//#region src/helpers/dateTime/index.ts
+const dateTime = {
+	buildTimeDuration,
+	dateOnlyISOString,
+	dateOnlyString,
+	dateOnlyStringForSentence,
+	dateOnlyStringNumeric,
+	dateTimeRounded,
+	dateTimeString,
+	dateTimeStringForSentence,
+	dateTimeToDate,
+	dateTimeToISO,
+	dateToDateTime,
+	dateUTCOffset,
+	dayOfWeekString,
+	mediaDurationString,
+	millisecondsToDurationISOString,
+	monthDayStringNumeric,
+	parseDateString,
+	sessionDurationString,
+	timeAgoString,
+	timeOnlyString
+};
+//#endregion
+//#region src/helpers/isUrl/isUrl.ts
+/**
+* Loosely validates a URL string
+*
+* @param {*} str - a string to validate - could be an unknown type
+* @return {boolean} - whether string appears to be a url
+*/
+const isUrl = (str) => {
+	const protocolAndDomain = /^(?:\w+:)?\/\/(\S+)$/;
+	const localhostDomain = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
+	const nonLocalhostDomain = /^[^\s.]+\.\S{2,}$/;
+	if (!isString(str)) return false;
+	const match = protocolAndDomain.exec(str);
+	if (!match) return false;
+	const remaining = match[1];
+	if (remaining === void 0 || !remaining) return false;
+	return localhostDomain.test(remaining) || nonLocalhostDomain.test(remaining);
+};
+//#endregion
 //#region src/helpers/getBackgroundGradient/getBackgroundGradient.ts
 const gradients = {
 	defaultDarkOne: css`
@@ -581,6 +1267,15 @@ const mq = {
 	xlAndDown
 };
 //#endregion
+//#region src/helpers/stripExtension/stripExtension.ts
+/**
+* Removes file extension from string
+*
+* @param {string} str - string to have file extension removed from
+* @returns {string} - string with file extension removed
+*/
+const stripExtension = (str) => (str || "").replace(/\.[^/.]{1,4}$/, "");
+//#endregion
 //#region src/hooks/useAriaLive/useAriaLive.tsx
 const useAriaLive = () => {
 	const context = useContext(AriaLiveContext);
@@ -13914,7 +14609,9 @@ const InputClickToCopy = ({ value, onCopy, disabled = false, ref, ...props }) =>
 };
 //#endregion
 //#region src/components/InputDuration/constants.ts
-const MILLISECONDS_PER_SECOND = 1e3;
+const SECONDS_PER_MINUTE = 60;
+const MAX_MINUTES_UNIT_VALUE = 59;
+const SECONDS_PER_TEN_MINUTES = 600;
 const SECONDS_PER_HOUR = 3600;
 const ONE_HUNDREDTH_OF_A_SECOND = .01;
 const MAX_TIME = 35999.99;
@@ -13952,13 +14649,13 @@ const getSecondsFormatter = (decimalUnitLength) => {
 	});
 };
 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 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.toReversed().map(Number);
-		if (isValidSecond(seconds) && isValidMinute(minutes) && isValidHour(hours)) return hours * SECONDS_PER_HOUR + minutes * 60 + seconds;
+		if (isValidSecond(seconds) && isValidMinute(minutes) && isValidHour(hours)) return hours * SECONDS_PER_HOUR + minutes * SECONDS_PER_MINUTE + seconds;
 	}
 	throw new SyntaxError(`Invalid time (${formattedTimeString})`);
 };
@@ -13977,7 +14674,7 @@ const getFormattedSeconds = ({ seconds, decimalUnitLength }) => {
 const convertSecondsToHMSUnits = (durationInSeconds) => {
 	const wholeSeconds = Math.trunc(durationInSeconds);
 	const fractionalSeconds = durationInSeconds - wholeSeconds;
-	const { hours, minutes, seconds } = buildTimeDuration(wholeSeconds * MILLISECONDS_PER_SECOND);
+	const { hours, minutes, seconds } = buildTimeDuration(wholeSeconds * milisecondsInSecond);
 	return {
 		hours,
 		minutes,
@@ -14002,9 +14699,9 @@ const secondsToDurationValue = ({ seconds: durationInSeconds, maxUnit, decimalUn
 	].filter(Boolean).join(":");
 };
 const getMaxUnit = (seconds) => {
-	if (seconds >= 3600) return "hours";
-	if (seconds >= 600) return "tens-of-minutes";
-	if (seconds >= 60) return "minutes";
+	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 }) => {
@@ -14316,7 +15013,7 @@ const useInputDuration = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeV
 			return;
 		}
 		if (selectedUnit === "minutes" || selectedUnit === "tens-of-minutes") {
-			incrementBySeconds(60);
+			incrementBySeconds(SECONDS_PER_MINUTE);
 			return;
 		}
 		if (selectedUnit === "seconds") {
@@ -14336,7 +15033,7 @@ const useInputDuration = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeV
 			return;
 		}
 		if (selectedUnit === "minutes" || selectedUnit === "tens-of-minutes") {
-			decrementBySeconds(60);
+			decrementBySeconds(SECONDS_PER_MINUTE);
 			return;
 		}
 		if (selectedUnit === "seconds") {
@@ -14423,7 +15120,7 @@ const useInputDuration = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeV
 			selectUnitToRight();
 			return;
 		}
-		if (selectedUnit === "tens-of-minutes" && number >= 6 && !secondDigitMightBeTypedNext.current) {
+		if (selectedUnit === "tens-of-minutes" && number >= SECONDS_PER_MINUTE / 10 && !secondDigitMightBeTypedNext.current) {
 			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}0${number.toString()}${textToRightOfSelection}`);
 			secondDigitMightBeTypedNext.current = false;
 			selectUnitToRight();
@@ -14445,7 +15142,7 @@ const useInputDuration = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeV
 			selectUnitToRight();
 			return;
 		}
-		if (selectedUnit === "seconds" && number >= 6 && !secondDigitMightBeTypedNext.current) {
+		if (selectedUnit === "seconds" && number >= SECONDS_PER_MINUTE / 10 && !secondDigitMightBeTypedNext.current) {
 			maybeSetInputValueAndTriggerOnChange(`${textToLeftOfSelection}0${number.toString()}${textToRightOfSelection}`);
 			secondDigitMightBeTypedNext.current = false;
 			selectUnitToRight();
@@ -17484,6 +18181,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, CheckboxCard, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DOCUMENT_COLOR_MODE_ATTRIBUTE, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, 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, IconChip, 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, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, TileButton, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorModeOptions, colorSchemeOptions, copyToClipboard, documentColorModeOptions, getBackgroundGradient, getDocumentColorMode, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, mergeRefs, mq, setDocumentColorMode, useActiveMq, useAriaLive, useBoolean, useClipboard, useDocumentColorMode, 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, CheckboxCard, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DOCUMENT_COLOR_MODE_ATTRIBUTE, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, 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, IconChip, 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, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, TileButton, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorModeOptions, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, documentColorModeOptions, getBackgroundGradient, getDocumentColorMode, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, setDocumentColorMode, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useDocumentColorMode, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map