@wistia/ui 0.20.8 → 0.20.9-beta.94a79eb7.ae79c7e
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.d.ts +24 -2
- package/dist/index.js +432 -281
- package/dist/index.js.map +1 -1
- package/package.json +20 -19
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.20.
|
|
3
|
+
* @license @wistia/ui v0.20.9-beta.94a79eb7.ae79c7e
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -10610,7 +10610,7 @@ var convertToRgbRaw = useMode(modeRgb);
|
|
|
10610
10610
|
var convertToHsvRaw = useMode(modeHsv);
|
|
10611
10611
|
useMode(modeLrgb);
|
|
10612
10612
|
var convertToHsv = (color) => {
|
|
10613
|
-
let result;
|
|
10613
|
+
let result = void 0;
|
|
10614
10614
|
if (typeof color === "string") {
|
|
10615
10615
|
const rgb = parseHex(color);
|
|
10616
10616
|
if (rgb == null) {
|
|
@@ -10625,7 +10625,7 @@ var convertToHsv = (color) => {
|
|
|
10625
10625
|
return result;
|
|
10626
10626
|
};
|
|
10627
10627
|
var convertToRgb = (color) => {
|
|
10628
|
-
let result;
|
|
10628
|
+
let result = void 0;
|
|
10629
10629
|
if (typeof color === "string") {
|
|
10630
10630
|
const rgb = parseHex(color);
|
|
10631
10631
|
if (rgb == null) {
|
|
@@ -16109,38 +16109,188 @@ var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */
|
|
|
16109
16109
|
);
|
|
16110
16110
|
Mark.displayName = "Mark_UI";
|
|
16111
16111
|
|
|
16112
|
+
// src/components/Markdown/Markdown.tsx
|
|
16113
|
+
import { styled as styled76 } from "styled-components";
|
|
16114
|
+
import ReactMarkdown from "react-markdown";
|
|
16115
|
+
|
|
16116
|
+
// src/css/baseMarkdownCss.tsx
|
|
16117
|
+
import { css as css39 } from "styled-components";
|
|
16118
|
+
var textSizeToTokenMap = {
|
|
16119
|
+
body2: "--wui-typography-body-2-size",
|
|
16120
|
+
body3: "--wui-typography-body-3-size"
|
|
16121
|
+
};
|
|
16122
|
+
var baseMarkdownCss = (textSize = "body2") => css39`
|
|
16123
|
+
--wui-markdown-base-unit: var(${textSizeToTokenMap[textSize]});
|
|
16124
|
+
|
|
16125
|
+
font-size: var(--wui-markdown-base-unit);
|
|
16126
|
+
|
|
16127
|
+
& > * {
|
|
16128
|
+
margin: 0;
|
|
16129
|
+
margin-block-start: calc(var(--wui-markdown-base-unit) * 0.75);
|
|
16130
|
+
}
|
|
16131
|
+
|
|
16132
|
+
& > *:first-child {
|
|
16133
|
+
margin-block-start: 0;
|
|
16134
|
+
}
|
|
16135
|
+
|
|
16136
|
+
:is(h1, h2, h3, h4, h5, h6) {
|
|
16137
|
+
margin-block-start: calc(var(--wui-markdown-base-unit) * 1.5);
|
|
16138
|
+
}
|
|
16139
|
+
|
|
16140
|
+
h1 {
|
|
16141
|
+
font-size: calc(var(--wui-markdown-base-unit) * 2);
|
|
16142
|
+
}
|
|
16143
|
+
|
|
16144
|
+
h2 {
|
|
16145
|
+
font-size: calc(var(--wui-markdown-base-unit) * 1.5);
|
|
16146
|
+
}
|
|
16147
|
+
|
|
16148
|
+
h3 {
|
|
16149
|
+
font-size: calc(var(--wui-markdown-base-unit) * 1.25);
|
|
16150
|
+
}
|
|
16151
|
+
|
|
16152
|
+
h4 {
|
|
16153
|
+
font-size: calc(var(--wui-markdown-base-unit) * 1);
|
|
16154
|
+
}
|
|
16155
|
+
|
|
16156
|
+
h5 {
|
|
16157
|
+
font-size: calc(var(--wui-markdown-base-unit) * 0.875);
|
|
16158
|
+
}
|
|
16159
|
+
|
|
16160
|
+
h6 {
|
|
16161
|
+
font-size: calc(var(--wui-markdown-base-unit) * 0.75);
|
|
16162
|
+
}
|
|
16163
|
+
|
|
16164
|
+
p {
|
|
16165
|
+
font-size: var(--wui-markdown-base-unit);
|
|
16166
|
+
line-height: 1.5;
|
|
16167
|
+
font-weight: var(--wui-typography-weight-body);
|
|
16168
|
+
}
|
|
16169
|
+
|
|
16170
|
+
a {
|
|
16171
|
+
color: var(--wui-color-text-link);
|
|
16172
|
+
text-decoration: underline;
|
|
16173
|
+
}
|
|
16174
|
+
|
|
16175
|
+
strong {
|
|
16176
|
+
font-weight: var(--wui-typography-weight-body-bold);
|
|
16177
|
+
}
|
|
16178
|
+
|
|
16179
|
+
code {
|
|
16180
|
+
background-color: var(--wui-color-bg-surface-secondary);
|
|
16181
|
+
border-radius: var(--wui-border-radius-01);
|
|
16182
|
+
font-size: 0.9em;
|
|
16183
|
+
font-family: var(--wui-typography-family-mono);
|
|
16184
|
+
border: 1px solid var(--wui-color-border);
|
|
16185
|
+
padding: 2px 4px;
|
|
16186
|
+
margin: 0 2px;
|
|
16187
|
+
}
|
|
16188
|
+
|
|
16189
|
+
ul,
|
|
16190
|
+
ol {
|
|
16191
|
+
margin-inline-start: 1.5em;
|
|
16192
|
+
padding: 0;
|
|
16193
|
+
}
|
|
16194
|
+
|
|
16195
|
+
li {
|
|
16196
|
+
margin-block-start: 0.25em;
|
|
16197
|
+
}
|
|
16198
|
+
|
|
16199
|
+
blockquote {
|
|
16200
|
+
margin-inline: 0;
|
|
16201
|
+
border-inline-start: 3px solid var(--wui-color-border-secondary);
|
|
16202
|
+
padding-inline-start: 1em;
|
|
16203
|
+
padding-block: 0.125em;
|
|
16204
|
+
|
|
16205
|
+
& > *:first-child {
|
|
16206
|
+
margin-block-start: 0;
|
|
16207
|
+
}
|
|
16208
|
+
|
|
16209
|
+
& > *:last-child {
|
|
16210
|
+
margin-block-end: 0;
|
|
16211
|
+
}
|
|
16212
|
+
}
|
|
16213
|
+
|
|
16214
|
+
pre {
|
|
16215
|
+
background-color: var(--wui-color-bg-surface-secondary);
|
|
16216
|
+
border-radius: var(--wui-border-radius-01);
|
|
16217
|
+
padding: 00.75em;
|
|
16218
|
+
overflow-x: auto;
|
|
16219
|
+
}
|
|
16220
|
+
|
|
16221
|
+
pre code {
|
|
16222
|
+
background: none;
|
|
16223
|
+
border: none;
|
|
16224
|
+
padding: 0;
|
|
16225
|
+
margin: 0;
|
|
16226
|
+
}
|
|
16227
|
+
|
|
16228
|
+
hr {
|
|
16229
|
+
border: none;
|
|
16230
|
+
border-top: 1px solid var(--wui-color-border);
|
|
16231
|
+
margin-block: calc(var(--wui-markdown-base-unit) * 1.5);
|
|
16232
|
+
}
|
|
16233
|
+
|
|
16234
|
+
img {
|
|
16235
|
+
max-width: 100%;
|
|
16236
|
+
height: auto;
|
|
16237
|
+
}
|
|
16238
|
+
`;
|
|
16239
|
+
|
|
16240
|
+
// src/components/Markdown/Markdown.tsx
|
|
16241
|
+
import { jsx as jsx313 } from "react/jsx-runtime";
|
|
16242
|
+
var StyledMarkdownWrapper = styled76.div`
|
|
16243
|
+
${({ $textSize }) => baseMarkdownCss($textSize)}
|
|
16244
|
+
`;
|
|
16245
|
+
var Markdown = ({
|
|
16246
|
+
children,
|
|
16247
|
+
textSize = "body2",
|
|
16248
|
+
...otherProps
|
|
16249
|
+
}) => {
|
|
16250
|
+
const responsiveTextSize = useResponsiveProp(textSize);
|
|
16251
|
+
return /* @__PURE__ */ jsx313(
|
|
16252
|
+
StyledMarkdownWrapper,
|
|
16253
|
+
{
|
|
16254
|
+
$textSize: responsiveTextSize,
|
|
16255
|
+
...otherProps,
|
|
16256
|
+
children: /* @__PURE__ */ jsx313(ReactMarkdown, { children })
|
|
16257
|
+
}
|
|
16258
|
+
);
|
|
16259
|
+
};
|
|
16260
|
+
Markdown.displayName = "Markdown_UI";
|
|
16261
|
+
|
|
16112
16262
|
// src/components/Modal/Modal.tsx
|
|
16113
16263
|
import { forwardRef as forwardRef26 } from "react";
|
|
16114
|
-
import { styled as
|
|
16264
|
+
import { styled as styled81 } from "styled-components";
|
|
16115
16265
|
import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
|
|
16116
16266
|
import { isNotNil as isNotNil32 } from "@wistia/type-guards";
|
|
16117
16267
|
|
|
16118
16268
|
// src/components/Modal/ModalHeader.tsx
|
|
16119
|
-
import { styled as
|
|
16269
|
+
import { styled as styled78 } from "styled-components";
|
|
16120
16270
|
import { Title as DialogTitle } from "@radix-ui/react-dialog";
|
|
16121
16271
|
|
|
16122
16272
|
// src/components/Modal/ModalCloseButton.tsx
|
|
16123
|
-
import { styled as
|
|
16273
|
+
import { styled as styled77 } from "styled-components";
|
|
16124
16274
|
import { Close as DialogClose } from "@radix-ui/react-dialog";
|
|
16125
|
-
import { jsx as
|
|
16126
|
-
var CloseButton =
|
|
16275
|
+
import { jsx as jsx314 } from "react/jsx-runtime";
|
|
16276
|
+
var CloseButton = styled77(DialogClose)`
|
|
16127
16277
|
align-self: start;
|
|
16128
16278
|
`;
|
|
16129
16279
|
var ModalCloseButton = () => {
|
|
16130
|
-
return /* @__PURE__ */
|
|
16280
|
+
return /* @__PURE__ */ jsx314(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx314(
|
|
16131
16281
|
IconButton,
|
|
16132
16282
|
{
|
|
16133
16283
|
label: "Dismiss modal",
|
|
16134
16284
|
size: "sm",
|
|
16135
16285
|
variant: "ghost",
|
|
16136
|
-
children: /* @__PURE__ */
|
|
16286
|
+
children: /* @__PURE__ */ jsx314(Icon, { type: "close" })
|
|
16137
16287
|
}
|
|
16138
16288
|
) });
|
|
16139
16289
|
};
|
|
16140
16290
|
|
|
16141
16291
|
// src/components/Modal/ModalHeader.tsx
|
|
16142
|
-
import { jsx as
|
|
16143
|
-
var Header =
|
|
16292
|
+
import { jsx as jsx315, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
16293
|
+
var Header = styled78.header`
|
|
16144
16294
|
display: flex;
|
|
16145
16295
|
order: 1;
|
|
16146
16296
|
padding: 0 var(--wui-space-05);
|
|
@@ -16160,7 +16310,7 @@ var Header = styled77.header`
|
|
|
16160
16310
|
top: var(--wui-space-03);
|
|
16161
16311
|
}
|
|
16162
16312
|
`;
|
|
16163
|
-
var Title =
|
|
16313
|
+
var Title = styled78(DialogTitle)`
|
|
16164
16314
|
font-family: var(--wui-typography-heading-2-family);
|
|
16165
16315
|
line-height: var(--wui-typography-heading-2-line-height);
|
|
16166
16316
|
font-size: var(--wui-typography-heading-2-size);
|
|
@@ -16171,7 +16321,7 @@ var ModalHeader = ({
|
|
|
16171
16321
|
hideTitle,
|
|
16172
16322
|
hideCloseButton
|
|
16173
16323
|
}) => {
|
|
16174
|
-
const TitleComponent = hideTitle ? /* @__PURE__ */
|
|
16324
|
+
const TitleComponent = hideTitle ? /* @__PURE__ */ jsx315(ScreenReaderOnly, { children: /* @__PURE__ */ jsx315(Title, { children: title }) }) : /* @__PURE__ */ jsx315(Title, { children: title });
|
|
16175
16325
|
return /* @__PURE__ */ jsxs50(
|
|
16176
16326
|
Header,
|
|
16177
16327
|
{
|
|
@@ -16179,7 +16329,7 @@ var ModalHeader = ({
|
|
|
16179
16329
|
$hideTitle: hideTitle,
|
|
16180
16330
|
children: [
|
|
16181
16331
|
TitleComponent,
|
|
16182
|
-
hideCloseButton ? null : /* @__PURE__ */
|
|
16332
|
+
hideCloseButton ? null : /* @__PURE__ */ jsx315(ModalCloseButton, {})
|
|
16183
16333
|
]
|
|
16184
16334
|
}
|
|
16185
16335
|
);
|
|
@@ -16187,7 +16337,7 @@ var ModalHeader = ({
|
|
|
16187
16337
|
|
|
16188
16338
|
// src/components/Modal/ModalContent.tsx
|
|
16189
16339
|
import { forwardRef as forwardRef25 } from "react";
|
|
16190
|
-
import { styled as
|
|
16340
|
+
import { styled as styled79, css as css40, keyframes as keyframes5 } from "styled-components";
|
|
16191
16341
|
import { Content as DialogContent } from "@radix-ui/react-dialog";
|
|
16192
16342
|
|
|
16193
16343
|
// src/components/Modal/constants.ts
|
|
@@ -16213,7 +16363,7 @@ var useFocusRestore = () => {
|
|
|
16213
16363
|
};
|
|
16214
16364
|
|
|
16215
16365
|
// src/components/Modal/ModalContent.tsx
|
|
16216
|
-
import { jsx as
|
|
16366
|
+
import { jsx as jsx316 } from "react/jsx-runtime";
|
|
16217
16367
|
var modalEnter = keyframes5`
|
|
16218
16368
|
from {
|
|
16219
16369
|
opacity: 0;
|
|
@@ -16236,7 +16386,7 @@ var modalExit = keyframes5`
|
|
|
16236
16386
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
16237
16387
|
}
|
|
16238
16388
|
`;
|
|
16239
|
-
var centeredModalStyles =
|
|
16389
|
+
var centeredModalStyles = css40`
|
|
16240
16390
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
16241
16391
|
--wui-modal-translate-y: -50%;
|
|
16242
16392
|
|
|
@@ -16252,7 +16402,7 @@ var centeredModalStyles = css39`
|
|
|
16252
16402
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
16253
16403
|
}
|
|
16254
16404
|
`;
|
|
16255
|
-
var fixedTopModalStyles =
|
|
16405
|
+
var fixedTopModalStyles = css40`
|
|
16256
16406
|
--wui-modal-screen-offset-top: 15vh;
|
|
16257
16407
|
--wui-modal-screen-offset-bottom: 5vh;
|
|
16258
16408
|
--wui-modal-translate-y: 0%;
|
|
@@ -16293,7 +16443,7 @@ var slideOutRight = keyframes5`
|
|
|
16293
16443
|
transform: translateX(100%);
|
|
16294
16444
|
}
|
|
16295
16445
|
`;
|
|
16296
|
-
var rightSidePanelModalStyles =
|
|
16446
|
+
var rightSidePanelModalStyles = css40`
|
|
16297
16447
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
16298
16448
|
|
|
16299
16449
|
height: calc(100vh - var(--wui-modal-screen-offset) * 2);
|
|
@@ -16311,7 +16461,7 @@ var positionStyleMap = {
|
|
|
16311
16461
|
"fixed-top": fixedTopModalStyles,
|
|
16312
16462
|
"right-side-panel": rightSidePanelModalStyles
|
|
16313
16463
|
};
|
|
16314
|
-
var StyledModalContent =
|
|
16464
|
+
var StyledModalContent = styled79(DialogContent)`
|
|
16315
16465
|
position: fixed;
|
|
16316
16466
|
display: flex;
|
|
16317
16467
|
flex-direction: column;
|
|
@@ -16341,7 +16491,7 @@ var StyledModalContent = styled78(DialogContent)`
|
|
|
16341
16491
|
var ModalContent = forwardRef25(
|
|
16342
16492
|
({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
|
|
16343
16493
|
useFocusRestore();
|
|
16344
|
-
return /* @__PURE__ */
|
|
16494
|
+
return /* @__PURE__ */ jsx316(
|
|
16345
16495
|
StyledModalContent,
|
|
16346
16496
|
{
|
|
16347
16497
|
ref,
|
|
@@ -16357,7 +16507,7 @@ var ModalContent = forwardRef25(
|
|
|
16357
16507
|
|
|
16358
16508
|
// src/components/Modal/ModalOverlay.tsx
|
|
16359
16509
|
import { DialogOverlay } from "@radix-ui/react-dialog";
|
|
16360
|
-
import { styled as
|
|
16510
|
+
import { styled as styled80, keyframes as keyframes6 } from "styled-components";
|
|
16361
16511
|
var backdropShow = keyframes6`
|
|
16362
16512
|
from {
|
|
16363
16513
|
opacity: 0;
|
|
@@ -16376,7 +16526,7 @@ var backdropHide = keyframes6`
|
|
|
16376
16526
|
opacity: 0;
|
|
16377
16527
|
}
|
|
16378
16528
|
`;
|
|
16379
|
-
var ModalOverlay =
|
|
16529
|
+
var ModalOverlay = styled80(DialogOverlay)`
|
|
16380
16530
|
animation: ${backdropShow} var(--wui-motion-duration-02);
|
|
16381
16531
|
background: var(--wui-color-backdrop);
|
|
16382
16532
|
inset: 0;
|
|
@@ -16389,19 +16539,19 @@ var ModalOverlay = styled79(DialogOverlay)`
|
|
|
16389
16539
|
`;
|
|
16390
16540
|
|
|
16391
16541
|
// src/components/Modal/Modal.tsx
|
|
16392
|
-
import { jsx as
|
|
16393
|
-
var ModalBody =
|
|
16542
|
+
import { jsx as jsx317, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
16543
|
+
var ModalBody = styled81.div`
|
|
16394
16544
|
flex-direction: column;
|
|
16395
16545
|
display: flex;
|
|
16396
16546
|
flex: 1 0 0;
|
|
16397
16547
|
padding: 0 var(--wui-space-05);
|
|
16398
16548
|
`;
|
|
16399
|
-
var ModalScrollArea =
|
|
16549
|
+
var ModalScrollArea = styled81.div`
|
|
16400
16550
|
order: 2;
|
|
16401
16551
|
max-height: 90vh;
|
|
16402
16552
|
overflow-y: auto;
|
|
16403
16553
|
`;
|
|
16404
|
-
var ModalFooter =
|
|
16554
|
+
var ModalFooter = styled81.footer`
|
|
16405
16555
|
padding: 0 var(--wui-space-05);
|
|
16406
16556
|
order: 3;
|
|
16407
16557
|
`;
|
|
@@ -16419,7 +16569,7 @@ var Modal = forwardRef26(
|
|
|
16419
16569
|
width = DEFAULT_MODAL_WIDTH,
|
|
16420
16570
|
...props
|
|
16421
16571
|
}, ref) => {
|
|
16422
|
-
return /* @__PURE__ */
|
|
16572
|
+
return /* @__PURE__ */ jsx317(
|
|
16423
16573
|
DialogRoot,
|
|
16424
16574
|
{
|
|
16425
16575
|
onOpenChange: (open2) => {
|
|
@@ -16429,7 +16579,7 @@ var Modal = forwardRef26(
|
|
|
16429
16579
|
},
|
|
16430
16580
|
open: isOpen,
|
|
16431
16581
|
children: /* @__PURE__ */ jsxs51(DialogPortal, { children: [
|
|
16432
|
-
/* @__PURE__ */
|
|
16582
|
+
/* @__PURE__ */ jsx317(ModalOverlay, {}),
|
|
16433
16583
|
/* @__PURE__ */ jsxs51(
|
|
16434
16584
|
ModalContent,
|
|
16435
16585
|
{
|
|
@@ -16446,9 +16596,9 @@ var Modal = forwardRef26(
|
|
|
16446
16596
|
width,
|
|
16447
16597
|
...props,
|
|
16448
16598
|
children: [
|
|
16449
|
-
/* @__PURE__ */
|
|
16450
|
-
isNotNil32(footer) ? /* @__PURE__ */
|
|
16451
|
-
hideCloseButton && hideTitle ? null : /* @__PURE__ */
|
|
16599
|
+
/* @__PURE__ */ jsx317(ModalScrollArea, { children: /* @__PURE__ */ jsx317(ModalBody, { children }) }),
|
|
16600
|
+
isNotNil32(footer) ? /* @__PURE__ */ jsx317(ModalFooter, { children: footer }) : null,
|
|
16601
|
+
hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx317(
|
|
16452
16602
|
ModalHeader,
|
|
16453
16603
|
{
|
|
16454
16604
|
hideCloseButton,
|
|
@@ -16467,9 +16617,9 @@ var Modal = forwardRef26(
|
|
|
16467
16617
|
Modal.displayName = "Modal_UI";
|
|
16468
16618
|
|
|
16469
16619
|
// src/components/Modal/ModalCallouts.tsx
|
|
16470
|
-
import { jsx as
|
|
16620
|
+
import { jsx as jsx318, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
16471
16621
|
var ModalCallouts = ({ children }) => {
|
|
16472
|
-
return /* @__PURE__ */
|
|
16622
|
+
return /* @__PURE__ */ jsx318(
|
|
16473
16623
|
Stack,
|
|
16474
16624
|
{
|
|
16475
16625
|
direction: "horizontal",
|
|
@@ -16482,7 +16632,7 @@ ModalCallouts.displayName = "ModalCallouts_UI";
|
|
|
16482
16632
|
var ModalCallout = ({ title, image, children }) => {
|
|
16483
16633
|
return /* @__PURE__ */ jsxs52(Stack, { direction: "vertical", children: [
|
|
16484
16634
|
image,
|
|
16485
|
-
/* @__PURE__ */
|
|
16635
|
+
/* @__PURE__ */ jsx318(Heading, { variant: "heading4", children: title }),
|
|
16486
16636
|
children
|
|
16487
16637
|
] });
|
|
16488
16638
|
};
|
|
@@ -16490,7 +16640,7 @@ ModalCallout.displayName = "ModalCallout_UI";
|
|
|
16490
16640
|
|
|
16491
16641
|
// src/components/Popover/Popover.tsx
|
|
16492
16642
|
import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
|
|
16493
|
-
import { styled as
|
|
16643
|
+
import { styled as styled83, css as css42 } from "styled-components";
|
|
16494
16644
|
|
|
16495
16645
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
16496
16646
|
import { isNotNil as isNotNil33 } from "@wistia/type-guards";
|
|
@@ -16500,9 +16650,9 @@ var getControlProps = (isOpen, onOpenChange) => {
|
|
|
16500
16650
|
|
|
16501
16651
|
// src/components/Popover/PopoverArrow.tsx
|
|
16502
16652
|
import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
|
|
16503
|
-
import { styled as
|
|
16504
|
-
import { jsx as
|
|
16505
|
-
var StyledPath =
|
|
16653
|
+
import { styled as styled82, css as css41, keyframes as keyframes7 } from "styled-components";
|
|
16654
|
+
import { jsx as jsx319, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
16655
|
+
var StyledPath = styled82.path`
|
|
16506
16656
|
fill: var(--wui-color-border-secondary);
|
|
16507
16657
|
`;
|
|
16508
16658
|
var circleAnimation = keyframes7`
|
|
@@ -16513,7 +16663,7 @@ var circleAnimation = keyframes7`
|
|
|
16513
16663
|
opacity: 0;
|
|
16514
16664
|
}
|
|
16515
16665
|
`;
|
|
16516
|
-
var StyledCircle =
|
|
16666
|
+
var StyledCircle = styled82.circle`
|
|
16517
16667
|
stroke: var(--wui-color-border-active);
|
|
16518
16668
|
animation-duration: 2s;
|
|
16519
16669
|
animation-iteration-count: infinite;
|
|
@@ -16534,13 +16684,13 @@ var StyledCircle = styled81.circle`
|
|
|
16534
16684
|
}
|
|
16535
16685
|
|
|
16536
16686
|
@media (prefers-reduced-motion: no-preference) {
|
|
16537
|
-
${({ $isAnimated }) => $isAnimated &&
|
|
16687
|
+
${({ $isAnimated }) => $isAnimated && css41`
|
|
16538
16688
|
animation-name: ${circleAnimation};
|
|
16539
16689
|
`}
|
|
16540
16690
|
}
|
|
16541
16691
|
`;
|
|
16542
16692
|
var PopoverArrow = ({ isAnimated }) => {
|
|
16543
|
-
return /* @__PURE__ */
|
|
16693
|
+
return /* @__PURE__ */ jsx319(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs53(
|
|
16544
16694
|
"svg",
|
|
16545
16695
|
{
|
|
16546
16696
|
fill: "none",
|
|
@@ -16549,8 +16699,8 @@ var PopoverArrow = ({ isAnimated }) => {
|
|
|
16549
16699
|
width: "48",
|
|
16550
16700
|
xmlns: "http://www.w3.org/2000/svg",
|
|
16551
16701
|
children: [
|
|
16552
|
-
/* @__PURE__ */
|
|
16553
|
-
/* @__PURE__ */
|
|
16702
|
+
/* @__PURE__ */ jsx319(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" }),
|
|
16703
|
+
/* @__PURE__ */ jsx319(
|
|
16554
16704
|
StyledCircle,
|
|
16555
16705
|
{
|
|
16556
16706
|
$isAnimated: isAnimated,
|
|
@@ -16561,7 +16711,7 @@ var PopoverArrow = ({ isAnimated }) => {
|
|
|
16561
16711
|
strokeWidth: "4"
|
|
16562
16712
|
}
|
|
16563
16713
|
),
|
|
16564
|
-
/* @__PURE__ */
|
|
16714
|
+
/* @__PURE__ */ jsx319(
|
|
16565
16715
|
StyledCircle,
|
|
16566
16716
|
{
|
|
16567
16717
|
$isAnimated: isAnimated,
|
|
@@ -16579,11 +16729,11 @@ var PopoverArrow = ({ isAnimated }) => {
|
|
|
16579
16729
|
PopoverArrow.displayName = "PopoverArrow_UI";
|
|
16580
16730
|
|
|
16581
16731
|
// src/components/Popover/Popover.tsx
|
|
16582
|
-
import { jsx as
|
|
16583
|
-
var StyledContent2 =
|
|
16732
|
+
import { jsx as jsx320, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
16733
|
+
var StyledContent2 = styled83(Content2)`
|
|
16584
16734
|
z-index: var(--wui-zindex-popover);
|
|
16585
16735
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
16586
|
-
${({ $unstyled }) => !$unstyled &&
|
|
16736
|
+
${({ $unstyled }) => !$unstyled && css42`
|
|
16587
16737
|
border-radius: var(--wui-border-radius-02);
|
|
16588
16738
|
padding: var(--wui-space-04);
|
|
16589
16739
|
max-width: var(--wui-popover-max-width, 320px);
|
|
@@ -16620,8 +16770,8 @@ var Popover = ({
|
|
|
16620
16770
|
"--wui-popover-max-height": maxHeight
|
|
16621
16771
|
};
|
|
16622
16772
|
return /* @__PURE__ */ jsxs54(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
|
|
16623
|
-
/* @__PURE__ */
|
|
16624
|
-
/* @__PURE__ */
|
|
16773
|
+
/* @__PURE__ */ jsx320(Trigger2, { asChild: true, children: trigger }),
|
|
16774
|
+
/* @__PURE__ */ jsx320(Portal, { children: /* @__PURE__ */ jsxs54(
|
|
16625
16775
|
StyledContent2,
|
|
16626
16776
|
{
|
|
16627
16777
|
$colorScheme: colorScheme,
|
|
@@ -16630,17 +16780,17 @@ var Popover = ({
|
|
|
16630
16780
|
$unstyled: unstyled,
|
|
16631
16781
|
style,
|
|
16632
16782
|
children: [
|
|
16633
|
-
!hideCloseButton && /* @__PURE__ */
|
|
16783
|
+
!hideCloseButton && /* @__PURE__ */ jsx320(Close, { asChild: true, children: /* @__PURE__ */ jsx320(
|
|
16634
16784
|
IconButton,
|
|
16635
16785
|
{
|
|
16636
16786
|
"data-wui-popover-close": true,
|
|
16637
16787
|
label: "Close",
|
|
16638
16788
|
variant: "ghost",
|
|
16639
|
-
children: /* @__PURE__ */
|
|
16789
|
+
children: /* @__PURE__ */ jsx320(Icon, { type: "close" })
|
|
16640
16790
|
}
|
|
16641
16791
|
) }),
|
|
16642
|
-
withArrow ? /* @__PURE__ */
|
|
16643
|
-
/* @__PURE__ */
|
|
16792
|
+
withArrow ? /* @__PURE__ */ jsx320(PopoverArrow, { isAnimated }) : null,
|
|
16793
|
+
/* @__PURE__ */ jsx320("div", { children })
|
|
16644
16794
|
]
|
|
16645
16795
|
}
|
|
16646
16796
|
) })
|
|
@@ -16649,11 +16799,11 @@ var Popover = ({
|
|
|
16649
16799
|
Popover.displayName = "Popover_UI";
|
|
16650
16800
|
|
|
16651
16801
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
16652
|
-
import { styled as
|
|
16802
|
+
import { styled as styled84 } from "styled-components";
|
|
16653
16803
|
import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
|
|
16654
16804
|
import { isNotNil as isNotNil34 } from "@wistia/type-guards";
|
|
16655
|
-
import { jsx as
|
|
16656
|
-
var ProgressBarWrapper =
|
|
16805
|
+
import { jsx as jsx321, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
16806
|
+
var ProgressBarWrapper = styled84.div`
|
|
16657
16807
|
--progress-bar-height: 8px;
|
|
16658
16808
|
|
|
16659
16809
|
display: flex;
|
|
@@ -16667,7 +16817,7 @@ var getTranslateValue = (progress, max) => {
|
|
|
16667
16817
|
const progressPercentage = progress / max * 100;
|
|
16668
16818
|
return `translateX(-${100 - progressPercentage}%)`;
|
|
16669
16819
|
};
|
|
16670
|
-
var ProgressBarLabel =
|
|
16820
|
+
var ProgressBarLabel = styled84.div`
|
|
16671
16821
|
display: flex;
|
|
16672
16822
|
line-height: var(--wui-typography-label-3-line-height);
|
|
16673
16823
|
font-size: var(--wui-typography-label-3-size);
|
|
@@ -16675,7 +16825,7 @@ var ProgressBarLabel = styled83.div`
|
|
|
16675
16825
|
color: var(--wui-color-text-secondary);
|
|
16676
16826
|
flex-shrink: 0;
|
|
16677
16827
|
`;
|
|
16678
|
-
var StyledProgressIndicator =
|
|
16828
|
+
var StyledProgressIndicator = styled84(ProgressIndicator)`
|
|
16679
16829
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
16680
16830
|
background-color: var(--wui-color-bg-fill);
|
|
16681
16831
|
width: 100%;
|
|
@@ -16685,7 +16835,7 @@ var StyledProgressIndicator = styled83(ProgressIndicator)`
|
|
|
16685
16835
|
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
16686
16836
|
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
16687
16837
|
`;
|
|
16688
|
-
var StyledProgressBar =
|
|
16838
|
+
var StyledProgressBar = styled84(ProgressRoot)`
|
|
16689
16839
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
16690
16840
|
position: relative;
|
|
16691
16841
|
overflow: hidden;
|
|
@@ -16707,15 +16857,15 @@ var ProgressBar = ({
|
|
|
16707
16857
|
...props
|
|
16708
16858
|
}) => {
|
|
16709
16859
|
return /* @__PURE__ */ jsxs55(ProgressBarWrapper, { children: [
|
|
16710
|
-
isNotNil34(labelLeft) ? /* @__PURE__ */
|
|
16711
|
-
/* @__PURE__ */
|
|
16860
|
+
isNotNil34(labelLeft) ? /* @__PURE__ */ jsx321(ProgressBarLabel, { children: labelLeft }) : null,
|
|
16861
|
+
/* @__PURE__ */ jsx321(
|
|
16712
16862
|
StyledProgressBar,
|
|
16713
16863
|
{
|
|
16714
16864
|
$colorScheme: colorScheme,
|
|
16715
16865
|
max,
|
|
16716
16866
|
value: progress,
|
|
16717
16867
|
...props,
|
|
16718
|
-
children: /* @__PURE__ */
|
|
16868
|
+
children: /* @__PURE__ */ jsx321(
|
|
16719
16869
|
StyledProgressIndicator,
|
|
16720
16870
|
{
|
|
16721
16871
|
$colorScheme: colorScheme,
|
|
@@ -16725,7 +16875,7 @@ var ProgressBar = ({
|
|
|
16725
16875
|
)
|
|
16726
16876
|
}
|
|
16727
16877
|
),
|
|
16728
|
-
isNotNil34(labelRight) ? /* @__PURE__ */
|
|
16878
|
+
isNotNil34(labelRight) ? /* @__PURE__ */ jsx321(ProgressBarLabel, { children: labelRight }) : null
|
|
16729
16879
|
] });
|
|
16730
16880
|
};
|
|
16731
16881
|
ProgressBar.displayName = "ProgressBar_UI";
|
|
@@ -16733,17 +16883,17 @@ ProgressBar.displayName = "ProgressBar_UI";
|
|
|
16733
16883
|
// src/components/Radio/Radio.tsx
|
|
16734
16884
|
import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
|
|
16735
16885
|
import { forwardRef as forwardRef27, useId as useId5 } from "react";
|
|
16736
|
-
import { styled as
|
|
16737
|
-
import { jsx as
|
|
16738
|
-
var sizeSmall2 =
|
|
16886
|
+
import { styled as styled85, css as css43 } from "styled-components";
|
|
16887
|
+
import { jsx as jsx322, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
16888
|
+
var sizeSmall2 = css43`
|
|
16739
16889
|
--wui-radio-size: 14px;
|
|
16740
16890
|
--wui-radio-icon-size: 7px;
|
|
16741
16891
|
`;
|
|
16742
|
-
var sizeMedium2 =
|
|
16892
|
+
var sizeMedium2 = css43`
|
|
16743
16893
|
--wui-radio-size: 16px;
|
|
16744
16894
|
--wui-radio-icon-size: 8px;
|
|
16745
16895
|
`;
|
|
16746
|
-
var sizeLarge2 =
|
|
16896
|
+
var sizeLarge2 = css43`
|
|
16747
16897
|
--wui-radio-size: 20px;
|
|
16748
16898
|
--wui-radio-icon-size: 10px;
|
|
16749
16899
|
`;
|
|
@@ -16756,7 +16906,7 @@ var getSizeCss3 = (size) => {
|
|
|
16756
16906
|
}
|
|
16757
16907
|
return sizeMedium2;
|
|
16758
16908
|
};
|
|
16759
|
-
var StyledRadioWrapper =
|
|
16909
|
+
var StyledRadioWrapper = styled85.div`
|
|
16760
16910
|
--wui-radio-background-color: var(--wui-color-bg-surface);
|
|
16761
16911
|
--wui-radio-border-color: var(--wui-color-border-secondary);
|
|
16762
16912
|
--wui-radio-icon-color: transparent;
|
|
@@ -16790,7 +16940,7 @@ var StyledRadioWrapper = styled84.div`
|
|
|
16790
16940
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
16791
16941
|
user-select: none;
|
|
16792
16942
|
`;
|
|
16793
|
-
var StyledRadioInput =
|
|
16943
|
+
var StyledRadioInput = styled85.div`
|
|
16794
16944
|
${({ $size }) => getSizeCss3($size)}
|
|
16795
16945
|
width: var(--wui-radio-size);
|
|
16796
16946
|
height: var(--wui-radio-size);
|
|
@@ -16816,7 +16966,7 @@ var StyledRadioInput = styled84.div`
|
|
|
16816
16966
|
transform: translate(-50%, -50%);
|
|
16817
16967
|
}
|
|
16818
16968
|
`;
|
|
16819
|
-
var StyledHiddenRadioInput =
|
|
16969
|
+
var StyledHiddenRadioInput = styled85.input`
|
|
16820
16970
|
${visuallyHiddenStyle}
|
|
16821
16971
|
`;
|
|
16822
16972
|
var Radio = forwardRef27(
|
|
@@ -16850,7 +17000,7 @@ var Radio = forwardRef27(
|
|
|
16850
17000
|
$hideLabel: hideLabel,
|
|
16851
17001
|
"aria-invalid": props["aria-invalid"],
|
|
16852
17002
|
children: [
|
|
16853
|
-
/* @__PURE__ */
|
|
17003
|
+
/* @__PURE__ */ jsx322(
|
|
16854
17004
|
StyledHiddenRadioInput,
|
|
16855
17005
|
{
|
|
16856
17006
|
...props,
|
|
@@ -16865,10 +17015,10 @@ var Radio = forwardRef27(
|
|
|
16865
17015
|
value
|
|
16866
17016
|
}
|
|
16867
17017
|
),
|
|
16868
|
-
/* @__PURE__ */
|
|
17018
|
+
/* @__PURE__ */ jsx322(
|
|
16869
17019
|
FormControlLabel,
|
|
16870
17020
|
{
|
|
16871
|
-
controlSlot: /* @__PURE__ */
|
|
17021
|
+
controlSlot: /* @__PURE__ */ jsx322(StyledRadioInput, { $size: size }),
|
|
16872
17022
|
description,
|
|
16873
17023
|
disabled,
|
|
16874
17024
|
hideLabel,
|
|
@@ -16888,17 +17038,17 @@ import { forwardRef as forwardRef29 } from "react";
|
|
|
16888
17038
|
|
|
16889
17039
|
// src/components/RadioCard/RadioCardRoot.tsx
|
|
16890
17040
|
import { forwardRef as forwardRef28, useId as useId6 } from "react";
|
|
16891
|
-
import { styled as
|
|
17041
|
+
import { styled as styled86, css as css44 } from "styled-components";
|
|
16892
17042
|
import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
|
|
16893
|
-
import { jsx as
|
|
16894
|
-
var checkedStyles =
|
|
17043
|
+
import { jsx as jsx323, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
17044
|
+
var checkedStyles = css44`
|
|
16895
17045
|
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
16896
17046
|
--wui-color-icon: var(--wui-color-icon-selected);
|
|
16897
17047
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-info);
|
|
16898
17048
|
--wui-color-text: var(--wui-color-text-info);
|
|
16899
17049
|
--wui-color-text-secondary: var(--wui-color-text-info);
|
|
16900
17050
|
`;
|
|
16901
|
-
var disabledStyles =
|
|
17051
|
+
var disabledStyles = css44`
|
|
16902
17052
|
--wui-radio-card-border-color: var(--wui-color-border-disabled);
|
|
16903
17053
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
|
|
16904
17054
|
--wui-radio-card-cursor: not-allowed;
|
|
@@ -16906,10 +17056,10 @@ var disabledStyles = css43`
|
|
|
16906
17056
|
--wui-color-text: var(--wui-color-text-disabled);
|
|
16907
17057
|
--wui-color-text-secondary: var(--wui-color-text-disabled);
|
|
16908
17058
|
`;
|
|
16909
|
-
var focusStyles =
|
|
17059
|
+
var focusStyles = css44`
|
|
16910
17060
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
16911
17061
|
`;
|
|
16912
|
-
var imageCoverStyles =
|
|
17062
|
+
var imageCoverStyles = css44`
|
|
16913
17063
|
--wui-radio-card-image-inset: 0px;
|
|
16914
17064
|
--wui-radio-card-border-width: 0px;
|
|
16915
17065
|
--wui-inset-shadow-width: 1px;
|
|
@@ -16940,7 +17090,7 @@ var imageCoverStyles = css43`
|
|
|
16940
17090
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
16941
17091
|
}
|
|
16942
17092
|
`;
|
|
16943
|
-
var StyledCard2 =
|
|
17093
|
+
var StyledCard2 = styled86.label`
|
|
16944
17094
|
--wui-radio-card-border-color: var(--wui-color-border-secondary);
|
|
16945
17095
|
--wui-radio-card-background-color: var(--wui-color-bg-surface);
|
|
16946
17096
|
--wui-radio-card-cursor: pointer;
|
|
@@ -16994,7 +17144,7 @@ var StyledCard2 = styled85.label`
|
|
|
16994
17144
|
}
|
|
16995
17145
|
}
|
|
16996
17146
|
`;
|
|
16997
|
-
var StyledHiddenInput =
|
|
17147
|
+
var StyledHiddenInput = styled86.input`
|
|
16998
17148
|
${visuallyHiddenStyle}
|
|
16999
17149
|
`;
|
|
17000
17150
|
var RadioCardRoot = forwardRef28(
|
|
@@ -17026,7 +17176,7 @@ var RadioCardRoot = forwardRef28(
|
|
|
17026
17176
|
$padding: padding,
|
|
17027
17177
|
htmlFor: computedId,
|
|
17028
17178
|
children: [
|
|
17029
|
-
/* @__PURE__ */
|
|
17179
|
+
/* @__PURE__ */ jsx323(
|
|
17030
17180
|
StyledHiddenInput,
|
|
17031
17181
|
{
|
|
17032
17182
|
...props,
|
|
@@ -17049,12 +17199,12 @@ var RadioCardRoot = forwardRef28(
|
|
|
17049
17199
|
RadioCardRoot.displayName = "RadioCardRoot_UI";
|
|
17050
17200
|
|
|
17051
17201
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
17052
|
-
import { styled as
|
|
17202
|
+
import { styled as styled88 } from "styled-components";
|
|
17053
17203
|
import { isNotNil as isNotNil35 } from "@wistia/type-guards";
|
|
17054
17204
|
|
|
17055
17205
|
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
17056
|
-
import { styled as
|
|
17057
|
-
var RadioCardIndicator =
|
|
17206
|
+
import { styled as styled87 } from "styled-components";
|
|
17207
|
+
var RadioCardIndicator = styled87.div`
|
|
17058
17208
|
--wui-radio-card-indicator-size: 14px;
|
|
17059
17209
|
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
|
|
17060
17210
|
--wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
|
|
@@ -17103,16 +17253,16 @@ var RadioCardIndicator = styled86.div`
|
|
|
17103
17253
|
RadioCardIndicator.displayName = "RadioCardIndicator_UI";
|
|
17104
17254
|
|
|
17105
17255
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
17106
|
-
import { jsx as
|
|
17107
|
-
var StyledCardContent =
|
|
17256
|
+
import { jsx as jsx324, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
17257
|
+
var StyledCardContent = styled88.div`
|
|
17108
17258
|
display: grid;
|
|
17109
17259
|
grid-auto-flow: column;
|
|
17110
17260
|
gap: var(--wui-space-02);
|
|
17111
17261
|
`;
|
|
17112
|
-
var StyledCardIcon =
|
|
17262
|
+
var StyledCardIcon = styled88.div`
|
|
17113
17263
|
display: contents;
|
|
17114
17264
|
`;
|
|
17115
|
-
var StyledIndicatorContainer =
|
|
17265
|
+
var StyledIndicatorContainer = styled88.div`
|
|
17116
17266
|
height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
|
|
17117
17267
|
display: flex;
|
|
17118
17268
|
align-items: center;
|
|
@@ -17124,17 +17274,17 @@ var RadioCardDefaultLayout = ({
|
|
|
17124
17274
|
showIndicator = true
|
|
17125
17275
|
}) => {
|
|
17126
17276
|
return /* @__PURE__ */ jsxs58(StyledCardContent, { children: [
|
|
17127
|
-
showIndicator ? /* @__PURE__ */
|
|
17277
|
+
showIndicator ? /* @__PURE__ */ jsx324(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx324(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
|
|
17128
17278
|
/* @__PURE__ */ jsxs58(Stack, { gap: "space-02", children: [
|
|
17129
|
-
isNotNil35(icon) && /* @__PURE__ */
|
|
17279
|
+
isNotNil35(icon) && /* @__PURE__ */ jsx324(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
|
|
17130
17280
|
/* @__PURE__ */ jsxs58(
|
|
17131
17281
|
Stack,
|
|
17132
17282
|
{
|
|
17133
17283
|
gap: "space-01",
|
|
17134
17284
|
style: isNotNil35(icon) ? { paddingLeft: 2 } : void 0,
|
|
17135
17285
|
children: [
|
|
17136
|
-
isNotNil35(label) && /* @__PURE__ */
|
|
17137
|
-
isNotNil35(description) && /* @__PURE__ */
|
|
17286
|
+
isNotNil35(label) && /* @__PURE__ */ jsx324(Text, { variant: "label3", children: /* @__PURE__ */ jsx324("strong", { children: label }) }),
|
|
17287
|
+
isNotNil35(description) && /* @__PURE__ */ jsx324(
|
|
17138
17288
|
Text,
|
|
17139
17289
|
{
|
|
17140
17290
|
prominence: "secondary",
|
|
@@ -17151,22 +17301,22 @@ var RadioCardDefaultLayout = ({
|
|
|
17151
17301
|
RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
|
|
17152
17302
|
|
|
17153
17303
|
// src/components/RadioCard/RadioCardChildrenContainer.tsx
|
|
17154
|
-
import { styled as
|
|
17155
|
-
var RadioCardChildrenContainer =
|
|
17304
|
+
import { styled as styled89 } from "styled-components";
|
|
17305
|
+
var RadioCardChildrenContainer = styled89.div`
|
|
17156
17306
|
flex: 1 1 auto;
|
|
17157
17307
|
`;
|
|
17158
17308
|
|
|
17159
17309
|
// src/components/RadioCard/RadioCard.tsx
|
|
17160
|
-
import { jsx as
|
|
17310
|
+
import { jsx as jsx325 } from "react/jsx-runtime";
|
|
17161
17311
|
var RadioCard = forwardRef29(
|
|
17162
17312
|
({ icon, label, description, showIndicator, children, ...rootProps }, ref) => {
|
|
17163
|
-
return /* @__PURE__ */
|
|
17313
|
+
return /* @__PURE__ */ jsx325(
|
|
17164
17314
|
RadioCardRoot,
|
|
17165
17315
|
{
|
|
17166
17316
|
ref,
|
|
17167
17317
|
padding: children != null ? "space-00" : "space-04",
|
|
17168
17318
|
...rootProps,
|
|
17169
|
-
children: children != null ? /* @__PURE__ */
|
|
17319
|
+
children: children != null ? /* @__PURE__ */ jsx325(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx325(
|
|
17170
17320
|
RadioCardDefaultLayout,
|
|
17171
17321
|
{
|
|
17172
17322
|
description,
|
|
@@ -17183,17 +17333,17 @@ RadioCard.displayName = "RadioCard_UI";
|
|
|
17183
17333
|
|
|
17184
17334
|
// src/components/RadioCard/RadioCardImage.tsx
|
|
17185
17335
|
import { forwardRef as forwardRef30 } from "react";
|
|
17186
|
-
import { jsx as
|
|
17336
|
+
import { jsx as jsx326 } from "react/jsx-runtime";
|
|
17187
17337
|
var RadioCardImage = forwardRef30(
|
|
17188
17338
|
({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
|
|
17189
|
-
return /* @__PURE__ */
|
|
17339
|
+
return /* @__PURE__ */ jsx326(
|
|
17190
17340
|
RadioCardRoot,
|
|
17191
17341
|
{
|
|
17192
17342
|
ref,
|
|
17193
17343
|
...rootProps,
|
|
17194
17344
|
aspectRatio,
|
|
17195
17345
|
padding,
|
|
17196
|
-
children: /* @__PURE__ */
|
|
17346
|
+
children: /* @__PURE__ */ jsx326(
|
|
17197
17347
|
Image,
|
|
17198
17348
|
{
|
|
17199
17349
|
alt: label,
|
|
@@ -17211,49 +17361,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
|
|
|
17211
17361
|
|
|
17212
17362
|
// src/components/ScrollArea/ScrollArea.tsx
|
|
17213
17363
|
import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState23 } from "react";
|
|
17214
|
-
import { styled as
|
|
17364
|
+
import { styled as styled90 } from "styled-components";
|
|
17215
17365
|
import { throttle } from "throttle-debounce";
|
|
17216
|
-
import { jsx as
|
|
17366
|
+
import { jsx as jsx327, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
17217
17367
|
var SHADOW_SIZE_PX = 8;
|
|
17218
|
-
var Container10 =
|
|
17368
|
+
var Container10 = styled90.div`
|
|
17219
17369
|
overflow: hidden;
|
|
17220
17370
|
position: relative;
|
|
17221
17371
|
flex: 1 1 auto;
|
|
17222
17372
|
`;
|
|
17223
|
-
var ScrollContainer =
|
|
17373
|
+
var ScrollContainer = styled90.div`
|
|
17224
17374
|
overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
|
|
17225
17375
|
height: 100%;
|
|
17226
17376
|
width: 100%;
|
|
17227
17377
|
`;
|
|
17228
|
-
var Shadow =
|
|
17378
|
+
var Shadow = styled90.div`
|
|
17229
17379
|
pointer-events: none;
|
|
17230
17380
|
position: absolute;
|
|
17231
17381
|
transition: box-shadow var(--wui-motion-duration-04) var(--wui-motion-ease);
|
|
17232
17382
|
box-shadow: ${({ $isVisible }) => $isVisible ? `0 0 ${SHADOW_SIZE_PX}px ${SHADOW_SIZE_PX}px var(--wui-color-drop-shadow)` : "none"};
|
|
17233
17383
|
z-index: 1;
|
|
17234
17384
|
`;
|
|
17235
|
-
var ShadowAtTop =
|
|
17385
|
+
var ShadowAtTop = styled90(Shadow)`
|
|
17236
17386
|
transform: translateY(-${SHADOW_SIZE_PX}px);
|
|
17237
17387
|
height: 0;
|
|
17238
17388
|
left: 0;
|
|
17239
17389
|
right: 0;
|
|
17240
17390
|
top: 0;
|
|
17241
17391
|
`;
|
|
17242
|
-
var ShadowAtBottom =
|
|
17392
|
+
var ShadowAtBottom = styled90(Shadow)`
|
|
17243
17393
|
transform: translateY(${SHADOW_SIZE_PX}px);
|
|
17244
17394
|
bottom: 0;
|
|
17245
17395
|
height: 0;
|
|
17246
17396
|
left: 0;
|
|
17247
17397
|
right: 0;
|
|
17248
17398
|
`;
|
|
17249
|
-
var ShadowAtLeft =
|
|
17399
|
+
var ShadowAtLeft = styled90(Shadow)`
|
|
17250
17400
|
transform: translateX(-${SHADOW_SIZE_PX}px);
|
|
17251
17401
|
bottom: 0;
|
|
17252
17402
|
left: 0;
|
|
17253
17403
|
top: 0;
|
|
17254
17404
|
width: 0;
|
|
17255
17405
|
`;
|
|
17256
|
-
var ShadowAtRight =
|
|
17406
|
+
var ShadowAtRight = styled90(Shadow)`
|
|
17257
17407
|
transform: translateX(${SHADOW_SIZE_PX}px);
|
|
17258
17408
|
bottom: 0;
|
|
17259
17409
|
right: 0;
|
|
@@ -17294,11 +17444,11 @@ var ScrollArea = forwardRef31(
|
|
|
17294
17444
|
updateShadows();
|
|
17295
17445
|
}, [updateShadows]);
|
|
17296
17446
|
return /* @__PURE__ */ jsxs59(Container10, { style, children: [
|
|
17297
|
-
/* @__PURE__ */
|
|
17298
|
-
/* @__PURE__ */
|
|
17299
|
-
/* @__PURE__ */
|
|
17300
|
-
/* @__PURE__ */
|
|
17301
|
-
/* @__PURE__ */
|
|
17447
|
+
/* @__PURE__ */ jsx327(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
|
|
17448
|
+
/* @__PURE__ */ jsx327(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
|
|
17449
|
+
/* @__PURE__ */ jsx327(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
|
|
17450
|
+
/* @__PURE__ */ jsx327(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
|
|
17451
|
+
/* @__PURE__ */ jsx327(
|
|
17302
17452
|
ScrollContainer,
|
|
17303
17453
|
{
|
|
17304
17454
|
ref: scrollContainerRef,
|
|
@@ -17315,13 +17465,13 @@ ScrollArea.displayName = "ScrollArea_UI";
|
|
|
17315
17465
|
|
|
17316
17466
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
17317
17467
|
import { forwardRef as forwardRef32 } from "react";
|
|
17318
|
-
import { styled as
|
|
17468
|
+
import { styled as styled92, css as css46 } from "styled-components";
|
|
17319
17469
|
import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
|
|
17320
17470
|
import { isNil as isNil18 } from "@wistia/type-guards";
|
|
17321
17471
|
|
|
17322
17472
|
// src/components/SegmentedControl/useSelectedItemStyle.tsx
|
|
17323
17473
|
import { createContext as createContext9, useContext as useContext15, useMemo as useMemo16, useState as useState24 } from "react";
|
|
17324
|
-
import { jsx as
|
|
17474
|
+
import { jsx as jsx328 } from "react/jsx-runtime";
|
|
17325
17475
|
var SelectedItemStyleContext = createContext9(null);
|
|
17326
17476
|
var SelectedItemStyleProvider = ({
|
|
17327
17477
|
children
|
|
@@ -17342,7 +17492,7 @@ var SelectedItemStyleProvider = ({
|
|
|
17342
17492
|
}),
|
|
17343
17493
|
[selectedItemIndicatorStyle]
|
|
17344
17494
|
);
|
|
17345
|
-
return /* @__PURE__ */
|
|
17495
|
+
return /* @__PURE__ */ jsx328(SelectedItemStyleContext.Provider, { value: contextValue, children });
|
|
17346
17496
|
};
|
|
17347
17497
|
var useSelectedItemStyle = () => {
|
|
17348
17498
|
const context = useContext15(SelectedItemStyleContext);
|
|
@@ -17353,7 +17503,7 @@ var useSelectedItemStyle = () => {
|
|
|
17353
17503
|
};
|
|
17354
17504
|
|
|
17355
17505
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
17356
|
-
import { styled as
|
|
17506
|
+
import { styled as styled91, css as css45 } from "styled-components";
|
|
17357
17507
|
import { isUndefined as isUndefined5 } from "@wistia/type-guards";
|
|
17358
17508
|
|
|
17359
17509
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
@@ -17369,13 +17519,13 @@ var useSegmentedControlValue = () => {
|
|
|
17369
17519
|
};
|
|
17370
17520
|
|
|
17371
17521
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
17372
|
-
import { jsx as
|
|
17373
|
-
var selectedItemIndicatorStyles =
|
|
17522
|
+
import { jsx as jsx329 } from "react/jsx-runtime";
|
|
17523
|
+
var selectedItemIndicatorStyles = css45`
|
|
17374
17524
|
background-color: var(--wui-color-bg-fill-white);
|
|
17375
17525
|
border-radius: var(--wui-border-radius-rounded);
|
|
17376
17526
|
box-shadow: var(--wui-elevation-01);
|
|
17377
17527
|
`;
|
|
17378
|
-
var SelectedItemIndicatorDiv =
|
|
17528
|
+
var SelectedItemIndicatorDiv = styled91.div`
|
|
17379
17529
|
${selectedItemIndicatorStyles}
|
|
17380
17530
|
left: 0;
|
|
17381
17531
|
position: absolute;
|
|
@@ -17391,7 +17541,7 @@ var SelectedItemIndicator = () => {
|
|
|
17391
17541
|
if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
|
|
17392
17542
|
return null;
|
|
17393
17543
|
}
|
|
17394
|
-
return /* @__PURE__ */
|
|
17544
|
+
return /* @__PURE__ */ jsx329(
|
|
17395
17545
|
SelectedItemIndicatorDiv,
|
|
17396
17546
|
{
|
|
17397
17547
|
"data-wui-selected-item-indicator": true,
|
|
@@ -17401,8 +17551,8 @@ var SelectedItemIndicator = () => {
|
|
|
17401
17551
|
};
|
|
17402
17552
|
|
|
17403
17553
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
17404
|
-
import { jsx as
|
|
17405
|
-
var segmentedControlStyles =
|
|
17554
|
+
import { jsx as jsx330, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
17555
|
+
var segmentedControlStyles = css46`
|
|
17406
17556
|
display: inline-flex;
|
|
17407
17557
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
17408
17558
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -17413,7 +17563,7 @@ var segmentedControlStyles = css45`
|
|
|
17413
17563
|
position: relative;
|
|
17414
17564
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
17415
17565
|
`;
|
|
17416
|
-
var StyledSegmentedControl =
|
|
17566
|
+
var StyledSegmentedControl = styled92(ToggleGroupRoot2)`
|
|
17417
17567
|
${segmentedControlStyles}
|
|
17418
17568
|
`;
|
|
17419
17569
|
var SegmentedControl = forwardRef32(
|
|
@@ -17428,7 +17578,7 @@ var SegmentedControl = forwardRef32(
|
|
|
17428
17578
|
if (isNil18(children)) {
|
|
17429
17579
|
return null;
|
|
17430
17580
|
}
|
|
17431
|
-
return /* @__PURE__ */
|
|
17581
|
+
return /* @__PURE__ */ jsx330(
|
|
17432
17582
|
StyledSegmentedControl,
|
|
17433
17583
|
{
|
|
17434
17584
|
ref,
|
|
@@ -17440,9 +17590,9 @@ var SegmentedControl = forwardRef32(
|
|
|
17440
17590
|
type: "single",
|
|
17441
17591
|
value: selectedValue,
|
|
17442
17592
|
...props,
|
|
17443
|
-
children: /* @__PURE__ */
|
|
17593
|
+
children: /* @__PURE__ */ jsx330(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs60(SelectedItemStyleProvider, { children: [
|
|
17444
17594
|
children,
|
|
17445
|
-
/* @__PURE__ */
|
|
17595
|
+
/* @__PURE__ */ jsx330(SelectedItemIndicator, {})
|
|
17446
17596
|
] }) })
|
|
17447
17597
|
}
|
|
17448
17598
|
);
|
|
@@ -17452,11 +17602,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
|
|
|
17452
17602
|
|
|
17453
17603
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
17454
17604
|
import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
|
|
17455
|
-
import { styled as
|
|
17605
|
+
import { styled as styled93, css as css47 } from "styled-components";
|
|
17456
17606
|
import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
|
|
17457
17607
|
import { isNotNil as isNotNil36 } from "@wistia/type-guards";
|
|
17458
17608
|
import { jsxs as jsxs61 } from "react/jsx-runtime";
|
|
17459
|
-
var segmentedControlItemStyles =
|
|
17609
|
+
var segmentedControlItemStyles = css47`
|
|
17460
17610
|
all: unset; /* ToggleGroupItem is a button element */
|
|
17461
17611
|
align-items: center;
|
|
17462
17612
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -17524,7 +17674,7 @@ var segmentedControlItemStyles = css46`
|
|
|
17524
17674
|
}
|
|
17525
17675
|
}
|
|
17526
17676
|
`;
|
|
17527
|
-
var StyledSegmentedControlItem =
|
|
17677
|
+
var StyledSegmentedControlItem = styled93(ToggleGroupItem2)`
|
|
17528
17678
|
${segmentedControlItemStyles}
|
|
17529
17679
|
`;
|
|
17530
17680
|
var SegmentedControlItem = forwardRef33(
|
|
@@ -17597,9 +17747,9 @@ import {
|
|
|
17597
17747
|
ScrollDownButton
|
|
17598
17748
|
} from "@radix-ui/react-select";
|
|
17599
17749
|
import { forwardRef as forwardRef34 } from "react";
|
|
17600
|
-
import { styled as
|
|
17601
|
-
import { jsx as
|
|
17602
|
-
var StyledTrigger2 =
|
|
17750
|
+
import { styled as styled94, css as css48 } from "styled-components";
|
|
17751
|
+
import { jsx as jsx331, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
17752
|
+
var StyledTrigger2 = styled94(Trigger3)`
|
|
17603
17753
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
17604
17754
|
${inputCss};
|
|
17605
17755
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -17645,7 +17795,7 @@ var StyledTrigger2 = styled93(Trigger3)`
|
|
|
17645
17795
|
color: var(--wui-input-placeholder);
|
|
17646
17796
|
}
|
|
17647
17797
|
`;
|
|
17648
|
-
var StyledContent3 =
|
|
17798
|
+
var StyledContent3 = styled94(Content3)`
|
|
17649
17799
|
--wui-select-content-border: var(--wui-color-border);
|
|
17650
17800
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
17651
17801
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -17667,15 +17817,15 @@ var StyledContent3 = styled93(Content3)`
|
|
|
17667
17817
|
margin: var(--wui-space-02) 0;
|
|
17668
17818
|
}
|
|
17669
17819
|
`;
|
|
17670
|
-
var scrollButtonStyles =
|
|
17820
|
+
var scrollButtonStyles = css48`
|
|
17671
17821
|
align-items: center;
|
|
17672
17822
|
display: flex;
|
|
17673
17823
|
justify-content: center;
|
|
17674
17824
|
`;
|
|
17675
|
-
var StyledScrollDownButton =
|
|
17825
|
+
var StyledScrollDownButton = styled94(ScrollDownButton)`
|
|
17676
17826
|
${scrollButtonStyles}
|
|
17677
17827
|
`;
|
|
17678
|
-
var StyledScrollUpButton =
|
|
17828
|
+
var StyledScrollUpButton = styled94(ScrollUpButton)`
|
|
17679
17829
|
${scrollButtonStyles}
|
|
17680
17830
|
`;
|
|
17681
17831
|
var Select = forwardRef34(
|
|
@@ -17707,8 +17857,8 @@ var Select = forwardRef34(
|
|
|
17707
17857
|
$fullWidth: responsiveFullWidth,
|
|
17708
17858
|
...props,
|
|
17709
17859
|
children: [
|
|
17710
|
-
/* @__PURE__ */
|
|
17711
|
-
/* @__PURE__ */
|
|
17860
|
+
/* @__PURE__ */ jsx331(Value, { placeholder }),
|
|
17861
|
+
/* @__PURE__ */ jsx331(
|
|
17712
17862
|
Icon,
|
|
17713
17863
|
{
|
|
17714
17864
|
size: "md",
|
|
@@ -17718,21 +17868,21 @@ var Select = forwardRef34(
|
|
|
17718
17868
|
]
|
|
17719
17869
|
}
|
|
17720
17870
|
),
|
|
17721
|
-
/* @__PURE__ */
|
|
17871
|
+
/* @__PURE__ */ jsx331(Portal2, { children: /* @__PURE__ */ jsxs62(
|
|
17722
17872
|
StyledContent3,
|
|
17723
17873
|
{
|
|
17724
17874
|
position: "popper",
|
|
17725
17875
|
sideOffset: 8,
|
|
17726
17876
|
children: [
|
|
17727
|
-
/* @__PURE__ */
|
|
17877
|
+
/* @__PURE__ */ jsx331(StyledScrollUpButton, { children: /* @__PURE__ */ jsx331(
|
|
17728
17878
|
Icon,
|
|
17729
17879
|
{
|
|
17730
17880
|
size: "sm",
|
|
17731
17881
|
type: "caret-up"
|
|
17732
17882
|
}
|
|
17733
17883
|
) }),
|
|
17734
|
-
/* @__PURE__ */
|
|
17735
|
-
/* @__PURE__ */
|
|
17884
|
+
/* @__PURE__ */ jsx331(Viewport, { children }),
|
|
17885
|
+
/* @__PURE__ */ jsx331(StyledScrollDownButton, { children: /* @__PURE__ */ jsx331(
|
|
17736
17886
|
Icon,
|
|
17737
17887
|
{
|
|
17738
17888
|
size: "sm",
|
|
@@ -17750,10 +17900,10 @@ Select.displayName = "Select_UI";
|
|
|
17750
17900
|
// src/components/Select/SelectOption.tsx
|
|
17751
17901
|
import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
|
|
17752
17902
|
import { forwardRef as forwardRef35 } from "react";
|
|
17753
|
-
import { styled as
|
|
17903
|
+
import { styled as styled95 } from "styled-components";
|
|
17754
17904
|
import { isNotNil as isNotNil37 } from "@wistia/type-guards";
|
|
17755
|
-
import { jsx as
|
|
17756
|
-
var StyledItem =
|
|
17905
|
+
import { jsx as jsx332, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
17906
|
+
var StyledItem = styled95(Item)`
|
|
17757
17907
|
${getTypographicStyles("label3")}
|
|
17758
17908
|
align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
|
|
17759
17909
|
background-color: transparent;
|
|
@@ -17790,9 +17940,9 @@ var SelectOption = forwardRef35(
|
|
|
17790
17940
|
children: [
|
|
17791
17941
|
isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs63("div", { children: [
|
|
17792
17942
|
children,
|
|
17793
|
-
/* @__PURE__ */
|
|
17794
|
-
] }) : /* @__PURE__ */
|
|
17795
|
-
/* @__PURE__ */
|
|
17943
|
+
/* @__PURE__ */ jsx332("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx332(ItemText, { children: selectedDisplayValue }) })
|
|
17944
|
+
] }) : /* @__PURE__ */ jsx332(ItemText, { children }),
|
|
17945
|
+
/* @__PURE__ */ jsx332(ItemIndicator, { children: /* @__PURE__ */ jsx332(
|
|
17796
17946
|
Icon,
|
|
17797
17947
|
{
|
|
17798
17948
|
size: "md",
|
|
@@ -17808,14 +17958,14 @@ SelectOption.displayName = "SelectOption_UI";
|
|
|
17808
17958
|
|
|
17809
17959
|
// src/components/Select/SelectOptionGroup.tsx
|
|
17810
17960
|
import { Group, Label as Label3 } from "@radix-ui/react-select";
|
|
17811
|
-
import { styled as
|
|
17812
|
-
import { jsx as
|
|
17813
|
-
var StyledLabel4 =
|
|
17961
|
+
import { styled as styled96 } from "styled-components";
|
|
17962
|
+
import { jsx as jsx333, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
17963
|
+
var StyledLabel4 = styled96(Label3)`
|
|
17814
17964
|
padding: var(--wui-select-option-padding);
|
|
17815
17965
|
`;
|
|
17816
17966
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
17817
17967
|
return /* @__PURE__ */ jsxs64(Group, { ...props, children: [
|
|
17818
|
-
/* @__PURE__ */
|
|
17968
|
+
/* @__PURE__ */ jsx333(StyledLabel4, { children: /* @__PURE__ */ jsx333(
|
|
17819
17969
|
Heading,
|
|
17820
17970
|
{
|
|
17821
17971
|
renderAs: "span",
|
|
@@ -17834,10 +17984,10 @@ import {
|
|
|
17834
17984
|
Range as RadixSliderRange,
|
|
17835
17985
|
Thumb as RadixSliderThumb
|
|
17836
17986
|
} from "@radix-ui/react-slider";
|
|
17837
|
-
import { styled as
|
|
17987
|
+
import { styled as styled97 } from "styled-components";
|
|
17838
17988
|
import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
|
|
17839
|
-
import { jsx as
|
|
17840
|
-
var SliderContainer =
|
|
17989
|
+
import { jsx as jsx334, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
17990
|
+
var SliderContainer = styled97.div`
|
|
17841
17991
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
17842
17992
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
17843
17993
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -17853,7 +18003,7 @@ var SliderContainer = styled96.div`
|
|
|
17853
18003
|
pointer-events: none;
|
|
17854
18004
|
}
|
|
17855
18005
|
`;
|
|
17856
|
-
var StyledSliderRoot =
|
|
18006
|
+
var StyledSliderRoot = styled97(RadixSliderRoot)`
|
|
17857
18007
|
position: relative;
|
|
17858
18008
|
display: flex;
|
|
17859
18009
|
align-items: center;
|
|
@@ -17861,20 +18011,20 @@ var StyledSliderRoot = styled96(RadixSliderRoot)`
|
|
|
17861
18011
|
touch-action: none;
|
|
17862
18012
|
width: 100%;
|
|
17863
18013
|
`;
|
|
17864
|
-
var StyledSliderTrack =
|
|
18014
|
+
var StyledSliderTrack = styled97(RadixSliderTrack)`
|
|
17865
18015
|
background-color: var(--wui-slider-track-color);
|
|
17866
18016
|
border-radius: var(--wui-slider-track-border-radius);
|
|
17867
18017
|
flex-grow: 1;
|
|
17868
18018
|
height: 6px;
|
|
17869
18019
|
position: relative;
|
|
17870
18020
|
`;
|
|
17871
|
-
var StyledSliderRange =
|
|
18021
|
+
var StyledSliderRange = styled97(RadixSliderRange)`
|
|
17872
18022
|
background-color: var(--wui-slider-range-color);
|
|
17873
18023
|
border-radius: var(--wui-slider-track-border-radius);
|
|
17874
18024
|
height: 100%;
|
|
17875
18025
|
position: absolute;
|
|
17876
18026
|
`;
|
|
17877
|
-
var StyledSliderThumb =
|
|
18027
|
+
var StyledSliderThumb = styled97(RadixSliderThumb)`
|
|
17878
18028
|
background-color: var(--wui-slider-thumb-color);
|
|
17879
18029
|
border-radius: var(--wui-border-radius-rounded);
|
|
17880
18030
|
cursor: grab;
|
|
@@ -17925,7 +18075,7 @@ var Slider = ({
|
|
|
17925
18075
|
onChange(newValue);
|
|
17926
18076
|
}
|
|
17927
18077
|
};
|
|
17928
|
-
return /* @__PURE__ */
|
|
18078
|
+
return /* @__PURE__ */ jsx334(
|
|
17929
18079
|
SliderContainer,
|
|
17930
18080
|
{
|
|
17931
18081
|
...otherProps,
|
|
@@ -17943,8 +18093,8 @@ var Slider = ({
|
|
|
17943
18093
|
step,
|
|
17944
18094
|
...value ? { value } : {},
|
|
17945
18095
|
children: [
|
|
17946
|
-
/* @__PURE__ */
|
|
17947
|
-
values.map((_, index) => /* @__PURE__ */
|
|
18096
|
+
/* @__PURE__ */ jsx334(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx334(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
|
|
18097
|
+
values.map((_, index) => /* @__PURE__ */ jsx334(
|
|
17948
18098
|
StyledSliderThumb,
|
|
17949
18099
|
{
|
|
17950
18100
|
"data-testid": `${dataTestId}-thumb-${index}`
|
|
@@ -17960,25 +18110,25 @@ var Slider = ({
|
|
|
17960
18110
|
Slider.displayName = "Slider_UI";
|
|
17961
18111
|
|
|
17962
18112
|
// src/components/Table/Table.tsx
|
|
17963
|
-
import { styled as
|
|
17964
|
-
import { jsx as
|
|
17965
|
-
var StyledTable =
|
|
18113
|
+
import { styled as styled98, css as css49 } from "styled-components";
|
|
18114
|
+
import { jsx as jsx335 } from "react/jsx-runtime";
|
|
18115
|
+
var StyledTable = styled98.table`
|
|
17966
18116
|
width: 100%;
|
|
17967
18117
|
border-collapse: collapse;
|
|
17968
18118
|
|
|
17969
|
-
${({ $divided }) => $divided &&
|
|
18119
|
+
${({ $divided }) => $divided && css49`
|
|
17970
18120
|
tr {
|
|
17971
18121
|
border-bottom: 1px solid var(--wui-color-border);
|
|
17972
18122
|
}
|
|
17973
18123
|
`}
|
|
17974
18124
|
|
|
17975
|
-
${({ $striped }) => $striped &&
|
|
18125
|
+
${({ $striped }) => $striped && css49`
|
|
17976
18126
|
tbody tr:nth-child(even) {
|
|
17977
18127
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
17978
18128
|
}
|
|
17979
18129
|
`}
|
|
17980
18130
|
|
|
17981
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
18131
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css49`
|
|
17982
18132
|
thead {
|
|
17983
18133
|
${visuallyHiddenStyle}
|
|
17984
18134
|
}
|
|
@@ -17991,7 +18141,7 @@ var Table = ({
|
|
|
17991
18141
|
visuallyHiddenHeader = false,
|
|
17992
18142
|
...props
|
|
17993
18143
|
}) => {
|
|
17994
|
-
return /* @__PURE__ */
|
|
18144
|
+
return /* @__PURE__ */ jsx335(
|
|
17995
18145
|
StyledTable,
|
|
17996
18146
|
{
|
|
17997
18147
|
$divided: divided,
|
|
@@ -18004,37 +18154,37 @@ var Table = ({
|
|
|
18004
18154
|
};
|
|
18005
18155
|
|
|
18006
18156
|
// src/components/Table/TableBody.tsx
|
|
18007
|
-
import { styled as
|
|
18157
|
+
import { styled as styled99 } from "styled-components";
|
|
18008
18158
|
|
|
18009
18159
|
// src/components/Table/TableSectionContext.ts
|
|
18010
18160
|
import { createContext as createContext11 } from "react";
|
|
18011
18161
|
var TableSectionContext = createContext11(null);
|
|
18012
18162
|
|
|
18013
18163
|
// src/components/Table/TableBody.tsx
|
|
18014
|
-
import { jsx as
|
|
18015
|
-
var StyledTableBody =
|
|
18164
|
+
import { jsx as jsx336 } from "react/jsx-runtime";
|
|
18165
|
+
var StyledTableBody = styled99.tbody`
|
|
18016
18166
|
width: 100%;
|
|
18017
18167
|
`;
|
|
18018
18168
|
var TableBody = ({ children, ...props }) => {
|
|
18019
|
-
return /* @__PURE__ */
|
|
18169
|
+
return /* @__PURE__ */ jsx336(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx336(StyledTableBody, { ...props, children }) });
|
|
18020
18170
|
};
|
|
18021
18171
|
|
|
18022
18172
|
// src/components/Table/TableCell.tsx
|
|
18023
18173
|
import { useContext as useContext17 } from "react";
|
|
18024
|
-
import { styled as
|
|
18025
|
-
import { jsx as
|
|
18026
|
-
var sharedStyles =
|
|
18174
|
+
import { styled as styled100, css as css50 } from "styled-components";
|
|
18175
|
+
import { jsx as jsx337 } from "react/jsx-runtime";
|
|
18176
|
+
var sharedStyles = css50`
|
|
18027
18177
|
color: var(--wui-color-text);
|
|
18028
18178
|
padding: var(--wui-space-02);
|
|
18029
18179
|
text-align: left;
|
|
18030
18180
|
`;
|
|
18031
|
-
var StyledTh =
|
|
18181
|
+
var StyledTh = styled100.th`
|
|
18032
18182
|
${sharedStyles}
|
|
18033
18183
|
font-size: var(--wui-typography-body-4-size);
|
|
18034
18184
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
18035
18185
|
line-height: var(--wui-typography-body-4-line-height);
|
|
18036
18186
|
`;
|
|
18037
|
-
var StyledTd =
|
|
18187
|
+
var StyledTd = styled100.td`
|
|
18038
18188
|
${sharedStyles}
|
|
18039
18189
|
font-size: var(--wui-typography-body-2-size);
|
|
18040
18190
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -18043,39 +18193,39 @@ var StyledTd = styled99.td`
|
|
|
18043
18193
|
var TableCell = ({ children, ...props }) => {
|
|
18044
18194
|
const section = useContext17(TableSectionContext);
|
|
18045
18195
|
if (section === "head") {
|
|
18046
|
-
return /* @__PURE__ */
|
|
18196
|
+
return /* @__PURE__ */ jsx337(StyledTh, { ...props, children });
|
|
18047
18197
|
}
|
|
18048
|
-
return /* @__PURE__ */
|
|
18198
|
+
return /* @__PURE__ */ jsx337(StyledTd, { ...props, children });
|
|
18049
18199
|
};
|
|
18050
18200
|
|
|
18051
18201
|
// src/components/Table/TableFoot.tsx
|
|
18052
|
-
import { styled as
|
|
18053
|
-
import { jsx as
|
|
18054
|
-
var StyledTableFoot =
|
|
18202
|
+
import { styled as styled101 } from "styled-components";
|
|
18203
|
+
import { jsx as jsx338 } from "react/jsx-runtime";
|
|
18204
|
+
var StyledTableFoot = styled101.tfoot`
|
|
18055
18205
|
width: 100%;
|
|
18056
18206
|
`;
|
|
18057
18207
|
var TableFoot = ({ children, ...props }) => {
|
|
18058
|
-
return /* @__PURE__ */
|
|
18208
|
+
return /* @__PURE__ */ jsx338(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx338(StyledTableFoot, { ...props, children }) });
|
|
18059
18209
|
};
|
|
18060
18210
|
|
|
18061
18211
|
// src/components/Table/TableHead.tsx
|
|
18062
|
-
import { styled as
|
|
18063
|
-
import { jsx as
|
|
18064
|
-
var StyledThead =
|
|
18212
|
+
import { styled as styled102 } from "styled-components";
|
|
18213
|
+
import { jsx as jsx339 } from "react/jsx-runtime";
|
|
18214
|
+
var StyledThead = styled102.thead`
|
|
18065
18215
|
width: 100%;
|
|
18066
18216
|
`;
|
|
18067
18217
|
var TableHead = ({ children, ...props }) => {
|
|
18068
|
-
return /* @__PURE__ */
|
|
18218
|
+
return /* @__PURE__ */ jsx339(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx339(StyledThead, { ...props, children }) });
|
|
18069
18219
|
};
|
|
18070
18220
|
|
|
18071
18221
|
// src/components/Table/TableRow.tsx
|
|
18072
|
-
import { styled as
|
|
18073
|
-
import { jsx as
|
|
18074
|
-
var StyledTableRow =
|
|
18222
|
+
import { styled as styled103 } from "styled-components";
|
|
18223
|
+
import { jsx as jsx340 } from "react/jsx-runtime";
|
|
18224
|
+
var StyledTableRow = styled103.tr`
|
|
18075
18225
|
width: 100%;
|
|
18076
18226
|
`;
|
|
18077
18227
|
var TableRow = ({ children, ...props }) => {
|
|
18078
|
-
return /* @__PURE__ */
|
|
18228
|
+
return /* @__PURE__ */ jsx340(StyledTableRow, { ...props, children });
|
|
18079
18229
|
};
|
|
18080
18230
|
|
|
18081
18231
|
// src/components/Tabs/Tabs.tsx
|
|
@@ -18096,7 +18246,7 @@ var useTabsValue = () => {
|
|
|
18096
18246
|
};
|
|
18097
18247
|
|
|
18098
18248
|
// src/components/Tabs/Tabs.tsx
|
|
18099
|
-
import { jsx as
|
|
18249
|
+
import { jsx as jsx341 } from "react/jsx-runtime";
|
|
18100
18250
|
var Tabs = ({
|
|
18101
18251
|
children,
|
|
18102
18252
|
value: valueProp,
|
|
@@ -18124,42 +18274,42 @@ var Tabs = ({
|
|
|
18124
18274
|
if (isNotNil38(defaultValue)) {
|
|
18125
18275
|
rootProps.defaultValue = defaultValue;
|
|
18126
18276
|
}
|
|
18127
|
-
return /* @__PURE__ */
|
|
18277
|
+
return /* @__PURE__ */ jsx341(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx341(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx341(SelectedItemStyleProvider, { children }) }) });
|
|
18128
18278
|
};
|
|
18129
18279
|
Tabs.displayName = "Tabs_UI";
|
|
18130
18280
|
|
|
18131
18281
|
// src/components/Tabs/TabsContent.tsx
|
|
18132
18282
|
import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
|
|
18133
|
-
import { jsx as
|
|
18283
|
+
import { jsx as jsx342 } from "react/jsx-runtime";
|
|
18134
18284
|
var TabsContent = ({ children, value }) => {
|
|
18135
|
-
return /* @__PURE__ */
|
|
18285
|
+
return /* @__PURE__ */ jsx342(RadixTabsContent, { value, children });
|
|
18136
18286
|
};
|
|
18137
18287
|
TabsContent.displayName = "TabsContent_UI";
|
|
18138
18288
|
|
|
18139
18289
|
// src/components/Tabs/TabsList.tsx
|
|
18140
18290
|
import { List as RadixTabList } from "@radix-ui/react-tabs";
|
|
18141
|
-
import { styled as
|
|
18291
|
+
import { styled as styled105 } from "styled-components";
|
|
18142
18292
|
|
|
18143
18293
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
18144
18294
|
import { isUndefined as isUndefined6 } from "@wistia/type-guards";
|
|
18145
18295
|
|
|
18146
18296
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
18147
|
-
import { styled as
|
|
18148
|
-
var TabsSelectedItemIndicatorDiv =
|
|
18297
|
+
import { styled as styled104 } from "styled-components";
|
|
18298
|
+
var TabsSelectedItemIndicatorDiv = styled104(SelectedItemIndicatorDiv)`
|
|
18149
18299
|
:has(button[role='tab']:focus-visible) > & {
|
|
18150
18300
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
18151
18301
|
}
|
|
18152
18302
|
`;
|
|
18153
18303
|
|
|
18154
18304
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
18155
|
-
import { jsx as
|
|
18305
|
+
import { jsx as jsx343 } from "react/jsx-runtime";
|
|
18156
18306
|
var SelectedTabIndicator = () => {
|
|
18157
18307
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
18158
18308
|
const selectedValue = useTabsValue();
|
|
18159
18309
|
if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
|
|
18160
18310
|
return null;
|
|
18161
18311
|
}
|
|
18162
|
-
return /* @__PURE__ */
|
|
18312
|
+
return /* @__PURE__ */ jsx343(
|
|
18163
18313
|
TabsSelectedItemIndicatorDiv,
|
|
18164
18314
|
{
|
|
18165
18315
|
"data-wui-selected-item-indicator": true,
|
|
@@ -18169,8 +18319,8 @@ var SelectedTabIndicator = () => {
|
|
|
18169
18319
|
};
|
|
18170
18320
|
|
|
18171
18321
|
// src/components/Tabs/TabsList.tsx
|
|
18172
|
-
import { jsx as
|
|
18173
|
-
var StyledRadixTabsList =
|
|
18322
|
+
import { jsx as jsx344, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
18323
|
+
var StyledRadixTabsList = styled105(RadixTabList)`
|
|
18174
18324
|
${segmentedControlStyles}
|
|
18175
18325
|
`;
|
|
18176
18326
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
@@ -18181,7 +18331,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
|
18181
18331
|
"aria-label": props["aria-label"],
|
|
18182
18332
|
children: [
|
|
18183
18333
|
children,
|
|
18184
|
-
/* @__PURE__ */
|
|
18334
|
+
/* @__PURE__ */ jsx344(SelectedTabIndicator, {})
|
|
18185
18335
|
]
|
|
18186
18336
|
}
|
|
18187
18337
|
);
|
|
@@ -18193,9 +18343,9 @@ import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef2
|
|
|
18193
18343
|
import { isNotNil as isNotNil39 } from "@wistia/type-guards";
|
|
18194
18344
|
|
|
18195
18345
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
18196
|
-
import { styled as
|
|
18346
|
+
import { styled as styled106 } from "styled-components";
|
|
18197
18347
|
import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
|
|
18198
|
-
var StyledRadixTabsTrigger =
|
|
18348
|
+
var StyledRadixTabsTrigger = styled106(RadixTabsTrigger)`
|
|
18199
18349
|
${segmentedControlItemStyles}
|
|
18200
18350
|
|
|
18201
18351
|
&:focus-visible {
|
|
@@ -18256,10 +18406,10 @@ var TabsTrigger = forwardRef36(
|
|
|
18256
18406
|
TabsTrigger.displayName = "TabsTrigger_UI";
|
|
18257
18407
|
|
|
18258
18408
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
18259
|
-
import { styled as
|
|
18409
|
+
import { styled as styled107 } from "styled-components";
|
|
18260
18410
|
import { isNotNil as isNotNil40 } from "@wistia/type-guards";
|
|
18261
|
-
import { jsx as
|
|
18262
|
-
var StyledThumbnailBadge =
|
|
18411
|
+
import { jsx as jsx345, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
18412
|
+
var StyledThumbnailBadge = styled107.div`
|
|
18263
18413
|
align-items: center;
|
|
18264
18414
|
background-color: rgb(0 0 0 / 50%);
|
|
18265
18415
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -18287,14 +18437,14 @@ var StyledThumbnailBadge = styled106.div`
|
|
|
18287
18437
|
var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
18288
18438
|
return /* @__PURE__ */ jsxs68(StyledThumbnailBadge, { ...props, children: [
|
|
18289
18439
|
isNotNil40(icon) && icon,
|
|
18290
|
-
/* @__PURE__ */
|
|
18440
|
+
/* @__PURE__ */ jsx345("span", { children: label })
|
|
18291
18441
|
] });
|
|
18292
18442
|
};
|
|
18293
18443
|
ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
18294
18444
|
|
|
18295
18445
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
18296
18446
|
import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
|
|
18297
|
-
import { styled as
|
|
18447
|
+
import { styled as styled109 } from "styled-components";
|
|
18298
18448
|
import {
|
|
18299
18449
|
isNil as isNil19,
|
|
18300
18450
|
isNotNil as isNotNil43,
|
|
@@ -18306,9 +18456,9 @@ import {
|
|
|
18306
18456
|
|
|
18307
18457
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
18308
18458
|
import { isNotNil as isNotNil41 } from "@wistia/type-guards";
|
|
18309
|
-
import { css as
|
|
18459
|
+
import { css as css51 } from "styled-components";
|
|
18310
18460
|
var gradients = {
|
|
18311
|
-
defaultDarkOne:
|
|
18461
|
+
defaultDarkOne: css51`
|
|
18312
18462
|
background-color: #222d66;
|
|
18313
18463
|
background-image:
|
|
18314
18464
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -18316,7 +18466,7 @@ var gradients = {
|
|
|
18316
18466
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
18317
18467
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
18318
18468
|
`,
|
|
18319
|
-
defaultDarkTwo:
|
|
18469
|
+
defaultDarkTwo: css51`
|
|
18320
18470
|
background-color: #222d66;
|
|
18321
18471
|
background-image:
|
|
18322
18472
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -18324,7 +18474,7 @@ var gradients = {
|
|
|
18324
18474
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
18325
18475
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
18326
18476
|
`,
|
|
18327
|
-
defaultLightOne:
|
|
18477
|
+
defaultLightOne: css51`
|
|
18328
18478
|
background-color: #ccd5ff;
|
|
18329
18479
|
background-image:
|
|
18330
18480
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -18332,13 +18482,13 @@ var gradients = {
|
|
|
18332
18482
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
18333
18483
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
18334
18484
|
`,
|
|
18335
|
-
defaultLightTwo:
|
|
18485
|
+
defaultLightTwo: css51`
|
|
18336
18486
|
background-color: #ccd5ff;
|
|
18337
18487
|
background-image:
|
|
18338
18488
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
18339
18489
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
18340
18490
|
`,
|
|
18341
|
-
defaultMidOne:
|
|
18491
|
+
defaultMidOne: css51`
|
|
18342
18492
|
background-color: #6b84ff;
|
|
18343
18493
|
background-image:
|
|
18344
18494
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -18346,13 +18496,13 @@ var gradients = {
|
|
|
18346
18496
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
18347
18497
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
18348
18498
|
`,
|
|
18349
|
-
defaultMidTwo:
|
|
18499
|
+
defaultMidTwo: css51`
|
|
18350
18500
|
background-color: #6b84ff;
|
|
18351
18501
|
background-image:
|
|
18352
18502
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
18353
18503
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
18354
18504
|
`,
|
|
18355
|
-
green:
|
|
18505
|
+
green: css51`
|
|
18356
18506
|
background-color: #fafffa;
|
|
18357
18507
|
background-image:
|
|
18358
18508
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -18360,7 +18510,7 @@ var gradients = {
|
|
|
18360
18510
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
18361
18511
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
18362
18512
|
`,
|
|
18363
|
-
greenWithPop:
|
|
18513
|
+
greenWithPop: css51`
|
|
18364
18514
|
background-color: #fafffa;
|
|
18365
18515
|
background-image:
|
|
18366
18516
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -18368,7 +18518,7 @@ var gradients = {
|
|
|
18368
18518
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
18369
18519
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
18370
18520
|
`,
|
|
18371
|
-
pink:
|
|
18521
|
+
pink: css51`
|
|
18372
18522
|
background-color: #fffff0;
|
|
18373
18523
|
background-image:
|
|
18374
18524
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -18376,7 +18526,7 @@ var gradients = {
|
|
|
18376
18526
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
18377
18527
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
18378
18528
|
`,
|
|
18379
|
-
pinkWithPop:
|
|
18529
|
+
pinkWithPop: css51`
|
|
18380
18530
|
background-color: #fffff0;
|
|
18381
18531
|
background-image:
|
|
18382
18532
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -18384,7 +18534,7 @@ var gradients = {
|
|
|
18384
18534
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
18385
18535
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
18386
18536
|
`,
|
|
18387
|
-
playfulGradientOne:
|
|
18537
|
+
playfulGradientOne: css51`
|
|
18388
18538
|
background-color: #f7f8ff;
|
|
18389
18539
|
background-image:
|
|
18390
18540
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -18392,7 +18542,7 @@ var gradients = {
|
|
|
18392
18542
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
18393
18543
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
18394
18544
|
`,
|
|
18395
|
-
playfulGradientTwo:
|
|
18545
|
+
playfulGradientTwo: css51`
|
|
18396
18546
|
background-color: #f7f8ff;
|
|
18397
18547
|
background-image:
|
|
18398
18548
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -18400,13 +18550,13 @@ var gradients = {
|
|
|
18400
18550
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
18401
18551
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
18402
18552
|
`,
|
|
18403
|
-
purple:
|
|
18553
|
+
purple: css51`
|
|
18404
18554
|
background-color: #f2caff;
|
|
18405
18555
|
background-image:
|
|
18406
18556
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
18407
18557
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
18408
18558
|
`,
|
|
18409
|
-
purpleWithPop:
|
|
18559
|
+
purpleWithPop: css51`
|
|
18410
18560
|
background-color: #f2caff;
|
|
18411
18561
|
background-image:
|
|
18412
18562
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -18414,7 +18564,7 @@ var gradients = {
|
|
|
18414
18564
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
18415
18565
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
18416
18566
|
`,
|
|
18417
|
-
yellow:
|
|
18567
|
+
yellow: css51`
|
|
18418
18568
|
background-color: #fffff0;
|
|
18419
18569
|
background-image:
|
|
18420
18570
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -18422,7 +18572,7 @@ var gradients = {
|
|
|
18422
18572
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
18423
18573
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
18424
18574
|
`,
|
|
18425
|
-
yellowWithPop:
|
|
18575
|
+
yellowWithPop: css51`
|
|
18426
18576
|
background-color: #fffff0;
|
|
18427
18577
|
background-image:
|
|
18428
18578
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -18437,10 +18587,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
|
|
|
18437
18587
|
};
|
|
18438
18588
|
|
|
18439
18589
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
18440
|
-
import { styled as
|
|
18590
|
+
import { styled as styled108 } from "styled-components";
|
|
18441
18591
|
import { isNotNil as isNotNil42 } from "@wistia/type-guards";
|
|
18442
|
-
import { jsx as
|
|
18443
|
-
var ScrubLine =
|
|
18592
|
+
import { jsx as jsx346, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
18593
|
+
var ScrubLine = styled108.div`
|
|
18444
18594
|
position: absolute;
|
|
18445
18595
|
top: 0;
|
|
18446
18596
|
height: 100%;
|
|
@@ -18557,8 +18707,8 @@ var ThumbnailStoryboardViewer = ({
|
|
|
18557
18707
|
...props,
|
|
18558
18708
|
style: viewerStyles,
|
|
18559
18709
|
children: [
|
|
18560
|
-
/* @__PURE__ */
|
|
18561
|
-
showScrubLine ? /* @__PURE__ */
|
|
18710
|
+
/* @__PURE__ */ jsx346("div", { style: storyboardStyles }),
|
|
18711
|
+
showScrubLine ? /* @__PURE__ */ jsx346(
|
|
18562
18712
|
ScrubLine,
|
|
18563
18713
|
{
|
|
18564
18714
|
style: {
|
|
@@ -18572,7 +18722,7 @@ var ThumbnailStoryboardViewer = ({
|
|
|
18572
18722
|
};
|
|
18573
18723
|
|
|
18574
18724
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
18575
|
-
import { jsx as
|
|
18725
|
+
import { jsx as jsx347, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
18576
18726
|
var WIDE_ASPECT_RATIO = 16 / 9;
|
|
18577
18727
|
var SQUARE_ASPECT_RATIO = 1;
|
|
18578
18728
|
var getAspectRatioValue = (aspectRatio) => {
|
|
@@ -18581,19 +18731,19 @@ var getAspectRatioValue = (aspectRatio) => {
|
|
|
18581
18731
|
}
|
|
18582
18732
|
return WIDE_ASPECT_RATIO;
|
|
18583
18733
|
};
|
|
18584
|
-
var WideThumbnailImage =
|
|
18734
|
+
var WideThumbnailImage = styled109.img`
|
|
18585
18735
|
height: 100%;
|
|
18586
18736
|
object-fit: cover;
|
|
18587
18737
|
width: 100%;
|
|
18588
18738
|
`;
|
|
18589
|
-
var SquareThumbnailImage =
|
|
18739
|
+
var SquareThumbnailImage = styled109.img`
|
|
18590
18740
|
backdrop-filter: blur(8px);
|
|
18591
18741
|
object-fit: contain;
|
|
18592
18742
|
width: 100%;
|
|
18593
18743
|
`;
|
|
18594
18744
|
var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
18595
18745
|
if (thumbnailImageType === "wide") {
|
|
18596
|
-
return /* @__PURE__ */
|
|
18746
|
+
return /* @__PURE__ */ jsx347(
|
|
18597
18747
|
WideThumbnailImage,
|
|
18598
18748
|
{
|
|
18599
18749
|
alt: "",
|
|
@@ -18602,7 +18752,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
18602
18752
|
}
|
|
18603
18753
|
);
|
|
18604
18754
|
}
|
|
18605
|
-
return /* @__PURE__ */
|
|
18755
|
+
return /* @__PURE__ */ jsx347(
|
|
18606
18756
|
SquareThumbnailImage,
|
|
18607
18757
|
{
|
|
18608
18758
|
alt: "",
|
|
@@ -18611,7 +18761,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
18611
18761
|
}
|
|
18612
18762
|
);
|
|
18613
18763
|
};
|
|
18614
|
-
var StyledThumbnailContainer =
|
|
18764
|
+
var StyledThumbnailContainer = styled109.div`
|
|
18615
18765
|
container-type: size;
|
|
18616
18766
|
aspect-ratio: ${({ $aspectRatio }) => getAspectRatioValue($aspectRatio)};
|
|
18617
18767
|
width: ${({ $width }) => $width};
|
|
@@ -18619,7 +18769,7 @@ var StyledThumbnailContainer = styled108.div`
|
|
|
18619
18769
|
overflow: hidden;
|
|
18620
18770
|
${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
|
|
18621
18771
|
`;
|
|
18622
|
-
var StyledThumbnail =
|
|
18772
|
+
var StyledThumbnail = styled109.div`
|
|
18623
18773
|
--wui-thumbnail-badge-offset: var(--wui-space-01);
|
|
18624
18774
|
|
|
18625
18775
|
background-image: ${({ $backgroundUrl }) => isNotNil43($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
@@ -18654,7 +18804,7 @@ var StoryboardRenderer = ({
|
|
|
18654
18804
|
const { url, width: sbWidth, height: sbHeight, frameHeight, frameWidth, frameCount } = storyboard;
|
|
18655
18805
|
const targetWidth = isString4(width) ? parseInt(width, 10) : Number(width);
|
|
18656
18806
|
const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
|
|
18657
|
-
return /* @__PURE__ */
|
|
18807
|
+
return /* @__PURE__ */ jsx347(
|
|
18658
18808
|
ThumbnailStoryboardViewer,
|
|
18659
18809
|
{
|
|
18660
18810
|
cursorPosition: effectiveCursorPosition,
|
|
@@ -18744,7 +18894,7 @@ var Thumbnail = forwardRef37(
|
|
|
18744
18894
|
}, [isScrubbable, isMouseOver, isStoryboardReady, storyboard, height]);
|
|
18745
18895
|
let thumbnailContent = null;
|
|
18746
18896
|
if (storyboard && shouldRenderStoryboard) {
|
|
18747
|
-
thumbnailContent = /* @__PURE__ */
|
|
18897
|
+
thumbnailContent = /* @__PURE__ */ jsx347(
|
|
18748
18898
|
StoryboardRenderer,
|
|
18749
18899
|
{
|
|
18750
18900
|
aspectRatio,
|
|
@@ -18756,7 +18906,7 @@ var Thumbnail = forwardRef37(
|
|
|
18756
18906
|
}
|
|
18757
18907
|
);
|
|
18758
18908
|
} else if (hasValidThumbnailUrl(thumbnailUrl)) {
|
|
18759
|
-
thumbnailContent = /* @__PURE__ */
|
|
18909
|
+
thumbnailContent = /* @__PURE__ */ jsx347(
|
|
18760
18910
|
ThumbnailImage,
|
|
18761
18911
|
{
|
|
18762
18912
|
thumbnailImageType,
|
|
@@ -18766,7 +18916,7 @@ var Thumbnail = forwardRef37(
|
|
|
18766
18916
|
} else {
|
|
18767
18917
|
thumbnailContent = null;
|
|
18768
18918
|
}
|
|
18769
|
-
return /* @__PURE__ */
|
|
18919
|
+
return /* @__PURE__ */ jsx347(
|
|
18770
18920
|
StyledThumbnailContainer,
|
|
18771
18921
|
{
|
|
18772
18922
|
ref,
|
|
@@ -18799,16 +18949,16 @@ Thumbnail.displayName = "Thumbnail_UI";
|
|
|
18799
18949
|
|
|
18800
18950
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
18801
18951
|
import { cloneElement as cloneElement9, Children as Children11 } from "react";
|
|
18802
|
-
import { styled as
|
|
18952
|
+
import { styled as styled110 } from "styled-components";
|
|
18803
18953
|
import { isNonEmptyArray } from "@wistia/type-guards";
|
|
18804
|
-
import { jsx as
|
|
18805
|
-
var ThumbnailCollageContainer =
|
|
18954
|
+
import { jsx as jsx348 } from "react/jsx-runtime";
|
|
18955
|
+
var ThumbnailCollageContainer = styled110.div`
|
|
18806
18956
|
container-type: size;
|
|
18807
18957
|
width: 100%;
|
|
18808
18958
|
aspect-ratio: 16 / 9;
|
|
18809
18959
|
display: flex;
|
|
18810
18960
|
`;
|
|
18811
|
-
var StyledThumbnailCollage =
|
|
18961
|
+
var StyledThumbnailCollage = styled110.div`
|
|
18812
18962
|
display: grid;
|
|
18813
18963
|
gap: var(--wui-space-01);
|
|
18814
18964
|
width: 100%;
|
|
@@ -18866,7 +19016,7 @@ var ThumbnailCollage = ({
|
|
|
18866
19016
|
});
|
|
18867
19017
|
}) : [
|
|
18868
19018
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
18869
|
-
/* @__PURE__ */
|
|
19019
|
+
/* @__PURE__ */ jsx348(
|
|
18870
19020
|
Thumbnail,
|
|
18871
19021
|
{
|
|
18872
19022
|
gradientBackground,
|
|
@@ -18875,7 +19025,7 @@ var ThumbnailCollage = ({
|
|
|
18875
19025
|
"fallback"
|
|
18876
19026
|
)
|
|
18877
19027
|
];
|
|
18878
|
-
return /* @__PURE__ */
|
|
19028
|
+
return /* @__PURE__ */ jsx348(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx348(
|
|
18879
19029
|
StyledThumbnailCollage,
|
|
18880
19030
|
{
|
|
18881
19031
|
$gradientBackground: gradientBackground,
|
|
@@ -18887,26 +19037,26 @@ var ThumbnailCollage = ({
|
|
|
18887
19037
|
};
|
|
18888
19038
|
|
|
18889
19039
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
18890
|
-
import { styled as
|
|
19040
|
+
import { styled as styled111, css as css52 } from "styled-components";
|
|
18891
19041
|
import { isNotNil as isNotNil44 } from "@wistia/type-guards";
|
|
18892
|
-
import { jsx as
|
|
19042
|
+
import { jsx as jsx349, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
18893
19043
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
18894
19044
|
if (iconOnly) {
|
|
18895
|
-
return /* @__PURE__ */
|
|
19045
|
+
return /* @__PURE__ */ jsx349(
|
|
18896
19046
|
"g",
|
|
18897
19047
|
{
|
|
18898
19048
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
18899
19049
|
fill: brandmarkColor,
|
|
18900
|
-
children: /* @__PURE__ */
|
|
19050
|
+
children: /* @__PURE__ */ jsx349("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" })
|
|
18901
19051
|
}
|
|
18902
19052
|
);
|
|
18903
19053
|
}
|
|
18904
|
-
return /* @__PURE__ */
|
|
19054
|
+
return /* @__PURE__ */ jsx349(
|
|
18905
19055
|
"g",
|
|
18906
19056
|
{
|
|
18907
19057
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
18908
19058
|
fill: brandmarkColor,
|
|
18909
|
-
children: /* @__PURE__ */
|
|
19059
|
+
children: /* @__PURE__ */ jsx349("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" })
|
|
18910
19060
|
}
|
|
18911
19061
|
);
|
|
18912
19062
|
};
|
|
@@ -18914,12 +19064,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
18914
19064
|
if (iconOnly) {
|
|
18915
19065
|
return null;
|
|
18916
19066
|
}
|
|
18917
|
-
return /* @__PURE__ */
|
|
19067
|
+
return /* @__PURE__ */ jsx349(
|
|
18918
19068
|
"g",
|
|
18919
19069
|
{
|
|
18920
19070
|
"data-testid": "ui-wistia-logo-logotype",
|
|
18921
19071
|
fill: logotypeColor,
|
|
18922
|
-
children: /* @__PURE__ */
|
|
19072
|
+
children: /* @__PURE__ */ jsx349("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" })
|
|
18923
19073
|
}
|
|
18924
19074
|
);
|
|
18925
19075
|
};
|
|
@@ -18929,7 +19079,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
18929
19079
|
}
|
|
18930
19080
|
return "0 0 144 31.47";
|
|
18931
19081
|
};
|
|
18932
|
-
var WistiaLogoComponent =
|
|
19082
|
+
var WistiaLogoComponent = styled111.svg`
|
|
18933
19083
|
height: ${({ height }) => `${height}px`};
|
|
18934
19084
|
|
|
18935
19085
|
/* ensure it will always fit on mobile */
|
|
@@ -18945,12 +19095,12 @@ var WistiaLogoComponent = styled110.svg`
|
|
|
18945
19095
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
18946
19096
|
if ($opticallyCentered) {
|
|
18947
19097
|
if ($iconOnly) {
|
|
18948
|
-
return
|
|
19098
|
+
return css52`
|
|
18949
19099
|
aspect-ratio: 1;
|
|
18950
19100
|
padding: 11.85% 3.12% 13.91%;
|
|
18951
19101
|
`;
|
|
18952
19102
|
}
|
|
18953
|
-
return
|
|
19103
|
+
return css52`
|
|
18954
19104
|
aspect-ratio: 127 / 32;
|
|
18955
19105
|
`;
|
|
18956
19106
|
}
|
|
@@ -19000,23 +19150,23 @@ var WistiaLogo = ({
|
|
|
19000
19150
|
xmlns: "http://www.w3.org/2000/svg",
|
|
19001
19151
|
...props,
|
|
19002
19152
|
children: [
|
|
19003
|
-
/* @__PURE__ */
|
|
19004
|
-
isNotNil44(description) ? /* @__PURE__ */
|
|
19153
|
+
/* @__PURE__ */ jsx349("title", { children: title }),
|
|
19154
|
+
isNotNil44(description) ? /* @__PURE__ */ jsx349("desc", { children: description }) : null,
|
|
19005
19155
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
19006
19156
|
renderLogotype(logotypeColor, iconOnly)
|
|
19007
19157
|
]
|
|
19008
19158
|
}
|
|
19009
19159
|
);
|
|
19010
|
-
return href !== void 0 ? /* @__PURE__ */
|
|
19160
|
+
return href !== void 0 ? /* @__PURE__ */ jsx349("a", { href, children: Logo }) : Logo;
|
|
19011
19161
|
};
|
|
19012
19162
|
WistiaLogo.displayName = "WistiaLogo_UI";
|
|
19013
19163
|
|
|
19014
19164
|
// src/components/SplitButton/SplitButton.tsx
|
|
19015
|
-
import { styled as
|
|
19165
|
+
import { styled as styled112 } from "styled-components";
|
|
19016
19166
|
import { isNotNil as isNotNil45 } from "@wistia/type-guards";
|
|
19017
19167
|
import { cloneElement as cloneElement10 } from "react";
|
|
19018
|
-
import { jsx as
|
|
19019
|
-
var StyledSplitButton =
|
|
19168
|
+
import { jsx as jsx350, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
19169
|
+
var StyledSplitButton = styled112.span`
|
|
19020
19170
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
19021
19171
|
white-space: nowrap;
|
|
19022
19172
|
|
|
@@ -19037,7 +19187,7 @@ var StyledSplitButton = styled111.span`
|
|
|
19037
19187
|
var SplitButton = ({
|
|
19038
19188
|
children,
|
|
19039
19189
|
menuLabel = "Select an option",
|
|
19040
|
-
menuIcon = /* @__PURE__ */
|
|
19190
|
+
menuIcon = /* @__PURE__ */ jsx350(Icon, { type: "caret-down" }),
|
|
19041
19191
|
menuItems,
|
|
19042
19192
|
disabled = false,
|
|
19043
19193
|
colorScheme = "inherit",
|
|
@@ -19049,7 +19199,7 @@ var SplitButton = ({
|
|
|
19049
19199
|
...props
|
|
19050
19200
|
}) => {
|
|
19051
19201
|
return /* @__PURE__ */ jsxs72(StyledSplitButton, { $colorScheme: colorScheme, children: [
|
|
19052
|
-
/* @__PURE__ */
|
|
19202
|
+
/* @__PURE__ */ jsx350(
|
|
19053
19203
|
Button,
|
|
19054
19204
|
{
|
|
19055
19205
|
disabled,
|
|
@@ -19060,12 +19210,12 @@ var SplitButton = ({
|
|
|
19060
19210
|
children
|
|
19061
19211
|
}
|
|
19062
19212
|
),
|
|
19063
|
-
isNotNil45(menuItems) && /* @__PURE__ */
|
|
19213
|
+
isNotNil45(menuItems) && /* @__PURE__ */ jsx350(
|
|
19064
19214
|
Menu,
|
|
19065
19215
|
{
|
|
19066
19216
|
...menuProps,
|
|
19067
19217
|
disabled,
|
|
19068
|
-
trigger: /* @__PURE__ */
|
|
19218
|
+
trigger: /* @__PURE__ */ jsx350(
|
|
19069
19219
|
IconButton,
|
|
19070
19220
|
{
|
|
19071
19221
|
disabled,
|
|
@@ -19085,16 +19235,16 @@ var SplitButton = ({
|
|
|
19085
19235
|
SplitButton.displayName = "SplitButton_UI";
|
|
19086
19236
|
|
|
19087
19237
|
// src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
|
|
19088
|
-
import { styled as
|
|
19089
|
-
import { jsx as
|
|
19090
|
-
var StyledCustomizableThemeWrapper =
|
|
19238
|
+
import { styled as styled113 } from "styled-components";
|
|
19239
|
+
import { jsx as jsx351 } from "react/jsx-runtime";
|
|
19240
|
+
var StyledCustomizableThemeWrapper = styled113.div(
|
|
19091
19241
|
(props) => props.$overrides
|
|
19092
19242
|
);
|
|
19093
19243
|
var CustomizableThemeWrapper = ({
|
|
19094
19244
|
children,
|
|
19095
19245
|
overrides,
|
|
19096
19246
|
...props
|
|
19097
|
-
}) => /* @__PURE__ */
|
|
19247
|
+
}) => /* @__PURE__ */ jsx351(
|
|
19098
19248
|
StyledCustomizableThemeWrapper,
|
|
19099
19249
|
{
|
|
19100
19250
|
...props,
|
|
@@ -19186,6 +19336,7 @@ export {
|
|
|
19186
19336
|
List,
|
|
19187
19337
|
ListItem,
|
|
19188
19338
|
Mark,
|
|
19339
|
+
Markdown,
|
|
19189
19340
|
Menu,
|
|
19190
19341
|
MenuItem,
|
|
19191
19342
|
MenuItemDescription,
|