@wistia/ui 0.8.23 → 0.8.24-beta.04ae01e6.4365e98
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 +362 -237
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +25 -1
- package/dist/index.d.ts +25 -1
- package/dist/index.mjs +362 -237
- 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.8.
|
|
3
|
+
* @license @wistia/ui v0.8.24-beta.04ae01e6.4365e98
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -10978,6 +10978,36 @@ var useFocusRestore = () => {
|
|
|
10978
10978
|
|
|
10979
10979
|
// src/components/Modal/ModalContent.tsx
|
|
10980
10980
|
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
10981
|
+
var alignTopStyles = import_styled_components64.css`
|
|
10982
|
+
--wui-modal-translate-y: 0;
|
|
10983
|
+
|
|
10984
|
+
top: 0;
|
|
10985
|
+
`;
|
|
10986
|
+
var alignVerticalCenterStyles = import_styled_components64.css`
|
|
10987
|
+
--wui-modal-translate-y: -50%;
|
|
10988
|
+
|
|
10989
|
+
top: 50%;
|
|
10990
|
+
`;
|
|
10991
|
+
var alignBottomStyles = import_styled_components64.css`
|
|
10992
|
+
--wui-modal-translate-y: 0;
|
|
10993
|
+
|
|
10994
|
+
bottom: 0;
|
|
10995
|
+
`;
|
|
10996
|
+
var alignHorizontalCenterStyles = import_styled_components64.css`
|
|
10997
|
+
--wui-modal-translate-x: -50%;
|
|
10998
|
+
|
|
10999
|
+
left: 50%;
|
|
11000
|
+
`;
|
|
11001
|
+
var alignRightStyles = import_styled_components64.css`
|
|
11002
|
+
--wui-modal-translate-x: 0;
|
|
11003
|
+
|
|
11004
|
+
right: 0;
|
|
11005
|
+
`;
|
|
11006
|
+
var alignLeftStyles = import_styled_components64.css`
|
|
11007
|
+
--wui-modal-translate-x: 0;
|
|
11008
|
+
|
|
11009
|
+
left: 0;
|
|
11010
|
+
`;
|
|
10981
11011
|
var StyledModalContent = (0, import_styled_components64.default)(import_react_dialog3.Content)`
|
|
10982
11012
|
background-color: var(--wui-color-bg-app);
|
|
10983
11013
|
box-sizing: border-box;
|
|
@@ -10993,39 +11023,48 @@ var StyledModalContent = (0, import_styled_components64.default)(import_react_di
|
|
|
10993
11023
|
z-index: var(--wui-zindex-modal);
|
|
10994
11024
|
|
|
10995
11025
|
${mq.smAndUp} {
|
|
10996
|
-
|
|
11026
|
+
--wui-modal-screen-offset: var(--wui-space-05);
|
|
11027
|
+
--wui-modal-max-height: calc(100vh - var(--wui-modal-screen-offset) * 2);
|
|
11028
|
+
--wui-modal-max-width: calc(100vw - var(--wui-modal-screen-offset) * 2);
|
|
11029
|
+
|
|
11030
|
+
top: unset;
|
|
11031
|
+
left: unset;
|
|
11032
|
+
${({ $alignVertical }) => $alignVertical === "top" && alignTopStyles}
|
|
11033
|
+
${({ $alignVertical }) => $alignVertical === "center" && alignVerticalCenterStyles}
|
|
11034
|
+
${({ $alignVertical }) => $alignVertical === "bottom" && alignBottomStyles}
|
|
11035
|
+
${({ $alignHorizontal }) => $alignHorizontal === "center" && alignHorizontalCenterStyles}
|
|
11036
|
+
${({ $alignHorizontal }) => $alignHorizontal === "right" && alignRightStyles}
|
|
11037
|
+
${({ $alignHorizontal }) => $alignHorizontal === "left" && alignLeftStyles}
|
|
11038
|
+
animation: contentShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
10997
11039
|
border-radius: var(--wui-border-radius-03);
|
|
10998
|
-
left: 50%;
|
|
10999
|
-
margin: var(--wui-space-02);
|
|
11000
11040
|
height: ${({ $fullHeight }) => $fullHeight ? "min-content" : "auto"};
|
|
11001
|
-
max-height:
|
|
11041
|
+
max-height: var(--wui-modal-max-height);
|
|
11002
11042
|
${({ $fullHeight }) => $fullHeight ? "min-height: calc(100vh - 48px);" : ""}
|
|
11003
|
-
max-width:
|
|
11004
|
-
|
|
11005
|
-
transform: translate(-50%, -50%);
|
|
11043
|
+
max-width: var(--wui-modal-max-width);
|
|
11044
|
+
translate: var(--wui-modal-translate-x) var(--wui-modal-translate-y);
|
|
11006
11045
|
min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
|
|
11007
11046
|
width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
|
|
11008
11047
|
}
|
|
11009
11048
|
|
|
11010
11049
|
@keyframes contentShow {
|
|
11011
11050
|
from {
|
|
11012
|
-
|
|
11013
|
-
transform: translate(-50%, -48%) scale(0.96);
|
|
11051
|
+
scale: 0.96;
|
|
11014
11052
|
}
|
|
11015
11053
|
|
|
11016
11054
|
to {
|
|
11017
|
-
|
|
11018
|
-
transform: translate(-50%, -50%) scale(1);
|
|
11055
|
+
scale: 1;
|
|
11019
11056
|
}
|
|
11020
11057
|
}
|
|
11021
11058
|
`;
|
|
11022
11059
|
var ModalContent = (0, import_react52.forwardRef)(
|
|
11023
|
-
({ fullHeight, width, children, ...props }, ref) => {
|
|
11060
|
+
({ fullHeight, width, alignHorizontal, alignVertical, children, ...props }, ref) => {
|
|
11024
11061
|
useFocusRestore();
|
|
11025
11062
|
return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
11026
11063
|
StyledModalContent,
|
|
11027
11064
|
{
|
|
11028
11065
|
ref,
|
|
11066
|
+
$alignHorizontal: alignHorizontal,
|
|
11067
|
+
$alignVertical: alignVertical,
|
|
11029
11068
|
$fullHeight: fullHeight,
|
|
11030
11069
|
$width: width,
|
|
11031
11070
|
"aria-describedby": void 0,
|
|
@@ -11040,7 +11079,6 @@ var ModalContent = (0, import_react52.forwardRef)(
|
|
|
11040
11079
|
var import_react53 = require("react");
|
|
11041
11080
|
var import_styled_components65 = __toESM(require("styled-components"));
|
|
11042
11081
|
var import_jsx_runtime244 = require("react/jsx-runtime");
|
|
11043
|
-
var backdropAnimationDuration = 150;
|
|
11044
11082
|
var alignVerticalMap = {
|
|
11045
11083
|
stretch: "normal",
|
|
11046
11084
|
top: "start",
|
|
@@ -11054,9 +11092,7 @@ var alignHorizontalMap = {
|
|
|
11054
11092
|
};
|
|
11055
11093
|
var BackdropComponent = import_styled_components65.default.div`
|
|
11056
11094
|
align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
|
|
11057
|
-
animation-name: backdropShow;
|
|
11058
|
-
animation-duration: ${() => `${backdropAnimationDuration}ms`};
|
|
11059
|
-
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
11095
|
+
animation-name: backdropShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
11060
11096
|
background: var(--wui-color-backdrop);
|
|
11061
11097
|
display: flex;
|
|
11062
11098
|
inset: 0;
|
|
@@ -11100,6 +11136,7 @@ var DEFAULT_MODAL_WIDTH = "532px";
|
|
|
11100
11136
|
var ModalBody = import_styled_components66.default.div`
|
|
11101
11137
|
flex-direction: column;
|
|
11102
11138
|
display: flex;
|
|
11139
|
+
flex: 1 0 0;
|
|
11103
11140
|
order: 2;
|
|
11104
11141
|
`;
|
|
11105
11142
|
var Modal = (0, import_react54.forwardRef)(
|
|
@@ -11113,6 +11150,8 @@ var Modal = (0, import_react54.forwardRef)(
|
|
|
11113
11150
|
onRequestClose,
|
|
11114
11151
|
title,
|
|
11115
11152
|
width = DEFAULT_MODAL_WIDTH,
|
|
11153
|
+
alignHorizontal = "center",
|
|
11154
|
+
alignVertical = "center",
|
|
11116
11155
|
...props
|
|
11117
11156
|
}, ref) => {
|
|
11118
11157
|
return /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
|
|
@@ -11130,6 +11169,8 @@ var Modal = (0, import_react54.forwardRef)(
|
|
|
11130
11169
|
ModalContent,
|
|
11131
11170
|
{
|
|
11132
11171
|
ref,
|
|
11172
|
+
alignHorizontal,
|
|
11173
|
+
alignVertical,
|
|
11133
11174
|
fullHeight,
|
|
11134
11175
|
onOpenAutoFocus: (event) => {
|
|
11135
11176
|
if ((0, import_type_guards42.isNotNil)(initialFocusRef) && initialFocusRef.current) {
|
|
@@ -11162,8 +11203,8 @@ var Modal = (0, import_react54.forwardRef)(
|
|
|
11162
11203
|
Modal.displayName = "Modal";
|
|
11163
11204
|
|
|
11164
11205
|
// src/components/Popover/Popover.tsx
|
|
11165
|
-
var
|
|
11166
|
-
var
|
|
11206
|
+
var import_react_popover2 = require("@radix-ui/react-popover");
|
|
11207
|
+
var import_styled_components68 = __toESM(require("styled-components"));
|
|
11167
11208
|
|
|
11168
11209
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
11169
11210
|
var import_type_guards43 = require("@wistia/type-guards");
|
|
@@ -11171,11 +11212,91 @@ var getControlProps = (isOpen, onOpenChange) => {
|
|
|
11171
11212
|
return (0, import_type_guards43.isNotNil)(onOpenChange) && (0, import_type_guards43.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
|
|
11172
11213
|
};
|
|
11173
11214
|
|
|
11174
|
-
// src/components/Popover/
|
|
11215
|
+
// src/components/Popover/PopoverArrow.tsx
|
|
11216
|
+
var import_react_popover = require("@radix-ui/react-popover");
|
|
11217
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
11175
11218
|
var import_jsx_runtime246 = require("react/jsx-runtime");
|
|
11176
|
-
var
|
|
11219
|
+
var StyledPath = import_styled_components67.default.path`
|
|
11220
|
+
fill: var(--wui-color-border-secondary);
|
|
11221
|
+
`;
|
|
11222
|
+
var circleAnimation = import_styled_components67.keyframes`
|
|
11223
|
+
0% {
|
|
11224
|
+
opacity: var(--wui-popover-arrow-circle-starting-opacity);
|
|
11225
|
+
}
|
|
11226
|
+
100% {
|
|
11227
|
+
opacity: 0;
|
|
11228
|
+
}
|
|
11229
|
+
`;
|
|
11230
|
+
var StyledCircle = import_styled_components67.default.circle`
|
|
11231
|
+
stroke: var(--wui-color-border-active);
|
|
11232
|
+
animation-duration: 2s;
|
|
11233
|
+
animation-iteration-count: infinite;
|
|
11234
|
+
animation-direction: alternate;
|
|
11235
|
+
animation-timing-function: ease-in-out;
|
|
11236
|
+
|
|
11237
|
+
&[data-wui-popover-arrow-inner-circle] {
|
|
11238
|
+
--wui-popover-arrow-circle-starting-opacity: 0.36;
|
|
11239
|
+
|
|
11240
|
+
opacity: var(--wui-popover-arrow-circle-starting-opacity);
|
|
11241
|
+
}
|
|
11242
|
+
|
|
11243
|
+
&[data-wui-popover-arrow-outer-circle] {
|
|
11244
|
+
--wui-popover-arrow-circle-starting-opacity: 0.2;
|
|
11245
|
+
|
|
11246
|
+
animation-direction: alternate-reverse;
|
|
11247
|
+
opacity: 0.11;
|
|
11248
|
+
}
|
|
11249
|
+
|
|
11250
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
11251
|
+
${({ $isAnimated }) => $isAnimated && import_styled_components67.css`
|
|
11252
|
+
animation-name: ${circleAnimation};
|
|
11253
|
+
`}
|
|
11254
|
+
}
|
|
11255
|
+
`;
|
|
11256
|
+
var PopoverArrow = ({ isAnimated }) => {
|
|
11257
|
+
return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_popover.PopoverArrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
|
|
11258
|
+
"svg",
|
|
11259
|
+
{
|
|
11260
|
+
fill: "none",
|
|
11261
|
+
height: "56",
|
|
11262
|
+
viewBox: "0 0 48 56",
|
|
11263
|
+
width: "48",
|
|
11264
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
11265
|
+
children: [
|
|
11266
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
|
|
11267
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11268
|
+
StyledCircle,
|
|
11269
|
+
{
|
|
11270
|
+
$isAnimated: isAnimated,
|
|
11271
|
+
cx: "24",
|
|
11272
|
+
cy: "32",
|
|
11273
|
+
"data-wui-popover-arrow-inner-circle": true,
|
|
11274
|
+
r: "10",
|
|
11275
|
+
strokeWidth: "4"
|
|
11276
|
+
}
|
|
11277
|
+
),
|
|
11278
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11279
|
+
StyledCircle,
|
|
11280
|
+
{
|
|
11281
|
+
$isAnimated: isAnimated,
|
|
11282
|
+
cx: "24",
|
|
11283
|
+
cy: "32",
|
|
11284
|
+
"data-wui-popover-arrow-outer-circle": true,
|
|
11285
|
+
r: "20",
|
|
11286
|
+
strokeWidth: "8"
|
|
11287
|
+
}
|
|
11288
|
+
)
|
|
11289
|
+
]
|
|
11290
|
+
}
|
|
11291
|
+
) });
|
|
11292
|
+
};
|
|
11293
|
+
PopoverArrow.displayName = "PopoverArrow";
|
|
11294
|
+
|
|
11295
|
+
// src/components/Popover/Popover.tsx
|
|
11296
|
+
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
11297
|
+
var StyledContent2 = (0, import_styled_components68.default)(import_react_popover2.Content)`
|
|
11177
11298
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11178
|
-
${({ $unstyled }) => !$unstyled &&
|
|
11299
|
+
${({ $unstyled }) => !$unstyled && import_styled_components68.css`
|
|
11179
11300
|
border-radius: var(--wui-border-radius-02);
|
|
11180
11301
|
padding: var(--wui-space-04);
|
|
11181
11302
|
max-width: var(--wui-popover-max-width, 320px);
|
|
@@ -11201,34 +11322,38 @@ var Popover = ({
|
|
|
11201
11322
|
maxHeight = "auto",
|
|
11202
11323
|
onOpenChange,
|
|
11203
11324
|
unstyled = false,
|
|
11325
|
+
withArrow = false,
|
|
11326
|
+
isAnimated = false,
|
|
11204
11327
|
colorScheme = "inherit",
|
|
11205
11328
|
...props
|
|
11206
11329
|
}) => {
|
|
11330
|
+
const sideOffset = withArrow ? -24 : 8;
|
|
11207
11331
|
const style = {
|
|
11208
11332
|
"--wui-popover-max-width": maxWidth,
|
|
11209
11333
|
"--wui-popover-max-height": maxHeight
|
|
11210
11334
|
};
|
|
11211
|
-
return /* @__PURE__ */ (0,
|
|
11212
|
-
/* @__PURE__ */ (0,
|
|
11213
|
-
/* @__PURE__ */ (0,
|
|
11335
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(import_react_popover2.Root, { ...getControlProps(isOpen, onOpenChange), children: [
|
|
11336
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_popover2.Trigger, { asChild: true, children: trigger }),
|
|
11337
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
|
|
11214
11338
|
StyledContent2,
|
|
11215
11339
|
{
|
|
11216
11340
|
$colorScheme: colorScheme,
|
|
11217
|
-
sideOffset
|
|
11341
|
+
sideOffset,
|
|
11218
11342
|
...props,
|
|
11219
11343
|
$unstyled: unstyled,
|
|
11220
11344
|
style,
|
|
11221
11345
|
children: [
|
|
11222
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
11346
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_popover2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11223
11347
|
IconButton,
|
|
11224
11348
|
{
|
|
11225
11349
|
"data-wui-popover-close": true,
|
|
11226
11350
|
label: "Close",
|
|
11227
11351
|
variant: "ghost",
|
|
11228
|
-
children: /* @__PURE__ */ (0,
|
|
11352
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { type: "close" })
|
|
11229
11353
|
}
|
|
11230
11354
|
) }),
|
|
11231
|
-
/* @__PURE__ */ (0,
|
|
11355
|
+
withArrow ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(PopoverArrow, { isAnimated }) : null,
|
|
11356
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)("div", { children })
|
|
11232
11357
|
]
|
|
11233
11358
|
}
|
|
11234
11359
|
) })
|
|
@@ -11237,11 +11362,11 @@ var Popover = ({
|
|
|
11237
11362
|
Popover.displayName = "Popover";
|
|
11238
11363
|
|
|
11239
11364
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
11240
|
-
var
|
|
11365
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
11241
11366
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
11242
11367
|
var import_type_guards44 = require("@wistia/type-guards");
|
|
11243
|
-
var
|
|
11244
|
-
var ProgressBarWrapper =
|
|
11368
|
+
var import_jsx_runtime248 = require("react/jsx-runtime");
|
|
11369
|
+
var ProgressBarWrapper = import_styled_components69.default.div`
|
|
11245
11370
|
--progress-bar-height: 8px;
|
|
11246
11371
|
--progress-bar-indicator-color: var(--wui-color-bg-fill);
|
|
11247
11372
|
--progress-bar-background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -11257,7 +11382,7 @@ var getTranslateValue = (progress, max) => {
|
|
|
11257
11382
|
const progressPercentage = progress / max * 100;
|
|
11258
11383
|
return `translateX(-${100 - progressPercentage}%)`;
|
|
11259
11384
|
};
|
|
11260
|
-
var ProgressBarLabel =
|
|
11385
|
+
var ProgressBarLabel = import_styled_components69.default.div`
|
|
11261
11386
|
display: flex;
|
|
11262
11387
|
line-height: var(--wui-typography-label-3-line-height);
|
|
11263
11388
|
font-size: var(--wui-typography-label-3-size);
|
|
@@ -11265,7 +11390,7 @@ var ProgressBarLabel = import_styled_components68.default.div`
|
|
|
11265
11390
|
color: var(--wui-color-text-secondary);
|
|
11266
11391
|
flex-shrink: 0;
|
|
11267
11392
|
`;
|
|
11268
|
-
var StyledProgressIndicator = (0,
|
|
11393
|
+
var StyledProgressIndicator = (0, import_styled_components69.default)(import_react_progress.Indicator)`
|
|
11269
11394
|
background-color: var(--progress-bar-indicator-color);
|
|
11270
11395
|
width: 100%;
|
|
11271
11396
|
height: 100%;
|
|
@@ -11274,7 +11399,7 @@ var StyledProgressIndicator = (0, import_styled_components68.default)(import_rea
|
|
|
11274
11399
|
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
11275
11400
|
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
11276
11401
|
`;
|
|
11277
|
-
var StyledProgressBar = (0,
|
|
11402
|
+
var StyledProgressBar = (0, import_styled_components69.default)(import_react_progress.Root)`
|
|
11278
11403
|
position: relative;
|
|
11279
11404
|
overflow: hidden;
|
|
11280
11405
|
background: var(--progress-bar-background-color);
|
|
@@ -11293,15 +11418,15 @@ var ProgressBar = ({
|
|
|
11293
11418
|
labelRight,
|
|
11294
11419
|
...props
|
|
11295
11420
|
}) => {
|
|
11296
|
-
return /* @__PURE__ */ (0,
|
|
11297
|
-
(0, import_type_guards44.isNotNil)(labelLeft) ? /* @__PURE__ */ (0,
|
|
11298
|
-
/* @__PURE__ */ (0,
|
|
11421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(ProgressBarWrapper, { children: [
|
|
11422
|
+
(0, import_type_guards44.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
|
|
11423
|
+
/* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
|
|
11299
11424
|
StyledProgressBar,
|
|
11300
11425
|
{
|
|
11301
11426
|
max,
|
|
11302
11427
|
value: progress,
|
|
11303
11428
|
...props,
|
|
11304
|
-
children: /* @__PURE__ */ (0,
|
|
11429
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
|
|
11305
11430
|
StyledProgressIndicator,
|
|
11306
11431
|
{
|
|
11307
11432
|
$max: max,
|
|
@@ -11310,17 +11435,17 @@ var ProgressBar = ({
|
|
|
11310
11435
|
)
|
|
11311
11436
|
}
|
|
11312
11437
|
),
|
|
11313
|
-
(0, import_type_guards44.isNotNil)(labelRight) ? /* @__PURE__ */ (0,
|
|
11438
|
+
(0, import_type_guards44.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(ProgressBarLabel, { children: labelRight }) : null
|
|
11314
11439
|
] });
|
|
11315
11440
|
};
|
|
11316
11441
|
ProgressBar.displayName = "ProgressBar";
|
|
11317
11442
|
|
|
11318
11443
|
// src/components/Radio/Radio.tsx
|
|
11319
11444
|
var import_react55 = require("react");
|
|
11320
|
-
var
|
|
11445
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
11321
11446
|
var import_type_guards45 = require("@wistia/type-guards");
|
|
11322
|
-
var
|
|
11323
|
-
var RadioIcon = () => /* @__PURE__ */ (0,
|
|
11447
|
+
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
11448
|
+
var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11324
11449
|
"svg",
|
|
11325
11450
|
{
|
|
11326
11451
|
fill: "inherit",
|
|
@@ -11328,7 +11453,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
|
|
|
11328
11453
|
viewBox: "0 0 1 1",
|
|
11329
11454
|
width: "1",
|
|
11330
11455
|
xmlns: "http://www.w3.org/2000/svg",
|
|
11331
|
-
children: /* @__PURE__ */ (0,
|
|
11456
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11332
11457
|
"circle",
|
|
11333
11458
|
{
|
|
11334
11459
|
cx: "0.5",
|
|
@@ -11339,7 +11464,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
|
|
|
11339
11464
|
)
|
|
11340
11465
|
}
|
|
11341
11466
|
);
|
|
11342
|
-
var sizeSmall2 =
|
|
11467
|
+
var sizeSmall2 = import_styled_components70.css`
|
|
11343
11468
|
width: 14px;
|
|
11344
11469
|
height: 14px;
|
|
11345
11470
|
min-width: 14px;
|
|
@@ -11350,7 +11475,7 @@ var sizeSmall2 = import_styled_components69.css`
|
|
|
11350
11475
|
height: 7px;
|
|
11351
11476
|
}
|
|
11352
11477
|
`;
|
|
11353
|
-
var sizeMedium2 =
|
|
11478
|
+
var sizeMedium2 = import_styled_components70.css`
|
|
11354
11479
|
width: 16px;
|
|
11355
11480
|
height: 16px;
|
|
11356
11481
|
min-width: 16px;
|
|
@@ -11361,7 +11486,7 @@ var sizeMedium2 = import_styled_components69.css`
|
|
|
11361
11486
|
height: 8px;
|
|
11362
11487
|
}
|
|
11363
11488
|
`;
|
|
11364
|
-
var sizeLarge2 =
|
|
11489
|
+
var sizeLarge2 = import_styled_components70.css`
|
|
11365
11490
|
width: 20px;
|
|
11366
11491
|
height: 20px;
|
|
11367
11492
|
min-width: 20px;
|
|
@@ -11377,14 +11502,14 @@ var getSizeCss2 = (size) => {
|
|
|
11377
11502
|
if (size === "lg") return sizeLarge2;
|
|
11378
11503
|
return sizeMedium2;
|
|
11379
11504
|
};
|
|
11380
|
-
var StyledRadioWrapper =
|
|
11505
|
+
var StyledRadioWrapper = import_styled_components70.default.div`
|
|
11381
11506
|
display: flex;
|
|
11382
11507
|
margin: 0;
|
|
11383
11508
|
|
|
11384
11509
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
11385
11510
|
user-select: none;
|
|
11386
11511
|
`;
|
|
11387
|
-
var StyledRadioInput =
|
|
11512
|
+
var StyledRadioInput = import_styled_components70.default.div`
|
|
11388
11513
|
${({ $size }) => getSizeCss2($size)}
|
|
11389
11514
|
line-height: 0;
|
|
11390
11515
|
margin: 0;
|
|
@@ -11406,7 +11531,7 @@ var StyledRadioInput = import_styled_components69.default.div`
|
|
|
11406
11531
|
}
|
|
11407
11532
|
}
|
|
11408
11533
|
`;
|
|
11409
|
-
var StyledHiddenRadioInput =
|
|
11534
|
+
var StyledHiddenRadioInput = import_styled_components70.default.input`
|
|
11410
11535
|
${visuallyHiddenStyle}
|
|
11411
11536
|
|
|
11412
11537
|
/* toggles display of faux-input border-color */
|
|
@@ -11436,13 +11561,13 @@ var Radio = (0, import_react55.forwardRef)(
|
|
|
11436
11561
|
}, ref) => {
|
|
11437
11562
|
const generatedId = (0, import_react55.useId)();
|
|
11438
11563
|
const computedId = (0, import_type_guards45.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
11439
|
-
return /* @__PURE__ */ (0,
|
|
11564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
|
|
11440
11565
|
StyledRadioWrapper,
|
|
11441
11566
|
{
|
|
11442
11567
|
$disabled: disabled,
|
|
11443
11568
|
"aria-invalid": props["aria-invalid"],
|
|
11444
11569
|
children: [
|
|
11445
|
-
/* @__PURE__ */ (0,
|
|
11570
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11446
11571
|
StyledHiddenRadioInput,
|
|
11447
11572
|
{
|
|
11448
11573
|
...props,
|
|
@@ -11457,16 +11582,16 @@ var Radio = (0, import_react55.forwardRef)(
|
|
|
11457
11582
|
value
|
|
11458
11583
|
}
|
|
11459
11584
|
),
|
|
11460
|
-
/* @__PURE__ */ (0,
|
|
11585
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11461
11586
|
FormControlLabel,
|
|
11462
11587
|
{
|
|
11463
|
-
controlSlot: /* @__PURE__ */ (0,
|
|
11588
|
+
controlSlot: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11464
11589
|
StyledRadioInput,
|
|
11465
11590
|
{
|
|
11466
11591
|
$disabled: disabled,
|
|
11467
11592
|
$size: size,
|
|
11468
11593
|
"data-wui-faux-input": "true",
|
|
11469
|
-
children: /* @__PURE__ */ (0,
|
|
11594
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(RadioIcon, {})
|
|
11470
11595
|
}
|
|
11471
11596
|
),
|
|
11472
11597
|
description,
|
|
@@ -11485,13 +11610,13 @@ Radio.displayName = "Radio";
|
|
|
11485
11610
|
|
|
11486
11611
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
11487
11612
|
var import_react58 = require("react");
|
|
11488
|
-
var
|
|
11613
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
11489
11614
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
11490
11615
|
var import_type_guards46 = require("@wistia/type-guards");
|
|
11491
11616
|
|
|
11492
11617
|
// src/components/SegmentedControl/useSelectedItemStyle.tsx
|
|
11493
11618
|
var import_react56 = require("react");
|
|
11494
|
-
var
|
|
11619
|
+
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
11495
11620
|
var SelectedItemStyleContext = (0, import_react56.createContext)(null);
|
|
11496
11621
|
var SelectedItemStyleProvider = ({
|
|
11497
11622
|
children
|
|
@@ -11514,7 +11639,7 @@ var SelectedItemStyleProvider = ({
|
|
|
11514
11639
|
}),
|
|
11515
11640
|
[selectedItemIndicatorStyle]
|
|
11516
11641
|
);
|
|
11517
|
-
return /* @__PURE__ */ (0,
|
|
11642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
|
|
11518
11643
|
};
|
|
11519
11644
|
var useSelectedItemStyle = () => {
|
|
11520
11645
|
const context = (0, import_react56.useContext)(SelectedItemStyleContext);
|
|
@@ -11525,7 +11650,7 @@ var useSelectedItemStyle = () => {
|
|
|
11525
11650
|
};
|
|
11526
11651
|
|
|
11527
11652
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
11528
|
-
var
|
|
11653
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
11529
11654
|
|
|
11530
11655
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
11531
11656
|
var import_react57 = require("react");
|
|
@@ -11540,8 +11665,8 @@ var useSegmentedControlValue = () => {
|
|
|
11540
11665
|
};
|
|
11541
11666
|
|
|
11542
11667
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
11543
|
-
var
|
|
11544
|
-
var SelectedItemIndicatorDiv =
|
|
11668
|
+
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
11669
|
+
var SelectedItemIndicatorDiv = import_styled_components71.default.div`
|
|
11545
11670
|
background-color: var(--wui-color-bg-fill-white);
|
|
11546
11671
|
border-radius: var(--wui-border-radius-rounded);
|
|
11547
11672
|
left: 0;
|
|
@@ -11559,12 +11684,12 @@ var SelectedItemIndicator = () => {
|
|
|
11559
11684
|
if (!selectedValue) {
|
|
11560
11685
|
return null;
|
|
11561
11686
|
}
|
|
11562
|
-
return /* @__PURE__ */ (0,
|
|
11687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
|
|
11563
11688
|
};
|
|
11564
11689
|
|
|
11565
11690
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
11566
|
-
var
|
|
11567
|
-
var segmentedControlStyles =
|
|
11691
|
+
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
11692
|
+
var segmentedControlStyles = import_styled_components72.css`
|
|
11568
11693
|
display: inline-flex;
|
|
11569
11694
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
11570
11695
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -11575,7 +11700,7 @@ var segmentedControlStyles = import_styled_components71.css`
|
|
|
11575
11700
|
position: relative;
|
|
11576
11701
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
11577
11702
|
`;
|
|
11578
|
-
var StyledSegmentedControl = (0,
|
|
11703
|
+
var StyledSegmentedControl = (0, import_styled_components72.default)(import_react_toggle_group.Root)`
|
|
11579
11704
|
${segmentedControlStyles}
|
|
11580
11705
|
`;
|
|
11581
11706
|
var SegmentedControl = (0, import_react58.forwardRef)(
|
|
@@ -11590,7 +11715,7 @@ var SegmentedControl = (0, import_react58.forwardRef)(
|
|
|
11590
11715
|
if ((0, import_type_guards46.isNil)(children)) {
|
|
11591
11716
|
return null;
|
|
11592
11717
|
}
|
|
11593
|
-
return /* @__PURE__ */ (0,
|
|
11718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
|
|
11594
11719
|
StyledSegmentedControl,
|
|
11595
11720
|
{
|
|
11596
11721
|
ref,
|
|
@@ -11602,8 +11727,8 @@ var SegmentedControl = (0, import_react58.forwardRef)(
|
|
|
11602
11727
|
type: "single",
|
|
11603
11728
|
value: selectedValue,
|
|
11604
11729
|
...props,
|
|
11605
|
-
children: /* @__PURE__ */ (0,
|
|
11606
|
-
/* @__PURE__ */ (0,
|
|
11730
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(SelectedItemStyleProvider, { children: [
|
|
11731
|
+
/* @__PURE__ */ (0, import_jsx_runtime252.jsx)(SelectedItemIndicator, {}),
|
|
11607
11732
|
children
|
|
11608
11733
|
] }) })
|
|
11609
11734
|
}
|
|
@@ -11614,11 +11739,11 @@ SegmentedControl.displayName = "SegmentedControl";
|
|
|
11614
11739
|
|
|
11615
11740
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
11616
11741
|
var import_react59 = require("react");
|
|
11617
|
-
var
|
|
11742
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
11618
11743
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
11619
11744
|
var import_type_guards47 = require("@wistia/type-guards");
|
|
11620
|
-
var
|
|
11621
|
-
var segmentedControlItemStyles =
|
|
11745
|
+
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
11746
|
+
var segmentedControlItemStyles = import_styled_components73.css`
|
|
11622
11747
|
all: unset; /* ToggleGroupItem is a button element */
|
|
11623
11748
|
align-items: center;
|
|
11624
11749
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -11678,7 +11803,7 @@ var segmentedControlItemStyles = import_styled_components72.css`
|
|
|
11678
11803
|
}
|
|
11679
11804
|
}
|
|
11680
11805
|
`;
|
|
11681
|
-
var StyledSegmentedControlItem = (0,
|
|
11806
|
+
var StyledSegmentedControlItem = (0, import_styled_components73.default)(import_react_toggle_group2.Item)`
|
|
11682
11807
|
${segmentedControlItemStyles}
|
|
11683
11808
|
`;
|
|
11684
11809
|
var SegmentedControlItem = (0, import_react59.forwardRef)(
|
|
@@ -11719,7 +11844,7 @@ var SegmentedControlItem = (0, import_react59.forwardRef)(
|
|
|
11719
11844
|
resizeObserver.disconnect();
|
|
11720
11845
|
};
|
|
11721
11846
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
11722
|
-
return /* @__PURE__ */ (0,
|
|
11847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
|
|
11723
11848
|
StyledSegmentedControlItem,
|
|
11724
11849
|
{
|
|
11725
11850
|
ref: combinedRef,
|
|
@@ -11741,9 +11866,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
|
11741
11866
|
// src/components/Select/Select.tsx
|
|
11742
11867
|
var import_react_select = require("@radix-ui/react-select");
|
|
11743
11868
|
var import_react60 = require("react");
|
|
11744
|
-
var
|
|
11745
|
-
var
|
|
11746
|
-
var StyledTrigger = (0,
|
|
11869
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
11870
|
+
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
11871
|
+
var StyledTrigger = (0, import_styled_components74.default)(import_react_select.Trigger)`
|
|
11747
11872
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11748
11873
|
${inputCssVariables};
|
|
11749
11874
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -11787,7 +11912,7 @@ var StyledTrigger = (0, import_styled_components73.default)(import_react_select.
|
|
|
11787
11912
|
color: var(--wui-input-placeholder);
|
|
11788
11913
|
}
|
|
11789
11914
|
`;
|
|
11790
|
-
var StyledContent3 = (0,
|
|
11915
|
+
var StyledContent3 = (0, import_styled_components74.default)(import_react_select.Content)`
|
|
11791
11916
|
--wui-select-content-border: var(--wui-color-border);
|
|
11792
11917
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
11793
11918
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -11815,13 +11940,13 @@ var Select = (0, import_react60.forwardRef)(
|
|
|
11815
11940
|
...props
|
|
11816
11941
|
}, forwardedRef) => {
|
|
11817
11942
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
11818
|
-
return /* @__PURE__ */ (0,
|
|
11943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
|
|
11819
11944
|
import_react_select.Root,
|
|
11820
11945
|
{
|
|
11821
11946
|
...props,
|
|
11822
11947
|
onValueChange: onChange,
|
|
11823
11948
|
children: [
|
|
11824
|
-
/* @__PURE__ */ (0,
|
|
11949
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
|
|
11825
11950
|
StyledTrigger,
|
|
11826
11951
|
{
|
|
11827
11952
|
ref: forwardedRef,
|
|
@@ -11829,8 +11954,8 @@ var Select = (0, import_react60.forwardRef)(
|
|
|
11829
11954
|
$fullWidth: responsiveFullWidth,
|
|
11830
11955
|
...props,
|
|
11831
11956
|
children: [
|
|
11832
|
-
/* @__PURE__ */ (0,
|
|
11833
|
-
/* @__PURE__ */ (0,
|
|
11957
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.Value, { placeholder }),
|
|
11958
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
|
|
11834
11959
|
Icon,
|
|
11835
11960
|
{
|
|
11836
11961
|
size: "md",
|
|
@@ -11840,10 +11965,10 @@ var Select = (0, import_react60.forwardRef)(
|
|
|
11840
11965
|
]
|
|
11841
11966
|
}
|
|
11842
11967
|
),
|
|
11843
|
-
/* @__PURE__ */ (0,
|
|
11844
|
-
/* @__PURE__ */ (0,
|
|
11845
|
-
/* @__PURE__ */ (0,
|
|
11846
|
-
/* @__PURE__ */ (0,
|
|
11968
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(StyledContent3, { position: "popper", children: [
|
|
11969
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Icon, { type: "caret-up" }) }),
|
|
11970
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.Viewport, { children }),
|
|
11971
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Icon, { type: "caret-down" }) })
|
|
11847
11972
|
] }) })
|
|
11848
11973
|
]
|
|
11849
11974
|
}
|
|
@@ -11855,10 +11980,10 @@ Select.displayName = "Select";
|
|
|
11855
11980
|
// src/components/Select/SelectOption.tsx
|
|
11856
11981
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
11857
11982
|
var import_react61 = require("react");
|
|
11858
|
-
var
|
|
11983
|
+
var import_styled_components75 = __toESM(require("styled-components"));
|
|
11859
11984
|
var import_type_guards48 = require("@wistia/type-guards");
|
|
11860
|
-
var
|
|
11861
|
-
var StyledItem = (0,
|
|
11985
|
+
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
11986
|
+
var StyledItem = (0, import_styled_components75.default)(import_react_select2.Item)`
|
|
11862
11987
|
${variantStyleMap2.body3};
|
|
11863
11988
|
display: flex;
|
|
11864
11989
|
padding: var(--wui-select-option-padding);
|
|
@@ -11882,28 +12007,28 @@ var StyledItem = (0, import_styled_components74.default)(import_react_select2.It
|
|
|
11882
12007
|
background-color: transparent;
|
|
11883
12008
|
}
|
|
11884
12009
|
`;
|
|
11885
|
-
var StyledIconContainer =
|
|
12010
|
+
var StyledIconContainer = import_styled_components75.default.span`
|
|
11886
12011
|
width: 12px;
|
|
11887
12012
|
`;
|
|
11888
12013
|
var SelectOption = (0, import_react61.forwardRef)(
|
|
11889
12014
|
({ children, selectedDisplayValue, ...props }, forwardedRef) => {
|
|
11890
|
-
return /* @__PURE__ */ (0,
|
|
12015
|
+
return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
|
|
11891
12016
|
StyledItem,
|
|
11892
12017
|
{
|
|
11893
12018
|
...props,
|
|
11894
12019
|
ref: forwardedRef,
|
|
11895
12020
|
children: [
|
|
11896
|
-
/* @__PURE__ */ (0,
|
|
12021
|
+
/* @__PURE__ */ (0, import_jsx_runtime255.jsx)(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
|
|
11897
12022
|
Icon,
|
|
11898
12023
|
{
|
|
11899
12024
|
size: "sm",
|
|
11900
12025
|
type: "checkmark"
|
|
11901
12026
|
}
|
|
11902
12027
|
) }) }),
|
|
11903
|
-
(0, import_type_guards48.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0,
|
|
12028
|
+
(0, import_type_guards48.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)("div", { children: [
|
|
11904
12029
|
children,
|
|
11905
|
-
/* @__PURE__ */ (0,
|
|
11906
|
-
] }) : /* @__PURE__ */ (0,
|
|
12030
|
+
/* @__PURE__ */ (0, import_jsx_runtime255.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
12031
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(import_react_select2.ItemText, { children })
|
|
11907
12032
|
]
|
|
11908
12033
|
}
|
|
11909
12034
|
);
|
|
@@ -11913,14 +12038,14 @@ SelectOption.displayName = "SelectOption";
|
|
|
11913
12038
|
|
|
11914
12039
|
// src/components/Select/SelectOptionGroup.tsx
|
|
11915
12040
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
11916
|
-
var
|
|
11917
|
-
var
|
|
11918
|
-
var StyledLabel4 = (0,
|
|
12041
|
+
var import_styled_components76 = __toESM(require("styled-components"));
|
|
12042
|
+
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
12043
|
+
var StyledLabel4 = (0, import_styled_components76.default)(import_react_select3.Label)`
|
|
11919
12044
|
padding: var(--wui-select-option-padding);
|
|
11920
12045
|
`;
|
|
11921
12046
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
11922
|
-
return /* @__PURE__ */ (0,
|
|
11923
|
-
/* @__PURE__ */ (0,
|
|
12047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
12048
|
+
/* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
|
|
11924
12049
|
Text,
|
|
11925
12050
|
{
|
|
11926
12051
|
prominence: "secondary",
|
|
@@ -11934,10 +12059,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
11934
12059
|
|
|
11935
12060
|
// src/components/Switch/Switch.tsx
|
|
11936
12061
|
var import_react62 = require("react");
|
|
11937
|
-
var
|
|
12062
|
+
var import_styled_components77 = __toESM(require("styled-components"));
|
|
11938
12063
|
var import_type_guards49 = require("@wistia/type-guards");
|
|
11939
|
-
var
|
|
11940
|
-
var sizeSmall3 =
|
|
12064
|
+
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
12065
|
+
var sizeSmall3 = import_styled_components77.css`
|
|
11941
12066
|
--wui-size-small-width: 24px;
|
|
11942
12067
|
--wui-size-small-height: 14px;
|
|
11943
12068
|
|
|
@@ -11952,7 +12077,7 @@ var sizeSmall3 = import_styled_components76.css`
|
|
|
11952
12077
|
height: calc(var(--wui-size-small-width) / 2);
|
|
11953
12078
|
}
|
|
11954
12079
|
`;
|
|
11955
|
-
var sizeMedium3 =
|
|
12080
|
+
var sizeMedium3 = import_styled_components77.css`
|
|
11956
12081
|
--wui-size-medium-width: 32px;
|
|
11957
12082
|
--wui-size-medium-height: 18px;
|
|
11958
12083
|
|
|
@@ -11967,7 +12092,7 @@ var sizeMedium3 = import_styled_components76.css`
|
|
|
11967
12092
|
height: calc(var(--wui-size-medium-width) / 2);
|
|
11968
12093
|
}
|
|
11969
12094
|
`;
|
|
11970
|
-
var sizeLarge3 =
|
|
12095
|
+
var sizeLarge3 = import_styled_components77.css`
|
|
11971
12096
|
--wui-size-large-width: 40px;
|
|
11972
12097
|
--wui-size-large-height: 22px;
|
|
11973
12098
|
|
|
@@ -11987,14 +12112,14 @@ var getSizeCss3 = (size) => {
|
|
|
11987
12112
|
if (size === "lg") return sizeLarge3;
|
|
11988
12113
|
return sizeMedium3;
|
|
11989
12114
|
};
|
|
11990
|
-
var StyledSwitchWrapper =
|
|
12115
|
+
var StyledSwitchWrapper = import_styled_components77.default.div`
|
|
11991
12116
|
display: flex;
|
|
11992
12117
|
margin: 0;
|
|
11993
12118
|
|
|
11994
12119
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
11995
12120
|
user-select: none;
|
|
11996
12121
|
`;
|
|
11997
|
-
var StyledSwitchInput =
|
|
12122
|
+
var StyledSwitchInput = import_styled_components77.default.div`
|
|
11998
12123
|
${({ $size }) => getSizeCss3($size)}
|
|
11999
12124
|
line-height: 0;
|
|
12000
12125
|
margin: 0;
|
|
@@ -12022,7 +12147,7 @@ var StyledSwitchInput = import_styled_components76.default.div`
|
|
|
12022
12147
|
transition: all 0.2s ease-in-out;
|
|
12023
12148
|
}
|
|
12024
12149
|
`;
|
|
12025
|
-
var StyledHiddenSwitchInput =
|
|
12150
|
+
var StyledHiddenSwitchInput = import_styled_components77.default.input`
|
|
12026
12151
|
${visuallyHiddenStyle}
|
|
12027
12152
|
|
|
12028
12153
|
/* toggles display of faux-input background-color and toggle position */
|
|
@@ -12055,8 +12180,8 @@ var Switch = (0, import_react62.forwardRef)(
|
|
|
12055
12180
|
}, ref) => {
|
|
12056
12181
|
const generatedId = (0, import_react62.useId)();
|
|
12057
12182
|
const computedId = (0, import_type_guards49.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
|
|
12058
|
-
return /* @__PURE__ */ (0,
|
|
12059
|
-
/* @__PURE__ */ (0,
|
|
12183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
|
|
12184
|
+
/* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
|
|
12060
12185
|
StyledHiddenSwitchInput,
|
|
12061
12186
|
{
|
|
12062
12187
|
...props,
|
|
@@ -12071,10 +12196,10 @@ var Switch = (0, import_react62.forwardRef)(
|
|
|
12071
12196
|
value
|
|
12072
12197
|
}
|
|
12073
12198
|
),
|
|
12074
|
-
/* @__PURE__ */ (0,
|
|
12199
|
+
/* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
|
|
12075
12200
|
FormControlLabel,
|
|
12076
12201
|
{
|
|
12077
|
-
controlSlot: /* @__PURE__ */ (0,
|
|
12202
|
+
controlSlot: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
|
|
12078
12203
|
StyledSwitchInput,
|
|
12079
12204
|
{
|
|
12080
12205
|
$disabled: disabled,
|
|
@@ -12096,25 +12221,25 @@ var Switch = (0, import_react62.forwardRef)(
|
|
|
12096
12221
|
Switch.displayName = "Switch";
|
|
12097
12222
|
|
|
12098
12223
|
// src/components/Table/Table.tsx
|
|
12099
|
-
var
|
|
12100
|
-
var
|
|
12101
|
-
var StyledTable =
|
|
12224
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
12225
|
+
var import_jsx_runtime258 = require("react/jsx-runtime");
|
|
12226
|
+
var StyledTable = import_styled_components78.default.table`
|
|
12102
12227
|
width: 100%;
|
|
12103
12228
|
border-collapse: collapse;
|
|
12104
12229
|
|
|
12105
|
-
${({ $divided }) => $divided &&
|
|
12230
|
+
${({ $divided }) => $divided && import_styled_components78.css`
|
|
12106
12231
|
tr {
|
|
12107
12232
|
border-bottom: 1px solid var(--wui-color-border);
|
|
12108
12233
|
}
|
|
12109
12234
|
`}
|
|
12110
12235
|
|
|
12111
|
-
${({ $striped }) => $striped &&
|
|
12236
|
+
${({ $striped }) => $striped && import_styled_components78.css`
|
|
12112
12237
|
tbody tr:nth-child(even) {
|
|
12113
12238
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
12114
12239
|
}
|
|
12115
12240
|
`}
|
|
12116
12241
|
|
|
12117
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
12242
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components78.css`
|
|
12118
12243
|
thead {
|
|
12119
12244
|
${visuallyHiddenStyle}
|
|
12120
12245
|
}
|
|
@@ -12127,7 +12252,7 @@ var Table = ({
|
|
|
12127
12252
|
visuallyHiddenHeader = false,
|
|
12128
12253
|
...props
|
|
12129
12254
|
}) => {
|
|
12130
|
-
return /* @__PURE__ */ (0,
|
|
12255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
12131
12256
|
StyledTable,
|
|
12132
12257
|
{
|
|
12133
12258
|
$divided: divided,
|
|
@@ -12140,35 +12265,35 @@ var Table = ({
|
|
|
12140
12265
|
};
|
|
12141
12266
|
|
|
12142
12267
|
// src/components/Table/TableBody.tsx
|
|
12143
|
-
var
|
|
12268
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
12144
12269
|
|
|
12145
12270
|
// src/components/Table/TableSectionContext.ts
|
|
12146
12271
|
var import_react63 = require("react");
|
|
12147
12272
|
var TableSectionContext = (0, import_react63.createContext)(null);
|
|
12148
12273
|
|
|
12149
12274
|
// src/components/Table/TableBody.tsx
|
|
12150
|
-
var
|
|
12151
|
-
var StyledTableBody =
|
|
12275
|
+
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
12276
|
+
var StyledTableBody = import_styled_components79.default.tbody``;
|
|
12152
12277
|
var TableBody = ({ children, ...props }) => {
|
|
12153
|
-
return /* @__PURE__ */ (0,
|
|
12278
|
+
return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StyledTableBody, { ...props, children }) });
|
|
12154
12279
|
};
|
|
12155
12280
|
|
|
12156
12281
|
// src/components/Table/TableCell.tsx
|
|
12157
12282
|
var import_react64 = require("react");
|
|
12158
|
-
var
|
|
12159
|
-
var
|
|
12160
|
-
var sharedStyles =
|
|
12283
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
12284
|
+
var import_jsx_runtime260 = require("react/jsx-runtime");
|
|
12285
|
+
var sharedStyles = import_styled_components80.css`
|
|
12161
12286
|
color: var(--wui-color-text);
|
|
12162
12287
|
padding: var(--wui-space-02);
|
|
12163
12288
|
text-align: left;
|
|
12164
12289
|
`;
|
|
12165
|
-
var StyledTh =
|
|
12290
|
+
var StyledTh = import_styled_components80.default.th`
|
|
12166
12291
|
${sharedStyles}
|
|
12167
12292
|
font-size: var(--wui-typography-body-4-size);
|
|
12168
12293
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
12169
12294
|
line-height: var(--wui-typography-body-4-line-height);
|
|
12170
12295
|
`;
|
|
12171
|
-
var StyledTd =
|
|
12296
|
+
var StyledTd = import_styled_components80.default.td`
|
|
12172
12297
|
${sharedStyles}
|
|
12173
12298
|
font-size: var(--wui-typography-body-2-size);
|
|
12174
12299
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -12177,51 +12302,51 @@ var StyledTd = import_styled_components79.default.td`
|
|
|
12177
12302
|
var TableCell = ({ children, ...props }) => {
|
|
12178
12303
|
const section = (0, import_react64.useContext)(TableSectionContext);
|
|
12179
12304
|
if (section === "head") {
|
|
12180
|
-
return /* @__PURE__ */ (0,
|
|
12305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTh, { ...props, children });
|
|
12181
12306
|
}
|
|
12182
|
-
return /* @__PURE__ */ (0,
|
|
12307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTd, { ...props, children });
|
|
12183
12308
|
};
|
|
12184
12309
|
|
|
12185
12310
|
// src/components/Table/TableFoot.tsx
|
|
12186
|
-
var
|
|
12187
|
-
var
|
|
12188
|
-
var StyledTableFoot =
|
|
12311
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
12312
|
+
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
12313
|
+
var StyledTableFoot = import_styled_components81.default.tfoot``;
|
|
12189
12314
|
var TableFoot = ({ children, ...props }) => {
|
|
12190
|
-
return /* @__PURE__ */ (0,
|
|
12315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(StyledTableFoot, { ...props, children }) });
|
|
12191
12316
|
};
|
|
12192
12317
|
|
|
12193
12318
|
// src/components/Table/TableHead.tsx
|
|
12194
|
-
var
|
|
12195
|
-
var
|
|
12196
|
-
var StyledThead =
|
|
12319
|
+
var import_styled_components82 = __toESM(require("styled-components"));
|
|
12320
|
+
var import_jsx_runtime262 = require("react/jsx-runtime");
|
|
12321
|
+
var StyledThead = import_styled_components82.default.thead``;
|
|
12197
12322
|
var TableHead = ({ children, ...props }) => {
|
|
12198
|
-
return /* @__PURE__ */ (0,
|
|
12323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledThead, { ...props, children }) });
|
|
12199
12324
|
};
|
|
12200
12325
|
|
|
12201
12326
|
// src/components/Table/TableRow.tsx
|
|
12202
|
-
var
|
|
12203
|
-
var
|
|
12204
|
-
var StyledTableRow =
|
|
12327
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
12328
|
+
var import_jsx_runtime263 = require("react/jsx-runtime");
|
|
12329
|
+
var StyledTableRow = import_styled_components83.default.tr``;
|
|
12205
12330
|
var TableRow = ({ children, ...props }) => {
|
|
12206
|
-
return /* @__PURE__ */ (0,
|
|
12331
|
+
return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(StyledTableRow, { ...props, children });
|
|
12207
12332
|
};
|
|
12208
12333
|
|
|
12209
12334
|
// src/components/Tabs/Tabs.tsx
|
|
12210
12335
|
var import_react68 = require("react");
|
|
12211
12336
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
12212
12337
|
var import_type_guards51 = require("@wistia/type-guards");
|
|
12213
|
-
var
|
|
12338
|
+
var import_styled_components88 = __toESM(require("styled-components"));
|
|
12214
12339
|
|
|
12215
12340
|
// src/components/Tabs/TabPanel.tsx
|
|
12216
|
-
var
|
|
12341
|
+
var import_styled_components84 = __toESM(require("styled-components"));
|
|
12217
12342
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
12218
|
-
var
|
|
12219
|
-
var StyledTabPanel = (0,
|
|
12343
|
+
var import_jsx_runtime264 = require("react/jsx-runtime");
|
|
12344
|
+
var StyledTabPanel = (0, import_styled_components84.default)(import_react_tabs.Content)`
|
|
12220
12345
|
display: flex;
|
|
12221
12346
|
flex-direction: column;
|
|
12222
12347
|
`;
|
|
12223
12348
|
var TabPanel = ({ children, value, ...props }) => {
|
|
12224
|
-
return /* @__PURE__ */ (0,
|
|
12349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
|
|
12225
12350
|
StyledTabPanel,
|
|
12226
12351
|
{
|
|
12227
12352
|
value,
|
|
@@ -12233,10 +12358,10 @@ var TabPanel = ({ children, value, ...props }) => {
|
|
|
12233
12358
|
TabPanel.displayName = "TabPanel";
|
|
12234
12359
|
|
|
12235
12360
|
// src/components/Tabs/TabList.tsx
|
|
12236
|
-
var
|
|
12361
|
+
var import_styled_components85 = __toESM(require("styled-components"));
|
|
12237
12362
|
var import_react_tabs2 = require("@radix-ui/react-tabs");
|
|
12238
|
-
var
|
|
12239
|
-
var StyledTabList = (0,
|
|
12363
|
+
var import_jsx_runtime265 = require("react/jsx-runtime");
|
|
12364
|
+
var StyledTabList = (0, import_styled_components85.default)(import_react_tabs2.List)`
|
|
12240
12365
|
${segmentedControlStyles}
|
|
12241
12366
|
|
|
12242
12367
|
margin-bottom: var(--wui-space-04);
|
|
@@ -12249,7 +12374,7 @@ var TabList = ({
|
|
|
12249
12374
|
ariaLabel,
|
|
12250
12375
|
...props
|
|
12251
12376
|
}) => {
|
|
12252
|
-
return /* @__PURE__ */ (0,
|
|
12377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
|
|
12253
12378
|
StyledTabList,
|
|
12254
12379
|
{
|
|
12255
12380
|
$fullWidth: fullWidth,
|
|
@@ -12263,7 +12388,7 @@ TabList.displayName = "TabList";
|
|
|
12263
12388
|
|
|
12264
12389
|
// src/components/Tabs/TabItem.tsx
|
|
12265
12390
|
var import_react66 = require("react");
|
|
12266
|
-
var
|
|
12391
|
+
var import_styled_components86 = __toESM(require("styled-components"));
|
|
12267
12392
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
12268
12393
|
var import_type_guards50 = require("@wistia/type-guards");
|
|
12269
12394
|
|
|
@@ -12280,8 +12405,8 @@ var useTabsValue = () => {
|
|
|
12280
12405
|
};
|
|
12281
12406
|
|
|
12282
12407
|
// src/components/Tabs/TabItem.tsx
|
|
12283
|
-
var
|
|
12284
|
-
var StyledTabItem = (0,
|
|
12408
|
+
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
12409
|
+
var StyledTabItem = (0, import_styled_components86.default)(import_react_tabs3.Trigger)`
|
|
12285
12410
|
${segmentedControlItemStyles}
|
|
12286
12411
|
|
|
12287
12412
|
&:focus-visible {
|
|
@@ -12319,7 +12444,7 @@ var TabItem = (0, import_react66.forwardRef)(
|
|
|
12319
12444
|
resizeObserver.disconnect();
|
|
12320
12445
|
};
|
|
12321
12446
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
12322
|
-
return /* @__PURE__ */ (0,
|
|
12447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
|
|
12323
12448
|
StyledTabItem,
|
|
12324
12449
|
{
|
|
12325
12450
|
ref: combinedRef,
|
|
@@ -12360,9 +12485,9 @@ var extractTabItems = (children) => {
|
|
|
12360
12485
|
};
|
|
12361
12486
|
|
|
12362
12487
|
// src/components/Tabs/SelectedItemIndicator.tsx
|
|
12363
|
-
var
|
|
12364
|
-
var
|
|
12365
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
12488
|
+
var import_styled_components87 = __toESM(require("styled-components"));
|
|
12489
|
+
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
12490
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components87.default)(SelectedItemIndicatorDiv)`
|
|
12366
12491
|
&:has(~ ${StyledTabItem}:focus-visible) {
|
|
12367
12492
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
12368
12493
|
}
|
|
@@ -12373,23 +12498,23 @@ var SelectedItemIndicator2 = () => {
|
|
|
12373
12498
|
if (selectedValue == null) {
|
|
12374
12499
|
return null;
|
|
12375
12500
|
}
|
|
12376
|
-
return /* @__PURE__ */ (0,
|
|
12501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
|
|
12377
12502
|
};
|
|
12378
12503
|
|
|
12379
12504
|
// src/components/Tabs/Tabs.tsx
|
|
12380
|
-
var
|
|
12381
|
-
var TabsContainer =
|
|
12505
|
+
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
12506
|
+
var TabsContainer = import_styled_components88.default.div`
|
|
12382
12507
|
display: flex;
|
|
12383
12508
|
flex-direction: column;
|
|
12384
12509
|
height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
|
|
12385
12510
|
overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
|
|
12386
12511
|
`;
|
|
12387
|
-
var StickyTabContent =
|
|
12512
|
+
var StickyTabContent = import_styled_components88.default.div`
|
|
12388
12513
|
flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
|
|
12389
12514
|
overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
|
|
12390
12515
|
overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
|
|
12391
12516
|
`;
|
|
12392
|
-
var StyledTabsRoot = (0,
|
|
12517
|
+
var StyledTabsRoot = (0, import_styled_components88.default)(import_react_tabs4.Root)`
|
|
12393
12518
|
display: flex;
|
|
12394
12519
|
flex-direction: column;
|
|
12395
12520
|
height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
|
|
@@ -12412,7 +12537,7 @@ var Tabs = (0, import_react68.forwardRef)(
|
|
|
12412
12537
|
onValueChange: setInternalSelectedValue
|
|
12413
12538
|
} : { value: selectedValue, onValueChange: onSelectedValueChange };
|
|
12414
12539
|
const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
|
|
12415
|
-
return /* @__PURE__ */ (0,
|
|
12540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
12416
12541
|
StyledTabsRoot,
|
|
12417
12542
|
{
|
|
12418
12543
|
ref,
|
|
@@ -12420,14 +12545,14 @@ var Tabs = (0, import_react68.forwardRef)(
|
|
|
12420
12545
|
activationMode: "automatic",
|
|
12421
12546
|
...props,
|
|
12422
12547
|
...modeProps,
|
|
12423
|
-
children: /* @__PURE__ */ (0,
|
|
12424
|
-
/* @__PURE__ */ (0,
|
|
12548
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(SelectedItemStyleProvider, { children: [
|
|
12549
|
+
/* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
|
|
12425
12550
|
TabList,
|
|
12426
12551
|
{
|
|
12427
12552
|
ariaLabel,
|
|
12428
12553
|
fullWidth,
|
|
12429
12554
|
children: [
|
|
12430
|
-
/* @__PURE__ */ (0,
|
|
12555
|
+
/* @__PURE__ */ (0, import_jsx_runtime268.jsx)(SelectedItemIndicator2, {}),
|
|
12431
12556
|
tabItems.map((tab) => {
|
|
12432
12557
|
const {
|
|
12433
12558
|
value,
|
|
@@ -12437,7 +12562,7 @@ var Tabs = (0, import_react68.forwardRef)(
|
|
|
12437
12562
|
"aria-label": ariaLabelForTab
|
|
12438
12563
|
} = tab.props;
|
|
12439
12564
|
if ((0, import_type_guards51.isNil)(icon)) {
|
|
12440
|
-
return /* @__PURE__ */ (0,
|
|
12565
|
+
return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
12441
12566
|
TabItem,
|
|
12442
12567
|
{
|
|
12443
12568
|
disabled,
|
|
@@ -12448,7 +12573,7 @@ var Tabs = (0, import_react68.forwardRef)(
|
|
|
12448
12573
|
);
|
|
12449
12574
|
}
|
|
12450
12575
|
if ((0, import_type_guards51.isNotNil)(label)) {
|
|
12451
|
-
return /* @__PURE__ */ (0,
|
|
12576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
12452
12577
|
TabItem,
|
|
12453
12578
|
{
|
|
12454
12579
|
disabled,
|
|
@@ -12460,7 +12585,7 @@ var Tabs = (0, import_react68.forwardRef)(
|
|
|
12460
12585
|
);
|
|
12461
12586
|
}
|
|
12462
12587
|
if ((0, import_type_guards51.isNotNil)(ariaLabelForTab)) {
|
|
12463
|
-
return /* @__PURE__ */ (0,
|
|
12588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
12464
12589
|
TabItem,
|
|
12465
12590
|
{
|
|
12466
12591
|
"aria-label": ariaLabelForTab,
|
|
@@ -12476,7 +12601,7 @@ var Tabs = (0, import_react68.forwardRef)(
|
|
|
12476
12601
|
]
|
|
12477
12602
|
}
|
|
12478
12603
|
),
|
|
12479
|
-
/* @__PURE__ */ (0,
|
|
12604
|
+
/* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
12480
12605
|
TabPanel,
|
|
12481
12606
|
{
|
|
12482
12607
|
value: tab.props.value,
|
|
@@ -12493,18 +12618,18 @@ Tabs.displayName = "Tabs";
|
|
|
12493
12618
|
|
|
12494
12619
|
// src/components/Tabs/Tab.tsx
|
|
12495
12620
|
var import_react69 = require("react");
|
|
12496
|
-
var
|
|
12621
|
+
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
12497
12622
|
var Tab = (0, import_react69.forwardRef)(({ children }, ref) => {
|
|
12498
|
-
return /* @__PURE__ */ (0,
|
|
12623
|
+
return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("div", { ref, children });
|
|
12499
12624
|
});
|
|
12500
12625
|
Tab.displayName = "Tab";
|
|
12501
12626
|
|
|
12502
12627
|
// src/components/Tag/Tag.tsx
|
|
12503
12628
|
var import_react70 = require("react");
|
|
12504
|
-
var
|
|
12629
|
+
var import_styled_components89 = __toESM(require("styled-components"));
|
|
12505
12630
|
var import_type_guards52 = require("@wistia/type-guards");
|
|
12506
|
-
var
|
|
12507
|
-
var TagLabel =
|
|
12631
|
+
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
12632
|
+
var TagLabel = import_styled_components89.default.a`
|
|
12508
12633
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12509
12634
|
font-size: var(--wui-typography-label-4-size);
|
|
12510
12635
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -12539,14 +12664,14 @@ var TagLabel = import_styled_components88.default.a`
|
|
|
12539
12664
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
12540
12665
|
}
|
|
12541
12666
|
`;
|
|
12542
|
-
var TagDivider =
|
|
12667
|
+
var TagDivider = import_styled_components89.default.div`
|
|
12543
12668
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12544
12669
|
border-left: 1px solid var(--wui-color-border);
|
|
12545
12670
|
display: flex;
|
|
12546
12671
|
height: 14px;
|
|
12547
12672
|
width: 1px;
|
|
12548
12673
|
`;
|
|
12549
|
-
var StyledRemoveButton =
|
|
12674
|
+
var StyledRemoveButton = import_styled_components89.default.button`
|
|
12550
12675
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12551
12676
|
all: unset;
|
|
12552
12677
|
cursor: pointer;
|
|
@@ -12574,7 +12699,7 @@ var StyledRemoveButton = import_styled_components88.default.button`
|
|
|
12574
12699
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
12575
12700
|
}
|
|
12576
12701
|
`;
|
|
12577
|
-
var StyledTag =
|
|
12702
|
+
var StyledTag = import_styled_components89.default.div`
|
|
12578
12703
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12579
12704
|
align-items: center;
|
|
12580
12705
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -12595,23 +12720,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
|
12595
12720
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
12596
12721
|
);
|
|
12597
12722
|
}
|
|
12598
|
-
return /* @__PURE__ */ (0,
|
|
12599
|
-
/* @__PURE__ */ (0,
|
|
12600
|
-
/* @__PURE__ */ (0,
|
|
12723
|
+
return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(import_jsx_runtime270.Fragment, { children: [
|
|
12724
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(TagDivider, { $colorScheme: colorScheme }),
|
|
12725
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
|
|
12601
12726
|
StyledRemoveButton,
|
|
12602
12727
|
{
|
|
12603
12728
|
$colorScheme: colorScheme,
|
|
12604
12729
|
onClick: onClickRemove,
|
|
12605
12730
|
type: "button",
|
|
12606
12731
|
children: [
|
|
12607
|
-
/* @__PURE__ */ (0,
|
|
12732
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
12608
12733
|
Icon,
|
|
12609
12734
|
{
|
|
12610
12735
|
size: "sm",
|
|
12611
12736
|
type: "close"
|
|
12612
12737
|
}
|
|
12613
12738
|
),
|
|
12614
|
-
/* @__PURE__ */ (0,
|
|
12739
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
12615
12740
|
]
|
|
12616
12741
|
}
|
|
12617
12742
|
)
|
|
@@ -12621,14 +12746,14 @@ var Tag = (0, import_react70.forwardRef)(
|
|
|
12621
12746
|
({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
|
|
12622
12747
|
const hasIcon = (0, import_type_guards52.isNotNil)(icon);
|
|
12623
12748
|
const labelProps = (0, import_type_guards52.isNotNil)(href) && (0, import_type_guards52.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
|
|
12624
|
-
return /* @__PURE__ */ (0,
|
|
12749
|
+
return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
|
|
12625
12750
|
StyledTag,
|
|
12626
12751
|
{
|
|
12627
12752
|
ref,
|
|
12628
12753
|
$colorScheme: colorScheme,
|
|
12629
12754
|
...props,
|
|
12630
12755
|
children: [
|
|
12631
|
-
/* @__PURE__ */ (0,
|
|
12756
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
|
|
12632
12757
|
TagLabel,
|
|
12633
12758
|
{
|
|
12634
12759
|
...labelProps,
|
|
@@ -12639,7 +12764,7 @@ var Tag = (0, import_react70.forwardRef)(
|
|
|
12639
12764
|
]
|
|
12640
12765
|
}
|
|
12641
12766
|
),
|
|
12642
|
-
/* @__PURE__ */ (0,
|
|
12767
|
+
/* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
12643
12768
|
RemoveButton,
|
|
12644
12769
|
{
|
|
12645
12770
|
colorScheme,
|
|
@@ -12655,10 +12780,10 @@ var Tag = (0, import_react70.forwardRef)(
|
|
|
12655
12780
|
Tag.displayName = "Tag";
|
|
12656
12781
|
|
|
12657
12782
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
12658
|
-
var
|
|
12783
|
+
var import_styled_components90 = __toESM(require("styled-components"));
|
|
12659
12784
|
var import_type_guards53 = require("@wistia/type-guards");
|
|
12660
|
-
var
|
|
12661
|
-
var StyledThumbnailBadge =
|
|
12785
|
+
var import_jsx_runtime271 = require("react/jsx-runtime");
|
|
12786
|
+
var StyledThumbnailBadge = import_styled_components90.default.div`
|
|
12662
12787
|
align-items: center;
|
|
12663
12788
|
background-color: rgb(0 0 0 / 50%);
|
|
12664
12789
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -12683,23 +12808,23 @@ var StyledThumbnailBadge = import_styled_components89.default.div`
|
|
|
12683
12808
|
}
|
|
12684
12809
|
`;
|
|
12685
12810
|
var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
12686
|
-
return /* @__PURE__ */ (0,
|
|
12811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(StyledThumbnailBadge, { ...props, children: [
|
|
12687
12812
|
(0, import_type_guards53.isNotNil)(icon) && icon,
|
|
12688
|
-
/* @__PURE__ */ (0,
|
|
12813
|
+
/* @__PURE__ */ (0, import_jsx_runtime271.jsx)("span", { children: label })
|
|
12689
12814
|
] });
|
|
12690
12815
|
};
|
|
12691
12816
|
ThumbnailBadge.displayName = "ThumbnailBadge";
|
|
12692
12817
|
|
|
12693
12818
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
12694
12819
|
var import_react71 = require("react");
|
|
12695
|
-
var
|
|
12820
|
+
var import_styled_components92 = __toESM(require("styled-components"));
|
|
12696
12821
|
var import_type_guards55 = require("@wistia/type-guards");
|
|
12697
12822
|
|
|
12698
12823
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
12699
12824
|
var import_type_guards54 = require("@wistia/type-guards");
|
|
12700
|
-
var
|
|
12825
|
+
var import_styled_components91 = require("styled-components");
|
|
12701
12826
|
var gradients = {
|
|
12702
|
-
defaultDarkOne:
|
|
12827
|
+
defaultDarkOne: import_styled_components91.css`
|
|
12703
12828
|
background-color: #222d66;
|
|
12704
12829
|
background-image:
|
|
12705
12830
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -12707,7 +12832,7 @@ var gradients = {
|
|
|
12707
12832
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
12708
12833
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
12709
12834
|
`,
|
|
12710
|
-
defaultDarkTwo:
|
|
12835
|
+
defaultDarkTwo: import_styled_components91.css`
|
|
12711
12836
|
background-color: #222d66;
|
|
12712
12837
|
background-image:
|
|
12713
12838
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -12715,7 +12840,7 @@ var gradients = {
|
|
|
12715
12840
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
12716
12841
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
12717
12842
|
`,
|
|
12718
|
-
defaultLightOne:
|
|
12843
|
+
defaultLightOne: import_styled_components91.css`
|
|
12719
12844
|
background-color: #ccd5ff;
|
|
12720
12845
|
background-image:
|
|
12721
12846
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -12723,13 +12848,13 @@ var gradients = {
|
|
|
12723
12848
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
12724
12849
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
12725
12850
|
`,
|
|
12726
|
-
defaultLightTwo:
|
|
12851
|
+
defaultLightTwo: import_styled_components91.css`
|
|
12727
12852
|
background-color: #ccd5ff;
|
|
12728
12853
|
background-image:
|
|
12729
12854
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
12730
12855
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
12731
12856
|
`,
|
|
12732
|
-
defaultMidOne:
|
|
12857
|
+
defaultMidOne: import_styled_components91.css`
|
|
12733
12858
|
background-color: #6b84ff;
|
|
12734
12859
|
background-image:
|
|
12735
12860
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -12737,13 +12862,13 @@ var gradients = {
|
|
|
12737
12862
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
12738
12863
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
12739
12864
|
`,
|
|
12740
|
-
defaultMidTwo:
|
|
12865
|
+
defaultMidTwo: import_styled_components91.css`
|
|
12741
12866
|
background-color: #6b84ff;
|
|
12742
12867
|
background-image:
|
|
12743
12868
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
12744
12869
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
12745
12870
|
`,
|
|
12746
|
-
green:
|
|
12871
|
+
green: import_styled_components91.css`
|
|
12747
12872
|
background-color: #fafffa;
|
|
12748
12873
|
background-image:
|
|
12749
12874
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -12751,7 +12876,7 @@ var gradients = {
|
|
|
12751
12876
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
12752
12877
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
12753
12878
|
`,
|
|
12754
|
-
greenWithPop:
|
|
12879
|
+
greenWithPop: import_styled_components91.css`
|
|
12755
12880
|
background-color: #fafffa;
|
|
12756
12881
|
background-image:
|
|
12757
12882
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -12759,7 +12884,7 @@ var gradients = {
|
|
|
12759
12884
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
12760
12885
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
12761
12886
|
`,
|
|
12762
|
-
pink:
|
|
12887
|
+
pink: import_styled_components91.css`
|
|
12763
12888
|
background-color: #fffff0;
|
|
12764
12889
|
background-image:
|
|
12765
12890
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -12767,7 +12892,7 @@ var gradients = {
|
|
|
12767
12892
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
12768
12893
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
12769
12894
|
`,
|
|
12770
|
-
pinkWithPop:
|
|
12895
|
+
pinkWithPop: import_styled_components91.css`
|
|
12771
12896
|
background-color: #fffff0;
|
|
12772
12897
|
background-image:
|
|
12773
12898
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -12775,7 +12900,7 @@ var gradients = {
|
|
|
12775
12900
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
12776
12901
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
12777
12902
|
`,
|
|
12778
|
-
playfulGradientOne:
|
|
12903
|
+
playfulGradientOne: import_styled_components91.css`
|
|
12779
12904
|
background-color: #f7f8ff;
|
|
12780
12905
|
background-image:
|
|
12781
12906
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -12783,7 +12908,7 @@ var gradients = {
|
|
|
12783
12908
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
12784
12909
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
12785
12910
|
`,
|
|
12786
|
-
playfulGradientTwo:
|
|
12911
|
+
playfulGradientTwo: import_styled_components91.css`
|
|
12787
12912
|
background-color: #f7f8ff;
|
|
12788
12913
|
background-image:
|
|
12789
12914
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -12791,13 +12916,13 @@ var gradients = {
|
|
|
12791
12916
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
12792
12917
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
12793
12918
|
`,
|
|
12794
|
-
purple:
|
|
12919
|
+
purple: import_styled_components91.css`
|
|
12795
12920
|
background-color: #f2caff;
|
|
12796
12921
|
background-image:
|
|
12797
12922
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
12798
12923
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
12799
12924
|
`,
|
|
12800
|
-
purpleWithPop:
|
|
12925
|
+
purpleWithPop: import_styled_components91.css`
|
|
12801
12926
|
background-color: #f2caff;
|
|
12802
12927
|
background-image:
|
|
12803
12928
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -12805,7 +12930,7 @@ var gradients = {
|
|
|
12805
12930
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
12806
12931
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
12807
12932
|
`,
|
|
12808
|
-
yellow:
|
|
12933
|
+
yellow: import_styled_components91.css`
|
|
12809
12934
|
background-color: #fffff0;
|
|
12810
12935
|
background-image:
|
|
12811
12936
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -12813,7 +12938,7 @@ var gradients = {
|
|
|
12813
12938
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
12814
12939
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
12815
12940
|
`,
|
|
12816
|
-
yellowWithPop:
|
|
12941
|
+
yellowWithPop: import_styled_components91.css`
|
|
12817
12942
|
background-color: #fffff0;
|
|
12818
12943
|
background-image:
|
|
12819
12944
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -12828,20 +12953,20 @@ var getBackgroundGradient = (gradientName = void 0) => {
|
|
|
12828
12953
|
};
|
|
12829
12954
|
|
|
12830
12955
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
12831
|
-
var
|
|
12832
|
-
var WideThumbnailImage =
|
|
12956
|
+
var import_jsx_runtime272 = require("react/jsx-runtime");
|
|
12957
|
+
var WideThumbnailImage = import_styled_components92.default.img`
|
|
12833
12958
|
height: 100%;
|
|
12834
12959
|
object-fit: cover;
|
|
12835
12960
|
width: 100%;
|
|
12836
12961
|
`;
|
|
12837
|
-
var SquareThumbnailImage =
|
|
12962
|
+
var SquareThumbnailImage = import_styled_components92.default.img`
|
|
12838
12963
|
backdrop-filter: blur(8px);
|
|
12839
12964
|
object-fit: contain;
|
|
12840
12965
|
width: 100%;
|
|
12841
12966
|
`;
|
|
12842
12967
|
var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
12843
12968
|
if (thumbnailImageType === "wide") {
|
|
12844
|
-
return /* @__PURE__ */ (0,
|
|
12969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
|
|
12845
12970
|
WideThumbnailImage,
|
|
12846
12971
|
{
|
|
12847
12972
|
alt: "",
|
|
@@ -12850,7 +12975,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
12850
12975
|
}
|
|
12851
12976
|
);
|
|
12852
12977
|
}
|
|
12853
|
-
return /* @__PURE__ */ (0,
|
|
12978
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
|
|
12854
12979
|
SquareThumbnailImage,
|
|
12855
12980
|
{
|
|
12856
12981
|
alt: "",
|
|
@@ -12859,7 +12984,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
12859
12984
|
}
|
|
12860
12985
|
);
|
|
12861
12986
|
};
|
|
12862
|
-
var StyledThumbnail =
|
|
12987
|
+
var StyledThumbnail = import_styled_components92.default.div`
|
|
12863
12988
|
background-image: ${({ $backgroundUrl }) => (0, import_type_guards55.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
12864
12989
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
12865
12990
|
// if we don't have $backgroundUrl show a gradient
|
|
@@ -12888,7 +13013,7 @@ var Thumbnail = (0, import_react71.forwardRef)(
|
|
|
12888
13013
|
...props
|
|
12889
13014
|
}, ref) => {
|
|
12890
13015
|
const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards55.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
|
|
12891
|
-
return /* @__PURE__ */ (0,
|
|
13016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
|
|
12892
13017
|
StyledThumbnail,
|
|
12893
13018
|
{
|
|
12894
13019
|
ref,
|
|
@@ -12899,7 +13024,7 @@ var Thumbnail = (0, import_react71.forwardRef)(
|
|
|
12899
13024
|
role: "presentation",
|
|
12900
13025
|
children: [
|
|
12901
13026
|
(0, import_type_guards55.isNotNil)(children) ? children : null,
|
|
12902
|
-
(0, import_type_guards55.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0,
|
|
13027
|
+
(0, import_type_guards55.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
|
|
12903
13028
|
ThumbnailImage,
|
|
12904
13029
|
{
|
|
12905
13030
|
thumbnailImageType,
|
|
@@ -12915,13 +13040,13 @@ Thumbnail.displayName = "Thumbnail";
|
|
|
12915
13040
|
|
|
12916
13041
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
12917
13042
|
var import_react72 = __toESM(require("react"));
|
|
12918
|
-
var
|
|
13043
|
+
var import_styled_components93 = __toESM(require("styled-components"));
|
|
12919
13044
|
var import_type_guards56 = require("@wistia/type-guards");
|
|
12920
|
-
var
|
|
13045
|
+
var import_jsx_runtime273 = (
|
|
12921
13046
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
12922
13047
|
require("react/jsx-runtime")
|
|
12923
13048
|
);
|
|
12924
|
-
var StyledThumbnailCollage =
|
|
13049
|
+
var StyledThumbnailCollage = import_styled_components93.default.div`
|
|
12925
13050
|
display: grid;
|
|
12926
13051
|
gap: var(--wui-space-01);
|
|
12927
13052
|
width: 100%;
|
|
@@ -13002,7 +13127,7 @@ var ThumbnailCollage = ({
|
|
|
13002
13127
|
children: void 0
|
|
13003
13128
|
});
|
|
13004
13129
|
}) : [
|
|
13005
|
-
/* @__PURE__ */ (0,
|
|
13130
|
+
/* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
|
|
13006
13131
|
Thumbnail,
|
|
13007
13132
|
{
|
|
13008
13133
|
gradientBackground,
|
|
@@ -13011,7 +13136,7 @@ var ThumbnailCollage = ({
|
|
|
13011
13136
|
"fallback"
|
|
13012
13137
|
)
|
|
13013
13138
|
];
|
|
13014
|
-
return /* @__PURE__ */ (0,
|
|
13139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
|
|
13015
13140
|
StyledThumbnailCollage,
|
|
13016
13141
|
{
|
|
13017
13142
|
$gradientBackground: gradientBackground,
|
|
@@ -13023,26 +13148,26 @@ var ThumbnailCollage = ({
|
|
|
13023
13148
|
};
|
|
13024
13149
|
|
|
13025
13150
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
13026
|
-
var
|
|
13151
|
+
var import_styled_components94 = __toESM(require("styled-components"));
|
|
13027
13152
|
var import_type_guards57 = require("@wistia/type-guards");
|
|
13028
|
-
var
|
|
13153
|
+
var import_jsx_runtime274 = require("react/jsx-runtime");
|
|
13029
13154
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
13030
13155
|
if (iconOnly) {
|
|
13031
|
-
return /* @__PURE__ */ (0,
|
|
13156
|
+
return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
|
|
13032
13157
|
"g",
|
|
13033
13158
|
{
|
|
13034
13159
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
13035
13160
|
fill: brandmarkColor,
|
|
13036
|
-
children: /* @__PURE__ */ (0,
|
|
13161
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
13037
13162
|
}
|
|
13038
13163
|
);
|
|
13039
13164
|
}
|
|
13040
|
-
return /* @__PURE__ */ (0,
|
|
13165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
|
|
13041
13166
|
"g",
|
|
13042
13167
|
{
|
|
13043
13168
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
13044
13169
|
fill: brandmarkColor,
|
|
13045
|
-
children: /* @__PURE__ */ (0,
|
|
13170
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
13046
13171
|
}
|
|
13047
13172
|
);
|
|
13048
13173
|
};
|
|
@@ -13050,12 +13175,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
13050
13175
|
if (iconOnly) {
|
|
13051
13176
|
return null;
|
|
13052
13177
|
}
|
|
13053
|
-
return /* @__PURE__ */ (0,
|
|
13178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
|
|
13054
13179
|
"g",
|
|
13055
13180
|
{
|
|
13056
13181
|
"data-testid": "ui-wistia-logo-logotype",
|
|
13057
13182
|
fill: logotypeColor,
|
|
13058
|
-
children: /* @__PURE__ */ (0,
|
|
13183
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
|
|
13059
13184
|
}
|
|
13060
13185
|
);
|
|
13061
13186
|
};
|
|
@@ -13065,7 +13190,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
13065
13190
|
}
|
|
13066
13191
|
return "0 0 144 31.47";
|
|
13067
13192
|
};
|
|
13068
|
-
var WistiaLogoComponent =
|
|
13193
|
+
var WistiaLogoComponent = import_styled_components94.default.svg`
|
|
13069
13194
|
height: ${({ height }) => `${height}px`};
|
|
13070
13195
|
|
|
13071
13196
|
/* ensure it will always fit on mobile */
|
|
@@ -13081,12 +13206,12 @@ var WistiaLogoComponent = import_styled_components93.default.svg`
|
|
|
13081
13206
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
13082
13207
|
if ($opticallyCentered) {
|
|
13083
13208
|
if ($iconOnly) {
|
|
13084
|
-
return
|
|
13209
|
+
return import_styled_components94.css`
|
|
13085
13210
|
aspect-ratio: 1;
|
|
13086
13211
|
padding: 11.85% 3.12% 13.91%;
|
|
13087
13212
|
`;
|
|
13088
13213
|
}
|
|
13089
|
-
return
|
|
13214
|
+
return import_styled_components94.css`
|
|
13090
13215
|
aspect-ratio: 127 / 32;
|
|
13091
13216
|
`;
|
|
13092
13217
|
}
|
|
@@ -13123,7 +13248,7 @@ var WistiaLogo = ({
|
|
|
13123
13248
|
};
|
|
13124
13249
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
13125
13250
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
13126
|
-
const Logo = /* @__PURE__ */ (0,
|
|
13251
|
+
const Logo = /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(
|
|
13127
13252
|
WistiaLogoComponent,
|
|
13128
13253
|
{
|
|
13129
13254
|
$hoverColor: hoverColor,
|
|
@@ -13136,14 +13261,14 @@ var WistiaLogo = ({
|
|
|
13136
13261
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13137
13262
|
...props,
|
|
13138
13263
|
children: [
|
|
13139
|
-
/* @__PURE__ */ (0,
|
|
13140
|
-
(0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0,
|
|
13264
|
+
/* @__PURE__ */ (0, import_jsx_runtime274.jsx)("title", { children: title }),
|
|
13265
|
+
(0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("desc", { children: description }) : null,
|
|
13141
13266
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
13142
13267
|
renderLogotype(logotypeColor, iconOnly)
|
|
13143
13268
|
]
|
|
13144
13269
|
}
|
|
13145
13270
|
);
|
|
13146
|
-
return href !== void 0 ? /* @__PURE__ */ (0,
|
|
13271
|
+
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("a", { href, children: Logo }) : Logo;
|
|
13147
13272
|
};
|
|
13148
13273
|
WistiaLogo.displayName = "WistiaLogo";
|
|
13149
13274
|
// Annotate the CommonJS export names for ESM import in node:
|