@wistia/ui 0.8.20 → 0.8.21

package/dist/index.cjs

@@ -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.
  *
@@ -2141,7 +2141,7 @@ var useClipboard = (textToCopy, timeout = 1500) => {
   return [onCopy, hasCopied, failedToCopy];
 };
 
-// src/hooks/useFilePicker/index.ts
+// src/hooks/useFilePicker/useFilePicker.tsx
 var import_use_file_picker = require("use-file-picker");
 var import_validators = require("use-file-picker/validators");
 
@@ -7219,7 +7219,7 @@ var StyledButtonContent = import_styled_components21.default.div`
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
 var StyledButtonContentLabel = import_styled_components21.default.span`
-  flex: 1;
+  flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
 `;
 var StyledButtonLoading = import_styled_components21.default.div`
   position: absolute;
@@ -7229,7 +7229,8 @@ var ButtonContent = ({
   isLoading = false,
   leftIcon,
   rightIcon,
-  children
+  children,
+  fullWidth = false
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
     isLoading ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(StyledButtonLoading, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { type: "spinner" }) }) : null,
@@ -7241,7 +7242,7 @@ var ButtonContent = ({
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
-          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(StyledButtonContentLabel, { children }),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(StyledButtonContentLabel, { $fullWidth: fullWidth, children }),
           rightIcon ?? null
         ]
       }
@@ -7291,6 +7292,7 @@ var Button = (0, import_react22.forwardRef)(
           children: unstyled ? children : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
             ButtonContent,
             {
+              fullWidth: responsiveFullWidth,
               isLoading,
               leftIcon,
               rightIcon,
@@ -7320,6 +7322,7 @@ var Button = (0, import_react22.forwardRef)(
         children: unstyled ? children : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           ButtonContent,
           {
+            fullWidth: responsiveFullWidth,
             isLoading,
             leftIcon,
             rightIcon,
@@ -9129,6 +9132,54 @@ var import_react35 = require("react");
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
 var import_styled_components45 = __toESM(require("styled-components"));
 var import_jsx_runtime218 = require("react/jsx-runtime");
+var hide = import_styled_components45.keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`;
+var slideDownAndFade = import_styled_components45.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var slideLeftAndFade = import_styled_components45.keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+var slideUpAndFade = import_styled_components45.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var slideRightAndFade = import_styled_components45.keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
 var StyledContent = (0, import_styled_components45.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
@@ -9139,6 +9190,8 @@ var StyledContent = (0, import_styled_components45.default)(import_react_tooltip
   --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);
@@ -9147,26 +9200,30 @@ var StyledContent = (0, import_styled_components45.default)(import_react_tooltip
   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;