@wistia/ui 0.6.24-beta.d2f6c364.20c3ba5 → 0.6.25

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.24-beta.d2f6c364.20c3ba5
+ * @license @wistia/ui v0.6.25
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -98,6 +98,7 @@ __export(index_exports, {
   SelectOptionGroup: () => SelectOptionGroup,
   Stack: () => Stack,
   SubMenu: () => SubMenu,
+  Switch: () => Switch,
   Tab: () => Tab,
   Table: () => Table,
   TableBody: () => TableBody,
@@ -1237,7 +1238,6 @@ var colorAliasTokens = import_styled_components4.css`
   /* --- Misc --- */
   --wui-color-bg-fill-white: #ffffff;
   --wui-color-focus-color: var(--wui-blue-9);
-  --wui-color-invalid-indicator: var(--wui-error-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
   --wui-color-backdrop: var(--wui-gray-alpha-9);
   --wui-color-segmented-control-checked-background: var(--wui-bg-app);
@@ -1249,7 +1249,7 @@ var colorAliasTokens = import_styled_components4.css`
 
   /* Disabled */
   --wui-color-bg-surface-disabled: var(--wui-gray-3);
-  --wui-color-border-disabled: var(--wui-gray-4);
+  --wui-color-bg-border-disabled: var(--wui-gray-4);
   --wui-color-icon-disabled: var(--wui-gray-8);
   --wui-color-text-disabled: var(--wui-gray-10);
   --wui-color-focus-ring-disabled: var(--wui-gray-6);
@@ -7672,7 +7672,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     )
   }
 );
-var inputSizeSmall = import_styled_components34.css`
+var sizeSmall = import_styled_components34.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -7683,7 +7683,7 @@ var inputSizeSmall = import_styled_components34.css`
     height: 7px;
   }
 `;
-var inputSizeMedium = import_styled_components34.css`
+var sizeMedium = import_styled_components34.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -7694,7 +7694,7 @@ var inputSizeMedium = import_styled_components34.css`
     height: 9px;
   }
 `;
-var inputSizeLarge = import_styled_components34.css`
+var sizeLarge = import_styled_components34.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -7706,9 +7706,9 @@ var inputSizeLarge = import_styled_components34.css`
   }
 `;
 var getSizeCss = (size) => {
-  if (size === "sm") return inputSizeSmall;
-  if (size === "lg") return inputSizeLarge;
-  return inputSizeMedium;
+  if (size === "sm") return sizeSmall;
+  if (size === "lg") return sizeLarge;
+  return sizeMedium;
 };
 var StyledCheckboxWrapper = import_styled_components34.default.div`
   display: flex;
@@ -7727,7 +7727,7 @@ var StyledCheckboxInput = import_styled_components34.default.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
 
   /* checkmark icon */
@@ -8548,35 +8548,26 @@ var import_react23 = require("react");
 var import_styled_components44 = __toESM(require("styled-components"));
 var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime213 = require("react/jsx-runtime");
-var inputCssVars = import_styled_components44.css`
+var inputStyles = import_styled_components44.css`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-input-color-border: var(--wui-color-border-secondary);
-  --wui-input-color-border-focus: var(--wui-color-focus-ring);
-  --wui-input-color-border-error: var(--wui-color-invalid-indicator);
+  --wui-input-color-border: var(--wui-color-border);
+  --wui-input-color-border-focus: var(--wui-color-border-active);
+  --wui-input-color-border-error: var(--wui-color-border-error);
   --wui-input-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-input-border-radius: var(--wui-border-radius-03);
+  --wui-input-border-radius: var(--wui-border-radius-rounded);
   --wui-input-multiline-border-radius: var(--wui-border-radius-02);
   --wui-input-vertical-padding: var(--wui-space-02);
   --wui-input-horizontal-padding: var(--wui-space-03);
   --wui-input-placeholder: var(--wui-gray-10);
-  --wui-input-font-size: var(--wui-typography-body-3-size);
-  --wui-input-line-height: 16px;
-`;
-var inputStyles = import_styled_components44.css`
-  ${inputCssVars}
+  --wui-input-color-text-error: var(--wui-color-text-error);
+
   input,
   textarea {
     padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
     background-color: var(--wui-input-color-bg);
-    border: none;
-    outline: 1px solid var(--wui-input-color-border);
-    outline-offset: -1px;
+    border: 1px solid var(--wui-input-color-border);
     border-radius: var(--wui-input-border-radius);
-    font-size: var(--wui-input-font-size);
-    line-height: var(--wui-input-line-height);
-    font-weight: var(--wui-typography-weight-body);
-    color: var(--wui-color-text-primary);
 
     &::placeholder {
       color: var(--wui-input-placeholder);
@@ -8584,16 +8575,16 @@ var inputStyles = import_styled_components44.css`
     }
 
     &:focus {
-      outline: 2px solid var(--wui-input-color-border-focus);
-      outline-offset: -2px;
+      border-color: var(--wui-input-color-border-focus);
     }
 
     &[aria-invalid='true'] {
-      outline-color: var(--wui-input-color-border-error);
+      border-color: var(--wui-input-color-border-error);
+      color: var(--wui-input-color-text-error);
     }
 
     &:disabled {
-      outline-color: var(--wui-color-border-disabled);
+      border-color: var(--wui-color-bg-surface-disabled);
       background-color: var(--wui-color-bg-surface-disabled);
     }
   }
@@ -8612,29 +8603,6 @@ var StyledInputContainer = import_styled_components44.default.div`
 
   textarea {
     border-radius: var(--wui-input-multiline-border-radius);
-
-    --wui-input-line-height: var(--wui-typography-body-3-line-height);
-  }
-
-  [type='search'] {
-    &::-webkit-search-cancel-button {
-      appearance: none;
-      height: 16px;
-      width: 16px;
-      margin-right: -4px;
-
-      /* css vars don't work in data URLs, so the stroke color value is hardcoded. if we support dark mode, we'll need to swap the background image based on the users preferred color scheme */
-      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12M4 4L12 12' stroke='%2364646a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-      background-position: center;
-      background-repeat: no-repeat;
-      cursor: pointer;
-      background-color: var(--wui-color-bg-surface-secondary);
-      border-radius: var(--wui-border-radius-rounded);
-
-      &:hover {
-        background-color: var(--wui-color-bg-surface-secondary-hover);
-      }
-    }
   }
 
   .wui-input-left-icon {
@@ -10424,7 +10392,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
     )
   }
 );
-var inputSizeSmall2 = import_styled_components65.css`
+var sizeSmall2 = import_styled_components65.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10435,7 +10403,7 @@ var inputSizeSmall2 = import_styled_components65.css`
     height: 7px;
   }
 `;
-var inputSizeMedium2 = import_styled_components65.css`
+var sizeMedium2 = import_styled_components65.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10446,7 +10414,7 @@ var inputSizeMedium2 = import_styled_components65.css`
     height: 8px;
   }
 `;
-var inputSizeLarge2 = import_styled_components65.css`
+var sizeLarge2 = import_styled_components65.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10458,9 +10426,9 @@ var inputSizeLarge2 = import_styled_components65.css`
   }
 `;
 var getSizeCss2 = (size) => {
-  if (size === "sm") return inputSizeSmall2;
-  if (size === "lg") return inputSizeLarge2;
-  return inputSizeMedium2;
+  if (size === "sm") return sizeSmall2;
+  if (size === "lg") return sizeLarge2;
+  return sizeMedium2;
 };
 var StyledRadioWrapper = import_styled_components65.default.div`
   display: flex;
@@ -10479,7 +10447,7 @@ var StyledRadioInput = import_styled_components65.default.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
 
   /* radio button circle icon */
@@ -10496,7 +10464,7 @@ var StyledHiddenRadioInput = import_styled_components65.default.input`
 
   /* toggles display of faux-input border-color */
   &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-bg-fill)"};
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
   /* toggles display of RadioIcon */
@@ -10856,13 +10824,23 @@ var import_styled_components69 = __toESM(require("styled-components"));
 var import_jsx_runtime246 = require("react/jsx-runtime");
 var StyledTrigger = (0, import_styled_components69.default)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${inputCssVars};
-  padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
-  background-color: var(--wui-input-color-bg);
-  border: none;
-  outline: 1px solid var(--wui-input-color-border);
-  outline-offset: -2px;
-  border-radius: var(--wui-input-border-radius);
+  --wui-select-color-bg: var(--wui-color-bg-surface);
+  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
+  --wui-select-color-border: var(--wui-color-border);
+  --wui-select-color-border-focus: var(--wui-color-border-active);
+  --wui-select-color-border-error: var(--wui-color-border-error);
+  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
+  --wui-select-border-radius: var(--wui-border-radius-rounded);
+  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
+  --wui-select-vertical-padding: var(--wui-space-02);
+  --wui-select-horizontal-padding: var(--wui-space-03);
+  --wui-select-placeholder: var(--wui-gray-10);
+  --wui-select-color-text-error: var(--wui-color-text-error);
+
+  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
+  background-color: var(--wui-select-color-bg);
+  border: 1px solid var(--wui-select-color-border);
+  border-radius: var(--wui-select-border-radius);
   min-width: 200px;
   text-align: left;
   display: inline-flex;
@@ -10870,9 +10848,6 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   justify-content: space-between;
   max-width: 100%;
   width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
-  color: var(--wui-input-color-text);
-  font-size: var(--wui-input-font-size);
-  line-height: var(--wui-input-line-height);
 
   > span {
     white-space: nowrap;
@@ -10886,17 +10861,14 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   }
 
   &[aria-invalid='true'] {
-    outline: 2px solid var(--wui-input-color-border-error);
+    outline: 2px solid var(--wui-select-color-border-error);
+    color: var(--wui-select-color-text-error);
   }
 
   &:disabled {
-    outline-color: var(--wui-color-border-disabled);
+    border-color: var(--wui-color-bg-surface-disabled);
     background-color: var(--wui-color-bg-surface-disabled);
   }
-
-  [data-placeholder] {
-    color: var(--wui-input-placeholder);
-  }
 `;
 var StyledContent3 = (0, import_styled_components69.default)(import_react_select.Content)`
   --wui-select-content-border: var(--wui-color-border);
@@ -10940,13 +10912,7 @@ var Select = (0, import_react49.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
-                  import_react_select.Value,
-                  {
-                    "data-placeholder": placeholder,
-                    placeholder
-                  }
-                ),
+                /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select.Value, { placeholder }),
                 /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
                   Icon,
                   {
@@ -10982,7 +10948,6 @@ var StyledItem = (0, import_styled_components70.default)(import_react_select2.It
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   border-radius: var(--wui-border-radius-01);
-  cursor: pointer;
 
   &:hover,
   &:focus-visible {
@@ -11045,20 +11010,183 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   ] });
 };
 
-// src/components/Table/Table.tsx
+// src/components/Switch/Switch.tsx
+var import_react51 = require("react");
 var import_styled_components72 = __toESM(require("styled-components"));
+var import_type_guards42 = require("@wistia/type-guards");
 var import_jsx_runtime249 = require("react/jsx-runtime");
-var StyledTable = import_styled_components72.default.table`
+var sizeSmall3 = import_styled_components72.css`
+  --wui-size-small-width: 24px;
+  --wui-size-small-height: 14px;
+
+  width: var(--wui-size-small-width);
+  height: var(--wui-size-small-height);
+  min-width: var(--wui-size-small-width);
+  min-height: var(--wui-size-small-height);
+  border-radius: calc(var(--wui-size-small-height) / 2);
+
+  &::after {
+    width: calc(var(--wui-size-small-width) / 2);
+    height: calc(var(--wui-size-small-width) / 2);
+  }
+`;
+var sizeMedium3 = import_styled_components72.css`
+  --wui-size-medium-width: 32px;
+  --wui-size-medium-height: 18px;
+
+  width: var(--wui-size-medium-width);
+  height: var(--wui-size-medium-height);
+  min-width: var(--wui-size-medium-width);
+  min-height: var(--wui-size-medium-height);
+  border-radius: calc(var(--wui-size-medium-height) / 2);
+
+  &::after {
+    width: calc(var(--wui-size-medium-width) / 2);
+    height: calc(var(--wui-size-medium-width) / 2);
+  }
+`;
+var sizeLarge3 = import_styled_components72.css`
+  --wui-size-large-width: 40px;
+  --wui-size-large-height: 22px;
+
+  width: var(--wui-size-large-width);
+  height: var(--wui-size-large-height);
+  min-width: var(--wui-size-large-width);
+  min-height: var(--wui-size-large-height);
+  border-radius: calc(var(--wui-size-large-height) / 2);
+
+  &::after {
+    width: calc(var(--wui-size-large-width) / 2);
+    height: calc(var(--wui-size-large-width) / 2);
+  }
+`;
+var getSizeCss3 = (size) => {
+  if (size === "sm") return sizeSmall3;
+  if (size === "lg") return sizeLarge3;
+  return sizeMedium3;
+};
+var StyledSwitchWrapper = import_styled_components72.default.div`
+  display: flex;
+  margin: 0;
+
+  /* TODO this solves a problem but potentially causes and a11y issue */
+  user-select: none;
+`;
+var StyledSwitchInput = import_styled_components72.default.div`
+  ${({ $size }) => getSizeCss3($size)}
+  line-height: 0;
+  margin: 0;
+  display: grid;
+  place-content: center;
+  align-self: flex-start;
+  position: relative;
+  transition: all 0.2s ease-in-out;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"}; /* "off state" border */
+
+  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface-secondary)"}; /* "off state" background */
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    box-shadow: 1px 0 1px rgb(0 0 0 / 10%); /* "off state" shadow - cast horizontally right */
+    background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill-white)"}; /* "off state" dot color */
+
+    transition: all 0.2s ease-in-out;
+  }
+`;
+var StyledHiddenSwitchInput = import_styled_components72.default.input`
+  ${visuallyHiddenStyle}
+
+  /* toggles display of faux-input background-color and toggle position */
+  &:checked + label [data-wui-faux-input='true'] {
+    border-color: ${({ disabled }) => disabled ? void 0 : "var(--wui-color-bg-fill)"}; /* "on state" border */
+
+    background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"}; /* "on state" background */
+
+    &::after {
+      transform: translate(calc(100% - 2px), -50%); /* 2px is the border width */
+      box-shadow: -1px 0 1px rgb(0 0 0 / 10%); /* "on state" shadow - cast horizontally left */
+      background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill-white)"}; /* "on state" dot color */
+    }
+  }
+`;
+var Switch = (0, import_react51.forwardRef)(
+  ({
+    checked,
+    disabled = false,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    size = "md",
+    value,
+    required = false,
+    hideLabel = false,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react51.useId)();
+    const computedId = (0, import_type_guards42.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+        StyledHiddenSwitchInput,
+        {
+          ...props,
+          ref,
+          checked,
+          disabled,
+          id: computedId,
+          name,
+          onChange,
+          required,
+          type: "checkbox",
+          value
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+        FormControlLabel,
+        {
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+            StyledSwitchInput,
+            {
+              $disabled: disabled,
+              $size: size,
+              "data-testid": "wui-faux-input",
+              "data-wui-faux-input": "true"
+            }
+          ),
+          description,
+          disabled,
+          hideLabel,
+          htmlFor: computedId,
+          label
+        }
+      )
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+
+// src/components/Table/Table.tsx
+var import_styled_components73 = __toESM(require("styled-components"));
+var import_jsx_runtime250 = require("react/jsx-runtime");
+var StyledTable = import_styled_components73.default.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && import_styled_components72.css`
+  ${({ $striped }) => $striped && import_styled_components73.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && import_styled_components72.css`
+  ${({ $divided }) => $divided && import_styled_components73.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11070,7 +11198,7 @@ var Table = ({
   divided = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
     StyledTable,
     {
       $divided: divided,
@@ -11082,88 +11210,88 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components74 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
-var import_react51 = require("react");
-var TableSectionContext = (0, import_react51.createContext)(null);
+var import_react52 = require("react");
+var TableSectionContext = (0, import_react52.createContext)(null);
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime250 = require("react/jsx-runtime");
-var StyledTbody = import_styled_components73.default.tbody``;
+var import_jsx_runtime251 = require("react/jsx-runtime");
+var StyledTbody = import_styled_components74.default.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTbody, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTbody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
-var import_react52 = require("react");
-var import_styled_components74 = __toESM(require("styled-components"));
-var import_jsx_runtime251 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components74.css`
+var import_react53 = require("react");
+var import_styled_components75 = __toESM(require("styled-components"));
+var import_jsx_runtime252 = require("react/jsx-runtime");
+var sharedStyles = import_styled_components75.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components74.default.th`
+var StyledTh = import_styled_components75.default.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_components74.default.td`
+var StyledTd = import_styled_components75.default.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = (0, import_react52.useContext)(TableSectionContext);
+  const section = (0, import_react53.useContext)(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTh, { ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTd, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFooter.tsx
-var import_styled_components75 = __toESM(require("styled-components"));
-var import_jsx_runtime252 = require("react/jsx-runtime");
-var StyledTfoot = import_styled_components75.default.tfoot``;
+var import_styled_components76 = __toESM(require("styled-components"));
+var import_jsx_runtime253 = require("react/jsx-runtime");
+var StyledTfoot = import_styled_components76.default.tfoot``;
 var TableFooter = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledTfoot, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledTfoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components76 = __toESM(require("styled-components"));
-var import_jsx_runtime253 = require("react/jsx-runtime");
-var StyledThead = import_styled_components76.default.thead``;
+var import_styled_components77 = __toESM(require("styled-components"));
+var import_jsx_runtime254 = require("react/jsx-runtime");
+var StyledThead = import_styled_components77.default.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
-var import_jsx_runtime254 = require("react/jsx-runtime");
-var StyledTr = import_styled_components77.default.tr``;
+var import_styled_components78 = __toESM(require("styled-components"));
+var import_jsx_runtime255 = require("react/jsx-runtime");
+var StyledTr = import_styled_components78.default.tr``;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledTr, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(StyledTr, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var import_type_guards43 = require("@wistia/type-guards");
-var import_styled_components82 = __toESM(require("styled-components"));
+var import_type_guards44 = require("@wistia/type-guards");
+var import_styled_components83 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components79 = __toESM(require("styled-components"));
 var import_react_tabs = require("@radix-ui/react-tabs");
-var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledTabPanel = (0, import_styled_components78.default)(import_react_tabs.Content)`
+var import_jsx_runtime256 = require("react/jsx-runtime");
+var StyledTabPanel = (0, import_styled_components79.default)(import_react_tabs.Content)`
   display: flex;
   flex-direction: column;
 `;
 var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
     StyledTabPanel,
     {
       value,
@@ -11175,10 +11303,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_react_tabs2 = require("@radix-ui/react-tabs");
-var import_jsx_runtime256 = require("react/jsx-runtime");
-var StyledTabList = (0, import_styled_components79.default)(import_react_tabs2.List)`
+var import_jsx_runtime257 = require("react/jsx-runtime");
+var StyledTabList = (0, import_styled_components80.default)(import_react_tabs2.List)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -11191,7 +11319,7 @@ var TabList = ({
   ariaLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
     StyledTabList,
     {
       $fullWidth: fullWidth,
@@ -11204,17 +11332,17 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-var import_react54 = require("react");
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_react55 = require("react");
+var import_styled_components81 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_type_guards42 = require("@wistia/type-guards");
+var import_type_guards43 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
-var import_react53 = require("react");
-var TabsValueContext = (0, import_react53.createContext)(null);
+var import_react54 = require("react");
+var TabsValueContext = (0, import_react54.createContext)(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = (0, import_react53.useContext)(TabsValueContext);
+  const context = (0, import_react54.useContext)(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }
@@ -11222,21 +11350,21 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/TabItem.tsx
-var import_jsx_runtime257 = require("react/jsx-runtime");
-var StyledTabItem = (0, import_styled_components80.default)(import_react_tabs3.Trigger)`
+var import_jsx_runtime258 = require("react/jsx-runtime");
+var StyledTabItem = (0, import_styled_components81.default)(import_react_tabs3.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
     outline: none;
   }
 `;
-var TabItem = (0, import_react54.forwardRef)(
+var TabItem = (0, import_react55.forwardRef)(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
-    const buttonRef = (0, import_react54.useRef)(null);
+    const buttonRef = (0, import_react55.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    (0, import_react54.useEffect)(() => {
+    (0, import_react55.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11261,12 +11389,12 @@ var TabItem = (0, import_react54.forwardRef)(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards42.isNotNil)(label),
-        "aria-label": (0, import_type_guards42.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards43.isNotNil)(label),
+        "aria-label": (0, import_type_guards43.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -11280,16 +11408,16 @@ var TabItem = (0, import_react54.forwardRef)(
 TabItem.displayName = "TabItem";
 
 // src/components/Tabs/extractTabItems.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 var extractTabItems = (children) => {
   const tabItems = [];
-  import_react55.Children.forEach(children, (child) => {
-    if (!(0, import_react55.isValidElement)(child)) {
+  import_react56.Children.forEach(children, (child) => {
+    if (!(0, import_react56.isValidElement)(child)) {
       return;
     }
     if (typeof child.type !== "string" && child.type.displayName === "Tab") {
       tabItems.push(child);
-    } else if (child.type === import_react55.Fragment) {
+    } else if (child.type === import_react56.Fragment) {
       const fragmentElement = child;
       tabItems.push(...extractTabItems(fragmentElement.props.children));
     } else if ((child.props.children ?? null) != null) {
@@ -11302,10 +11430,10 @@ var extractTabItems = (children) => {
 };
 
 // src/components/Tabs/SelectedItemIndicator.tsx
-var import_react56 = require("react");
-var import_styled_components81 = __toESM(require("styled-components"));
-var import_jsx_runtime258 = require("react/jsx-runtime");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components81.default)(SelectedItemIndicatorDiv)`
+var import_react57 = require("react");
+var import_styled_components82 = __toESM(require("styled-components"));
+var import_jsx_runtime259 = require("react/jsx-runtime");
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components82.default)(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11313,7 +11441,7 @@ var TabsSelectedItemIndicatorDiv = (0, import_styled_components81.default)(Selec
 var SelectedItemIndicator2 = () => {
   const { selectedItemMeasurements } = useSelectedItemMeasurements();
   const selectedValue = useTabsValue();
-  const selectedItemIndicatorStyle = (0, import_react56.useMemo)(
+  const selectedItemIndicatorStyle = (0, import_react57.useMemo)(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
       transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
@@ -11324,7 +11452,7 @@ var SelectedItemIndicator2 = () => {
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
     TabsSelectedItemIndicatorDiv,
     {
       style: {
@@ -11337,24 +11465,24 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime259 = require("react/jsx-runtime");
-var TabsContainer = import_styled_components82.default.div`
+var import_jsx_runtime260 = require("react/jsx-runtime");
+var TabsContainer = import_styled_components83.default.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = import_styled_components82.default.div`
+var StickyTabContent = import_styled_components83.default.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = (0, import_styled_components82.default)(import_react_tabs4.Root)`
+var StyledTabsRoot = (0, import_styled_components83.default)(import_react_tabs4.Root)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
 `;
-var Tabs = (0, import_react57.forwardRef)(
+var Tabs = (0, import_react58.forwardRef)(
   ({
     children,
     fullWidth = true,
@@ -11366,13 +11494,13 @@ var Tabs = (0, import_react57.forwardRef)(
     ...otherProps
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react57.useState)(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react58.useState)(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
     const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
       StyledTabsRoot,
       {
         ref,
@@ -11380,14 +11508,14 @@ var Tabs = (0, import_react57.forwardRef)(
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
             TabList,
             {
               ariaLabel,
               fullWidth,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(SelectedItemIndicator2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(SelectedItemIndicator2, {}),
                 tabItems.map((tab) => {
                   const {
                     value,
@@ -11396,8 +11524,8 @@ var Tabs = (0, import_react57.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards43.isNil)(icon)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+                  if ((0, import_type_guards44.isNil)(icon)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
                       TabItem,
                       {
                         disabled,
@@ -11407,8 +11535,8 @@ var Tabs = (0, import_react57.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards43.isNotNil)(label)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+                  if ((0, import_type_guards44.isNotNil)(label)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
                       TabItem,
                       {
                         disabled,
@@ -11419,8 +11547,8 @@ var Tabs = (0, import_react57.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards43.isNotNil)(ariaLabelForTab)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+                  if ((0, import_type_guards44.isNotNil)(ariaLabelForTab)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
                       TabItem,
                       {
                         "aria-label": ariaLabelForTab,
@@ -11436,7 +11564,7 @@ var Tabs = (0, import_react57.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
             TabPanel,
             {
               value: tab.props.value,
@@ -11452,19 +11580,19 @@ var Tabs = (0, import_react57.forwardRef)(
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react58 = require("react");
-var import_jsx_runtime260 = require("react/jsx-runtime");
-var Tab = (0, import_react58.forwardRef)(({ children }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("div", { ref, children });
+var import_react59 = require("react");
+var import_jsx_runtime261 = require("react/jsx-runtime");
+var Tab = (0, import_react59.forwardRef)(({ children }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
-var import_react59 = require("react");
-var import_styled_components83 = __toESM(require("styled-components"));
-var import_type_guards44 = require("@wistia/type-guards");
-var import_jsx_runtime261 = require("react/jsx-runtime");
-var TagLabel = import_styled_components83.default.a`
+var import_react60 = require("react");
+var import_styled_components84 = __toESM(require("styled-components"));
+var import_type_guards45 = require("@wistia/type-guards");
+var import_jsx_runtime262 = require("react/jsx-runtime");
+var TagLabel = import_styled_components84.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -11499,14 +11627,14 @@ var TagLabel = import_styled_components83.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components83.default.div`
+var TagDivider = import_styled_components84.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components83.default.button`
+var StyledRemoveButton = import_styled_components84.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11534,7 +11662,7 @@ var StyledRemoveButton = import_styled_components83.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components83.default.div`
+var StyledTag = import_styled_components84.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11547,37 +11675,37 @@ var StyledTag = import_styled_components83.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards44.isNil)(onClickRemove)) {
+  if ((0, import_type_guards45.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards44.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards45.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(import_jsx_runtime261.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(import_jsx_runtime262.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react59.forwardRef)(
+var Tag = (0, import_react60.forwardRef)(
   ({
     onClickRemove,
     colorScheme = "inherit",
@@ -11587,16 +11715,16 @@ var Tag = (0, import_react59.forwardRef)(
     onClickRemoveLabel,
     ...otherProps
   }, ref) => {
-    const hasIcon = (0, import_type_guards44.isNotNil)(icon);
-    const labelProps = (0, import_type_guards44.isNotNil)(href) && (0, import_type_guards44.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
+    const hasIcon = (0, import_type_guards45.isNotNil)(icon);
+    const labelProps = (0, import_type_guards45.isNotNil)(href) && (0, import_type_guards45.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
             TagLabel,
             {
               ...labelProps,
@@ -11607,7 +11735,7 @@ var Tag = (0, import_react59.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -11623,26 +11751,26 @@ var Tag = (0, import_react59.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components84 = __toESM(require("styled-components"));
-var import_type_guards45 = require("@wistia/type-guards");
-var import_jsx_runtime262 = require("react/jsx-runtime");
+var import_styled_components85 = __toESM(require("styled-components"));
+var import_type_guards46 = require("@wistia/type-guards");
+var import_jsx_runtime263 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -11650,12 +11778,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -11665,7 +11793,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components84.default.svg`
+var WistiaLogoComponent = import_styled_components85.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -11681,12 +11809,12 @@ var WistiaLogoComponent = import_styled_components84.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components84.css`
+      return import_styled_components85.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components84.css`
+    return import_styled_components85.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -11723,7 +11851,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -11736,14 +11864,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("title", { children: title }),
-        (0, import_type_guards45.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("title", { children: title }),
+        (0, import_type_guards46.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 // Annotate the CommonJS export names for ESM import in node:
@@ -11807,6 +11935,7 @@ WistiaLogo.displayName = "WistiaLogo";
   SelectOptionGroup,
   Stack,
   SubMenu,
+  Switch,
   Tab,
   Table,
   TableBody,