@wistia/ui 0.26.3 → 0.26.5-beta.dc708dcd.1bbd3a2

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.26.3
+ * @license @wistia/ui v0.26.5-beta.dc708dcd.1bbd3a2
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -1093,6 +1093,175 @@ const dateTime = {
 	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`
+    background-color: #222d66;
+    background-image:
+      radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
+      radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
+  `,
+	defaultDarkTwo: css`
+    background-color: #222d66;
+    background-image:
+      radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
+      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+	defaultLightOne: css`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
+      radial-gradient(farthest-corner at top left, #ccd5ff, transparent 65%),
+      radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
+  `,
+	defaultLightTwo: css`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(ellipse at top, #ccd5ff, transparent),
+      radial-gradient(ellipse at bottom, #6b84ff, transparent);
+  `,
+	defaultMidOne: css`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
+      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
+  `,
+	defaultMidTwo: css`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(ellipse at top, #2949e5, transparent),
+      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
+  `,
+	green: css`
+    background-color: #fafffa;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #268713, transparent 50%),
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
+  `,
+	greenWithPop: css`
+    background-color: #fafffa;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
+  `,
+	pink: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
+      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
+      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
+  `,
+	pinkWithPop: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
+      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
+      radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
+  `,
+	playfulGradientOne: css`
+    background-color: #f7f8ff;
+    background-image:
+      radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
+      radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
+  `,
+	playfulGradientTwo: css`
+    background-color: #f7f8ff;
+    background-image:
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
+      radial-gradient(farthest-corner at bottom right, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+	purple: css`
+    background-color: #f2caff;
+    background-image:
+      radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
+      radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
+  `,
+	purpleWithPop: css`
+    background-color: #f2caff;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
+      radial-gradient(farthest-corner at top left, #d65cff, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+	yellow: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
+      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
+  `,
+	yellowWithPop: css`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
+      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 55%);
+  `
+};
+const gradientMap = Object.keys(gradients);
+/**
+* Retrieves the CSS background gradient corresponding to the given gradient name.
+* If the specified gradient name is not found, the default gradient ('defaultDarkOne') is returned.
+* @param {GradientName} gradientName - The name of the gradient to retrieve.
+* @returns {CssStyleType} The CSS string representing the specified gradient.
+*/
+const getBackgroundGradient = (gradientName) => {
+	return isNotNil(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+};
+//#endregion
+//#region src/helpers/getBackgroundGradient/getSemiRandomBackgroundGradient.ts
+const MULTIPLIER = 31;
+/**
+* Retrieves a semi-random background gradient based on the given id.
+*
+* @param {string} id - The id to use to generate the semi-random background gradient.
+* @returns {GradientName} gradientName
+*/
+const getSemiRandomBackgroundGradient = (id) => {
+	if (!(typeof id === "string" && id)) return gradientMap[0];
+	const hashCode = Array.from(id).reduce((num, char) => Math.imul(MULTIPLIER, num) + char.charCodeAt(0) || 0, 0);
+	return gradientMap[Math.abs(hashCode) % gradientMap.length];
+};
+//#endregion
 //#region src/helpers/mergeRefs/mergeRefs.ts
 const mergeRefs = (refs) => (value) => {
 	refs.forEach((ref) => {
@@ -1142,6 +1311,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);
@@ -15417,141 +15595,6 @@ const ThumbnailBadge = ({ icon, label, ...props }) => {
 };
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 //#endregion
-//#region src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-const gradients = {
-	defaultDarkOne: css`
-    background-color: #222d66;
-    background-image:
-      radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
-      radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
-  `,
-	defaultDarkTwo: css`
-    background-color: #222d66;
-    background-image:
-      radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
-      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
-  `,
-	defaultLightOne: css`
-    background-color: #ccd5ff;
-    background-image:
-      radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
-      radial-gradient(farthest-corner at top left, #ccd5ff, transparent 65%),
-      radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
-  `,
-	defaultLightTwo: css`
-    background-color: #ccd5ff;
-    background-image:
-      radial-gradient(ellipse at top, #ccd5ff, transparent),
-      radial-gradient(ellipse at bottom, #6b84ff, transparent);
-  `,
-	defaultMidOne: css`
-    background-color: #6b84ff;
-    background-image:
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
-      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
-  `,
-	defaultMidTwo: css`
-    background-color: #6b84ff;
-    background-image:
-      radial-gradient(ellipse at top, #2949e5, transparent),
-      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
-  `,
-	green: css`
-    background-color: #fafffa;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
-      radial-gradient(farthest-corner at top right, #268713, transparent 50%),
-      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
-  `,
-	greenWithPop: css`
-    background-color: #fafffa;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
-  `,
-	pink: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
-      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
-      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
-  `,
-	pinkWithPop: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
-      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
-      radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
-  `,
-	playfulGradientOne: css`
-    background-color: #f7f8ff;
-    background-image:
-      radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
-      radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
-  `,
-	playfulGradientTwo: css`
-    background-color: #f7f8ff;
-    background-image:
-      radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
-      radial-gradient(farthest-corner at bottom right, #eff18d, transparent 50%),
-      radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
-  `,
-	purple: css`
-    background-color: #f2caff;
-    background-image:
-      radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
-      radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
-  `,
-	purpleWithPop: css`
-    background-color: #f2caff;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
-      radial-gradient(farthest-corner at top left, #d65cff, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
-      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
-  `,
-	yellow: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
-      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
-      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
-  `,
-	yellowWithPop: css`
-    background-color: #fffff0;
-    background-image:
-      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
-      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
-      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
-      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 55%);
-  `
-};
-/**
-* Retrieves the CSS background gradient corresponding to the given gradient name.
-* If the specified gradient name is not found, the default gradient ('defaultDarkOne') is returned.
-* @param {GradientName} gradientName - The name of the gradient to retrieve.
-* @returns {CssStyleType} The CSS string representing the specified gradient.
-*/
-const getBackgroundGradient = (gradientName) => {
-	return isNotNil(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
-};
-//#endregion
 //#region src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 const ScrubLine = styled.div`
   position: absolute;
@@ -15965,6 +16008,6 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 //#endregion
-export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, 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, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, iconSizeMap, isKeyboardKey, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, 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, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map