@wistia/ui 0.10.10 → 0.10.11-beta.7c05d3b1.bec97f1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.10
+ * @license @wistia/ui v0.10.11-beta.7c05d3b1.bec97f1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2694,12 +2694,12 @@ var import_sonner2 = require("sonner");
 
 // src/private/components/Toast/Toast.tsx
 var import_react19 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
+var import_styled_components16 = require("styled-components");
 var import_type_guards11 = require("@wistia/type-guards");
 
 // src/components/Ellipsis/Ellipsis.tsx
 var import_type_guards10 = require("@wistia/type-guards");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components14 = require("styled-components");
 
 // src/css/lineClampCss.tsx
 var import_styled_components13 = require("styled-components");
@@ -2737,7 +2737,7 @@ var ellipsisStyle = import_styled_components14.css`
     }
   }
 `;
-var EllipsisComponent = import_styled_components14.default.span`
+var EllipsisComponent = import_styled_components14.styled.span`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if ((0, import_type_guards10.isNotNil)($lines)) {
@@ -2880,14 +2880,14 @@ var getColorScheme = (colorScheme) => {
 
 // src/private/components/Toast/Toast.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Message = (0, import_styled_components16.default)(Ellipsis)`
+var Message = (0, import_styled_components16.styled)(Ellipsis)`
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
 
   ${lineClampCss(3)}
 `;
-var MessageWrapper = import_styled_components16.default.div`
+var MessageWrapper = import_styled_components16.styled.div`
   display: flex;
   flex-grow: 1;
   flex-shrink: 1;
@@ -2900,13 +2900,13 @@ var MessageWrapper = import_styled_components16.default.div`
     margin-right: var(--wui-space-02); /* space between icon & message */
   }
 `;
-var ActionWrapper = import_styled_components16.default.div`
+var ActionWrapper = import_styled_components16.styled.div`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
   margin-right: var(--wui-space-03);
 `;
-var StyledToast = import_styled_components16.default.div`
+var StyledToast = import_styled_components16.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: flex;
   align-items: center;
@@ -2989,11 +2989,11 @@ var useToast = () => {
 
 // src/components/ActionButton/ActionButton.tsx
 var import_react24 = require("react");
-var import_styled_components22 = __toESM(require("styled-components"));
+var import_styled_components22 = require("styled-components");
 
 // src/components/Button/Button.tsx
 var import_react23 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_styled_components21 = require("styled-components");
 var import_type_guards15 = require("@wistia/type-guards");
 
 // src/css/buttonResetCss.tsx
@@ -3198,7 +3198,7 @@ var buttonSizeStyles = {
 
 // src/components/Icon/Icon.tsx
 var import_type_guards13 = require("@wistia/type-guards");
-var import_styled_components19 = __toESM(require("styled-components"));
+var import_styled_components19 = require("styled-components");
 
 // src/components/Icon/icons/AbTestIcon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -7116,7 +7116,7 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
-var StyledIcon = import_styled_components19.default.svg`
+var StyledIcon = import_styled_components19.styled.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
 `;
 var Icon = ({
@@ -7166,7 +7166,7 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 var import_react22 = require("react");
-var import_styled_components20 = __toESM(require("styled-components"));
+var import_styled_components20 = require("styled-components");
 var import_react_router_dom = require("react-router-dom");
 var import_type_guards14 = require("@wistia/type-guards");
 var import_jsx_runtime194 = require("react/jsx-runtime");
@@ -7185,7 +7185,7 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => (0, import_type_guards14.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
-var StyledLink = import_styled_components20.default.a`
+var StyledLink = import_styled_components20.styled.a`
   ${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
@@ -7307,7 +7307,7 @@ Link.displayName = "Link";
 // src/components/Button/Button.tsx
 var import_jsx_runtime195 = require("react/jsx-runtime");
 var isLink2 = (props) => (0, import_type_guards15.isNotUndefined)(props.href);
-var StyledButton = import_styled_components21.default.button`
+var StyledButton = import_styled_components21.styled.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   ${({ $size }) => buttonSizeStyles[$size]}
@@ -7316,7 +7316,7 @@ var StyledButton = import_styled_components21.default.button`
   ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   text-align: center;
 `;
-var StyledButtonContent = import_styled_components21.default.div`
+var StyledButtonContent = import_styled_components21.styled.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
@@ -7328,10 +7328,10 @@ var StyledButtonContent = import_styled_components21.default.div`
   ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = import_styled_components21.default.span`
+var StyledButtonContentLabel = import_styled_components21.styled.span`
   flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
 `;
-var StyledButtonLoading = import_styled_components21.default.div`
+var StyledButtonLoading = import_styled_components21.styled.div`
   position: absolute;
   display: flex;
 `;
@@ -7448,7 +7448,7 @@ Button.displayName = "Button";
 
 // src/components/ActionButton/ActionButton.tsx
 var import_jsx_runtime196 = require("react/jsx-runtime");
-var StyledActionButton = (0, import_styled_components22.default)(Button)`
+var StyledActionButton = (0, import_styled_components22.styled)(Button)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: grid;
   grid-template-columns: 24px 1fr;
@@ -7468,7 +7468,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
   }
 
   &:hover,
-  :focus-visible {
+  &:focus-visible {
     --wui-color-text: var(--wui-color-text-button);
 
     ${({ $hoverColorScheme }) => getColorScheme($hoverColorScheme)};
@@ -7493,7 +7493,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
     }
   }
 `;
-var StyledMainIcon = import_styled_components22.default.div`
+var StyledMainIcon = import_styled_components22.styled.div`
   grid-column: 1;
   grid-row: 1;
   width: 24px;
@@ -7507,7 +7507,7 @@ var StyledMainIcon = import_styled_components22.default.div`
     }
   }
 `;
-var StyledSecondaryIcon = import_styled_components22.default.div`
+var StyledSecondaryIcon = import_styled_components22.styled.div`
   grid-column: 2;
   grid-row: 1;
   width: 100%;
@@ -7533,7 +7533,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
     }
   }
 `;
-var StyledLabel = import_styled_components22.default.span`
+var StyledLabel = import_styled_components22.styled.span`
   font-family: var(--wui-typography-heading-4-family);
   font-size: var(--wui-typography-heading-4-size);
   font-weight: var(--wui-typography-heading-4-weight);
@@ -7589,7 +7589,7 @@ ActionButton.displayName = "ActionButton";
 // src/components/Avatar/Avatar.tsx
 var import_react25 = require("react");
 var import_type_guards18 = require("@wistia/type-guards");
-var import_styled_components25 = __toESM(require("styled-components"));
+var import_styled_components25 = require("styled-components");
 
 // src/components/Avatar/formatNameForDisplay.tsx
 var import_type_guards16 = require("@wistia/type-guards");
@@ -7606,7 +7606,7 @@ var formatNameForDisplay = (name) => {
 };
 
 // src/components/Image/Image.tsx
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_styled_components23 = require("styled-components");
 var import_type_guards17 = require("@wistia/type-guards");
 var import_jsx_runtime197 = require("react/jsx-runtime");
 var getFillStyle = (fillContainer) => {
@@ -7624,7 +7624,7 @@ var getFillStyle = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = import_styled_components23.default.img`
+var StyledImage = import_styled_components23.styled.img`
   border-radius: ${({ $borderRadius }) => (0, import_type_guards17.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
@@ -7659,7 +7659,7 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
+var import_styled_components24 = require("styled-components");
 var import_jsx_runtime198 = require("react/jsx-runtime");
 var defaultColorSchemeOptions = ["default", "inherit"];
 var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
@@ -7682,7 +7682,7 @@ var colorSchemeOptions = [
   ...brandColorSchemeOptions,
   ...vendorColorSchemeOptions
 ];
-var StyledColorSchemeWrapper = import_styled_components24.default.div`
+var StyledColorSchemeWrapper = import_styled_components24.styled.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
@@ -7738,7 +7738,7 @@ var Initial = ({ initial }) => /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
     ]
   }
 );
-var AvatarWrapper = import_styled_components25.default.div`
+var AvatarWrapper = import_styled_components25.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   width: ${({ $heightAndWidth }) => $heightAndWidth}px;
   height: ${({ $heightAndWidth }) => $heightAndWidth}px;
@@ -7836,10 +7836,10 @@ Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
 var import_react26 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
+var import_styled_components26 = require("styled-components");
 var import_type_guards19 = require("@wistia/type-guards");
 var import_jsx_runtime200 = require("react/jsx-runtime");
-var StyledBadge = import_styled_components26.default.div`
+var StyledBadge = import_styled_components26.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7887,12 +7887,12 @@ Badge.displayName = "Badge";
 
 // src/components/Banner/Banner.tsx
 var import_react31 = require("react");
-var import_styled_components32 = __toESM(require("styled-components"));
+var import_styled_components32 = require("styled-components");
 var import_type_guards24 = require("@wistia/type-guards");
 
 // src/components/Box/Box.tsx
 var import_react27 = require("react");
-var import_styled_components27 = __toESM(require("styled-components"));
+var import_styled_components27 = require("styled-components");
 var import_type_guards20 = require("@wistia/type-guards");
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -7906,10 +7906,10 @@ var getGapStyle = (gap) => {
   if ((0, import_type_guards20.isNotNil)(gap)) {
     if ((0, import_type_guards20.isRecord)(gap)) {
       return Object.entries(gap).map(([key, value]) => {
-        return `${key}-gap: var(--wui-${value})};`;
+        return `${key}-gap: var(--wui-${value});`;
       }).join("");
     }
-    return `gap: var(--wui-${gap.toString()})};`;
+    return `gap: var(--wui-${gap.toString()});`;
   }
   return void 0;
 };
@@ -7975,25 +7975,26 @@ var getFlexStyle = (flexMode) => {
       return null;
   }
 };
-var StyledBoxComponent = import_styled_components27.default.div`
+var StyledBoxComponent = import_styled_components27.styled.div`
+  /* properties meant for Box parent (flex container) */
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
-  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
   display: ${({ $inline }) => (0, import_type_guards20.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
+  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+  height: ${({ $height }) => $height ?? null};
+  width: ${({ $width }) => $width ?? null};
   ${({ $fillBox: fill }) => getFillStyle2(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
   ${({ $flexMode }) => getFlexStyle($flexMode)};
   ${({ $gap }) => getGapStyle($gap)};
-  height: ${({ $height }) => $height ?? null};
-  width: ${({ $width }) => $width ?? null};
 
-  /* Box children styles */
+  /* properties meant for Box children (flex items) */
+  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
+  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
   flex-grow: ${({ $grow }) => (0, import_type_guards20.isNotNil)($grow) ? $grow : null};
   flex-shrink: ${({ $shrink }) => (0, import_type_guards20.isNotNil)($shrink) ? $shrink : null};
-  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
-  justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => (0, import_type_guards20.isNotNil)($order) ? $order : null};
 `;
 var DEFAULT_ELEMENT = "div";
@@ -8079,7 +8080,7 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
 var import_react28 = require("react");
-var import_styled_components28 = __toESM(require("styled-components"));
+var import_styled_components28 = require("styled-components");
 var import_type_guards21 = require("@wistia/type-guards");
 var import_jsx_runtime202 = require("react/jsx-runtime");
 var heroStyle = import_styled_components28.css`
@@ -8134,7 +8135,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components28.default.div`
+var StyledHeading = import_styled_components28.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8206,7 +8207,7 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
 var import_react29 = require("react");
-var import_styled_components29 = __toESM(require("styled-components"));
+var import_styled_components29 = require("styled-components");
 var import_type_guards22 = require("@wistia/type-guards");
 var import_jsx_runtime203 = require("react/jsx-runtime");
 var bodyBoldStyles = import_styled_components29.css`
@@ -8328,7 +8329,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components29.default.div`
+var StyledText = import_styled_components29.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8415,7 +8416,7 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
+var import_styled_components30 = require("styled-components");
 var import_type_guards23 = require("@wistia/type-guards");
 var import_jsx_runtime204 = require("react/jsx-runtime");
 var getAlignment = (align) => {
@@ -8430,7 +8431,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = import_styled_components30.default.div`
+var ButtonGroupComponent = import_styled_components30.styled.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -8495,9 +8496,9 @@ ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/IconButton/IconButton.tsx
 var import_react30 = require("react");
-var import_styled_components31 = __toESM(require("styled-components"));
+var import_styled_components31 = require("styled-components");
 var import_jsx_runtime205 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components31.default)(Button)`
+var StyledButton2 = (0, import_styled_components31.styled)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -8536,7 +8537,7 @@ var import_jsx_runtime206 = require("react/jsx-runtime");
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
 var MIN_IMAGE_WIDTH = 400;
-var StyledBanner = import_styled_components32.default.div`
+var StyledBanner = import_styled_components32.styled.div`
   --wui-banner-padding: var(--wui-space-04);
   --wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
 
@@ -8569,7 +8570,7 @@ var StyledBanner = import_styled_components32.default.div`
 
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 `;
-var IconWrapper = (0, import_styled_components32.default)(Box)`
+var IconWrapper = (0, import_styled_components32.styled)(Box)`
   --wui-banner-icon-size: var(--font-size, 24px);
 
   ${({ $iconPosition }) => $iconPosition === "inline" && import_styled_components32.css`
@@ -8709,9 +8710,9 @@ Banner.displayName = "Banner";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react32 = require("react");
-var import_styled_components33 = __toESM(require("styled-components"));
+var import_styled_components33 = require("styled-components");
 var import_jsx_runtime207 = require("react/jsx-runtime");
-var StyledBreadcrumbs = import_styled_components33.default.nav`
+var StyledBreadcrumbs = import_styled_components33.styled.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -8756,9 +8757,9 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-var import_styled_components34 = __toESM(require("styled-components"));
+var import_styled_components34 = require("styled-components");
 var import_jsx_runtime208 = require("react/jsx-runtime");
-var BreadcrumbContent = import_styled_components34.default.span`
+var BreadcrumbContent = import_styled_components34.styled.span`
   overflow: hidden;
   white-space: nowrap;
   display: block;
@@ -8790,9 +8791,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/Card/Card.tsx
-var import_styled_components35 = __toESM(require("styled-components"));
+var import_styled_components35 = require("styled-components");
 var import_jsx_runtime209 = require("react/jsx-runtime");
-var StyledCard = (0, import_styled_components35.default)(Box)`
+var StyledCard = (0, import_styled_components35.styled)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -8850,9 +8851,9 @@ Card.displayName = "Card";
 
 // src/components/Center/Center.tsx
 var import_react33 = require("react");
-var import_styled_components36 = __toESM(require("styled-components"));
+var import_styled_components36 = require("styled-components");
 var import_jsx_runtime210 = require("react/jsx-runtime");
-var StyledCenter = import_styled_components36.default.div`
+var StyledCenter = import_styled_components36.styled.div`
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
@@ -8880,22 +8881,22 @@ var Center = (0, import_react33.forwardRef)(
 Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react37 = require("react");
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_react38 = require("react");
+var import_styled_components43 = require("styled-components");
+var import_type_guards30 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_styled_components39 = __toESM(require("styled-components"));
+var import_styled_components39 = require("styled-components");
 var import_type_guards27 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_styled_components37 = require("styled-components");
 var import_type_guards25 = require("@wistia/type-guards");
 var import_jsx_runtime211 = require("react/jsx-runtime");
 var disabledStyle = import_styled_components37.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = import_styled_components37.default.div`
+var StyledFormControlLabelDescription = import_styled_components37.styled.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -8925,11 +8926,11 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_styled_components38 = require("styled-components");
 var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime212 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components38.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components38.default.div({
+var VisuallyHidden = import_styled_components38.styled.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components38.styled.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -8952,11 +8953,11 @@ var disabledStyle2 = import_styled_components39.css`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = import_styled_components39.default.div`
+var StyledLabelWrapper = import_styled_components39.styled.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = import_styled_components39.default.label`
+var StyledFormControlLabel = import_styled_components39.styled.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -9001,18 +9002,19 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
+var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
+var import_styled_components41 = require("styled-components");
 var import_react35 = require("react");
 
 // src/components/Stack/Stack.tsx
 var import_react34 = require("react");
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_styled_components40 = require("styled-components");
 var import_jsx_runtime214 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components40.default.div`
+var StyledStack = import_styled_components40.styled.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9041,14 +9043,14 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
 var import_jsx_runtime215 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components41.default.fieldset`
+var StyledFieldset = import_styled_components41.styled.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components41.default.legend`
+var StyledLegend = import_styled_components41.styled.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react35.useRef)();
+  const ref = (0, import_react35.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(
     Stack,
     {
@@ -9071,11 +9073,132 @@ var FormGroup = ({ children, label, ...props }) => {
 };
 FormGroup.displayName = "FormGroup";
 
-// src/components/FormGroup/CheckboxGroup.tsx
+// src/components/Form/Form.tsx
+var import_react36 = require("react");
+var import_styled_components42 = require("styled-components");
+var import_type_guards28 = require("@wistia/type-guards");
+
+// src/components/Form/serializeFormData.tsx
+var ARRAY_SUFFIX = "[]";
+var serializeFormData = (formData) => {
+  const data = {};
+  formData.forEach((value, key) => {
+    if (key.endsWith(ARRAY_SUFFIX)) {
+      const newKey = key.slice(0, -ARRAY_SUFFIX.length);
+      data[newKey] = formData.getAll(key);
+    } else {
+      data[key] = value;
+    }
+  });
+  return data;
+};
+
+// src/components/Form/Form.tsx
 var import_jsx_runtime216 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react36.createContext)(null);
+var StyledForm = import_styled_components42.styled.form`
+  --form-default-width: 690px;
+
+  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
+`;
+var FormContext = (0, import_react36.createContext)({
+  values: {},
+  errors: {},
+  hasSubmitted: false,
+  formId: "NO_FORM",
+  labelPosition: "block"
+});
+var FormComponent = ({
+  children,
+  action,
+  values = {},
+  labelPosition = "block",
+  validate,
+  fullWidth = false,
+  ...props
+}, forwardedRef) => {
+  const [errors, setErrors] = (0, import_react36.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react36.useState)(false);
+  const innerRef = (0, import_react36.useRef)(null);
+  const ref = forwardedRef ?? innerRef;
+  const autoId = (0, import_react36.useId)();
+  const id = props.id ?? autoId;
+  const handleValidate = (nextFormData) => {
+    const nextData = serializeFormData(nextFormData);
+    if ((0, import_type_guards28.isUndefined)(validate)) {
+      return {};
+    }
+    return validate(nextData);
+  };
+  const handleBlur2 = (event) => {
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+    const formData = new FormData(event.currentTarget);
+    if ((0, import_type_guards28.isNotUndefined)(validate)) {
+      handleValidate(formData);
+    }
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const nextErrors = handleValidate(formData);
+    const isValid = Object.keys(nextErrors).length === 0;
+    setErrors(nextErrors);
+    setHasSubmitted(true);
+    if (isValid && props.onSubmit) {
+      props.onSubmit(event);
+    }
+    if (isValid && action) {
+      void action(formData);
+    }
+  };
+  const handleReset = (event) => {
+    setErrors({});
+    setHasSubmitted(false);
+    if (props.onReset) {
+      props.onReset(event);
+    }
+    if (action) {
+      void action(null);
+    }
+  };
+  const context = (0, import_react36.useMemo)(() => {
+    return {
+      values,
+      errors,
+      hasSubmitted,
+      formId: id,
+      labelPosition
+    };
+  }, [labelPosition, values, errors, id, hasSubmitted]);
+  return (
+    // @ts-expect-error - generic context providers are a giant pain
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+      Stack,
+      {
+        ...props,
+        ref,
+        $fullWidth: fullWidth,
+        alignItems: fullWidth ? "stretch" : "flex-start",
+        gap: "space-05",
+        id,
+        onBlur: handleBlur2,
+        onReset: handleReset,
+        onSubmit: handleSubmit,
+        renderAs: StyledForm,
+        children
+      }
+    ) })
+  );
+};
+FormComponent.displayName = "Form";
+var Form = (0, import_react36.forwardRef)(FormComponent);
+
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react37.createContext)(null);
 var useCheckboxGroup = () => {
-  return (0, import_react36.useContext)(CheckboxGroupContext);
+  return (0, import_react37.useContext)(CheckboxGroupContext);
 };
 var CheckboxGroup = ({
   children,
@@ -9084,19 +9207,22 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react36.useMemo)(() => {
+  const formState = (0, import_react37.useContext)(FormContext);
+  const derivedValue = (0, import_type_guards29.isArray)(formState.values[name]) ? formState.values[name] : value;
+  const context = (0, import_react37.useMemo)(() => {
     return {
-      name,
-      onChange
+      name: `${name}[]`,
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(FormGroup, { ...props, children }) });
+  }, [name, derivedValue, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -9104,7 +9230,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -9113,7 +9239,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components42.css`
+var sizeSmall = import_styled_components43.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -9124,7 +9250,7 @@ var sizeSmall = import_styled_components42.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components42.css`
+var sizeMedium = import_styled_components43.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -9135,7 +9261,7 @@ var sizeMedium = import_styled_components42.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components42.css`
+var sizeLarge = import_styled_components43.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -9151,14 +9277,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components42.default.div`
+var StyledCheckboxWrapper = import_styled_components43.styled.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components42.default.div`
+var StyledCheckboxInput = import_styled_components43.styled.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -9180,7 +9306,7 @@ var StyledCheckboxInput = import_styled_components42.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components42.default.input`
+var StyledHiddenCheckboxInput = import_styled_components43.styled.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -9194,7 +9320,7 @@ var StyledHiddenCheckboxInput = import_styled_components42.default.input`
     display: block;
   }
 `;
-var Checkbox = (0, import_react37.forwardRef)(
+var Checkbox = (0, import_react38.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -9209,20 +9335,22 @@ var Checkbox = (0, import_react37.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react37.useId)();
-    const computedId = (0, import_type_guards28.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    const generatedId = (0, import_react38.useId)();
+    const computedId = (0, import_type_guards30.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     const checkboxGroupContext = useCheckboxGroup();
     const contextName = checkboxGroupContext?.name;
     const contextOnChange = checkboxGroupContext?.onChange;
+    const contextValue = checkboxGroupContext?.value;
     const checkboxName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+    const defaultChecked = (0, import_type_guards30.isNotUndefined)(value) && contextValue ? contextValue.includes(value) : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
         StyledHiddenCheckboxInput,
         {
           ...props,
           ref,
-          checked,
+          ...(0, import_type_guards30.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked },
           disabled,
           id: computedId,
           name: checkboxName,
@@ -9232,16 +9360,16 @@ var Checkbox = (0, import_react37.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -9257,14 +9385,14 @@ var Checkbox = (0, import_react37.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var isClickableElement = (element) => {
   if (!element) return false;
   const el = element;
   return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
 };
 var ClickRegion = ({ children, targetRef }) => {
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -9272,7 +9400,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = (0, import_react38.useCallback)(
+  const handleClick = (0, import_react39.useCallback)(
     (event) => {
       const node = targetRef.current;
       if (event.target === node) {
@@ -9292,7 +9420,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return (0, import_react38.cloneElement)(import_react38.Children.only(children), {
+  return (0, import_react39.cloneElement)(import_react39.Children.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -9301,10 +9429,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards29 = require("@wistia/type-guards");
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components43.default)(import_react_collapsible.Root)`
+var import_type_guards31 = require("@wistia/type-guards");
+var import_styled_components44 = require("styled-components");
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components44.styled)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -9318,18 +9446,18 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards29.isNotNil)(onOpenChange) && (0, import_type_guards29.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards31.isNotNil)(onOpenChange) && (0, import_type_guards31.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components44.default)(import_react_collapsible2.Trigger)`
+var import_styled_components45 = require("styled-components");
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var StyledTrigger = (0, import_styled_components45.styled)(import_react_collapsible2.Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -9351,12 +9479,12 @@ var StyledTrigger = (0, import_styled_components44.default)(import_react_collaps
   }
 `;
 var CollapsibleTrigger = ({ children }) => {
-  import_react39.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledTrigger, { asChild: true, children });
+  import_react40.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(StyledTrigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleTriggerIcon.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
+var import_jsx_runtime221 = require("react/jsx-runtime");
 var iconRotationMap = {
   "caret-left-strong": "-90",
   "caret-left": "-90",
@@ -9365,7 +9493,7 @@ var iconRotationMap = {
   plus: "45"
 };
 var CollapsibleTriggerIcon = ({ type, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
     Icon,
     {
       ...props,
@@ -9378,16 +9506,16 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
 CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components46 = require("styled-components");
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime221 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components45.default.div`
+var import_type_guards32 = require("@wistia/type-guards");
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components46.styled.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards30.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+  if ((0, import_type_guards32.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
       ClampedContent,
       {
         $clamp: clamp,
@@ -9396,7 +9524,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_jsx_runtime221.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(import_jsx_runtime222.Fragment, { children: [
     children,
     " "
   ] }) });
@@ -9404,16 +9532,16 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_match_sorter = require("match-sorter");
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_styled_components49 = require("styled-components");
 
 // src/components/Tag/Tag.tsx
-var import_react40 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_type_guards31 = require("@wistia/type-guards");
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var TagLabel = import_styled_components46.default.a`
+var import_react41 = require("react");
+var import_styled_components47 = require("styled-components");
+var import_type_guards33 = require("@wistia/type-guards");
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var TagLabel = import_styled_components47.styled.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -9431,31 +9559,31 @@ var TagLabel = import_styled_components46.default.a`
     width: 12px;
   }
 
-  :not(:only-child) {
+  &:focus-visible {
+    outline: unset;
+    box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
+  }
+
+  &:not(:only-child) {
     padding-right: var(--wui-space-01);
   }
 
-  :is(a):hover {
+  &:is(a):hover {
     background: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  :is(a):active {
+  &:is(a):active {
     background: var(--wui-color-bg-surface-secondary-active);
   }
-
-  :focus-visible {
-    outline: unset;
-    box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
-  }
 `;
-var TagDivider = import_styled_components46.default.div`
+var TagDivider = import_styled_components47.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components46.default.button`
+var StyledRemoveButton = import_styled_components47.styled.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -9470,20 +9598,20 @@ var StyledRemoveButton = import_styled_components46.default.button`
     fill: var(--wui-color-icon);
   }
 
-  :hover {
+  &:hover {
     background: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  :active {
+  &:active {
     background: var(--wui-color-bg-surface-secondary-active);
   }
 
-  :focus-visible {
+  &:focus-visible {
     outline: unset;
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components46.default.div`
+var StyledTag = import_styled_components47.styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -9496,48 +9624,48 @@ var StyledTag = import_styled_components46.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards31.isNil)(onClickRemove)) {
+  if ((0, import_type_guards33.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards31.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards33.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(import_jsx_runtime222.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(import_jsx_runtime223.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react40.forwardRef)(
+var Tag = (0, import_react41.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = (0, import_type_guards31.isNotNil)(icon);
-    const labelProps = (0, import_type_guards31.isNotNil)(href) && (0, import_type_guards31.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
+    const hasIcon = (0, import_type_guards33.isNotNil)(icon);
+    const labelProps = (0, import_type_guards33.isNotNil)(href) && (0, import_type_guards33.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
             TagLabel,
             {
               ...labelProps,
@@ -9548,7 +9676,7 @@ var Tag = (0, import_react40.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -9564,8 +9692,8 @@ var Tag = (0, import_react40.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/css/inputCss.ts
-var import_styled_components47 = require("styled-components");
-var inputCss = import_styled_components47.css`
+var import_styled_components48 = require("styled-components");
+var inputCss = import_styled_components48.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -9591,8 +9719,8 @@ var inputCss = import_styled_components47.css`
 `;
 
 // src/components/Combobox/Combobox.tsx
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var ComboboxWapper = import_styled_components48.default.div`
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var ComboboxWapper = import_styled_components49.styled.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -9641,7 +9769,7 @@ var ComboboxWapper = import_styled_components48.default.div`
     }
   }
 `;
-var ComboboxInput = (0, import_styled_components48.default)(Ariakit.Combobox)`
+var ComboboxInput = (0, import_styled_components49.styled)(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -9656,7 +9784,7 @@ var ComboboxInput = (0, import_styled_components48.default)(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = (0, import_styled_components48.default)(Ariakit.Popover)`
+var ComboboxPopover = (0, import_styled_components49.styled)(Ariakit.Popover)`
   --wui-combobox-content-border: var(--wui-color-border);
   --wui-combobox-content-bg: var(--wui-color-bg-surface);
   --wui-combobox-content-border-radius: var(--wui-border-radius-02);
@@ -9681,7 +9809,7 @@ var ComboboxPopover = (0, import_styled_components48.default)(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = (0, import_styled_components48.default)(Ariakit.ComboboxItem)`
+var ComboboxItem2 = (0, import_styled_components49.styled)(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -9706,12 +9834,12 @@ var ComboboxItem2 = (0, import_styled_components48.default)(Ariakit.ComboboxItem
     background-color: transparent;
   }
 `;
-var NoResults = import_styled_components48.default.div`
+var NoResults = import_styled_components49.styled.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
 var ComboboxOption = ({ value, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -9723,8 +9851,8 @@ var ComboboxOption = ({ value, children }) => {
 };
 var extractOptions = (children) => {
   const options = {};
-  import_react41.Children.forEach(children, (child) => {
-    if ((0, import_react41.isValidElement)(child) && "value" in child.props && "children" in child.props) {
+  import_react42.Children.forEach(children, (child) => {
+    if ((0, import_react42.isValidElement)(child) && "value" in child.props && "children" in child.props) {
       options[child.props.value] = child.props.children ?? child.props.value;
     }
   });
@@ -9739,11 +9867,11 @@ var Combobox2 = ({
   children,
   fullWidth = true
 }) => {
-  const [isPending, startTransition] = (0, import_react41.useTransition)();
-  const [wrapperWidth, setWrapperWidth] = (0, import_react41.useState)("auto");
-  const comboboxWrapperRef = (0, import_react41.useRef)(null);
-  const options = (0, import_react41.useMemo)(() => extractOptions(children), [children]);
-  (0, import_react41.useEffect)(() => {
+  const [isPending, startTransition] = (0, import_react42.useTransition)();
+  const [wrapperWidth, setWrapperWidth] = (0, import_react42.useState)("auto");
+  const comboboxWrapperRef = (0, import_react42.useRef)(null);
+  const options = (0, import_react42.useMemo)(() => extractOptions(children), [children]);
+  (0, import_react42.useEffect)(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -9761,10 +9889,10 @@ var Combobox2 = ({
   const handleRemoveValue = (valueToRemove) => {
     onChange(value.filter((val) => val !== valueToRemove));
   };
-  const matches = (0, import_react41.useMemo)(() => {
+  const matches = (0, import_react42.useMemo)(() => {
     return (0, import_match_sorter.matchSorter)(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
     Ariakit.ComboboxProvider,
     {
       selectedValue: value,
@@ -9775,13 +9903,13 @@ var Combobox2 = ({
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
           ComboboxWapper,
           {
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
                 Tag,
                 {
                   href: "https://example.com",
@@ -9791,11 +9919,11 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ComboboxInput, { placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(ComboboxInput, { placeholder })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
           ComboboxPopover,
           {
             "aria-busy": isPending,
@@ -9805,14 +9933,14 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
                       Icon,
                       {
                         size: "sm",
@@ -9827,7 +9955,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -9837,11 +9965,11 @@ var Combobox2 = ({
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_react42 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components49.default.div`
+var import_react43 = require("react");
+var import_styled_components50 = require("styled-components");
+var import_type_guards34 = require("@wistia/type-guards");
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components50.styled.div`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -9896,7 +10024,7 @@ var StyledDataCard = import_styled_components49.default.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components49.keyframes`
+var shimmer = import_styled_components50.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -9904,7 +10032,7 @@ var shimmer = import_styled_components49.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components49.default.div`
+var LoadingBackground = import_styled_components50.styled.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -9915,27 +10043,27 @@ var LoadingBackground = import_styled_components49.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components49.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components50.styled)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components49.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components50.styled)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components49.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components50.styled)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components49.default)(Heading)`
+var StyledValue = (0, import_styled_components50.styled)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components49.default.div`
+var StyledSlot = import_styled_components50.styled.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components49.default.div`
+var StyledDataCardTrendContainer = import_styled_components50.styled.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -9948,34 +10076,34 @@ var DataCardInner = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards32.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards32.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards34.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards34.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -9983,18 +10111,18 @@ var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
   }
 );
 var DataCard = (props) => {
-  const ref = (0, import_react42.useRef)(null);
-  if ((0, import_type_guards32.isNotNil)(props.href) || (0, import_type_guards32.isNotNil)(props.onClick)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  const ref = (0, import_react43.useRef)(null);
+  if ((0, import_type_guards34.isNotNil)(props.href) || (0, import_type_guards34.isNotNil)(props.onClick)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+        label: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
           Button,
           {
             ref,
-            ...(0, import_type_guards32.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
+            ...(0, import_type_guards34.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
             disabled: props.disabled ?? false,
             href: props.href,
             onClick: props.onClick,
@@ -10005,14 +10133,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DataCardInner, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components50.default)(Box)`
+var import_styled_components51 = require("styled-components");
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components51.styled)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -10026,7 +10154,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -10044,9 +10172,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components51.default.div`
+var import_styled_components52 = require("styled-components");
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components52.styled.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -10061,8 +10189,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
       Icon,
       {
         size: "md",
@@ -10070,7 +10198,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -10082,22 +10210,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_jsx_runtime227 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components52.css`
+var import_styled_components53 = require("styled-components");
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components53.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_components52.css`
+var verticalBorderCss = import_styled_components53.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components52.default.div`
+var DividerComponent = import_styled_components53.styled.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -10109,7 +10237,7 @@ var DividerComponent = import_styled_components52.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -10122,14 +10250,14 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components55 = __toESM(require("styled-components"));
-var import_react44 = require("react");
+var import_styled_components56 = require("styled-components");
+var import_react45 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components53 = __toESM(require("styled-components"));
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var hide = import_styled_components53.keyframes`
+var import_styled_components54 = require("styled-components");
+var import_jsx_runtime229 = require("react/jsx-runtime");
+var hide = import_styled_components54.keyframes`
   from {
     opacity: 1;
   }
@@ -10137,7 +10265,7 @@ var hide = import_styled_components53.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components53.keyframes`
+var slideDownAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -10147,7 +10275,7 @@ var slideDownAndFade = import_styled_components53.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components53.keyframes`
+var slideLeftAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -10157,7 +10285,7 @@ var slideLeftAndFade = import_styled_components53.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components53.keyframes`
+var slideUpAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -10167,7 +10295,7 @@ var slideUpAndFade = import_styled_components53.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components53.keyframes`
+var slideRightAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -10177,7 +10305,7 @@ var slideRightAndFade = import_styled_components53.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components53.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components54.styled)(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);
@@ -10239,21 +10367,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -10262,7 +10390,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime228.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_runtime229.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
             ]
@@ -10275,11 +10403,11 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-var import_react43 = require("react");
-var import_styled_components54 = __toESM(require("styled-components"));
-var import_type_guards33 = require("@wistia/type-guards");
-var import_jsx_runtime229 = require("react/jsx-runtime");
-var inputStyles = import_styled_components54.css`
+var import_react44 = require("react");
+var import_styled_components55 = require("styled-components");
+var import_type_guards35 = require("@wistia/type-guards");
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var inputStyles = import_styled_components55.css`
   ${inputCss}
   input,
   textarea {
@@ -10314,7 +10442,7 @@ var inputStyles = import_styled_components54.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components54.default.div`
+var StyledInputContainer = import_styled_components55.styled.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -10362,8 +10490,8 @@ var StyledInputContainer = import_styled_components54.default.div`
     transform: translateY(-50%);
   }
 
-  :has(.wui-input-left-icon) input,
-  :has(.wui-input-left-icon) textarea {
+  &:has(.wui-input-left-icon) input,
+  &:has(.wui-input-left-icon) textarea {
     padding-left: 32px;
   }
 
@@ -10376,12 +10504,12 @@ var StyledInputContainer = import_styled_components54.default.div`
     transform: translateY(-50%);
   }
 
-  :has(.wui-input-right-icon) input,
-  :has(.wui-input-right-icon) textarea {
+  &:has(.wui-input-right-icon) input,
+  &:has(.wui-input-right-icon) textarea {
     padding-right: 32px;
   }
 `;
-var Input = (0, import_react43.forwardRef)(
+var Input = (0, import_react44.forwardRef)(
   ({
     fullWidth = true,
     monospace = false,
@@ -10391,30 +10519,30 @@ var Input = (0, import_react43.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react43.useRef)();
+    const internalRef = (0, import_react44.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards33.isNotNil)(externalRef) && (0, import_type_guards33.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards33.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Icon, { type: "search" });
+    if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards33.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react43.cloneElement)(leftIconToDisplay, {
+    if ((0, import_type_guards35.isNotNil)(leftIconToDisplay)) {
+      leftIconToDisplay = (0, import_react44.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards33.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react43.cloneElement)(rightIconToDisplay, {
+    if ((0, import_type_guards35.isNotNil)(rightIconToDisplay)) {
+      rightIconToDisplay = (0, import_react44.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if ((0, import_type_guards33.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards35.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -10423,21 +10551,21 @@ var Input = (0, import_react43.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
             "input",
             {
               ...props,
@@ -10455,8 +10583,8 @@ var Input = (0, import_react43.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime230 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components55.default)(Input)`
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components56.styled)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -10471,9 +10599,10 @@ var StyledInput = (0, import_styled_components55.default)(Input)`
     padding: var(--wui-space-02);
     border: none;
     height: ${({ $height }) => `${$height}px`};
+    min-height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components55.css`
+var editableStyles = import_styled_components56.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -10483,7 +10612,7 @@ var editableStyles = import_styled_components55.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components55.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components56.styled)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -10500,11 +10629,11 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react44.useState)(false);
-  const [value, setValue] = (0, import_react44.useState)(children);
-  const [previousValue, setPreviousValue] = (0, import_react44.useState)(children);
-  const [headingHeight, setHeadingHeight] = (0, import_react44.useState)("60");
-  const headingRef = (0, import_react44.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react45.useState)(false);
+  const [value, setValue] = (0, import_react45.useState)(children);
+  const [previousValue, setPreviousValue] = (0, import_react45.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react45.useState)("60");
+  const headingRef = (0, import_react45.useRef)(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -10537,7 +10666,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -10551,7 +10680,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -10569,9 +10698,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(import_jsx_runtime230.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(import_jsx_runtime231.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -10582,110 +10711,6 @@ var EditableHeading = ({
   ] });
 };
 
-// src/components/Form/Form.tsx
-var import_react45 = require("react");
-var import_styled_components56 = __toESM(require("styled-components"));
-var import_type_guards34 = require("@wistia/type-guards");
-var import_jsx_runtime231 = require("react/jsx-runtime");
-var StyledForm = import_styled_components56.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_react45.createContext)({
-  values: {},
-  errors: {},
-  hasSubmitted: false,
-  formId: "NO_FORM",
-  labelPosition: "block"
-});
-var FormComponent = ({
-  children,
-  action,
-  values = {},
-  labelPosition = "block",
-  validate,
-  fullWidth = false,
-  ...props
-}, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react45.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react45.useState)(false);
-  const innerRef = (0, import_react45.useRef)();
-  const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react45.useId)();
-  const id = props.id ?? autoId;
-  const handleValidate = (nextFormData) => {
-    const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards34.isUndefined)(validate)) {
-      return {};
-    }
-    return validate(nextData);
-  };
-  const handleBlur2 = (event) => {
-    if (props.onBlur) {
-      props.onBlur(event);
-    }
-    const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards34.isNotUndefined)(validate)) {
-      handleValidate(formData);
-    }
-  };
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const nextErrors = handleValidate(formData);
-    const isValid = Object.keys(nextErrors).length === 0;
-    setErrors(nextErrors);
-    setHasSubmitted(true);
-    if (isValid && props.onSubmit) {
-      props.onSubmit(event);
-    }
-    if (isValid && action) {
-      void action(formData);
-    }
-  };
-  const handleReset = (event) => {
-    setErrors({});
-    setHasSubmitted(false);
-    if (props.onReset) {
-      props.onReset(event);
-    }
-    if (action) {
-      void action(null);
-    }
-  };
-  const context = (0, import_react45.useMemo)(() => {
-    return {
-      values,
-      errors,
-      hasSubmitted,
-      formId: id,
-      labelPosition
-    };
-  }, [labelPosition, values, errors, id, hasSubmitted]);
-  return (
-    // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
-      Stack,
-      {
-        ...props,
-        ref,
-        $fullWidth: fullWidth,
-        as: StyledForm,
-        gap: "space-05",
-        id,
-        onBlur: handleBlur2,
-        onReset: handleReset,
-        onSubmit: handleSubmit,
-        children
-      }
-    ) })
-  );
-};
-FormComponent.displayName = "Form";
-var Form = (0, import_react45.forwardRef)(FormComponent);
-
 // src/components/Form/useFormState.tsx
 var import_react46 = require("react");
 var useFormState = (action, initialData = {}) => {
@@ -10699,7 +10724,7 @@ var useFormState = (action, initialData = {}) => {
         setError(null);
         return;
       }
-      const nextData = Object.fromEntries(nextFormData.entries());
+      const nextData = serializeFormData(nextFormData);
       setIsPending(true);
       try {
         const result = await action(data, nextData);
@@ -10724,7 +10749,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react47 = require("react");
-var import_type_guards35 = require("@wistia/type-guards");
+var import_type_guards36 = require("@wistia/type-guards");
 var import_jsx_runtime232 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
@@ -10738,8 +10763,8 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards35.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards35.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards36.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards36.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
         ErrorItem,
         {
           error: err,
@@ -10762,11 +10787,11 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react48 = require("react");
-var import_styled_components58 = __toESM(require("styled-components"));
-var import_type_guards36 = require("@wistia/type-guards");
+var import_styled_components58 = require("styled-components");
+var import_type_guards37 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components57 = __toESM(require("styled-components"));
+var import_styled_components57 = require("styled-components");
 var import_jsx_runtime233 = require("react/jsx-runtime");
 var requiredStyle = import_styled_components57.css`
   &::after {
@@ -10779,7 +10804,7 @@ var requiredStyle = import_styled_components57.css`
 var disabledStyle3 = import_styled_components57.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components57.default.label`
+var StyledLabel3 = import_styled_components57.styled.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -10827,7 +10852,7 @@ Label.displayName = "Label";
 
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime234 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components58.default.div`
+var StyledFormField = import_styled_components58.styled.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);
@@ -10857,7 +10882,7 @@ var StyledFormField = import_styled_components58.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components58.default.ul`
+var StyledErrorList = import_styled_components58.styled.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -10866,7 +10891,7 @@ var StyledErrorList = import_styled_components58.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards36.isArray)(errors);
+  const isMultipleErrors = (0, import_type_guards37.isArray)(errors);
   return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     Text,
     {
@@ -10916,19 +10941,19 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if ((0, import_type_guards36.isUndefined)(value) && (0, import_type_guards36.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards37.isUndefined)(value) && (0, import_type_guards37.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards36.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards36.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards37.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards37.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards36.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards37.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards36.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards37.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -10936,7 +10961,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards36.isNotNil)(error)
+      "aria-invalid": (0, import_type_guards37.isNotNil)(error)
     };
   }
   import_react48.Children.only(children);
@@ -10947,9 +10972,9 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Label, { htmlFor: computedId, children: label }),
-        (0, import_type_guards36.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        (0, import_type_guards37.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react48.cloneElement)(children, childProps),
-        (0, import_type_guards36.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
+        (0, import_type_guards37.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", {}),
           /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
             ErrorMessages,
@@ -10979,22 +11004,25 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
+  const formState = (0, import_react49.useContext)(FormContext);
+  const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
   const context = (0, import_react49.useMemo)(() => {
     return {
       name,
-      onChange
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
+  }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-var import_styled_components59 = __toESM(require("styled-components"));
+var import_styled_components59 = require("styled-components");
 var import_react50 = require("react");
-var import_type_guards37 = require("@wistia/type-guards");
+var import_type_guards38 = require("@wistia/type-guards");
 var import_jsx_runtime236 = require("react/jsx-runtime");
-var StyledInput2 = (0, import_styled_components59.default)(Input)`
+var StyledInput2 = (0, import_styled_components59.styled)(Input)`
   &:not([aria-disabled='true']) {
     cursor: pointer;
   }
@@ -11020,12 +11048,12 @@ var InputClickToCopy = (0, import_react50.forwardRef)(
     }, [isCopied]);
     const handleClick = (event) => {
       event.preventDefault();
-      if ((0, import_type_guards37.isFunction)(props.onClick)) {
+      if ((0, import_type_guards38.isFunction)(props.onClick)) {
         props.onClick(event);
       }
       void copyToClipboard(value).then(() => {
         setIsCopied(true);
-        if ((0, import_type_guards37.isFunction)(onCopy)) {
+        if ((0, import_type_guards38.isFunction)(onCopy)) {
           onCopy(value);
         }
         return value;
@@ -11054,16 +11082,16 @@ var InputClickToCopy = (0, import_react50.forwardRef)(
 InputClickToCopy.displayName = "InputClickToCopy";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-var import_styled_components60 = __toESM(require("styled-components"));
-var import_type_guards38 = require("@wistia/type-guards");
+var import_styled_components60 = require("styled-components");
+var import_type_guards39 = require("@wistia/type-guards");
 var import_jsx_runtime237 = require("react/jsx-runtime");
-var StyledKeyboardShortcut = import_styled_components60.default.div`
+var StyledKeyboardShortcut = import_styled_components60.styled.div`
   align-items: center;
   display: flex;
   gap: var(--wui-space-02);
   ${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
 `;
-var StyledKey = import_styled_components60.default.kbd`
+var StyledKey = import_styled_components60.styled.kbd`
   align-items: center;
   background: var(--wui-color-bg-surface-secondary);
   border-bottom: 1px solid var(--wui-color-border-secondary);
@@ -11086,11 +11114,11 @@ var StyledKey = import_styled_components60.default.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-var Label2 = import_styled_components60.default.span`
+var Label2 = import_styled_components60.styled.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
-var KeysContainer = import_styled_components60.default.div`
+var KeysContainer = import_styled_components60.styled.div`
   display: flex;
   gap: var(--wui-space-01);
 `;
@@ -11149,7 +11177,7 @@ var KeyboardShortcut = ({
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      (0, import_type_guards38.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Label2, { children: label }),
+      (0, import_type_guards39.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Label2, { children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
         StyledKey,
         {
@@ -11163,18 +11191,18 @@ var KeyboardShortcut = ({
 KeyboardShortcut.displayName = "KeyboardShortcut";
 
 // src/components/List/List.tsx
-var import_type_guards40 = require("@wistia/type-guards");
-var import_styled_components62 = __toESM(require("styled-components"));
+var import_type_guards41 = require("@wistia/type-guards");
+var import_styled_components62 = require("styled-components");
 
 // src/components/List/ListItem.tsx
-var import_styled_components61 = __toESM(require("styled-components"));
-var import_type_guards39 = require("@wistia/type-guards");
+var import_styled_components61 = require("styled-components");
+var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime238 = require("react/jsx-runtime");
-var ListItemComponent = import_styled_components61.default.li`
+var ListItemComponent = import_styled_components61.styled.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if ((0, import_type_guards39.isNil)(children)) {
+  if ((0, import_type_guards40.isNil)(children)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItemComponent, { children });
@@ -11241,7 +11269,7 @@ var unbulletedStyle = import_styled_components62.css`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = import_styled_components62.default.ul`
+var ListComponent = import_styled_components62.styled.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -11304,13 +11332,13 @@ var List = ({
   ...otherProps
 }) => {
   const listVariant = variant ?? "bullets";
-  if ((0, import_type_guards40.isNotNil)(children)) {
+  if ((0, import_type_guards41.isNotNil)(children)) {
     if (Array.isArray(children) && !children.length) {
       return null;
     }
     return renderListComponent(children, listVariant, otherProps);
   }
-  if ((0, import_type_guards40.isNotNil)(items)) {
+  if ((0, import_type_guards41.isNotNil)(items)) {
     if (!items.length) {
       return null;
     }
@@ -11321,9 +11349,9 @@ var List = ({
 List.displayName = "List";
 
 // src/components/Menu/Menu.tsx
-var import_styled_components63 = __toESM(require("styled-components"));
+var import_styled_components63 = require("styled-components");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards41 = require("@wistia/type-guards");
+var import_type_guards42 = require("@wistia/type-guards");
 var import_react52 = require("react");
 
 // src/components/Menu/MenuContext.tsx
@@ -11417,7 +11445,7 @@ var menuContentCss = import_styled_components63.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components63.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components63.styled)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -11435,7 +11463,7 @@ var Menu = ({
 }) => {
   const contextValue = (0, import_react52.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
-    ...(0, import_type_guards41.isNotNil)(onOpenChange) && (0, import_type_guards41.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards42.isNotNil)(onOpenChange) && (0, import_type_guards42.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -11449,7 +11477,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards41.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards42.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
@@ -11481,10 +11509,10 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components64 = __toESM(require("styled-components"));
+var import_styled_components64 = require("styled-components");
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime241 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components64.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var StyledMenuLabel = (0, import_styled_components64.styled)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -11509,16 +11537,16 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 var import_react54 = require("react");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_styled_components67 = require("styled-components");
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards43 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react53 = require("react");
-var import_styled_components65 = __toESM(require("styled-components"));
-var import_type_guards42 = require("@wistia/type-guards");
+var import_styled_components65 = require("styled-components");
+var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime242 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components65.default)(Button)`
+var StyledButton3 = (0, import_styled_components65.styled)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -11533,7 +11561,7 @@ var StyledButton3 = (0, import_styled_components65.default)(Button)`
   line-height: var(--menu-label-line-height);
   transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
 
-  :active {
+  &:active {
     background-color: var(--wui-color-bg-surface-active);
   }
 
@@ -11557,7 +11585,7 @@ var StyledButton3 = (0, import_styled_components65.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components65.default.div`
+var StyledLeftIconContainer = import_styled_components65.styled.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -11568,7 +11596,7 @@ var StyledLeftIconContainer = import_styled_components65.default.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components65.default.div`
+var StyledRightIconContainer = import_styled_components65.styled.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -11579,13 +11607,13 @@ var StyledRightIconContainer = import_styled_components65.default.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components65.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components65.styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components65.default.div`
+var StyledBadgeContainer = import_styled_components65.styled.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -11594,7 +11622,7 @@ var StyledBadgeContainer = import_styled_components65.default.div`
 var MenuItemButton = (0, import_react53.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards42.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards43.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -11624,7 +11652,7 @@ var MenuItemButton = (0, import_react53.forwardRef)(({ children, appearance, com
       children: [
         props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards42.isNotNil)(badge) || (0, import_type_guards42.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        (0, import_type_guards43.isNotNil)(badge) || (0, import_type_guards43.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -11633,10 +11661,10 @@ var MenuItemButton = (0, import_react53.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components66 = __toESM(require("styled-components"));
+var import_styled_components66 = require("styled-components");
 var import_jsx_runtime243 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components66.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components66.default)(Text)``;
+var StyledMenuItemLabel = import_styled_components66.styled.span``;
+var StyledMenuItemDescription = (0, import_styled_components66.styled)(Text)``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(StyledMenuItemLabel, { children });
 };
@@ -11653,17 +11681,17 @@ var MenuItemDescription = ({ children }) => {
 
 // src/components/Menu/SubMenu.tsx
 var import_jsx_runtime244 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components67.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var SubMenuContent = (0, import_styled_components67.styled)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components67.default.div`
+var StyledMobileSubMenuItems = import_styled_components67.styled.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components67.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components67.styled)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -11696,7 +11724,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards43.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(MenuItemDescription, { children: description }) : null
+      (0, import_type_guards44.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
@@ -11788,7 +11816,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-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 CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
@@ -11862,8 +11890,8 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: (0, import_type_guards44.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(CheckboxIndicator, { checked }),
-          rightIcon: (0, import_type_guards44.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: (0, import_type_guards45.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(CheckboxIndicator, { checked }),
+          rightIcon: (0, import_type_guards45.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -11873,19 +11901,19 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 var import_react59 = require("react");
-var import_styled_components72 = __toESM(require("styled-components"));
+var import_styled_components72 = require("styled-components");
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards46 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components69 = __toESM(require("styled-components"));
+var import_styled_components69 = require("styled-components");
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components68 = __toESM(require("styled-components"));
+var import_styled_components68 = require("styled-components");
 var import_react_dialog = require("@radix-ui/react-dialog");
 var import_jsx_runtime249 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components68.default)(import_react_dialog.Close)`
+var CloseButton = (0, import_styled_components68.styled)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
@@ -11902,7 +11930,7 @@ var ModalCloseButton = () => {
 
 // src/components/Modal/ModalHeader.tsx
 var import_jsx_runtime250 = require("react/jsx-runtime");
-var Header = import_styled_components69.default.header`
+var Header = import_styled_components69.styled.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -11913,7 +11941,7 @@ var Header = import_styled_components69.default.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = (0, import_styled_components69.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components69.styled)(import_react_dialog2.Title)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -11933,12 +11961,12 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 var import_react57 = require("react");
-var import_styled_components70 = __toESM(require("styled-components"));
+var import_styled_components70 = require("styled-components");
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react56 = require("react");
-var import_type_guards45 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react56.useRef)(null);
   (0, import_react56.useEffect)(() => {
@@ -11946,7 +11974,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react56.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards45.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards46.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -11987,7 +12015,7 @@ var alignLeftStyles = import_styled_components70.css`
 
   left: 0;
 `;
-var StyledModalContent = (0, import_styled_components70.default)(import_react_dialog3.Content)`
+var StyledModalContent = (0, import_styled_components70.styled)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -12056,7 +12084,7 @@ var ModalContent = (0, import_react57.forwardRef)(
 
 // src/private/components/Backdrop/Backdrop.tsx
 var import_react58 = require("react");
-var import_styled_components71 = __toESM(require("styled-components"));
+var import_styled_components71 = require("styled-components");
 var import_jsx_runtime252 = require("react/jsx-runtime");
 var alignVerticalMap = {
   stretch: "normal",
@@ -12069,7 +12097,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components71.default.div`
+var BackdropComponent = import_styled_components71.styled.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   background: var(--wui-color-backdrop);
@@ -12112,7 +12140,7 @@ Backdrop.displayName = "Backdrop";
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime253 = require("react/jsx-runtime");
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = import_styled_components72.default.div`
+var ModalBody = import_styled_components72.styled.div`
   flex-direction: column;
   display: flex;
   flex: 1 0 0;
@@ -12137,7 +12165,7 @@ var Modal = (0, import_react59.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards46.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards47.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -12152,7 +12180,7 @@ var Modal = (0, import_react59.forwardRef)(
               alignVertical,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards46.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards47.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -12183,19 +12211,19 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
-var import_styled_components74 = __toESM(require("styled-components"));
+var import_styled_components74 = require("styled-components");
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards47 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards47.isNotNil)(onOpenChange) && (0, import_type_guards47.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards48.isNotNil)(onOpenChange) && (0, import_type_guards48.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components73 = require("styled-components");
 var import_jsx_runtime254 = require("react/jsx-runtime");
-var StyledPath = import_styled_components73.default.path`
+var StyledPath = import_styled_components73.styled.path`
   fill: var(--wui-color-border-secondary);
 `;
 var circleAnimation = import_styled_components73.keyframes`
@@ -12206,7 +12234,7 @@ var circleAnimation = import_styled_components73.keyframes`
     opacity: 0;
   }
 `;
-var StyledCircle = import_styled_components73.default.circle`
+var StyledCircle = import_styled_components73.styled.circle`
   stroke: var(--wui-color-border-active);
   animation-duration: 2s;
   animation-iteration-count: infinite;
@@ -12273,7 +12301,7 @@ PopoverArrow.displayName = "PopoverArrow";
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledContent2 = (0, import_styled_components74.default)(import_react_popover2.Content)`
+var StyledContent2 = (0, import_styled_components74.styled)(import_react_popover2.Content)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && import_styled_components74.css`
       border-radius: var(--wui-border-radius-02);
@@ -12341,11 +12369,11 @@ var Popover2 = ({
 Popover2.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_styled_components75 = __toESM(require("styled-components"));
+var import_styled_components75 = require("styled-components");
 var import_react_progress = require("@radix-ui/react-progress");
-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 ProgressBarWrapper = import_styled_components75.default.div`
+var ProgressBarWrapper = import_styled_components75.styled.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -12361,7 +12389,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = import_styled_components75.default.div`
+var ProgressBarLabel = import_styled_components75.styled.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -12369,7 +12397,7 @@ var ProgressBarLabel = import_styled_components75.default.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = (0, import_styled_components75.default)(import_react_progress.Indicator)`
+var StyledProgressIndicator = (0, import_styled_components75.styled)(import_react_progress.Indicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -12378,7 +12406,7 @@ var StyledProgressIndicator = (0, import_styled_components75.default)(import_rea
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = (0, import_styled_components75.default)(import_react_progress.Root)`
+var StyledProgressBar = (0, import_styled_components75.styled)(import_react_progress.Root)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -12398,7 +12426,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards48.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards49.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
       StyledProgressBar,
       {
@@ -12414,15 +12442,15 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards48.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards49.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 var import_react60 = require("react");
-var import_styled_components76 = __toESM(require("styled-components"));
-var import_type_guards49 = require("@wistia/type-guards");
+var import_styled_components76 = require("styled-components");
+var import_type_guards50 = require("@wistia/type-guards");
 var import_jsx_runtime257 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
   "svg",
@@ -12481,14 +12509,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = import_styled_components76.default.div`
+var StyledRadioWrapper = import_styled_components76.styled.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = import_styled_components76.default.div`
+var StyledRadioInput = import_styled_components76.styled.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -12510,7 +12538,7 @@ var StyledRadioInput = import_styled_components76.default.div`
     }
   }
 `;
-var StyledHiddenRadioInput = import_styled_components76.default.input`
+var StyledHiddenRadioInput = import_styled_components76.styled.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input border-color */
@@ -12539,12 +12567,14 @@ var Radio = (0, import_react60.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react60.useId)();
-    const computedId = (0, import_type_guards49.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards50.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
+    const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
+    const defaultChecked = (0, import_type_guards50.isNotUndefined)(value) && (0, import_type_guards50.isNotUndefined)(contextValue) ? contextValue.includes(value) : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
       StyledRadioWrapper,
       {
@@ -12556,14 +12586,14 @@ var Radio = (0, import_react60.forwardRef)(
             {
               ...props,
               ref,
-              checked,
               disabled,
               id: computedId,
               name: radioName,
               onChange: handleOnChange,
               required,
               type: "radio",
-              value
+              value,
+              ...(0, import_type_guards50.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
@@ -12594,9 +12624,9 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react63 = require("react");
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components78 = require("styled-components");
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_type_guards50 = require("@wistia/type-guards");
+var import_type_guards51 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 var import_react61 = require("react");
@@ -12634,7 +12664,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
+var import_styled_components77 = require("styled-components");
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react62 = require("react");
@@ -12650,7 +12680,7 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_jsx_runtime259 = require("react/jsx-runtime");
-var SelectedItemIndicatorDiv = import_styled_components77.default.div`
+var SelectedItemIndicatorDiv = import_styled_components77.styled.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -12684,7 +12714,7 @@ var segmentedControlStyles = import_styled_components78.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components78.default)(import_react_toggle_group.Root)`
+var StyledSegmentedControl = (0, import_styled_components78.styled)(import_react_toggle_group.Root)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = (0, import_react63.forwardRef)(
@@ -12696,7 +12726,7 @@ var SegmentedControl = (0, import_react63.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards50.isNil)(children)) {
+    if ((0, import_type_guards51.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
@@ -12723,9 +12753,9 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react64 = require("react");
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components79 = require("styled-components");
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
-var import_type_guards51 = require("@wistia/type-guards");
+var import_type_guards52 = require("@wistia/type-guards");
 var import_jsx_runtime261 = require("react/jsx-runtime");
 var segmentedControlItemStyles = import_styled_components79.css`
   all: unset; /* ToggleGroupItem is a button element */
@@ -12787,7 +12817,7 @@ var segmentedControlItemStyles = import_styled_components79.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components79.default)(import_react_toggle_group2.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components79.styled)(import_react_toggle_group2.Item)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react64.forwardRef)(
@@ -12833,8 +12863,8 @@ var SegmentedControlItem = (0, import_react64.forwardRef)(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: (0, import_type_guards51.isNotNil)(label),
-        "aria-label": (0, import_type_guards51.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards52.isNotNil)(label),
+        "aria-label": (0, import_type_guards52.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -12851,9 +12881,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
 var import_react65 = require("react");
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_styled_components80 = require("styled-components");
 var import_jsx_runtime262 = require("react/jsx-runtime");
-var StyledTrigger2 = (0, import_styled_components80.default)(import_react_select.Trigger)`
+var StyledTrigger2 = (0, import_styled_components80.styled)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -12897,7 +12927,7 @@ var StyledTrigger2 = (0, import_styled_components80.default)(import_react_select
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = (0, import_styled_components80.default)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components80.styled)(import_react_select.Content)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -12965,10 +12995,10 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react66 = require("react");
-var import_styled_components81 = __toESM(require("styled-components"));
-var import_type_guards52 = require("@wistia/type-guards");
+var import_styled_components81 = require("styled-components");
+var import_type_guards53 = require("@wistia/type-guards");
 var import_jsx_runtime263 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components81.default)(import_react_select2.Item)`
+var StyledItem = (0, import_styled_components81.styled)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -12992,7 +13022,7 @@ var StyledItem = (0, import_styled_components81.default)(import_react_select2.It
     background-color: transparent;
   }
 `;
-var StyledIconContainer = import_styled_components81.default.span`
+var StyledIconContainer = import_styled_components81.styled.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react66.forwardRef)(
@@ -13010,7 +13040,7 @@ var SelectOption = (0, import_react66.forwardRef)(
               type: "checkmark"
             }
           ) }) }),
-          (0, import_type_guards52.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)("div", { children: [
+          (0, import_type_guards53.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)("div", { children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_select2.ItemText, { children })
@@ -13023,9 +13053,9 @@ SelectOption.displayName = "SelectOption";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components82 = __toESM(require("styled-components"));
+var import_styled_components82 = require("styled-components");
 var import_jsx_runtime264 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components82.default)(import_react_select3.Label)`
+var StyledLabel4 = (0, import_styled_components82.styled)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
@@ -13044,10 +13074,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Slider/Slider.tsx
 var import_react_slider = require("@radix-ui/react-slider");
-var import_styled_components83 = __toESM(require("styled-components"));
-var import_type_guards53 = require("@wistia/type-guards");
+var import_styled_components83 = require("styled-components");
+var import_type_guards54 = require("@wistia/type-guards");
 var import_jsx_runtime265 = require("react/jsx-runtime");
-var SliderContainer = import_styled_components83.default.div`
+var SliderContainer = import_styled_components83.styled.div`
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
   --wui-slider-range-color: var(--wui-color-bg-fill);
@@ -13063,7 +13093,7 @@ var SliderContainer = import_styled_components83.default.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = (0, import_styled_components83.default)(import_react_slider.Root)`
+var StyledSliderRoot = (0, import_styled_components83.styled)(import_react_slider.Root)`
   position: relative;
   display: flex;
   align-items: center;
@@ -13071,20 +13101,20 @@ var StyledSliderRoot = (0, import_styled_components83.default)(import_react_slid
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = (0, import_styled_components83.default)(import_react_slider.Track)`
+var StyledSliderTrack = (0, import_styled_components83.styled)(import_react_slider.Track)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
   flex-grow: 1;
   height: 6px;
   position: relative;
 `;
-var StyledSliderRange = (0, import_styled_components83.default)(import_react_slider.Range)`
+var StyledSliderRange = (0, import_styled_components83.styled)(import_react_slider.Range)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = (0, import_styled_components83.default)(import_react_slider.Thumb)`
+var StyledSliderThumb = (0, import_styled_components83.styled)(import_react_slider.Thumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -13124,7 +13154,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!((0, import_type_guards53.isNonEmptyString)(ariaLabel) || (0, import_type_guards53.isNonEmptyString)(ariaLabelledby))) {
+  if (!((0, import_type_guards54.isNonEmptyString)(ariaLabel) || (0, import_type_guards54.isNonEmptyString)(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );
@@ -13171,8 +13201,8 @@ Slider.displayName = "Slider";
 
 // src/components/Switch/Switch.tsx
 var import_react67 = require("react");
-var import_styled_components84 = __toESM(require("styled-components"));
-var import_type_guards54 = require("@wistia/type-guards");
+var import_styled_components84 = require("styled-components");
+var import_type_guards55 = require("@wistia/type-guards");
 var import_jsx_runtime266 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components84.css`
   --wui-size-small-width: 24px;
@@ -13224,14 +13254,14 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge3;
   return sizeMedium3;
 };
-var StyledSwitchWrapper = import_styled_components84.default.div`
+var StyledSwitchWrapper = import_styled_components84.styled.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = import_styled_components84.default.div`
+var StyledSwitchInput = import_styled_components84.styled.div`
   ${({ $size }) => getSizeCss3($size)}
   line-height: 0;
   margin: 0;
@@ -13259,7 +13289,7 @@ var StyledSwitchInput = import_styled_components84.default.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = import_styled_components84.default.input`
+var StyledHiddenSwitchInput = import_styled_components84.styled.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color and toggle position */
@@ -13291,7 +13321,7 @@ var Switch = (0, import_react67.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react67.useId)();
-    const computedId = (0, import_type_guards54.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards55.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
         StyledHiddenSwitchInput,
@@ -13333,9 +13363,9 @@ var Switch = (0, import_react67.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-var import_styled_components85 = __toESM(require("styled-components"));
+var import_styled_components85 = require("styled-components");
 var import_jsx_runtime267 = require("react/jsx-runtime");
-var StyledTable = import_styled_components85.default.table`
+var StyledTable = import_styled_components85.styled.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -13377,7 +13407,7 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components86 = __toESM(require("styled-components"));
+var import_styled_components86 = require("styled-components");
 
 // src/components/Table/TableSectionContext.ts
 var import_react68 = require("react");
@@ -13385,27 +13415,27 @@ var TableSectionContext = (0, import_react68.createContext)(null);
 
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime268 = require("react/jsx-runtime");
-var StyledTableBody = import_styled_components86.default.tbody``;
+var StyledTableBody = import_styled_components86.styled.tbody``;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 var import_react69 = require("react");
-var import_styled_components87 = __toESM(require("styled-components"));
+var import_styled_components87 = require("styled-components");
 var import_jsx_runtime269 = require("react/jsx-runtime");
 var sharedStyles = import_styled_components87.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components87.default.th`
+var StyledTh = import_styled_components87.styled.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = import_styled_components87.default.td`
+var StyledTd = import_styled_components87.styled.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -13420,25 +13450,25 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFoot.tsx
-var import_styled_components88 = __toESM(require("styled-components"));
+var import_styled_components88 = require("styled-components");
 var import_jsx_runtime270 = require("react/jsx-runtime");
-var StyledTableFoot = import_styled_components88.default.tfoot``;
+var StyledTableFoot = import_styled_components88.styled.tfoot``;
 var TableFoot = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components89 = __toESM(require("styled-components"));
+var import_styled_components89 = require("styled-components");
 var import_jsx_runtime271 = require("react/jsx-runtime");
-var StyledThead = import_styled_components89.default.thead``;
+var StyledThead = import_styled_components89.styled.thead``;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components90 = __toESM(require("styled-components"));
+var import_styled_components90 = require("styled-components");
 var import_jsx_runtime272 = require("react/jsx-runtime");
-var StyledTableRow = import_styled_components90.default.tr``;
+var StyledTableRow = import_styled_components90.styled.tr``;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(StyledTableRow, { ...props, children });
 };
@@ -13446,7 +13476,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_react71 = require("react");
-var import_type_guards55 = require("@wistia/type-guards");
+var import_type_guards56 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react70 = require("react");
@@ -13483,10 +13513,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if ((0, import_type_guards55.isNotNil)(value)) {
+  if ((0, import_type_guards56.isNotNil)(value)) {
     rootProps.value = value;
   }
-  if ((0, import_type_guards55.isNotNil)(defaultValue)) {
+  if ((0, import_type_guards56.isNotNil)(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(SelectedItemStyleProvider, { children }) }) });
@@ -13503,11 +13533,11 @@ TabsContent.displayName = "TabsContent";
 
 // src/components/Tabs/TabsList.tsx
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_styled_components92 = __toESM(require("styled-components"));
+var import_styled_components92 = require("styled-components");
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-var import_styled_components91 = __toESM(require("styled-components"));
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components91.default)(SelectedItemIndicatorDiv)`
+var import_styled_components91 = require("styled-components");
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components91.styled)(SelectedItemIndicatorDiv)`
   &:has(~ button[role='tab']:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -13526,7 +13556,7 @@ var SelectedTabIndicator = () => {
 
 // src/components/Tabs/TabsList.tsx
 var import_jsx_runtime276 = require("react/jsx-runtime");
-var StyledRadixTabsList = (0, import_styled_components92.default)(import_react_tabs3.List)`
+var StyledRadixTabsList = (0, import_styled_components92.styled)(import_react_tabs3.List)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
@@ -13546,12 +13576,12 @@ TabsList.displayName = "TabsList";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react72 = require("react");
-var import_type_guards56 = require("@wistia/type-guards");
+var import_type_guards57 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-var import_styled_components93 = __toESM(require("styled-components"));
+var import_styled_components93 = require("styled-components");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var StyledRadixTabsTrigger = (0, import_styled_components93.default)(import_react_tabs4.Trigger)`
+var StyledRadixTabsTrigger = (0, import_styled_components93.styled)(import_react_tabs4.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -13597,8 +13627,8 @@ var TabsTrigger = (0, import_react72.forwardRef)(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards56.isNotNil)(label),
-        "aria-label": (0, import_type_guards56.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards57.isNotNil)(label),
+        "aria-label": (0, import_type_guards57.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -13612,10 +13642,10 @@ var TabsTrigger = (0, import_react72.forwardRef)(
 TabsTrigger.displayName = "TabsTrigger";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-var import_styled_components94 = __toESM(require("styled-components"));
-var import_type_guards57 = require("@wistia/type-guards");
+var import_styled_components94 = require("styled-components");
+var import_type_guards58 = require("@wistia/type-guards");
 var import_jsx_runtime278 = require("react/jsx-runtime");
-var StyledThumbnailBadge = import_styled_components94.default.div`
+var StyledThumbnailBadge = import_styled_components94.styled.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -13641,7 +13671,7 @@ var StyledThumbnailBadge = import_styled_components94.default.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime278.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards57.isNotNil)(icon) && icon,
+    (0, import_type_guards58.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("span", { children: label })
   ] });
 };
@@ -13649,11 +13679,11 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react73 = require("react");
-var import_styled_components97 = __toESM(require("styled-components"));
-var import_type_guards60 = require("@wistia/type-guards");
+var import_styled_components97 = require("styled-components");
+var import_type_guards61 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards58 = require("@wistia/type-guards");
+var import_type_guards59 = require("@wistia/type-guards");
 var import_styled_components95 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components95.css`
@@ -13781,14 +13811,14 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards58.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards59.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-var import_styled_components96 = __toESM(require("styled-components"));
-var import_type_guards59 = require("@wistia/type-guards");
+var import_styled_components96 = require("styled-components");
+var import_type_guards60 = require("@wistia/type-guards");
 var import_jsx_runtime279 = require("react/jsx-runtime");
-var ScrubLine = import_styled_components96.default.div`
+var ScrubLine = import_styled_components96.styled.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -13872,8 +13902,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = (0, import_type_guards59.isNotNil)(cursorPosition);
-  const scrubLinePosition = (0, import_type_guards59.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = (0, import_type_guards60.isNotNil)(cursorPosition);
+  const scrubLinePosition = (0, import_type_guards60.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -13912,12 +13942,12 @@ var ThumbnailStoryboardViewer = ({
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_jsx_runtime280 = require("react/jsx-runtime");
-var WideThumbnailImage = import_styled_components97.default.img`
+var WideThumbnailImage = import_styled_components97.styled.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = import_styled_components97.default.img`
+var SquareThumbnailImage = import_styled_components97.styled.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -13942,11 +13972,11 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnail = import_styled_components97.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards60.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+var StyledThumbnail = import_styled_components97.styled.div`
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards61.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards60.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards61.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -13988,10 +14018,10 @@ var Thumbnail = (0, import_react73.forwardRef)(
     const storyboardElementRef = (0, import_react73.useRef)(null);
     const [cursorPosition, setCursorPosition] = (0, import_react73.useState)(null);
     const backgroundUrl = (0, import_react73.useMemo)(
-      () => thumbnailImageType === "square" && (0, import_type_guards60.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards61.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards60.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards61.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react73.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -14024,7 +14054,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
       return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
     }, [isScrubbable, isMouseOver, isStoryboardReady]);
     const renderStoryboard = (0, import_react73.useCallback)(() => {
-      if (!storyboard || (0, import_type_guards60.isUndefined)(height) || (0, import_type_guards60.isEmptyString)(height)) return null;
+      if (!storyboard || (0, import_type_guards61.isUndefined)(height) || (0, import_type_guards61.isEmptyString)(height)) return null;
       const {
         url,
         width: sbWidth,
@@ -14034,7 +14064,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
         frameCount,
         aspectRatio
       } = storyboard;
-      const targetWidth = (0, import_type_guards60.isString)(width) ? parseInt(width, 10) : Number(width);
+      const targetWidth = (0, import_type_guards61.isString)(width) ? parseInt(width, 10) : Number(width);
       const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
       return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
         ThumbnailStoryboardViewer,
@@ -14055,7 +14085,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
     let thumbnailContent = null;
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
-    } else if ((0, import_type_guards60.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards61.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
         ThumbnailImage,
         {
@@ -14080,7 +14110,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards60.isNotNil)(children) ? children : null,
+          (0, import_type_guards61.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -14091,13 +14121,13 @@ Thumbnail.displayName = "Thumbnail";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react74 = __toESM(require("react"));
-var import_styled_components98 = __toESM(require("styled-components"));
-var import_type_guards61 = require("@wistia/type-guards");
+var import_styled_components98 = require("styled-components");
+var import_type_guards62 = require("@wistia/type-guards");
 var import_jsx_runtime281 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
 );
-var StyledThumbnailCollage = import_styled_components98.default.div`
+var StyledThumbnailCollage = import_styled_components98.styled.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -14172,7 +14202,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react74.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards61.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards62.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react74.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -14199,8 +14229,8 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components99 = __toESM(require("styled-components"));
-var import_type_guards62 = require("@wistia/type-guards");
+var import_styled_components99 = require("styled-components");
+var import_type_guards63 = require("@wistia/type-guards");
 var import_jsx_runtime282 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -14241,7 +14271,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components99.default.svg`
+var WistiaLogoComponent = import_styled_components99.styled.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -14313,7 +14343,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime282.jsx)("title", { children: title }),
-        (0, import_type_guards62.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime282.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards63.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime282.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]