@wistia/ui 0.8.4 → 0.8.5-beta.7902c369.c4c8fbc

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.4
+ * @license @wistia/ui v0.8.5-beta.7902c369.c4c8fbc
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10367,8 +10367,10 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 import {
-  DropdownMenuCheckboxItem
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator as DropdownMenuItemIndicator2
 } from "@radix-ui/react-dropdown-menu";
+import { isNotNil as isNotNil21 } from "@wistia/type-guards";
 import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs29(
@@ -10442,7 +10444,8 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx238(CheckboxIndicator, { checked })
+          leftIcon: isNotNil21(props.icon) ? props.icon : /* @__PURE__ */ jsx238(CheckboxIndicator, { checked }),
+          rightIcon: isNotNil21(props.icon) ? /* @__PURE__ */ jsx238(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx238(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -10454,7 +10457,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 import { forwardRef as forwardRef18 } from "react";
 import styled47 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil22 } from "@wistia/type-guards";
+import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled44 from "styled-components";
@@ -10517,7 +10520,7 @@ import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef9, useEffect as useEffect7 } from "react";
-import { isNotNil as isNotNil21 } from "@wistia/type-guards";
+import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef9(null);
   useEffect7(() => {
@@ -10525,7 +10528,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect7(() => {
     return () => {
-      if (isNotNil21(previouslyFocusedRef.current)) {
+      if (isNotNil22(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -10672,7 +10675,7 @@ var Modal = forwardRef18(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil22(onRequestClose)) {
+          if (!open2 && isNotNil23(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -10685,7 +10688,7 @@ var Modal = forwardRef18(
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil22(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil23(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10719,9 +10722,9 @@ import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close
 import styled48, { css as css29 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil23 } from "@wistia/type-guards";
+import { isNotNil as isNotNil24 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil23(onOpenChange) && isNotNil23(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil24(onOpenChange) && isNotNil24(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
@@ -10792,7 +10795,7 @@ Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 import styled49 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil24 } from "@wistia/type-guards";
+import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsx as jsx245, jsxs as jsxs33 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled49.div`
   --progress-bar-height: 8px;
@@ -10847,7 +10850,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs33(ProgressBarWrapper, { children: [
-    isNotNil24(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil25(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx245(
       StyledProgressBar,
       {
@@ -10863,7 +10866,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil24(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil25(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -11180,7 +11183,7 @@ SegmentedControl.displayName = "SegmentedControl";
 import { forwardRef as forwardRef21, useEffect as useEffect8, useRef as useRef10 } from "react";
 import styled53, { css as css32 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil25 } from "@wistia/type-guards";
+import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 import { jsxs as jsxs36 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css32`
   all: unset; /* ToggleGroupItem is a button element */
@@ -11287,8 +11290,8 @@ var SegmentedControlItem = forwardRef21(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil25(label),
-        "aria-label": isNotNil25(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil26(label),
+        "aria-label": isNotNil26(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -11429,7 +11432,7 @@ Select.displayName = "Select";
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef23 } from "react";
 import styled55 from "styled-components";
-import { isNotNil as isNotNil26 } from "@wistia/type-guards";
+import { isNotNil as isNotNil27 } from "@wistia/type-guards";
 import { jsx as jsx251, jsxs as jsxs38 } from "react/jsx-runtime";
 var StyledItem = styled55(Item)`
   ${variantStyleMap2.body3};
@@ -11473,7 +11476,7 @@ var SelectOption = forwardRef23(
               type: "checkmark"
             }
           ) }) }),
-          isNotNil26(selectedDisplayValue) ? /* @__PURE__ */ jsxs38("div", { children: [
+          isNotNil27(selectedDisplayValue) ? /* @__PURE__ */ jsxs38("div", { children: [
             children,
             /* @__PURE__ */ jsx251("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx251(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx251(ItemText, { children })
@@ -11774,7 +11777,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 import { forwardRef as forwardRef26, useState as useState11 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil28, isNil as isNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil29, isNil as isNil15 } from "@wistia/type-guards";
 import styled68 from "styled-components";
 
 // src/components/Tabs/TabPanel.tsx
@@ -11830,7 +11833,7 @@ TabList.displayName = "TabList";
 import { forwardRef as forwardRef25, useEffect as useEffect9, useRef as useRef11 } from "react";
 import styled66 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil27 } from "@wistia/type-guards";
+import { isNotNil as isNotNil28 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext9, useContext as useContext8 } from "react";
@@ -11888,8 +11891,8 @@ var TabItem = forwardRef25(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil27(label),
-        "aria-label": isNotNil27(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil28(label),
+        "aria-label": isNotNil28(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12030,7 +12033,7 @@ var Tabs = forwardRef26(
                       value
                     );
                   }
-                  if (isNotNil28(label)) {
+                  if (isNotNil29(label)) {
                     return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
@@ -12042,7 +12045,7 @@ var Tabs = forwardRef26(
                       value
                     );
                   }
-                  if (isNotNil28(ariaLabelForTab)) {
+                  if (isNotNil29(ariaLabelForTab)) {
                     return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
@@ -12085,7 +12088,7 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef28 } from "react";
 import styled69 from "styled-components";
-import { isNil as isNil16, isNotNil as isNotNil29, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
+import { isNil as isNil16, isNotNil as isNotNil30, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
 import { Fragment as Fragment8, jsx as jsx265, jsxs as jsxs43 } from "react/jsx-runtime";
 var TagLabel = styled69.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12202,8 +12205,8 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = forwardRef28(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = isNotNil29(icon);
-    const labelProps = isNotNil29(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
+    const hasIcon = isNotNil30(icon);
+    const labelProps = isNotNil30(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs43(
       StyledTag,
       {
@@ -12239,7 +12242,7 @@ Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled70, { css as css36 } from "styled-components";
-import { isNotNil as isNotNil30 } from "@wistia/type-guards";
+import { isNotNil as isNotNil31 } from "@wistia/type-guards";
 import { jsx as jsx266, jsxs as jsxs44 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -12352,7 +12355,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx266("title", { children: title }),
-        isNotNil30(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
+        isNotNil31(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12364,7 +12367,7 @@ WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled71 from "styled-components";
-import { isNotNil as isNotNil31 } from "@wistia/type-guards";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 import { jsx as jsx267, jsxs as jsxs45 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled71.div`
   align-items: center;
@@ -12392,7 +12395,7 @@ var StyledThumbnailBadge = styled71.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs45(StyledThumbnailBadge, { ...props, children: [
-    isNotNil31(icon) && icon,
+    isNotNil32(icon) && icon,
     /* @__PURE__ */ jsx267("span", { children: label })
   ] });
 };
@@ -12401,10 +12404,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef29 } from "react";
 import styled72 from "styled-components";
-import { isNil as isNil17, isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { isNil as isNil17, isNotNil as isNotNil34 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 import { css as css37 } from "styled-components";
 var gradients = {
   defaultDarkOne: css37`
@@ -12532,7 +12535,7 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil32(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil33(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
@@ -12566,7 +12569,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = styled72.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil33($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil34($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil17($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -12574,11 +12577,15 @@ var StyledThumbnail = styled72.div`
   background-position: center center;
   background-size: cover;
   aspect-ratio: 16 / 9;
-  border-radius: var(--wui-border-radius-01);
   display: flex;
   overflow: hidden;
   position: relative;
   width: ${({ $width }) => $width};
+
+  &,
+  img {
+    border-radius: calc(8% * (9 / 16)) / 8%;
+  }
 `;
 var Thumbnail = forwardRef29(
   ({
@@ -12589,7 +12596,7 @@ var Thumbnail = forwardRef29(
     children,
     ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && isNotNil33(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && isNotNil34(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ jsxs46(
       StyledThumbnail,
       {
@@ -12599,8 +12606,8 @@ var Thumbnail = forwardRef29(
         $width: width,
         ...props,
         children: [
-          isNotNil33(children) ? children : null,
-          isNotNil33(thumbnailUrl) ? /* @__PURE__ */ jsx268(
+          isNotNil34(children) ? children : null,
+          isNotNil34(thumbnailUrl) ? /* @__PURE__ */ jsx268(
             ThumbnailImage,
             {
               thumbnailImageType,