@wistia/ui 0.0.19 → 0.0.20

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.20
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -5851,7 +5851,7 @@ var Checkbox = forwardRef4(
     ...otherProps
   }, ref) => {
     const generatedId = useId();
-    const computedId = isNonEmptyString2(id) ? id : `vhs-collapsible-group-${generatedId}`;
+    const computedId = isNonEmptyString2(id) ? id : `vhs-checkbox-${generatedId}`;
     return /* @__PURE__ */ jsxs6(StyledCheckboxWrapper, { children: [
       /* @__PURE__ */ jsx166(
         StyledCheckboxRoot,
@@ -6873,12 +6873,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 : `vhs-radio-${generatedId}`;
+    return /* @__PURE__ */ jsxs12(
+      StyledRadioWrapper,
+      {
+        disabled,
+        hasError,
+        children: [
+          /* @__PURE__ */ jsx182(
+            StyledRadio,
+            {
+              ref,
+              "aria-checked": checked,
+              checked,
+              disabled,
+              id,
+              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 +7019,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 +7039,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 +7059,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 +7091,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 +7126,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 +7143,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 +7183,7 @@ var Tag = forwardRef11(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx184(
+          /* @__PURE__ */ jsx185(
             RemoveButton,
             {
               colorScheme,
@@ -7069,26 +7199,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 +7226,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 +7241,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 +7283,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 +7293,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 +7325,7 @@ export {
   MenuItemLabel,
   MenuLabel,
   MenuRadioGroup,
+  Radio,
   RadioMenuItem,
   ScreenReaderOnly,
   Stack,