@wistia/ui 0.6.36 → 0.6.37
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 +131 -131
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.mjs +76 -77
- 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.6.
|
|
3
|
+
* @license @wistia/ui v0.6.37
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -119,6 +119,7 @@ __export(index_exports, {
|
|
|
119
119
|
ellipsisFlexParentStyle: () => ellipsisFlexParentStyle,
|
|
120
120
|
ellipsisStyle: () => ellipsisStyle,
|
|
121
121
|
iconSizeMap: () => iconSizeMap,
|
|
122
|
+
mergeRefs: () => mergeRefs,
|
|
122
123
|
mq: () => mq,
|
|
123
124
|
useActiveMq: () => useActiveMq,
|
|
124
125
|
useAriaLive: () => useAriaLive,
|
|
@@ -2006,6 +2007,20 @@ var dateTime = {
|
|
|
2006
2007
|
timeOnlyString
|
|
2007
2008
|
};
|
|
2008
2009
|
|
|
2010
|
+
// src/helpers/mergeRefs/mergeRefs.ts
|
|
2011
|
+
var import_type_guards5 = require("@wistia/type-guards");
|
|
2012
|
+
var mergeRefs = (refs) => (value) => {
|
|
2013
|
+
refs.forEach((ref) => {
|
|
2014
|
+
if ((0, import_type_guards5.isFunction)(ref)) {
|
|
2015
|
+
ref(value);
|
|
2016
|
+
return;
|
|
2017
|
+
}
|
|
2018
|
+
if ((0, import_type_guards5.isNotNil)(ref)) {
|
|
2019
|
+
ref.current = value;
|
|
2020
|
+
}
|
|
2021
|
+
});
|
|
2022
|
+
};
|
|
2023
|
+
|
|
2009
2024
|
// src/helpers/mq/mq.ts
|
|
2010
2025
|
var import_polished = require("polished");
|
|
2011
2026
|
|
|
@@ -2054,10 +2069,10 @@ var mq = {
|
|
|
2054
2069
|
|
|
2055
2070
|
// src/hooks/useAriaLive/useAriaLive.tsx
|
|
2056
2071
|
var import_react3 = require("react");
|
|
2057
|
-
var
|
|
2072
|
+
var import_type_guards6 = require("@wistia/type-guards");
|
|
2058
2073
|
var useAriaLive = () => {
|
|
2059
2074
|
const context = (0, import_react3.useContext)(AriaLiveContext);
|
|
2060
|
-
if ((0,
|
|
2075
|
+
if ((0, import_type_guards6.isNil)(context)) {
|
|
2061
2076
|
throw new Error("useAriaLive must be used within an AriaLiveProvider");
|
|
2062
2077
|
}
|
|
2063
2078
|
return context;
|
|
@@ -2084,9 +2099,9 @@ var import_react6 = require("react");
|
|
|
2084
2099
|
var import_react5 = require("react");
|
|
2085
2100
|
|
|
2086
2101
|
// src/private/helpers/isValidRef/isValidRef.ts
|
|
2087
|
-
var
|
|
2102
|
+
var import_type_guards7 = require("@wistia/type-guards");
|
|
2088
2103
|
var isValidRef = (value) => {
|
|
2089
|
-
return (0,
|
|
2104
|
+
return (0, import_type_guards7.isNotNil)(value) && (0, import_type_guards7.isRecord)(value) && "current" in value;
|
|
2090
2105
|
};
|
|
2091
2106
|
|
|
2092
2107
|
// src/private/hooks/useEvent/useEvent.ts
|
|
@@ -2194,7 +2209,7 @@ var useLockBodyScroll = (locked) => {
|
|
|
2194
2209
|
};
|
|
2195
2210
|
|
|
2196
2211
|
// src/hooks/useMq/useMq.ts
|
|
2197
|
-
var
|
|
2212
|
+
var import_type_guards8 = require("@wistia/type-guards");
|
|
2198
2213
|
|
|
2199
2214
|
// src/hooks/useWindowSize/useWindowSize.ts
|
|
2200
2215
|
var import_react9 = require("react");
|
|
@@ -2256,7 +2271,7 @@ var useActiveMq = () => {
|
|
|
2256
2271
|
const keys = Object.keys(mq2);
|
|
2257
2272
|
return keys.filter((key) => {
|
|
2258
2273
|
const value = mq2[key];
|
|
2259
|
-
return (0,
|
|
2274
|
+
return (0, import_type_guards8.isBoolean)(value) && value;
|
|
2260
2275
|
});
|
|
2261
2276
|
};
|
|
2262
2277
|
|
|
@@ -2267,10 +2282,10 @@ var import_sonner2 = require("sonner");
|
|
|
2267
2282
|
// src/private/components/Toast/Toast.tsx
|
|
2268
2283
|
var import_react10 = require("react");
|
|
2269
2284
|
var import_styled_components15 = __toESM(require("styled-components"));
|
|
2270
|
-
var
|
|
2285
|
+
var import_type_guards10 = require("@wistia/type-guards");
|
|
2271
2286
|
|
|
2272
2287
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2273
|
-
var
|
|
2288
|
+
var import_type_guards9 = require("@wistia/type-guards");
|
|
2274
2289
|
var import_styled_components13 = __toESM(require("styled-components"));
|
|
2275
2290
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2276
2291
|
var ellipsisStyle = import_styled_components13.css`
|
|
@@ -2303,7 +2318,7 @@ var ellipsisFlexParentStyle = import_styled_components13.css`
|
|
|
2303
2318
|
var EllipsisComponent = import_styled_components13.default.span`
|
|
2304
2319
|
${ellipsisStyle};
|
|
2305
2320
|
${({ $lines }) => {
|
|
2306
|
-
if ((0,
|
|
2321
|
+
if ((0, import_type_guards9.isNotNil)($lines)) {
|
|
2307
2322
|
return import_styled_components13.css`
|
|
2308
2323
|
-webkit-box-orient: vertical;
|
|
2309
2324
|
-webkit-line-clamp: ${$lines};
|
|
@@ -2495,7 +2510,7 @@ var StyledToast = import_styled_components15.default.div`
|
|
|
2495
2510
|
}
|
|
2496
2511
|
`;
|
|
2497
2512
|
var Action = ({ actionButton }) => {
|
|
2498
|
-
if ((0,
|
|
2513
|
+
if ((0, import_type_guards10.isNotNil)(actionButton) && (0, import_react10.isValidElement)(actionButton)) {
|
|
2499
2514
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionWrapper, { children: (0, import_react10.cloneElement)(actionButton, {
|
|
2500
2515
|
variant: "soft",
|
|
2501
2516
|
// force Button variant
|
|
@@ -2519,7 +2534,7 @@ var Toast = ({
|
|
|
2519
2534
|
$colorScheme: colorScheme,
|
|
2520
2535
|
children: [
|
|
2521
2536
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageWrapper, { children: [
|
|
2522
|
-
(0,
|
|
2537
|
+
(0, import_type_guards10.isNotNil)(icon) ? icon : null,
|
|
2523
2538
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Message, { lines: 3, children: message })
|
|
2524
2539
|
] }),
|
|
2525
2540
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Action, { actionButton: action })
|
|
@@ -2560,7 +2575,7 @@ var import_styled_components21 = __toESM(require("styled-components"));
|
|
|
2560
2575
|
// src/components/Button/Button.tsx
|
|
2561
2576
|
var import_react14 = require("react");
|
|
2562
2577
|
var import_styled_components20 = __toESM(require("styled-components"));
|
|
2563
|
-
var
|
|
2578
|
+
var import_type_guards14 = require("@wistia/type-guards");
|
|
2564
2579
|
|
|
2565
2580
|
// src/css/buttonResetCss.tsx
|
|
2566
2581
|
var import_styled_components16 = require("styled-components");
|
|
@@ -2764,7 +2779,7 @@ var buttonSizeStyles = {
|
|
|
2764
2779
|
};
|
|
2765
2780
|
|
|
2766
2781
|
// src/components/Icon/Icon.tsx
|
|
2767
|
-
var
|
|
2782
|
+
var import_type_guards12 = require("@wistia/type-guards");
|
|
2768
2783
|
var import_styled_components18 = __toESM(require("styled-components"));
|
|
2769
2784
|
|
|
2770
2785
|
// src/components/Icon/icons/AbTestIcon.tsx
|
|
@@ -6619,7 +6634,7 @@ var iconMap = {
|
|
|
6619
6634
|
};
|
|
6620
6635
|
|
|
6621
6636
|
// src/private/hooks/useResponsiveProp/useResponsiveProp.ts
|
|
6622
|
-
var
|
|
6637
|
+
var import_type_guards11 = require("@wistia/type-guards");
|
|
6623
6638
|
var import_react12 = require("react");
|
|
6624
6639
|
var isResponsiveObject = (values) => {
|
|
6625
6640
|
return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
|
|
@@ -6627,9 +6642,9 @@ var isResponsiveObject = (values) => {
|
|
|
6627
6642
|
var useResponsiveProp = (values) => {
|
|
6628
6643
|
const activeMediaQueries = useActiveMq();
|
|
6629
6644
|
return (0, import_react12.useMemo)(() => {
|
|
6630
|
-
if ((0,
|
|
6645
|
+
if ((0, import_type_guards11.isRecord)(values) && isResponsiveObject(values)) {
|
|
6631
6646
|
const mq2 = activeMediaQueries.find((key) => key in values);
|
|
6632
|
-
return (0,
|
|
6647
|
+
return (0, import_type_guards11.isNotUndefined)(mq2) && (0, import_type_guards11.isNotUndefined)(values[mq2]) ? values[mq2] : values.base;
|
|
6633
6648
|
}
|
|
6634
6649
|
return values;
|
|
6635
6650
|
}, [activeMediaQueries, values]);
|
|
@@ -6656,13 +6671,13 @@ var Icon = ({
|
|
|
6656
6671
|
...otherProps
|
|
6657
6672
|
}) => {
|
|
6658
6673
|
const responsiveSize = useResponsiveProp(size);
|
|
6659
|
-
if ((0,
|
|
6674
|
+
if ((0, import_type_guards12.isNil)(type)) {
|
|
6660
6675
|
throw new Error("An Icon component requires a `type` prop to be provided");
|
|
6661
6676
|
}
|
|
6662
|
-
if ((0,
|
|
6677
|
+
if ((0, import_type_guards12.isNil)(iconMap[type])) {
|
|
6663
6678
|
throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
|
|
6664
6679
|
}
|
|
6665
|
-
if ((0,
|
|
6680
|
+
if ((0, import_type_guards12.isNil)(iconSizeMap[responsiveSize])) {
|
|
6666
6681
|
throw new Error(
|
|
6667
6682
|
`Size "${responsiveSize}" does not exist, please update size prop in Icon component.`
|
|
6668
6683
|
);
|
|
@@ -6694,12 +6709,12 @@ Icon.displayName = "Icon";
|
|
|
6694
6709
|
|
|
6695
6710
|
// src/components/Link/Link.tsx
|
|
6696
6711
|
var import_react13 = require("react");
|
|
6697
|
-
var
|
|
6712
|
+
var import_type_guards13 = require("@wistia/type-guards");
|
|
6698
6713
|
var import_styled_components19 = __toESM(require("styled-components"));
|
|
6699
6714
|
var import_react_router_dom = require("react-router-dom");
|
|
6700
6715
|
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
6701
6716
|
var generateHref = (href, type, disabled) => {
|
|
6702
|
-
if (disabled || (0,
|
|
6717
|
+
if (disabled || (0, import_type_guards13.isNil)(href)) {
|
|
6703
6718
|
return void 0;
|
|
6704
6719
|
}
|
|
6705
6720
|
let to = href;
|
|
@@ -6711,12 +6726,12 @@ var generateHref = (href, type, disabled) => {
|
|
|
6711
6726
|
}
|
|
6712
6727
|
return to;
|
|
6713
6728
|
};
|
|
6714
|
-
var isButton = (props) => (0,
|
|
6715
|
-
var isLink = (props) => (0,
|
|
6729
|
+
var isButton = (props) => (0, import_type_guards13.isUndefined)(props.href);
|
|
6730
|
+
var isLink = (props) => (0, import_type_guards13.isNotUndefined)(props.href);
|
|
6716
6731
|
var StyledLink = import_styled_components19.default.a`
|
|
6717
6732
|
--link-icon-size: 14px;
|
|
6718
6733
|
|
|
6719
|
-
${({ href }) => (0,
|
|
6734
|
+
${({ href }) => (0, import_type_guards13.isNil)(href) && buttonResetCss};
|
|
6720
6735
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
6721
6736
|
cursor: pointer;
|
|
6722
6737
|
font-family: var(--wui-typography-family-default);
|
|
@@ -6757,16 +6772,16 @@ var Link = (0, import_react13.forwardRef)(
|
|
|
6757
6772
|
} catch (error) {
|
|
6758
6773
|
console.error(error);
|
|
6759
6774
|
} finally {
|
|
6760
|
-
if ((0,
|
|
6775
|
+
if ((0, import_type_guards13.isFunction)(props.onClick)) {
|
|
6761
6776
|
props.onClick(event);
|
|
6762
6777
|
} else if (routingCallback !== null) {
|
|
6763
6778
|
routingCallback();
|
|
6764
|
-
} else if ((0,
|
|
6779
|
+
} else if ((0, import_type_guards13.isNotNil)(to)) {
|
|
6765
6780
|
window.location.assign(to);
|
|
6766
6781
|
} else {
|
|
6767
6782
|
}
|
|
6768
6783
|
}
|
|
6769
|
-
} else if ((0,
|
|
6784
|
+
} else if ((0, import_type_guards13.isFunction)(props.onClick)) {
|
|
6770
6785
|
props.onClick(event);
|
|
6771
6786
|
} else {
|
|
6772
6787
|
}
|
|
@@ -6827,7 +6842,7 @@ Link.displayName = "Link";
|
|
|
6827
6842
|
|
|
6828
6843
|
// src/components/Button/Button.tsx
|
|
6829
6844
|
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
6830
|
-
var isLink2 = (props) => (0,
|
|
6845
|
+
var isLink2 = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
|
|
6831
6846
|
var StyledButton = import_styled_components20.default.button`
|
|
6832
6847
|
${buttonResetCss}
|
|
6833
6848
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
@@ -6867,8 +6882,8 @@ var ButtonContent = ({
|
|
|
6867
6882
|
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
|
|
6868
6883
|
StyledButtonContent,
|
|
6869
6884
|
{
|
|
6870
|
-
$hasLeftIcon: (0,
|
|
6871
|
-
$hasRightIcon: (0,
|
|
6885
|
+
$hasLeftIcon: (0, import_type_guards14.isNotNil)(leftIcon),
|
|
6886
|
+
$hasRightIcon: (0, import_type_guards14.isNotNil)(rightIcon),
|
|
6872
6887
|
$isLoading: isLoading,
|
|
6873
6888
|
children: [
|
|
6874
6889
|
leftIcon ?? null,
|
|
@@ -6936,7 +6951,7 @@ var Button = (0, import_react14.forwardRef)(
|
|
|
6936
6951
|
event.preventDefault();
|
|
6937
6952
|
return;
|
|
6938
6953
|
}
|
|
6939
|
-
if ((0,
|
|
6954
|
+
if ((0, import_type_guards14.isNotNil)(onClick)) {
|
|
6940
6955
|
onClick(event);
|
|
6941
6956
|
}
|
|
6942
6957
|
};
|
|
@@ -7103,7 +7118,7 @@ ActionButton.displayName = "ActionButton";
|
|
|
7103
7118
|
|
|
7104
7119
|
// src/components/Avatar/Avatar.tsx
|
|
7105
7120
|
var import_react16 = require("react");
|
|
7106
|
-
var
|
|
7121
|
+
var import_type_guards16 = require("@wistia/type-guards");
|
|
7107
7122
|
var import_styled_components23 = __toESM(require("styled-components"));
|
|
7108
7123
|
|
|
7109
7124
|
// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
|
|
@@ -7146,13 +7161,13 @@ var ColorSchemeWrapper = ({
|
|
|
7146
7161
|
ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
|
|
7147
7162
|
|
|
7148
7163
|
// src/components/Avatar/formatNameForDisplay.tsx
|
|
7149
|
-
var
|
|
7164
|
+
var import_type_guards15 = require("@wistia/type-guards");
|
|
7150
7165
|
var containsEmojiCharacter = (char) => {
|
|
7151
7166
|
const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
|
|
7152
7167
|
return emojiRegex.test(char);
|
|
7153
7168
|
};
|
|
7154
7169
|
var formatNameForDisplay = (name) => {
|
|
7155
|
-
if ((0,
|
|
7170
|
+
if ((0, import_type_guards15.isNil)(name) || !(0, import_type_guards15.isString)(name) || (0, import_type_guards15.isEmptyString)(name) || containsEmojiCharacter(name)) {
|
|
7156
7171
|
return "U";
|
|
7157
7172
|
}
|
|
7158
7173
|
const firstChar = name.trim().substring(0, 1);
|
|
@@ -7215,7 +7230,7 @@ var AvatarWrapper = import_styled_components23.default.div`
|
|
|
7215
7230
|
max-height: ${({ $maxHeight }) => $maxHeight}px;
|
|
7216
7231
|
`;
|
|
7217
7232
|
var chooseColorScheme = (name) => {
|
|
7218
|
-
if ((0,
|
|
7233
|
+
if ((0, import_type_guards16.isNil)(name) || name === "Anonymous") {
|
|
7219
7234
|
return "default";
|
|
7220
7235
|
}
|
|
7221
7236
|
const filteredColors = colorSchemeOptions.filter(
|
|
@@ -7248,7 +7263,7 @@ var Avatar = ({
|
|
|
7248
7263
|
};
|
|
7249
7264
|
const avatarSize = heightAndWidth ?? avatarSizeMap[size];
|
|
7250
7265
|
const avatarColor = (0, import_react16.useMemo)(() => chooseColorScheme(name), [name]);
|
|
7251
|
-
const showInitials = (0,
|
|
7266
|
+
const showInitials = (0, import_type_guards16.isNil)(imageUrl) || imageLoadState === "error";
|
|
7252
7267
|
return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
7253
7268
|
AvatarWrapper,
|
|
7254
7269
|
{
|
|
@@ -7279,7 +7294,7 @@ Avatar.displayName = "Avatar";
|
|
|
7279
7294
|
// src/components/Badge/Badge.tsx
|
|
7280
7295
|
var import_react17 = require("react");
|
|
7281
7296
|
var import_styled_components24 = __toESM(require("styled-components"));
|
|
7282
|
-
var
|
|
7297
|
+
var import_type_guards17 = require("@wistia/type-guards");
|
|
7283
7298
|
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
7284
7299
|
var StyledBadge = import_styled_components24.default.div`
|
|
7285
7300
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
@@ -7303,7 +7318,7 @@ var StyledBadge = import_styled_components24.default.div`
|
|
|
7303
7318
|
`;
|
|
7304
7319
|
var Badge = (0, import_react17.forwardRef)(
|
|
7305
7320
|
({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
|
|
7306
|
-
const hasIcon = (0,
|
|
7321
|
+
const hasIcon = (0, import_type_guards17.isNotNil)(icon);
|
|
7307
7322
|
return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
|
|
7308
7323
|
StyledBadge,
|
|
7309
7324
|
{
|
|
@@ -7324,7 +7339,7 @@ Badge.displayName = "Badge";
|
|
|
7324
7339
|
// src/components/Box/Box.tsx
|
|
7325
7340
|
var import_react18 = require("react");
|
|
7326
7341
|
var import_styled_components25 = __toESM(require("styled-components"));
|
|
7327
|
-
var
|
|
7342
|
+
var import_type_guards18 = require("@wistia/type-guards");
|
|
7328
7343
|
|
|
7329
7344
|
// src/private/helpers/makePolymorphic/makePolymorphic.tsx
|
|
7330
7345
|
var makePolymorphic = (component) => {
|
|
@@ -7335,8 +7350,8 @@ var makePolymorphic = (component) => {
|
|
|
7335
7350
|
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
7336
7351
|
var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
|
|
7337
7352
|
var getGapStyle = (gap) => {
|
|
7338
|
-
if ((0,
|
|
7339
|
-
if ((0,
|
|
7353
|
+
if ((0, import_type_guards18.isNotNil)(gap)) {
|
|
7354
|
+
if ((0, import_type_guards18.isRecord)(gap)) {
|
|
7340
7355
|
return Object.entries(gap).map(([key, value]) => {
|
|
7341
7356
|
return `${key}-gap: var(--wui-${value})};`;
|
|
7342
7357
|
}).join("");
|
|
@@ -7411,8 +7426,8 @@ var StyledBoxComponent = import_styled_components25.default.div`
|
|
|
7411
7426
|
align-content: ${({ $alignContent }) => $alignContent};
|
|
7412
7427
|
align-items: ${({ $alignItems }) => $alignItems};
|
|
7413
7428
|
align-self: ${({ $alignSelf }) => $alignSelf ?? null};
|
|
7414
|
-
display: ${({ $inline }) => (0,
|
|
7415
|
-
flex-basis: ${({ $basis }) => (0,
|
|
7429
|
+
display: ${({ $inline }) => (0, import_type_guards18.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
|
|
7430
|
+
flex-basis: ${({ $basis }) => (0, import_type_guards18.isNotNil)($basis) ? $basis : null};
|
|
7416
7431
|
flex-direction: ${({ $flexDirection }) => $flexDirection};
|
|
7417
7432
|
${({ $fillBox: fill }) => getFillStyle(fill)};
|
|
7418
7433
|
${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
|
|
@@ -7422,17 +7437,17 @@ var StyledBoxComponent = import_styled_components25.default.div`
|
|
|
7422
7437
|
width: ${({ $width }) => $width ?? null};
|
|
7423
7438
|
|
|
7424
7439
|
/* Box children styles */
|
|
7425
|
-
flex-grow: ${({ $grow }) => (0,
|
|
7426
|
-
flex-shrink: ${({ $shrink }) => (0,
|
|
7440
|
+
flex-grow: ${({ $grow }) => (0, import_type_guards18.isNotNil)($grow) ? $grow : null};
|
|
7441
|
+
flex-shrink: ${({ $shrink }) => (0, import_type_guards18.isNotNil)($shrink) ? $shrink : null};
|
|
7427
7442
|
flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
|
|
7428
7443
|
justify-content: ${({ $justifyContent }) => $justifyContent};
|
|
7429
|
-
order: ${({ $order }) => (0,
|
|
7444
|
+
order: ${({ $order }) => (0, import_type_guards18.isNotNil)($order) ? $order : null};
|
|
7430
7445
|
`;
|
|
7431
7446
|
var wrapChildren = (children) => {
|
|
7432
|
-
if ((0,
|
|
7447
|
+
if ((0, import_type_guards18.isNotNil)(children)) {
|
|
7433
7448
|
if (typeof children === "object" && isDev) {
|
|
7434
7449
|
return import_react18.Children.map(children, (child) => {
|
|
7435
|
-
if ((0,
|
|
7450
|
+
if ((0, import_type_guards18.isNil)(child)) return null;
|
|
7436
7451
|
const elementParams = {};
|
|
7437
7452
|
if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
|
|
7438
7453
|
elementParams.hasBoxParent = true;
|
|
@@ -7470,7 +7485,7 @@ var BoxComponent = (0, import_react18.forwardRef)(
|
|
|
7470
7485
|
flexMode,
|
|
7471
7486
|
...otherProps
|
|
7472
7487
|
}, ref) => {
|
|
7473
|
-
if ((0,
|
|
7488
|
+
if ((0, import_type_guards18.isNotUndefined)(height)) {
|
|
7474
7489
|
if (fill === true || fill === "vertical") {
|
|
7475
7490
|
throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
|
|
7476
7491
|
}
|
|
@@ -7480,7 +7495,7 @@ var BoxComponent = (0, import_react18.forwardRef)(
|
|
|
7480
7495
|
);
|
|
7481
7496
|
}
|
|
7482
7497
|
}
|
|
7483
|
-
if ((0,
|
|
7498
|
+
if ((0, import_type_guards18.isNotUndefined)(width)) {
|
|
7484
7499
|
if (fill === true || fill === "horizontal") {
|
|
7485
7500
|
throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
|
|
7486
7501
|
}
|
|
@@ -7605,7 +7620,7 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
|
|
|
7605
7620
|
|
|
7606
7621
|
// src/components/ButtonGroup/ButtonGroup.tsx
|
|
7607
7622
|
var import_styled_components28 = __toESM(require("styled-components"));
|
|
7608
|
-
var
|
|
7623
|
+
var import_type_guards19 = require("@wistia/type-guards");
|
|
7609
7624
|
var import_jsx_runtime201 = require("react/jsx-runtime");
|
|
7610
7625
|
var getAlignment = (align) => {
|
|
7611
7626
|
if (align === "center") {
|
|
@@ -7651,7 +7666,7 @@ var ButtonGroup = ({
|
|
|
7651
7666
|
collapseOnSmallScreens = true,
|
|
7652
7667
|
...otherProps
|
|
7653
7668
|
}) => {
|
|
7654
|
-
if ((0,
|
|
7669
|
+
if ((0, import_type_guards19.isNil)(children)) {
|
|
7655
7670
|
return null;
|
|
7656
7671
|
}
|
|
7657
7672
|
return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
|
|
@@ -7758,15 +7773,15 @@ Center.displayName = "Center";
|
|
|
7758
7773
|
// src/components/Checkbox/Checkbox.tsx
|
|
7759
7774
|
var import_react21 = require("react");
|
|
7760
7775
|
var import_styled_components34 = __toESM(require("styled-components"));
|
|
7761
|
-
var
|
|
7776
|
+
var import_type_guards23 = require("@wistia/type-guards");
|
|
7762
7777
|
|
|
7763
7778
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
7764
7779
|
var import_styled_components33 = __toESM(require("styled-components"));
|
|
7765
|
-
var
|
|
7780
|
+
var import_type_guards22 = require("@wistia/type-guards");
|
|
7766
7781
|
|
|
7767
7782
|
// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
|
|
7768
7783
|
var import_styled_components31 = __toESM(require("styled-components"));
|
|
7769
|
-
var
|
|
7784
|
+
var import_type_guards20 = require("@wistia/type-guards");
|
|
7770
7785
|
var import_jsx_runtime204 = require("react/jsx-runtime");
|
|
7771
7786
|
var disabledStyle = import_styled_components31.css`
|
|
7772
7787
|
color: var(--wui-color-text-disabled);
|
|
@@ -7786,7 +7801,7 @@ var FormControlLabelDescription = ({
|
|
|
7786
7801
|
disabled = false,
|
|
7787
7802
|
...props
|
|
7788
7803
|
}) => {
|
|
7789
|
-
if ((0,
|
|
7804
|
+
if ((0, import_type_guards20.isNil)(children)) {
|
|
7790
7805
|
return null;
|
|
7791
7806
|
}
|
|
7792
7807
|
return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
|
|
@@ -7802,7 +7817,7 @@ FormControlLabelDescription.displayName = "FormControlLabelDescription";
|
|
|
7802
7817
|
|
|
7803
7818
|
// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
|
|
7804
7819
|
var import_styled_components32 = __toESM(require("styled-components"));
|
|
7805
|
-
var
|
|
7820
|
+
var import_type_guards21 = require("@wistia/type-guards");
|
|
7806
7821
|
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
7807
7822
|
var VisuallyHidden = import_styled_components32.default.div({ ...visuallyHiddenStyle });
|
|
7808
7823
|
var VisuallyHiddenButFocusable = import_styled_components32.default.div({
|
|
@@ -7814,7 +7829,7 @@ var ScreenReaderOnly = ({
|
|
|
7814
7829
|
focusable = false,
|
|
7815
7830
|
...otherProps
|
|
7816
7831
|
}) => {
|
|
7817
|
-
const accessibleText = (0,
|
|
7832
|
+
const accessibleText = (0, import_type_guards21.isNotNil)(text) ? text : children;
|
|
7818
7833
|
if (focusable) {
|
|
7819
7834
|
return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
|
|
7820
7835
|
}
|
|
@@ -7854,7 +7869,7 @@ var FormControlLabel = ({
|
|
|
7854
7869
|
hideLabel = false,
|
|
7855
7870
|
...props
|
|
7856
7871
|
}) => {
|
|
7857
|
-
if ((0,
|
|
7872
|
+
if ((0, import_type_guards22.isNil)(label)) {
|
|
7858
7873
|
return null;
|
|
7859
7874
|
}
|
|
7860
7875
|
const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledLabelWrapper, { children: [
|
|
@@ -7868,7 +7883,7 @@ var FormControlLabel = ({
|
|
|
7868
7883
|
htmlFor,
|
|
7869
7884
|
...props,
|
|
7870
7885
|
children: [
|
|
7871
|
-
(0,
|
|
7886
|
+
(0, import_type_guards22.isNotNil)(controlSlot) ? controlSlot : null,
|
|
7872
7887
|
labelContent
|
|
7873
7888
|
]
|
|
7874
7889
|
}
|
|
@@ -7992,7 +8007,7 @@ var Checkbox = (0, import_react21.forwardRef)(
|
|
|
7992
8007
|
...props
|
|
7993
8008
|
}, ref) => {
|
|
7994
8009
|
const generatedId = (0, import_react21.useId)();
|
|
7995
|
-
const computedId = (0,
|
|
8010
|
+
const computedId = (0, import_type_guards23.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
|
|
7996
8011
|
return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(StyledCheckboxWrapper, { disabled, children: [
|
|
7997
8012
|
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
|
|
7998
8013
|
StyledHiddenCheckboxInput,
|
|
@@ -8070,7 +8085,7 @@ ClickRegion.displayName = "ClickRegion";
|
|
|
8070
8085
|
|
|
8071
8086
|
// src/components/Collapsible/Collapsible.tsx
|
|
8072
8087
|
var import_react_collapsible = require("@radix-ui/react-collapsible");
|
|
8073
|
-
var
|
|
8088
|
+
var import_type_guards24 = require("@wistia/type-guards");
|
|
8074
8089
|
var import_styled_components35 = __toESM(require("styled-components"));
|
|
8075
8090
|
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8076
8091
|
var StyledRoot = (0, import_styled_components35.default)(import_react_collapsible.Root)`
|
|
@@ -8087,7 +8102,7 @@ var Collapsible = ({
|
|
|
8087
8102
|
onOpenChange
|
|
8088
8103
|
}) => {
|
|
8089
8104
|
const controlProps = {
|
|
8090
|
-
...(0,
|
|
8105
|
+
...(0, import_type_guards24.isNotNil)(onOpenChange) && (0, import_type_guards24.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
|
|
8091
8106
|
};
|
|
8092
8107
|
return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledRoot, { ...controlProps, children });
|
|
8093
8108
|
};
|
|
@@ -8105,13 +8120,13 @@ var CollapsibleTrigger = ({ children }) => {
|
|
|
8105
8120
|
// src/components/Collapsible/CollapsibleContent.tsx
|
|
8106
8121
|
var import_styled_components36 = __toESM(require("styled-components"));
|
|
8107
8122
|
var import_react_collapsible3 = require("@radix-ui/react-collapsible");
|
|
8108
|
-
var
|
|
8123
|
+
var import_type_guards25 = require("@wistia/type-guards");
|
|
8109
8124
|
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
8110
8125
|
var ClampedContent = import_styled_components36.default.div.attrs({ "data-wui-collapsible-content": true })`
|
|
8111
8126
|
--wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
|
|
8112
8127
|
`;
|
|
8113
8128
|
var CollapsibleContent = ({ clamp, children }) => {
|
|
8114
|
-
if ((0,
|
|
8129
|
+
if ((0, import_type_guards25.isNotUndefined)(clamp)) {
|
|
8115
8130
|
return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(ClampedContent, { $clamp: clamp, children });
|
|
8116
8131
|
}
|
|
8117
8132
|
return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_jsx_runtime210.Fragment, { children: [
|
|
@@ -8122,7 +8137,7 @@ var CollapsibleContent = ({ clamp, children }) => {
|
|
|
8122
8137
|
|
|
8123
8138
|
// src/components/DataCards/DataCard.tsx
|
|
8124
8139
|
var import_styled_components38 = __toESM(require("styled-components"));
|
|
8125
|
-
var
|
|
8140
|
+
var import_type_guards26 = require("@wistia/type-guards");
|
|
8126
8141
|
|
|
8127
8142
|
// src/components/Heading/Heading.tsx
|
|
8128
8143
|
var import_react24 = require("react");
|
|
@@ -8331,8 +8346,8 @@ var DataCard = ({
|
|
|
8331
8346
|
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledLoadingValue, {}) : value
|
|
8332
8347
|
}
|
|
8333
8348
|
),
|
|
8334
|
-
(0,
|
|
8335
|
-
(0,
|
|
8349
|
+
(0, import_type_guards26.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledSlot, { children: upperRightSlot }),
|
|
8350
|
+
(0, import_type_guards26.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(StyledDataCardTrendContainer, { children: trend })
|
|
8336
8351
|
]
|
|
8337
8352
|
}
|
|
8338
8353
|
);
|
|
@@ -8769,7 +8784,7 @@ Tooltip.displayName = "Tooltip";
|
|
|
8769
8784
|
// src/components/Input/Input.tsx
|
|
8770
8785
|
var import_react26 = require("react");
|
|
8771
8786
|
var import_styled_components44 = __toESM(require("styled-components"));
|
|
8772
|
-
var
|
|
8787
|
+
var import_type_guards27 = require("@wistia/type-guards");
|
|
8773
8788
|
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
8774
8789
|
var inputStyles = import_styled_components44.css`
|
|
8775
8790
|
--wui-input-color-bg: var(--wui-color-bg-surface);
|
|
@@ -8869,27 +8884,27 @@ var Input = (0, import_react26.forwardRef)(
|
|
|
8869
8884
|
const internalRef = (0, import_react26.useRef)();
|
|
8870
8885
|
const ref = (
|
|
8871
8886
|
// eslint-disable-next-line react-compiler/react-compiler
|
|
8872
|
-
(0,
|
|
8887
|
+
(0, import_type_guards27.isNotNil)(externalRef) && (0, import_type_guards27.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
|
|
8873
8888
|
);
|
|
8874
8889
|
let leftIconToDisplay = leftIcon;
|
|
8875
|
-
if ((0,
|
|
8890
|
+
if ((0, import_type_guards27.isNil)(leftIcon) && type === "search") {
|
|
8876
8891
|
leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Icon, { type: "search" });
|
|
8877
8892
|
}
|
|
8878
|
-
if ((0,
|
|
8893
|
+
if ((0, import_type_guards27.isNotNil)(leftIconToDisplay)) {
|
|
8879
8894
|
leftIconToDisplay = (0, import_react26.cloneElement)(leftIconToDisplay, {
|
|
8880
8895
|
size: "md",
|
|
8881
8896
|
className: "wui-input-left-icon"
|
|
8882
8897
|
});
|
|
8883
8898
|
}
|
|
8884
8899
|
let rightIconToDisplay = rightIcon;
|
|
8885
|
-
if ((0,
|
|
8900
|
+
if ((0, import_type_guards27.isNotNil)(rightIconToDisplay)) {
|
|
8886
8901
|
rightIconToDisplay = (0, import_react26.cloneElement)(rightIconToDisplay, {
|
|
8887
8902
|
size: "md",
|
|
8888
8903
|
className: "wui-input-right-icon"
|
|
8889
8904
|
});
|
|
8890
8905
|
}
|
|
8891
8906
|
const handleFocus = (event) => {
|
|
8892
|
-
if ((0,
|
|
8907
|
+
if ((0, import_type_guards27.isNotNil)(props.onFocus)) {
|
|
8893
8908
|
props.onFocus(event);
|
|
8894
8909
|
}
|
|
8895
8910
|
if (autoSelect && isValidRef(ref) && "current" in ref) {
|
|
@@ -9070,7 +9085,7 @@ var EditableHeading = ({
|
|
|
9070
9085
|
// src/components/Form/Form.tsx
|
|
9071
9086
|
var import_react29 = require("react");
|
|
9072
9087
|
var import_styled_components47 = __toESM(require("styled-components"));
|
|
9073
|
-
var
|
|
9088
|
+
var import_type_guards28 = require("@wistia/type-guards");
|
|
9074
9089
|
|
|
9075
9090
|
// src/components/Stack/Stack.tsx
|
|
9076
9091
|
var import_react28 = require("react");
|
|
@@ -9136,7 +9151,7 @@ var FormComponent = ({
|
|
|
9136
9151
|
const id = props.id ?? autoId;
|
|
9137
9152
|
const handleValidate = (nextFormData) => {
|
|
9138
9153
|
const nextData = Object.fromEntries(nextFormData.entries());
|
|
9139
|
-
if ((0,
|
|
9154
|
+
if ((0, import_type_guards28.isUndefined)(validate)) {
|
|
9140
9155
|
return {};
|
|
9141
9156
|
}
|
|
9142
9157
|
return validate(nextData);
|
|
@@ -9146,7 +9161,7 @@ var FormComponent = ({
|
|
|
9146
9161
|
props.onBlur(event);
|
|
9147
9162
|
}
|
|
9148
9163
|
const formData = new FormData(event.currentTarget);
|
|
9149
|
-
if ((0,
|
|
9164
|
+
if ((0, import_type_guards28.isNotUndefined)(validate)) {
|
|
9150
9165
|
handleValidate(formData);
|
|
9151
9166
|
}
|
|
9152
9167
|
};
|
|
@@ -9243,7 +9258,7 @@ var useFormState = (action, initialData = {}) => {
|
|
|
9243
9258
|
|
|
9244
9259
|
// src/components/Form/FormErrorSummary.tsx
|
|
9245
9260
|
var import_react31 = require("react");
|
|
9246
|
-
var
|
|
9261
|
+
var import_type_guards29 = require("@wistia/type-guards");
|
|
9247
9262
|
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
9248
9263
|
var ErrorItem = ({ name, error, formId }) => {
|
|
9249
9264
|
return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
|
|
@@ -9257,8 +9272,8 @@ var FormErrorSummary = ({ description }) => {
|
|
|
9257
9272
|
}
|
|
9258
9273
|
return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { ref, children: [
|
|
9259
9274
|
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)("p", { children: description }),
|
|
9260
|
-
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0,
|
|
9261
|
-
([name, error]) => (0,
|
|
9275
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards29.isNotUndefined)(error)).map(
|
|
9276
|
+
([name, error]) => (0, import_type_guards29.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
|
|
9262
9277
|
ErrorItem,
|
|
9263
9278
|
{
|
|
9264
9279
|
error: err,
|
|
@@ -9282,7 +9297,7 @@ var FormErrorSummary = ({ description }) => {
|
|
|
9282
9297
|
// src/components/FormField/FormField.tsx
|
|
9283
9298
|
var import_react34 = require("react");
|
|
9284
9299
|
var import_styled_components50 = __toESM(require("styled-components"));
|
|
9285
|
-
var
|
|
9300
|
+
var import_type_guards30 = require("@wistia/type-guards");
|
|
9286
9301
|
|
|
9287
9302
|
// src/components/Label/Label.tsx
|
|
9288
9303
|
var import_styled_components48 = __toESM(require("styled-components"));
|
|
@@ -9442,7 +9457,7 @@ var StyledErrorList = import_styled_components50.default.ul`
|
|
|
9442
9457
|
gap: var(--wui-space-01);
|
|
9443
9458
|
`;
|
|
9444
9459
|
var ErrorMessages = ({ errors, id }) => {
|
|
9445
|
-
const isMultipleErrors = (0,
|
|
9460
|
+
const isMultipleErrors = (0, import_type_guards30.isArray)(errors);
|
|
9446
9461
|
return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
|
|
9447
9462
|
Text,
|
|
9448
9463
|
{
|
|
@@ -9492,19 +9507,19 @@ var FormField = ({
|
|
|
9492
9507
|
"aria-describedby": ariaDescribedby,
|
|
9493
9508
|
...props
|
|
9494
9509
|
};
|
|
9495
|
-
if ((0,
|
|
9510
|
+
if ((0, import_type_guards30.isUndefined)(value) && (0, import_type_guards30.isNotUndefined)(defaultValue)) {
|
|
9496
9511
|
childProps = {
|
|
9497
9512
|
...childProps,
|
|
9498
9513
|
defaultValue
|
|
9499
9514
|
};
|
|
9500
9515
|
}
|
|
9501
|
-
if ((0,
|
|
9502
|
-
const computedName = (0,
|
|
9516
|
+
if ((0, import_type_guards30.isNotNil)(checkboxGroup)) {
|
|
9517
|
+
const computedName = (0, import_type_guards30.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
|
|
9503
9518
|
const handleChange = (event) => {
|
|
9504
|
-
if ((0,
|
|
9519
|
+
if ((0, import_type_guards30.isNotUndefined)(props.onChange)) {
|
|
9505
9520
|
props.onChange(event);
|
|
9506
9521
|
}
|
|
9507
|
-
if ((0,
|
|
9522
|
+
if ((0, import_type_guards30.isNotUndefined)(checkboxGroup.onChange)) {
|
|
9508
9523
|
checkboxGroup.onChange(event);
|
|
9509
9524
|
}
|
|
9510
9525
|
};
|
|
@@ -9512,7 +9527,7 @@ var FormField = ({
|
|
|
9512
9527
|
...childProps,
|
|
9513
9528
|
name: computedName,
|
|
9514
9529
|
onChange: handleChange,
|
|
9515
|
-
"aria-invalid": (0,
|
|
9530
|
+
"aria-invalid": (0, import_type_guards30.isNotNil)(error)
|
|
9516
9531
|
};
|
|
9517
9532
|
}
|
|
9518
9533
|
import_react34.Children.only(children);
|
|
@@ -9523,9 +9538,9 @@ var FormField = ({
|
|
|
9523
9538
|
"data-label-position": labelPosition ?? formState.labelPosition,
|
|
9524
9539
|
children: [
|
|
9525
9540
|
!isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Label, { htmlFor: computedId, children: label }),
|
|
9526
|
-
(0,
|
|
9541
|
+
(0, import_type_guards30.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
|
|
9527
9542
|
(0, import_react34.cloneElement)(children, childProps),
|
|
9528
|
-
(0,
|
|
9543
|
+
(0, import_type_guards30.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(import_jsx_runtime226.Fragment, { children: [
|
|
9529
9544
|
/* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", {}),
|
|
9530
9545
|
/* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
|
|
9531
9546
|
ErrorMessages,
|
|
@@ -9602,7 +9617,7 @@ IconButton.displayName = "IconButton";
|
|
|
9602
9617
|
|
|
9603
9618
|
// src/components/Image/Image.tsx
|
|
9604
9619
|
var import_styled_components52 = __toESM(require("styled-components"));
|
|
9605
|
-
var
|
|
9620
|
+
var import_type_guards31 = require("@wistia/type-guards");
|
|
9606
9621
|
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
9607
9622
|
var getFillStyle2 = (fillContainer) => {
|
|
9608
9623
|
if (fillContainer === "horizontal") {
|
|
@@ -9620,7 +9635,7 @@ var getFillStyle2 = (fillContainer) => {
|
|
|
9620
9635
|
return void 0;
|
|
9621
9636
|
};
|
|
9622
9637
|
var StyledImage = import_styled_components52.default.img`
|
|
9623
|
-
border-radius: ${({ $borderRadius }) => (0,
|
|
9638
|
+
border-radius: ${({ $borderRadius }) => (0, import_type_guards31.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
|
|
9624
9639
|
${({ $fillContainer }) => getFillStyle2($fillContainer)};
|
|
9625
9640
|
object-fit: ${({ $objFit }) => $objFit};
|
|
9626
9641
|
object-position: ${({ $objPosition }) => $objPosition};
|
|
@@ -9652,7 +9667,7 @@ Image.displayName = "Image";
|
|
|
9652
9667
|
// src/components/Menu/Menu.tsx
|
|
9653
9668
|
var import_styled_components53 = __toESM(require("styled-components"));
|
|
9654
9669
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
9655
|
-
var
|
|
9670
|
+
var import_type_guards32 = require("@wistia/type-guards");
|
|
9656
9671
|
var import_react38 = require("react");
|
|
9657
9672
|
|
|
9658
9673
|
// src/components/Menu/MenuContext.tsx
|
|
@@ -9764,7 +9779,7 @@ var Menu = ({
|
|
|
9764
9779
|
}) => {
|
|
9765
9780
|
const contextValue = (0, import_react38.useMemo)(() => ({ compact }), [compact]);
|
|
9766
9781
|
let controlProps = {
|
|
9767
|
-
...(0,
|
|
9782
|
+
...(0, import_type_guards32.isNotNil)(onOpenChange) && (0, import_type_guards32.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
|
|
9768
9783
|
};
|
|
9769
9784
|
if (disabled) {
|
|
9770
9785
|
controlProps = {
|
|
@@ -9778,7 +9793,7 @@ var Menu = ({
|
|
|
9778
9793
|
modal: false,
|
|
9779
9794
|
...controlProps,
|
|
9780
9795
|
children: [
|
|
9781
|
-
/* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0,
|
|
9796
|
+
/* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards32.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
|
|
9782
9797
|
Button,
|
|
9783
9798
|
{
|
|
9784
9799
|
"aria-expanded": isOpen,
|
|
@@ -9839,12 +9854,12 @@ MenuLabel.displayName = "MenuLabel";
|
|
|
9839
9854
|
var import_react40 = require("react");
|
|
9840
9855
|
var import_styled_components57 = __toESM(require("styled-components"));
|
|
9841
9856
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
9842
|
-
var
|
|
9857
|
+
var import_type_guards34 = require("@wistia/type-guards");
|
|
9843
9858
|
|
|
9844
9859
|
// src/components/Menu/MenuItemButton.tsx
|
|
9845
9860
|
var import_react39 = require("react");
|
|
9846
9861
|
var import_styled_components55 = __toESM(require("styled-components"));
|
|
9847
|
-
var
|
|
9862
|
+
var import_type_guards33 = require("@wistia/type-guards");
|
|
9848
9863
|
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
9849
9864
|
var StyledButton3 = (0, import_styled_components55.default)(Button)`
|
|
9850
9865
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
@@ -9922,7 +9937,7 @@ var StyledBadgeContainer = import_styled_components55.default.div`
|
|
|
9922
9937
|
var MenuItemButton = (0, import_react39.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
|
|
9923
9938
|
let { colorScheme, badge } = props;
|
|
9924
9939
|
if (appearance === "dangerous") {
|
|
9925
|
-
if ((0,
|
|
9940
|
+
if ((0, import_type_guards33.isNotUndefined)(colorScheme)) {
|
|
9926
9941
|
console.warn("colorScheme prop is ignored when appearance is dangerous");
|
|
9927
9942
|
}
|
|
9928
9943
|
colorScheme = "error";
|
|
@@ -9952,7 +9967,7 @@ var MenuItemButton = (0, import_react39.forwardRef)(({ children, appearance, com
|
|
|
9952
9967
|
children: [
|
|
9953
9968
|
props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
9954
9969
|
/* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledLabelAndDescriptionContainer, { children }),
|
|
9955
|
-
(0,
|
|
9970
|
+
(0, import_type_guards33.isNotNil)(badge) || (0, import_type_guards33.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
|
|
9956
9971
|
props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
9957
9972
|
]
|
|
9958
9973
|
}
|
|
@@ -10020,7 +10035,7 @@ var SubMenu = ({
|
|
|
10020
10035
|
return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
|
|
10021
10036
|
/* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(SubMenuTrigger, { ...props, children: [
|
|
10022
10037
|
/* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemLabel, { children: label }),
|
|
10023
|
-
(0,
|
|
10038
|
+
(0, import_type_guards34.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemDescription, { children: description }) : null
|
|
10024
10039
|
] }),
|
|
10025
10040
|
/* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(SubMenuContent, { $compact: compact, children }) })
|
|
10026
10041
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
|
|
@@ -10200,7 +10215,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
|
|
|
10200
10215
|
var import_react45 = require("react");
|
|
10201
10216
|
var import_styled_components62 = __toESM(require("styled-components"));
|
|
10202
10217
|
var import_react_dialog4 = require("@radix-ui/react-dialog");
|
|
10203
|
-
var
|
|
10218
|
+
var import_type_guards36 = require("@wistia/type-guards");
|
|
10204
10219
|
|
|
10205
10220
|
// src/components/Modal/ModalHeader.tsx
|
|
10206
10221
|
var import_styled_components59 = __toESM(require("styled-components"));
|
|
@@ -10263,7 +10278,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
|
10263
10278
|
|
|
10264
10279
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
10265
10280
|
var import_react42 = require("react");
|
|
10266
|
-
var
|
|
10281
|
+
var import_type_guards35 = require("@wistia/type-guards");
|
|
10267
10282
|
var useFocusRestore = () => {
|
|
10268
10283
|
const previouslyFocusedRef = (0, import_react42.useRef)(null);
|
|
10269
10284
|
(0, import_react42.useEffect)(() => {
|
|
@@ -10271,7 +10286,7 @@ var useFocusRestore = () => {
|
|
|
10271
10286
|
}, []);
|
|
10272
10287
|
(0, import_react42.useEffect)(() => {
|
|
10273
10288
|
return () => {
|
|
10274
|
-
if ((0,
|
|
10289
|
+
if ((0, import_type_guards35.isNotNil)(previouslyFocusedRef.current)) {
|
|
10275
10290
|
setTimeout(() => {
|
|
10276
10291
|
previouslyFocusedRef.current?.focus();
|
|
10277
10292
|
}, 0);
|
|
@@ -10418,7 +10433,7 @@ var Modal = (0, import_react45.forwardRef)(
|
|
|
10418
10433
|
import_react_dialog4.Root,
|
|
10419
10434
|
{
|
|
10420
10435
|
onOpenChange: (open2) => {
|
|
10421
|
-
if (!open2 && (0,
|
|
10436
|
+
if (!open2 && (0, import_type_guards36.isNotNil)(onRequestClose)) {
|
|
10422
10437
|
onRequestClose();
|
|
10423
10438
|
}
|
|
10424
10439
|
},
|
|
@@ -10431,7 +10446,7 @@ var Modal = (0, import_react45.forwardRef)(
|
|
|
10431
10446
|
ref,
|
|
10432
10447
|
fullHeight,
|
|
10433
10448
|
onOpenAutoFocus: (event) => {
|
|
10434
|
-
if ((0,
|
|
10449
|
+
if ((0, import_type_guards36.isNotNil)(initialFocusRef) && initialFocusRef.current) {
|
|
10435
10450
|
event.preventDefault();
|
|
10436
10451
|
requestAnimationFrame(() => {
|
|
10437
10452
|
initialFocusRef.current?.focus();
|
|
@@ -10465,9 +10480,9 @@ var import_react_popover = require("@radix-ui/react-popover");
|
|
|
10465
10480
|
var import_styled_components63 = __toESM(require("styled-components"));
|
|
10466
10481
|
|
|
10467
10482
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
10468
|
-
var
|
|
10483
|
+
var import_type_guards37 = require("@wistia/type-guards");
|
|
10469
10484
|
var getControlProps = (isOpen, onOpenChange) => {
|
|
10470
|
-
return (0,
|
|
10485
|
+
return (0, import_type_guards37.isNotNil)(onOpenChange) && (0, import_type_guards37.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
|
|
10471
10486
|
};
|
|
10472
10487
|
|
|
10473
10488
|
// src/components/Popover/Popover.tsx
|
|
@@ -10526,7 +10541,7 @@ Popover.displayName = "Popover";
|
|
|
10526
10541
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
10527
10542
|
var import_styled_components64 = __toESM(require("styled-components"));
|
|
10528
10543
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
10529
|
-
var
|
|
10544
|
+
var import_type_guards38 = require("@wistia/type-guards");
|
|
10530
10545
|
var import_jsx_runtime245 = require("react/jsx-runtime");
|
|
10531
10546
|
var ProgressBarWrapper = import_styled_components64.default.div`
|
|
10532
10547
|
--progress-bar-height: 8px;
|
|
@@ -10581,7 +10596,7 @@ var ProgressBar = ({
|
|
|
10581
10596
|
...props
|
|
10582
10597
|
}) => {
|
|
10583
10598
|
return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(ProgressBarWrapper, { children: [
|
|
10584
|
-
(0,
|
|
10599
|
+
(0, import_type_guards38.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
|
|
10585
10600
|
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
|
|
10586
10601
|
StyledProgressBar,
|
|
10587
10602
|
{
|
|
@@ -10597,7 +10612,7 @@ var ProgressBar = ({
|
|
|
10597
10612
|
)
|
|
10598
10613
|
}
|
|
10599
10614
|
),
|
|
10600
|
-
(0,
|
|
10615
|
+
(0, import_type_guards38.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelRight }) : null
|
|
10601
10616
|
] });
|
|
10602
10617
|
};
|
|
10603
10618
|
ProgressBar.displayName = "ProgressBar";
|
|
@@ -10605,7 +10620,7 @@ ProgressBar.displayName = "ProgressBar";
|
|
|
10605
10620
|
// src/components/Radio/Radio.tsx
|
|
10606
10621
|
var import_react46 = require("react");
|
|
10607
10622
|
var import_styled_components65 = __toESM(require("styled-components"));
|
|
10608
|
-
var
|
|
10623
|
+
var import_type_guards39 = require("@wistia/type-guards");
|
|
10609
10624
|
var import_jsx_runtime246 = require("react/jsx-runtime");
|
|
10610
10625
|
var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
10611
10626
|
"svg",
|
|
@@ -10722,7 +10737,7 @@ var Radio = (0, import_react46.forwardRef)(
|
|
|
10722
10737
|
...props
|
|
10723
10738
|
}, ref) => {
|
|
10724
10739
|
const generatedId = (0, import_react46.useId)();
|
|
10725
|
-
const computedId = (0,
|
|
10740
|
+
const computedId = (0, import_type_guards39.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
10726
10741
|
return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
|
|
10727
10742
|
StyledRadioWrapper,
|
|
10728
10743
|
{
|
|
@@ -10774,7 +10789,7 @@ Radio.displayName = "Radio";
|
|
|
10774
10789
|
var import_react50 = require("react");
|
|
10775
10790
|
var import_styled_components67 = __toESM(require("styled-components"));
|
|
10776
10791
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
10777
|
-
var
|
|
10792
|
+
var import_type_guards40 = require("@wistia/type-guards");
|
|
10778
10793
|
|
|
10779
10794
|
// src/components/SegmentedControl/useSelectedItemMeasurements.tsx
|
|
10780
10795
|
var import_react47 = require("react");
|
|
@@ -10885,7 +10900,7 @@ var SegmentedControl = (0, import_react50.forwardRef)(
|
|
|
10885
10900
|
onSelectedValueChange,
|
|
10886
10901
|
...props
|
|
10887
10902
|
}, ref) => {
|
|
10888
|
-
if ((0,
|
|
10903
|
+
if ((0, import_type_guards40.isNil)(children)) {
|
|
10889
10904
|
return null;
|
|
10890
10905
|
}
|
|
10891
10906
|
return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
@@ -10915,22 +10930,6 @@ var import_react51 = require("react");
|
|
|
10915
10930
|
var import_styled_components68 = __toESM(require("styled-components"));
|
|
10916
10931
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
10917
10932
|
var import_type_guards41 = require("@wistia/type-guards");
|
|
10918
|
-
|
|
10919
|
-
// src/private/helpers/mergeRefs/mergeRefs.ts
|
|
10920
|
-
var import_type_guards40 = require("@wistia/type-guards");
|
|
10921
|
-
var mergeRefs = (refs) => (value) => {
|
|
10922
|
-
refs.forEach((ref) => {
|
|
10923
|
-
if ((0, import_type_guards40.isFunction)(ref)) {
|
|
10924
|
-
ref(value);
|
|
10925
|
-
return;
|
|
10926
|
-
}
|
|
10927
|
-
if ((0, import_type_guards40.isNotNil)(ref)) {
|
|
10928
|
-
ref.current = value;
|
|
10929
|
-
}
|
|
10930
|
-
});
|
|
10931
|
-
};
|
|
10932
|
-
|
|
10933
|
-
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
10934
10933
|
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
10935
10934
|
var segmentedControlItemStyles = import_styled_components68.css`
|
|
10936
10935
|
all: unset; /* ToggleGroupItem is a button element */
|
|
@@ -12190,6 +12189,7 @@ WistiaLogo.displayName = "WistiaLogo";
|
|
|
12190
12189
|
ellipsisFlexParentStyle,
|
|
12191
12190
|
ellipsisStyle,
|
|
12192
12191
|
iconSizeMap,
|
|
12192
|
+
mergeRefs,
|
|
12193
12193
|
mq,
|
|
12194
12194
|
useActiveMq,
|
|
12195
12195
|
useAriaLive,
|