@wistia/ui 0.8.19 → 0.8.20-beta.a0831c5f.4f35b1b

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.19
+ * @license @wistia/ui v0.8.20-beta.a0831c5f.4f35b1b
  *
  * 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");
 
@@ -2424,8 +2424,7 @@ var noOpFn = () => {
 // src/private/hooks/useEvent/useEvent.ts
 var isEventTargetSupported = (eventTarget) => (
   // @ts-expect-error the compiler thinks that addEventListener may not exist on eventTarget, but we still need to check it.
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  !!(typeof eventTarget === "object" && eventTarget?.addEventListener)
+  Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener)
 );
 var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
   const savedEventHandler = (0, import_react11.useRef)();
@@ -2486,7 +2485,7 @@ var useLocalStorage = (key, initialValue, storage = window.localStorage) => {
   const [storedValue, setStoredValue] = (0, import_react13.useState)(() => {
     try {
       const item = storage.getItem(key);
-      return item !== null && !!item ? JSON.parse(item) : initialValue;
+      return item !== null && Boolean(item) ? JSON.parse(item) : initialValue;
     } catch (error) {
       console.log(error);
       return initialValue;
@@ -7095,7 +7094,7 @@ var StyledLink = import_styled_components20.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: var(--wui-typography-family-default);
-  color: var(--wui-color-text-link);
+  color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
   display: inline-flex;
   align-items: baseline;
@@ -7220,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;
@@ -7230,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,
@@ -7242,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
         ]
       }
@@ -7292,6 +7292,7 @@ var Button = (0, import_react22.forwardRef)(
           children: unstyled ? children : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
             ButtonContent,
             {
+              fullWidth: responsiveFullWidth,
               isLoading,
               leftIcon,
               rightIcon,
@@ -7321,6 +7322,7 @@ var Button = (0, import_react22.forwardRef)(
         children: unstyled ? children : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           ButtonContent,
           {
+            fullWidth: responsiveFullWidth,
             isLoading,
             leftIcon,
             rightIcon,
@@ -9130,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);
@@ -9140,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);
@@ -9148,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;