@wistia/vhs 3.0.1-beta.a963c7a8.8b7d153 → 3.0.1-beta.cd0ec91c.fd8df29

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v3.0.1-beta.a963c7a8.8b7d153
+ * @license @wistia/vhs v3.0.1-beta.cd0ec91c.fd8df29
  *
  * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
  *
@@ -6642,8 +6642,149 @@ Link.displayName = "Link_VHS";
 
 // src/components/ButtonLink/ButtonLink.tsx
 var import_jsx_runtime140 = require("react/jsx-runtime");
+var buttonLinkStyle = import_styled_components29.css`
+  align-items: center;
+  background-color: transparent;
+  background-image: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  text-align: left;
+  vertical-align: middle;
+  appearance: none;
+  border-radius: ${({ theme: theme2 }) => theme2.button.borderRadius};
+  border-style: solid;
+  border-width: 1px;
+  font-weight: ${({ theme: theme2 }) => theme2.font.weight.medium};
+  text-decoration: none;
+  transition: all ${({ theme: theme2 }) => theme2.duration.productive.moderate};
+
+  &:focus {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    opacity: 0.4;
+  }
+
+  /* border-radius */
+  ${({ $square }) => $square === true && import_styled_components29.css`
+      border-radius: 0;
+    `}
+
+  /* label wrapping */
+  white-space: ${({ $labelWrap }) => $labelWrap === true ? "wrap" : "nowrap"};
+
+  /* size styles */
+  ${({ $size, theme: theme2 }) => {
+  if ($size === "lg") {
+    return import_styled_components29.css`
+        font-size: 16px;
+        line-height: 24px;
+        padding: ${theme2.spacing.space02} ${theme2.spacing.space04};
+      `;
+  }
+  if ($size === "md") {
+    return import_styled_components29.css`
+        font-size: 14px;
+        line-height: 20px;
+        padding: ${theme2.spacing.space02} ${theme2.spacing.space03};
+      `;
+  }
+  if ($size === "sm") {
+    return import_styled_components29.css`
+        font-size: 12px;
+        line-height: 18px;
+        padding: 2px ${theme2.spacing.space02};
+      `;
+  }
+  return import_styled_components29.css``;
+}}
+
+  /* full width */
+  ${({ $fullWidth }) => $fullWidth && import_styled_components29.css`
+      width: 100%;
+    `}
+
+  /* variant styles */
+  ${({ $variant, $buttonColor }) => {
+  if ($variant === "primary" || $variant === "dangerous") {
+    return import_styled_components29.css`
+        background-color: ${$buttonColor};
+        border-color: ${$buttonColor};
+        color: white;
+
+        &:focus-visible {
+          box-shadow: inset 0 0 0 1px white;
+        }
+
+        &:hover:not([aria-disabled='true']) {
+          background-color: ${$buttonColor};
+          border-color: ${$buttonColor};
+          opacity: 0.9;
+        }
+
+        &:active:not([aria-disabled='true']) {
+          background-color: ${$buttonColor};
+          border-color: ${$buttonColor};
+          opacity: 0.8;
+        }
+      `;
+  }
+  if ($variant === "secondary") {
+    return import_styled_components29.css`
+        background-color: transparent;
+        border-color: ${$buttonColor};
+        color: ${$buttonColor};
+
+        &:focus-visible {
+          box-shadow:
+            inset 0 0 0 1px white,
+            inset 0 0 0 2px ${$buttonColor};
+        }
+
+        &:hover:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 10%);
+        }
+
+        &:active:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 20%);
+        }
+      `;
+  }
+  if ($variant === "tertiary") {
+    return import_styled_components29.css`
+        background-color: transparent;
+        border-color: transparent;
+        color: ${$buttonColor};
+
+        &:focus-visible {
+          border-color: ${$buttonColor};
+          box-shadow:
+            inset 0 0 0 1px white,
+            inset 0 0 0 2px ${$buttonColor};
+        }
+
+        &:hover:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 10%);
+        }
+
+        &:active:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 20%);
+        }
+      `;
+  }
+  return import_styled_components29.css``;
+}}
+`;
 var StyledButtonLink = (0, import_styled_components29.styled)(Link)`
-  ${buttonStyle};
+  ${buttonLinkStyle};
 
   /* Links are disabled by removing their href */
   &:not([href]) {
@@ -6697,10 +6838,10 @@ var ButtonLink = (0, import_react35.forwardRef)(
         $square: square,
         $textAlign: textAlign,
         $variant: variant,
-        beforeAction,
+        ...beforeAction && { beforeAction },
         disabled,
         href,
-        params,
+        ...params && { params },
         type,
         unstyled: true,
         ...otherProps,