@wistia/ui 0.5.0 → 0.5.1-beta.4cd1e5cc.3a549dd

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.0
+ * @license @wistia/ui v0.5.1-beta.4cd1e5cc.3a549dd
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1461,6 +1461,396 @@ var copyToClipboard = async (textToCopy) => {
   });
 };
 
+// src/helpers/dateTime/constants.ts
+var defaultLocales = ["en-US"];
+var defaultTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+var secondsInMinute = 60;
+var minutesInHour = 60;
+var halfAnHourInMinutes = 30;
+var hoursInDay = 24;
+var milisecondsInSecond = 1e3;
+var millisecondsInDay = hoursInDay * minutesInHour * secondsInMinute * milisecondsInSecond;
+
+// src/helpers/dateTime/buildTimeDuration.ts
+var buildTimeDuration = (numberOfMilliseconds) => {
+  const numberOfSeconds = Math.floor(numberOfMilliseconds / milisecondsInSecond);
+  const numberOfMinutes = Math.floor(numberOfSeconds / secondsInMinute);
+  const numberOfHours = Math.floor(numberOfMinutes / minutesInHour);
+  const seconds = numberOfSeconds - numberOfMinutes * secondsInMinute;
+  const minutes = numberOfMinutes - numberOfHours * minutesInHour;
+  return { seconds, minutes, hours: numberOfHours };
+};
+
+// src/helpers/dateTime/isDate.ts
+var isDate = (date) => date instanceof Date;
+
+// src/helpers/dateTime/isInvalidDate.ts
+var isInvalidDate = (date) => {
+  if (!isDate(date)) {
+    return true;
+  }
+  const time = date.getTime();
+  return time === 0 || Number.isNaN(time);
+};
+
+// src/helpers/dateTime/dateOnlyISOString.ts
+var dateOnlyISOString = (date, { timeZone = defaultTimeZone } = {}) => {
+  if (!isDate(date) || isInvalidDate(date)) {
+    return "";
+  }
+  try {
+    const formatter = new Intl.DateTimeFormat(defaultLocales, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      timeZone
+    });
+    const parts = formatter.formatToParts(date);
+    const partsAsObject = parts.reduce(
+      (map, obj) => {
+        map[obj.type] = obj.value;
+        return map;
+      },
+      {}
+    );
+    return `${partsAsObject.year}-${partsAsObject.month}-${partsAsObject.day}`;
+  } catch (error) {
+    console.error(error);
+    return "";
+  }
+};
+
+// src/helpers/dateTime/dateOnlyString.ts
+var 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 "";
+  }
+};
+
+// src/helpers/dateTime/dateOnlyStringForSentence.ts
+var 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 "";
+  }
+};
+
+// src/helpers/dateTime/dateOnlyStringNumeric.ts
+var 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 "";
+  }
+};
+
+// src/helpers/dateTime/dateTimeToDate.ts
+var dateTimeToDate = (dateTime2) => {
+  const { year, month, dayOfMonth, hours, minutes } = dateTime2 ?? {};
+  if (year !== void 0 && month !== void 0 && dayOfMonth !== void 0) {
+    return new Date(year, month, dayOfMonth, hours ?? 0, minutes ?? 0);
+  }
+  return null;
+};
+
+// src/helpers/dateTime/dateToDateTime.ts
+var dateToDateTime = (date) => {
+  if (!isDate(date)) {
+    return null;
+  }
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth(),
+    dayOfMonth: date.getDate(),
+    hours: date.getHours(),
+    minutes: date.getMinutes()
+  };
+};
+
+// src/helpers/dateTime/dateTimeToISO.ts
+var dateTimeToISO = (dateTime2) => dateTimeToDate(dateTime2)?.toISOString() ?? null;
+
+// src/helpers/dateTime/dateTimeRounded.ts
+var dateTimeRounded = (dateTime2, toISOString = true) => {
+  const first30Min = dateTime2.getMinutes() <= halfAnHourInMinutes;
+  const hours = first30Min ? dateTime2.getHours() : dateTime2.getHours() + 1;
+  const minutes = first30Min ? halfAnHourInMinutes : 0;
+  const dateWithTime = {
+    ...dateToDateTime(dateTime2),
+    hours,
+    minutes
+  };
+  if (toISOString) {
+    return dateTimeToISO(dateWithTime);
+  }
+  return dateTimeToDate(dateWithTime);
+};
+
+// src/helpers/dateTime/dateTimeString.ts
+import { isNil as isNil2 } from "@wistia/type-guards";
+var dateTimeString = (date, { timeZone = defaultTimeZone } = {}) => {
+  if (isNil2(date)) {
+    return "";
+  }
+  const formattedDate = new Date(date);
+  if (isInvalidDate(formattedDate)) {
+    return "";
+  }
+  try {
+    return new Intl.DateTimeFormat(defaultLocales, {
+      dateStyle: "medium",
+      timeStyle: "short",
+      timeZone
+    }).format(formattedDate);
+  } catch (error) {
+    console.error(error);
+    return "";
+  }
+};
+
+// src/helpers/dateTime/dateTimeStringForSentence.ts
+var 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 "";
+  }
+};
+
+// src/helpers/dateTime/dateUTCOffset.ts
+var dateUTCOffset = (date) => {
+  const offsetInHours = date.getTimezoneOffset() / minutesInHour * -1;
+  const hours = Math.round(offsetInHours);
+  const minutes = (offsetInHours - hours) * minutesInHour;
+  const prefix = hours >= 0 ? "+" : "";
+  const hoursString = `${hours}`.padStart(2, "0");
+  const minutesString = `${minutes}`.padStart(2, "0");
+  return `${prefix}${hoursString}:${minutesString}`;
+};
+
+// src/helpers/dateTime/dayOfWeekString.ts
+var 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 "";
+  }
+};
+
+// src/helpers/dateTime/padTimeInteger.ts
+var padTimeInteger = (num) => num.toString().padStart(2, "0");
+
+// src/helpers/dateTime/mediaDurationString.ts
+var mediaDurationString = (numberOfMilliseconds) => {
+  const { hours, minutes, seconds } = buildTimeDuration(numberOfMilliseconds);
+  if (hours < 1) {
+    return `${minutes}:${padTimeInteger(seconds)}`;
+  }
+  return `${hours}:${padTimeInteger(minutes)}:${padTimeInteger(seconds)}`;
+};
+
+// src/helpers/dateTime/millisecondsToDurationISOString.ts
+var 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;
+};
+
+// src/helpers/dateTime/monthDayStringNumeric.ts
+var 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 "";
+  }
+};
+
+// src/helpers/dateTime/sessionDurationString.ts
+var sessionDurationString = (numberOfMilliseconds) => {
+  const { hours, minutes, seconds } = buildTimeDuration(numberOfMilliseconds);
+  return `${hours}:${padTimeInteger(minutes)}:${padTimeInteger(seconds)}`;
+};
+
+// src/helpers/dateTime/getLocalDateParts.ts
+import { isNil as isNil3 } from "@wistia/type-guards";
+var 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 (isNil3(yearPart) || isNil3(monthPart) || isNil3(dayPart)) {
+    throw new Error("Failed to parse date parts");
+  }
+  const year = parseInt(yearPart.value, 10);
+  const month = parseInt(monthPart.value, 10);
+  const day = parseInt(dayPart.value, 10);
+  return { year, month, day };
+};
+
+// src/helpers/dateTime/differenceInCalendarDays.ts
+var 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 startOfDayLeft = new Date(y1, m1 - 1, d1).getTime();
+  const startOfDayRight = new Date(y2, m2 - 1, d2).getTime();
+  const msDiff = startOfDayLeft - startOfDayRight;
+  return Math.round(msDiff / millisecondsInDay);
+};
+
+// src/helpers/dateTime/timeAgoString.ts
+var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date() } = {}) => {
+  if (isInvalidDate(date)) {
+    return "";
+  }
+  const minutesAgo = (nowAnchor.valueOf() - date.valueOf()) / (secondsInMinute * milisecondsInSecond);
+  const minutesAgoRounded = Math.round(minutesAgo);
+  const differenceInDays = differenceInCalendarDays(nowAnchor, date);
+  if (minutesAgo < 0) {
+    return dateTimeString(date);
+  }
+  if (minutesAgo < 1) {
+    return "< 1 minute ago";
+  }
+  if (minutesAgoRounded < 2) {
+    return "1 minute ago";
+  }
+  if (minutesAgoRounded <= minutesInHour) {
+    return `${minutesAgoRounded} minutes ago`;
+  }
+  if (differenceInDays === 0) {
+    return `Today, ${Intl.DateTimeFormat(defaultLocales, { timeStyle: "short" }).format(date)}`;
+  }
+  if (differenceInDays === 1) {
+    return `Yesterday, ${Intl.DateTimeFormat(defaultLocales, { timeStyle: "short" }).format(date)}`;
+  }
+  if (date.getFullYear() === nowAnchor.getFullYear()) {
+    return Intl.DateTimeFormat(defaultLocales, {
+      day: "numeric",
+      month: "short",
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  }
+  return dateTimeString(date);
+};
+
+// src/helpers/dateTime/timeOnlyString.ts
+var 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 "";
+  }
+};
+
+// src/helpers/dateTime/index.ts
+var dateTime = {
+  buildTimeDuration,
+  dateOnlyISOString,
+  dateOnlyString,
+  dateOnlyStringForSentence,
+  dateOnlyStringNumeric,
+  dateTimeRounded,
+  dateTimeString,
+  dateTimeStringForSentence,
+  dateTimeToDate,
+  dateTimeToISO,
+  dateToDateTime,
+  dateUTCOffset,
+  dayOfWeekString,
+  mediaDurationString,
+  millisecondsToDurationISOString,
+  monthDayStringNumeric,
+  sessionDurationString,
+  timeAgoString,
+  timeOnlyString
+};
+
 // src/helpers/mq/mq.ts
 import { getValueAndUnit } from "polished";
 
@@ -1590,9 +1980,9 @@ import { useCallback as useCallback3 } from "react";
 // src/private/hooks/useEvent/useEvent.ts
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 
-// src/private/helpers/isObjectRef/isObjectRef.ts
+// src/private/helpers/isValidRef/isValidRef.ts
 import { isNotNil, isRecord } from "@wistia/type-guards";
-var isObjectRef = (value) => {
+var isValidRef = (value) => {
   return isNotNil(value) && isRecord(value) && "current" in value;
 };
 
@@ -1612,7 +2002,7 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
     savedEventOptions.current = eventOptions;
   }, [eventOptions]);
   useEffect2(() => {
-    const target = isObjectRef(eventTarget) ? eventTarget.current : eventTarget;
+    const target = isValidRef(eventTarget) ? eventTarget.current : eventTarget;
     if (!eventName || !isEventTargetSupported(target)) {
       return;
     }
@@ -1658,10 +2048,10 @@ var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOpti
 
 // src/hooks/useAriaLive/useAriaLive.tsx
 import { useContext } from "react";
-import { isNil as isNil2 } from "@wistia/type-guards";
+import { isNil as isNil4 } from "@wistia/type-guards";
 var useAriaLive = () => {
   const context = useContext(AriaLiveContext);
-  if (isNil2(context)) {
+  if (isNil4(context)) {
     throw new Error("useAriaLive must be used within an AriaLiveProvider");
   }
   return context;
@@ -2160,7 +2550,7 @@ var buttonSizeStyles = {
 };
 
 // src/components/Icon/Icon.tsx
-import { isNil as isNil3 } from "@wistia/type-guards";
+import { isNil as isNil5 } from "@wistia/type-guards";
 import styled3 from "styled-components";
 
 // src/components/Icon/icons/AbTestIcon.tsx
@@ -5358,13 +5748,13 @@ var Icon = ({
   ...otherProps
 }) => {
   const responsiveSize = useResponsiveProp(size);
-  if (isNil3(type)) {
+  if (isNil5(type)) {
     throw new Error("An Icon component requires a `type` prop to be provided");
   }
-  if (isNil3(iconMap[type])) {
+  if (isNil5(iconMap[type])) {
     throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
   }
-  if (isNil3(iconSizeMap[responsiveSize])) {
+  if (isNil5(iconSizeMap[responsiveSize])) {
     throw new Error(
       `Size "${responsiveSize}" does not exist, please update size prop in Icon component.`
     );
@@ -5396,12 +5786,12 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-import { isNil as isNil4, isNotNil as isNotNil4, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
+import { isNil as isNil6, isNotNil as isNotNil4, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import styled4 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
 import { jsx as jsx161, jsxs as jsxs5 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
-  if (disabled || isNil4(href)) {
+  if (disabled || isNil6(href)) {
     return void 0;
   }
   let to = href;
@@ -5418,7 +5808,7 @@ var isLink = (props) => isNotUndefined2(props.href);
 var StyledLink = styled4.a`
   --link-icon-size: 14px;
 
-  ${({ href }) => isNil4(href) && buttonResetCss};
+  ${({ href }) => isNil6(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--wui-typography-family-default);
@@ -5796,7 +6186,7 @@ ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
 import { useState as useState4, useMemo as useMemo3, useEffect as useEffect3 } from "react";
-import { isNil as isNil6 } from "@wistia/type-guards";
+import { isNil as isNil8 } from "@wistia/type-guards";
 import styled8 from "styled-components";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
@@ -5839,13 +6229,13 @@ var ColorSchemeWrapper = ({
 ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 
 // src/components/Avatar/formatNameForDisplay.tsx
-import { isNil as isNil5, isString, isEmptyString } from "@wistia/type-guards";
+import { isNil as isNil7, isString, isEmptyString } from "@wistia/type-guards";
 var containsEmojiCharacter = (char) => {
   const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
   return emojiRegex.test(char);
 };
 var formatNameForDisplay = (name) => {
-  if (isNil5(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) {
+  if (isNil7(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) {
     return "U";
   }
   const firstChar = name.trim().substring(0, 1);
@@ -5908,7 +6298,7 @@ var AvatarWrapper = styled8.div`
   max-height: ${({ $maxHeight }) => $maxHeight}px;
 `;
 var chooseColorScheme = (name) => {
-  if (isNil6(name) || name === "Anonymous") {
+  if (isNil8(name) || name === "Anonymous") {
     return "default";
   }
   const filteredColors = colorSchemeOptions.filter(
@@ -5941,7 +6331,7 @@ var Avatar = ({
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = useMemo3(() => chooseColorScheme(name), [name]);
-  const showInitials = isNil6(imageUrl) || imageLoadState === "error";
+  const showInitials = isNil8(imageUrl) || imageLoadState === "error";
   return /* @__PURE__ */ jsx165(
     AvatarWrapper,
     {
@@ -6017,7 +6407,7 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
 import styled10 from "styled-components";
-import { isNotNil as isNotNil7, isNil as isNil7, isRecord as isRecord3 } from "@wistia/type-guards";
+import { isNotNil as isNotNil7, isNil as isNil9, isRecord as isRecord3 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -6090,7 +6480,7 @@ var wrapChildren = (children) => {
   if (isNotNil7(children)) {
     if (typeof children === "object" && isDev) {
       return Children.map(children, (child) => {
-        if (isNil7(child)) return null;
+        if (isNil9(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
@@ -6237,7 +6627,7 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 
 // src/components/ButtonGroup/ButtonGroup.tsx
 import styled13 from "styled-components";
-import { isNil as isNil8 } from "@wistia/type-guards";
+import { isNil as isNil10 } from "@wistia/type-guards";
 import { jsx as jsx170 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
@@ -6277,7 +6667,7 @@ var ButtonGroup = ({
   fullWidth = false,
   ...otherProps
 }) => {
-  if (isNil8(children)) {
+  if (isNil10(children)) {
     return null;
   }
   return /* @__PURE__ */ jsx170(
@@ -6527,7 +6917,7 @@ Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
 import styled17 from "styled-components";
-import { isNil as isNil9 } from "@wistia/type-guards";
+import { isNil as isNil11 } from "@wistia/type-guards";
 import { jsx as jsx174 } from "react/jsx-runtime";
 var StyledLabelDescription = styled17.div`
   color: var(--wui-color-text-secondary);
@@ -6539,7 +6929,7 @@ var LabelDescription = ({
   children,
   ...props
 }) => {
-  if (isNil9(children)) {
+  if (isNil11(children)) {
     return null;
   }
   return /* @__PURE__ */ jsx174(StyledLabelDescription, { ...props, children });
@@ -7327,7 +7717,18 @@ IconButton.displayName = "IconButton";
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef12, cloneElement as cloneElement5, useRef as useRef6 } from "react";
 import styled26, { css as css21 } from "styled-components";
-import { isNil as isNil10, isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { isNil as isNil12, isNotNil as isNotNil10 } from "@wistia/type-guards";
+
+// src/private/helpers/isReadyRef/isReadyRef.ts
+import { isNotNil as isNotNil9, isRecord as isRecord4, hasKey } from "@wistia/type-guards";
+var isReadyRef = (maybeRef) => {
+  if (isRecord4(maybeRef) && hasKey(maybeRef, "current")) {
+    return isNotNil9(maybeRef.current);
+  }
+  return false;
+};
+
+// src/components/Input/Input.tsx
 import { jsx as jsx186, jsxs as jsxs15 } from "react/jsx-runtime";
 var inputStyles = css21`
   --wui-input-color-bg: var(--wui-color-bg-surface);
@@ -7414,9 +7815,6 @@ var StyledInputContainer = styled26.div`
     padding-right: 32px;
   }
 `;
-var isValidRef = (ref) => {
-  return typeof ref === "object" && ref !== null && "current" in ref && isNotNil9(ref.current);
-};
 var Input = forwardRef12(
   ({
     fullWidth = false,
@@ -7428,26 +7826,26 @@ var Input = forwardRef12(
     ...props
   }, externalRef) => {
     const internalRef = useRef6();
-    const ref = isValidRef(externalRef) ? externalRef : internalRef;
+    const ref = isReadyRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
-    if (isNil10(leftIcon) && type === "search") {
+    if (isNil12(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx186(Icon, { type: "search" });
     }
-    if (isNotNil9(leftIconToDisplay)) {
+    if (isNotNil10(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement5(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil9(rightIconToDisplay)) {
+    if (isNotNil10(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement5(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if (isNotNil9(props.onFocus)) {
+      if (isNotNil10(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && ref && "current" in ref) {
@@ -7495,7 +7893,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -7607,7 +8005,7 @@ var Menu = ({
 }) => {
   const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
-    ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil11(onOpenChange) && isNotNil11(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -7689,12 +8087,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil12 } from "@wistia/type-guards";
+import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef13 } from "react";
 import styled29 from "styled-components";
-import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
+import { isNotNil as isNotNil12, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { jsx as jsx189, jsxs as jsxs17 } from "react/jsx-runtime";
 var StyledButton3 = styled29(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -7798,7 +8196,7 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       children: [
         props.leftIcon ? /* @__PURE__ */ jsx189(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ jsx189(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil11(badge) || isNotNil11(command) ? /* @__PURE__ */ jsx189(StyledBadgeContainer, { children: badge ?? command }) : null,
+        isNotNil12(badge) || isNotNil12(command) ? /* @__PURE__ */ jsx189(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ jsx189(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -7865,7 +8263,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ jsxs18(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs18(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
-      isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
+      isNotNil13(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs18(DropdownMenuGroup, { children: [
@@ -8052,7 +8450,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 import { forwardRef as forwardRef17 } from "react";
 import styled37 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled34 from "styled-components";
@@ -8079,7 +8477,7 @@ var ModalCloseButton = () => {
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 import styled33 from "styled-components";
-import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 import { jsx as jsx197 } from "react/jsx-runtime";
 var VisuallyHidden = styled33.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = styled33.div({
@@ -8091,7 +8489,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil13(text) ? text : children;
+  const accessibleText = isNotNil14(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ jsx197(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -8138,7 +8536,7 @@ import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef7, useEffect as useEffect4 } from "react";
-import { isNotNil as isNotNil14 } from "@wistia/type-guards";
+import { isNotNil as isNotNil15 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef7(null);
   useEffect4(() => {
@@ -8146,7 +8544,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect4(() => {
     return () => {
-      if (isNotNil14(previouslyFocusedRef.current)) {
+      if (isNotNil15(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -8182,7 +8580,8 @@ var StyledModalContent = styled35(DialogContent)`
     max-width: 90vw;
     top: 50%;
     transform: translate(-50%, -50%);
-    min-width: ${({ $width }) => $width ?? "80vw"};
+    min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
+    width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
   }
 
   @keyframes contentShow {
@@ -8269,6 +8668,7 @@ Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
 import { jsx as jsx201, jsxs as jsxs22 } from "react/jsx-runtime";
+var DEFAULT_MODAL_WIDTH = "532px";
 var ModalBody = styled37.div`
   flex-direction: column;
   display: flex;
@@ -8284,14 +8684,14 @@ var Modal = forwardRef17(
     isOpen,
     onRequestClose,
     title,
-    width,
+    width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsx201(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil15(onRequestClose)) {
+          if (!open2 && isNotNil16(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -8304,7 +8704,7 @@ var Modal = forwardRef17(
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil15(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil16(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -8467,7 +8867,7 @@ Radio.displayName = "Radio";
 import { forwardRef as forwardRef19 } from "react";
 import styled39 from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
-import { isNil as isNil11 } from "@wistia/type-guards";
+import { isNil as isNil13 } from "@wistia/type-guards";
 import { jsx as jsx203 } from "react/jsx-runtime";
 var StyledSegmentedControl = styled39(ToggleGroupRoot)`
   display: inline-flex;
@@ -8486,7 +8886,7 @@ var SegmentedControl = forwardRef19(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if (isNil11(children)) {
+    if (isNil13(children)) {
       return null;
     }
     return /* @__PURE__ */ jsx203(
@@ -8512,7 +8912,7 @@ SegmentedControl.displayName = "SegmentedControl";
 import { forwardRef as forwardRef20 } from "react";
 import styled40 from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 import { jsxs as jsxs24 } from "react/jsx-runtime";
 var StyledSegmentedControlItem = styled40(ToggleGroupItem)`
   all: unset; /* ToggleGroupItem is a button element */
@@ -8579,8 +8979,8 @@ var SegmentedControlItem = forwardRef20(
       StyledSegmentedControlItem,
       {
         ref,
-        $hasLabel: isNotNil16(label),
-        "aria-label": isNotNil16(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil17(label),
+        "aria-label": isNotNil17(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -8597,7 +8997,7 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef21 } from "react";
 import styled41 from "styled-components";
-import { isNil as isNil12, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { isNil as isNil14, isNotNil as isNotNil18, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { Fragment as Fragment4, jsx as jsx204, jsxs as jsxs25 } from "react/jsx-runtime";
 var TagLabel = styled41.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -8675,10 +9075,10 @@ var StyledTag = styled41.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if (isNil12(onClickRemove)) {
+  if (isNil14(onClickRemove)) {
     return null;
   }
-  if (isNil12(onClickRemoveLabel)) {
+  if (isNil14(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -8707,7 +9107,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = forwardRef21(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil17(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    const labelProps = isNotNil18(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs25(
       StyledTag,
       {
@@ -8851,7 +9251,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled43 from "styled-components";
-import { isNotNil as isNotNil18 } from "@wistia/type-guards";
+import { isNotNil as isNotNil19 } from "@wistia/type-guards";
 import { jsx as jsx206, jsxs as jsxs27 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -8945,7 +9345,7 @@ var WistiaLogo = ({
       ...otherProps,
       children: [
         /* @__PURE__ */ jsx206("title", { children: title }),
-        isNotNil18(description) ? /* @__PURE__ */ jsx206("desc", { children: description }) : null,
+        isNotNil19(description) ? /* @__PURE__ */ jsx206("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -9371,6 +9771,7 @@ export {
   WistiaLogo,
   colorSchemeOptions,
   copyToClipboard,
+  dateTime,
   ellipsisFlexParentStyle,
   ellipsisStyle,
   iconSizeMap,