@wistia/ui 0.8.20 → 0.8.21

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.20
+ * @license @wistia/ui v0.8.21
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2005,7 +2005,7 @@ var useClipboard = (textToCopy, timeout = 1500) => {
   return [onCopy, hasCopied, failedToCopy];
 };
 
-// src/hooks/useFilePicker/index.ts
+// src/hooks/useFilePicker/useFilePicker.tsx
 import { useFilePicker, useImperativeFilePicker } from "use-file-picker";
 import {
   FileAmountLimitValidator,
@@ -7089,7 +7089,7 @@ var StyledButtonContent = styled5.div`
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
 var StyledButtonContentLabel = styled5.span`
-  flex: 1;
+  flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
 `;
 var StyledButtonLoading = styled5.div`
   position: absolute;
@@ -7099,7 +7099,8 @@ var ButtonContent = ({
   isLoading = false,
   leftIcon,
   rightIcon,
-  children
+  children,
+  fullWidth = false
 }) => {
   return /* @__PURE__ */ jsxs8(Fragment, { children: [
     isLoading ? /* @__PURE__ */ jsx193(StyledButtonLoading, { children: /* @__PURE__ */ jsx193(Icon, { type: "spinner" }) }) : null,
@@ -7111,7 +7112,7 @@ var ButtonContent = ({
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
-          /* @__PURE__ */ jsx193(StyledButtonContentLabel, { children }),
+          /* @__PURE__ */ jsx193(StyledButtonContentLabel, { $fullWidth: fullWidth, children }),
           rightIcon ?? null
         ]
       }
@@ -7161,6 +7162,7 @@ var Button = forwardRef2(
           children: unstyled ? children : /* @__PURE__ */ jsx193(
             ButtonContent,
             {
+              fullWidth: responsiveFullWidth,
               isLoading,
               leftIcon,
               rightIcon,
@@ -7190,6 +7192,7 @@ var Button = forwardRef2(
         children: unstyled ? children : /* @__PURE__ */ jsx193(
           ButtonContent,
           {
+            fullWidth: responsiveFullWidth,
             isLoading,
             leftIcon,
             rightIcon,
@@ -9003,8 +9006,56 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled29 from "styled-components";
+import styled29, { keyframes as keyframes2 } from "styled-components";
 import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
+var hide = keyframes2`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`;
+var slideDownAndFade = keyframes2`
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var slideLeftAndFade = keyframes2`
+  from {
+    opacity: 0;
+    transform: translateX(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+var slideUpAndFade = keyframes2`
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var slideRightAndFade = keyframes2`
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
 var StyledContent = styled29(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
@@ -9015,6 +9066,8 @@ var StyledContent = styled29(TooltipContent)`
   --tooltip-font-weight: var(--wui-typography-label-4-weight);
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
+  --tooltip-animation-duration: var(--wui-motion-duration-04);
+  --tooltip-animation-timing-function: var(--wui-motion-ease-out);
 
   font-family: var(--tooltip-font-family);
   font-size: var(--tooltip-font-size);
@@ -9023,26 +9076,30 @@ var StyledContent = styled29(TooltipContent)`
   background-color: var(--tooltip-bg);
   color: var(--tooltip-color);
   user-select: none;
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-duration: var(--tooltip-animation-duration);
+  animation-timing-function: var(--tooltip-animation-timing-function);
   will-change: transform, opacity;
   max-width: 30em;
   z-index: var(--wui-zindex-tooltip);
 
+  &[data-state='closed'] {
+    animation-name: ${hide};
+  }
+
   &[data-state='delayed-open'][data-side='top'] {
-    animation-name: slideDownAndFade;
+    animation-name: ${slideUpAndFade};
   }
 
   &[data-state='delayed-open'][data-side='right'] {
-    animation-name: slideLeftAndFade;
+    animation-name: ${slideRightAndFade};
   }
 
   &[data-state='delayed-open'][data-side='bottom'] {
-    animation-name: slideUpAndFade;
+    animation-name: ${slideDownAndFade};
   }
 
   &[data-state='delayed-open'][data-side='left'] {
-    animation-name: slideRightAndFade;
+    animation-name: ${slideLeftAndFade};
   }
 `;
 var VISUAL_OFFSET = 6;
@@ -10031,7 +10088,7 @@ var InputClickToCopy = forwardRef14(
 InputClickToCopy.displayName = "InputClickToCopy";
 
 // src/components/Menu/Menu.tsx
-import styled39, { css as css29, keyframes as keyframes2 } from "styled-components";
+import styled39, { css as css29, keyframes as keyframes3 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -10048,7 +10105,7 @@ var useMenuContext = () => useContext5(MenuContext);
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx231, jsxs as jsxs25 } from "react/jsx-runtime";
-var open = keyframes2`
+var open = keyframes3`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -10058,7 +10115,7 @@ var open = keyframes2`
     transform: scale(1);
   }
 `;
-var close = keyframes2`
+var close = keyframes3`
   from {
     opacity: 1;
     transform: scale(1);