@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 +281 -385
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +5 -34
- package/dist/index.d.ts +5 -34
- package/dist/index.mjs +243 -345
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.9.1
|
|
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 = (
|
|
10440
|
-
|
|
10441
|
-
|
|
10442
|
-
|
|
10443
|
-
|
|
10444
|
-
|
|
10445
|
-
|
|
10446
|
-
|
|
10447
|
-
|
|
10448
|
-
|
|
10449
|
-
|
|
10450
|
-
|
|
10451
|
-
|
|
10452
|
-
|
|
10453
|
-
|
|
10454
|
-
|
|
10455
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
11043
|
-
return /* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
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
|
|
10953
|
+
var import_react51 = require("react");
|
|
11056
10954
|
var import_type_guards41 = require("@wistia/type-guards");
|
|
11057
10955
|
var useFocusRestore = () => {
|
|
11058
|
-
const previouslyFocusedRef = (0,
|
|
11059
|
-
(0,
|
|
10956
|
+
const previouslyFocusedRef = (0, import_react51.useRef)(null);
|
|
10957
|
+
(0, import_react51.useEffect)(() => {
|
|
11060
10958
|
previouslyFocusedRef.current = document.activeElement;
|
|
11061
10959
|
}, []);
|
|
11062
|
-
(0,
|
|
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
|
|
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,
|
|
11051
|
+
var ModalContent = (0, import_react52.forwardRef)(
|
|
11154
11052
|
({ fullHeight, width, alignHorizontal, alignVertical, children, ...props }, ref) => {
|
|
11155
11053
|
useFocusRestore();
|
|
11156
|
-
return /* @__PURE__ */ (0,
|
|
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
|
|
11071
|
+
var import_react53 = require("react");
|
|
11174
11072
|
var import_styled_components65 = __toESM(require("styled-components"));
|
|
11175
|
-
var
|
|
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,
|
|
11214
|
-
({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
11261
|
-
/* @__PURE__ */ (0,
|
|
11262
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
11281
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
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,
|
|
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,
|
|
11361
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
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,
|
|
11430
|
-
/* @__PURE__ */ (0,
|
|
11431
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
11344
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { type: "close" })
|
|
11447
11345
|
}
|
|
11448
11346
|
) }),
|
|
11449
|
-
withArrow ? /* @__PURE__ */ (0,
|
|
11450
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
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,
|
|
11516
|
-
(0, import_type_guards44.isNotNil)(labelLeft) ? /* @__PURE__ */ (0,
|
|
11517
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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
|
|
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
|
|
11542
|
-
var RadioIcon = () => /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
11577
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11680
11578
|
FormControlLabel,
|
|
11681
11579
|
{
|
|
11682
|
-
controlSlot: /* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
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
|
|
11713
|
-
var
|
|
11714
|
-
var SelectedItemStyleContext = (0,
|
|
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,
|
|
11719
|
-
const selectedItemIndicatorStyle = (0,
|
|
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,
|
|
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,
|
|
11634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
|
|
11737
11635
|
};
|
|
11738
11636
|
var useSelectedItemStyle = () => {
|
|
11739
|
-
const context = (0,
|
|
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
|
|
11751
|
-
var SegmentedControlValueContext = (0,
|
|
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,
|
|
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
|
|
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,
|
|
11679
|
+
return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
|
|
11782
11680
|
};
|
|
11783
11681
|
|
|
11784
11682
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
11785
|
-
var
|
|
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,
|
|
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,
|
|
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,
|
|
11825
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
11860
|
+
var import_react60 = require("react");
|
|
11963
11861
|
var import_styled_components74 = __toESM(require("styled-components"));
|
|
11964
|
-
var
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
12052
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
12063
|
-
/* @__PURE__ */ (0,
|
|
12064
|
-
/* @__PURE__ */ (0,
|
|
12065
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
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
|
|
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,
|
|
12005
|
+
var SelectOption = (0, import_react61.forwardRef)(
|
|
12108
12006
|
({ children, selectedDisplayValue, ...props }, forwardedRef) => {
|
|
12109
|
-
return /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
12020
|
+
(0, import_type_guards48.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)("div", { children: [
|
|
12123
12021
|
children,
|
|
12124
|
-
/* @__PURE__ */ (0,
|
|
12125
|
-
] }) : /* @__PURE__ */ (0,
|
|
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
|
|
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,
|
|
12142
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
12278
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
12191
|
+
/* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
|
|
12294
12192
|
FormControlLabel,
|
|
12295
12193
|
{
|
|
12296
|
-
controlSlot: /* @__PURE__ */ (0,
|
|
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
|
|
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,
|
|
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
|
|
12366
|
-
var TableSectionContext = (0,
|
|
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
|
|
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,
|
|
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
|
|
12274
|
+
var import_react64 = require("react");
|
|
12377
12275
|
var import_styled_components80 = __toESM(require("styled-components"));
|
|
12378
|
-
var
|
|
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,
|
|
12295
|
+
const section = (0, import_react64.useContext)(TableSectionContext);
|
|
12398
12296
|
if (section === "head") {
|
|
12399
|
-
return /* @__PURE__ */ (0,
|
|
12297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTh, { ...props, children });
|
|
12400
12298
|
}
|
|
12401
|
-
return /* @__PURE__ */ (0,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
12323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(StyledTableRow, { ...props, children });
|
|
12426
12324
|
};
|
|
12427
12325
|
|
|
12428
12326
|
// src/components/Tabs/Tabs.tsx
|
|
12429
|
-
var
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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
|
|
12491
|
-
var TabsValueContext = (0,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
12412
|
+
const buttonRef = (0, import_react66.useRef)(null);
|
|
12515
12413
|
const combinedRef = mergeRefs([buttonRef, forwardedRef]);
|
|
12516
|
-
(0,
|
|
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,
|
|
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
|
|
12458
|
+
var import_react67 = require("react");
|
|
12561
12459
|
var extractTabItems = (children) => {
|
|
12562
12460
|
const tabItems = [];
|
|
12563
|
-
|
|
12564
|
-
if (!(0,
|
|
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 ===
|
|
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
|
|
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,
|
|
12493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
|
|
12596
12494
|
};
|
|
12597
12495
|
|
|
12598
12496
|
// src/components/Tabs/Tabs.tsx
|
|
12599
|
-
var
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
12643
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
12715
|
-
var
|
|
12716
|
-
var Tab = (0,
|
|
12717
|
-
return /* @__PURE__ */ (0,
|
|
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
|
|
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
|
|
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,
|
|
12818
|
-
/* @__PURE__ */ (0,
|
|
12819
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
12731
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
12834
12732
|
]
|
|
12835
12733
|
}
|
|
12836
12734
|
)
|
|
12837
12735
|
] });
|
|
12838
12736
|
};
|
|
12839
|
-
var Tag = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
12803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(StyledThumbnailBadge, { ...props, children: [
|
|
12906
12804
|
(0, import_type_guards53.isNotNil)(icon) && icon,
|
|
12907
|
-
/* @__PURE__ */ (0,
|
|
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
|
|
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
|
|
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,
|
|
13041
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
|
|
13144
13042
|
"div",
|
|
13145
13043
|
{
|
|
13146
13044
|
...props,
|
|
13147
13045
|
style: viewerStyles,
|
|
13148
|
-
children: /* @__PURE__ */ (0,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
13226
|
-
const [isMouseOver, setIsMouseOver] = (0,
|
|
13227
|
-
const [isStoryboardReady, setIsStoryboardReady] = (0,
|
|
13228
|
-
const storyboardElementRef = (0,
|
|
13229
|
-
const backgroundUrl = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
13154
|
+
const handleMouseOut = (0, import_react71.useCallback)(() => {
|
|
13257
13155
|
if (!isScrubbable) return;
|
|
13258
13156
|
setIsMouseOver(false);
|
|
13259
13157
|
}, [isScrubbable]);
|
|
13260
|
-
const shouldRenderStoryboard = (0,
|
|
13158
|
+
const shouldRenderStoryboard = (0, import_react71.useMemo)(() => {
|
|
13261
13159
|
return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
|
|
13262
13160
|
}, [isScrubbable, isMouseOver, isStoryboardReady]);
|
|
13263
|
-
const renderStoryboard = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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
|
|
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 =
|
|
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
|
|
13309
|
+
return import_react72.default.cloneElement(child, {
|
|
13412
13310
|
...child.props,
|
|
13413
13311
|
children: void 0
|
|
13414
13312
|
});
|
|
13415
13313
|
}) : [
|
|
13416
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
13337
|
+
var import_jsx_runtime275 = require("react/jsx-runtime");
|
|
13440
13338
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
13441
13339
|
if (iconOnly) {
|
|
13442
|
-
return /* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
13551
|
-
(0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0,
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|