@wistia/ui 0.8.20 → 0.8.21-beta.332e4674.e66612c

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.20
+ * @license @wistia/ui v0.8.21-beta.332e4674.e66612c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1445,13 +1445,13 @@ var motionTokens = import_styled_components9.css`
   --wui-motion-duration-05: 400ms;
   --wui-motion-duration-06: 700ms;
 
-  @media (prefers-reduced-motion) {
-    --wui-motion-duration-01: 0ms;
-    --wui-motion-duration-02: 0ms;
-    --wui-motion-duration-03: 0ms;
-    --wui-motion-duration-04: 0ms;
-    --wui-motion-duration-05: 0ms;
-    --wui-motion-duration-06: 0ms;
+  @media (prefers-reduced-motion: reduce) {
+    --wui-motion-duration-01: 0.01ms;
+    --wui-motion-duration-02: 0.01ms;
+    --wui-motion-duration-03: 0.01ms;
+    --wui-motion-duration-04: 0.01ms;
+    --wui-motion-duration-05: 0.01ms;
+    --wui-motion-duration-06: 0.01ms;
   }
 
   /* Easings */
@@ -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,
@@ -8557,12 +8560,19 @@ var import_styled_components38 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
 var import_type_guards27 = require("@wistia/type-guards");
 var import_jsx_runtime211 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components38.default.div.attrs({ "data-wui-collapsible-content": true })`
+var ClampedContent = import_styled_components38.default.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if ((0, import_type_guards27.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(ClampedContent, { $clamp: clamp, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+      ClampedContent,
+      {
+        $clamp: clamp,
+        "data-wui-collapsible-content": "true",
+        children
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
     children,
@@ -9129,6 +9139,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 +9197,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 +9207,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;
@@ -10469,15 +10533,19 @@ MenuItemButton.displayName = "MenuItemButton";
 var import_styled_components59 = __toESM(require("styled-components"));
 var import_jsx_runtime234 = require("react/jsx-runtime");
 var StyledMenuItemLabel = import_styled_components59.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components59.default)(Text).attrs({
-  variant: "body4",
-  prominence: "secondary"
-})``;
+var StyledMenuItemDescription = (0, import_styled_components59.default)(Text)``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+    StyledMenuItemDescription,
+    {
+      prominence: "secondary",
+      variant: "body4",
+      children
+    }
+  );
 };
 
 // src/components/Menu/SubMenu.tsx