@wistia/ui 0.14.32 → 0.14.33

package/dist/index.cjs

@@ -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.
  *
@@ -9029,22 +9029,44 @@ var Center = (0, import_react33.forwardRef)(
 Center.displayName = "Center_UI";
 
 // src/components/Checkbox/Checkbox.tsx
+var import_type_guards31 = require("@wistia/type-guards");
 var import_react38 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
-var import_type_guards31 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_styled_components39 = __toESM(require("styled-components"));
 var import_type_guards27 = require("@wistia/type-guards");
+var import_styled_components39 = __toESM(require("styled-components"));
 
-// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 var import_styled_components37 = __toESM(require("styled-components"));
 var import_type_guards25 = require("@wistia/type-guards");
 var import_jsx_runtime214 = require("react/jsx-runtime");
-var disabledStyle = import_styled_components37.css`
+var VisuallyHidden = import_styled_components37.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components37.default.div({
+  "&:not(:focus-within)": visuallyHiddenStyle
+});
+var ScreenReaderOnly = ({
+  text,
+  children,
+  focusable = false,
+  ...props
+}) => {
+  const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
+  if (focusable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(VisuallyHidden, { ...props, children: accessibleText });
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
+
+// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_type_guards26 = require("@wistia/type-guards");
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var disabledStyle = import_styled_components38.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = import_styled_components37.default.div`
+var StyledFormControlLabelDescription = import_styled_components38.default.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -9058,10 +9080,10 @@ var FormControlLabelDescription = ({
   disabled = false,
   ...props
 }) => {
-  if ((0, import_type_guards25.isNil)(children)) {
+  if ((0, import_type_guards26.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -9072,28 +9094,6 @@ var FormControlLabelDescription = ({
 };
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_type_guards26 = require("@wistia/type-guards");
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components38.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components38.default.div({
-  "&:not(:focus-within)": visuallyHiddenStyle
-});
-var ScreenReaderOnly = ({
-  text,
-  children,
-  focusable = false,
-  ...props
-}) => {
-  const accessibleText = (0, import_type_guards26.isNotNil)(text) ? text : children;
-  if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(VisuallyHidden, { ...props, children: accessibleText });
-};
-ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
-
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime216 = require("react/jsx-runtime");
 var disabledStyle2 = import_styled_components39.css`
@@ -9107,7 +9107,7 @@ var StyledLabelWrapper = import_styled_components39.default.div`
 var StyledFormControlLabel = import_styled_components39.default.label`
   cursor: pointer;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--wui-space-02);
   width: 100%;
   color: var(--wui-color-tex);
@@ -9476,7 +9476,6 @@ var StyledCheckboxInput = import_styled_components43.default.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);
@@ -10532,7 +10531,8 @@ var Tooltip = ({
   content,
   children,
   forceOpen,
-  hideArrow = false
+  hideArrow = false,
+  container = null
 }) => {
   const rootProps = {};
   if (content === "" || content === null) {
@@ -10548,7 +10548,7 @@ var Tooltip = ({
       ...rootProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_tooltip2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
           StyledContent,
           {
             side: direction,
@@ -11134,7 +11134,7 @@ var ContrastEnforcerSwitch = () => {
     {
       align: "right",
       checked: shouldEnforceMinContrast,
-      label: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Text, { variant: "label3", children: "Limit to high-contrast colors" }),
+      label: "Limit to high-contrast colors",
       onChange: onChangeContrastLimitedSwitch
     }
   );
@@ -15535,9 +15535,9 @@ var ProgressBar = ({
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
+var import_type_guards58 = require("@wistia/type-guards");
 var import_react81 = require("react");
 var import_styled_components100 = __toESM(require("styled-components"));
-var import_type_guards58 = require("@wistia/type-guards");
 var import_jsx_runtime297 = require("react/jsx-runtime");
 var sizeSmall2 = import_styled_components100.css`
   --wui-radio-size: 14px;
@@ -15592,7 +15592,6 @@ var StyledRadioWrapper = import_styled_components100.default.div`
 `;
 var StyledRadioInput = import_styled_components100.default.div`
   ${({ $size }) => getSizeCss3($size)}
-  align-self: flex-start;
   width: var(--wui-radio-size);
   height: var(--wui-radio-size);
   min-width: var(--wui-radio-size);