@wistia/ui 0.0.19 → 0.0.21

package/dist/index.d.mts

@@ -1392,6 +1392,93 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type RadioProps = ComponentPropsWithoutRef<'input'> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -1573,4 +1660,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };

package/dist/index.d.ts

@@ -1392,6 +1392,93 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type RadioProps = ComponentPropsWithoutRef<'input'> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -1573,4 +1660,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.19
+ * @license @wistia/ui v0.0.21
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -3284,11 +3284,8 @@ var FavoriteOutlineIcon = (props) => /* @__PURE__ */ jsx66(
     children: /* @__PURE__ */ jsx66(
       "path",
       {
-        d: "M12 2.33321L14.9866 8.38519L21.6666 9.35586L16.8333 14.0678L17.9746 20.7198L12 17.5798L6.02532 20.7198L7.16665 14.0678L2.33333 9.35586L9.01331 8.38519L12 2.33321Z",
-        stroke: "#64646A",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "1.99999"
+        d: "M12 1.33321C12.3806 1.33321 12.7283 1.54931 12.8967 1.89066L15.6507 7.47119L21.8104 8.36625C22.1871 8.42098 22.5 8.68481 22.6177 9.0468C22.7353 9.4088 22.6372 9.80619 22.3647 10.0719L17.9078 14.4169L18.9602 20.5507C19.0246 20.9259 18.8704 21.305 18.5625 21.5288C18.2546 21.7525 17.8463 21.7821 17.5094 21.605L12 18.7095L6.49053 21.605C6.1536 21.7821 5.74536 21.7525 5.43745 21.5288C5.12954 21.305 4.97535 20.9259 5.03972 20.5507L6.09215 14.4169L1.63526 10.0719C1.36272 9.80619 1.26465 9.4088 1.38228 9.0468C1.49991 8.68481 1.81285 8.42098 2.18953 8.36625L8.34923 7.47119L11.1032 1.89066C11.2717 1.54931 11.6193 1.33321 12 1.33321ZM12 4.59286L9.91005 8.82773C9.76439 9.12289 9.48282 9.32746 9.15711 9.37479L4.4821 10.0541L7.86471 13.3518C8.10037 13.5816 8.2079 13.9126 8.15224 14.2369L7.35352 18.8921L11.5348 16.6946C11.826 16.5416 12.1739 16.5416 12.4652 16.6946L16.6464 18.8921L15.8477 14.2369C15.792 13.9126 15.8996 13.5816 16.1352 13.3518L19.5178 10.0541L14.8428 9.37479C14.5171 9.32746 14.2355 9.12289 14.0899 8.82773L12 4.59286Z",
+        fill: "currentColor"
       }
     )
   }
@@ -5851,7 +5848,7 @@ var Checkbox = forwardRef4(
     ...otherProps
   }, ref) => {
     const generatedId = useId();
-    const computedId = isNonEmptyString2(id) ? id : `vhs-collapsible-group-${generatedId}`;
+    const computedId = isNonEmptyString2(id) ? id : `ui-checkbox-${generatedId}`;
     return /* @__PURE__ */ jsxs6(StyledCheckboxWrapper, { children: [
       /* @__PURE__ */ jsx166(
         StyledCheckboxRoot,
@@ -6873,12 +6870,142 @@ var CheckboxMenuItem = ({
 };
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
+// src/components/Radio/Radio.tsx
+import { forwardRef as forwardRef10, useId as useId2 } from "react";
+import styled23, { css as css18 } from "styled-components";
+import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
+import { jsx as jsx182, jsxs as jsxs12 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled23.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--wui-space-02);
+`;
+var StyledRadio = styled23.input`
+  align-self: flex-start;
+  box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
+  appearance: none;
+  margin: 0;
+  color: currentcolor;
+  width: 14px;
+  min-width: 14px;
+  height: 14px;
+  border: 1px solid var(--wui-color-border);
+  border-radius: 50%;
+  transform: translateY(5px); /* visually center the radio button */
+  display: grid;
+  place-content: center;
+
+  &&::before {
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: scale(0);
+    box-shadow: inset 1em 1em var(--wui-color-bg-fill);
+  }
+
+  &&:checked::before {
+    transform: scale(1);
+  }
+`;
+var disabledStyle2 = css18`
+  cursor: not-allowed;
+  opacity: 0.5;
+`;
+var errorStyle = css18`
+  /* TODO Lamp to design error state */
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: transparent !important;
+  }
+`;
+var defaultHoverStyle = css18`
+  /* TODO Lamp to design hover state */
+  cursor: pointer;
+`;
+var StyledRadioWrapper = styled23.div`
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  display: flex;
+  gap: var(--wui-space-02);
+  padding: var(--wui-space-02);
+
+  &:hover {
+    ${defaultHoverStyle}
+  }
+
+  &:focus-within {
+    /* TODO Lamp to design focus state */
+    background-color: #efefef;
+  }
+
+  ${({ hasError }) => hasError && errorStyle};
+  ${({ disabled }) => disabled && disabledStyle2};
+`;
+var Radio = forwardRef10(
+  ({
+    checked,
+    disabled = false,
+    hasError = false,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    required = false,
+    value = "false",
+    ...otherProps
+  }, ref) => {
+    const generatedId = useId2();
+    const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
+    return /* @__PURE__ */ jsxs12(
+      StyledRadioWrapper,
+      {
+        disabled,
+        hasError,
+        children: [
+          /* @__PURE__ */ jsx182(
+            StyledRadio,
+            {
+              ref,
+              "aria-checked": checked,
+              checked,
+              disabled,
+              id: computedId,
+              name,
+              onChange,
+              type: "radio",
+              value,
+              ...otherProps
+            }
+          ),
+          /* @__PURE__ */ jsxs12(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ jsx182(
+              Label,
+              {
+                disabled,
+                htmlFor: computedId,
+                required,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx182(LabelDescription, { children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled23 from "styled-components";
+import styled24 from "styled-components";
 import { isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { jsx as jsx182 } from "react/jsx-runtime";
-var VisuallyHidden = styled23.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled23.div({
+import { jsx as jsx183 } from "react/jsx-runtime";
+var VisuallyHidden = styled24.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled24.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -6889,18 +7016,18 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil8(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx182(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx183(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx182(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx183(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef10 } from "react";
-import styled24 from "styled-components";
-import { jsx as jsx183 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11 } from "react";
+import styled25 from "styled-components";
+import { jsx as jsx184 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT3 = "div";
-var StyledStack = styled24.div`
+var StyledStack = styled25.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -6909,11 +7036,11 @@ var StyledStack = styled24.div`
     flex: 1;
   }
 `;
-var StackComponent = forwardRef10(
+var StackComponent = forwardRef11(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx183(
+    return /* @__PURE__ */ jsx184(
       StyledStack,
       {
         ref,
@@ -6929,11 +7056,11 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef11 } from "react";
-import styled25 from "styled-components";
-import { isNil as isNil10, isNotNil as isNotNil9, isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { Fragment as Fragment2, jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
-var TagLabel = styled25.a`
+import { forwardRef as forwardRef12 } from "react";
+import styled26 from "styled-components";
+import { isNil as isNil10, isNotNil as isNotNil9, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { Fragment as Fragment2, jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
+var TagLabel = styled26.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -6961,14 +7088,14 @@ var TagLabel = styled25.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled25.div`
+var TagDivider = styled26.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled25.button`
+var StyledRemoveButton = styled26.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -6996,7 +7123,7 @@ var StyledRemoveButton = styled25.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled25.div`
+var StyledTag = styled26.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7013,39 +7140,39 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
-    /* @__PURE__ */ jsx184(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    /* @__PURE__ */ jsx185(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs13(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx184(
+          /* @__PURE__ */ jsx185(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx184(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx185(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef11(
+var Tag = forwardRef12(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil9(href) && isNonEmptyString3(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs12(
+    const labelProps = isNotNil9(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ jsxs13(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx184(
+          /* @__PURE__ */ jsx185(
             TagLabel,
             {
               ...labelProps,
@@ -7053,7 +7180,7 @@ var Tag = forwardRef11(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx184(
+          /* @__PURE__ */ jsx185(
             RemoveButton,
             {
               colorScheme,
@@ -7069,26 +7196,26 @@ var Tag = forwardRef11(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled26 from "styled-components";
+import styled27 from "styled-components";
 import { isNotNil as isNotNil10 } from "@wistia/type-guards";
-import { jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx185(
+    return /* @__PURE__ */ jsx186(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx185("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ jsx186("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ jsx185(
+  return /* @__PURE__ */ jsx186(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx185("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ jsx186("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -7096,12 +7223,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx185(
+  return /* @__PURE__ */ jsx186(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx185("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ jsx186("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -7111,7 +7238,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled26.svg`
+var WistiaLogoComponent = styled27.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -7153,7 +7280,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs13(
+  const Logo = /* @__PURE__ */ jsxs14(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -7163,14 +7290,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx185("title", { children: title }),
-        isNotNil10(description) ? /* @__PURE__ */ jsx185("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx186("title", { children: title }),
+        isNotNil10(description) ? /* @__PURE__ */ jsx186("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx185("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx186("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 export {
@@ -7195,6 +7322,7 @@ export {
   MenuItemLabel,
   MenuLabel,
   MenuRadioGroup,
+  Radio,
   RadioMenuItem,
   ScreenReaderOnly,
   Stack,