@wistia/ui 0.9.1-beta.e028a78e.bb9fef4 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.9.1-beta.e028a78e.bb9fef4
3
+ * @license @wistia/ui v0.9.1
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -66,8 +66,6 @@ __export(index_exports, {
66
66
  FileAmountLimitValidator: () => import_validators.FileAmountLimitValidator,
67
67
  FileSizeValidator: () => import_validators.FileSizeValidator,
68
68
  FileTypeValidator: () => import_validators.FileTypeValidator,
69
- FilterMenu: () => FilterMenu,
70
- FilterMenuItem: () => FilterMenuItem,
71
69
  Form: () => Form,
72
70
  FormErrorSummary: () => FormErrorSummary,
73
71
  FormField: () => FormField,
@@ -10336,10 +10334,10 @@ var KeyboardShortcut = ({
10336
10334
  KeyboardShortcut.displayName = "KeyboardShortcut";
10337
10335
 
10338
10336
  // src/components/Menu/Menu.tsx
10339
- var import_react47 = require("react");
10340
10337
  var import_styled_components57 = __toESM(require("styled-components"));
10341
10338
  var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
10342
10339
  var import_type_guards37 = require("@wistia/type-guards");
10340
+ var import_react47 = require("react");
10343
10341
 
10344
10342
  // src/components/Menu/MenuContext.tsx
10345
10343
  var import_react46 = require("react");
@@ -10434,70 +10432,65 @@ var menuContentCss = import_styled_components57.css`
10434
10432
  `;
10435
10433
  var MenuContent = (0, import_styled_components57.default)(import_react_dropdown_menu.DropdownMenuContent)`
10436
10434
  ${menuContentCss}
10437
- min-width: var(--radix-dropdown-menu-trigger-width);
10438
10435
  `;
10439
- var Menu = (0, import_react47.forwardRef)(
10440
- ({
10441
- align = "start",
10442
- children,
10443
- disabled = false,
10444
- compact = false,
10445
- trigger,
10446
- label,
10447
- isOpen,
10448
- triggerProps = {},
10449
- onOpenChange,
10450
- onInteractOutside,
10451
- ...props
10452
- }, ref) => {
10453
- const contextValue = (0, import_react47.useMemo)(() => ({ compact }), [compact]);
10454
- let controlProps = {
10455
- ...(0, import_type_guards37.isNotNil)(onOpenChange) && (0, import_type_guards37.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
10436
+ var Menu = ({
10437
+ align = "start",
10438
+ children,
10439
+ disabled = false,
10440
+ compact = false,
10441
+ trigger,
10442
+ label,
10443
+ isOpen,
10444
+ triggerProps = {},
10445
+ onOpenChange,
10446
+ onInteractOutside,
10447
+ ...props
10448
+ }) => {
10449
+ const contextValue = (0, import_react47.useMemo)(() => ({ compact }), [compact]);
10450
+ let controlProps = {
10451
+ ...(0, import_type_guards37.isNotNil)(onOpenChange) && (0, import_type_guards37.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
10452
+ };
10453
+ if (disabled) {
10454
+ controlProps = {
10455
+ open: false,
10456
+ onOpenChange: () => null
10456
10457
  };
10457
- if (disabled) {
10458
- controlProps = {
10459
- open: false,
10460
- onOpenChange: () => null
10461
- };
10462
- }
10463
- return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
10464
- import_react_dropdown_menu.DropdownMenu,
10465
- {
10466
- modal: false,
10467
- ...controlProps,
10468
- children: [
10469
- /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards37.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
10470
- Button,
10471
- {
10472
- ref,
10473
- "aria-expanded": isOpen,
10474
- disabled,
10475
- forceState: isOpen ? "active" : void 0,
10476
- rightIcon: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Icon, { type: "caret-down" }),
10477
- ...triggerProps,
10478
- children: label
10479
- }
10480
- ) }),
10481
- /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
10482
- MenuContent,
10483
- {
10484
- ...props,
10485
- $compact: compact,
10486
- align,
10487
- collisionPadding: 8,
10488
- sideOffset: 6,
10489
- onFocusOutside: (event) => {
10490
- event.preventDefault();
10491
- },
10492
- children
10493
- }
10494
- ) })
10495
- ]
10496
- }
10497
- ) });
10498
10458
  }
10499
- );
10500
- Menu.displayName = "Menu";
10459
+ return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
10460
+ import_react_dropdown_menu.DropdownMenu,
10461
+ {
10462
+ modal: false,
10463
+ ...controlProps,
10464
+ children: [
10465
+ /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards37.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
10466
+ Button,
10467
+ {
10468
+ "aria-expanded": isOpen,
10469
+ disabled,
10470
+ forceState: isOpen ? "active" : void 0,
10471
+ rightIcon: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Icon, { type: "caret-down" }),
10472
+ ...triggerProps,
10473
+ children: label
10474
+ }
10475
+ ) }),
10476
+ /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
10477
+ MenuContent,
10478
+ {
10479
+ ...props,
10480
+ $compact: compact,
10481
+ align,
10482
+ collisionPadding: 8,
10483
+ sideOffset: 6,
10484
+ onFocusOutside: (event) => {
10485
+ event.preventDefault();
10486
+ },
10487
+ children
10488
+ }
10489
+ ) })
10490
+ ]
10491
+ }
10492
+ ) });
10493
+ };
10501
10494
  Menu.displayName = "Menu";
10502
10495
 
10503
10496
  // src/components/Menu/MenuLabel.tsx
@@ -10891,103 +10884,8 @@ var CheckboxMenuItem = ({
10891
10884
  };
10892
10885
  CheckboxMenuItem.displayName = "CheckboxMenuItem";
10893
10886
 
10894
- // src/components/Menu/FilterMenu.tsx
10895
- var import_react51 = require("react");
10896
- var import_jsx_runtime241 = require("react/jsx-runtime");
10897
- var FilterMenuItem = CheckboxMenuItem;
10898
- var FilterMenu = (0, import_react51.forwardRef)(
10899
- ({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
10900
- return /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
10901
- Menu,
10902
- {
10903
- ...props,
10904
- ref,
10905
- isOpen: true,
10906
- children: [
10907
- /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
10908
- Card,
10909
- {
10910
- alignItems: "flex-end",
10911
- border: false,
10912
- borderRadius: "border-radius-02",
10913
- paddingSize: "space-01",
10914
- prominence: "default",
10915
- style: {
10916
- position: "absolute",
10917
- top: 0,
10918
- left: 0,
10919
- right: 0,
10920
- margin: "1px"
10921
- },
10922
- children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
10923
- Input,
10924
- {
10925
- autoFocus: true,
10926
- onChange: (event) => {
10927
- onSearchValueChange(event.target.value);
10928
- },
10929
- onClick: (event) => event.preventDefault(),
10930
- onKeyDown: (event) => {
10931
- if (event.key === "ArrowDown") {
10932
- event.preventDefault();
10933
- const menu = document.querySelector('[role="menu"]');
10934
- const firstMenuItem = menu?.querySelector('[role="menuitemcheckbox"]');
10935
- if (firstMenuItem) {
10936
- firstMenuItem.focus();
10937
- }
10938
- }
10939
- event.stopPropagation();
10940
- },
10941
- placeholder: "Search...",
10942
- tabIndex: 0,
10943
- type: "search"
10944
- }
10945
- )
10946
- }
10947
- ),
10948
- /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
10949
- MenuItem,
10950
- {
10951
- disabled: true,
10952
- style: { padding: "16px" },
10953
- children: " "
10954
- }
10955
- ),
10956
- import_react51.Children.toArray(children).length > 0 ? children : /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(MenuItem, { disabled: true, children: "No results found" }),
10957
- value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(MenuItem, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
10958
- Card,
10959
- {
10960
- alignItems: "flex-end",
10961
- border: false,
10962
- borderRadius: "border-radius-02",
10963
- paddingSize: "space-01",
10964
- prominence: "default",
10965
- style: {
10966
- position: "absolute",
10967
- bottom: 0,
10968
- left: 0,
10969
- right: 0,
10970
- margin: "1px"
10971
- },
10972
- children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
10973
- Button,
10974
- {
10975
- onClick: () => onChange([]),
10976
- size: "sm",
10977
- children: "Clear"
10978
- }
10979
- )
10980
- }
10981
- ) })
10982
- ]
10983
- }
10984
- );
10985
- }
10986
- );
10987
- FilterMenu.displayName = "FilterMenu";
10988
-
10989
10887
  // src/components/Modal/Modal.tsx
10990
- var import_react55 = require("react");
10888
+ var import_react54 = require("react");
10991
10889
  var import_styled_components66 = __toESM(require("styled-components"));
10992
10890
  var import_react_dialog4 = require("@radix-ui/react-dialog");
10993
10891
  var import_type_guards42 = require("@wistia/type-guards");
@@ -10999,24 +10897,24 @@ var import_react_dialog2 = require("@radix-ui/react-dialog");
10999
10897
  // src/components/Modal/ModalCloseButton.tsx
11000
10898
  var import_styled_components62 = __toESM(require("styled-components"));
11001
10899
  var import_react_dialog = require("@radix-ui/react-dialog");
11002
- var import_jsx_runtime242 = require("react/jsx-runtime");
10900
+ var import_jsx_runtime241 = require("react/jsx-runtime");
11003
10901
  var CloseButton = (0, import_styled_components62.default)(import_react_dialog.Close)`
11004
10902
  align-self: start;
11005
10903
  `;
11006
10904
  var ModalCloseButton = () => {
11007
- return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
10905
+ return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
11008
10906
  IconButton,
11009
10907
  {
11010
10908
  label: "Dismiss modal",
11011
10909
  size: "sm",
11012
10910
  variant: "ghost",
11013
- children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon, { type: "close" })
10911
+ children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Icon, { type: "close" })
11014
10912
  }
11015
10913
  ) });
11016
10914
  };
11017
10915
 
11018
10916
  // src/components/Modal/ModalHeader.tsx
11019
- var import_jsx_runtime243 = require("react/jsx-runtime");
10917
+ var import_jsx_runtime242 = require("react/jsx-runtime");
11020
10918
  var Header = import_styled_components63.default.header`
11021
10919
  display: flex;
11022
10920
  order: 1;
@@ -11039,27 +10937,27 @@ var ModalHeader = ({
11039
10937
  hideTitle,
11040
10938
  hideCloseButton
11041
10939
  }) => {
11042
- const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Title, { children: title });
11043
- return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Header, { $hideTitle: hideTitle, children: [
10940
+ const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Title, { children: title });
10941
+ return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(Header, { $hideTitle: hideTitle, children: [
11044
10942
  TitleComponent,
11045
- hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(ModalCloseButton, {})
10943
+ hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(ModalCloseButton, {})
11046
10944
  ] });
11047
10945
  };
11048
10946
 
11049
10947
  // src/components/Modal/ModalContent.tsx
11050
- var import_react53 = require("react");
10948
+ var import_react52 = require("react");
11051
10949
  var import_styled_components64 = __toESM(require("styled-components"));
11052
10950
  var import_react_dialog3 = require("@radix-ui/react-dialog");
11053
10951
 
11054
10952
  // src/private/hooks/useFocusRestore/useFocusRestore.ts
11055
- var import_react52 = require("react");
10953
+ var import_react51 = require("react");
11056
10954
  var import_type_guards41 = require("@wistia/type-guards");
11057
10955
  var useFocusRestore = () => {
11058
- const previouslyFocusedRef = (0, import_react52.useRef)(null);
11059
- (0, import_react52.useEffect)(() => {
10956
+ const previouslyFocusedRef = (0, import_react51.useRef)(null);
10957
+ (0, import_react51.useEffect)(() => {
11060
10958
  previouslyFocusedRef.current = document.activeElement;
11061
10959
  }, []);
11062
- (0, import_react52.useEffect)(() => {
10960
+ (0, import_react51.useEffect)(() => {
11063
10961
  return () => {
11064
10962
  if ((0, import_type_guards41.isNotNil)(previouslyFocusedRef.current)) {
11065
10963
  setTimeout(() => {
@@ -11071,7 +10969,7 @@ var useFocusRestore = () => {
11071
10969
  };
11072
10970
 
11073
10971
  // src/components/Modal/ModalContent.tsx
11074
- var import_jsx_runtime244 = require("react/jsx-runtime");
10972
+ var import_jsx_runtime243 = require("react/jsx-runtime");
11075
10973
  var alignTopStyles = import_styled_components64.css`
11076
10974
  --wui-modal-translate-y: 0;
11077
10975
 
@@ -11150,10 +11048,10 @@ var StyledModalContent = (0, import_styled_components64.default)(import_react_di
11150
11048
  }
11151
11049
  }
11152
11050
  `;
11153
- var ModalContent = (0, import_react53.forwardRef)(
11051
+ var ModalContent = (0, import_react52.forwardRef)(
11154
11052
  ({ fullHeight, width, alignHorizontal, alignVertical, children, ...props }, ref) => {
11155
11053
  useFocusRestore();
11156
- return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
11054
+ return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
11157
11055
  StyledModalContent,
11158
11056
  {
11159
11057
  ref,
@@ -11170,9 +11068,9 @@ var ModalContent = (0, import_react53.forwardRef)(
11170
11068
  );
11171
11069
 
11172
11070
  // src/private/components/Backdrop/Backdrop.tsx
11173
- var import_react54 = require("react");
11071
+ var import_react53 = require("react");
11174
11072
  var import_styled_components65 = __toESM(require("styled-components"));
11175
- var import_jsx_runtime245 = require("react/jsx-runtime");
11073
+ var import_jsx_runtime244 = require("react/jsx-runtime");
11176
11074
  var alignVerticalMap = {
11177
11075
  stretch: "normal",
11178
11076
  top: "start",
@@ -11210,8 +11108,8 @@ var BackdropComponent = import_styled_components65.default.div`
11210
11108
  }
11211
11109
  }
11212
11110
  `;
11213
- var Backdrop = (0, import_react54.forwardRef)(
11214
- ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
11111
+ var Backdrop = (0, import_react53.forwardRef)(
11112
+ ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
11215
11113
  BackdropComponent,
11216
11114
  {
11217
11115
  ref,
@@ -11225,7 +11123,7 @@ var Backdrop = (0, import_react54.forwardRef)(
11225
11123
  Backdrop.displayName = "Backdrop";
11226
11124
 
11227
11125
  // src/components/Modal/Modal.tsx
11228
- var import_jsx_runtime246 = require("react/jsx-runtime");
11126
+ var import_jsx_runtime245 = require("react/jsx-runtime");
11229
11127
  var DEFAULT_MODAL_WIDTH = "532px";
11230
11128
  var ModalBody = import_styled_components66.default.div`
11231
11129
  flex-direction: column;
@@ -11233,7 +11131,7 @@ var ModalBody = import_styled_components66.default.div`
11233
11131
  flex: 1 0 0;
11234
11132
  order: 2;
11235
11133
  `;
11236
- var Modal = (0, import_react55.forwardRef)(
11134
+ var Modal = (0, import_react54.forwardRef)(
11237
11135
  ({
11238
11136
  children,
11239
11137
  fullHeight = false,
@@ -11248,7 +11146,7 @@ var Modal = (0, import_react55.forwardRef)(
11248
11146
  alignVertical = "center",
11249
11147
  ...props
11250
11148
  }, ref) => {
11251
- return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
11149
+ return /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
11252
11150
  import_react_dialog4.Root,
11253
11151
  {
11254
11152
  onOpenChange: (open2) => {
@@ -11257,9 +11155,9 @@ var Modal = (0, import_react55.forwardRef)(
11257
11155
  }
11258
11156
  },
11259
11157
  open: isOpen,
11260
- children: /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(import_react_dialog4.Portal, { children: [
11261
- /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Backdrop, {}),
11262
- /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
11158
+ children: /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(import_react_dialog4.Portal, { children: [
11159
+ /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Backdrop, {}),
11160
+ /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
11263
11161
  ModalContent,
11264
11162
  {
11265
11163
  ref,
@@ -11277,8 +11175,8 @@ var Modal = (0, import_react55.forwardRef)(
11277
11175
  width,
11278
11176
  ...props,
11279
11177
  children: [
11280
- /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(ModalBody, { children }),
11281
- /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
11178
+ /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ModalBody, { children }),
11179
+ /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
11282
11180
  ModalHeader,
11283
11181
  {
11284
11182
  hideCloseButton,
@@ -11309,7 +11207,7 @@ var getControlProps = (isOpen, onOpenChange) => {
11309
11207
  // src/components/Popover/PopoverArrow.tsx
11310
11208
  var import_react_popover = require("@radix-ui/react-popover");
11311
11209
  var import_styled_components67 = __toESM(require("styled-components"));
11312
- var import_jsx_runtime247 = require("react/jsx-runtime");
11210
+ var import_jsx_runtime246 = require("react/jsx-runtime");
11313
11211
  var StyledPath = import_styled_components67.default.path`
11314
11212
  fill: var(--wui-color-border-secondary);
11315
11213
  `;
@@ -11348,7 +11246,7 @@ var StyledCircle = import_styled_components67.default.circle`
11348
11246
  }
11349
11247
  `;
11350
11248
  var PopoverArrow = ({ isAnimated }) => {
11351
- return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_popover.PopoverArrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
11249
+ return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_popover.PopoverArrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
11352
11250
  "svg",
11353
11251
  {
11354
11252
  fill: "none",
@@ -11357,8 +11255,8 @@ var PopoverArrow = ({ isAnimated }) => {
11357
11255
  width: "48",
11358
11256
  xmlns: "http://www.w3.org/2000/svg",
11359
11257
  children: [
11360
- /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
11361
- /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11258
+ /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
11259
+ /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
11362
11260
  StyledCircle,
11363
11261
  {
11364
11262
  $isAnimated: isAnimated,
@@ -11369,7 +11267,7 @@ var PopoverArrow = ({ isAnimated }) => {
11369
11267
  strokeWidth: "4"
11370
11268
  }
11371
11269
  ),
11372
- /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11270
+ /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
11373
11271
  StyledCircle,
11374
11272
  {
11375
11273
  $isAnimated: isAnimated,
@@ -11387,7 +11285,7 @@ var PopoverArrow = ({ isAnimated }) => {
11387
11285
  PopoverArrow.displayName = "PopoverArrow";
11388
11286
 
11389
11287
  // src/components/Popover/Popover.tsx
11390
- var import_jsx_runtime248 = require("react/jsx-runtime");
11288
+ var import_jsx_runtime247 = require("react/jsx-runtime");
11391
11289
  var StyledContent2 = (0, import_styled_components68.default)(import_react_popover2.Content)`
11392
11290
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
11393
11291
  ${({ $unstyled }) => !$unstyled && import_styled_components68.css`
@@ -11426,9 +11324,9 @@ var Popover = ({
11426
11324
  "--wui-popover-max-width": maxWidth,
11427
11325
  "--wui-popover-max-height": maxHeight
11428
11326
  };
11429
- return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(import_react_popover2.Root, { ...getControlProps(isOpen, onOpenChange), children: [
11430
- /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_popover2.Trigger, { asChild: true, children: trigger }),
11431
- /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
11327
+ return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(import_react_popover2.Root, { ...getControlProps(isOpen, onOpenChange), children: [
11328
+ /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_popover2.Trigger, { asChild: true, children: trigger }),
11329
+ /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
11432
11330
  StyledContent2,
11433
11331
  {
11434
11332
  $colorScheme: colorScheme,
@@ -11437,17 +11335,17 @@ var Popover = ({
11437
11335
  $unstyled: unstyled,
11438
11336
  style,
11439
11337
  children: [
11440
- !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_popover2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
11338
+ !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_popover2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11441
11339
  IconButton,
11442
11340
  {
11443
11341
  "data-wui-popover-close": true,
11444
11342
  label: "Close",
11445
11343
  variant: "ghost",
11446
- children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Icon, { type: "close" })
11344
+ children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { type: "close" })
11447
11345
  }
11448
11346
  ) }),
11449
- withArrow ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(PopoverArrow, { isAnimated }) : null,
11450
- /* @__PURE__ */ (0, import_jsx_runtime248.jsx)("div", { children })
11347
+ withArrow ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(PopoverArrow, { isAnimated }) : null,
11348
+ /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("div", { children })
11451
11349
  ]
11452
11350
  }
11453
11351
  ) })
@@ -11459,7 +11357,7 @@ Popover.displayName = "Popover";
11459
11357
  var import_styled_components69 = __toESM(require("styled-components"));
11460
11358
  var import_react_progress = require("@radix-ui/react-progress");
11461
11359
  var import_type_guards44 = require("@wistia/type-guards");
11462
- var import_jsx_runtime249 = require("react/jsx-runtime");
11360
+ var import_jsx_runtime248 = require("react/jsx-runtime");
11463
11361
  var ProgressBarWrapper = import_styled_components69.default.div`
11464
11362
  --progress-bar-height: 8px;
11465
11363
  --progress-bar-indicator-color: var(--wui-color-bg-fill);
@@ -11512,15 +11410,15 @@ var ProgressBar = ({
11512
11410
  labelRight,
11513
11411
  ...props
11514
11412
  }) => {
11515
- return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(ProgressBarWrapper, { children: [
11516
- (0, import_type_guards44.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
11517
- /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11413
+ return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(ProgressBarWrapper, { children: [
11414
+ (0, import_type_guards44.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
11415
+ /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
11518
11416
  StyledProgressBar,
11519
11417
  {
11520
11418
  max,
11521
11419
  value: progress,
11522
11420
  ...props,
11523
- children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11421
+ children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
11524
11422
  StyledProgressIndicator,
11525
11423
  {
11526
11424
  $max: max,
@@ -11529,17 +11427,17 @@ var ProgressBar = ({
11529
11427
  )
11530
11428
  }
11531
11429
  ),
11532
- (0, import_type_guards44.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(ProgressBarLabel, { children: labelRight }) : null
11430
+ (0, import_type_guards44.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(ProgressBarLabel, { children: labelRight }) : null
11533
11431
  ] });
11534
11432
  };
11535
11433
  ProgressBar.displayName = "ProgressBar";
11536
11434
 
11537
11435
  // src/components/Radio/Radio.tsx
11538
- var import_react56 = require("react");
11436
+ var import_react55 = require("react");
11539
11437
  var import_styled_components70 = __toESM(require("styled-components"));
11540
11438
  var import_type_guards45 = require("@wistia/type-guards");
11541
- var import_jsx_runtime250 = require("react/jsx-runtime");
11542
- var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11439
+ var import_jsx_runtime249 = require("react/jsx-runtime");
11440
+ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11543
11441
  "svg",
11544
11442
  {
11545
11443
  fill: "inherit",
@@ -11547,7 +11445,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11547
11445
  viewBox: "0 0 1 1",
11548
11446
  width: "1",
11549
11447
  xmlns: "http://www.w3.org/2000/svg",
11550
- children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11448
+ children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11551
11449
  "circle",
11552
11450
  {
11553
11451
  cx: "0.5",
@@ -11638,7 +11536,7 @@ var StyledHiddenRadioInput = import_styled_components70.default.input`
11638
11536
  display: block;
11639
11537
  }
11640
11538
  `;
11641
- var Radio = (0, import_react56.forwardRef)(
11539
+ var Radio = (0, import_react55.forwardRef)(
11642
11540
  ({
11643
11541
  checked,
11644
11542
  disabled = false,
@@ -11653,15 +11551,15 @@ var Radio = (0, import_react56.forwardRef)(
11653
11551
  hideLabel = false,
11654
11552
  ...props
11655
11553
  }, ref) => {
11656
- const generatedId = (0, import_react56.useId)();
11554
+ const generatedId = (0, import_react55.useId)();
11657
11555
  const computedId = (0, import_type_guards45.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
11658
- return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
11556
+ return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
11659
11557
  StyledRadioWrapper,
11660
11558
  {
11661
11559
  $disabled: disabled,
11662
11560
  "aria-invalid": props["aria-invalid"],
11663
11561
  children: [
11664
- /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11562
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11665
11563
  StyledHiddenRadioInput,
11666
11564
  {
11667
11565
  ...props,
@@ -11676,16 +11574,16 @@ var Radio = (0, import_react56.forwardRef)(
11676
11574
  value
11677
11575
  }
11678
11576
  ),
11679
- /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11577
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11680
11578
  FormControlLabel,
11681
11579
  {
11682
- controlSlot: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11580
+ controlSlot: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11683
11581
  StyledRadioInput,
11684
11582
  {
11685
11583
  $disabled: disabled,
11686
11584
  $size: size,
11687
11585
  "data-wui-faux-input": "true",
11688
- children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(RadioIcon, {})
11586
+ children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(RadioIcon, {})
11689
11587
  }
11690
11588
  ),
11691
11589
  description,
@@ -11703,20 +11601,20 @@ var Radio = (0, import_react56.forwardRef)(
11703
11601
  Radio.displayName = "Radio";
11704
11602
 
11705
11603
  // src/components/SegmentedControl/SegmentedControl.tsx
11706
- var import_react59 = require("react");
11604
+ var import_react58 = require("react");
11707
11605
  var import_styled_components72 = __toESM(require("styled-components"));
11708
11606
  var import_react_toggle_group = require("@radix-ui/react-toggle-group");
11709
11607
  var import_type_guards46 = require("@wistia/type-guards");
11710
11608
 
11711
11609
  // src/components/SegmentedControl/useSelectedItemStyle.tsx
11712
- var import_react57 = require("react");
11713
- var import_jsx_runtime251 = require("react/jsx-runtime");
11714
- var SelectedItemStyleContext = (0, import_react57.createContext)(null);
11610
+ var import_react56 = require("react");
11611
+ var import_jsx_runtime250 = require("react/jsx-runtime");
11612
+ var SelectedItemStyleContext = (0, import_react56.createContext)(null);
11715
11613
  var SelectedItemStyleProvider = ({
11716
11614
  children
11717
11615
  }) => {
11718
- const [selectedItemMeasurements, setSelectedItemMeasurements] = (0, import_react57.useState)(null);
11719
- const selectedItemIndicatorStyle = (0, import_react57.useMemo)(
11616
+ const [selectedItemMeasurements, setSelectedItemMeasurements] = (0, import_react56.useState)(null);
11617
+ const selectedItemIndicatorStyle = (0, import_react56.useMemo)(
11720
11618
  () => selectedItemMeasurements != null ? {
11721
11619
  height: `${selectedItemMeasurements.offsetHeight}px`,
11722
11620
  transform: `translateX(${selectedItemMeasurements.offsetLeft}px) translateY(-50%)`,
@@ -11726,17 +11624,17 @@ var SelectedItemStyleProvider = ({
11726
11624
  },
11727
11625
  [selectedItemMeasurements]
11728
11626
  );
11729
- const contextValue = (0, import_react57.useMemo)(
11627
+ const contextValue = (0, import_react56.useMemo)(
11730
11628
  () => ({
11731
11629
  setSelectedItemMeasurements,
11732
11630
  selectedItemIndicatorStyle
11733
11631
  }),
11734
11632
  [selectedItemIndicatorStyle]
11735
11633
  );
11736
- return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
11634
+ return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
11737
11635
  };
11738
11636
  var useSelectedItemStyle = () => {
11739
- const context = (0, import_react57.useContext)(SelectedItemStyleContext);
11637
+ const context = (0, import_react56.useContext)(SelectedItemStyleContext);
11740
11638
  if (context === null) {
11741
11639
  throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
11742
11640
  }
@@ -11747,11 +11645,11 @@ var useSelectedItemStyle = () => {
11747
11645
  var import_styled_components71 = __toESM(require("styled-components"));
11748
11646
 
11749
11647
  // src/components/SegmentedControl/useSegmentedControlValue.tsx
11750
- var import_react58 = require("react");
11751
- var SegmentedControlValueContext = (0, import_react58.createContext)(null);
11648
+ var import_react57 = require("react");
11649
+ var SegmentedControlValueContext = (0, import_react57.createContext)(null);
11752
11650
  var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
11753
11651
  var useSegmentedControlValue = () => {
11754
- const context = (0, import_react58.useContext)(SegmentedControlValueContext);
11652
+ const context = (0, import_react57.useContext)(SegmentedControlValueContext);
11755
11653
  if (context === null) {
11756
11654
  throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
11757
11655
  }
@@ -11759,7 +11657,7 @@ var useSegmentedControlValue = () => {
11759
11657
  };
11760
11658
 
11761
11659
  // src/components/SegmentedControl/SelectedItemIndicator.tsx
11762
- var import_jsx_runtime252 = require("react/jsx-runtime");
11660
+ var import_jsx_runtime251 = require("react/jsx-runtime");
11763
11661
  var SelectedItemIndicatorDiv = import_styled_components71.default.div`
11764
11662
  background-color: var(--wui-color-bg-fill-white);
11765
11663
  border-radius: var(--wui-border-radius-rounded);
@@ -11778,11 +11676,11 @@ var SelectedItemIndicator = () => {
11778
11676
  if (!selectedValue) {
11779
11677
  return null;
11780
11678
  }
11781
- return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
11679
+ return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
11782
11680
  };
11783
11681
 
11784
11682
  // src/components/SegmentedControl/SegmentedControl.tsx
11785
- var import_jsx_runtime253 = require("react/jsx-runtime");
11683
+ var import_jsx_runtime252 = require("react/jsx-runtime");
11786
11684
  var segmentedControlStyles = import_styled_components72.css`
11787
11685
  display: inline-flex;
11788
11686
  background-color: var(--wui-color-bg-surface-secondary);
@@ -11797,7 +11695,7 @@ var segmentedControlStyles = import_styled_components72.css`
11797
11695
  var StyledSegmentedControl = (0, import_styled_components72.default)(import_react_toggle_group.Root)`
11798
11696
  ${segmentedControlStyles}
11799
11697
  `;
11800
- var SegmentedControl = (0, import_react59.forwardRef)(
11698
+ var SegmentedControl = (0, import_react58.forwardRef)(
11801
11699
  ({
11802
11700
  children,
11803
11701
  disabled = false,
@@ -11809,7 +11707,7 @@ var SegmentedControl = (0, import_react59.forwardRef)(
11809
11707
  if ((0, import_type_guards46.isNil)(children)) {
11810
11708
  return null;
11811
11709
  }
11812
- return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
11710
+ return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
11813
11711
  StyledSegmentedControl,
11814
11712
  {
11815
11713
  ref,
@@ -11821,8 +11719,8 @@ var SegmentedControl = (0, import_react59.forwardRef)(
11821
11719
  type: "single",
11822
11720
  value: selectedValue,
11823
11721
  ...props,
11824
- children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(SelectedItemStyleProvider, { children: [
11825
- /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(SelectedItemIndicator, {}),
11722
+ children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(SelectedItemStyleProvider, { children: [
11723
+ /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(SelectedItemIndicator, {}),
11826
11724
  children
11827
11725
  ] }) })
11828
11726
  }
@@ -11832,11 +11730,11 @@ var SegmentedControl = (0, import_react59.forwardRef)(
11832
11730
  SegmentedControl.displayName = "SegmentedControl";
11833
11731
 
11834
11732
  // src/components/SegmentedControl/SegmentedControlItem.tsx
11835
- var import_react60 = require("react");
11733
+ var import_react59 = require("react");
11836
11734
  var import_styled_components73 = __toESM(require("styled-components"));
11837
11735
  var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
11838
11736
  var import_type_guards47 = require("@wistia/type-guards");
11839
- var import_jsx_runtime254 = require("react/jsx-runtime");
11737
+ var import_jsx_runtime253 = require("react/jsx-runtime");
11840
11738
  var segmentedControlItemStyles = import_styled_components73.css`
11841
11739
  all: unset; /* ToggleGroupItem is a button element */
11842
11740
  align-items: center;
@@ -11900,11 +11798,11 @@ var segmentedControlItemStyles = import_styled_components73.css`
11900
11798
  var StyledSegmentedControlItem = (0, import_styled_components73.default)(import_react_toggle_group2.Item)`
11901
11799
  ${segmentedControlItemStyles}
11902
11800
  `;
11903
- var SegmentedControlItem = (0, import_react60.forwardRef)(
11801
+ var SegmentedControlItem = (0, import_react59.forwardRef)(
11904
11802
  ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
11905
11803
  const selectedValue = useSegmentedControlValue();
11906
11804
  const { setSelectedItemMeasurements } = useSelectedItemStyle();
11907
- const buttonRef = (0, import_react60.useRef)(null);
11805
+ const buttonRef = (0, import_react59.useRef)(null);
11908
11806
  const combinedRef = mergeRefs([buttonRef, forwardedRef]);
11909
11807
  const handleClick = (event) => {
11910
11808
  const target = event.target;
@@ -11913,7 +11811,7 @@ var SegmentedControlItem = (0, import_react60.forwardRef)(
11913
11811
  event.preventDefault();
11914
11812
  }
11915
11813
  };
11916
- (0, import_react60.useEffect)(() => {
11814
+ (0, import_react59.useEffect)(() => {
11917
11815
  const buttonElem = buttonRef.current;
11918
11816
  if (!buttonElem) {
11919
11817
  return void 0;
@@ -11938,7 +11836,7 @@ var SegmentedControlItem = (0, import_react60.forwardRef)(
11938
11836
  resizeObserver.disconnect();
11939
11837
  };
11940
11838
  }, [selectedValue, setSelectedItemMeasurements, value]);
11941
- return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
11839
+ return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
11942
11840
  StyledSegmentedControlItem,
11943
11841
  {
11944
11842
  ref: combinedRef,
@@ -11959,9 +11857,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
11959
11857
 
11960
11858
  // src/components/Select/Select.tsx
11961
11859
  var import_react_select = require("@radix-ui/react-select");
11962
- var import_react61 = require("react");
11860
+ var import_react60 = require("react");
11963
11861
  var import_styled_components74 = __toESM(require("styled-components"));
11964
- var import_jsx_runtime255 = require("react/jsx-runtime");
11862
+ var import_jsx_runtime254 = require("react/jsx-runtime");
11965
11863
  var StyledTrigger = (0, import_styled_components74.default)(import_react_select.Trigger)`
11966
11864
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
11967
11865
  ${inputCssVariables};
@@ -12024,7 +11922,7 @@ var StyledContent3 = (0, import_styled_components74.default)(import_react_select
12024
11922
  max-height: var(--radix-select-content-available-height);
12025
11923
  z-index: var(--wui-zindex-select);
12026
11924
  `;
12027
- var Select = (0, import_react61.forwardRef)(
11925
+ var Select = (0, import_react60.forwardRef)(
12028
11926
  ({
12029
11927
  colorScheme = "inherit",
12030
11928
  children,
@@ -12034,13 +11932,13 @@ var Select = (0, import_react61.forwardRef)(
12034
11932
  ...props
12035
11933
  }, forwardedRef) => {
12036
11934
  const responsiveFullWidth = useResponsiveProp(fullWidth);
12037
- return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
11935
+ return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
12038
11936
  import_react_select.Root,
12039
11937
  {
12040
11938
  ...props,
12041
11939
  onValueChange: onChange,
12042
11940
  children: [
12043
- /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
11941
+ /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
12044
11942
  StyledTrigger,
12045
11943
  {
12046
11944
  ref: forwardedRef,
@@ -12048,8 +11946,8 @@ var Select = (0, import_react61.forwardRef)(
12048
11946
  $fullWidth: responsiveFullWidth,
12049
11947
  ...props,
12050
11948
  children: [
12051
- /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select.Value, { placeholder }),
12052
- /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
11949
+ /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.Value, { placeholder }),
11950
+ /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
12053
11951
  Icon,
12054
11952
  {
12055
11953
  size: "md",
@@ -12059,10 +11957,10 @@ var Select = (0, import_react61.forwardRef)(
12059
11957
  ]
12060
11958
  }
12061
11959
  ),
12062
- /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(StyledContent3, { position: "popper", children: [
12063
- /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Icon, { type: "caret-up" }) }),
12064
- /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select.Viewport, { children }),
12065
- /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Icon, { type: "caret-down" }) })
11960
+ /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(StyledContent3, { position: "popper", children: [
11961
+ /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Icon, { type: "caret-up" }) }),
11962
+ /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.Viewport, { children }),
11963
+ /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Icon, { type: "caret-down" }) })
12066
11964
  ] }) })
12067
11965
  ]
12068
11966
  }
@@ -12073,10 +11971,10 @@ Select.displayName = "Select";
12073
11971
 
12074
11972
  // src/components/Select/SelectOption.tsx
12075
11973
  var import_react_select2 = require("@radix-ui/react-select");
12076
- var import_react62 = require("react");
11974
+ var import_react61 = require("react");
12077
11975
  var import_styled_components75 = __toESM(require("styled-components"));
12078
11976
  var import_type_guards48 = require("@wistia/type-guards");
12079
- var import_jsx_runtime256 = require("react/jsx-runtime");
11977
+ var import_jsx_runtime255 = require("react/jsx-runtime");
12080
11978
  var StyledItem = (0, import_styled_components75.default)(import_react_select2.Item)`
12081
11979
  ${variantStyleMap2.body3};
12082
11980
  display: flex;
@@ -12104,25 +12002,25 @@ var StyledItem = (0, import_styled_components75.default)(import_react_select2.It
12104
12002
  var StyledIconContainer = import_styled_components75.default.span`
12105
12003
  width: 12px;
12106
12004
  `;
12107
- var SelectOption = (0, import_react62.forwardRef)(
12005
+ var SelectOption = (0, import_react61.forwardRef)(
12108
12006
  ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
12109
- return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(
12007
+ return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
12110
12008
  StyledItem,
12111
12009
  {
12112
12010
  ...props,
12113
12011
  ref: forwardedRef,
12114
12012
  children: [
12115
- /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
12013
+ /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
12116
12014
  Icon,
12117
12015
  {
12118
12016
  size: "sm",
12119
12017
  type: "checkmark"
12120
12018
  }
12121
12019
  ) }) }),
12122
- (0, import_type_guards48.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)("div", { children: [
12020
+ (0, import_type_guards48.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)("div", { children: [
12123
12021
  children,
12124
- /* @__PURE__ */ (0, import_jsx_runtime256.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
12125
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(import_react_select2.ItemText, { children })
12022
+ /* @__PURE__ */ (0, import_jsx_runtime255.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
12023
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select2.ItemText, { children })
12126
12024
  ]
12127
12025
  }
12128
12026
  );
@@ -12133,13 +12031,13 @@ SelectOption.displayName = "SelectOption";
12133
12031
  // src/components/Select/SelectOptionGroup.tsx
12134
12032
  var import_react_select3 = require("@radix-ui/react-select");
12135
12033
  var import_styled_components76 = __toESM(require("styled-components"));
12136
- var import_jsx_runtime257 = require("react/jsx-runtime");
12034
+ var import_jsx_runtime256 = require("react/jsx-runtime");
12137
12035
  var StyledLabel4 = (0, import_styled_components76.default)(import_react_select3.Label)`
12138
12036
  padding: var(--wui-select-option-padding);
12139
12037
  `;
12140
12038
  var SelectOptionGroup = ({ children, label, ...props }) => {
12141
- return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(import_react_select3.Group, { ...props, children: [
12142
- /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
12039
+ return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(import_react_select3.Group, { ...props, children: [
12040
+ /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
12143
12041
  Text,
12144
12042
  {
12145
12043
  prominence: "secondary",
@@ -12152,10 +12050,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
12152
12050
  };
12153
12051
 
12154
12052
  // src/components/Switch/Switch.tsx
12155
- var import_react63 = require("react");
12053
+ var import_react62 = require("react");
12156
12054
  var import_styled_components77 = __toESM(require("styled-components"));
12157
12055
  var import_type_guards49 = require("@wistia/type-guards");
12158
- var import_jsx_runtime258 = require("react/jsx-runtime");
12056
+ var import_jsx_runtime257 = require("react/jsx-runtime");
12159
12057
  var sizeSmall3 = import_styled_components77.css`
12160
12058
  --wui-size-small-width: 24px;
12161
12059
  --wui-size-small-height: 14px;
@@ -12257,7 +12155,7 @@ var StyledHiddenSwitchInput = import_styled_components77.default.input`
12257
12155
  }
12258
12156
  }
12259
12157
  `;
12260
- var Switch = (0, import_react63.forwardRef)(
12158
+ var Switch = (0, import_react62.forwardRef)(
12261
12159
  ({
12262
12160
  checked,
12263
12161
  disabled = false,
@@ -12272,10 +12170,10 @@ var Switch = (0, import_react63.forwardRef)(
12272
12170
  hideLabel = false,
12273
12171
  ...props
12274
12172
  }, ref) => {
12275
- const generatedId = (0, import_react63.useId)();
12173
+ const generatedId = (0, import_react62.useId)();
12276
12174
  const computedId = (0, import_type_guards49.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
12277
- return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
12278
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
12175
+ return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
12176
+ /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
12279
12177
  StyledHiddenSwitchInput,
12280
12178
  {
12281
12179
  ...props,
@@ -12290,10 +12188,10 @@ var Switch = (0, import_react63.forwardRef)(
12290
12188
  value
12291
12189
  }
12292
12190
  ),
12293
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
12191
+ /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
12294
12192
  FormControlLabel,
12295
12193
  {
12296
- controlSlot: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
12194
+ controlSlot: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
12297
12195
  StyledSwitchInput,
12298
12196
  {
12299
12197
  $disabled: disabled,
@@ -12316,7 +12214,7 @@ Switch.displayName = "Switch";
12316
12214
 
12317
12215
  // src/components/Table/Table.tsx
12318
12216
  var import_styled_components78 = __toESM(require("styled-components"));
12319
- var import_jsx_runtime259 = require("react/jsx-runtime");
12217
+ var import_jsx_runtime258 = require("react/jsx-runtime");
12320
12218
  var StyledTable = import_styled_components78.default.table`
12321
12219
  width: 100%;
12322
12220
  border-collapse: collapse;
@@ -12346,7 +12244,7 @@ var Table = ({
12346
12244
  visuallyHiddenHeader = false,
12347
12245
  ...props
12348
12246
  }) => {
12349
- return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
12247
+ return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
12350
12248
  StyledTable,
12351
12249
  {
12352
12250
  $divided: divided,
@@ -12362,20 +12260,20 @@ var Table = ({
12362
12260
  var import_styled_components79 = __toESM(require("styled-components"));
12363
12261
 
12364
12262
  // src/components/Table/TableSectionContext.ts
12365
- var import_react64 = require("react");
12366
- var TableSectionContext = (0, import_react64.createContext)(null);
12263
+ var import_react63 = require("react");
12264
+ var TableSectionContext = (0, import_react63.createContext)(null);
12367
12265
 
12368
12266
  // src/components/Table/TableBody.tsx
12369
- var import_jsx_runtime260 = require("react/jsx-runtime");
12267
+ var import_jsx_runtime259 = require("react/jsx-runtime");
12370
12268
  var StyledTableBody = import_styled_components79.default.tbody``;
12371
12269
  var TableBody = ({ children, ...props }) => {
12372
- return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTableBody, { ...props, children }) });
12270
+ return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StyledTableBody, { ...props, children }) });
12373
12271
  };
12374
12272
 
12375
12273
  // src/components/Table/TableCell.tsx
12376
- var import_react65 = require("react");
12274
+ var import_react64 = require("react");
12377
12275
  var import_styled_components80 = __toESM(require("styled-components"));
12378
- var import_jsx_runtime261 = require("react/jsx-runtime");
12276
+ var import_jsx_runtime260 = require("react/jsx-runtime");
12379
12277
  var sharedStyles = import_styled_components80.css`
12380
12278
  color: var(--wui-color-text);
12381
12279
  padding: var(--wui-space-02);
@@ -12394,39 +12292,39 @@ var StyledTd = import_styled_components80.default.td`
12394
12292
  line-height: var(--wui-typography-body-2-line-height);
12395
12293
  `;
12396
12294
  var TableCell = ({ children, ...props }) => {
12397
- const section = (0, import_react65.useContext)(TableSectionContext);
12295
+ const section = (0, import_react64.useContext)(TableSectionContext);
12398
12296
  if (section === "head") {
12399
- return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(StyledTh, { ...props, children });
12297
+ return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTh, { ...props, children });
12400
12298
  }
12401
- return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(StyledTd, { ...props, children });
12299
+ return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTd, { ...props, children });
12402
12300
  };
12403
12301
 
12404
12302
  // src/components/Table/TableFoot.tsx
12405
12303
  var import_styled_components81 = __toESM(require("styled-components"));
12406
- var import_jsx_runtime262 = require("react/jsx-runtime");
12304
+ var import_jsx_runtime261 = require("react/jsx-runtime");
12407
12305
  var StyledTableFoot = import_styled_components81.default.tfoot``;
12408
12306
  var TableFoot = ({ children, ...props }) => {
12409
- return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledTableFoot, { ...props, children }) });
12307
+ return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(StyledTableFoot, { ...props, children }) });
12410
12308
  };
12411
12309
 
12412
12310
  // src/components/Table/TableHead.tsx
12413
12311
  var import_styled_components82 = __toESM(require("styled-components"));
12414
- var import_jsx_runtime263 = require("react/jsx-runtime");
12312
+ var import_jsx_runtime262 = require("react/jsx-runtime");
12415
12313
  var StyledThead = import_styled_components82.default.thead``;
12416
12314
  var TableHead = ({ children, ...props }) => {
12417
- return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(StyledThead, { ...props, children }) });
12315
+ return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledThead, { ...props, children }) });
12418
12316
  };
12419
12317
 
12420
12318
  // src/components/Table/TableRow.tsx
12421
12319
  var import_styled_components83 = __toESM(require("styled-components"));
12422
- var import_jsx_runtime264 = require("react/jsx-runtime");
12320
+ var import_jsx_runtime263 = require("react/jsx-runtime");
12423
12321
  var StyledTableRow = import_styled_components83.default.tr``;
12424
12322
  var TableRow = ({ children, ...props }) => {
12425
- return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(StyledTableRow, { ...props, children });
12323
+ return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(StyledTableRow, { ...props, children });
12426
12324
  };
12427
12325
 
12428
12326
  // src/components/Tabs/Tabs.tsx
12429
- var import_react69 = require("react");
12327
+ var import_react68 = require("react");
12430
12328
  var import_react_tabs4 = require("@radix-ui/react-tabs");
12431
12329
  var import_type_guards51 = require("@wistia/type-guards");
12432
12330
  var import_styled_components88 = __toESM(require("styled-components"));
@@ -12434,13 +12332,13 @@ var import_styled_components88 = __toESM(require("styled-components"));
12434
12332
  // src/components/Tabs/TabPanel.tsx
12435
12333
  var import_styled_components84 = __toESM(require("styled-components"));
12436
12334
  var import_react_tabs = require("@radix-ui/react-tabs");
12437
- var import_jsx_runtime265 = require("react/jsx-runtime");
12335
+ var import_jsx_runtime264 = require("react/jsx-runtime");
12438
12336
  var StyledTabPanel = (0, import_styled_components84.default)(import_react_tabs.Content)`
12439
12337
  display: flex;
12440
12338
  flex-direction: column;
12441
12339
  `;
12442
12340
  var TabPanel = ({ children, value, ...props }) => {
12443
- return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
12341
+ return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
12444
12342
  StyledTabPanel,
12445
12343
  {
12446
12344
  value,
@@ -12454,7 +12352,7 @@ TabPanel.displayName = "TabPanel";
12454
12352
  // src/components/Tabs/TabList.tsx
12455
12353
  var import_styled_components85 = __toESM(require("styled-components"));
12456
12354
  var import_react_tabs2 = require("@radix-ui/react-tabs");
12457
- var import_jsx_runtime266 = require("react/jsx-runtime");
12355
+ var import_jsx_runtime265 = require("react/jsx-runtime");
12458
12356
  var StyledTabList = (0, import_styled_components85.default)(import_react_tabs2.List)`
12459
12357
  ${segmentedControlStyles}
12460
12358
 
@@ -12468,7 +12366,7 @@ var TabList = ({
12468
12366
  ariaLabel,
12469
12367
  ...props
12470
12368
  }) => {
12471
- return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
12369
+ return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
12472
12370
  StyledTabList,
12473
12371
  {
12474
12372
  $fullWidth: fullWidth,
@@ -12481,17 +12379,17 @@ var TabList = ({
12481
12379
  TabList.displayName = "TabList";
12482
12380
 
12483
12381
  // src/components/Tabs/TabItem.tsx
12484
- var import_react67 = require("react");
12382
+ var import_react66 = require("react");
12485
12383
  var import_styled_components86 = __toESM(require("styled-components"));
12486
12384
  var import_react_tabs3 = require("@radix-ui/react-tabs");
12487
12385
  var import_type_guards50 = require("@wistia/type-guards");
12488
12386
 
12489
12387
  // src/components/Tabs/useTabsValue.tsx
12490
- var import_react66 = require("react");
12491
- var TabsValueContext = (0, import_react66.createContext)(null);
12388
+ var import_react65 = require("react");
12389
+ var TabsValueContext = (0, import_react65.createContext)(null);
12492
12390
  var TabsValueProvider = TabsValueContext.Provider;
12493
12391
  var useTabsValue = () => {
12494
- const context = (0, import_react66.useContext)(TabsValueContext);
12392
+ const context = (0, import_react65.useContext)(TabsValueContext);
12495
12393
  if (context === null) {
12496
12394
  throw new Error("useTabsValue must be used within a TabsValueProvider");
12497
12395
  }
@@ -12499,7 +12397,7 @@ var useTabsValue = () => {
12499
12397
  };
12500
12398
 
12501
12399
  // src/components/Tabs/TabItem.tsx
12502
- var import_jsx_runtime267 = require("react/jsx-runtime");
12400
+ var import_jsx_runtime266 = require("react/jsx-runtime");
12503
12401
  var StyledTabItem = (0, import_styled_components86.default)(import_react_tabs3.Trigger)`
12504
12402
  ${segmentedControlItemStyles}
12505
12403
 
@@ -12507,13 +12405,13 @@ var StyledTabItem = (0, import_styled_components86.default)(import_react_tabs3.T
12507
12405
  outline: none;
12508
12406
  }
12509
12407
  `;
12510
- var TabItem = (0, import_react67.forwardRef)(
12408
+ var TabItem = (0, import_react66.forwardRef)(
12511
12409
  ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
12512
12410
  const selectedValue = useTabsValue();
12513
12411
  const { setSelectedItemMeasurements } = useSelectedItemStyle();
12514
- const buttonRef = (0, import_react67.useRef)(null);
12412
+ const buttonRef = (0, import_react66.useRef)(null);
12515
12413
  const combinedRef = mergeRefs([buttonRef, forwardedRef]);
12516
- (0, import_react67.useEffect)(() => {
12414
+ (0, import_react66.useEffect)(() => {
12517
12415
  const buttonElem = buttonRef.current;
12518
12416
  if (!buttonElem) {
12519
12417
  return void 0;
@@ -12538,7 +12436,7 @@ var TabItem = (0, import_react67.forwardRef)(
12538
12436
  resizeObserver.disconnect();
12539
12437
  };
12540
12438
  }, [selectedValue, setSelectedItemMeasurements, value]);
12541
- return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
12439
+ return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
12542
12440
  StyledTabItem,
12543
12441
  {
12544
12442
  ref: combinedRef,
@@ -12557,16 +12455,16 @@ var TabItem = (0, import_react67.forwardRef)(
12557
12455
  TabItem.displayName = "TabItem";
12558
12456
 
12559
12457
  // src/components/Tabs/extractTabItems.ts
12560
- var import_react68 = require("react");
12458
+ var import_react67 = require("react");
12561
12459
  var extractTabItems = (children) => {
12562
12460
  const tabItems = [];
12563
- import_react68.Children.forEach(children, (child) => {
12564
- if (!(0, import_react68.isValidElement)(child)) {
12461
+ import_react67.Children.forEach(children, (child) => {
12462
+ if (!(0, import_react67.isValidElement)(child)) {
12565
12463
  return;
12566
12464
  }
12567
12465
  if (typeof child.type !== "string" && child.type.displayName === "Tab") {
12568
12466
  tabItems.push(child);
12569
- } else if (child.type === import_react68.Fragment) {
12467
+ } else if (child.type === import_react67.Fragment) {
12570
12468
  const fragmentElement = child;
12571
12469
  tabItems.push(...extractTabItems(fragmentElement.props.children));
12572
12470
  } else if ((child.props.children ?? null) != null) {
@@ -12580,7 +12478,7 @@ var extractTabItems = (children) => {
12580
12478
 
12581
12479
  // src/components/Tabs/SelectedItemIndicator.tsx
12582
12480
  var import_styled_components87 = __toESM(require("styled-components"));
12583
- var import_jsx_runtime268 = require("react/jsx-runtime");
12481
+ var import_jsx_runtime267 = require("react/jsx-runtime");
12584
12482
  var TabsSelectedItemIndicatorDiv = (0, import_styled_components87.default)(SelectedItemIndicatorDiv)`
12585
12483
  &:has(~ ${StyledTabItem}:focus-visible) {
12586
12484
  outline: 2px solid var(--wui-color-focus-ring);
@@ -12592,11 +12490,11 @@ var SelectedItemIndicator2 = () => {
12592
12490
  if (selectedValue == null) {
12593
12491
  return null;
12594
12492
  }
12595
- return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
12493
+ return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
12596
12494
  };
12597
12495
 
12598
12496
  // src/components/Tabs/Tabs.tsx
12599
- var import_jsx_runtime269 = require("react/jsx-runtime");
12497
+ var import_jsx_runtime268 = require("react/jsx-runtime");
12600
12498
  var TabsContainer = import_styled_components88.default.div`
12601
12499
  display: flex;
12602
12500
  flex-direction: column;
@@ -12613,7 +12511,7 @@ var StyledTabsRoot = (0, import_styled_components88.default)(import_react_tabs4.
12613
12511
  flex-direction: column;
12614
12512
  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
12615
12513
  `;
12616
- var Tabs = (0, import_react69.forwardRef)(
12514
+ var Tabs = (0, import_react68.forwardRef)(
12617
12515
  ({
12618
12516
  children,
12619
12517
  fullWidth = true,
@@ -12625,13 +12523,13 @@ var Tabs = (0, import_react69.forwardRef)(
12625
12523
  ...props
12626
12524
  }, ref) => {
12627
12525
  const tabItems = extractTabItems(children);
12628
- const [internalSelectedValue, setInternalSelectedValue] = (0, import_react69.useState)(defaultSelectedValue);
12526
+ const [internalSelectedValue, setInternalSelectedValue] = (0, import_react68.useState)(defaultSelectedValue);
12629
12527
  const modeProps = defaultSelectedValue !== void 0 ? {
12630
12528
  defaultValue: defaultSelectedValue,
12631
12529
  onValueChange: setInternalSelectedValue
12632
12530
  } : { value: selectedValue, onValueChange: onSelectedValueChange };
12633
12531
  const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
12634
- return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
12532
+ return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
12635
12533
  StyledTabsRoot,
12636
12534
  {
12637
12535
  ref,
@@ -12639,14 +12537,14 @@ var Tabs = (0, import_react69.forwardRef)(
12639
12537
  activationMode: "automatic",
12640
12538
  ...props,
12641
12539
  ...modeProps,
12642
- children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(SelectedItemStyleProvider, { children: [
12643
- /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
12540
+ children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(SelectedItemStyleProvider, { children: [
12541
+ /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
12644
12542
  TabList,
12645
12543
  {
12646
12544
  ariaLabel,
12647
12545
  fullWidth,
12648
12546
  children: [
12649
- /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(SelectedItemIndicator2, {}),
12547
+ /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(SelectedItemIndicator2, {}),
12650
12548
  tabItems.map((tab) => {
12651
12549
  const {
12652
12550
  value,
@@ -12656,7 +12554,7 @@ var Tabs = (0, import_react69.forwardRef)(
12656
12554
  "aria-label": ariaLabelForTab
12657
12555
  } = tab.props;
12658
12556
  if ((0, import_type_guards51.isNil)(icon)) {
12659
- return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
12557
+ return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
12660
12558
  TabItem,
12661
12559
  {
12662
12560
  disabled,
@@ -12667,7 +12565,7 @@ var Tabs = (0, import_react69.forwardRef)(
12667
12565
  );
12668
12566
  }
12669
12567
  if ((0, import_type_guards51.isNotNil)(label)) {
12670
- return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
12568
+ return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
12671
12569
  TabItem,
12672
12570
  {
12673
12571
  disabled,
@@ -12679,7 +12577,7 @@ var Tabs = (0, import_react69.forwardRef)(
12679
12577
  );
12680
12578
  }
12681
12579
  if ((0, import_type_guards51.isNotNil)(ariaLabelForTab)) {
12682
- return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
12580
+ return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
12683
12581
  TabItem,
12684
12582
  {
12685
12583
  "aria-label": ariaLabelForTab,
@@ -12695,7 +12593,7 @@ var Tabs = (0, import_react69.forwardRef)(
12695
12593
  ]
12696
12594
  }
12697
12595
  ),
12698
- /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
12596
+ /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
12699
12597
  TabPanel,
12700
12598
  {
12701
12599
  value: tab.props.value,
@@ -12711,18 +12609,18 @@ var Tabs = (0, import_react69.forwardRef)(
12711
12609
  Tabs.displayName = "Tabs";
12712
12610
 
12713
12611
  // src/components/Tabs/Tab.tsx
12714
- var import_react70 = require("react");
12715
- var import_jsx_runtime270 = require("react/jsx-runtime");
12716
- var Tab = (0, import_react70.forwardRef)(({ children }, ref) => {
12717
- return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)("div", { ref, children });
12612
+ var import_react69 = require("react");
12613
+ var import_jsx_runtime269 = require("react/jsx-runtime");
12614
+ var Tab = (0, import_react69.forwardRef)(({ children }, ref) => {
12615
+ return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("div", { ref, children });
12718
12616
  });
12719
12617
  Tab.displayName = "Tab";
12720
12618
 
12721
12619
  // src/components/Tag/Tag.tsx
12722
- var import_react71 = require("react");
12620
+ var import_react70 = require("react");
12723
12621
  var import_styled_components89 = __toESM(require("styled-components"));
12724
12622
  var import_type_guards52 = require("@wistia/type-guards");
12725
- var import_jsx_runtime271 = require("react/jsx-runtime");
12623
+ var import_jsx_runtime270 = require("react/jsx-runtime");
12726
12624
  var TagLabel = import_styled_components89.default.a`
12727
12625
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
12728
12626
  font-size: var(--wui-typography-label-4-size);
@@ -12814,40 +12712,40 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
12814
12712
  "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
12815
12713
  );
12816
12714
  }
12817
- return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(import_jsx_runtime271.Fragment, { children: [
12818
- /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(TagDivider, { $colorScheme: colorScheme }),
12819
- /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
12715
+ return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(import_jsx_runtime270.Fragment, { children: [
12716
+ /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(TagDivider, { $colorScheme: colorScheme }),
12717
+ /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
12820
12718
  StyledRemoveButton,
12821
12719
  {
12822
12720
  $colorScheme: colorScheme,
12823
12721
  onClick: onClickRemove,
12824
12722
  type: "button",
12825
12723
  children: [
12826
- /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
12724
+ /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
12827
12725
  Icon,
12828
12726
  {
12829
12727
  size: "sm",
12830
12728
  type: "close"
12831
12729
  }
12832
12730
  ),
12833
- /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
12731
+ /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
12834
12732
  ]
12835
12733
  }
12836
12734
  )
12837
12735
  ] });
12838
12736
  };
12839
- var Tag = (0, import_react71.forwardRef)(
12737
+ var Tag = (0, import_react70.forwardRef)(
12840
12738
  ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
12841
12739
  const hasIcon = (0, import_type_guards52.isNotNil)(icon);
12842
12740
  const labelProps = (0, import_type_guards52.isNotNil)(href) && (0, import_type_guards52.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
12843
- return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
12741
+ return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
12844
12742
  StyledTag,
12845
12743
  {
12846
12744
  ref,
12847
12745
  $colorScheme: colorScheme,
12848
12746
  ...props,
12849
12747
  children: [
12850
- /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
12748
+ /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
12851
12749
  TagLabel,
12852
12750
  {
12853
12751
  ...labelProps,
@@ -12858,7 +12756,7 @@ var Tag = (0, import_react71.forwardRef)(
12858
12756
  ]
12859
12757
  }
12860
12758
  ),
12861
- /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
12759
+ /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
12862
12760
  RemoveButton,
12863
12761
  {
12864
12762
  colorScheme,
@@ -12876,7 +12774,7 @@ Tag.displayName = "Tag";
12876
12774
  // src/components/Thumbnail/ThumbnailBadge.tsx
12877
12775
  var import_styled_components90 = __toESM(require("styled-components"));
12878
12776
  var import_type_guards53 = require("@wistia/type-guards");
12879
- var import_jsx_runtime272 = require("react/jsx-runtime");
12777
+ var import_jsx_runtime271 = require("react/jsx-runtime");
12880
12778
  var StyledThumbnailBadge = import_styled_components90.default.div`
12881
12779
  align-items: center;
12882
12780
  background-color: rgb(0 0 0 / 50%);
@@ -12902,15 +12800,15 @@ var StyledThumbnailBadge = import_styled_components90.default.div`
12902
12800
  }
12903
12801
  `;
12904
12802
  var ThumbnailBadge = ({ icon, label, ...props }) => {
12905
- return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(StyledThumbnailBadge, { ...props, children: [
12803
+ return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(StyledThumbnailBadge, { ...props, children: [
12906
12804
  (0, import_type_guards53.isNotNil)(icon) && icon,
12907
- /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("span", { children: label })
12805
+ /* @__PURE__ */ (0, import_jsx_runtime271.jsx)("span", { children: label })
12908
12806
  ] });
12909
12807
  };
12910
12808
  ThumbnailBadge.displayName = "ThumbnailBadge";
12911
12809
 
12912
12810
  // src/components/Thumbnail/Thumbnail.tsx
12913
- var import_react72 = require("react");
12811
+ var import_react71 = require("react");
12914
12812
  var import_styled_components92 = __toESM(require("styled-components"));
12915
12813
  var import_type_guards55 = require("@wistia/type-guards");
12916
12814
 
@@ -13047,7 +12945,7 @@ var getBackgroundGradient = (gradientName = void 0) => {
13047
12945
  };
13048
12946
 
13049
12947
  // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
13050
- var import_jsx_runtime273 = require("react/jsx-runtime");
12948
+ var import_jsx_runtime272 = require("react/jsx-runtime");
13051
12949
  var getScaledDimensions = (originalAspectRatio, targetAspectRatio, viewerWidth, viewerHeight) => {
13052
12950
  let scaledHeight = viewerHeight;
13053
12951
  let scaledWidth = viewerWidth;
@@ -13140,18 +13038,18 @@ var ThumbnailStoryboardViewer = ({
13140
13038
  backgroundPosition,
13141
13039
  backgroundSize
13142
13040
  };
13143
- return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
13041
+ return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
13144
13042
  "div",
13145
13043
  {
13146
13044
  ...props,
13147
13045
  style: viewerStyles,
13148
- children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)("div", { style: storyboardStyles })
13046
+ children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("div", { style: storyboardStyles })
13149
13047
  }
13150
13048
  );
13151
13049
  };
13152
13050
 
13153
13051
  // src/components/Thumbnail/Thumbnail.tsx
13154
- var import_jsx_runtime274 = require("react/jsx-runtime");
13052
+ var import_jsx_runtime273 = require("react/jsx-runtime");
13155
13053
  var WideThumbnailImage = import_styled_components92.default.img`
13156
13054
  height: 100%;
13157
13055
  object-fit: cover;
@@ -13164,7 +13062,7 @@ var SquareThumbnailImage = import_styled_components92.default.img`
13164
13062
  `;
13165
13063
  var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
13166
13064
  if (thumbnailImageType === "wide") {
13167
- return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
13065
+ return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
13168
13066
  WideThumbnailImage,
13169
13067
  {
13170
13068
  alt: "",
@@ -13173,7 +13071,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
13173
13071
  }
13174
13072
  );
13175
13073
  }
13176
- return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
13074
+ return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
13177
13075
  SquareThumbnailImage,
13178
13076
  {
13179
13077
  alt: "",
@@ -13211,7 +13109,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
13211
13109
  left: relativeLeft
13212
13110
  };
13213
13111
  };
13214
- var Thumbnail = (0, import_react72.forwardRef)(
13112
+ var Thumbnail = (0, import_react71.forwardRef)(
13215
13113
  ({
13216
13114
  gradientBackground = "defaultMidOne",
13217
13115
  thumbnailImageType = "square",
@@ -13222,16 +13120,16 @@ var Thumbnail = (0, import_react72.forwardRef)(
13222
13120
  height,
13223
13121
  ...props
13224
13122
  }, ref) => {
13225
- const [percent, setPercent] = (0, import_react72.useState)(0);
13226
- const [isMouseOver, setIsMouseOver] = (0, import_react72.useState)(false);
13227
- const [isStoryboardReady, setIsStoryboardReady] = (0, import_react72.useState)(false);
13228
- const storyboardElementRef = (0, import_react72.useRef)(null);
13229
- const backgroundUrl = (0, import_react72.useMemo)(
13123
+ const [percent, setPercent] = (0, import_react71.useState)(0);
13124
+ const [isMouseOver, setIsMouseOver] = (0, import_react71.useState)(false);
13125
+ const [isStoryboardReady, setIsStoryboardReady] = (0, import_react71.useState)(false);
13126
+ const storyboardElementRef = (0, import_react71.useRef)(null);
13127
+ const backgroundUrl = (0, import_react71.useMemo)(
13230
13128
  () => thumbnailImageType === "square" && (0, import_type_guards55.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
13231
13129
  [thumbnailImageType, thumbnailUrl]
13232
13130
  );
13233
13131
  const isScrubbable = (0, import_type_guards55.isNotNil)(storyboard);
13234
- const trackStoryboardLoadStatus = (0, import_react72.useCallback)(() => {
13132
+ const trackStoryboardLoadStatus = (0, import_react71.useCallback)(() => {
13235
13133
  if (storyboardElementRef.current || !storyboard) {
13236
13134
  return storyboardElementRef.current;
13237
13135
  }
@@ -13241,7 +13139,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
13241
13139
  storyboardElementRef.current = asset;
13242
13140
  return storyboardElementRef.current;
13243
13141
  }, [storyboard]);
13244
- const handleMouseMove = (0, import_react72.useCallback)(
13142
+ const handleMouseMove = (0, import_react71.useCallback)(
13245
13143
  (mouseEvent) => {
13246
13144
  if (!isScrubbable) return;
13247
13145
  const elem = mouseEvent.currentTarget;
@@ -13253,14 +13151,14 @@ var Thumbnail = (0, import_react72.forwardRef)(
13253
13151
  },
13254
13152
  [isScrubbable, trackStoryboardLoadStatus]
13255
13153
  );
13256
- const handleMouseOut = (0, import_react72.useCallback)(() => {
13154
+ const handleMouseOut = (0, import_react71.useCallback)(() => {
13257
13155
  if (!isScrubbable) return;
13258
13156
  setIsMouseOver(false);
13259
13157
  }, [isScrubbable]);
13260
- const shouldRenderStoryboard = (0, import_react72.useMemo)(() => {
13158
+ const shouldRenderStoryboard = (0, import_react71.useMemo)(() => {
13261
13159
  return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
13262
13160
  }, [isScrubbable, isMouseOver, isStoryboardReady]);
13263
- const renderStoryboard = (0, import_react72.useCallback)(() => {
13161
+ const renderStoryboard = (0, import_react71.useCallback)(() => {
13264
13162
  if (!storyboard || (0, import_type_guards55.isUndefined)(height) || (0, import_type_guards55.isEmptyString)(height)) return null;
13265
13163
  const {
13266
13164
  url,
@@ -13272,7 +13170,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
13272
13170
  aspectRatio
13273
13171
  } = storyboard;
13274
13172
  const targetWidth = (0, import_type_guards55.isString)(width) ? parseInt(width, 10) : Number(width);
13275
- return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
13173
+ return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
13276
13174
  ThumbnailStoryboardViewer,
13277
13175
  {
13278
13176
  frameCount,
@@ -13291,7 +13189,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
13291
13189
  if (shouldRenderStoryboard) {
13292
13190
  thumbnailContent = renderStoryboard();
13293
13191
  } else if ((0, import_type_guards55.isNotNil)(thumbnailUrl)) {
13294
- thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
13192
+ thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
13295
13193
  ThumbnailImage,
13296
13194
  {
13297
13195
  thumbnailImageType,
@@ -13301,7 +13199,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
13301
13199
  } else {
13302
13200
  thumbnailContent = null;
13303
13201
  }
13304
- return /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(
13202
+ return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(
13305
13203
  StyledThumbnail,
13306
13204
  {
13307
13205
  ref,
@@ -13325,10 +13223,10 @@ var Thumbnail = (0, import_react72.forwardRef)(
13325
13223
  Thumbnail.displayName = "Thumbnail";
13326
13224
 
13327
13225
  // src/components/ThumbnailCollage/ThumbnailCollage.tsx
13328
- var import_react73 = __toESM(require("react"));
13226
+ var import_react72 = __toESM(require("react"));
13329
13227
  var import_styled_components93 = __toESM(require("styled-components"));
13330
13228
  var import_type_guards56 = require("@wistia/type-guards");
13331
- var import_jsx_runtime275 = (
13229
+ var import_jsx_runtime274 = (
13332
13230
  // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
13333
13231
  require("react/jsx-runtime")
13334
13232
  );
@@ -13405,15 +13303,15 @@ var ThumbnailCollage = ({
13405
13303
  gradientBackground = "defaultMidOne",
13406
13304
  ...props
13407
13305
  }) => {
13408
- const thumbnailArray = import_react73.default.Children.toArray(children);
13306
+ const thumbnailArray = import_react72.default.Children.toArray(children);
13409
13307
  const truncatedThumbnails = thumbnailArray.slice(0, 3);
13410
13308
  const thumbnails = (0, import_type_guards56.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
13411
- return import_react73.default.cloneElement(child, {
13309
+ return import_react72.default.cloneElement(child, {
13412
13310
  ...child.props,
13413
13311
  children: void 0
13414
13312
  });
13415
13313
  }) : [
13416
- /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
13314
+ /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
13417
13315
  Thumbnail,
13418
13316
  {
13419
13317
  gradientBackground,
@@ -13422,7 +13320,7 @@ var ThumbnailCollage = ({
13422
13320
  "fallback"
13423
13321
  )
13424
13322
  ];
13425
- return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
13323
+ return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
13426
13324
  StyledThumbnailCollage,
13427
13325
  {
13428
13326
  $gradientBackground: gradientBackground,
@@ -13436,24 +13334,24 @@ var ThumbnailCollage = ({
13436
13334
  // src/components/WistiaLogo/WistiaLogo.tsx
13437
13335
  var import_styled_components94 = __toESM(require("styled-components"));
13438
13336
  var import_type_guards57 = require("@wistia/type-guards");
13439
- var import_jsx_runtime276 = require("react/jsx-runtime");
13337
+ var import_jsx_runtime275 = require("react/jsx-runtime");
13440
13338
  var renderBrandmark = (brandmarkColor, iconOnly) => {
13441
13339
  if (iconOnly) {
13442
- return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(
13340
+ return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
13443
13341
  "g",
13444
13342
  {
13445
13343
  "data-testid": "ui-wistia-logo-brandmark",
13446
13344
  fill: brandmarkColor,
13447
- children: /* @__PURE__ */ (0, import_jsx_runtime276.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" })
13345
+ children: /* @__PURE__ */ (0, import_jsx_runtime275.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" })
13448
13346
  }
13449
13347
  );
13450
13348
  }
13451
- return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(
13349
+ return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
13452
13350
  "g",
13453
13351
  {
13454
13352
  "data-testid": "ui-wistia-logo-brandmark",
13455
13353
  fill: brandmarkColor,
13456
- children: /* @__PURE__ */ (0, import_jsx_runtime276.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" })
13354
+ children: /* @__PURE__ */ (0, import_jsx_runtime275.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" })
13457
13355
  }
13458
13356
  );
13459
13357
  };
@@ -13461,12 +13359,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
13461
13359
  if (iconOnly) {
13462
13360
  return null;
13463
13361
  }
13464
- return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(
13362
+ return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
13465
13363
  "g",
13466
13364
  {
13467
13365
  "data-testid": "ui-wistia-logo-logotype",
13468
13366
  fill: logotypeColor,
13469
- children: /* @__PURE__ */ (0, import_jsx_runtime276.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" })
13367
+ children: /* @__PURE__ */ (0, import_jsx_runtime275.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" })
13470
13368
  }
13471
13369
  );
13472
13370
  };
@@ -13534,7 +13432,7 @@ var WistiaLogo = ({
13534
13432
  };
13535
13433
  const brandmarkColor = VARIANT_COLORS[variant].brandmark;
13536
13434
  const logotypeColor = VARIANT_COLORS[variant].logotype;
13537
- const Logo = /* @__PURE__ */ (0, import_jsx_runtime276.jsxs)(
13435
+ const Logo = /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(
13538
13436
  WistiaLogoComponent,
13539
13437
  {
13540
13438
  $hoverColor: hoverColor,
@@ -13547,14 +13445,14 @@ var WistiaLogo = ({
13547
13445
  xmlns: "http://www.w3.org/2000/svg",
13548
13446
  ...props,
13549
13447
  children: [
13550
- /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("title", { children: title }),
13551
- (0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("desc", { children: description }) : null,
13448
+ /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("title", { children: title }),
13449
+ (0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("desc", { children: description }) : null,
13552
13450
  renderBrandmark(brandmarkColor, iconOnly),
13553
13451
  renderLogotype(logotypeColor, iconOnly)
13554
13452
  ]
13555
13453
  }
13556
13454
  );
13557
- return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("a", { href, children: Logo }) : Logo;
13455
+ return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("a", { href, children: Logo }) : Logo;
13558
13456
  };
13559
13457
  WistiaLogo.displayName = "WistiaLogo";
13560
13458
 
@@ -13565,7 +13463,7 @@ var import_styled_components96 = __toESM(require("styled-components"));
13565
13463
  // src/components/List/ListItem.tsx
13566
13464
  var import_styled_components95 = __toESM(require("styled-components"));
13567
13465
  var import_type_guards58 = require("@wistia/type-guards");
13568
- var import_jsx_runtime277 = require("react/jsx-runtime");
13466
+ var import_jsx_runtime276 = require("react/jsx-runtime");
13569
13467
  var ListItemComponent = import_styled_components95.default.li`
13570
13468
  margin-bottom: var(--wui-space-02);
13571
13469
  `;
@@ -13573,12 +13471,12 @@ var ListItem = ({ children }) => {
13573
13471
  if ((0, import_type_guards58.isNil)(children)) {
13574
13472
  return null;
13575
13473
  }
13576
- return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(ListItemComponent, { children });
13474
+ return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(ListItemComponent, { children });
13577
13475
  };
13578
13476
  ListItem.displayName = "ListItem";
13579
13477
 
13580
13478
  // src/components/List/List.tsx
13581
- var import_jsx_runtime278 = require("react/jsx-runtime");
13479
+ var import_jsx_runtime277 = require("react/jsx-runtime");
13582
13480
  var spacesStyle = import_styled_components96.css`
13583
13481
  overflow: hidden;
13584
13482
  padding-left: 0;
@@ -13664,7 +13562,7 @@ var ListComponent = import_styled_components96.default.ul`
13664
13562
  `;
13665
13563
  var renderListComponent = (listItems, variant, { ...otherProps }) => {
13666
13564
  const elementType = variant === "ordered" ? "ol" : "ul";
13667
- return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
13565
+ return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
13668
13566
  ListComponent,
13669
13567
  {
13670
13568
  as: elementType,
@@ -13681,7 +13579,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
13681
13579
  const nextItem = listItems[i + 1];
13682
13580
  const key = `item-${itemCount += 1}`;
13683
13581
  if (Array.isArray(nextItem)) {
13684
- return /* @__PURE__ */ (0, import_jsx_runtime278.jsxs)(ListItem, { children: [
13582
+ return /* @__PURE__ */ (0, import_jsx_runtime277.jsxs)(ListItem, { children: [
13685
13583
  item,
13686
13584
  renderListFromArray(nextItem, variant, otherProps)
13687
13585
  ] }, key);
@@ -13689,7 +13587,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
13689
13587
  if (Array.isArray(item)) {
13690
13588
  return null;
13691
13589
  }
13692
- return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(ListItem, { children: item }, key);
13590
+ return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(ListItem, { children: item }, key);
13693
13591
  });
13694
13592
  return renderListComponent(items, variant, otherProps);
13695
13593
  };
@@ -13744,8 +13642,6 @@ List.displayName = "List";
13744
13642
  FileAmountLimitValidator,
13745
13643
  FileSizeValidator,
13746
13644
  FileTypeValidator,
13747
- FilterMenu,
13748
- FilterMenuItem,
13749
13645
  Form,
13750
13646
  FormErrorSummary,
13751
13647
  FormField,