@wistia/ui 1.4.0 → 1.4.1-beta.11a672bb.eaf1b95

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v1.4.0
+ * @license @wistia/ui v1.4.1-beta.11a672bb.eaf1b95
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -13,12 +13,6 @@ import { createGlobalStyle, css, keyframes, styled } from "styled-components";
 import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "sonner";
-import { isPast } from "date-fns/isPast";
-import { isValid } from "date-fns/isValid";
-import { parse } from "date-fns/parse";
-import { startOfDay } from "date-fns/startOfDay";
-import { startOfToday } from "date-fns/startOfToday";
-import { startOfTomorrow } from "date-fns/startOfTomorrow";
 import { getValueAndUnit } from "polished";
 import { useFilePicker as useFilePicker$1, useImperativeFilePicker as useImperativeFilePicker$1 } from "use-file-picker";
 import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
@@ -112,6 +106,10 @@ const GlobalStyle = createGlobalStyle`
   * 1. Without this fonts are too heavy weight in OS X Firefox
   * 2. Design decision
     3. See: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
+    4. Avoid typographic orphans and awkward line breaks. 'text-wrap' is inherited,
+       so this becomes the default for all text. Guarded by '@supports' because
+       'pretty' is not Baseline yet; browsers without it keep the initial
+       'text-wrap: wrap' behavior, so no polyfill is needed.
   */
   body {
     -moz-osx-font-smoothing: grayscale; /* 1 */
@@ -119,6 +117,10 @@ const GlobalStyle = createGlobalStyle`
     line-height: 1.5; /* 2 */
     min-height: 100vh; /* 3 */
     min-height: -webkit-fill-available; /* 3 */
+
+    @supports (text-wrap: pretty) {
+      text-wrap: pretty; /* 4 */
+    }
   }
 
   /* Remove default margin in favour of better control in authored CSS */
@@ -736,17 +738,69 @@ const MONTH_NAMES = [
 	"November",
 	"December"
 ];
-const DATE_FORMATS = [
-	"MMM d, yyyy",
-	"MMM d",
-	"MMMM d, yyyy",
-	"MMMM d",
-	"M/d/yyyy",
-	"M/d",
-	"M-d-yyyy",
-	"M-d",
-	"yyyy-MM-dd"
+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;
@@ -757,14 +811,19 @@ const parseDateString = (str) => {
 	if (monthIndex !== -1) {
 		const today = startOfToday();
 		let date = new Date(today.getFullYear(), monthIndex, 1);
-		if (isPast(date)) date = new Date(today.getFullYear() + 1, monthIndex, 1);
-		return startOfDay(date);
+		if (date.getTime() < Date.now()) date = new Date(today.getFullYear() + 1, monthIndex, 1);
+		return date;
 	}
 	const referenceDate = /* @__PURE__ */ new Date();
-	const parsedDate = DATE_FORMATS.map((fmt) => parse(trimmed, fmt, referenceDate)).find((date) => isValid(date));
-	if (parsedDate !== void 0) return startOfDay(parsedDate);
+	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 (isValid(native)) return startOfDay(native);
+	if (!Number.isNaN(native.getTime())) return startOfDay(native);
 	return null;
 };
 //#endregion
@@ -811,7 +870,7 @@ const getLocalDateParts = (date) => {
 //#region src/helpers/dateTime/differenceInCalendarDays.ts
 /**
 * Returns the difference in calendar days between two dates in local time,
-* ignoring the time of day. Essentially replicates date-fns/differenceInCalendarDays.
+* ignoring the time of day.
 *
 * @param {Date|number} dateLeft  - The later date (or timestamp).
 * @param {Date|number} dateRight - The earlier date (or timestamp).
@@ -1426,7 +1485,7 @@ const useFocusTrap = (active = true, options = {}) => {
 			setTimeout(() => {
 				if (node.ownerDocument) processNode(node);
 				if (!node.ownerDocument) console.warn("[useFocusTrap]: The focus trap is not part of the DOM yet, so it is unable to correctly set focus. Make sure to render the ref node.", node);
-			});
+			}, 0);
 			ref.current = node;
 		} else ref.current = null;
 	}, [
@@ -5347,6 +5406,9 @@ const IconComponent = ({ useInlineStyles = true, invertColor, colorScheme = "inh
 	});
 };
 IconComponent.displayName = "Icon_UI";
+/**
+* An `Icon` displays a visual symbol to represent an action, concept, or entity, rendering the SVG registered for its `type` at a fixed or responsive `size`.
+*/
 const Icon = IconComponent;
 //#endregion
 //#region src/components/Link/Link.tsx
@@ -5928,6 +5990,9 @@ const StyledImage = styled.img`
   object-fit: ${({ $objFit }) => $objFit};
   object-position: ${({ $objPosition }) => $objPosition};
 `;
+/**
+* An `Image` displays a photo or graphic inline, with controls for border radius, object fit, and how it fills its container. It lazy-loads by default via the native `loading` attribute.
+*/
 const Image = ({ src, alt, borderRadius, fill: fillContainer = false, fit: objFit, loading = "lazy", position: objPosition, onLoad, onError, ...props }) => /* @__PURE__ */ jsx(StyledImage, {
 	$borderRadius: borderRadius,
 	$fillContainer: fillContainer,
@@ -7285,6 +7350,9 @@ const StyledHiddenCheckboxInput = styled.input`
   ${visuallyHiddenStyle}
   position: relative;
 `;
+/**
+* A `Checkbox` lets users select one or more options from a set, or toggle a single option on or off. It supports both standalone controlled usage and grouped usage via `CheckboxGroup`.
+*/
 const Checkbox = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-checkbox-${generatedId}`;
@@ -8550,6 +8618,9 @@ const StyledSwitchThumb = styled.div`
 const StyledHiddenSwitchInput = styled.input`
   ${visuallyHiddenStyle}
 `;
+/**
+* A `Switch` allows users to toggle between two mutually exclusive states, such as on and off.
+*/
 const Switch = ({ align = "left", checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-switch-${generatedId}`;
@@ -9766,6 +9837,9 @@ const defaultDisplayValues = (values, onRemove) => {
 		onClickRemoveLabel: `Remove ${selectedValue}`
 	}, selectedValue));
 };
+/**
+* A `Combobox` is a searchable single- or multi-select input. Users can filter options by typing, and selected values in multi-select mode are displayed as removable `Tag` components.
+*/
 const Combobox = ({ placeholder, value, onChange, searchValue, onSearchValueChange, displayValues = defaultDisplayValues, children, flipPopover = true, fullWidth = true }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isPending, startTransition] = useTransition();
@@ -9991,13 +10065,13 @@ const ContextMenuPopup = styled(Menu$1.Popup)`
   ${menuContentCss}
   outline: none;
 `;
+const NOOP$4 = () => null;
 /**
 * 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.
 */
-const NOOP$4 = () => null;
 const ContextMenu = ({ position, triggerRef, children, side = "bottom", onRequestClose = NOOP$4, compact = false }) => {
 	const [isRightClicked, setIsRightClicked] = useState(false);
 	const [menuPosition, setMenuPosition] = useState(position ?? {
@@ -12506,6 +12580,9 @@ const GridComponent = ({ ref, children, columns = "auto", minChildWidth = "auto"
 		children
 	});
 };
+/**
+* A `Grid` arranges its children in a CSS grid layout with configurable `columns`, `gap`, and responsive breakpoint support.
+*/
 const Grid = makePolymorphic(GridComponent);
 //#endregion
 //#region src/components/PreviewCard/PreviewCard.tsx
@@ -13514,6 +13591,9 @@ const keyToString = (key) => {
 		default: return key.toUpperCase();
 	}
 };
+/**
+* A `KeyboardShortcut` displays one or more keyboard keys with an optional label, rendering each key in a styled `kbd` element. Platform-specific keys like `Cmd`/`Meta` are rendered with the appropriate symbol for the detected operating system.
+*/
 const KeyboardShortcut = ({ label, keyboardKeys, fullWidth = false, ...otherProps }) => /* @__PURE__ */ jsxs(StyledKeyboardShortcut, {
 	$fullWidth: fullWidth,
 	...otherProps,
@@ -13634,6 +13714,9 @@ const renderListFromArray = (listItems, variant, otherProps) => {
 		return /* @__PURE__ */ jsx(ListItem, { children: item }, key);
 	}), variant, otherProps);
 };
+/**
+* A `List` groups related items in bulleted, ordered, or separator-based layouts, composed with `ListItem` children or a flat/nested `items` array.
+*/
 const List = ({ children, items, variant, ...otherProps }) => {
 	const listVariant = variant ?? "bullets";
 	if (isNotNil(children)) {
@@ -14749,6 +14832,9 @@ const StyledRadioInput = styled.div`
 const StyledHiddenRadioInput = styled.input`
   ${visuallyHiddenStyle}
 `;
+/**
+* A `Radio` lets users select exactly one option from a visible set of choices.
+*/
 const Radio = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value = "false", required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-radio-${generatedId}`;
@@ -15032,6 +15118,9 @@ const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 //#endregion
 //#region src/components/RadioCard/RadioCard.tsx
+/**
+* A `RadioCard` lets users select exactly one option from a set of visually rich, card-based choices.
+*/
 const RadioCard = ({ icon, label, description, showIndicator, isGated, children, ref, ...rootProps }) => {
 	return /* @__PURE__ */ jsx(RadioCardRoot, {
 		ref,
@@ -15652,6 +15741,9 @@ const StyledSidebar = styled.nav`
   overflow: hidden;
   border-right: 1px solid var(--wui-color-border);
 `;
+/**
+* The `Sidebar` provides vertical navigation with a composable header, scrollable content area, and footer.
+*/
 const Sidebar = ({ children, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledSidebar, {
 		ref,
@@ -15895,6 +15987,9 @@ const StyledSliderThumb = styled(Slider$1.Thumb)`
   }
 `;
 const DEFAULT_INITIAL_VALUE = [0];
+/**
+* A `Slider` lets users select a value or range from a continuous scale via a draggable thumb.
+*/
 const Slider = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled = false, initialValue = DEFAULT_INITIAL_VALUE, max = 100, min = 0, onChange, onValueCommitted, step = 1, value, "data-testid": dataTestId = "ui-slider", ...otherProps }) => {
 	if (!(isNonEmptyString(ariaLabel) || isNonEmptyString(ariaLabelledby))) throw new Error("UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop.");
 	const values = value ?? initialValue;
@@ -16122,6 +16217,9 @@ const useTabsValue = () => {
 };
 //#endregion
 //#region src/components/Tabs/Tabs.tsx
+/**
+* The `Tabs` component lets users switch between panels of content. It is composed from the `TabsList`, `TabsTrigger`, and `TabsContent` subcomponents.
+*/
 const Tabs = ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }) => {
 	const [internalValue, setInternalValue] = useState(valueProp ?? defaultValue);
 	const isControlled = isNotNil(valueProp);