@wistia/ui 0.14.32 → 0.14.33

package/dist/index.d.mts

@@ -4110,6 +4110,12 @@ type TooltipProps = {
      * Hides the arrow
      */
     hideArrow?: boolean;
+    /**
+     * Specify a container element to portal the tooltip into.
+     * Useful for rendering tooltips in contexts like pip windows.
+     * @default document.body
+     */
+    container?: Element | null;
 };
 /**
  * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
@@ -4117,7 +4123,7 @@ type TooltipProps = {
  *
  */
 declare const Tooltip: {
-    ({ delay, direction, content, children, forceOpen, hideArrow, }: TooltipProps): JSX.Element;
+    ({ delay, direction, content, children, forceOpen, hideArrow, container, }: TooltipProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -4110,6 +4110,12 @@ type TooltipProps = {
      * Hides the arrow
      */
     hideArrow?: boolean;
+    /**
+     * Specify a container element to portal the tooltip into.
+     * Useful for rendering tooltips in contexts like pip windows.
+     * @default document.body
+     */
+    container?: Element | null;
 };
 /**
  * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
@@ -4117,7 +4123,7 @@ type TooltipProps = {
  *
  */
 declare const Tooltip: {
-    ({ delay, direction, content, children, forceOpen, hideArrow, }: TooltipProps): JSX.Element;
+    ({ delay, direction, content, children, forceOpen, hideArrow, container, }: TooltipProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.32
+ * @license @wistia/ui v0.14.33
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8852,22 +8852,44 @@ var Center = forwardRef9(
 Center.displayName = "Center_UI";
 
 // src/components/Checkbox/Checkbox.tsx
+import { isNonEmptyString as isNonEmptyString3, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { forwardRef as forwardRef12, useId as useId2 } from "react";
 import styled27, { css as css25 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString3, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import styled23, { css as css24 } from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil15 } from "@wistia/type-guards";
+import styled23, { css as css24 } from "styled-components";
+
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+import styled21 from "styled-components";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
+import { jsx as jsx214 } from "react/jsx-runtime";
+var VisuallyHidden = styled21.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled21.div({
+  "&:not(:focus-within)": visuallyHiddenStyle
+});
+var ScreenReaderOnly = ({
+  text,
+  children,
+  focusable = false,
+  ...props
+}) => {
+  const accessibleText = isNotNil14(text) ? text : children;
+  if (focusable) {
+    return /* @__PURE__ */ jsx214(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
+  }
+  return /* @__PURE__ */ jsx214(VisuallyHidden, { ...props, children: accessibleText });
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import styled21, { css as css23 } from "styled-components";
+import styled22, { css as css23 } from "styled-components";
 import { isNil as isNil11 } from "@wistia/type-guards";
-import { jsx as jsx214 } from "react/jsx-runtime";
+import { jsx as jsx215 } from "react/jsx-runtime";
 var disabledStyle = css23`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = styled21.div`
+var StyledFormControlLabelDescription = styled22.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -8884,7 +8906,7 @@ var FormControlLabelDescription = ({
   if (isNil11(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx214(
+  return /* @__PURE__ */ jsx215(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -8895,28 +8917,6 @@ var FormControlLabelDescription = ({
 };
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled22 from "styled-components";
-import { isNotNil as isNotNil14 } from "@wistia/type-guards";
-import { jsx as jsx215 } from "react/jsx-runtime";
-var VisuallyHidden = styled22.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled22.div({
-  "&:not(:focus-within)": visuallyHiddenStyle
-});
-var ScreenReaderOnly = ({
-  text,
-  children,
-  focusable = false,
-  ...props
-}) => {
-  const accessibleText = isNotNil14(text) ? text : children;
-  if (focusable) {
-    return /* @__PURE__ */ jsx215(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
-  }
-  return /* @__PURE__ */ jsx215(VisuallyHidden, { ...props, children: accessibleText });
-};
-ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
-
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { jsx as jsx216, jsxs as jsxs16 } from "react/jsx-runtime";
 var disabledStyle2 = css24`
@@ -8930,7 +8930,7 @@ var StyledLabelWrapper = styled23.div`
 var StyledFormControlLabel = styled23.label`
   cursor: pointer;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--wui-space-02);
   width: 100%;
   color: var(--wui-color-tex);
@@ -9299,7 +9299,6 @@ var StyledCheckboxInput = styled27.div`
   border-radius: var(--wui-border-radius-01);
   display: grid;
   place-content: center;
-  align-self: flex-start;
   border-width: 1px;
   border-style: solid;
   border-color: var(--wui-checkbox-border-color);
@@ -10361,7 +10360,8 @@ var Tooltip = ({
   content,
   children,
   forceOpen,
-  hideArrow = false
+  hideArrow = false,
+  container = null
 }) => {
   const rootProps = {};
   if (content === "" || content === null) {
@@ -10377,7 +10377,7 @@ var Tooltip = ({
       ...rootProps,
       children: [
         /* @__PURE__ */ jsx230(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx230(TooltipPortal, { children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx230(TooltipPortal, { container, children: /* @__PURE__ */ jsxs22(
           StyledContent,
           {
             side: direction,
@@ -10963,7 +10963,7 @@ var ContrastEnforcerSwitch = () => {
     {
       align: "right",
       checked: shouldEnforceMinContrast,
-      label: /* @__PURE__ */ jsx244(Text, { variant: "label3", children: "Limit to high-contrast colors" }),
+      label: "Limit to high-contrast colors",
       onChange: onChangeContrastLimitedSwitch
     }
   );
@@ -15402,9 +15402,9 @@ var ProgressBar = ({
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
+import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
 import styled82, { css as css40 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { jsx as jsx297, jsxs as jsxs54 } from "react/jsx-runtime";
 var sizeSmall2 = css40`
   --wui-radio-size: 14px;
@@ -15459,7 +15459,6 @@ var StyledRadioWrapper = styled82.div`
 `;
 var StyledRadioInput = styled82.div`
   ${({ $size }) => getSizeCss3($size)}
-  align-self: flex-start;
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
   min-width: var(--wui-radio-size);