@wistia/ui 0.0.2 → 0.0.4

package/dist/index.d.cts

@@ -17,6 +17,19 @@ declare const UIProvider: ({ children }: UIProviderProps) => react_jsx_runtime.J
  */
 declare const copyToClipboard: (textToCopy: string) => Promise<void>;
 
+declare const mq: {
+    xsAndUp: () => string;
+    smAndUp: () => string;
+    mdAndUp: () => string;
+    lgAndUp: () => string;
+    xlAndUp: () => string;
+    xsAndDown: () => string;
+    smAndDown: () => string;
+    mdAndDown: () => string;
+    lgAndDown: () => string;
+    xlAndDown: () => string;
+};
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -1006,4 +1019,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };

package/dist/index.d.ts

@@ -17,6 +17,19 @@ declare const UIProvider: ({ children }: UIProviderProps) => react_jsx_runtime.J
  */
 declare const copyToClipboard: (textToCopy: string) => Promise<void>;
 
+declare const mq: {
+    xsAndUp: () => string;
+    smAndUp: () => string;
+    mdAndUp: () => string;
+    lgAndUp: () => string;
+    xlAndUp: () => string;
+    xsAndDown: () => string;
+    smAndDown: () => string;
+    mdAndDown: () => string;
+    lgAndDown: () => string;
+    xlAndDown: () => string;
+};
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -1006,4 +1019,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };

package/dist/index.mjs

@@ -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.
  *
@@ -1243,6 +1243,52 @@ var copyToClipboard = async (textToCopy) => {
   });
 };
 
+// src/helpers/mq/mq.ts
+import { getValueAndUnit } from "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] = 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
 import { isBoolean } from "@wistia/type-guards";
 
@@ -1273,20 +1319,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 = () => {
@@ -1661,7 +1693,7 @@ var buttonSizeStyles = {
   hero: buttonHeroStyles
 };
 
-// src/helpers/getColorScheme/getColorScheme.ts
+// src/private/getColorScheme/getColorScheme.ts
 import { css as css11 } from "styled-components";
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
@@ -4941,7 +4973,7 @@ var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined2(props.href);
 var StyledLink = styled2.a`
   ${({ href }) => isNil5(href) && buttonResetCss};
-  ${({ colorScheme }) => getColorScheme(colorScheme)}
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--typography-family-default);
   color: var(--color-text-link);
@@ -4980,7 +5012,7 @@ var Link = forwardRef(
       }
     };
     const commonProps = {
-      colorScheme,
+      $colorScheme: colorScheme,
       $underline: underline,
       onClick: handleClick
     };
@@ -4999,14 +5031,25 @@ var Link = forwardRef(
     }
     if (isLink(props)) {
       const externalLinkProps = type === "external" ? { target: "_blank", rel: "noopener noreferrer" } : null;
-      return /* @__PURE__ */ jsx157(
+      const combinedProps = {
+        ref,
+        ...props,
+        ...commonProps,
+        ...externalLinkProps
+      };
+      return inRouterContext && type !== "external" ? /* @__PURE__ */ jsx157(
         StyledLink,
         {
-          ref,
-          as: inRouterContext ? RouterLink : "a",
-          ...props,
-          ...commonProps,
-          ...externalLinkProps,
+          as: RouterLink,
+          ...combinedProps,
+          to: to ?? "",
+          children
+        }
+      ) : /* @__PURE__ */ jsx157(
+        StyledLink,
+        {
+          as: "a",
+          ...combinedProps,
           href: to,
           children
         }
@@ -5150,38 +5193,6 @@ Button.displayName = "Button";
 // src/components/ButtonGroup/ButtonGroup.tsx
 import styled4 from "styled-components";
 import { isNil as isNil6 } from "@wistia/type-guards";
-
-// src/helpers/mq/mq.ts
-import { getValueAndUnit } from "polished";
-var getMaxWidth = (breakpoint) => {
-  const breakpointBuffer = 25e-4;
-  const [value, unit] = 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
 import { jsx as jsx159 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
@@ -5946,6 +5957,7 @@ export {
   ellipsisFlexParentStyle,
   ellipsisStyle,
   iconSizeMap,
+  mq,
   useActiveMq,
   useAriaLive,
   useMq,