@wistia/ui 0.13.0-beta.90cf82ac.62d941f → 0.13.0
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 +137 -231
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +2 -34
- package/dist/index.d.ts +2 -34
- package/dist/index.mjs +90 -183
- 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.13.0
|
|
3
|
+
* @license @wistia/ui v0.13.0
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -61,7 +61,6 @@ __export(index_exports, {
|
|
|
61
61
|
ColorSchemeWrapper: () => ColorSchemeWrapper,
|
|
62
62
|
Combobox: () => Combobox2,
|
|
63
63
|
ComboboxOption: () => ComboboxOption,
|
|
64
|
-
ContextMenu: () => ContextMenu,
|
|
65
64
|
DataCard: () => DataCard,
|
|
66
65
|
DataCardTrend: () => DataCardTrend,
|
|
67
66
|
DataCards: () => DataCards,
|
|
@@ -8937,7 +8936,7 @@ Center.displayName = "Center";
|
|
|
8937
8936
|
// src/components/Checkbox/Checkbox.tsx
|
|
8938
8937
|
var import_react38 = require("react");
|
|
8939
8938
|
var import_styled_components43 = __toESM(require("styled-components"));
|
|
8940
|
-
var
|
|
8939
|
+
var import_type_guards30 = require("@wistia/type-guards");
|
|
8941
8940
|
|
|
8942
8941
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
8943
8942
|
var import_styled_components39 = __toESM(require("styled-components"));
|
|
@@ -9061,12 +9060,11 @@ FormControlLabel.displayName = "FormControlLabel";
|
|
|
9061
9060
|
|
|
9062
9061
|
// src/components/FormGroup/CheckboxGroup.tsx
|
|
9063
9062
|
var import_react37 = require("react");
|
|
9064
|
-
var
|
|
9063
|
+
var import_type_guards29 = require("@wistia/type-guards");
|
|
9065
9064
|
|
|
9066
9065
|
// src/components/FormGroup/FormGroup.tsx
|
|
9067
9066
|
var import_styled_components41 = __toESM(require("styled-components"));
|
|
9068
9067
|
var import_react35 = require("react");
|
|
9069
|
-
var import_type_guards28 = require("@wistia/type-guards");
|
|
9070
9068
|
|
|
9071
9069
|
// src/components/Stack/Stack.tsx
|
|
9072
9070
|
var import_react34 = require("react");
|
|
@@ -9104,31 +9102,12 @@ var Stack = makePolymorphic(StackComponent);
|
|
|
9104
9102
|
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
9105
9103
|
var StyledFieldset = import_styled_components41.default.fieldset`
|
|
9106
9104
|
border: 0;
|
|
9107
|
-
|
|
9108
|
-
/* * {
|
|
9109
|
-
outline: 1px solid red;
|
|
9110
|
-
} */
|
|
9111
9105
|
`;
|
|
9112
9106
|
var StyledLegend = import_styled_components41.default.legend`
|
|
9113
|
-
padding-inline: 0;
|
|
9114
|
-
display: flex;
|
|
9115
|
-
flex-direction: column;
|
|
9116
|
-
gap: var(--wui-space-01);
|
|
9117
9107
|
margin-bottom: var(--wui-space-02);
|
|
9118
|
-
|
|
9119
|
-
&:has([data-wui-form-group-description]) {
|
|
9120
|
-
margin-bottom: var(--wui-space-01);
|
|
9121
|
-
}
|
|
9122
9108
|
`;
|
|
9123
|
-
var FormGroup = ({
|
|
9124
|
-
children,
|
|
9125
|
-
label,
|
|
9126
|
-
description,
|
|
9127
|
-
...props
|
|
9128
|
-
}) => {
|
|
9109
|
+
var FormGroup = ({ children, label, ...props }) => {
|
|
9129
9110
|
const ref = (0, import_react35.useRef)(null);
|
|
9130
|
-
const hasLabel = (0, import_type_guards28.isNotNil)(label) && (0, import_type_guards28.isNonEmptyString)(label);
|
|
9131
|
-
const hasDescription = (0, import_type_guards28.isNotNil)(description) && (0, import_type_guards28.isNonEmptyString)(description);
|
|
9132
9111
|
return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
|
|
9133
9112
|
Stack,
|
|
9134
9113
|
{
|
|
@@ -9136,26 +9115,14 @@ var FormGroup = ({
|
|
|
9136
9115
|
ref,
|
|
9137
9116
|
renderAs: StyledFieldset,
|
|
9138
9117
|
children: [
|
|
9139
|
-
|
|
9118
|
+
/* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
|
|
9140
9119
|
Heading,
|
|
9141
9120
|
{
|
|
9142
9121
|
renderAs: StyledLegend,
|
|
9143
9122
|
variant: "heading5",
|
|
9144
|
-
children:
|
|
9145
|
-
hasLabel ? label : null,
|
|
9146
|
-
hasDescription ? /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
|
|
9147
|
-
Text,
|
|
9148
|
-
{
|
|
9149
|
-
"data-wui-form-group-description": true,
|
|
9150
|
-
prominence: "secondary",
|
|
9151
|
-
renderAs: "span",
|
|
9152
|
-
variant: "body4",
|
|
9153
|
-
children: description
|
|
9154
|
-
}
|
|
9155
|
-
) : null
|
|
9156
|
-
]
|
|
9123
|
+
children: label
|
|
9157
9124
|
}
|
|
9158
|
-
)
|
|
9125
|
+
),
|
|
9159
9126
|
children
|
|
9160
9127
|
]
|
|
9161
9128
|
}
|
|
@@ -9166,7 +9133,7 @@ FormGroup.displayName = "FormGroup";
|
|
|
9166
9133
|
// src/components/Form/Form.tsx
|
|
9167
9134
|
var import_react36 = require("react");
|
|
9168
9135
|
var import_styled_components42 = __toESM(require("styled-components"));
|
|
9169
|
-
var
|
|
9136
|
+
var import_type_guards28 = require("@wistia/type-guards");
|
|
9170
9137
|
|
|
9171
9138
|
// src/components/Form/serializeFormData.tsx
|
|
9172
9139
|
var ARRAY_SUFFIX = "[]";
|
|
@@ -9215,7 +9182,7 @@ var Form = (0, import_react36.forwardRef)(
|
|
|
9215
9182
|
const id = props.id ?? autoId;
|
|
9216
9183
|
const handleValidate = (nextFormData) => {
|
|
9217
9184
|
const nextData = serializeFormData(nextFormData);
|
|
9218
|
-
if ((0,
|
|
9185
|
+
if ((0, import_type_guards28.isUndefined)(validate)) {
|
|
9219
9186
|
return {};
|
|
9220
9187
|
}
|
|
9221
9188
|
return validate(nextData);
|
|
@@ -9225,7 +9192,7 @@ var Form = (0, import_react36.forwardRef)(
|
|
|
9225
9192
|
props.onBlur(event);
|
|
9226
9193
|
}
|
|
9227
9194
|
const formData = new FormData(event.currentTarget);
|
|
9228
|
-
if ((0,
|
|
9195
|
+
if ((0, import_type_guards28.isNotUndefined)(validate)) {
|
|
9229
9196
|
handleValidate(formData);
|
|
9230
9197
|
}
|
|
9231
9198
|
};
|
|
@@ -9298,7 +9265,7 @@ var CheckboxGroup = ({
|
|
|
9298
9265
|
...props
|
|
9299
9266
|
}) => {
|
|
9300
9267
|
const formState = (0, import_react37.useContext)(FormContext);
|
|
9301
|
-
const derivedValue = (0,
|
|
9268
|
+
const derivedValue = (0, import_type_guards29.isArray)(formState.values[name]) ? formState.values[name] : value;
|
|
9302
9269
|
const context = (0, import_react37.useMemo)(() => {
|
|
9303
9270
|
return {
|
|
9304
9271
|
name: `${name}[]`,
|
|
@@ -9426,21 +9393,21 @@ var Checkbox = (0, import_react38.forwardRef)(
|
|
|
9426
9393
|
...props
|
|
9427
9394
|
}, ref) => {
|
|
9428
9395
|
const generatedId = (0, import_react38.useId)();
|
|
9429
|
-
const computedId = (0,
|
|
9396
|
+
const computedId = (0, import_type_guards30.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
|
|
9430
9397
|
const checkboxGroupContext = useCheckboxGroup();
|
|
9431
9398
|
const contextName = checkboxGroupContext?.name;
|
|
9432
9399
|
const contextOnChange = checkboxGroupContext?.onChange;
|
|
9433
9400
|
const contextValue = checkboxGroupContext?.value;
|
|
9434
9401
|
const checkboxName = name ?? contextName;
|
|
9435
9402
|
const handleOnChange = onChange ?? contextOnChange;
|
|
9436
|
-
const defaultChecked = (0,
|
|
9403
|
+
const defaultChecked = (0, import_type_guards30.isNotUndefined)(value) && contextValue ? contextValue.includes(value) : void 0;
|
|
9437
9404
|
return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(StyledCheckboxWrapper, { disabled, children: [
|
|
9438
9405
|
/* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
|
|
9439
9406
|
StyledHiddenCheckboxInput,
|
|
9440
9407
|
{
|
|
9441
9408
|
...props,
|
|
9442
9409
|
ref,
|
|
9443
|
-
...(0,
|
|
9410
|
+
...(0, import_type_guards30.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked },
|
|
9444
9411
|
disabled,
|
|
9445
9412
|
id: computedId,
|
|
9446
9413
|
name: checkboxName,
|
|
@@ -9519,7 +9486,7 @@ ClickRegion.displayName = "ClickRegion";
|
|
|
9519
9486
|
|
|
9520
9487
|
// src/components/Collapsible/Collapsible.tsx
|
|
9521
9488
|
var import_react_collapsible = require("@radix-ui/react-collapsible");
|
|
9522
|
-
var
|
|
9489
|
+
var import_type_guards31 = require("@wistia/type-guards");
|
|
9523
9490
|
var import_styled_components44 = __toESM(require("styled-components"));
|
|
9524
9491
|
var import_jsx_runtime221 = require("react/jsx-runtime");
|
|
9525
9492
|
var StyledRoot = (0, import_styled_components44.default)(import_react_collapsible.Root)`
|
|
@@ -9536,7 +9503,7 @@ var Collapsible = ({
|
|
|
9536
9503
|
onOpenChange
|
|
9537
9504
|
}) => {
|
|
9538
9505
|
const controlProps = {
|
|
9539
|
-
...(0,
|
|
9506
|
+
...(0, import_type_guards31.isNotNil)(onOpenChange) && (0, import_type_guards31.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
|
|
9540
9507
|
};
|
|
9541
9508
|
return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledRoot, { ...controlProps, children });
|
|
9542
9509
|
};
|
|
@@ -9598,13 +9565,13 @@ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
|
|
|
9598
9565
|
// src/components/Collapsible/CollapsibleContent.tsx
|
|
9599
9566
|
var import_styled_components46 = __toESM(require("styled-components"));
|
|
9600
9567
|
var import_react_collapsible3 = require("@radix-ui/react-collapsible");
|
|
9601
|
-
var
|
|
9568
|
+
var import_type_guards32 = require("@wistia/type-guards");
|
|
9602
9569
|
var import_jsx_runtime224 = require("react/jsx-runtime");
|
|
9603
9570
|
var ClampedContent = import_styled_components46.default.div`
|
|
9604
9571
|
--wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
|
|
9605
9572
|
`;
|
|
9606
9573
|
var CollapsibleContent = ({ clamp, children }) => {
|
|
9607
|
-
if ((0,
|
|
9574
|
+
if ((0, import_type_guards32.isNotUndefined)(clamp)) {
|
|
9608
9575
|
return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
|
|
9609
9576
|
ClampedContent,
|
|
9610
9577
|
{
|
|
@@ -9629,7 +9596,7 @@ var import_styled_components49 = __toESM(require("styled-components"));
|
|
|
9629
9596
|
// src/components/Tag/Tag.tsx
|
|
9630
9597
|
var import_react41 = require("react");
|
|
9631
9598
|
var import_styled_components47 = __toESM(require("styled-components"));
|
|
9632
|
-
var
|
|
9599
|
+
var import_type_guards33 = require("@wistia/type-guards");
|
|
9633
9600
|
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
9634
9601
|
var TagLabel = import_styled_components47.default.a`
|
|
9635
9602
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
@@ -9714,10 +9681,10 @@ var StyledTag = import_styled_components47.default.div`
|
|
|
9714
9681
|
}
|
|
9715
9682
|
`;
|
|
9716
9683
|
var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
9717
|
-
if ((0,
|
|
9684
|
+
if ((0, import_type_guards33.isNil)(onClickRemove)) {
|
|
9718
9685
|
return null;
|
|
9719
9686
|
}
|
|
9720
|
-
if ((0,
|
|
9687
|
+
if ((0, import_type_guards33.isNil)(onClickRemoveLabel)) {
|
|
9721
9688
|
throw new Error(
|
|
9722
9689
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
9723
9690
|
);
|
|
@@ -9746,8 +9713,8 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
|
9746
9713
|
};
|
|
9747
9714
|
var Tag = (0, import_react41.forwardRef)(
|
|
9748
9715
|
({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
|
|
9749
|
-
const hasIcon = (0,
|
|
9750
|
-
const labelProps = (0,
|
|
9716
|
+
const hasIcon = (0, import_type_guards33.isNotNil)(icon);
|
|
9717
|
+
const labelProps = (0, import_type_guards33.isNotNil)(href) && (0, import_type_guards33.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
|
|
9751
9718
|
return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
|
|
9752
9719
|
StyledTag,
|
|
9753
9720
|
{
|
|
@@ -10057,7 +10024,7 @@ var Combobox2 = ({
|
|
|
10057
10024
|
// src/components/DataCards/DataCard.tsx
|
|
10058
10025
|
var import_react43 = require("react");
|
|
10059
10026
|
var import_styled_components50 = __toESM(require("styled-components"));
|
|
10060
|
-
var
|
|
10027
|
+
var import_type_guards34 = require("@wistia/type-guards");
|
|
10061
10028
|
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
10062
10029
|
var StyledDataCard = import_styled_components50.default.div`
|
|
10063
10030
|
display: grid;
|
|
@@ -10188,8 +10155,8 @@ var DataCardInner = ({
|
|
|
10188
10155
|
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledLoadingValue, {}) : value
|
|
10189
10156
|
}
|
|
10190
10157
|
),
|
|
10191
|
-
(0,
|
|
10192
|
-
(0,
|
|
10158
|
+
(0, import_type_guards34.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledSlot, { children: upperRightSlot }),
|
|
10159
|
+
(0, import_type_guards34.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledDataCardTrendContainer, { children: trend })
|
|
10193
10160
|
]
|
|
10194
10161
|
}
|
|
10195
10162
|
);
|
|
@@ -10202,7 +10169,7 @@ var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
|
|
|
10202
10169
|
);
|
|
10203
10170
|
var DataCard = (props) => {
|
|
10204
10171
|
const ref = (0, import_react43.useRef)(null);
|
|
10205
|
-
if ((0,
|
|
10172
|
+
if ((0, import_type_guards34.isNotNil)(props.href) || (0, import_type_guards34.isNotNil)(props.onClick)) {
|
|
10206
10173
|
return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
|
|
10207
10174
|
DataCardInner,
|
|
10208
10175
|
{
|
|
@@ -10212,7 +10179,7 @@ var DataCard = (props) => {
|
|
|
10212
10179
|
Button,
|
|
10213
10180
|
{
|
|
10214
10181
|
ref,
|
|
10215
|
-
...(0,
|
|
10182
|
+
...(0, import_type_guards34.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
|
|
10216
10183
|
disabled: props.disabled ?? false,
|
|
10217
10184
|
href: props.href,
|
|
10218
10185
|
onClick: props.onClick,
|
|
@@ -10495,7 +10462,7 @@ Tooltip.displayName = "Tooltip";
|
|
|
10495
10462
|
// src/components/Input/Input.tsx
|
|
10496
10463
|
var import_react44 = require("react");
|
|
10497
10464
|
var import_styled_components55 = __toESM(require("styled-components"));
|
|
10498
|
-
var
|
|
10465
|
+
var import_type_guards35 = require("@wistia/type-guards");
|
|
10499
10466
|
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
10500
10467
|
var inputStyles = import_styled_components55.css`
|
|
10501
10468
|
${inputCss}
|
|
@@ -10612,27 +10579,27 @@ var Input = (0, import_react44.forwardRef)(
|
|
|
10612
10579
|
const internalRef = (0, import_react44.useRef)();
|
|
10613
10580
|
const ref = (
|
|
10614
10581
|
// eslint-disable-next-line react-compiler/react-compiler
|
|
10615
|
-
(0,
|
|
10582
|
+
(0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
|
|
10616
10583
|
);
|
|
10617
10584
|
let leftIconToDisplay = leftIcon;
|
|
10618
|
-
if ((0,
|
|
10585
|
+
if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
|
|
10619
10586
|
leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Icon, { type: "search" });
|
|
10620
10587
|
}
|
|
10621
|
-
if ((0,
|
|
10588
|
+
if ((0, import_type_guards35.isNotNil)(leftIconToDisplay)) {
|
|
10622
10589
|
leftIconToDisplay = (0, import_react44.cloneElement)(leftIconToDisplay, {
|
|
10623
10590
|
size: "md",
|
|
10624
10591
|
className: "wui-input-left-icon"
|
|
10625
10592
|
});
|
|
10626
10593
|
}
|
|
10627
10594
|
let rightIconToDisplay = rightIcon;
|
|
10628
|
-
if ((0,
|
|
10595
|
+
if ((0, import_type_guards35.isNotNil)(rightIconToDisplay)) {
|
|
10629
10596
|
rightIconToDisplay = (0, import_react44.cloneElement)(rightIconToDisplay, {
|
|
10630
10597
|
size: "md",
|
|
10631
10598
|
className: "wui-input-right-icon"
|
|
10632
10599
|
});
|
|
10633
10600
|
}
|
|
10634
10601
|
const handleFocus2 = (event) => {
|
|
10635
|
-
if ((0,
|
|
10602
|
+
if ((0, import_type_guards35.isNotNil)(props.onFocus)) {
|
|
10636
10603
|
props.onFocus(event);
|
|
10637
10604
|
}
|
|
10638
10605
|
if (autoSelect && isValidRef(ref) && "current" in ref) {
|
|
@@ -10839,7 +10806,7 @@ var useFormState = (action, initialData = {}) => {
|
|
|
10839
10806
|
|
|
10840
10807
|
// src/components/Form/FormErrorSummary.tsx
|
|
10841
10808
|
var import_react47 = require("react");
|
|
10842
|
-
var
|
|
10809
|
+
var import_type_guards36 = require("@wistia/type-guards");
|
|
10843
10810
|
var import_jsx_runtime234 = require("react/jsx-runtime");
|
|
10844
10811
|
var ErrorItem = ({ name, error, formId }) => {
|
|
10845
10812
|
return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
|
|
@@ -10853,8 +10820,8 @@ var FormErrorSummary = ({ description }) => {
|
|
|
10853
10820
|
}
|
|
10854
10821
|
return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { ref, children: [
|
|
10855
10822
|
/* @__PURE__ */ (0, import_jsx_runtime234.jsx)("p", { children: description }),
|
|
10856
|
-
/* @__PURE__ */ (0, import_jsx_runtime234.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0,
|
|
10857
|
-
([name, error]) => (0,
|
|
10823
|
+
/* @__PURE__ */ (0, import_jsx_runtime234.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards36.isNotUndefined)(error)).map(
|
|
10824
|
+
([name, error]) => (0, import_type_guards36.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
|
|
10858
10825
|
ErrorItem,
|
|
10859
10826
|
{
|
|
10860
10827
|
error: err,
|
|
@@ -10878,7 +10845,7 @@ var FormErrorSummary = ({ description }) => {
|
|
|
10878
10845
|
// src/components/FormField/FormField.tsx
|
|
10879
10846
|
var import_react48 = require("react");
|
|
10880
10847
|
var import_styled_components58 = __toESM(require("styled-components"));
|
|
10881
|
-
var
|
|
10848
|
+
var import_type_guards37 = require("@wistia/type-guards");
|
|
10882
10849
|
|
|
10883
10850
|
// src/components/Label/Label.tsx
|
|
10884
10851
|
var import_styled_components57 = __toESM(require("styled-components"));
|
|
@@ -10981,7 +10948,7 @@ var StyledErrorList = import_styled_components58.default.ul`
|
|
|
10981
10948
|
gap: var(--wui-space-01);
|
|
10982
10949
|
`;
|
|
10983
10950
|
var ErrorMessages = ({ errors, id }) => {
|
|
10984
|
-
const isErrorArray = (0,
|
|
10951
|
+
const isErrorArray = (0, import_type_guards37.isArray)(errors);
|
|
10985
10952
|
const isMultipleErrors = isErrorArray && errors.length > 1;
|
|
10986
10953
|
if (!isErrorArray) {
|
|
10987
10954
|
return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
|
|
@@ -11049,19 +11016,19 @@ var FormField = ({
|
|
|
11049
11016
|
"aria-describedby": ariaDescribedby,
|
|
11050
11017
|
...props
|
|
11051
11018
|
};
|
|
11052
|
-
if ((0,
|
|
11019
|
+
if ((0, import_type_guards37.isUndefined)(value) && (0, import_type_guards37.isNotUndefined)(defaultValue)) {
|
|
11053
11020
|
childProps = {
|
|
11054
11021
|
...childProps,
|
|
11055
11022
|
defaultValue
|
|
11056
11023
|
};
|
|
11057
11024
|
}
|
|
11058
|
-
if ((0,
|
|
11059
|
-
const computedName = (0,
|
|
11025
|
+
if ((0, import_type_guards37.isNotNil)(checkboxGroup)) {
|
|
11026
|
+
const computedName = (0, import_type_guards37.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
|
|
11060
11027
|
const handleChange = (event) => {
|
|
11061
|
-
if ((0,
|
|
11028
|
+
if ((0, import_type_guards37.isNotUndefined)(props.onChange)) {
|
|
11062
11029
|
props.onChange(event);
|
|
11063
11030
|
}
|
|
11064
|
-
if ((0,
|
|
11031
|
+
if ((0, import_type_guards37.isNotUndefined)(checkboxGroup.onChange)) {
|
|
11065
11032
|
checkboxGroup.onChange(event);
|
|
11066
11033
|
}
|
|
11067
11034
|
};
|
|
@@ -11069,7 +11036,7 @@ var FormField = ({
|
|
|
11069
11036
|
...childProps,
|
|
11070
11037
|
name: computedName,
|
|
11071
11038
|
onChange: handleChange,
|
|
11072
|
-
"aria-invalid": (0,
|
|
11039
|
+
"aria-invalid": (0, import_type_guards37.isNotNil)(error)
|
|
11073
11040
|
};
|
|
11074
11041
|
}
|
|
11075
11042
|
import_react48.Children.only(children);
|
|
@@ -11080,9 +11047,9 @@ var FormField = ({
|
|
|
11080
11047
|
"data-label-position": labelPosition ?? formState.labelPosition,
|
|
11081
11048
|
children: [
|
|
11082
11049
|
!isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Label, { htmlFor: computedId, children: label }),
|
|
11083
|
-
(0,
|
|
11050
|
+
(0, import_type_guards37.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
|
|
11084
11051
|
(0, import_react48.cloneElement)(children, childProps),
|
|
11085
|
-
(0,
|
|
11052
|
+
(0, import_type_guards37.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(import_jsx_runtime236.Fragment, { children: [
|
|
11086
11053
|
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", {}),
|
|
11087
11054
|
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
|
|
11088
11055
|
ErrorMessages,
|
|
@@ -11128,7 +11095,7 @@ RadioGroup.displayName = "RadioGroup";
|
|
|
11128
11095
|
// src/components/Grid/Grid.tsx
|
|
11129
11096
|
var import_react50 = require("react");
|
|
11130
11097
|
var import_styled_components59 = __toESM(require("styled-components"));
|
|
11131
|
-
var
|
|
11098
|
+
var import_type_guards38 = require("@wistia/type-guards");
|
|
11132
11099
|
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
11133
11100
|
var DEFAULT_ELEMENT5 = "div";
|
|
11134
11101
|
var StyledGrid = import_styled_components59.default.div`
|
|
@@ -11175,7 +11142,7 @@ var StyledGrid = import_styled_components59.default.div`
|
|
|
11175
11142
|
var GridComponent = (0, import_react50.forwardRef)(
|
|
11176
11143
|
({ children, columns = "auto", minChildWidth = "auto", gap = "space-02", renderAs, ...props }, ref) => {
|
|
11177
11144
|
const responsiveGap = useResponsiveProp(gap);
|
|
11178
|
-
const { column, row } = (0,
|
|
11145
|
+
const { column, row } = (0, import_type_guards38.isRecord)(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
|
|
11179
11146
|
const responsiveColumns = useResponsiveProp(columns);
|
|
11180
11147
|
const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
|
|
11181
11148
|
return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
@@ -11199,7 +11166,7 @@ var Grid = makePolymorphic(GridComponent);
|
|
|
11199
11166
|
// src/components/InputClickToCopy/InputClickToCopy.tsx
|
|
11200
11167
|
var import_styled_components60 = __toESM(require("styled-components"));
|
|
11201
11168
|
var import_react51 = require("react");
|
|
11202
|
-
var
|
|
11169
|
+
var import_type_guards39 = require("@wistia/type-guards");
|
|
11203
11170
|
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
11204
11171
|
var StyledInput2 = (0, import_styled_components60.default)(Input)`
|
|
11205
11172
|
&:not([aria-disabled='true']) {
|
|
@@ -11227,12 +11194,12 @@ var InputClickToCopy = (0, import_react51.forwardRef)(
|
|
|
11227
11194
|
}, [isCopied]);
|
|
11228
11195
|
const handleClick = (event) => {
|
|
11229
11196
|
event.preventDefault();
|
|
11230
|
-
if ((0,
|
|
11197
|
+
if ((0, import_type_guards39.isFunction)(props.onClick)) {
|
|
11231
11198
|
props.onClick(event);
|
|
11232
11199
|
}
|
|
11233
11200
|
void copyToClipboard(value).then(() => {
|
|
11234
11201
|
setIsCopied(true);
|
|
11235
|
-
if ((0,
|
|
11202
|
+
if ((0, import_type_guards39.isFunction)(onCopy)) {
|
|
11236
11203
|
onCopy(value);
|
|
11237
11204
|
}
|
|
11238
11205
|
return value;
|
|
@@ -11262,7 +11229,7 @@ InputClickToCopy.displayName = "InputClickToCopy";
|
|
|
11262
11229
|
|
|
11263
11230
|
// src/components/KeyboardShortcut/KeyboardShortcut.tsx
|
|
11264
11231
|
var import_styled_components61 = __toESM(require("styled-components"));
|
|
11265
|
-
var
|
|
11232
|
+
var import_type_guards40 = require("@wistia/type-guards");
|
|
11266
11233
|
var import_jsx_runtime240 = require("react/jsx-runtime");
|
|
11267
11234
|
var StyledKeyboardShortcut = import_styled_components61.default.div`
|
|
11268
11235
|
align-items: center;
|
|
@@ -11356,7 +11323,7 @@ var KeyboardShortcut = ({
|
|
|
11356
11323
|
$fullWidth: fullWidth,
|
|
11357
11324
|
...otherProps,
|
|
11358
11325
|
children: [
|
|
11359
|
-
(0,
|
|
11326
|
+
(0, import_type_guards40.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Label2, { children: label }),
|
|
11360
11327
|
/* @__PURE__ */ (0, import_jsx_runtime240.jsx)(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
|
|
11361
11328
|
StyledKey,
|
|
11362
11329
|
{
|
|
@@ -11370,18 +11337,18 @@ var KeyboardShortcut = ({
|
|
|
11370
11337
|
KeyboardShortcut.displayName = "KeyboardShortcut";
|
|
11371
11338
|
|
|
11372
11339
|
// src/components/List/List.tsx
|
|
11373
|
-
var
|
|
11340
|
+
var import_type_guards42 = require("@wistia/type-guards");
|
|
11374
11341
|
var import_styled_components63 = __toESM(require("styled-components"));
|
|
11375
11342
|
|
|
11376
11343
|
// src/components/List/ListItem.tsx
|
|
11377
11344
|
var import_styled_components62 = __toESM(require("styled-components"));
|
|
11378
|
-
var
|
|
11345
|
+
var import_type_guards41 = require("@wistia/type-guards");
|
|
11379
11346
|
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
11380
11347
|
var ListItemComponent = import_styled_components62.default.li`
|
|
11381
11348
|
margin-bottom: var(--wui-space-02);
|
|
11382
11349
|
`;
|
|
11383
11350
|
var ListItem = ({ children }) => {
|
|
11384
|
-
if ((0,
|
|
11351
|
+
if ((0, import_type_guards41.isNil)(children)) {
|
|
11385
11352
|
return null;
|
|
11386
11353
|
}
|
|
11387
11354
|
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(ListItemComponent, { children });
|
|
@@ -11511,13 +11478,13 @@ var List = ({
|
|
|
11511
11478
|
...otherProps
|
|
11512
11479
|
}) => {
|
|
11513
11480
|
const listVariant = variant ?? "bullets";
|
|
11514
|
-
if ((0,
|
|
11481
|
+
if ((0, import_type_guards42.isNotNil)(children)) {
|
|
11515
11482
|
if (Array.isArray(children) && !children.length) {
|
|
11516
11483
|
return null;
|
|
11517
11484
|
}
|
|
11518
11485
|
return renderListComponent(children, listVariant, otherProps);
|
|
11519
11486
|
}
|
|
11520
|
-
if ((0,
|
|
11487
|
+
if ((0, import_type_guards42.isNotNil)(items)) {
|
|
11521
11488
|
if (!items.length) {
|
|
11522
11489
|
return null;
|
|
11523
11490
|
}
|
|
@@ -11531,7 +11498,7 @@ List.displayName = "List";
|
|
|
11531
11498
|
var import_react53 = require("react");
|
|
11532
11499
|
var import_styled_components64 = __toESM(require("styled-components"));
|
|
11533
11500
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
11534
|
-
var
|
|
11501
|
+
var import_type_guards43 = require("@wistia/type-guards");
|
|
11535
11502
|
|
|
11536
11503
|
// src/components/Menu/MenuContext.tsx
|
|
11537
11504
|
var import_react52 = require("react");
|
|
@@ -11644,7 +11611,7 @@ var Menu = (0, import_react53.forwardRef)(
|
|
|
11644
11611
|
}, ref) => {
|
|
11645
11612
|
const contextValue = (0, import_react53.useMemo)(() => ({ compact }), [compact]);
|
|
11646
11613
|
let controlProps = {
|
|
11647
|
-
...(0,
|
|
11614
|
+
...(0, import_type_guards43.isNotNil)(onOpenChange) && (0, import_type_guards43.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
|
|
11648
11615
|
};
|
|
11649
11616
|
if (disabled) {
|
|
11650
11617
|
controlProps = {
|
|
@@ -11658,7 +11625,7 @@ var Menu = (0, import_react53.forwardRef)(
|
|
|
11658
11625
|
modal: false,
|
|
11659
11626
|
...controlProps,
|
|
11660
11627
|
children: [
|
|
11661
|
-
/* @__PURE__ */ (0, import_jsx_runtime243.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0,
|
|
11628
|
+
/* @__PURE__ */ (0, import_jsx_runtime243.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards43.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
11662
11629
|
Button,
|
|
11663
11630
|
{
|
|
11664
11631
|
ref,
|
|
@@ -11677,11 +11644,10 @@ var Menu = (0, import_react53.forwardRef)(
|
|
|
11677
11644
|
$compact: compact,
|
|
11678
11645
|
align,
|
|
11679
11646
|
collisionPadding: 8,
|
|
11647
|
+
sideOffset: 6,
|
|
11680
11648
|
onFocusOutside: (event) => {
|
|
11681
11649
|
event.preventDefault();
|
|
11682
11650
|
},
|
|
11683
|
-
side: "bottom",
|
|
11684
|
-
sideOffset: 6,
|
|
11685
11651
|
children
|
|
11686
11652
|
}
|
|
11687
11653
|
) })
|
|
@@ -11724,12 +11690,12 @@ MenuLabel.displayName = "MenuLabel";
|
|
|
11724
11690
|
var import_react55 = require("react");
|
|
11725
11691
|
var import_styled_components68 = __toESM(require("styled-components"));
|
|
11726
11692
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
11727
|
-
var
|
|
11693
|
+
var import_type_guards45 = require("@wistia/type-guards");
|
|
11728
11694
|
|
|
11729
11695
|
// src/components/Menu/MenuItemButton.tsx
|
|
11730
11696
|
var import_react54 = require("react");
|
|
11731
11697
|
var import_styled_components66 = __toESM(require("styled-components"));
|
|
11732
|
-
var
|
|
11698
|
+
var import_type_guards44 = require("@wistia/type-guards");
|
|
11733
11699
|
var import_jsx_runtime245 = require("react/jsx-runtime");
|
|
11734
11700
|
var StyledButton3 = (0, import_styled_components66.default)(Button)`
|
|
11735
11701
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
@@ -11807,7 +11773,7 @@ var StyledBadgeContainer = import_styled_components66.default.div`
|
|
|
11807
11773
|
var MenuItemButton = (0, import_react54.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
|
|
11808
11774
|
let { colorScheme, badge } = props;
|
|
11809
11775
|
if (appearance === "dangerous") {
|
|
11810
|
-
if ((0,
|
|
11776
|
+
if ((0, import_type_guards44.isNotUndefined)(colorScheme)) {
|
|
11811
11777
|
console.warn("colorScheme prop is ignored when appearance is dangerous");
|
|
11812
11778
|
}
|
|
11813
11779
|
colorScheme = "error";
|
|
@@ -11837,7 +11803,7 @@ var MenuItemButton = (0, import_react54.forwardRef)(({ children, appearance, com
|
|
|
11837
11803
|
children: [
|
|
11838
11804
|
props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
11839
11805
|
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(StyledLabelAndDescriptionContainer, { children }),
|
|
11840
|
-
(0,
|
|
11806
|
+
(0, import_type_guards44.isNotNil)(badge) || (0, import_type_guards44.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
|
|
11841
11807
|
props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
11842
11808
|
]
|
|
11843
11809
|
}
|
|
@@ -11909,7 +11875,7 @@ var SubMenu = ({
|
|
|
11909
11875
|
return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
|
|
11910
11876
|
/* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(SubMenuTrigger, { ...props, children: [
|
|
11911
11877
|
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)(MenuItemLabel, { children: label }),
|
|
11912
|
-
(0,
|
|
11878
|
+
(0, import_type_guards45.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(MenuItemDescription, { children: description }) : null
|
|
11913
11879
|
] }),
|
|
11914
11880
|
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(SubMenuContent, { $compact: compact, children }) })
|
|
11915
11881
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
|
|
@@ -12001,7 +11967,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
|
|
|
12001
11967
|
|
|
12002
11968
|
// src/components/Menu/CheckboxMenuItem.tsx
|
|
12003
11969
|
var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
|
|
12004
|
-
var
|
|
11970
|
+
var import_type_guards46 = require("@wistia/type-guards");
|
|
12005
11971
|
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
12006
11972
|
var CheckboxIndicator = ({ checked, ...props }) => {
|
|
12007
11973
|
return checked ? /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
|
|
@@ -12075,8 +12041,8 @@ var CheckboxMenuItem = ({
|
|
|
12075
12041
|
MenuItemButton,
|
|
12076
12042
|
{
|
|
12077
12043
|
...props,
|
|
12078
|
-
leftIcon: (0,
|
|
12079
|
-
rightIcon: (0,
|
|
12044
|
+
leftIcon: (0, import_type_guards46.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(CheckboxIndicator, { checked }),
|
|
12045
|
+
rightIcon: (0, import_type_guards46.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Icon, { type: "checkmark" }) }) : void 0
|
|
12080
12046
|
}
|
|
12081
12047
|
)
|
|
12082
12048
|
}
|
|
@@ -12190,7 +12156,7 @@ FilterMenu.displayName = "FilterMenu";
|
|
|
12190
12156
|
var import_react60 = require("react");
|
|
12191
12157
|
var import_styled_components73 = __toESM(require("styled-components"));
|
|
12192
12158
|
var import_react_dialog5 = require("@radix-ui/react-dialog");
|
|
12193
|
-
var
|
|
12159
|
+
var import_type_guards48 = require("@wistia/type-guards");
|
|
12194
12160
|
|
|
12195
12161
|
// src/components/Modal/ModalHeader.tsx
|
|
12196
12162
|
var import_styled_components70 = __toESM(require("styled-components"));
|
|
@@ -12253,7 +12219,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
|
12253
12219
|
|
|
12254
12220
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
12255
12221
|
var import_react58 = require("react");
|
|
12256
|
-
var
|
|
12222
|
+
var import_type_guards47 = require("@wistia/type-guards");
|
|
12257
12223
|
var useFocusRestore = () => {
|
|
12258
12224
|
const previouslyFocusedRef = (0, import_react58.useRef)(null);
|
|
12259
12225
|
(0, import_react58.useEffect)(() => {
|
|
@@ -12261,7 +12227,7 @@ var useFocusRestore = () => {
|
|
|
12261
12227
|
}, []);
|
|
12262
12228
|
(0, import_react58.useEffect)(() => {
|
|
12263
12229
|
return () => {
|
|
12264
|
-
if ((0,
|
|
12230
|
+
if ((0, import_type_guards47.isNotNil)(previouslyFocusedRef.current)) {
|
|
12265
12231
|
setTimeout(() => {
|
|
12266
12232
|
previouslyFocusedRef.current?.focus();
|
|
12267
12233
|
}, 0);
|
|
@@ -12473,7 +12439,7 @@ var Modal = (0, import_react60.forwardRef)(
|
|
|
12473
12439
|
import_react_dialog5.Root,
|
|
12474
12440
|
{
|
|
12475
12441
|
onOpenChange: (open2) => {
|
|
12476
|
-
if (!open2 && (0,
|
|
12442
|
+
if (!open2 && (0, import_type_guards48.isNotNil)(onRequestClose)) {
|
|
12477
12443
|
onRequestClose();
|
|
12478
12444
|
}
|
|
12479
12445
|
},
|
|
@@ -12485,7 +12451,7 @@ var Modal = (0, import_react60.forwardRef)(
|
|
|
12485
12451
|
{
|
|
12486
12452
|
ref,
|
|
12487
12453
|
onOpenAutoFocus: (event) => {
|
|
12488
|
-
if ((0,
|
|
12454
|
+
if ((0, import_type_guards48.isNotNil)(initialFocusRef) && initialFocusRef.current) {
|
|
12489
12455
|
event.preventDefault();
|
|
12490
12456
|
requestAnimationFrame(() => {
|
|
12491
12457
|
initialFocusRef.current?.focus();
|
|
@@ -12520,9 +12486,9 @@ var import_react_popover2 = require("@radix-ui/react-popover");
|
|
|
12520
12486
|
var import_styled_components75 = __toESM(require("styled-components"));
|
|
12521
12487
|
|
|
12522
12488
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
12523
|
-
var
|
|
12489
|
+
var import_type_guards49 = require("@wistia/type-guards");
|
|
12524
12490
|
var getControlProps = (isOpen, onOpenChange) => {
|
|
12525
|
-
return (0,
|
|
12491
|
+
return (0, import_type_guards49.isNotNil)(onOpenChange) && (0, import_type_guards49.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
|
|
12526
12492
|
};
|
|
12527
12493
|
|
|
12528
12494
|
// src/components/Popover/PopoverArrow.tsx
|
|
@@ -12677,7 +12643,7 @@ Popover2.displayName = "Popover";
|
|
|
12677
12643
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
12678
12644
|
var import_styled_components76 = __toESM(require("styled-components"));
|
|
12679
12645
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
12680
|
-
var
|
|
12646
|
+
var import_type_guards50 = require("@wistia/type-guards");
|
|
12681
12647
|
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
12682
12648
|
var ProgressBarWrapper = import_styled_components76.default.div`
|
|
12683
12649
|
--progress-bar-height: 8px;
|
|
@@ -12732,7 +12698,7 @@ var ProgressBar = ({
|
|
|
12732
12698
|
...props
|
|
12733
12699
|
}) => {
|
|
12734
12700
|
return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(ProgressBarWrapper, { children: [
|
|
12735
|
-
(0,
|
|
12701
|
+
(0, import_type_guards50.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
|
|
12736
12702
|
/* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
|
|
12737
12703
|
StyledProgressBar,
|
|
12738
12704
|
{
|
|
@@ -12748,7 +12714,7 @@ var ProgressBar = ({
|
|
|
12748
12714
|
)
|
|
12749
12715
|
}
|
|
12750
12716
|
),
|
|
12751
|
-
(0,
|
|
12717
|
+
(0, import_type_guards50.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(ProgressBarLabel, { children: labelRight }) : null
|
|
12752
12718
|
] });
|
|
12753
12719
|
};
|
|
12754
12720
|
ProgressBar.displayName = "ProgressBar";
|
|
@@ -12756,7 +12722,7 @@ ProgressBar.displayName = "ProgressBar";
|
|
|
12756
12722
|
// src/components/Radio/Radio.tsx
|
|
12757
12723
|
var import_react61 = require("react");
|
|
12758
12724
|
var import_styled_components77 = __toESM(require("styled-components"));
|
|
12759
|
-
var
|
|
12725
|
+
var import_type_guards51 = require("@wistia/type-guards");
|
|
12760
12726
|
var import_jsx_runtime260 = require("react/jsx-runtime");
|
|
12761
12727
|
var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
12762
12728
|
"svg",
|
|
@@ -12873,14 +12839,14 @@ var Radio = (0, import_react61.forwardRef)(
|
|
|
12873
12839
|
...props
|
|
12874
12840
|
}, ref) => {
|
|
12875
12841
|
const generatedId = (0, import_react61.useId)();
|
|
12876
|
-
const computedId = (0,
|
|
12842
|
+
const computedId = (0, import_type_guards51.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
12877
12843
|
const radioGroupContext = useRadioGroup();
|
|
12878
12844
|
const contextName = radioGroupContext?.name;
|
|
12879
12845
|
const contextOnChange = radioGroupContext?.onChange;
|
|
12880
12846
|
const contextValue = radioGroupContext?.value;
|
|
12881
12847
|
const radioName = name ?? contextName;
|
|
12882
12848
|
const handleOnChange = onChange ?? contextOnChange;
|
|
12883
|
-
const defaultChecked = (0,
|
|
12849
|
+
const defaultChecked = (0, import_type_guards51.isNotUndefined)(value) && (0, import_type_guards51.isNotUndefined)(contextValue) ? contextValue.includes(value) : void 0;
|
|
12884
12850
|
return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
|
|
12885
12851
|
StyledRadioWrapper,
|
|
12886
12852
|
{
|
|
@@ -12899,7 +12865,7 @@ var Radio = (0, import_react61.forwardRef)(
|
|
|
12899
12865
|
required,
|
|
12900
12866
|
type: "radio",
|
|
12901
12867
|
value,
|
|
12902
|
-
...(0,
|
|
12868
|
+
...(0, import_type_guards51.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
|
|
12903
12869
|
}
|
|
12904
12870
|
),
|
|
12905
12871
|
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
@@ -12934,7 +12900,7 @@ var import_react63 = require("react");
|
|
|
12934
12900
|
// src/components/RadioCard/RadioCardRoot.tsx
|
|
12935
12901
|
var import_react62 = require("react");
|
|
12936
12902
|
var import_styled_components78 = __toESM(require("styled-components"));
|
|
12937
|
-
var
|
|
12903
|
+
var import_type_guards52 = require("@wistia/type-guards");
|
|
12938
12904
|
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
12939
12905
|
var checkedStyles = import_styled_components78.css`
|
|
12940
12906
|
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
@@ -13055,14 +13021,14 @@ var RadioCardRoot = (0, import_react62.forwardRef)(
|
|
|
13055
13021
|
...props
|
|
13056
13022
|
}, ref) => {
|
|
13057
13023
|
const generatedId = (0, import_react62.useId)();
|
|
13058
|
-
const computedId = (0,
|
|
13024
|
+
const computedId = (0, import_type_guards52.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
13059
13025
|
const radioGroupContext = useRadioGroup();
|
|
13060
13026
|
const contextName = radioGroupContext?.name;
|
|
13061
13027
|
const contextOnChange = radioGroupContext?.onChange;
|
|
13062
13028
|
const contextValue = radioGroupContext?.value;
|
|
13063
13029
|
const radioName = name ?? contextName;
|
|
13064
13030
|
const handleOnChange = onChange ?? contextOnChange;
|
|
13065
|
-
const defaultChecked = (0,
|
|
13031
|
+
const defaultChecked = (0, import_type_guards52.isNotUndefined)(value) && (0, import_type_guards52.isNotUndefined)(contextValue) ? contextValue.includes(value) : void 0;
|
|
13066
13032
|
return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
|
|
13067
13033
|
StyledCard2,
|
|
13068
13034
|
{
|
|
@@ -13081,7 +13047,7 @@ var RadioCardRoot = (0, import_react62.forwardRef)(
|
|
|
13081
13047
|
onChange: handleOnChange,
|
|
13082
13048
|
type: "radio",
|
|
13083
13049
|
value,
|
|
13084
|
-
...(0,
|
|
13050
|
+
...(0, import_type_guards52.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
|
|
13085
13051
|
}
|
|
13086
13052
|
),
|
|
13087
13053
|
children
|
|
@@ -13094,7 +13060,7 @@ RadioCardRoot.displayName = "RadioCardRoot";
|
|
|
13094
13060
|
|
|
13095
13061
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
13096
13062
|
var import_styled_components80 = __toESM(require("styled-components"));
|
|
13097
|
-
var
|
|
13063
|
+
var import_type_guards53 = require("@wistia/type-guards");
|
|
13098
13064
|
|
|
13099
13065
|
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
13100
13066
|
var import_styled_components79 = __toESM(require("styled-components"));
|
|
@@ -13168,17 +13134,17 @@ var RadioCardDefaultLayout = ({
|
|
|
13168
13134
|
showIndicator = true
|
|
13169
13135
|
}) => {
|
|
13170
13136
|
return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(StyledCardContent, { children: [
|
|
13171
|
-
showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledIndicatorContainer, { $hasIcon: (0,
|
|
13137
|
+
showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledIndicatorContainer, { $hasIcon: (0, import_type_guards53.isNotNil)(icon), children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
|
|
13172
13138
|
/* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(Stack, { gap: "space-02", children: [
|
|
13173
|
-
(0,
|
|
13139
|
+
(0, import_type_guards53.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
|
|
13174
13140
|
/* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
|
|
13175
13141
|
Stack,
|
|
13176
13142
|
{
|
|
13177
13143
|
gap: "space-01",
|
|
13178
|
-
style: (0,
|
|
13144
|
+
style: (0, import_type_guards53.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
|
|
13179
13145
|
children: [
|
|
13180
13146
|
/* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("strong", { children: label }) }),
|
|
13181
|
-
(0,
|
|
13147
|
+
(0, import_type_guards53.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
|
|
13182
13148
|
Text,
|
|
13183
13149
|
{
|
|
13184
13150
|
prominence: "secondary",
|
|
@@ -13250,7 +13216,7 @@ RadioCardImage.displayName = "RadioCardImage";
|
|
|
13250
13216
|
var import_react67 = require("react");
|
|
13251
13217
|
var import_styled_components82 = __toESM(require("styled-components"));
|
|
13252
13218
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
13253
|
-
var
|
|
13219
|
+
var import_type_guards55 = require("@wistia/type-guards");
|
|
13254
13220
|
|
|
13255
13221
|
// src/components/SegmentedControl/useSelectedItemStyle.tsx
|
|
13256
13222
|
var import_react65 = require("react");
|
|
@@ -13287,7 +13253,7 @@ var useSelectedItemStyle = () => {
|
|
|
13287
13253
|
|
|
13288
13254
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
13289
13255
|
var import_styled_components81 = __toESM(require("styled-components"));
|
|
13290
|
-
var
|
|
13256
|
+
var import_type_guards54 = require("@wistia/type-guards");
|
|
13291
13257
|
|
|
13292
13258
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
13293
13259
|
var import_react66 = require("react");
|
|
@@ -13321,7 +13287,7 @@ var SelectedItemIndicatorDiv = import_styled_components81.default.div`
|
|
|
13321
13287
|
var SelectedItemIndicator = () => {
|
|
13322
13288
|
const selectedValue = useSegmentedControlValue();
|
|
13323
13289
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
13324
|
-
if (!selectedValue || (0,
|
|
13290
|
+
if (!selectedValue || (0, import_type_guards54.isUndefined)(selectedItemIndicatorStyle)) {
|
|
13325
13291
|
return null;
|
|
13326
13292
|
}
|
|
13327
13293
|
return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
|
|
@@ -13358,7 +13324,7 @@ var SegmentedControl = (0, import_react67.forwardRef)(
|
|
|
13358
13324
|
onSelectedValueChange,
|
|
13359
13325
|
...props
|
|
13360
13326
|
}, ref) => {
|
|
13361
|
-
if ((0,
|
|
13327
|
+
if ((0, import_type_guards55.isNil)(children)) {
|
|
13362
13328
|
return null;
|
|
13363
13329
|
}
|
|
13364
13330
|
return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
|
|
@@ -13387,7 +13353,7 @@ SegmentedControl.displayName = "SegmentedControl";
|
|
|
13387
13353
|
var import_react68 = require("react");
|
|
13388
13354
|
var import_styled_components83 = __toESM(require("styled-components"));
|
|
13389
13355
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
13390
|
-
var
|
|
13356
|
+
var import_type_guards56 = require("@wistia/type-guards");
|
|
13391
13357
|
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13392
13358
|
var segmentedControlItemStyles = import_styled_components83.css`
|
|
13393
13359
|
all: unset; /* ToggleGroupItem is a button element */
|
|
@@ -13502,8 +13468,8 @@ var SegmentedControlItem = (0, import_react68.forwardRef)(
|
|
|
13502
13468
|
{
|
|
13503
13469
|
ref: combinedRef,
|
|
13504
13470
|
...otherProps,
|
|
13505
|
-
$hasLabel: (0,
|
|
13506
|
-
"aria-label": (0,
|
|
13471
|
+
$hasLabel: (0, import_type_guards56.isNotNil)(label),
|
|
13472
|
+
"aria-label": (0, import_type_guards56.isNotNil)(label) ? void 0 : ariaLabel,
|
|
13507
13473
|
disabled,
|
|
13508
13474
|
onClick: handleClick,
|
|
13509
13475
|
value,
|
|
@@ -13635,7 +13601,7 @@ Select.displayName = "Select";
|
|
|
13635
13601
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
13636
13602
|
var import_react70 = require("react");
|
|
13637
13603
|
var import_styled_components85 = __toESM(require("styled-components"));
|
|
13638
|
-
var
|
|
13604
|
+
var import_type_guards57 = require("@wistia/type-guards");
|
|
13639
13605
|
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13640
13606
|
var StyledItem = (0, import_styled_components85.default)(import_react_select2.Item)`
|
|
13641
13607
|
${variantStyleMap2.body3};
|
|
@@ -13679,7 +13645,7 @@ var SelectOption = (0, import_react70.forwardRef)(
|
|
|
13679
13645
|
type: "checkmark"
|
|
13680
13646
|
}
|
|
13681
13647
|
) }) }),
|
|
13682
|
-
(0,
|
|
13648
|
+
(0, import_type_guards57.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)("div", { children: [
|
|
13683
13649
|
children,
|
|
13684
13650
|
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
13685
13651
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(import_react_select2.ItemText, { children })
|
|
@@ -13714,7 +13680,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
13714
13680
|
// src/components/Slider/Slider.tsx
|
|
13715
13681
|
var import_react_slider = require("@radix-ui/react-slider");
|
|
13716
13682
|
var import_styled_components87 = __toESM(require("styled-components"));
|
|
13717
|
-
var
|
|
13683
|
+
var import_type_guards58 = require("@wistia/type-guards");
|
|
13718
13684
|
var import_jsx_runtime272 = require("react/jsx-runtime");
|
|
13719
13685
|
var SliderContainer = import_styled_components87.default.div`
|
|
13720
13686
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
@@ -13793,7 +13759,7 @@ var Slider = ({
|
|
|
13793
13759
|
"data-testid": dataTestId = "ui-slider",
|
|
13794
13760
|
...otherProps
|
|
13795
13761
|
}) => {
|
|
13796
|
-
if (!((0,
|
|
13762
|
+
if (!((0, import_type_guards58.isNonEmptyString)(ariaLabel) || (0, import_type_guards58.isNonEmptyString)(ariaLabelledby))) {
|
|
13797
13763
|
throw new Error(
|
|
13798
13764
|
"UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
|
|
13799
13765
|
);
|
|
@@ -13841,7 +13807,7 @@ Slider.displayName = "Slider";
|
|
|
13841
13807
|
// src/components/Switch/Switch.tsx
|
|
13842
13808
|
var import_react71 = require("react");
|
|
13843
13809
|
var import_styled_components88 = __toESM(require("styled-components"));
|
|
13844
|
-
var
|
|
13810
|
+
var import_type_guards59 = require("@wistia/type-guards");
|
|
13845
13811
|
var import_jsx_runtime273 = require("react/jsx-runtime");
|
|
13846
13812
|
var sizeSmall3 = import_styled_components88.css`
|
|
13847
13813
|
--wui-size-small-width: 24px;
|
|
@@ -13961,7 +13927,7 @@ var Switch = (0, import_react71.forwardRef)(
|
|
|
13961
13927
|
...props
|
|
13962
13928
|
}, ref) => {
|
|
13963
13929
|
const generatedId = (0, import_react71.useId)();
|
|
13964
|
-
const computedId = (0,
|
|
13930
|
+
const computedId = (0, import_type_guards59.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
|
|
13965
13931
|
return /* @__PURE__ */ (0, import_jsx_runtime273.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
|
|
13966
13932
|
/* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
|
|
13967
13933
|
StyledHiddenSwitchInput,
|
|
@@ -14117,7 +14083,7 @@ var TableRow = ({ children, ...props }) => {
|
|
|
14117
14083
|
// src/components/Tabs/Tabs.tsx
|
|
14118
14084
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
14119
14085
|
var import_react75 = require("react");
|
|
14120
|
-
var
|
|
14086
|
+
var import_type_guards60 = require("@wistia/type-guards");
|
|
14121
14087
|
|
|
14122
14088
|
// src/components/Tabs/useTabsValue.tsx
|
|
14123
14089
|
var import_react74 = require("react");
|
|
@@ -14154,10 +14120,10 @@ var Tabs = ({
|
|
|
14154
14120
|
...props,
|
|
14155
14121
|
onValueChange
|
|
14156
14122
|
};
|
|
14157
|
-
if ((0,
|
|
14123
|
+
if ((0, import_type_guards60.isNotNil)(value)) {
|
|
14158
14124
|
rootProps.value = value;
|
|
14159
14125
|
}
|
|
14160
|
-
if ((0,
|
|
14126
|
+
if ((0, import_type_guards60.isNotNil)(defaultValue)) {
|
|
14161
14127
|
rootProps.defaultValue = defaultValue;
|
|
14162
14128
|
}
|
|
14163
14129
|
return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(SelectedItemStyleProvider, { children }) }) });
|
|
@@ -14177,7 +14143,7 @@ var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
|
14177
14143
|
var import_styled_components96 = __toESM(require("styled-components"));
|
|
14178
14144
|
|
|
14179
14145
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
14180
|
-
var
|
|
14146
|
+
var import_type_guards61 = require("@wistia/type-guards");
|
|
14181
14147
|
|
|
14182
14148
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
14183
14149
|
var import_styled_components95 = __toESM(require("styled-components"));
|
|
@@ -14192,7 +14158,7 @@ var import_jsx_runtime282 = require("react/jsx-runtime");
|
|
|
14192
14158
|
var SelectedTabIndicator = () => {
|
|
14193
14159
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
14194
14160
|
const selectedValue = useTabsValue();
|
|
14195
|
-
if (selectedValue == null || (0,
|
|
14161
|
+
if (selectedValue == null || (0, import_type_guards61.isUndefined)(selectedItemIndicatorStyle)) {
|
|
14196
14162
|
return null;
|
|
14197
14163
|
}
|
|
14198
14164
|
return /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(
|
|
@@ -14226,7 +14192,7 @@ TabsList.displayName = "TabsList";
|
|
|
14226
14192
|
|
|
14227
14193
|
// src/components/Tabs/TabsTrigger.tsx
|
|
14228
14194
|
var import_react76 = require("react");
|
|
14229
|
-
var
|
|
14195
|
+
var import_type_guards62 = require("@wistia/type-guards");
|
|
14230
14196
|
|
|
14231
14197
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
14232
14198
|
var import_styled_components97 = __toESM(require("styled-components"));
|
|
@@ -14277,8 +14243,8 @@ var TabsTrigger = (0, import_react76.forwardRef)(
|
|
|
14277
14243
|
{
|
|
14278
14244
|
...otherProps,
|
|
14279
14245
|
ref: combinedRef,
|
|
14280
|
-
$hasLabel: (0,
|
|
14281
|
-
"aria-label": (0,
|
|
14246
|
+
$hasLabel: (0, import_type_guards62.isNotNil)(label),
|
|
14247
|
+
"aria-label": (0, import_type_guards62.isNotNil)(label) ? void 0 : ariaLabel,
|
|
14282
14248
|
disabled,
|
|
14283
14249
|
value,
|
|
14284
14250
|
children: [
|
|
@@ -14293,7 +14259,7 @@ TabsTrigger.displayName = "TabsTrigger";
|
|
|
14293
14259
|
|
|
14294
14260
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
14295
14261
|
var import_styled_components98 = __toESM(require("styled-components"));
|
|
14296
|
-
var
|
|
14262
|
+
var import_type_guards63 = require("@wistia/type-guards");
|
|
14297
14263
|
var import_jsx_runtime285 = require("react/jsx-runtime");
|
|
14298
14264
|
var StyledThumbnailBadge = import_styled_components98.default.div`
|
|
14299
14265
|
align-items: center;
|
|
@@ -14321,7 +14287,7 @@ var StyledThumbnailBadge = import_styled_components98.default.div`
|
|
|
14321
14287
|
`;
|
|
14322
14288
|
var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
14323
14289
|
return /* @__PURE__ */ (0, import_jsx_runtime285.jsxs)(StyledThumbnailBadge, { ...props, children: [
|
|
14324
|
-
(0,
|
|
14290
|
+
(0, import_type_guards63.isNotNil)(icon) && icon,
|
|
14325
14291
|
/* @__PURE__ */ (0, import_jsx_runtime285.jsx)("span", { children: label })
|
|
14326
14292
|
] });
|
|
14327
14293
|
};
|
|
@@ -14330,10 +14296,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
|
|
|
14330
14296
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
14331
14297
|
var import_react77 = require("react");
|
|
14332
14298
|
var import_styled_components101 = __toESM(require("styled-components"));
|
|
14333
|
-
var
|
|
14299
|
+
var import_type_guards66 = require("@wistia/type-guards");
|
|
14334
14300
|
|
|
14335
14301
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
14336
|
-
var
|
|
14302
|
+
var import_type_guards64 = require("@wistia/type-guards");
|
|
14337
14303
|
var import_styled_components99 = require("styled-components");
|
|
14338
14304
|
var gradients = {
|
|
14339
14305
|
defaultDarkOne: import_styled_components99.css`
|
|
@@ -14461,12 +14427,12 @@ var gradients = {
|
|
|
14461
14427
|
};
|
|
14462
14428
|
var gradientMap = Object.keys(gradients);
|
|
14463
14429
|
var getBackgroundGradient = (gradientName = void 0) => {
|
|
14464
|
-
return (0,
|
|
14430
|
+
return (0, import_type_guards64.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
|
|
14465
14431
|
};
|
|
14466
14432
|
|
|
14467
14433
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
14468
14434
|
var import_styled_components100 = __toESM(require("styled-components"));
|
|
14469
|
-
var
|
|
14435
|
+
var import_type_guards65 = require("@wistia/type-guards");
|
|
14470
14436
|
var import_jsx_runtime286 = require("react/jsx-runtime");
|
|
14471
14437
|
var ScrubLine = import_styled_components100.default.div`
|
|
14472
14438
|
position: absolute;
|
|
@@ -14552,8 +14518,8 @@ var ThumbnailStoryboardViewer = ({
|
|
|
14552
14518
|
);
|
|
14553
14519
|
const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
|
|
14554
14520
|
const backgroundImage = `url(${storyboardUrl})`;
|
|
14555
|
-
const showScrubLine = (0,
|
|
14556
|
-
const scrubLinePosition = (0,
|
|
14521
|
+
const showScrubLine = (0, import_type_guards65.isNotNil)(cursorPosition);
|
|
14522
|
+
const scrubLinePosition = (0, import_type_guards65.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
|
|
14557
14523
|
const viewerStyles = {
|
|
14558
14524
|
position: "relative",
|
|
14559
14525
|
overflow: "hidden",
|
|
@@ -14624,10 +14590,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
14624
14590
|
);
|
|
14625
14591
|
};
|
|
14626
14592
|
var StyledThumbnail = import_styled_components101.default.div`
|
|
14627
|
-
background-image: ${({ $backgroundUrl }) => (0,
|
|
14593
|
+
background-image: ${({ $backgroundUrl }) => (0, import_type_guards66.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
14628
14594
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
14629
14595
|
// if we don't have $backgroundUrl show a gradient
|
|
14630
|
-
(0,
|
|
14596
|
+
(0, import_type_guards66.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
|
|
14631
14597
|
)};
|
|
14632
14598
|
background-position: center center;
|
|
14633
14599
|
background-size: cover;
|
|
@@ -14669,10 +14635,10 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14669
14635
|
const storyboardElementRef = (0, import_react77.useRef)(null);
|
|
14670
14636
|
const [cursorPosition, setCursorPosition] = (0, import_react77.useState)(null);
|
|
14671
14637
|
const backgroundUrl = (0, import_react77.useMemo)(
|
|
14672
|
-
() => thumbnailImageType === "square" && (0,
|
|
14638
|
+
() => thumbnailImageType === "square" && (0, import_type_guards66.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
14673
14639
|
[thumbnailImageType, thumbnailUrl]
|
|
14674
14640
|
);
|
|
14675
|
-
const isScrubbable = (0,
|
|
14641
|
+
const isScrubbable = (0, import_type_guards66.isNotNil)(storyboard);
|
|
14676
14642
|
const trackStoryboardLoadStatus = (0, import_react77.useCallback)(() => {
|
|
14677
14643
|
if (storyboardElementRef.current || !storyboard) {
|
|
14678
14644
|
return storyboardElementRef.current;
|
|
@@ -14705,7 +14671,7 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14705
14671
|
return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
|
|
14706
14672
|
}, [isScrubbable, isMouseOver, isStoryboardReady]);
|
|
14707
14673
|
const renderStoryboard = (0, import_react77.useCallback)(() => {
|
|
14708
|
-
if (!storyboard || (0,
|
|
14674
|
+
if (!storyboard || (0, import_type_guards66.isUndefined)(height) || (0, import_type_guards66.isEmptyString)(height)) return null;
|
|
14709
14675
|
const {
|
|
14710
14676
|
url,
|
|
14711
14677
|
width: sbWidth,
|
|
@@ -14715,7 +14681,7 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14715
14681
|
frameCount,
|
|
14716
14682
|
aspectRatio
|
|
14717
14683
|
} = storyboard;
|
|
14718
|
-
const targetWidth = (0,
|
|
14684
|
+
const targetWidth = (0, import_type_guards66.isString)(width) ? parseInt(width, 10) : Number(width);
|
|
14719
14685
|
const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
|
|
14720
14686
|
return /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(
|
|
14721
14687
|
ThumbnailStoryboardViewer,
|
|
@@ -14736,7 +14702,7 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14736
14702
|
let thumbnailContent = null;
|
|
14737
14703
|
if (shouldRenderStoryboard) {
|
|
14738
14704
|
thumbnailContent = renderStoryboard();
|
|
14739
|
-
} else if ((0,
|
|
14705
|
+
} else if ((0, import_type_guards66.isNotNil)(thumbnailUrl)) {
|
|
14740
14706
|
thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime287.jsx)(
|
|
14741
14707
|
ThumbnailImage,
|
|
14742
14708
|
{
|
|
@@ -14761,7 +14727,7 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14761
14727
|
onMouseOut: handleMouseOut,
|
|
14762
14728
|
role: "presentation",
|
|
14763
14729
|
children: [
|
|
14764
|
-
(0,
|
|
14730
|
+
(0, import_type_guards66.isNotNil)(children) ? children : null,
|
|
14765
14731
|
thumbnailContent
|
|
14766
14732
|
]
|
|
14767
14733
|
}
|
|
@@ -14773,7 +14739,7 @@ Thumbnail.displayName = "Thumbnail";
|
|
|
14773
14739
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
14774
14740
|
var import_react78 = __toESM(require("react"));
|
|
14775
14741
|
var import_styled_components102 = __toESM(require("styled-components"));
|
|
14776
|
-
var
|
|
14742
|
+
var import_type_guards67 = require("@wistia/type-guards");
|
|
14777
14743
|
var import_jsx_runtime288 = (
|
|
14778
14744
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
14779
14745
|
require("react/jsx-runtime")
|
|
@@ -14853,7 +14819,7 @@ var ThumbnailCollage = ({
|
|
|
14853
14819
|
}) => {
|
|
14854
14820
|
const thumbnailArray = import_react78.default.Children.toArray(children);
|
|
14855
14821
|
const truncatedThumbnails = thumbnailArray.slice(0, 3);
|
|
14856
|
-
const thumbnails = (0,
|
|
14822
|
+
const thumbnails = (0, import_type_guards67.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
|
|
14857
14823
|
return import_react78.default.cloneElement(child, {
|
|
14858
14824
|
...child.props,
|
|
14859
14825
|
children: void 0
|
|
@@ -14881,7 +14847,7 @@ var ThumbnailCollage = ({
|
|
|
14881
14847
|
|
|
14882
14848
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
14883
14849
|
var import_styled_components103 = __toESM(require("styled-components"));
|
|
14884
|
-
var
|
|
14850
|
+
var import_type_guards68 = require("@wistia/type-guards");
|
|
14885
14851
|
var import_jsx_runtime289 = require("react/jsx-runtime");
|
|
14886
14852
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
14887
14853
|
if (iconOnly) {
|
|
@@ -14994,7 +14960,7 @@ var WistiaLogo = ({
|
|
|
14994
14960
|
...props,
|
|
14995
14961
|
children: [
|
|
14996
14962
|
/* @__PURE__ */ (0, import_jsx_runtime289.jsx)("title", { children: title }),
|
|
14997
|
-
(0,
|
|
14963
|
+
(0, import_type_guards68.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime289.jsx)("desc", { children: description }) : null,
|
|
14998
14964
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
14999
14965
|
renderLogotype(logotypeColor, iconOnly)
|
|
15000
14966
|
]
|
|
@@ -15007,7 +14973,7 @@ WistiaLogo.displayName = "WistiaLogo";
|
|
|
15007
14973
|
// src/components/InputPassword/InputPassword.tsx
|
|
15008
14974
|
var import_styled_components104 = __toESM(require("styled-components"));
|
|
15009
14975
|
var import_react79 = require("react");
|
|
15010
|
-
var
|
|
14976
|
+
var import_type_guards69 = require("@wistia/type-guards");
|
|
15011
14977
|
var import_jsx_runtime290 = require("react/jsx-runtime");
|
|
15012
14978
|
var StyledIconButton = (0, import_styled_components104.default)(IconButton)`
|
|
15013
14979
|
/* override size for icon button since prop gets changed by Input */
|
|
@@ -15023,7 +14989,7 @@ var InputPassword = (0, import_react79.forwardRef)(
|
|
|
15023
14989
|
const handleClick = () => {
|
|
15024
14990
|
const newVisibility = !isVisible;
|
|
15025
14991
|
setIsVisible(newVisibility);
|
|
15026
|
-
if ((0,
|
|
14992
|
+
if ((0, import_type_guards69.isFunction)(onVisibilityToggle)) {
|
|
15027
14993
|
onVisibilityToggle(newVisibility);
|
|
15028
14994
|
}
|
|
15029
14995
|
};
|
|
@@ -15050,65 +15016,6 @@ var InputPassword = (0, import_react79.forwardRef)(
|
|
|
15050
15016
|
}
|
|
15051
15017
|
);
|
|
15052
15018
|
InputPassword.displayName = "InputPassword";
|
|
15053
|
-
|
|
15054
|
-
// src/components/ContextMenu/ContextMenu.tsx
|
|
15055
|
-
var import_react80 = require("react");
|
|
15056
|
-
var import_type_guards71 = require("@wistia/type-guards");
|
|
15057
|
-
var import_jsx_runtime291 = require("react/jsx-runtime");
|
|
15058
|
-
var ContextMenu = ({
|
|
15059
|
-
position,
|
|
15060
|
-
triggerRef,
|
|
15061
|
-
children,
|
|
15062
|
-
onRequestClose = () => null
|
|
15063
|
-
}) => {
|
|
15064
|
-
const [isRightClicked, setIsRightClicked] = (0, import_react80.useState)(false);
|
|
15065
|
-
const [menuPosition, setMenuPosition] = (0, import_react80.useState)(position ?? { x: 0, y: 0 });
|
|
15066
|
-
(0, import_react80.useEffect)(() => {
|
|
15067
|
-
if ((0, import_type_guards71.isNil)(position)) {
|
|
15068
|
-
const onContextMenu = (event) => {
|
|
15069
|
-
event.preventDefault();
|
|
15070
|
-
setMenuPosition({ x: event.clientX, y: event.clientY });
|
|
15071
|
-
setIsRightClicked(true);
|
|
15072
|
-
};
|
|
15073
|
-
const triggerEl = triggerRef?.current;
|
|
15074
|
-
triggerEl?.addEventListener("contextmenu", onContextMenu);
|
|
15075
|
-
return () => {
|
|
15076
|
-
triggerEl?.removeEventListener("contextmenu", onContextMenu);
|
|
15077
|
-
};
|
|
15078
|
-
}
|
|
15079
|
-
return () => null;
|
|
15080
|
-
}, [position, triggerRef]);
|
|
15081
|
-
const isOpen = (0, import_type_guards71.isNotNil)(position) || isRightClicked;
|
|
15082
|
-
return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
|
|
15083
|
-
Menu,
|
|
15084
|
-
{
|
|
15085
|
-
avoidCollisions: false,
|
|
15086
|
-
isOpen,
|
|
15087
|
-
onOpenChange: (next) => {
|
|
15088
|
-
setIsRightClicked(next);
|
|
15089
|
-
if (!next) {
|
|
15090
|
-
onRequestClose();
|
|
15091
|
-
}
|
|
15092
|
-
},
|
|
15093
|
-
trigger: /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(
|
|
15094
|
-
"button",
|
|
15095
|
-
{
|
|
15096
|
-
"aria-label": "context menu",
|
|
15097
|
-
style: {
|
|
15098
|
-
width: "1px",
|
|
15099
|
-
height: "1px",
|
|
15100
|
-
all: "unset",
|
|
15101
|
-
position: "fixed",
|
|
15102
|
-
top: menuPosition.y,
|
|
15103
|
-
left: menuPosition.x
|
|
15104
|
-
},
|
|
15105
|
-
type: "button"
|
|
15106
|
-
}
|
|
15107
|
-
),
|
|
15108
|
-
children
|
|
15109
|
-
}
|
|
15110
|
-
) : null;
|
|
15111
|
-
};
|
|
15112
15019
|
// Annotate the CommonJS export names for ESM import in node:
|
|
15113
15020
|
0 && (module.exports = {
|
|
15114
15021
|
ActionButton,
|
|
@@ -15133,7 +15040,6 @@ var ContextMenu = ({
|
|
|
15133
15040
|
ColorSchemeWrapper,
|
|
15134
15041
|
Combobox,
|
|
15135
15042
|
ComboboxOption,
|
|
15136
|
-
ContextMenu,
|
|
15137
15043
|
DataCard,
|
|
15138
15044
|
DataCardTrend,
|
|
15139
15045
|
DataCards,
|