@wistia/ui 1.4.3 → 1.4.4

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v1.4.3
+ * @license @wistia/ui v1.4.4
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -72,9 +72,8 @@ const designTokens = css`
   ${"/*\n * Legacy typography sub-property aliases\n *\n * Terrazzo's plugin-css emits typography composite sub-properties using DTCG\n * names verbatim (kebab-cased):\n *   --wui-typography-<style>-font-family\n *   --wui-typography-<style>-font-size\n *   --wui-typography-<style>-font-weight\n *\n * Prior versions of @wistia/ui exposed shortened legacy names:\n *   --wui-typography-<style>-family\n *   --wui-typography-<style>-size\n *   --wui-typography-<style>-weight\n *\n * These aliases preserve that surface so downstream apps (notably wistia/wistia)\n * keep working unchanged after the Terrazzo migration. Once all known consumers\n * have migrated to the DTCG names, delete this file and remove the import from\n * designTokens/index.tsx.\n *\n * Note: `line-height` and `paragraph-spacing` sub-properties are unchanged\n * between DTCG and the prior surface, so no aliases are required for those.\n *\n * --------------------------------------------------------------------------\n * Migrating consumers in wistia/wistia (run from the VMA repo root):\n *\n *   # 1. List every legacy reference site:\n *   grep -rnE --include='*.ts' --include='*.tsx' --include='*.css' \\\n *     '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n *     frontend\n *\n *   # 2. Apply the rename in-place (BSD sed on macOS):\n *   grep -rlE --include='*.ts' --include='*.tsx' --include='*.css' \\\n *     '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n *     frontend \\\n *     | xargs sed -i '' -E \\\n *       's/(--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9]))-(family|size|weight)/\\1-font-\\3/g'\n *\n *   # 3. (GNU sed / Linux variant — drop the empty '' after -i):\n *   #   ... | xargs sed -i -E '...'\n *\n * Special case: frontend/authentication/css/redesign/wistia-ui/design-tokens/\n *   typography.css *defines* the legacy names itself (not consumed from\n *   @wistia/ui). It will keep working post-rename, but should be migrated for\n *   consistency.\n * --------------------------------------------------------------------------\n */\n:root,\n[data-wui-theme='true'] {\n  --wui-typography-heading-hero-family: var(--wui-typography-heading-hero-font-family);\n  --wui-typography-heading-hero-size: var(--wui-typography-heading-hero-font-size);\n  --wui-typography-heading-hero-weight: var(--wui-typography-heading-hero-font-weight);\n  --wui-typography-heading-1-family: var(--wui-typography-heading-1-font-family);\n  --wui-typography-heading-1-size: var(--wui-typography-heading-1-font-size);\n  --wui-typography-heading-1-weight: var(--wui-typography-heading-1-font-weight);\n  --wui-typography-heading-2-family: var(--wui-typography-heading-2-font-family);\n  --wui-typography-heading-2-size: var(--wui-typography-heading-2-font-size);\n  --wui-typography-heading-2-weight: var(--wui-typography-heading-2-font-weight);\n  --wui-typography-heading-3-family: var(--wui-typography-heading-3-font-family);\n  --wui-typography-heading-3-size: var(--wui-typography-heading-3-font-size);\n  --wui-typography-heading-3-weight: var(--wui-typography-heading-3-font-weight);\n  --wui-typography-heading-4-family: var(--wui-typography-heading-4-font-family);\n  --wui-typography-heading-4-size: var(--wui-typography-heading-4-font-size);\n  --wui-typography-heading-4-weight: var(--wui-typography-heading-4-font-weight);\n  --wui-typography-heading-5-family: var(--wui-typography-heading-5-font-family);\n  --wui-typography-heading-5-size: var(--wui-typography-heading-5-font-size);\n  --wui-typography-heading-5-weight: var(--wui-typography-heading-5-font-weight);\n  --wui-typography-heading-6-family: var(--wui-typography-heading-6-font-family);\n  --wui-typography-heading-6-size: var(--wui-typography-heading-6-font-size);\n  --wui-typography-heading-6-weight: var(--wui-typography-heading-6-font-weight);\n  --wui-typography-body-1-family: var(--wui-typography-body-1-font-family);\n  --wui-typography-body-1-size: var(--wui-typography-body-1-font-size);\n  --wui-typography-body-1-weight: var(--wui-typography-body-1-font-weight);\n  --wui-typography-body-2-family: var(--wui-typography-body-2-font-family);\n  --wui-typography-body-2-size: var(--wui-typography-body-2-font-size);\n  --wui-typography-body-2-weight: var(--wui-typography-body-2-font-weight);\n  --wui-typography-body-3-family: var(--wui-typography-body-3-font-family);\n  --wui-typography-body-3-size: var(--wui-typography-body-3-font-size);\n  --wui-typography-body-3-weight: var(--wui-typography-body-3-font-weight);\n  --wui-typography-body-4-family: var(--wui-typography-body-4-font-family);\n  --wui-typography-body-4-size: var(--wui-typography-body-4-font-size);\n  --wui-typography-body-4-weight: var(--wui-typography-body-4-font-weight);\n  --wui-typography-label-1-family: var(--wui-typography-label-1-font-family);\n  --wui-typography-label-1-size: var(--wui-typography-label-1-font-size);\n  --wui-typography-label-1-weight: var(--wui-typography-label-1-font-weight);\n  --wui-typography-label-2-family: var(--wui-typography-label-2-font-family);\n  --wui-typography-label-2-size: var(--wui-typography-label-2-font-size);\n  --wui-typography-label-2-weight: var(--wui-typography-label-2-font-weight);\n  --wui-typography-label-3-family: var(--wui-typography-label-3-font-family);\n  --wui-typography-label-3-size: var(--wui-typography-label-3-font-size);\n  --wui-typography-label-3-weight: var(--wui-typography-label-3-font-weight);\n  --wui-typography-label-4-family: var(--wui-typography-label-4-font-family);\n  --wui-typography-label-4-size: var(--wui-typography-label-4-font-size);\n  --wui-typography-label-4-weight: var(--wui-typography-label-4-font-weight);\n}\n"}
 `;
 //#endregion
-//#region src/css/GlobalStyle.tsx
-const GlobalStyle = createGlobalStyle`
-  ${css`
+//#region src/css/globalStyleAdjustmentsCss.tsx
+const globalStyleAdjustmentsCss = css`
   /**
   * 1. Change from 'content-box' so that 'width' calculations are unaffected by 'padding' or 'border'
        See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
@@ -206,7 +205,11 @@ const GlobalStyle = createGlobalStyle`
       scroll-behavior: auto !important;
     }
   }
-`}
+`;
+//#endregion
+//#region src/css/GlobalStyle.tsx
+const GlobalStyle = createGlobalStyle`
+  ${globalStyleAdjustmentsCss}
   ${designTokens}
   ${clickRegionGlobalStyles}
 `;
@@ -263,8 +266,9 @@ const AriaLiveProvider = ({ children, debug = false }) => {
 			setTimeout(() => setMessage(null), 1e3);
 		}
 	}, []);
+	const value = useMemo(() => ({ announce }), [announce]);
 	return /* @__PURE__ */ jsx(AriaLiveContext, {
-		value: useMemo(() => ({ announce }), [announce]),
+		value,
 		children
 	});
 };
@@ -346,7 +350,7 @@ const copyToClipboard = async (textToCopy) => {
 const defaultLocales = ["en-US"];
 const defaultTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
 const milisecondsInSecond = 1e3;
-const millisecondsInDay = 1440 * 60 * milisecondsInSecond;
+const millisecondsInDay = 86400 * milisecondsInSecond;
 //#endregion
 //#region src/helpers/dateTime/buildTimeDuration.ts
 /**
@@ -1157,7 +1161,8 @@ const DEFAULT_GRADIENT = "defaultMidOne";
 const getSemiRandomBackgroundGradient = (id) => {
 	if (!(typeof id === "string" && id)) return gradientMap[0] ?? DEFAULT_GRADIENT;
 	const hashCode = [...id].reduce((num, char) => Math.imul(MULTIPLIER, num) + (char.codePointAt(0) ?? 0) || 0, 0);
-	return gradientMap[Math.abs(hashCode) % gradientMap.length] ?? DEFAULT_GRADIENT;
+	const index = Math.abs(hashCode) % gradientMap.length;
+	return gradientMap[index] ?? DEFAULT_GRADIENT;
 };
 //#endregion
 //#region src/helpers/mergeRefs/mergeRefs.ts
@@ -1320,10 +1325,11 @@ const useElementObserver = () => {
 * @param config Optional configuration for the file picker
 */
 const useFilePicker = (config = {}) => {
-	return useFilePicker$1({
+	const finalConfig = {
 		readFilesContent: false,
 		...config
-	});
+	};
+	return useFilePicker$1(finalConfig);
 };
 /**
 * Hook that wraps `useImperativeFilePicker` from the use-file-picker library
@@ -1331,10 +1337,11 @@ const useFilePicker = (config = {}) => {
 * @param config Optional configuration for the imperative file picker
 */
 const useImperativeFilePicker = (config = {}) => {
-	return useImperativeFilePicker$1({
+	const finalConfig = {
 		readFilesContent: false,
 		...config
-	});
+	};
+	return useImperativeFilePicker$1(finalConfig);
 };
 //#endregion
 //#region src/hooks/useFocusTrap/helpers.ts
@@ -1570,7 +1577,7 @@ const useEvent = (eventName, eventHandler, eventTarget = typeof document !== "un
 //#endregion
 //#region src/hooks/useKey/useKey.ts
 const useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOptions } = {}) => {
-	useEvent(eventName, useCallback((handlerEvent) => {
+	const memoizedEventHandler = useCallback((handlerEvent) => {
 		if ([
 			"INPUT",
 			"TEXTAREA",
@@ -1582,7 +1589,8 @@ const useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOp
 		else if (key) matchesKey = true;
 		else matchesKey = false;
 		if (matchesKey) eventHandler(handlerEvent);
-	}, [key, eventHandler]), eventTarget, eventOptions);
+	}, [key, eventHandler]);
+	useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
 };
 //#endregion
 //#region src/private/hooks/useUpdateEffect/useUpdateEffect.ts
@@ -5744,6 +5752,7 @@ const Button = ({ children, forceState, className, leftIcon, rightIcon, colorSch
 	const responsiveFullWidth = useResponsiveProp(fullWidth);
 	const responsiveSize = useResponsiveProp(size);
 	const isAriaDisabled = () => isLoading || disabled;
+	const buttonRef = ref;
 	const commonProps = {
 		"aria-disabled": isAriaDisabled() || void 0,
 		$colorScheme: colorScheme,
@@ -5755,7 +5764,7 @@ const Button = ({ children, forceState, className, leftIcon, rightIcon, colorSch
 	};
 	if (forceState) commonProps.className = `${className ?? ""} force-state-${forceState}`;
 	if (isLink(props)) return /* @__PURE__ */ jsx(StyledButton$2, {
-		ref,
+		ref: buttonRef,
 		as: Link,
 		disabled: isAriaDisabled(),
 		...props,
@@ -6096,7 +6105,8 @@ const chooseColorScheme = (name) => {
 		for (let i = 0; i < str.length; i += 1) sum = Math.trunc(Math.imul(multiplier, sum) + (str.codePointAt(i) ?? 0));
 		return sum;
 	};
-	return brandColorSchemeOptions[Math.abs(hashCode(name)) % brandColorSchemeOptions.length] ?? "blue";
+	const index = Math.abs(hashCode(name)) % brandColorSchemeOptions.length;
+	return brandColorSchemeOptions[index] ?? "blue";
 };
 /**
 * An avatar uses a photo or initials to represent an identity.
@@ -6404,7 +6414,8 @@ const applyMaxCharsToChildren = (children, maxChars) => {
 	if (isNil(maxChars)) return children;
 	if (isString(children)) return truncateString(children, maxChars);
 	if (isNumber(children)) return truncateString(String(children), maxChars);
-	return truncateString(typeof children === "object" ? JSON.stringify(children) : String(children), maxChars);
+	const textContent = typeof children === "object" ? JSON.stringify(children) : String(children);
+	return truncateString(textContent, maxChars);
 };
 const variantStyleMap$1 = {
 	hero: css`
@@ -6846,6 +6857,7 @@ const Breadcrumbs = ({ children, ...props }) => {
 	const { isXsAndDown } = useMq();
 	let crumbs = Children.toArray(children);
 	if (isXsAndDown) crumbs = crumbs.slice(-1);
+	const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
 		type: "text/css",
 		children: `
@@ -6856,7 +6868,7 @@ const Breadcrumbs = ({ children, ...props }) => {
 
         @container breadcrumbs (width < 100vw) {
           [data-wui-breadcrumb] {
-              max-width: ${Math.floor(100 / crumbs.length) - BUFFER_WIDTH}cqw;
+              max-width: ${crumbMaxWidth}cqw;
           }
         }
      `
@@ -7030,7 +7042,7 @@ const StyledFormControlLabel = styled.label`
   align-items: flex-start;
   gap: var(--wui-space-02);
   width: 100%;
-  color: var(--wui-color-tex);
+  color: var(--wui-color-text);
   font-size: var(--wui-typography-label-3-font-size);
   font-weight: var(--wui-typography-label-3-font-weight);
   line-height: var(--wui-typography-body-3-line-height);
@@ -7625,10 +7637,11 @@ const compositeOverWhite = (color, alpha = 1) => {
 const calculateContrast = ({ backgroundColor, foregroundColor = DEFAULT_COLOR_FOR_COMPARISON, backgroundOpacity = 1 }) => {
 	const backgroundColorAsRgb = convertToRgb(backgroundColor);
 	const foregroundColorAsRgb = convertToRgb(foregroundColor);
-	return wcagContrast(compositeOverWhite(backgroundColorAsRgb, backgroundOpacity), foregroundColorAsRgb);
+	const compositeBackground = compositeOverWhite(backgroundColorAsRgb, backgroundOpacity);
+	return wcagContrast(compositeBackground, foregroundColorAsRgb);
 };
 const snapValueToEdges = (value) => {
-	if (value > 1 - VALUE_CHANNEL_SNAP_EPSILON) return 1;
+	if (value > .9995) return 1;
 	if (value < VALUE_CHANNEL_SNAP_EPSILON) return 0;
 	return value;
 };
@@ -9332,9 +9345,10 @@ const drawGradientBackground = (ctx, width, height, hue) => {
 	for (let y = 0; y < height; y++) {
 		const v = 1 - y / (height - 1);
 		for (let x = 0; x < width; x++) {
+			const s = x / (width - 1);
 			const rgb = convertToRgb({
 				h: hue,
-				s: x / (width - 1),
+				s,
 				v,
 				mode: "hsv"
 			});
@@ -10702,10 +10716,11 @@ const useCreatePopoverAnchorRef = () => useRef(null);
 */
 const PopoverAnchor = ({ children }) => {
 	const sharedRef = usePopoverAnchor();
+	const callbackRef = useCallback((node) => {
+		if (sharedRef) sharedRef.current = node;
+	}, [sharedRef]);
 	return /* @__PURE__ */ jsx("div", {
-		ref: useCallback((node) => {
-			if (sharedRef) sharedRef.current = node;
-		}, [sharedRef]),
+		ref: callbackRef,
 		children
 	});
 };
@@ -12754,13 +12769,11 @@ const InputClickToCopy = ({ value, onCopy, disabled = false, ref, ...props }) =>
 //#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 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 = TEN_HOURS - ONE_HUNDREDTH_OF_A_SECOND;
+const MAX_TIME = 35999.99;
 const NUMBER_STRING_SET = /* @__PURE__ */ new Set([
 	"0",
 	"1",
@@ -14082,7 +14095,8 @@ const StyledSubTrigger = styled(Menu$1.SubmenuTrigger)`
 const SUBMENU_CLOSE_DELAY = 200;
 const SubMenuTrigger = ({ icon, ...props }) => {
 	const { isSmAndUp } = useMq();
-	return /* @__PURE__ */ jsx(isSmAndUp ? StyledSubTrigger : Menu$1.Item, {
+	const Trigger = isSmAndUp ? StyledSubTrigger : Menu$1.Item;
+	return /* @__PURE__ */ jsx(Trigger, {
 		nativeButton: true,
 		...isSmAndUp && { closeDelay: SUBMENU_CLOSE_DELAY },
 		render: /* @__PURE__ */ jsx(MenuItemButton, {
@@ -14464,8 +14478,7 @@ const modalExit = keyframes`
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-const positionStyleMap = {
-	centered: css`
+const centeredModalStyles = css`
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
@@ -14480,8 +14493,8 @@ const positionStyleMap = {
   &[data-closed] {
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
   }
-`,
-	"fixed-top": css`
+`;
+const fixedTopModalStyles = css`
   --wui-modal-screen-offset-top: 15vh;
   --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
@@ -14499,14 +14512,8 @@ const positionStyleMap = {
   &[data-closed] {
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
   }
-`,
-	"right-side-panel": css`
-  --wui-modal-screen-offset: var(--wui-space-05);
-
-  height: calc(100vh - var(--wui-modal-screen-offset) * 2);
-  top: var(--wui-modal-screen-offset);
-  right: var(--wui-modal-screen-offset);
-  animation: ${keyframes`
+`;
+const slideInRight = keyframes`
   from {
     opacity: 0;
     transform: translateX(100%);
@@ -14516,11 +14523,8 @@ const positionStyleMap = {
     opacity: 1;
     transform: translateX(0);
   }
-`} var(--wui-motion-duration-05) var(--wui-motion-ease-out);
-  transform-origin: right center;
-
-  &[data-closed] {
-    animation: ${keyframes`
+`;
+const slideOutRight = keyframes`
   from {
     opacity: 1;
     transform: translateX(0);
@@ -14530,7 +14534,21 @@ const positionStyleMap = {
     opacity: 0;
     transform: translateX(100%);
   }
-`} var(--wui-motion-duration-03) var(--wui-motion-ease-in) forwards;
+`;
+const positionStyleMap = {
+	centered: centeredModalStyles,
+	"fixed-top": fixedTopModalStyles,
+	"right-side-panel": css`
+  --wui-modal-screen-offset: var(--wui-space-05);
+
+  height: calc(100vh - var(--wui-modal-screen-offset) * 2);
+  top: var(--wui-modal-screen-offset);
+  right: var(--wui-modal-screen-offset);
+  animation: ${slideInRight} var(--wui-motion-duration-05) var(--wui-motion-ease-out);
+  transform-origin: right center;
+
+  &[data-closed] {
+    animation: ${slideOutRight} var(--wui-motion-duration-03) var(--wui-motion-ease-in) forwards;
   }
 `
 };