@wistia/ui 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.2
+ * @license @wistia/ui v0.0.4
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -58,6 +58,7 @@ __export(src_exports, {
   ellipsisFlexParentStyle: () => ellipsisFlexParentStyle,
   ellipsisStyle: () => ellipsisStyle,
   iconSizeMap: () => iconSizeMap,
+  mq: () => mq,
   useActiveMq: () => useActiveMq,
   useAriaLive: () => useAriaLive,
   useMq: () => useMq,
@@ -1300,6 +1301,52 @@ var copyToClipboard = async (textToCopy) => {
   });
 };
 
+// src/helpers/mq/mq.ts
+var import_polished = require("polished");
+
+// src/css/breakpoints.ts
+var breakpoints = {
+  xs: "0em",
+  // 0px
+  sm: "37.5em",
+  // 600px
+  md: "56.5625em",
+  // ~904px
+  lg: "77.5em",
+  // 1240px
+  xl: "90em"
+  // 1440px
+};
+
+// src/helpers/mq/mq.ts
+var getMaxWidth = (breakpoint) => {
+  const breakpointBuffer = 25e-4;
+  const [value, unit] = (0, import_polished.getValueAndUnit)(breakpoint);
+  return `@media (max-width: ${Math.max(value - breakpointBuffer, 0)}${unit})`;
+};
+var xsAndUp = () => `@media (min-width: ${breakpoints.xs})`;
+var smAndUp = () => `@media (min-width: ${breakpoints.sm})`;
+var mdAndUp = () => `@media (min-width: ${breakpoints.md})`;
+var lgAndUp = () => `@media (min-width: ${breakpoints.lg})`;
+var xlAndUp = () => `@media (min-width: ${breakpoints.xl})`;
+var xsAndDown = () => getMaxWidth(breakpoints.xs);
+var smAndDown = () => getMaxWidth(breakpoints.sm);
+var mdAndDown = () => getMaxWidth(breakpoints.md);
+var lgAndDown = () => getMaxWidth(breakpoints.lg);
+var xlAndDown = () => getMaxWidth(breakpoints.xl);
+var mq = {
+  xsAndUp,
+  smAndUp,
+  mdAndUp,
+  lgAndUp,
+  xlAndUp,
+  xsAndDown,
+  smAndDown,
+  mdAndDown,
+  lgAndDown,
+  xlAndDown
+};
+
 // src/hooks/useMq/useMq.ts
 var import_type_guards3 = require("@wistia/type-guards");
 
@@ -1330,20 +1377,6 @@ var useWindowSize = (interval = 0) => {
   return dimensions;
 };
 
-// src/css/breakpoints.ts
-var breakpoints = {
-  xs: "0em",
-  // 0px
-  sm: "37.5em",
-  // 600px
-  md: "56.5625em",
-  // ~904px
-  lg: "77.5em",
-  // 1240px
-  xl: "90em"
-  // 1440px
-};
-
 // src/hooks/useMq/useMq.ts
 var REM_SIZE = 16;
 var useMq = () => {
@@ -1718,7 +1751,7 @@ var buttonSizeStyles = {
   hero: buttonHeroStyles
 };
 
-// src/helpers/getColorScheme/getColorScheme.ts
+// src/private/getColorScheme/getColorScheme.ts
 var import_styled_components13 = require("styled-components");
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
@@ -4998,7 +5031,7 @@ var isButton = (props) => (0, import_type_guards8.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards8.isNotUndefined)(props.href);
 var StyledLink = import_styled_components14.default.a`
   ${({ href }) => (0, import_type_guards8.isNil)(href) && buttonResetCss};
-  ${({ colorScheme }) => getColorScheme(colorScheme)}
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--typography-family-default);
   color: var(--color-text-link);
@@ -5037,7 +5070,7 @@ var Link = (0, import_react7.forwardRef)(
       }
     };
     const commonProps = {
-      colorScheme,
+      $colorScheme: colorScheme,
       $underline: underline,
       onClick: handleClick
     };
@@ -5056,14 +5089,25 @@ var Link = (0, import_react7.forwardRef)(
     }
     if (isLink(props)) {
       const externalLinkProps = type === "external" ? { target: "_blank", rel: "noopener noreferrer" } : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+      const combinedProps = {
+        ref,
+        ...props,
+        ...commonProps,
+        ...externalLinkProps
+      };
+      return inRouterContext && type !== "external" ? /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
         StyledLink,
         {
-          ref,
-          as: inRouterContext ? import_react_router_dom.Link : "a",
-          ...props,
-          ...commonProps,
-          ...externalLinkProps,
+          as: import_react_router_dom.Link,
+          ...combinedProps,
+          to: to ?? "",
+          children
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+        StyledLink,
+        {
+          as: "a",
+          ...combinedProps,
           href: to,
           children
         }
@@ -5207,38 +5251,6 @@ Button.displayName = "Button";
 // src/components/ButtonGroup/ButtonGroup.tsx
 var import_styled_components16 = __toESM(require("styled-components"), 1);
 var import_type_guards10 = require("@wistia/type-guards");
-
-// src/helpers/mq/mq.ts
-var import_polished = require("polished");
-var getMaxWidth = (breakpoint) => {
-  const breakpointBuffer = 25e-4;
-  const [value, unit] = (0, import_polished.getValueAndUnit)(breakpoint);
-  return `@media (max-width: ${Math.max(value - breakpointBuffer, 0)}${unit})`;
-};
-var xsAndUp = () => `@media (min-width: ${breakpoints.xs})`;
-var smAndUp = () => `@media (min-width: ${breakpoints.sm})`;
-var mdAndUp = () => `@media (min-width: ${breakpoints.md})`;
-var lgAndUp = () => `@media (min-width: ${breakpoints.lg})`;
-var xlAndUp = () => `@media (min-width: ${breakpoints.xl})`;
-var xsAndDown = () => getMaxWidth(breakpoints.xs);
-var smAndDown = () => getMaxWidth(breakpoints.sm);
-var mdAndDown = () => getMaxWidth(breakpoints.md);
-var lgAndDown = () => getMaxWidth(breakpoints.lg);
-var xlAndDown = () => getMaxWidth(breakpoints.xl);
-var mq = {
-  xsAndUp,
-  smAndUp,
-  mdAndUp,
-  lgAndUp,
-  xlAndUp,
-  xsAndDown,
-  smAndDown,
-  mdAndDown,
-  lgAndDown,
-  xlAndDown
-};
-
-// src/components/ButtonGroup/ButtonGroup.tsx
 var import_jsx_runtime159 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
@@ -5998,6 +6010,7 @@ WistiaLogo.displayName = "WistiaLogo";
   ellipsisFlexParentStyle,
   ellipsisStyle,
   iconSizeMap,
+  mq,
   useActiveMq,
   useAriaLive,
   useMq,