@wistia/ui 0.8.21-beta.ff13f5f1.7e81e7b → 0.8.22

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.21-beta.ff13f5f1.7e81e7b
+ * @license @wistia/ui v0.8.22
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -57,7 +57,6 @@ __export(index_exports, {
   CollapsibleContent: () => CollapsibleContent,
   CollapsibleTrigger: () => CollapsibleTrigger,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
-  ConditionalButton: () => ConditionalButton,
   DataCard: () => DataCard,
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
@@ -78,6 +77,7 @@ __export(index_exports, {
   ImageDimensionsValidator: () => import_validators.ImageDimensionsValidator,
   Input: () => Input,
   InputClickToCopy: () => InputClickToCopy,
+  KeyboardShortcut: () => KeyboardShortcut,
   Label: () => Label,
   Link: () => Link,
   Menu: () => Menu,
@@ -7118,6 +7118,8 @@ var Link = (0, import_react21.forwardRef)(
     underline = false,
     leftIcon,
     rightIcon,
+    "aria-disabled": ariaDisabled,
+    role,
     ...props
   }, ref) => {
     const inRouterContext = (0, import_react_router_dom.useInRouterContext)();
@@ -7151,7 +7153,8 @@ var Link = (0, import_react21.forwardRef)(
       $colorScheme: colorScheme,
       $disabled: disabled,
       $underline: underline,
-      onClick: handleClick
+      onClick: handleClick,
+      "aria-disabled": ariaDisabled ?? (disabled ? "true" : void 0)
     };
     if (isButton(props)) {
       return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
@@ -7184,11 +7187,18 @@ var Link = (0, import_react21.forwardRef)(
         ...externalLinkProps,
         ...routerSpecificProps
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(StyledLink, { ...combinedProps, children: [
-        leftIcon ?? null,
-        children,
-        rightIcon ?? null
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
+        StyledLink,
+        {
+          ...combinedProps,
+          role: role ?? (disabled ? "link" : void 0),
+          children: [
+            leftIcon ?? null,
+            children,
+            rightIcon ?? null
+          ]
+        }
+      );
     }
     return null;
   }
@@ -8581,112 +8591,52 @@ var CollapsibleContent = ({ clamp, children }) => {
   ] }) });
 };
 
-// src/components/ConditionalButton/ConditionalButton.tsx
-var import_react32 = __toESM(require("react"));
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_react33 = require("react");
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components39.default)(Button)`
-  all: unset;
-  &:focus {
-    outline: none;
-  }
-  &:focus-visible {
-    outline: 2px solid var(--wui-color-focus-ring);
-    outline-offset: 2px;
-  }
-`;
-var ConditionalButton = ({
-  children,
-  onClick,
-  href,
-  defaultElement = "span",
-  ...props
-}) => {
-  const isButton2 = onClick !== void 0;
-  const isLink3 = href !== void 0;
-  const isInteractive = isButton2 || isLink3;
-  const DefaultElement = defaultElement;
-  if (!isInteractive) {
-    if ((0, import_react33.isValidElement)(children)) {
-      return import_react32.default.cloneElement(children, props);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(DefaultElement, { ...props, children });
-  }
-  const commonProps = {
-    children,
-    unstyled: true,
-    "data-wui-conditional-button": props.isLoading ? "loading" : "true",
-    ...props
-  };
-  const buttonProps = isLink3 ? { href, ...commonProps } : {
-    onClick,
-    type: "button",
-    ...commonProps
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledButton2, { ...buttonProps });
-};
-var getConditionalButtonProps = (props) => {
-  const { children, onClick, href, disabled, defaultElement, isLoading, beforeAction, ...rest } = props;
-  return {
-    children,
-    onClick,
-    href,
-    disabled,
-    defaultElement,
-    isLoading,
-    beforeAction,
-    ...rest
-  };
-};
-ConditionalButton.displayName = "ConditionalButton";
-
 // src/components/DataCards/DataCard.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
+var import_styled_components40 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/Heading/Heading.tsx
-var import_react34 = require("react");
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_react32 = require("react");
+var import_styled_components39 = __toESM(require("styled-components"));
 var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var heroStyle = import_styled_components40.css`
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var heroStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components40.css`
+var heading1TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components40.css`
+var heading2TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components40.css`
+var heading3TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components40.css`
+var heading4TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components40.css`
+var heading5TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components40.css`
+var heading6TextStyle = import_styled_components39.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -8702,7 +8652,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components40.default.div`
+var StyledHeading = import_styled_components39.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8712,23 +8662,23 @@ var StyledHeading = import_styled_components40.default.div`
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $truncate }) => {
   if ((0, import_type_guards28.isNotNil)($truncate)) {
-    return import_styled_components40.css`
+    return import_styled_components39.css`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && import_styled_components40.css`
+  ${({ $inline }) => $inline && import_styled_components39.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components40.css`
+  ${({ $disabled }) => $disabled && import_styled_components39.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components40.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components39.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components40.css`
+  ${({ $align }) => import_styled_components39.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -8742,7 +8692,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = (0, import_react34.forwardRef)(
+var HeadingComponent = (0, import_react32.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -8753,7 +8703,7 @@ var HeadingComponent = (0, import_react34.forwardRef)(
     variant = "heading1",
     renderAs,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
     StyledHeading,
     {
       ref,
@@ -8773,25 +8723,21 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledDataCard = (0, import_styled_components41.default)(ConditionalButton)`
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components40.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
+  grid-template-rows: auto auto;
+  grid-template-columns: auto auto;
   gap: var(--wui-space-01);
   padding: var(--wui-space-03);
   background: var(--wui-color-bg-surface-secondary);
   flex: 1;
   border-radius: var(--wui-border-radius-02);
   position: relative;
-
-  :is([data-wui-conditional-button]) {
-    &:hover {
-      background: var(--wui-color-bg-surface-secondary-hover);
-    }
-  }
 `;
-var shimmer = import_styled_components41.keyframes`
+var shimmer = import_styled_components40.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8799,7 +8745,7 @@ var shimmer = import_styled_components41.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components41.default.div`
+var LoadingBackground = import_styled_components40.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8810,27 +8756,27 @@ var LoadingBackground = import_styled_components41.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components41.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components40.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components41.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components40.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components41.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components40.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components41.default)(Heading)`
+var StyledValue = (0, import_styled_components40.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components41.default.div`
+var StyledSlot = import_styled_components40.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components41.default.div`
+var StyledDataCardTrendContainer = import_styled_components40.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8843,43 +8789,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => {
-  const conditionalButtonProps = getConditionalButtonProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
-    StyledDataCard,
-    {
-      $colorScheme: colorScheme,
-      defaultElement: "div",
-      ...conditionalButtonProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
-          StyledLabel2,
-          {
-            renderAs: "dt",
-            variant: "heading6",
-            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(StyledLoadingLabel, {}) : label
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
-          StyledValue,
-          {
-            renderAs: "dd",
-            variant: "heading3",
-            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(StyledLoadingValue, {}) : value
-          }
-        ),
-        (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(StyledSlot, { children: upperRightSlot }),
-        (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(StyledDataCardTrendContainer, { children: trend })
-      ]
-    }
-  );
-};
+}) => /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+  StyledDataCard,
+  {
+    $colorScheme: colorScheme,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+        StyledLabel2,
+        {
+          renderAs: "dt",
+          variant: "heading6",
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingLabel, {}) : label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+        StyledValue,
+        {
+          renderAs: "dd",
+          variant: "heading3",
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingValue, {}) : value
+        }
+      ),
+      (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledDataCardTrendContainer, { children: trend })
+    ]
+  }
+);
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components42.default)(Box)`
+var import_styled_components41 = __toESM(require("styled-components"));
+var import_jsx_runtime214 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components41.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8893,7 +8835,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8911,26 +8853,26 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components44 = __toESM(require("styled-components"));
+var import_styled_components43 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
-var import_react35 = require("react");
-var import_styled_components43 = __toESM(require("styled-components"));
+var import_react33 = require("react");
+var import_styled_components42 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components43.css`
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components42.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components43.css`
+var labelBoldStyles = import_styled_components42.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components43.css`
+var body1TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8938,7 +8880,7 @@ var body1TextStyle = import_styled_components43.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components43.css`
+var body2TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8946,7 +8888,7 @@ var body2TextStyle = import_styled_components43.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components43.css`
+var body3TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8954,7 +8896,7 @@ var body3TextStyle = import_styled_components43.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components43.css`
+var body4TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8962,47 +8904,47 @@ var body4TextStyle = import_styled_components43.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components43.css`
+var label1TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components43.css`
+var label2TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components43.css`
+var label3TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components43.css`
+var label4TextStyle = import_styled_components42.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components43.css`
+var body1MonoTextStyle = import_styled_components42.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components43.css`
+var body2MonoTextStyle = import_styled_components42.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components43.css`
+var body3MonoTextStyle = import_styled_components42.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components43.css`
+var body4MonoTextStyle = import_styled_components42.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -9037,7 +8979,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components43.default.div`
+var StyledText = import_styled_components42.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -9062,26 +9004,26 @@ var StyledText = import_styled_components43.default.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $truncate }) => {
   if ((0, import_type_guards30.isNotNil)($truncate)) {
-    return import_styled_components43.css`
+    return import_styled_components42.css`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && import_styled_components43.css`
+  ${({ $inline }) => $inline && import_styled_components42.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components43.css`
+  ${({ $disabled }) => $disabled && import_styled_components42.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components43.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components42.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components43.css`
+  ${({ $align }) => import_styled_components42.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components43.css`
+  ${({ as }) => as === "p" && import_styled_components42.css`
       display: block;
 
       + p {
@@ -9089,7 +9031,7 @@ var StyledText = import_styled_components43.default.div`
       }
     `}
 `;
-var TextComponent = (0, import_react35.forwardRef)(
+var TextComponent = (0, import_react33.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -9102,7 +9044,7 @@ var TextComponent = (0, import_react35.forwardRef)(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       StyledText,
       {
         ref,
@@ -9124,8 +9066,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components44.default.div`
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components43.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -9140,8 +9082,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
       Icon,
       {
         size: "md",
@@ -9149,7 +9091,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -9161,22 +9103,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components45.css`
+var import_styled_components44 = __toESM(require("styled-components"));
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components44.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components45.css`
+var verticalBorderCss = import_styled_components44.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components45.default.div`
+var DividerComponent = import_styled_components44.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -9188,7 +9130,7 @@ var DividerComponent = import_styled_components45.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -9201,14 +9143,14 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_react37 = require("react");
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_react35 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var hide = import_styled_components46.keyframes`
+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;
   }
@@ -9216,7 +9158,7 @@ var hide = import_styled_components46.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components46.keyframes`
+var slideDownAndFade = import_styled_components45.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -9226,7 +9168,7 @@ var slideDownAndFade = import_styled_components46.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components46.keyframes`
+var slideLeftAndFade = import_styled_components45.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -9236,7 +9178,7 @@ var slideLeftAndFade = import_styled_components46.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components46.keyframes`
+var slideUpAndFade = import_styled_components45.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -9246,7 +9188,7 @@ var slideUpAndFade = import_styled_components46.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components46.keyframes`
+var slideRightAndFade = import_styled_components45.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -9256,7 +9198,7 @@ var slideRightAndFade = import_styled_components46.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components46.default)(import_react_tooltip2.Content)`
+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);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -9318,21 +9260,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9341,7 +9283,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -9354,13 +9296,13 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-var import_react36 = require("react");
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_react34 = require("react");
+var import_styled_components47 = __toESM(require("styled-components"));
 var import_type_guards31 = require("@wistia/type-guards");
 
 // src/css/sharedStyles/inputCssVariables.ts
-var import_styled_components47 = require("styled-components");
-var inputCssVariables = import_styled_components47.css`
+var import_styled_components46 = require("styled-components");
+var inputCssVariables = import_styled_components46.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -9386,8 +9328,8 @@ var inputCssVariables = import_styled_components47.css`
 `;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var inputStyles = import_styled_components48.css`
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var inputStyles = import_styled_components47.css`
   ${inputCssVariables}
   input,
   textarea {
@@ -9422,7 +9364,7 @@ var inputStyles = import_styled_components48.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components48.default.div`
+var StyledInputContainer = import_styled_components47.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9489,7 +9431,7 @@ var StyledInputContainer = import_styled_components48.default.div`
     padding-right: 32px;
   }
 `;
-var Input = (0, import_react36.forwardRef)(
+var Input = (0, import_react34.forwardRef)(
   ({
     fullWidth = true,
     monospace = false,
@@ -9499,24 +9441,24 @@ var Input = (0, import_react36.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react36.useRef)();
+    const internalRef = (0, import_react34.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
       (0, import_type_guards31.isNotNil)(externalRef) && (0, import_type_guards31.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards31.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Icon, { type: "search" });
     }
     if ((0, import_type_guards31.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react36.cloneElement)(leftIconToDisplay, {
+      leftIconToDisplay = (0, import_react34.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
     if ((0, import_type_guards31.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react36.cloneElement)(rightIconToDisplay, {
+      rightIconToDisplay = (0, import_react34.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
@@ -9531,21 +9473,21 @@ var Input = (0, import_react36.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
             "input",
             {
               ...props,
@@ -9563,8 +9505,8 @@ var Input = (0, import_react36.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime221 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components49.default)(Input)`
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components48.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9581,7 +9523,7 @@ var StyledInput = (0, import_styled_components49.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components49.css`
+var editableStyles = import_styled_components48.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9591,7 +9533,7 @@ var editableStyles = import_styled_components49.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components49.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components48.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9608,11 +9550,11 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react37.useState)(false);
-  const [value, setValue] = (0, import_react37.useState)(children);
-  const [previousValue, setPreviousValue] = (0, import_react37.useState)(children);
-  const [headingHeight, setHeadingHeight] = (0, import_react37.useState)("60");
-  const headingRef = (0, import_react37.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react35.useState)(false);
+  const [value, setValue] = (0, import_react35.useState)(children);
+  const [previousValue, setPreviousValue] = (0, import_react35.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react35.useState)("60");
+  const headingRef = (0, import_react35.useRef)(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -9645,7 +9587,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9659,7 +9601,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -9677,9 +9619,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_jsx_runtime221.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9691,27 +9633,27 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-var import_react39 = require("react");
-var import_styled_components51 = __toESM(require("styled-components"));
+var import_react37 = require("react");
+var import_styled_components50 = __toESM(require("styled-components"));
 var import_type_guards32 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
-var import_react38 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime222 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_styled_components49 = __toESM(require("styled-components"));
+var import_jsx_runtime221 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components50.default.div`
+var StyledStack = import_styled_components49.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
   align-items: ${({ $alignItems }) => $alignItems};
 `;
-var StackComponent = (0, import_react38.forwardRef)(
+var StackComponent = (0, import_react36.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
       StyledStack,
       {
         ref,
@@ -9728,14 +9670,14 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var StyledForm = import_styled_components51.default.form`
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var StyledForm = import_styled_components50.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = (0, import_react39.createContext)({
+var FormContext = (0, import_react37.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9751,11 +9693,11 @@ var FormComponent = ({
   fullWidth = false,
   ...props
 }, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react39.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react39.useState)(false);
-  const innerRef = (0, import_react39.useRef)();
+  const [errors, setErrors] = (0, import_react37.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react37.useState)(false);
+  const innerRef = (0, import_react37.useRef)();
   const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react39.useId)();
+  const autoId = (0, import_react37.useId)();
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
@@ -9797,7 +9739,7 @@ var FormComponent = ({
       void action(null);
     }
   };
-  const context = (0, import_react39.useMemo)(() => {
+  const context = (0, import_react37.useMemo)(() => {
     return {
       values,
       errors,
@@ -9808,7 +9750,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
       Stack,
       {
         ...props,
@@ -9826,15 +9768,15 @@ var FormComponent = ({
   );
 };
 FormComponent.displayName = "Form";
-var Form = (0, import_react39.forwardRef)(FormComponent);
+var Form = (0, import_react37.forwardRef)(FormComponent);
 
 // src/components/Form/useFormState.tsx
-var import_react40 = require("react");
+var import_react38 = require("react");
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = (0, import_react40.useState)(initialData);
-  const [isPending, setIsPending] = (0, import_react40.useState)(false);
-  const [error, setError] = (0, import_react40.useState)(null);
-  const formAction = (0, import_react40.useCallback)(
+  const [data, setData] = (0, import_react38.useState)(initialData);
+  const [isPending, setIsPending] = (0, import_react38.useState)(false);
+  const [error, setError] = (0, import_react38.useState)(null);
+  const formAction = (0, import_react38.useCallback)(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -9865,23 +9807,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-var import_react41 = require("react");
+var import_react39 = require("react");
 var import_type_guards33 = require("@wistia/type-guards");
-var import_jsx_runtime224 = require("react/jsx-runtime");
+var import_jsx_runtime223 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = (0, import_react41.useRef)(null);
-  const { formId, errors, hasSubmitted } = (0, import_react41.useContext)(FormContext);
+  const ref = (0, import_react39.useRef)(null);
+  const { formId, errors, hasSubmitted } = (0, import_react39.useContext)(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9889,7 +9831,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9903,14 +9845,14 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-var import_react44 = require("react");
-var import_styled_components54 = __toESM(require("styled-components"));
+var import_react42 = require("react");
+var import_styled_components53 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components52.css`
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components51.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9918,10 +9860,10 @@ var requiredStyle = import_styled_components52.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components52.css`
+var disabledStyle3 = import_styled_components51.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components52.default.label`
+var StyledLabel3 = import_styled_components51.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9953,7 +9895,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
     StyledLabel3,
     {
       ...props,
@@ -9968,28 +9910,28 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_react43 = require("react");
+var import_react41 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
-var import_react42 = require("react");
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components53.default.fieldset`
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_react40 = require("react");
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components52.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components53.default.legend`
+var StyledLegend = import_styled_components52.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react42.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
+  const ref = (0, import_react40.useRef)();
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
           Heading,
           {
             renderAs: StyledLegend,
@@ -10005,8 +9947,8 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime227 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react43.createContext)(null);
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react41.createContext)(null);
 var CheckboxGroup = ({
   children,
   name,
@@ -10014,19 +9956,19 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react43.useMemo)(() => {
+  const context = (0, import_react41.useMemo)(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components54.default.div`
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components53.default.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -10056,7 +9998,7 @@ var StyledFormField = import_styled_components54.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components54.default.ul`
+var StyledErrorList = import_styled_components53.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -10066,7 +10008,7 @@ var StyledErrorList = import_styled_components54.default.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = (0, import_type_guards34.isArray)(errors);
-  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -10076,7 +10018,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -10099,8 +10041,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = (0, import_react44.useContext)(FormContext);
-  const checkboxGroup = (0, import_react44.useContext)(CheckboxGroupContext);
+  const formState = (0, import_react42.useContext)(FormContext);
+  const checkboxGroup = (0, import_react42.useContext)(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -10138,19 +10080,19 @@ var FormField = ({
       "aria-invalid": (0, import_type_guards34.isNotNil)(error)
     };
   }
-  import_react44.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+  import_react42.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
     StyledFormField,
     {
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Label, { htmlFor: computedId, children: label }),
-        (0, import_type_guards34.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
-        (0, import_react44.cloneElement)(children, childProps),
-        (0, import_type_guards34.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(import_jsx_runtime228.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Label, { htmlFor: computedId, children: label }),
+        (0, import_type_guards34.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        (0, import_react42.cloneElement)(children, childProps),
+        (0, import_type_guards34.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_jsx_runtime227.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
             ErrorMessages,
             {
               errors: computedError,
@@ -10165,9 +10107,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-var import_react45 = require("react");
-var import_jsx_runtime229 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react45.createContext)(null);
+var import_react43 = require("react");
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react43.createContext)(null);
 var RadioGroup = ({
   children,
   name,
@@ -10175,21 +10117,21 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react45.useMemo)(() => {
+  const context = (0, import_react43.useMemo)(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-var import_react46 = require("react");
-var import_styled_components55 = __toESM(require("styled-components"));
-var import_jsx_runtime230 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components55.default)(Button)`
+var import_react44 = require("react");
+var import_styled_components54 = __toESM(require("styled-components"));
+var import_jsx_runtime229 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components54.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -10203,18 +10145,18 @@ var StyledButton3 = (0, import_styled_components55.default)(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = (0, import_react46.forwardRef)(
+var IconButton = (0, import_react44.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
-      StyledButton3,
+    return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+      StyledButton2,
       {
         ...props,
         ref,
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: (0, import_react46.cloneElement)(import_react46.Children.only(children), {
+        children: (0, import_react44.cloneElement)(import_react44.Children.only(children), {
           size: responsiveSize
         })
       }
@@ -10224,11 +10166,11 @@ var IconButton = (0, import_react46.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-var import_styled_components56 = __toESM(require("styled-components"));
-var import_react47 = require("react");
+var import_styled_components55 = __toESM(require("styled-components"));
+var import_react45 = require("react");
 var import_type_guards35 = require("@wistia/type-guards");
-var import_jsx_runtime231 = require("react/jsx-runtime");
-var StyledInput2 = (0, import_styled_components56.default)(Input)`
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var StyledInput2 = (0, import_styled_components55.default)(Input)`
   &:not([aria-disabled='true']) {
     cursor: pointer;
   }
@@ -10238,10 +10180,10 @@ var StyledInput2 = (0, import_styled_components56.default)(Input)`
   }
 `;
 var COPY_SUCCESS_DURATION = 2e3;
-var InputClickToCopy = (0, import_react47.forwardRef)(
+var InputClickToCopy = (0, import_react45.forwardRef)(
   ({ value, onCopy, ...props }, ref) => {
-    const [isCopied, setIsCopied] = (0, import_react47.useState)(false);
-    (0, import_react47.useEffect)(() => {
+    const [isCopied, setIsCopied] = (0, import_react45.useState)(false);
+    (0, import_react45.useEffect)(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
           setIsCopied(false);
@@ -10265,7 +10207,7 @@ var InputClickToCopy = (0, import_react47.forwardRef)(
         return value;
       });
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
       StyledInput2,
       {
         "aria-label": "Click to Copy",
@@ -10273,13 +10215,13 @@ var InputClickToCopy = (0, import_react47.forwardRef)(
         ref,
         onClick: handleClick,
         readOnly: true,
-        rightIcon: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+        rightIcon: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
           Icon,
           {
             colorScheme: "success",
             type: "checkmark-circle"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Icon, { type: "save-as-copy" }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Icon, { type: "save-as-copy" }),
         value
       }
     );
@@ -10287,16 +10229,125 @@ var InputClickToCopy = (0, import_react47.forwardRef)(
 );
 InputClickToCopy.displayName = "InputClickToCopy";
 
+// src/components/KeyboardShortcut/KeyboardShortcut.tsx
+var import_styled_components56 = __toESM(require("styled-components"));
+var import_type_guards36 = require("@wistia/type-guards");
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var StyledKeyboardShortcut = import_styled_components56.default.div`
+  align-items: center;
+  display: flex;
+  gap: var(--wui-space-02);
+  ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
+`;
+var StyledKey = import_styled_components56.default.kbd`
+  align-items: center;
+  background: var(--wui-color-bg-surface-secondary);
+  border-bottom: 1px solid var(--wui-color-border-secondary);
+  border-radius: 4px;
+  color: var(--wui-color-text);
+  display: flex;
+  font-family: InterVariable, sans-serif;
+
+  /* Adds serif to uppercase "I" to distinguish it from "l": https://rsms.me/inter/glyphs/?g=I.1 */
+  font-feature-settings: 'cv08' on;
+  font-size: 10px;
+
+  /* Adds a slash to the zero to distinguish it from the letter "O": https://rsms.me/inter/glyphs/?g=zero.tf.slash */
+
+  /* Adds tabular numbers to ensure the width of the key is consistent */
+  font-variant-numeric: slashed-zero tabular-nums;
+  height: 20px;
+  justify-content: center;
+  line-height: 20px;
+  min-width: 20px;
+  padding: 0 var(--wui-space-01);
+`;
+var Label2 = import_styled_components56.default.span`
+  color: var(--wui-color-text);
+  font-size: 12px;
+`;
+var KeysContainer = import_styled_components56.default.div`
+  display: flex;
+  gap: var(--wui-space-01);
+`;
+var keyToString = (key) => {
+  switch (key) {
+    // Arrow Keys
+    case "ArrowDown":
+      return "\u2193";
+    case "ArrowLeft":
+      return "\u2190";
+    case "ArrowRight":
+      return "\u2192";
+    case "ArrowUp":
+      return "\u2191";
+    // Modifier Keys
+    case "Alt":
+      return "Alt";
+    case "Cmd":
+    case "Meta":
+      if (/Mac|iPhone|iPad/.test(window.navigator.userAgent)) {
+        return "\u2318";
+      }
+      if (window.navigator.userAgent.includes("Win")) {
+        return "\u229E";
+      }
+      return "^";
+    case "Ctrl":
+      return "Ctrl";
+    case "Option":
+      return "\u2325";
+    case "Shift":
+      return "\u21E7";
+    // Whitespace Keys
+    case "Enter":
+      return "\u21B5";
+    case "Space":
+      return "Space";
+    case "Tab":
+      return "Tab";
+    case "Backspace":
+      return "Del";
+    case "Esc":
+      return "Esc";
+    default:
+      return key.toUpperCase();
+  }
+};
+var KeyboardShortcut = ({
+  label,
+  keyboardKeys,
+  fullWidth = false,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
+  StyledKeyboardShortcut,
+  {
+    $fullWidth: fullWidth,
+    ...otherProps,
+    children: [
+      (0, import_type_guards36.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Label2, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+        StyledKey,
+        {
+          children: keyToString(keyboardKey)
+        },
+        index
+      )) })
+    ]
+  }
+);
+KeyboardShortcut.displayName = "KeyboardShortcut";
+
 // src/components/Menu/Menu.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards36 = require("@wistia/type-guards");
-var import_react49 = require("react");
+var import_type_guards37 = require("@wistia/type-guards");
+var import_react47 = require("react");
 
 // src/components/Menu/MenuContext.tsx
-var import_react48 = require("react");
-var MenuContext = (0, import_react48.createContext)({ compact: false });
-var useMenuContext = () => (0, import_react48.useContext)(MenuContext);
+var import_react46 = require("react");
+var MenuContext = (0, import_react46.createContext)({ compact: false });
+var useMenuContext = () => (0, import_react46.useContext)(MenuContext);
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime232 = require("react/jsx-runtime");
@@ -10400,9 +10451,9 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
-  const contextValue = (0, import_react49.useMemo)(() => ({ compact }), [compact]);
+  const contextValue = (0, import_react47.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
-    ...(0, import_type_guards36.isNotNil)(onOpenChange) && (0, import_type_guards36.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards37.isNotNil)(onOpenChange) && (0, import_type_guards37.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -10416,7 +10467,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards36.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards37.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
@@ -10474,17 +10525,17 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-var import_react51 = require("react");
+var import_react49 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards38 = require("@wistia/type-guards");
+var import_type_guards39 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
-var import_react50 = require("react");
+var import_react48 = require("react");
 var import_styled_components59 = __toESM(require("styled-components"));
-var import_type_guards37 = require("@wistia/type-guards");
+var import_type_guards38 = require("@wistia/type-guards");
 var import_jsx_runtime234 = require("react/jsx-runtime");
-var StyledButton4 = (0, import_styled_components59.default)(Button)`
+var StyledButton3 = (0, import_styled_components59.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -10557,10 +10608,10 @@ var StyledBadgeContainer = import_styled_components59.default.div`
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react50.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = (0, import_react48.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards37.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards38.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -10579,7 +10630,7 @@ var MenuItemButton = (0, import_react50.forwardRef)(({ children, appearance, com
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
-    StyledButton4,
+    StyledButton3,
     {
       ...props,
       ref,
@@ -10590,7 +10641,7 @@ var MenuItemButton = (0, import_react50.forwardRef)(({ children, appearance, com
       children: [
         props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards37.isNotNil)(badge) || (0, import_type_guards37.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        (0, import_type_guards38.isNotNil)(badge) || (0, import_type_guards38.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -10657,12 +10708,12 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = (0, import_react51.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react49.useState)(false);
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards38.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(MenuItemDescription, { children: description }) : null
+      (0, import_type_guards39.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
@@ -10686,10 +10737,10 @@ var SubMenu = ({
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-var import_react52 = require("react");
+var import_react50 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime237 = require("react/jsx-runtime");
-var MenuItem = (0, import_react52.forwardRef)(
+var MenuItem = (0, import_react50.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
@@ -10757,7 +10808,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards39 = require("@wistia/type-guards");
+var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime240 = require("react/jsx-runtime");
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(
@@ -10831,8 +10882,8 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: (0, import_type_guards39.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(CheckboxIndicator, { checked }),
-          rightIcon: (0, import_type_guards39.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: (0, import_type_guards40.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(CheckboxIndicator, { checked }),
+          rightIcon: (0, import_type_guards40.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -10841,10 +10892,10 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-var import_react56 = require("react");
+var import_react54 = require("react");
 var import_styled_components66 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards41 = require("@wistia/type-guards");
+var import_type_guards42 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components63 = __toESM(require("styled-components"));
@@ -10901,21 +10952,21 @@ var ModalHeader = ({
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_react54 = require("react");
+var import_react52 = require("react");
 var import_styled_components64 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-var import_react53 = require("react");
-var import_type_guards40 = require("@wistia/type-guards");
+var import_react51 = require("react");
+var import_type_guards41 = require("@wistia/type-guards");
 var useFocusRestore = () => {
-  const previouslyFocusedRef = (0, import_react53.useRef)(null);
-  (0, import_react53.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards40.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards41.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -10967,7 +11018,7 @@ var StyledModalContent = (0, import_styled_components64.default)(import_react_di
     }
   }
 `;
-var ModalContent = (0, import_react54.forwardRef)(
+var ModalContent = (0, import_react52.forwardRef)(
   ({ fullHeight, width, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
@@ -10985,7 +11036,7 @@ var ModalContent = (0, import_react54.forwardRef)(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-var import_react55 = require("react");
+var import_react53 = require("react");
 var import_styled_components65 = __toESM(require("styled-components"));
 var import_jsx_runtime244 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
@@ -11028,7 +11079,7 @@ var BackdropComponent = import_styled_components65.default.div`
     }
   }
 `;
-var Backdrop = (0, import_react55.forwardRef)(
+var Backdrop = (0, import_react53.forwardRef)(
   ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
     BackdropComponent,
     {
@@ -11050,7 +11101,7 @@ var ModalBody = import_styled_components66.default.div`
   display: flex;
   order: 2;
 `;
-var Modal = (0, import_react56.forwardRef)(
+var Modal = (0, import_react54.forwardRef)(
   ({
     children,
     fullHeight = false,
@@ -11067,7 +11118,7 @@ var Modal = (0, import_react56.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards41.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards42.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -11080,7 +11131,7 @@ var Modal = (0, import_react56.forwardRef)(
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards41.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards42.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -11114,9 +11165,9 @@ var import_react_popover = require("@radix-ui/react-popover");
 var import_styled_components67 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards42 = require("@wistia/type-guards");
+var import_type_guards43 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards42.isNotNil)(onOpenChange) && (0, import_type_guards42.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards43.isNotNil)(onOpenChange) && (0, import_type_guards43.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
@@ -11187,7 +11238,7 @@ Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components68 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
-var import_type_guards43 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime247 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components68.default.div`
   --progress-bar-height: 8px;
@@ -11242,7 +11293,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards43.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards44.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
       StyledProgressBar,
       {
@@ -11258,15 +11309,15 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards43.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards44.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
-var import_react57 = require("react");
+var import_react55 = require("react");
 var import_styled_components69 = __toESM(require("styled-components"));
-var import_type_guards44 = require("@wistia/type-guards");
+var import_type_guards45 = require("@wistia/type-guards");
 var import_jsx_runtime248 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
   "svg",
@@ -11367,7 +11418,7 @@ var StyledHiddenRadioInput = import_styled_components69.default.input`
     display: block;
   }
 `;
-var Radio = (0, import_react57.forwardRef)(
+var Radio = (0, import_react55.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -11382,8 +11433,8 @@ var Radio = (0, import_react57.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react57.useId)();
-    const computedId = (0, import_type_guards44.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const generatedId = (0, import_react55.useId)();
+    const computedId = (0, import_type_guards45.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
       StyledRadioWrapper,
       {
@@ -11432,20 +11483,20 @@ var Radio = (0, import_react57.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react60 = require("react");
+var import_react58 = require("react");
 var import_styled_components71 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_type_guards45 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
-var import_react58 = require("react");
+var import_react56 = require("react");
 var import_jsx_runtime249 = require("react/jsx-runtime");
-var SelectedItemStyleContext = (0, import_react58.createContext)(null);
+var SelectedItemStyleContext = (0, import_react56.createContext)(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = (0, import_react58.useState)(null);
-  const selectedItemIndicatorStyle = (0, import_react58.useMemo)(
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = (0, import_react56.useState)(null);
+  const selectedItemIndicatorStyle = (0, import_react56.useMemo)(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
       transform: `translateX(${selectedItemMeasurements.offsetLeft}px) translateY(-50%)`,
@@ -11455,7 +11506,7 @@ var SelectedItemStyleProvider = ({
     },
     [selectedItemMeasurements]
   );
-  const contextValue = (0, import_react58.useMemo)(
+  const contextValue = (0, import_react56.useMemo)(
     () => ({
       setSelectedItemMeasurements,
       selectedItemIndicatorStyle
@@ -11465,7 +11516,7 @@ var SelectedItemStyleProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
-  const context = (0, import_react58.useContext)(SelectedItemStyleContext);
+  const context = (0, import_react56.useContext)(SelectedItemStyleContext);
   if (context === null) {
     throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
   }
@@ -11476,11 +11527,11 @@ var useSelectedItemStyle = () => {
 var import_styled_components70 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
-var import_react59 = require("react");
-var SegmentedControlValueContext = (0, import_react59.createContext)(null);
+var import_react57 = require("react");
+var SegmentedControlValueContext = (0, import_react57.createContext)(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = (0, import_react59.useContext)(SegmentedControlValueContext);
+  const context = (0, import_react57.useContext)(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -11526,7 +11577,7 @@ var segmentedControlStyles = import_styled_components71.css`
 var StyledSegmentedControl = (0, import_styled_components71.default)(import_react_toggle_group.Root)`
   ${segmentedControlStyles}
 `;
-var SegmentedControl = (0, import_react60.forwardRef)(
+var SegmentedControl = (0, import_react58.forwardRef)(
   ({
     children,
     disabled = false,
@@ -11535,7 +11586,7 @@ var SegmentedControl = (0, import_react60.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards45.isNil)(children)) {
+    if ((0, import_type_guards46.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
@@ -11561,10 +11612,10 @@ var SegmentedControl = (0, import_react60.forwardRef)(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-var import_react61 = require("react");
+var import_react59 = require("react");
 var import_styled_components72 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
-var import_type_guards46 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 var import_jsx_runtime252 = require("react/jsx-runtime");
 var segmentedControlItemStyles = import_styled_components72.css`
   all: unset; /* ToggleGroupItem is a button element */
@@ -11629,11 +11680,11 @@ var segmentedControlItemStyles = import_styled_components72.css`
 var StyledSegmentedControlItem = (0, import_styled_components72.default)(import_react_toggle_group2.Item)`
   ${segmentedControlItemStyles}
 `;
-var SegmentedControlItem = (0, import_react61.forwardRef)(
+var SegmentedControlItem = (0, import_react59.forwardRef)(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
-    const buttonRef = (0, import_react61.useRef)(null);
+    const buttonRef = (0, import_react59.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     const handleClick = (event) => {
       const target = event.target;
@@ -11642,7 +11693,7 @@ var SegmentedControlItem = (0, import_react61.forwardRef)(
         event.preventDefault();
       }
     };
-    (0, import_react61.useEffect)(() => {
+    (0, import_react59.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11671,8 +11722,8 @@ var SegmentedControlItem = (0, import_react61.forwardRef)(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards46.isNotNil)(label),
-        "aria-label": (0, import_type_guards46.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards47.isNotNil)(label),
+        "aria-label": (0, import_type_guards47.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -11688,7 +11739,7 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
-var import_react62 = require("react");
+var import_react60 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
 var import_jsx_runtime253 = require("react/jsx-runtime");
 var StyledTrigger = (0, import_styled_components73.default)(import_react_select.Trigger)`
@@ -11753,7 +11804,7 @@ var StyledContent3 = (0, import_styled_components73.default)(import_react_select
   max-height: var(--radix-select-content-available-height);
   z-index: var(--wui-zindex-select);
 `;
-var Select = (0, import_react62.forwardRef)(
+var Select = (0, import_react60.forwardRef)(
   ({
     colorScheme = "inherit",
     children,
@@ -11802,9 +11853,9 @@ Select.displayName = "Select";
 
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
-var import_react63 = require("react");
+var import_react61 = require("react");
 var import_styled_components74 = __toESM(require("styled-components"));
-var import_type_guards47 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var import_jsx_runtime254 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components74.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
@@ -11833,7 +11884,7 @@ var StyledItem = (0, import_styled_components74.default)(import_react_select2.It
 var StyledIconContainer = import_styled_components74.default.span`
   width: 12px;
 `;
-var SelectOption = (0, import_react63.forwardRef)(
+var SelectOption = (0, import_react61.forwardRef)(
   ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
       StyledItem,
@@ -11848,7 +11899,7 @@ var SelectOption = (0, import_react63.forwardRef)(
               type: "checkmark"
             }
           ) }) }),
-          (0, import_type_guards47.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)("div", { children: [
+          (0, import_type_guards48.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)("div", { children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime254.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select2.ItemText, { children })
@@ -11881,9 +11932,9 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Switch/Switch.tsx
-var import_react64 = require("react");
+var import_react62 = require("react");
 var import_styled_components76 = __toESM(require("styled-components"));
-var import_type_guards48 = require("@wistia/type-guards");
+var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime256 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components76.css`
   --wui-size-small-width: 24px;
@@ -11986,7 +12037,7 @@ var StyledHiddenSwitchInput = import_styled_components76.default.input`
     }
   }
 `;
-var Switch = (0, import_react64.forwardRef)(
+var Switch = (0, import_react62.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -12001,8 +12052,8 @@ var Switch = (0, import_react64.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react64.useId)();
-    const computedId = (0, import_type_guards48.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const generatedId = (0, import_react62.useId)();
+    const computedId = (0, import_type_guards49.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
         StyledHiddenSwitchInput,
@@ -12091,8 +12142,8 @@ var Table = ({
 var import_styled_components78 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
-var import_react65 = require("react");
-var TableSectionContext = (0, import_react65.createContext)(null);
+var import_react63 = require("react");
+var TableSectionContext = (0, import_react63.createContext)(null);
 
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime258 = require("react/jsx-runtime");
@@ -12102,7 +12153,7 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-var import_react66 = require("react");
+var import_react64 = require("react");
 var import_styled_components79 = __toESM(require("styled-components"));
 var import_jsx_runtime259 = require("react/jsx-runtime");
 var sharedStyles = import_styled_components79.css`
@@ -12123,7 +12174,7 @@ var StyledTd = import_styled_components79.default.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = (0, import_react66.useContext)(TableSectionContext);
+  const section = (0, import_react64.useContext)(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StyledTh, { ...props, children });
   }
@@ -12155,9 +12206,9 @@ var TableRow = ({ children, ...props }) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react70 = require("react");
+var import_react68 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var import_type_guards50 = require("@wistia/type-guards");
+var import_type_guards51 = require("@wistia/type-guards");
 var import_styled_components87 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
@@ -12210,17 +12261,17 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-var import_react68 = require("react");
+var import_react66 = require("react");
 var import_styled_components85 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_type_guards49 = require("@wistia/type-guards");
+var import_type_guards50 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
-var import_react67 = require("react");
-var TabsValueContext = (0, import_react67.createContext)(null);
+var import_react65 = require("react");
+var TabsValueContext = (0, import_react65.createContext)(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = (0, import_react67.useContext)(TabsValueContext);
+  const context = (0, import_react65.useContext)(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }
@@ -12236,13 +12287,13 @@ var StyledTabItem = (0, import_styled_components85.default)(import_react_tabs3.T
     outline: none;
   }
 `;
-var TabItem = (0, import_react68.forwardRef)(
+var TabItem = (0, import_react66.forwardRef)(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
-    const buttonRef = (0, import_react68.useRef)(null);
+    const buttonRef = (0, import_react66.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    (0, import_react68.useEffect)(() => {
+    (0, import_react66.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -12271,8 +12322,8 @@ var TabItem = (0, import_react68.forwardRef)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards49.isNotNil)(label),
-        "aria-label": (0, import_type_guards49.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards50.isNotNil)(label),
+        "aria-label": (0, import_type_guards50.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12286,16 +12337,16 @@ var TabItem = (0, import_react68.forwardRef)(
 TabItem.displayName = "TabItem";
 
 // src/components/Tabs/extractTabItems.ts
-var import_react69 = require("react");
+var import_react67 = require("react");
 var extractTabItems = (children) => {
   const tabItems = [];
-  import_react69.Children.forEach(children, (child) => {
-    if (!(0, import_react69.isValidElement)(child)) {
+  import_react67.Children.forEach(children, (child) => {
+    if (!(0, import_react67.isValidElement)(child)) {
       return;
     }
     if (typeof child.type !== "string" && child.type.displayName === "Tab") {
       tabItems.push(child);
-    } else if (child.type === import_react69.Fragment) {
+    } else if (child.type === import_react67.Fragment) {
       const fragmentElement = child;
       tabItems.push(...extractTabItems(fragmentElement.props.children));
     } else if ((child.props.children ?? null) != null) {
@@ -12342,7 +12393,7 @@ var StyledTabsRoot = (0, import_styled_components87.default)(import_react_tabs4.
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
 `;
-var Tabs = (0, import_react70.forwardRef)(
+var Tabs = (0, import_react68.forwardRef)(
   ({
     children,
     fullWidth = true,
@@ -12354,7 +12405,7 @@ var Tabs = (0, import_react70.forwardRef)(
     ...props
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react70.useState)(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react68.useState)(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
@@ -12384,7 +12435,7 @@ var Tabs = (0, import_react70.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards50.isNil)(icon)) {
+                  if ((0, import_type_guards51.isNil)(icon)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
                       TabItem,
                       {
@@ -12395,7 +12446,7 @@ var Tabs = (0, import_react70.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards50.isNotNil)(label)) {
+                  if ((0, import_type_guards51.isNotNil)(label)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
                       TabItem,
                       {
@@ -12407,7 +12458,7 @@ var Tabs = (0, import_react70.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards50.isNotNil)(ariaLabelForTab)) {
+                  if ((0, import_type_guards51.isNotNil)(ariaLabelForTab)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
                       TabItem,
                       {
@@ -12440,19 +12491,19 @@ var Tabs = (0, import_react70.forwardRef)(
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react71 = require("react");
+var import_react69 = require("react");
 var import_jsx_runtime268 = require("react/jsx-runtime");
-var Tab = (0, import_react71.forwardRef)(({ children }, ref) => {
+var Tab = (0, import_react69.forwardRef)(({ children }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
-var import_react72 = require("react");
+var import_react70 = require("react");
 var import_styled_components88 = __toESM(require("styled-components"));
-var import_type_guards51 = require("@wistia/type-guards");
+var import_type_guards52 = require("@wistia/type-guards");
 var import_jsx_runtime269 = require("react/jsx-runtime");
-var TagLabel = (0, import_styled_components88.default)(ConditionalButton)`
+var TagLabel = import_styled_components88.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12474,11 +12525,11 @@ var TagLabel = (0, import_styled_components88.default)(ConditionalButton)`
     padding-right: var(--wui-space-01);
   }
 
-  :is([data-wui-conditional-button]):hover {
+  :is(a):hover {
     background: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  :is([data-wui-conditional-button]):active {
+  :is(a):active {
     background: var(--wui-color-bg-surface-secondary-active);
   }
 
@@ -12535,10 +12586,10 @@ var StyledTag = import_styled_components88.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards51.isNil)(onClickRemove)) {
+  if ((0, import_type_guards52.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards51.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards52.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -12565,10 +12616,10 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = (0, import_react72.forwardRef)(
-  ({ onClickRemove, colorScheme = "inherit", icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = (0, import_type_guards51.isNotNil)(icon);
-    const conditionalButtonProps = getConditionalButtonProps(props);
+var Tag = (0, import_react70.forwardRef)(
+  ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
+    const hasIcon = (0, import_type_guards52.isNotNil)(icon);
+    const labelProps = (0, import_type_guards52.isNotNil)(href) && (0, import_type_guards52.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
       StyledTag,
       {
@@ -12579,8 +12630,8 @@ var Tag = (0, import_react72.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
             TagLabel,
             {
+              ...labelProps,
               $colorScheme: colorScheme,
-              ...conditionalButtonProps,
               children: [
                 hasIcon ? icon : null,
                 label
@@ -12604,7 +12655,7 @@ Tag.displayName = "Tag";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components89 = __toESM(require("styled-components"));
-var import_type_guards52 = require("@wistia/type-guards");
+var import_type_guards53 = require("@wistia/type-guards");
 var import_jsx_runtime270 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components89.default.div`
   align-items: center;
@@ -12632,19 +12683,19 @@ var StyledThumbnailBadge = import_styled_components89.default.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards52.isNotNil)(icon) && icon,
+    (0, import_type_guards53.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
-var import_react73 = require("react");
+var import_react71 = require("react");
 var import_styled_components91 = __toESM(require("styled-components"));
-var import_type_guards54 = require("@wistia/type-guards");
+var import_type_guards55 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards53 = require("@wistia/type-guards");
+var import_type_guards54 = require("@wistia/type-guards");
 var import_styled_components90 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components90.css`
@@ -12772,7 +12823,7 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards53.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards54.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
@@ -12808,10 +12859,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components91.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards54.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards55.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards54.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards55.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -12826,7 +12877,7 @@ var StyledThumbnail = import_styled_components91.default.div`
     border-radius: calc(8% * (9 / 16)) / 8%;
   }
 `;
-var Thumbnail = (0, import_react73.forwardRef)(
+var Thumbnail = (0, import_react71.forwardRef)(
   ({
     gradientBackground = "defaultMidOne",
     thumbnailImageType = "square",
@@ -12835,7 +12886,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards54.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards55.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
       StyledThumbnail,
       {
@@ -12846,8 +12897,8 @@ var Thumbnail = (0, import_react73.forwardRef)(
         $width: width,
         role: "presentation",
         children: [
-          (0, import_type_guards54.isNotNil)(children) ? children : null,
-          (0, import_type_guards54.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
+          (0, import_type_guards55.isNotNil)(children) ? children : null,
+          (0, import_type_guards55.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
             ThumbnailImage,
             {
               thumbnailImageType,
@@ -12862,9 +12913,9 @@ var Thumbnail = (0, import_react73.forwardRef)(
 Thumbnail.displayName = "Thumbnail";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-var import_react74 = __toESM(require("react"));
+var import_react72 = __toESM(require("react"));
 var import_styled_components92 = __toESM(require("styled-components"));
-var import_type_guards55 = require("@wistia/type-guards");
+var import_type_guards56 = require("@wistia/type-guards");
 var import_jsx_runtime272 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
@@ -12942,10 +12993,10 @@ var ThumbnailCollage = ({
   gradientBackground = "defaultMidOne",
   ...props
 }) => {
-  const thumbnailArray = import_react74.default.Children.toArray(children);
+  const thumbnailArray = import_react72.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards55.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return import_react74.default.cloneElement(child, {
+  const thumbnails = (0, import_type_guards56.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+    return import_react72.default.cloneElement(child, {
       ...child.props,
       children: void 0
     });
@@ -12972,7 +13023,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components93 = __toESM(require("styled-components"));
-var import_type_guards56 = require("@wistia/type-guards");
+var import_type_guards57 = require("@wistia/type-guards");
 var import_jsx_runtime273 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -13085,7 +13136,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime273.jsx)("title", { children: title }),
-        (0, import_type_guards56.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime273.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime273.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -13114,7 +13165,6 @@ WistiaLogo.displayName = "WistiaLogo";
   CollapsibleContent,
   CollapsibleTrigger,
   ColorSchemeWrapper,
-  ConditionalButton,
   DataCard,
   DataCardTrend,
   DataCards,
@@ -13135,6 +13185,7 @@ WistiaLogo.displayName = "WistiaLogo";
   ImageDimensionsValidator,
   Input,
   InputClickToCopy,
+  KeyboardShortcut,
   Label,
   Link,
   Menu,