@wistia/ui 0.15.14-beta.50e89a95.396fb5b → 0.15.14-beta.6458a247.692f16f
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 +73 -82
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +1 -9
- package/dist/index.d.ts +1 -9
- package/dist/index.mjs +54 -63
- 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.15.14-beta.
|
|
3
|
+
* @license @wistia/ui v0.15.14-beta.6458a247.692f16f
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -1011,7 +1011,7 @@ var import_styled_components4 = require("styled-components");
|
|
|
1011
1011
|
|
|
1012
1012
|
// src/css/designTokens/colorSchemes.tsx
|
|
1013
1013
|
var import_styled_components3 = require("styled-components");
|
|
1014
|
-
var
|
|
1014
|
+
var standardColorScheme = import_styled_components3.css`
|
|
1015
1015
|
--wui-color-base-1: var(--wui-gray-1);
|
|
1016
1016
|
--wui-color-base-2: var(--wui-gray-2);
|
|
1017
1017
|
--wui-color-base-3: var(--wui-gray-3);
|
|
@@ -1533,7 +1533,7 @@ var baseAliasTokens = import_styled_components4.css`
|
|
|
1533
1533
|
`;
|
|
1534
1534
|
var colorAliasTokens = import_styled_components4.css`
|
|
1535
1535
|
--wui-color-bg-app: var(--wui-app-background);
|
|
1536
|
-
${
|
|
1536
|
+
${standardColorScheme}
|
|
1537
1537
|
${baseAliasTokens}
|
|
1538
1538
|
/* --- Semantic --- */
|
|
1539
1539
|
/* Error */
|
|
@@ -3303,7 +3303,7 @@ Ellipsis.displayName = "Ellipsis_UI";
|
|
|
3303
3303
|
// src/private/helpers/getColorScheme/getColorScheme.ts
|
|
3304
3304
|
var import_styled_components16 = require("styled-components");
|
|
3305
3305
|
var colorSchemes = {
|
|
3306
|
-
|
|
3306
|
+
standard: standardColorScheme,
|
|
3307
3307
|
blue: blueColorScheme,
|
|
3308
3308
|
green: greenColorScheme,
|
|
3309
3309
|
red: redColorScheme,
|
|
@@ -8139,7 +8139,7 @@ var StyledLabel = import_styled_components23.default.span`
|
|
|
8139
8139
|
var ActionButton = (0, import_react24.forwardRef)(
|
|
8140
8140
|
({
|
|
8141
8141
|
icon,
|
|
8142
|
-
colorScheme = "
|
|
8142
|
+
colorScheme = "standard",
|
|
8143
8143
|
disabled = false,
|
|
8144
8144
|
hoverColorScheme,
|
|
8145
8145
|
variant = "default",
|
|
@@ -8254,7 +8254,7 @@ Image.displayName = "Image_UI";
|
|
|
8254
8254
|
// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
|
|
8255
8255
|
var import_styled_components25 = __toESM(require("styled-components"));
|
|
8256
8256
|
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
8257
|
-
var defaultColorSchemeOptions = ["
|
|
8257
|
+
var defaultColorSchemeOptions = ["standard", "inherit"];
|
|
8258
8258
|
var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
|
|
8259
8259
|
var brandColorSchemeOptions = [
|
|
8260
8260
|
"blue",
|
|
@@ -13347,7 +13347,7 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
|
|
|
13347
13347
|
...props,
|
|
13348
13348
|
ref,
|
|
13349
13349
|
$isGated: appearance === "gated",
|
|
13350
|
-
colorScheme: colorScheme ?? "
|
|
13350
|
+
colorScheme: colorScheme ?? "inherit",
|
|
13351
13351
|
fullWidth: true,
|
|
13352
13352
|
unstyled: true,
|
|
13353
13353
|
children: [
|
|
@@ -15524,7 +15524,7 @@ Mark.displayName = "Mark_UI";
|
|
|
15524
15524
|
var import_react80 = require("react");
|
|
15525
15525
|
var import_styled_components97 = __toESM(require("styled-components"));
|
|
15526
15526
|
var import_react_dialog5 = require("@radix-ui/react-dialog");
|
|
15527
|
-
var
|
|
15527
|
+
var import_type_guards57 = require("@wistia/type-guards");
|
|
15528
15528
|
|
|
15529
15529
|
// src/components/Modal/ModalHeader.tsx
|
|
15530
15530
|
var import_styled_components94 = __toESM(require("styled-components"));
|
|
@@ -15600,7 +15600,6 @@ var ModalHeader = ({
|
|
|
15600
15600
|
var import_react79 = require("react");
|
|
15601
15601
|
var import_styled_components95 = __toESM(require("styled-components"));
|
|
15602
15602
|
var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
15603
|
-
var import_type_guards57 = require("@wistia/type-guards");
|
|
15604
15603
|
|
|
15605
15604
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
15606
15605
|
var import_react78 = require("react");
|
|
@@ -15738,14 +15737,9 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
|
|
|
15738
15737
|
position: fixed;
|
|
15739
15738
|
top: unset;
|
|
15740
15739
|
left: unset;
|
|
15741
|
-
width: ${({ $width
|
|
15742
|
-
if ((0, import_type_guards57.isNotNil)($maxWidth)) {
|
|
15743
|
-
return "auto";
|
|
15744
|
-
}
|
|
15745
|
-
return $width ?? DEFAULT_MODAL_WIDTH;
|
|
15746
|
-
}};
|
|
15740
|
+
width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
|
|
15747
15741
|
min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
|
|
15748
|
-
max-width:
|
|
15742
|
+
max-width: var(--wui-modal-max-width);
|
|
15749
15743
|
border-radius: var(--wui-border-radius-03);
|
|
15750
15744
|
animation-duration: var(--wui-motion-duration-03);
|
|
15751
15745
|
animation-timing-function: var(--wui-motion-ease-out);
|
|
@@ -15754,13 +15748,12 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
|
|
|
15754
15748
|
}
|
|
15755
15749
|
`;
|
|
15756
15750
|
var ModalContent = (0, import_react79.forwardRef)(
|
|
15757
|
-
({ width, positionVariant = "fixed-top",
|
|
15751
|
+
({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
|
|
15758
15752
|
useFocusRestore();
|
|
15759
15753
|
return /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(
|
|
15760
15754
|
StyledModalContent,
|
|
15761
15755
|
{
|
|
15762
15756
|
ref,
|
|
15763
|
-
$maxWidth: maxWidth,
|
|
15764
15757
|
$positionVariant: positionVariant,
|
|
15765
15758
|
$width: width,
|
|
15766
15759
|
"aria-describedby": void 0,
|
|
@@ -15830,7 +15823,6 @@ var Modal = (0, import_react80.forwardRef)(
|
|
|
15830
15823
|
hideTitle = false,
|
|
15831
15824
|
initialFocusRef,
|
|
15832
15825
|
isOpen,
|
|
15833
|
-
maxWidth,
|
|
15834
15826
|
onRequestClose,
|
|
15835
15827
|
positionVariant = "centered",
|
|
15836
15828
|
title,
|
|
@@ -15841,7 +15833,7 @@ var Modal = (0, import_react80.forwardRef)(
|
|
|
15841
15833
|
import_react_dialog5.Root,
|
|
15842
15834
|
{
|
|
15843
15835
|
onOpenChange: (open2) => {
|
|
15844
|
-
if (!open2 && (0,
|
|
15836
|
+
if (!open2 && (0, import_type_guards57.isNotNil)(onRequestClose)) {
|
|
15845
15837
|
onRequestClose();
|
|
15846
15838
|
}
|
|
15847
15839
|
},
|
|
@@ -15852,9 +15844,8 @@ var Modal = (0, import_react80.forwardRef)(
|
|
|
15852
15844
|
ModalContent,
|
|
15853
15845
|
{
|
|
15854
15846
|
ref,
|
|
15855
|
-
maxWidth,
|
|
15856
15847
|
onOpenAutoFocus: (event) => {
|
|
15857
|
-
if ((0,
|
|
15848
|
+
if ((0, import_type_guards57.isNotNil)(initialFocusRef) && initialFocusRef.current) {
|
|
15858
15849
|
event.preventDefault();
|
|
15859
15850
|
requestAnimationFrame(() => {
|
|
15860
15851
|
initialFocusRef.current?.focus();
|
|
@@ -15866,7 +15857,7 @@ var Modal = (0, import_react80.forwardRef)(
|
|
|
15866
15857
|
...props,
|
|
15867
15858
|
children: [
|
|
15868
15859
|
/* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalBody, { children }) }),
|
|
15869
|
-
(0,
|
|
15860
|
+
(0, import_type_guards57.isNotNil)(footer) ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalFooter, { children: footer }) : null,
|
|
15870
15861
|
hideCloseButton && hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
|
|
15871
15862
|
ModalHeader,
|
|
15872
15863
|
{
|
|
@@ -15912,9 +15903,9 @@ var import_react_popover5 = require("@radix-ui/react-popover");
|
|
|
15912
15903
|
var import_styled_components99 = __toESM(require("styled-components"));
|
|
15913
15904
|
|
|
15914
15905
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
15915
|
-
var
|
|
15906
|
+
var import_type_guards58 = require("@wistia/type-guards");
|
|
15916
15907
|
var getControlProps = (isOpen, onOpenChange) => {
|
|
15917
|
-
return (0,
|
|
15908
|
+
return (0, import_type_guards58.isNotNil)(onOpenChange) && (0, import_type_guards58.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
|
|
15918
15909
|
};
|
|
15919
15910
|
|
|
15920
15911
|
// src/components/Popover/PopoverArrow.tsx
|
|
@@ -16070,7 +16061,7 @@ Popover.displayName = "Popover_UI";
|
|
|
16070
16061
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
16071
16062
|
var import_styled_components100 = __toESM(require("styled-components"));
|
|
16072
16063
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
16073
|
-
var
|
|
16064
|
+
var import_type_guards59 = require("@wistia/type-guards");
|
|
16074
16065
|
var import_jsx_runtime299 = require("react/jsx-runtime");
|
|
16075
16066
|
var ProgressBarWrapper = import_styled_components100.default.div`
|
|
16076
16067
|
--progress-bar-height: 8px;
|
|
@@ -16126,7 +16117,7 @@ var ProgressBar = ({
|
|
|
16126
16117
|
...props
|
|
16127
16118
|
}) => {
|
|
16128
16119
|
return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(ProgressBarWrapper, { children: [
|
|
16129
|
-
(0,
|
|
16120
|
+
(0, import_type_guards59.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
|
|
16130
16121
|
/* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
|
|
16131
16122
|
StyledProgressBar,
|
|
16132
16123
|
{
|
|
@@ -16144,13 +16135,13 @@ var ProgressBar = ({
|
|
|
16144
16135
|
)
|
|
16145
16136
|
}
|
|
16146
16137
|
),
|
|
16147
|
-
(0,
|
|
16138
|
+
(0, import_type_guards59.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelRight }) : null
|
|
16148
16139
|
] });
|
|
16149
16140
|
};
|
|
16150
16141
|
ProgressBar.displayName = "ProgressBar_UI";
|
|
16151
16142
|
|
|
16152
16143
|
// src/components/Radio/Radio.tsx
|
|
16153
|
-
var
|
|
16144
|
+
var import_type_guards60 = require("@wistia/type-guards");
|
|
16154
16145
|
var import_react81 = require("react");
|
|
16155
16146
|
var import_styled_components101 = __toESM(require("styled-components"));
|
|
16156
16147
|
var import_jsx_runtime300 = require("react/jsx-runtime");
|
|
@@ -16250,14 +16241,14 @@ var Radio = (0, import_react81.forwardRef)(
|
|
|
16250
16241
|
...props
|
|
16251
16242
|
}, ref) => {
|
|
16252
16243
|
const generatedId = (0, import_react81.useId)();
|
|
16253
|
-
const computedId = (0,
|
|
16244
|
+
const computedId = (0, import_type_guards60.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
16254
16245
|
const radioGroupContext = useRadioGroup();
|
|
16255
16246
|
const contextName = radioGroupContext?.name;
|
|
16256
16247
|
const contextOnChange = radioGroupContext?.onChange;
|
|
16257
16248
|
const contextValue = radioGroupContext?.value;
|
|
16258
16249
|
const radioName = name ?? contextName;
|
|
16259
16250
|
const handleOnChange = onChange ?? contextOnChange;
|
|
16260
|
-
const isChecked = (0,
|
|
16251
|
+
const isChecked = (0, import_type_guards60.isNotUndefined)(value) && (0, import_type_guards60.isNotUndefined)(contextValue) ? contextValue === value : checked;
|
|
16261
16252
|
return /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(
|
|
16262
16253
|
StyledRadioWrapper,
|
|
16263
16254
|
{
|
|
@@ -16304,7 +16295,7 @@ var import_react83 = require("react");
|
|
|
16304
16295
|
// src/components/RadioCard/RadioCardRoot.tsx
|
|
16305
16296
|
var import_react82 = require("react");
|
|
16306
16297
|
var import_styled_components102 = __toESM(require("styled-components"));
|
|
16307
|
-
var
|
|
16298
|
+
var import_type_guards61 = require("@wistia/type-guards");
|
|
16308
16299
|
var import_jsx_runtime301 = require("react/jsx-runtime");
|
|
16309
16300
|
var checkedStyles = import_styled_components102.css`
|
|
16310
16301
|
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
@@ -16426,14 +16417,14 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
|
|
|
16426
16417
|
...props
|
|
16427
16418
|
}, ref) => {
|
|
16428
16419
|
const generatedId = (0, import_react82.useId)();
|
|
16429
|
-
const computedId = (0,
|
|
16420
|
+
const computedId = (0, import_type_guards61.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
16430
16421
|
const radioGroupContext = useRadioGroup();
|
|
16431
16422
|
const contextName = radioGroupContext?.name;
|
|
16432
16423
|
const contextOnChange = radioGroupContext?.onChange;
|
|
16433
16424
|
const contextValue = radioGroupContext?.value;
|
|
16434
16425
|
const radioName = name ?? contextName;
|
|
16435
16426
|
const handleOnChange = onChange ?? contextOnChange;
|
|
16436
|
-
const isChecked = (0,
|
|
16427
|
+
const isChecked = (0, import_type_guards61.isNotUndefined)(value) && (0, import_type_guards61.isNotUndefined)(contextValue) ? contextValue === value : checked;
|
|
16437
16428
|
return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
|
|
16438
16429
|
StyledCard2,
|
|
16439
16430
|
{
|
|
@@ -16465,7 +16456,7 @@ RadioCardRoot.displayName = "RadioCardRoot_UI";
|
|
|
16465
16456
|
|
|
16466
16457
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
16467
16458
|
var import_styled_components104 = __toESM(require("styled-components"));
|
|
16468
|
-
var
|
|
16459
|
+
var import_type_guards62 = require("@wistia/type-guards");
|
|
16469
16460
|
|
|
16470
16461
|
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
16471
16462
|
var import_styled_components103 = __toESM(require("styled-components"));
|
|
@@ -16539,17 +16530,17 @@ var RadioCardDefaultLayout = ({
|
|
|
16539
16530
|
showIndicator = true
|
|
16540
16531
|
}) => {
|
|
16541
16532
|
return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(StyledCardContent, { children: [
|
|
16542
|
-
showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledIndicatorContainer, { $hasIcon: (0,
|
|
16533
|
+
showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledIndicatorContainer, { $hasIcon: (0, import_type_guards62.isNotNil)(icon), children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
|
|
16543
16534
|
/* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(Stack, { gap: "space-02", children: [
|
|
16544
|
-
(0,
|
|
16535
|
+
(0, import_type_guards62.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
|
|
16545
16536
|
/* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
|
|
16546
16537
|
Stack,
|
|
16547
16538
|
{
|
|
16548
16539
|
gap: "space-01",
|
|
16549
|
-
style: (0,
|
|
16540
|
+
style: (0, import_type_guards62.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
|
|
16550
16541
|
children: [
|
|
16551
|
-
(0,
|
|
16552
|
-
(0,
|
|
16542
|
+
(0, import_type_guards62.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("strong", { children: label }) }),
|
|
16543
|
+
(0, import_type_guards62.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
|
|
16553
16544
|
Text,
|
|
16554
16545
|
{
|
|
16555
16546
|
prominence: "secondary",
|
|
@@ -16732,7 +16723,7 @@ ScrollArea.displayName = "ScrollArea_UI";
|
|
|
16732
16723
|
var import_react88 = require("react");
|
|
16733
16724
|
var import_styled_components108 = __toESM(require("styled-components"));
|
|
16734
16725
|
var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
|
|
16735
|
-
var
|
|
16726
|
+
var import_type_guards64 = require("@wistia/type-guards");
|
|
16736
16727
|
|
|
16737
16728
|
// src/components/SegmentedControl/useSelectedItemStyle.tsx
|
|
16738
16729
|
var import_react86 = require("react");
|
|
@@ -16769,7 +16760,7 @@ var useSelectedItemStyle = () => {
|
|
|
16769
16760
|
|
|
16770
16761
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
16771
16762
|
var import_styled_components107 = __toESM(require("styled-components"));
|
|
16772
|
-
var
|
|
16763
|
+
var import_type_guards63 = require("@wistia/type-guards");
|
|
16773
16764
|
|
|
16774
16765
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
16775
16766
|
var import_react87 = require("react");
|
|
@@ -16803,7 +16794,7 @@ var SelectedItemIndicatorDiv = import_styled_components107.default.div`
|
|
|
16803
16794
|
var SelectedItemIndicator = () => {
|
|
16804
16795
|
const selectedValue = useSegmentedControlValue();
|
|
16805
16796
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
16806
|
-
if (!selectedValue || (0,
|
|
16797
|
+
if (!selectedValue || (0, import_type_guards63.isUndefined)(selectedItemIndicatorStyle)) {
|
|
16807
16798
|
return null;
|
|
16808
16799
|
}
|
|
16809
16800
|
return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
|
|
@@ -16840,7 +16831,7 @@ var SegmentedControl = (0, import_react88.forwardRef)(
|
|
|
16840
16831
|
onSelectedValueChange,
|
|
16841
16832
|
...props
|
|
16842
16833
|
}, ref) => {
|
|
16843
|
-
if ((0,
|
|
16834
|
+
if ((0, import_type_guards64.isNil)(children)) {
|
|
16844
16835
|
return null;
|
|
16845
16836
|
}
|
|
16846
16837
|
return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
|
|
@@ -16869,7 +16860,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
|
|
|
16869
16860
|
var import_react89 = require("react");
|
|
16870
16861
|
var import_styled_components109 = __toESM(require("styled-components"));
|
|
16871
16862
|
var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
|
|
16872
|
-
var
|
|
16863
|
+
var import_type_guards65 = require("@wistia/type-guards");
|
|
16873
16864
|
var import_jsx_runtime309 = require("react/jsx-runtime");
|
|
16874
16865
|
var segmentedControlItemStyles = import_styled_components109.css`
|
|
16875
16866
|
all: unset; /* ToggleGroupItem is a button element */
|
|
@@ -16985,8 +16976,8 @@ var SegmentedControlItem = (0, import_react89.forwardRef)(
|
|
|
16985
16976
|
{
|
|
16986
16977
|
ref: combinedRef,
|
|
16987
16978
|
...otherProps,
|
|
16988
|
-
$hasLabel: (0,
|
|
16989
|
-
"aria-label": (0,
|
|
16979
|
+
$hasLabel: (0, import_type_guards65.isNotNil)(label),
|
|
16980
|
+
"aria-label": (0, import_type_guards65.isNotNil)(label) ? void 0 : ariaLabel,
|
|
16990
16981
|
disabled,
|
|
16991
16982
|
onClick: handleClick,
|
|
16992
16983
|
value,
|
|
@@ -17151,7 +17142,7 @@ Select.displayName = "Select_UI";
|
|
|
17151
17142
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
17152
17143
|
var import_react91 = require("react");
|
|
17153
17144
|
var import_styled_components111 = __toESM(require("styled-components"));
|
|
17154
|
-
var
|
|
17145
|
+
var import_type_guards66 = require("@wistia/type-guards");
|
|
17155
17146
|
var import_jsx_runtime311 = require("react/jsx-runtime");
|
|
17156
17147
|
var StyledItem = (0, import_styled_components111.default)(import_react_select2.Item)`
|
|
17157
17148
|
${getTypographicStyles("label3")}
|
|
@@ -17188,7 +17179,7 @@ var SelectOption = (0, import_react91.forwardRef)(
|
|
|
17188
17179
|
ref: forwardedRef,
|
|
17189
17180
|
$checkmarkVerticalAlign: checkmarkVerticalAlign,
|
|
17190
17181
|
children: [
|
|
17191
|
-
(0,
|
|
17182
|
+
(0, import_type_guards66.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { children: [
|
|
17192
17183
|
children,
|
|
17193
17184
|
/* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
17194
17185
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(import_react_select2.ItemText, { children }),
|
|
@@ -17230,7 +17221,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
17230
17221
|
// src/components/Slider/Slider.tsx
|
|
17231
17222
|
var import_react_slider2 = require("@radix-ui/react-slider");
|
|
17232
17223
|
var import_styled_components113 = __toESM(require("styled-components"));
|
|
17233
|
-
var
|
|
17224
|
+
var import_type_guards67 = require("@wistia/type-guards");
|
|
17234
17225
|
var import_jsx_runtime313 = require("react/jsx-runtime");
|
|
17235
17226
|
var SliderContainer = import_styled_components113.default.div`
|
|
17236
17227
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
@@ -17309,7 +17300,7 @@ var Slider = ({
|
|
|
17309
17300
|
"data-testid": dataTestId = "ui-slider",
|
|
17310
17301
|
...otherProps
|
|
17311
17302
|
}) => {
|
|
17312
|
-
if (!((0,
|
|
17303
|
+
if (!((0, import_type_guards67.isNonEmptyString)(ariaLabel) || (0, import_type_guards67.isNonEmptyString)(ariaLabelledby))) {
|
|
17313
17304
|
throw new Error(
|
|
17314
17305
|
"UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
|
|
17315
17306
|
);
|
|
@@ -17471,7 +17462,7 @@ var TableRow = ({ children, ...props }) => {
|
|
|
17471
17462
|
// src/components/Tabs/Tabs.tsx
|
|
17472
17463
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
17473
17464
|
var import_react98 = require("react");
|
|
17474
|
-
var
|
|
17465
|
+
var import_type_guards68 = require("@wistia/type-guards");
|
|
17475
17466
|
|
|
17476
17467
|
// src/components/Tabs/useTabsValue.tsx
|
|
17477
17468
|
var import_react97 = require("react");
|
|
@@ -17508,10 +17499,10 @@ var Tabs = ({
|
|
|
17508
17499
|
...props,
|
|
17509
17500
|
onValueChange
|
|
17510
17501
|
};
|
|
17511
|
-
if ((0,
|
|
17502
|
+
if ((0, import_type_guards68.isNotNil)(value)) {
|
|
17512
17503
|
rootProps.value = value;
|
|
17513
17504
|
}
|
|
17514
|
-
if ((0,
|
|
17505
|
+
if ((0, import_type_guards68.isNotNil)(defaultValue)) {
|
|
17515
17506
|
rootProps.defaultValue = defaultValue;
|
|
17516
17507
|
}
|
|
17517
17508
|
return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(SelectedItemStyleProvider, { children }) }) });
|
|
@@ -17531,7 +17522,7 @@ var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
|
17531
17522
|
var import_styled_components121 = __toESM(require("styled-components"));
|
|
17532
17523
|
|
|
17533
17524
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
17534
|
-
var
|
|
17525
|
+
var import_type_guards69 = require("@wistia/type-guards");
|
|
17535
17526
|
|
|
17536
17527
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
17537
17528
|
var import_styled_components120 = __toESM(require("styled-components"));
|
|
@@ -17546,7 +17537,7 @@ var import_jsx_runtime322 = require("react/jsx-runtime");
|
|
|
17546
17537
|
var SelectedTabIndicator = () => {
|
|
17547
17538
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
17548
17539
|
const selectedValue = useTabsValue();
|
|
17549
|
-
if (selectedValue == null || (0,
|
|
17540
|
+
if (selectedValue == null || (0, import_type_guards69.isUndefined)(selectedItemIndicatorStyle)) {
|
|
17550
17541
|
return null;
|
|
17551
17542
|
}
|
|
17552
17543
|
return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
|
|
@@ -17580,7 +17571,7 @@ TabsList.displayName = "TabsList_UI";
|
|
|
17580
17571
|
|
|
17581
17572
|
// src/components/Tabs/TabsTrigger.tsx
|
|
17582
17573
|
var import_react99 = require("react");
|
|
17583
|
-
var
|
|
17574
|
+
var import_type_guards70 = require("@wistia/type-guards");
|
|
17584
17575
|
|
|
17585
17576
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
17586
17577
|
var import_styled_components122 = __toESM(require("styled-components"));
|
|
@@ -17631,8 +17622,8 @@ var TabsTrigger = (0, import_react99.forwardRef)(
|
|
|
17631
17622
|
{
|
|
17632
17623
|
...otherProps,
|
|
17633
17624
|
ref: combinedRef,
|
|
17634
|
-
$hasLabel: (0,
|
|
17635
|
-
"aria-label": (0,
|
|
17625
|
+
$hasLabel: (0, import_type_guards70.isNotNil)(label),
|
|
17626
|
+
"aria-label": (0, import_type_guards70.isNotNil)(label) ? void 0 : ariaLabel,
|
|
17636
17627
|
disabled,
|
|
17637
17628
|
value,
|
|
17638
17629
|
children: [
|
|
@@ -17647,7 +17638,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
|
|
|
17647
17638
|
|
|
17648
17639
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
17649
17640
|
var import_styled_components123 = __toESM(require("styled-components"));
|
|
17650
|
-
var
|
|
17641
|
+
var import_type_guards71 = require("@wistia/type-guards");
|
|
17651
17642
|
var import_jsx_runtime325 = require("react/jsx-runtime");
|
|
17652
17643
|
var StyledThumbnailBadge = import_styled_components123.default.div`
|
|
17653
17644
|
align-items: center;
|
|
@@ -17676,7 +17667,7 @@ var StyledThumbnailBadge = import_styled_components123.default.div`
|
|
|
17676
17667
|
`;
|
|
17677
17668
|
var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
17678
17669
|
return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(StyledThumbnailBadge, { ...props, children: [
|
|
17679
|
-
(0,
|
|
17670
|
+
(0, import_type_guards71.isNotNil)(icon) && icon,
|
|
17680
17671
|
/* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { children: label })
|
|
17681
17672
|
] });
|
|
17682
17673
|
};
|
|
@@ -17685,10 +17676,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
|
17685
17676
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17686
17677
|
var import_react100 = require("react");
|
|
17687
17678
|
var import_styled_components126 = __toESM(require("styled-components"));
|
|
17688
|
-
var
|
|
17679
|
+
var import_type_guards74 = require("@wistia/type-guards");
|
|
17689
17680
|
|
|
17690
17681
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
17691
|
-
var
|
|
17682
|
+
var import_type_guards72 = require("@wistia/type-guards");
|
|
17692
17683
|
var import_styled_components124 = require("styled-components");
|
|
17693
17684
|
var gradients = {
|
|
17694
17685
|
defaultDarkOne: import_styled_components124.css`
|
|
@@ -17816,12 +17807,12 @@ var gradients = {
|
|
|
17816
17807
|
};
|
|
17817
17808
|
var gradientMap = Object.keys(gradients);
|
|
17818
17809
|
var getBackgroundGradient = (gradientName = void 0) => {
|
|
17819
|
-
return (0,
|
|
17810
|
+
return (0, import_type_guards72.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
|
|
17820
17811
|
};
|
|
17821
17812
|
|
|
17822
17813
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
17823
17814
|
var import_styled_components125 = __toESM(require("styled-components"));
|
|
17824
|
-
var
|
|
17815
|
+
var import_type_guards73 = require("@wistia/type-guards");
|
|
17825
17816
|
var import_jsx_runtime326 = require("react/jsx-runtime");
|
|
17826
17817
|
var ScrubLine = import_styled_components125.default.div`
|
|
17827
17818
|
position: absolute;
|
|
@@ -17915,8 +17906,8 @@ var ThumbnailStoryboardViewer = ({
|
|
|
17915
17906
|
);
|
|
17916
17907
|
const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
|
|
17917
17908
|
const backgroundImage = `url(${storyboardUrl})`;
|
|
17918
|
-
const showScrubLine = (0,
|
|
17919
|
-
const scrubLinePosition = (0,
|
|
17909
|
+
const showScrubLine = (0, import_type_guards73.isNotNil)(cursorPosition);
|
|
17910
|
+
const scrubLinePosition = (0, import_type_guards73.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
|
|
17920
17911
|
const viewerStyles = {
|
|
17921
17912
|
position: "relative",
|
|
17922
17913
|
overflow: "hidden",
|
|
@@ -17987,10 +17978,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
17987
17978
|
);
|
|
17988
17979
|
};
|
|
17989
17980
|
var StyledThumbnail = import_styled_components126.default.div`
|
|
17990
|
-
background-image: ${({ $backgroundUrl }) => (0,
|
|
17981
|
+
background-image: ${({ $backgroundUrl }) => (0, import_type_guards74.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
17991
17982
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
17992
17983
|
// if we don't have $backgroundUrl show a gradient
|
|
17993
|
-
(0,
|
|
17984
|
+
(0, import_type_guards74.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
|
|
17994
17985
|
)};
|
|
17995
17986
|
background-position: center center;
|
|
17996
17987
|
background-size: cover;
|
|
@@ -18022,7 +18013,7 @@ var StoryboardRenderer = ({
|
|
|
18022
18013
|
frameCount,
|
|
18023
18014
|
aspectRatio
|
|
18024
18015
|
} = storyboard;
|
|
18025
|
-
const targetWidth = (0,
|
|
18016
|
+
const targetWidth = (0, import_type_guards74.isString)(width) ? parseInt(width, 10) : Number(width);
|
|
18026
18017
|
const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
|
|
18027
18018
|
return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
|
|
18028
18019
|
ThumbnailStoryboardViewer,
|
|
@@ -18066,10 +18057,10 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18066
18057
|
const storyboardElementRef = (0, import_react100.useRef)(null);
|
|
18067
18058
|
const [cursorPosition, setCursorPosition] = (0, import_react100.useState)(null);
|
|
18068
18059
|
const backgroundUrl = (0, import_react100.useMemo)(
|
|
18069
|
-
() => thumbnailImageType === "square" && (0,
|
|
18060
|
+
() => thumbnailImageType === "square" && (0, import_type_guards74.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
18070
18061
|
[thumbnailImageType, thumbnailUrl]
|
|
18071
18062
|
);
|
|
18072
|
-
const isScrubbable = (0,
|
|
18063
|
+
const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
|
|
18073
18064
|
const trackStoryboardLoadStatus = (0, import_react100.useCallback)(() => {
|
|
18074
18065
|
if (storyboardElementRef.current || !storyboard) {
|
|
18075
18066
|
return storyboardElementRef.current;
|
|
@@ -18099,7 +18090,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18099
18090
|
setCursorPosition(null);
|
|
18100
18091
|
}, [isScrubbable]);
|
|
18101
18092
|
const shouldRenderStoryboard = (0, import_react100.useMemo)(() => {
|
|
18102
|
-
if ((0,
|
|
18093
|
+
if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
|
|
18103
18094
|
return false;
|
|
18104
18095
|
}
|
|
18105
18096
|
return isScrubbable && isMouseOver && isStoryboardReady;
|
|
@@ -18116,7 +18107,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18116
18107
|
width
|
|
18117
18108
|
}
|
|
18118
18109
|
);
|
|
18119
|
-
} else if ((0,
|
|
18110
|
+
} else if ((0, import_type_guards74.isNotNil)(thumbnailUrl)) {
|
|
18120
18111
|
thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
|
|
18121
18112
|
ThumbnailImage,
|
|
18122
18113
|
{
|
|
@@ -18141,7 +18132,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18141
18132
|
onMouseOut: handleMouseOut,
|
|
18142
18133
|
role: "presentation",
|
|
18143
18134
|
children: [
|
|
18144
|
-
(0,
|
|
18135
|
+
(0, import_type_guards74.isNotNil)(children) ? children : null,
|
|
18145
18136
|
thumbnailContent
|
|
18146
18137
|
]
|
|
18147
18138
|
}
|
|
@@ -18153,7 +18144,7 @@ Thumbnail.displayName = "Thumbnail_UI";
|
|
|
18153
18144
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
18154
18145
|
var import_react101 = __toESM(require("react"));
|
|
18155
18146
|
var import_styled_components127 = __toESM(require("styled-components"));
|
|
18156
|
-
var
|
|
18147
|
+
var import_type_guards75 = require("@wistia/type-guards");
|
|
18157
18148
|
var import_jsx_runtime328 = (
|
|
18158
18149
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
18159
18150
|
require("react/jsx-runtime")
|
|
@@ -18233,7 +18224,7 @@ var ThumbnailCollage = ({
|
|
|
18233
18224
|
}) => {
|
|
18234
18225
|
const thumbnailArray = import_react101.default.Children.toArray(children);
|
|
18235
18226
|
const truncatedThumbnails = thumbnailArray.slice(0, 3);
|
|
18236
|
-
const thumbnails = (0,
|
|
18227
|
+
const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
|
|
18237
18228
|
return import_react101.default.cloneElement(child, {
|
|
18238
18229
|
...child.props,
|
|
18239
18230
|
children: void 0
|
|
@@ -18261,7 +18252,7 @@ var ThumbnailCollage = ({
|
|
|
18261
18252
|
|
|
18262
18253
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
18263
18254
|
var import_styled_components128 = __toESM(require("styled-components"));
|
|
18264
|
-
var
|
|
18255
|
+
var import_type_guards76 = require("@wistia/type-guards");
|
|
18265
18256
|
var import_jsx_runtime329 = require("react/jsx-runtime");
|
|
18266
18257
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
18267
18258
|
if (iconOnly) {
|
|
@@ -18374,7 +18365,7 @@ var WistiaLogo = ({
|
|
|
18374
18365
|
...props,
|
|
18375
18366
|
children: [
|
|
18376
18367
|
/* @__PURE__ */ (0, import_jsx_runtime329.jsx)("title", { children: title }),
|
|
18377
|
-
(0,
|
|
18368
|
+
(0, import_type_guards76.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("desc", { children: description }) : null,
|
|
18378
18369
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
18379
18370
|
renderLogotype(logotypeColor, iconOnly)
|
|
18380
18371
|
]
|
|
@@ -18386,7 +18377,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
|
|
|
18386
18377
|
|
|
18387
18378
|
// src/components/SplitButton/SplitButton.tsx
|
|
18388
18379
|
var import_styled_components129 = __toESM(require("styled-components"));
|
|
18389
|
-
var
|
|
18380
|
+
var import_type_guards77 = require("@wistia/type-guards");
|
|
18390
18381
|
var import_react102 = require("react");
|
|
18391
18382
|
var import_jsx_runtime330 = require("react/jsx-runtime");
|
|
18392
18383
|
var StyledSplitButton = import_styled_components129.default.span`
|
|
@@ -18433,7 +18424,7 @@ var SplitButton = ({
|
|
|
18433
18424
|
children
|
|
18434
18425
|
}
|
|
18435
18426
|
),
|
|
18436
|
-
(0,
|
|
18427
|
+
(0, import_type_guards77.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
|
|
18437
18428
|
Menu,
|
|
18438
18429
|
{
|
|
18439
18430
|
...menuProps,
|
|
@@ -18452,7 +18443,7 @@ var SplitButton = ({
|
|
|
18452
18443
|
children: menuItems
|
|
18453
18444
|
}
|
|
18454
18445
|
),
|
|
18455
|
-
(0,
|
|
18446
|
+
(0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
|
|
18456
18447
|
] });
|
|
18457
18448
|
};
|
|
18458
18449
|
SplitButton.displayName = "SplitButton_UI";
|