@wistia/ui 0.6.10-beta.93026e4d.9b8a499 → 0.6.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +550 -677
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +120 -165
- package/dist/index.d.ts +120 -165
- package/dist/index.mjs +551 -672
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.6.10
|
|
3
|
+
* @license @wistia/ui v0.6.10
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -97,12 +97,6 @@ __export(index_exports, {
|
|
|
97
97
|
Stack: () => Stack,
|
|
98
98
|
SubMenu: () => SubMenu,
|
|
99
99
|
Tab: () => Tab,
|
|
100
|
-
Table: () => Table,
|
|
101
|
-
TableBody: () => TableBody,
|
|
102
|
-
TableCell: () => TableCell,
|
|
103
|
-
TableFooter: () => TableFooter,
|
|
104
|
-
TableHead: () => TableHead,
|
|
105
|
-
TableRow: () => TableRow,
|
|
106
100
|
Tabs: () => Tabs,
|
|
107
101
|
Tag: () => Tag,
|
|
108
102
|
Text: () => Text,
|
|
@@ -9168,59 +9162,10 @@ var IconButton = (0, import_react32.forwardRef)(
|
|
|
9168
9162
|
);
|
|
9169
9163
|
IconButton.displayName = "IconButton";
|
|
9170
9164
|
|
|
9171
|
-
// src/components/Image/Image.tsx
|
|
9172
|
-
var import_styled_components50 = __toESM(require("styled-components"));
|
|
9173
|
-
var import_type_guards29 = require("@wistia/type-guards");
|
|
9174
|
-
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
9175
|
-
var getFillStyle2 = (fillContainer) => {
|
|
9176
|
-
if (fillContainer === "horizontal") {
|
|
9177
|
-
return "width: 100%;";
|
|
9178
|
-
}
|
|
9179
|
-
if (fillContainer === "vertical") {
|
|
9180
|
-
return "height: 100%;";
|
|
9181
|
-
}
|
|
9182
|
-
if (fillContainer === true) {
|
|
9183
|
-
return `
|
|
9184
|
-
width: 100%;
|
|
9185
|
-
height: 100%;
|
|
9186
|
-
`;
|
|
9187
|
-
}
|
|
9188
|
-
return void 0;
|
|
9189
|
-
};
|
|
9190
|
-
var StyledImage = import_styled_components50.default.img`
|
|
9191
|
-
border-radius: ${({ $borderRadius }) => (0, import_type_guards29.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
|
|
9192
|
-
${({ $fillContainer }) => getFillStyle2($fillContainer)};
|
|
9193
|
-
object-fit: ${({ $objFit }) => $objFit};
|
|
9194
|
-
object-position: ${({ $objPosition }) => $objPosition};
|
|
9195
|
-
`;
|
|
9196
|
-
var Image = ({
|
|
9197
|
-
src,
|
|
9198
|
-
alt,
|
|
9199
|
-
borderRadius,
|
|
9200
|
-
fill: fillContainer = false,
|
|
9201
|
-
fit: objFit,
|
|
9202
|
-
loading = "lazy",
|
|
9203
|
-
position: objPosition,
|
|
9204
|
-
...otherProps
|
|
9205
|
-
}) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
|
|
9206
|
-
StyledImage,
|
|
9207
|
-
{
|
|
9208
|
-
$borderRadius: borderRadius,
|
|
9209
|
-
$fillContainer: fillContainer,
|
|
9210
|
-
$objFit: objFit,
|
|
9211
|
-
$objPosition: objPosition,
|
|
9212
|
-
alt,
|
|
9213
|
-
loading,
|
|
9214
|
-
src,
|
|
9215
|
-
...otherProps
|
|
9216
|
-
}
|
|
9217
|
-
);
|
|
9218
|
-
Image.displayName = "Image";
|
|
9219
|
-
|
|
9220
9165
|
// src/components/Menu/Menu.tsx
|
|
9221
|
-
var
|
|
9166
|
+
var import_styled_components50 = __toESM(require("styled-components"));
|
|
9222
9167
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
9223
|
-
var
|
|
9168
|
+
var import_type_guards29 = require("@wistia/type-guards");
|
|
9224
9169
|
var import_react34 = require("react");
|
|
9225
9170
|
|
|
9226
9171
|
// src/components/Menu/MenuContext.tsx
|
|
@@ -9229,8 +9174,8 @@ var MenuContext = (0, import_react33.createContext)({ compact: false });
|
|
|
9229
9174
|
var useMenuContext = () => (0, import_react33.useContext)(MenuContext);
|
|
9230
9175
|
|
|
9231
9176
|
// src/components/Menu/Menu.tsx
|
|
9232
|
-
var
|
|
9233
|
-
var open =
|
|
9177
|
+
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
9178
|
+
var open = import_styled_components50.keyframes`
|
|
9234
9179
|
from {
|
|
9235
9180
|
opacity: 0;
|
|
9236
9181
|
transform: scale(.97) translateY(-8px);
|
|
@@ -9240,7 +9185,7 @@ var open = import_styled_components51.keyframes`
|
|
|
9240
9185
|
transform: scale(1);
|
|
9241
9186
|
}
|
|
9242
9187
|
`;
|
|
9243
|
-
var close =
|
|
9188
|
+
var close = import_styled_components50.keyframes`
|
|
9244
9189
|
from {
|
|
9245
9190
|
opacity: 1;
|
|
9246
9191
|
transform: scale(1);
|
|
@@ -9250,7 +9195,7 @@ var close = import_styled_components51.keyframes`
|
|
|
9250
9195
|
transform: scale(.97) translateY(-8px);
|
|
9251
9196
|
}
|
|
9252
9197
|
`;
|
|
9253
|
-
var menuItemCss =
|
|
9198
|
+
var menuItemCss = import_styled_components50.css`
|
|
9254
9199
|
--menu-label-description-gap: var(--wui-space-01);
|
|
9255
9200
|
--menu-item-inner-gap: var(--wui-space-03);
|
|
9256
9201
|
--menu-item-left-icon-size: 24px;
|
|
@@ -9261,7 +9206,7 @@ var menuItemCss = import_styled_components51.css`
|
|
|
9261
9206
|
--menu-label-line-height: var(--wui-typography-label-3-line-height);
|
|
9262
9207
|
--menu-divider-margin: var(--wui-space-02);
|
|
9263
9208
|
`;
|
|
9264
|
-
var compactMenuItemCss =
|
|
9209
|
+
var compactMenuItemCss = import_styled_components50.css`
|
|
9265
9210
|
--menu-label-description-gap: 0;
|
|
9266
9211
|
--menu-item-inner-gap: var(--wui-space-02);
|
|
9267
9212
|
--menu-item-left-icon-size: 16px;
|
|
@@ -9272,7 +9217,7 @@ var compactMenuItemCss = import_styled_components51.css`
|
|
|
9272
9217
|
--menu-label-line-height: var(--wui-typography-label-4-line-height);
|
|
9273
9218
|
--menu-divider-margin: var(--wui-space-01);
|
|
9274
9219
|
`;
|
|
9275
|
-
var menuContentCss =
|
|
9220
|
+
var menuContentCss = import_styled_components50.css`
|
|
9276
9221
|
--menu-font-family: var(--wui-typography-family-default);
|
|
9277
9222
|
--menu-bg: var(--wui-color-bg-surface);
|
|
9278
9223
|
--menu-shadow: var(--wui-elevation-01);
|
|
@@ -9314,7 +9259,7 @@ var menuContentCss = import_styled_components51.css`
|
|
|
9314
9259
|
margin: var(--menu-divider-margin) 0;
|
|
9315
9260
|
}
|
|
9316
9261
|
`;
|
|
9317
|
-
var MenuContent = (0,
|
|
9262
|
+
var MenuContent = (0, import_styled_components50.default)(import_react_dropdown_menu.DropdownMenuContent)`
|
|
9318
9263
|
${menuContentCss}
|
|
9319
9264
|
`;
|
|
9320
9265
|
var Menu = ({
|
|
@@ -9332,7 +9277,7 @@ var Menu = ({
|
|
|
9332
9277
|
}) => {
|
|
9333
9278
|
const contextValue = (0, import_react34.useMemo)(() => ({ compact }), [compact]);
|
|
9334
9279
|
let controlProps = {
|
|
9335
|
-
...(0,
|
|
9280
|
+
...(0, import_type_guards29.isNotNil)(onOpenChange) && (0, import_type_guards29.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
|
|
9336
9281
|
};
|
|
9337
9282
|
if (disabled) {
|
|
9338
9283
|
controlProps = {
|
|
@@ -9340,24 +9285,24 @@ var Menu = ({
|
|
|
9340
9285
|
onOpenChange: () => null
|
|
9341
9286
|
};
|
|
9342
9287
|
}
|
|
9343
|
-
return /* @__PURE__ */ (0,
|
|
9288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
|
|
9344
9289
|
import_react_dropdown_menu.DropdownMenu,
|
|
9345
9290
|
{
|
|
9346
9291
|
modal: false,
|
|
9347
9292
|
...controlProps,
|
|
9348
9293
|
children: [
|
|
9349
|
-
/* @__PURE__ */ (0,
|
|
9294
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards29.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
|
|
9350
9295
|
Button,
|
|
9351
9296
|
{
|
|
9352
9297
|
"aria-expanded": isOpen,
|
|
9353
9298
|
disabled,
|
|
9354
9299
|
forceState: isOpen ? "active" : void 0,
|
|
9355
|
-
rightIcon: /* @__PURE__ */ (0,
|
|
9300
|
+
rightIcon: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Icon, { type: "caret-down" }),
|
|
9356
9301
|
...triggerProps,
|
|
9357
9302
|
children: label
|
|
9358
9303
|
}
|
|
9359
9304
|
) }),
|
|
9360
|
-
/* @__PURE__ */ (0,
|
|
9305
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
|
|
9361
9306
|
MenuContent,
|
|
9362
9307
|
{
|
|
9363
9308
|
...props,
|
|
@@ -9377,19 +9322,19 @@ var Menu = ({
|
|
|
9377
9322
|
Menu.displayName = "Menu";
|
|
9378
9323
|
|
|
9379
9324
|
// src/components/Menu/MenuLabel.tsx
|
|
9380
|
-
var
|
|
9325
|
+
var import_styled_components51 = __toESM(require("styled-components"));
|
|
9381
9326
|
var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
|
|
9382
|
-
var
|
|
9383
|
-
var StyledMenuLabel = (0,
|
|
9327
|
+
var import_jsx_runtime224 = require("react/jsx-runtime");
|
|
9328
|
+
var StyledMenuLabel = (0, import_styled_components51.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
|
|
9384
9329
|
padding: var(--wui-space-02);
|
|
9385
9330
|
`;
|
|
9386
9331
|
var MenuLabel = ({ children, ...props }) => {
|
|
9387
|
-
return /* @__PURE__ */ (0,
|
|
9332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
|
|
9388
9333
|
StyledMenuLabel,
|
|
9389
9334
|
{
|
|
9390
9335
|
asChild: true,
|
|
9391
9336
|
...props,
|
|
9392
|
-
children: /* @__PURE__ */ (0,
|
|
9337
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
|
|
9393
9338
|
Heading,
|
|
9394
9339
|
{
|
|
9395
9340
|
renderAs: "span",
|
|
@@ -9405,16 +9350,16 @@ MenuLabel.displayName = "MenuLabel";
|
|
|
9405
9350
|
|
|
9406
9351
|
// src/components/Menu/SubMenu.tsx
|
|
9407
9352
|
var import_react36 = require("react");
|
|
9408
|
-
var
|
|
9353
|
+
var import_styled_components54 = __toESM(require("styled-components"));
|
|
9409
9354
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
9410
|
-
var
|
|
9355
|
+
var import_type_guards31 = require("@wistia/type-guards");
|
|
9411
9356
|
|
|
9412
9357
|
// src/components/Menu/MenuItemButton.tsx
|
|
9413
9358
|
var import_react35 = require("react");
|
|
9414
|
-
var
|
|
9415
|
-
var
|
|
9416
|
-
var
|
|
9417
|
-
var StyledButton3 = (0,
|
|
9359
|
+
var import_styled_components52 = __toESM(require("styled-components"));
|
|
9360
|
+
var import_type_guards30 = require("@wistia/type-guards");
|
|
9361
|
+
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
9362
|
+
var StyledButton3 = (0, import_styled_components52.default)(Button)`
|
|
9418
9363
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
9419
9364
|
|
|
9420
9365
|
display: flex;
|
|
@@ -9453,7 +9398,7 @@ var StyledButton3 = (0, import_styled_components53.default)(Button)`
|
|
|
9453
9398
|
padding-left: var(--wui-space-04);
|
|
9454
9399
|
}
|
|
9455
9400
|
`;
|
|
9456
|
-
var StyledLeftIconContainer =
|
|
9401
|
+
var StyledLeftIconContainer = import_styled_components52.default.div`
|
|
9457
9402
|
height: var(--menu-item-left-icon-size);
|
|
9458
9403
|
width: var(--menu-item-left-icon-size);
|
|
9459
9404
|
|
|
@@ -9464,7 +9409,7 @@ var StyledLeftIconContainer = import_styled_components53.default.div`
|
|
|
9464
9409
|
}
|
|
9465
9410
|
}
|
|
9466
9411
|
`;
|
|
9467
|
-
var StyledRightIconContainer =
|
|
9412
|
+
var StyledRightIconContainer = import_styled_components52.default.div`
|
|
9468
9413
|
height: var(--menu-item-right-icon-size);
|
|
9469
9414
|
width: var(--menu-item-right-icon-size);
|
|
9470
9415
|
|
|
@@ -9475,13 +9420,13 @@ var StyledRightIconContainer = import_styled_components53.default.div`
|
|
|
9475
9420
|
}
|
|
9476
9421
|
}
|
|
9477
9422
|
`;
|
|
9478
|
-
var StyledLabelAndDescriptionContainer =
|
|
9423
|
+
var StyledLabelAndDescriptionContainer = import_styled_components52.default.div`
|
|
9479
9424
|
display: flex;
|
|
9480
9425
|
flex-direction: column;
|
|
9481
9426
|
gap: var(--menu-label-description-gap);
|
|
9482
9427
|
flex-basis: 100%;
|
|
9483
9428
|
`;
|
|
9484
|
-
var StyledBadgeContainer =
|
|
9429
|
+
var StyledBadgeContainer = import_styled_components52.default.div`
|
|
9485
9430
|
align-self: start;
|
|
9486
9431
|
justify-self: end;
|
|
9487
9432
|
font-size: var(--wui-typography-label-4-size);
|
|
@@ -9490,13 +9435,13 @@ var StyledBadgeContainer = import_styled_components53.default.div`
|
|
|
9490
9435
|
var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
|
|
9491
9436
|
let { colorScheme, badge } = props;
|
|
9492
9437
|
if (appearance === "dangerous") {
|
|
9493
|
-
if ((0,
|
|
9438
|
+
if ((0, import_type_guards30.isNotUndefined)(colorScheme)) {
|
|
9494
9439
|
console.warn("colorScheme prop is ignored when appearance is dangerous");
|
|
9495
9440
|
}
|
|
9496
9441
|
colorScheme = "error";
|
|
9497
9442
|
}
|
|
9498
9443
|
if (appearance === "gated") {
|
|
9499
|
-
badge = /* @__PURE__ */ (0,
|
|
9444
|
+
badge = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
|
|
9500
9445
|
Icon,
|
|
9501
9446
|
{
|
|
9502
9447
|
colorScheme: "purple",
|
|
@@ -9508,7 +9453,7 @@ var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, com
|
|
|
9508
9453
|
}
|
|
9509
9454
|
);
|
|
9510
9455
|
}
|
|
9511
|
-
return /* @__PURE__ */ (0,
|
|
9456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
|
|
9512
9457
|
StyledButton3,
|
|
9513
9458
|
{
|
|
9514
9459
|
...props,
|
|
@@ -9518,10 +9463,10 @@ var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, com
|
|
|
9518
9463
|
fullWidth: true,
|
|
9519
9464
|
unstyled: true,
|
|
9520
9465
|
children: [
|
|
9521
|
-
props.leftIcon ? /* @__PURE__ */ (0,
|
|
9522
|
-
/* @__PURE__ */ (0,
|
|
9523
|
-
(0,
|
|
9524
|
-
props.rightIcon ? /* @__PURE__ */ (0,
|
|
9466
|
+
props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
9467
|
+
/* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLabelAndDescriptionContainer, { children }),
|
|
9468
|
+
(0, import_type_guards30.isNotNil)(badge) || (0, import_type_guards30.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
|
|
9469
|
+
props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
9525
9470
|
]
|
|
9526
9471
|
}
|
|
9527
9472
|
);
|
|
@@ -9529,33 +9474,33 @@ var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, com
|
|
|
9529
9474
|
MenuItemButton.displayName = "MenuItemButton";
|
|
9530
9475
|
|
|
9531
9476
|
// src/components/Menu/MenuItemLabelDescription.tsx
|
|
9532
|
-
var
|
|
9533
|
-
var
|
|
9534
|
-
var StyledMenuItemLabel =
|
|
9535
|
-
var StyledMenuItemDescription = (0,
|
|
9477
|
+
var import_styled_components53 = __toESM(require("styled-components"));
|
|
9478
|
+
var import_jsx_runtime226 = require("react/jsx-runtime");
|
|
9479
|
+
var StyledMenuItemLabel = import_styled_components53.default.span``;
|
|
9480
|
+
var StyledMenuItemDescription = (0, import_styled_components53.default)(Text).attrs({
|
|
9536
9481
|
variant: "body4",
|
|
9537
9482
|
prominence: "secondary"
|
|
9538
9483
|
})``;
|
|
9539
9484
|
var MenuItemLabel = ({ children }) => {
|
|
9540
|
-
return /* @__PURE__ */ (0,
|
|
9485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledMenuItemLabel, { children });
|
|
9541
9486
|
};
|
|
9542
9487
|
var MenuItemDescription = ({ children }) => {
|
|
9543
|
-
return /* @__PURE__ */ (0,
|
|
9488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledMenuItemDescription, { children });
|
|
9544
9489
|
};
|
|
9545
9490
|
|
|
9546
9491
|
// src/components/Menu/SubMenu.tsx
|
|
9547
|
-
var
|
|
9548
|
-
var SubMenuContent = (0,
|
|
9492
|
+
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
9493
|
+
var SubMenuContent = (0, import_styled_components54.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
|
|
9549
9494
|
${menuContentCss}
|
|
9550
9495
|
|
|
9551
9496
|
${mq.smAndDown} {
|
|
9552
9497
|
transform: translateX(-100%) !important;
|
|
9553
9498
|
}
|
|
9554
9499
|
`;
|
|
9555
|
-
var StyledMobileSubMenuItems =
|
|
9500
|
+
var StyledMobileSubMenuItems = import_styled_components54.default.div`
|
|
9556
9501
|
margin-left: var(--wui-space-04);
|
|
9557
9502
|
`;
|
|
9558
|
-
var StyledSubTrigger = (0,
|
|
9503
|
+
var StyledSubTrigger = (0, import_styled_components54.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
|
|
9559
9504
|
outline: none;
|
|
9560
9505
|
|
|
9561
9506
|
&[data-state='open'],
|
|
@@ -9566,11 +9511,11 @@ var StyledSubTrigger = (0, import_styled_components55.default)(import_react_drop
|
|
|
9566
9511
|
var SubMenuTrigger = (props) => {
|
|
9567
9512
|
const { isSmAndUp } = useMq();
|
|
9568
9513
|
const Trigger4 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
|
|
9569
|
-
return /* @__PURE__ */ (0,
|
|
9514
|
+
return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
|
|
9570
9515
|
MenuItemButton,
|
|
9571
9516
|
{
|
|
9572
9517
|
...props,
|
|
9573
|
-
rightIcon: /* @__PURE__ */ (0,
|
|
9518
|
+
rightIcon: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Icon, { type: "caret-right" })
|
|
9574
9519
|
}
|
|
9575
9520
|
) });
|
|
9576
9521
|
};
|
|
@@ -9584,14 +9529,14 @@ var SubMenu = ({
|
|
|
9584
9529
|
const { isSmAndUp } = useMq();
|
|
9585
9530
|
const [isExpanded, setIsExpanded] = (0, import_react36.useState)(false);
|
|
9586
9531
|
const { compact } = useMenuContext();
|
|
9587
|
-
return isSmAndUp ? /* @__PURE__ */ (0,
|
|
9588
|
-
/* @__PURE__ */ (0,
|
|
9589
|
-
/* @__PURE__ */ (0,
|
|
9590
|
-
(0,
|
|
9532
|
+
return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
|
|
9533
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(SubMenuTrigger, { ...props, children: [
|
|
9534
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemLabel, { children: label }),
|
|
9535
|
+
(0, import_type_guards31.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemDescription, { children: description }) : null
|
|
9591
9536
|
] }),
|
|
9592
|
-
/* @__PURE__ */ (0,
|
|
9593
|
-
] }) : /* @__PURE__ */ (0,
|
|
9594
|
-
/* @__PURE__ */ (0,
|
|
9537
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(SubMenuContent, { $compact: compact, children }) })
|
|
9538
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
|
|
9539
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
|
|
9595
9540
|
SubMenuTrigger,
|
|
9596
9541
|
{
|
|
9597
9542
|
...props,
|
|
@@ -9600,12 +9545,12 @@ var SubMenu = ({
|
|
|
9600
9545
|
setIsExpanded((prev) => !prev);
|
|
9601
9546
|
},
|
|
9602
9547
|
children: [
|
|
9603
|
-
/* @__PURE__ */ (0,
|
|
9604
|
-
/* @__PURE__ */ (0,
|
|
9548
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemLabel, { children: label }),
|
|
9549
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemDescription, { children: description })
|
|
9605
9550
|
]
|
|
9606
9551
|
}
|
|
9607
9552
|
),
|
|
9608
|
-
/* @__PURE__ */ (0,
|
|
9553
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
|
|
9609
9554
|
] });
|
|
9610
9555
|
};
|
|
9611
9556
|
SubMenu.displayName = "SubMenu";
|
|
@@ -9613,15 +9558,15 @@ SubMenu.displayName = "SubMenu";
|
|
|
9613
9558
|
// src/components/Menu/MenuItem.tsx
|
|
9614
9559
|
var import_react37 = require("react");
|
|
9615
9560
|
var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
|
|
9616
|
-
var
|
|
9561
|
+
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
9617
9562
|
var MenuItem = (0, import_react37.forwardRef)(
|
|
9618
9563
|
({ onSelect = () => null, ...props }, ref) => {
|
|
9619
|
-
return /* @__PURE__ */ (0,
|
|
9564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
|
|
9620
9565
|
import_react_dropdown_menu4.DropdownMenuItem,
|
|
9621
9566
|
{
|
|
9622
9567
|
asChild: true,
|
|
9623
9568
|
onSelect,
|
|
9624
|
-
children: /* @__PURE__ */ (0,
|
|
9569
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
|
|
9625
9570
|
MenuItemButton,
|
|
9626
9571
|
{
|
|
9627
9572
|
...props,
|
|
@@ -9637,10 +9582,10 @@ MenuItem.displayName = "MenuItem";
|
|
|
9637
9582
|
|
|
9638
9583
|
// src/components/Menu/MenuRadioGroup.tsx
|
|
9639
9584
|
var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
|
|
9640
|
-
var
|
|
9585
|
+
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
9641
9586
|
var MenuRadioGroup = ({ children, label, ...props }) => {
|
|
9642
|
-
return /* @__PURE__ */ (0,
|
|
9643
|
-
/* @__PURE__ */ (0,
|
|
9587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
|
|
9588
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MenuLabel, { children: label }),
|
|
9644
9589
|
children
|
|
9645
9590
|
] });
|
|
9646
9591
|
};
|
|
@@ -9648,11 +9593,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
|
|
|
9648
9593
|
|
|
9649
9594
|
// src/components/Menu/RadioMenuItem.tsx
|
|
9650
9595
|
var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
|
|
9651
|
-
var
|
|
9596
|
+
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
9652
9597
|
var RadioMenuItem = ({
|
|
9653
9598
|
onSelect,
|
|
9654
9599
|
value,
|
|
9655
|
-
indicator = /* @__PURE__ */ (0,
|
|
9600
|
+
indicator = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
|
|
9656
9601
|
Icon,
|
|
9657
9602
|
{
|
|
9658
9603
|
size: "sm",
|
|
@@ -9662,17 +9607,17 @@ var RadioMenuItem = ({
|
|
|
9662
9607
|
...props
|
|
9663
9608
|
}) => {
|
|
9664
9609
|
const extraProps = onSelect ? { onSelect } : {};
|
|
9665
|
-
return /* @__PURE__ */ (0,
|
|
9610
|
+
return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
|
|
9666
9611
|
import_react_dropdown_menu6.DropdownMenuRadioItem,
|
|
9667
9612
|
{
|
|
9668
9613
|
...extraProps,
|
|
9669
9614
|
asChild: true,
|
|
9670
9615
|
value,
|
|
9671
|
-
children: /* @__PURE__ */ (0,
|
|
9616
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
|
|
9672
9617
|
MenuItemButton,
|
|
9673
9618
|
{
|
|
9674
9619
|
...props,
|
|
9675
|
-
rightIcon: /* @__PURE__ */ (0,
|
|
9620
|
+
rightIcon: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
|
|
9676
9621
|
}
|
|
9677
9622
|
)
|
|
9678
9623
|
}
|
|
@@ -9682,9 +9627,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
|
|
|
9682
9627
|
|
|
9683
9628
|
// src/components/Menu/CheckboxMenuItem.tsx
|
|
9684
9629
|
var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
|
|
9685
|
-
var
|
|
9630
|
+
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
9686
9631
|
var CheckboxIndicator2 = ({ checked, ...props }) => {
|
|
9687
|
-
return checked ? /* @__PURE__ */ (0,
|
|
9632
|
+
return checked ? /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
|
|
9688
9633
|
"svg",
|
|
9689
9634
|
{
|
|
9690
9635
|
...props,
|
|
@@ -9694,14 +9639,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
|
|
|
9694
9639
|
width: "24",
|
|
9695
9640
|
xmlns: "http://www.w3.org/2000/svg",
|
|
9696
9641
|
children: [
|
|
9697
|
-
/* @__PURE__ */ (0,
|
|
9642
|
+
/* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
9698
9643
|
"path",
|
|
9699
9644
|
{
|
|
9700
9645
|
d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
|
|
9701
9646
|
fill: "#2949e5"
|
|
9702
9647
|
}
|
|
9703
9648
|
),
|
|
9704
|
-
/* @__PURE__ */ (0,
|
|
9649
|
+
/* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
9705
9650
|
"path",
|
|
9706
9651
|
{
|
|
9707
9652
|
d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
|
|
@@ -9710,7 +9655,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
|
|
|
9710
9655
|
)
|
|
9711
9656
|
]
|
|
9712
9657
|
}
|
|
9713
|
-
) : /* @__PURE__ */ (0,
|
|
9658
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
|
|
9714
9659
|
"svg",
|
|
9715
9660
|
{
|
|
9716
9661
|
...props,
|
|
@@ -9720,14 +9665,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
|
|
|
9720
9665
|
width: "24",
|
|
9721
9666
|
xmlns: "http://www.w3.org/2000/svg",
|
|
9722
9667
|
children: [
|
|
9723
|
-
/* @__PURE__ */ (0,
|
|
9668
|
+
/* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
9724
9669
|
"path",
|
|
9725
9670
|
{
|
|
9726
9671
|
d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
|
|
9727
9672
|
fill: "#fcfcfd"
|
|
9728
9673
|
}
|
|
9729
9674
|
),
|
|
9730
|
-
/* @__PURE__ */ (0,
|
|
9675
|
+
/* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
9731
9676
|
"path",
|
|
9732
9677
|
{
|
|
9733
9678
|
d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
|
|
@@ -9744,18 +9689,18 @@ var CheckboxMenuItem = ({
|
|
|
9744
9689
|
onCheckedChange,
|
|
9745
9690
|
...props
|
|
9746
9691
|
}) => {
|
|
9747
|
-
return /* @__PURE__ */ (0,
|
|
9692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
9748
9693
|
import_react_dropdown_menu7.DropdownMenuCheckboxItem,
|
|
9749
9694
|
{
|
|
9750
9695
|
asChild: true,
|
|
9751
9696
|
checked,
|
|
9752
9697
|
onCheckedChange,
|
|
9753
9698
|
onSelect,
|
|
9754
|
-
children: /* @__PURE__ */ (0,
|
|
9699
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
9755
9700
|
MenuItemButton,
|
|
9756
9701
|
{
|
|
9757
9702
|
...props,
|
|
9758
|
-
leftIcon: /* @__PURE__ */ (0,
|
|
9703
|
+
leftIcon: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(CheckboxIndicator2, { checked })
|
|
9759
9704
|
}
|
|
9760
9705
|
)
|
|
9761
9706
|
}
|
|
@@ -9765,36 +9710,36 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
|
|
|
9765
9710
|
|
|
9766
9711
|
// src/components/Modal/Modal.tsx
|
|
9767
9712
|
var import_react41 = require("react");
|
|
9768
|
-
var
|
|
9713
|
+
var import_styled_components59 = __toESM(require("styled-components"));
|
|
9769
9714
|
var import_react_dialog4 = require("@radix-ui/react-dialog");
|
|
9770
|
-
var
|
|
9715
|
+
var import_type_guards33 = require("@wistia/type-guards");
|
|
9771
9716
|
|
|
9772
9717
|
// src/components/Modal/ModalHeader.tsx
|
|
9773
|
-
var
|
|
9718
|
+
var import_styled_components56 = __toESM(require("styled-components"));
|
|
9774
9719
|
var import_react_dialog2 = require("@radix-ui/react-dialog");
|
|
9775
9720
|
|
|
9776
9721
|
// src/components/Modal/ModalCloseButton.tsx
|
|
9777
|
-
var
|
|
9722
|
+
var import_styled_components55 = __toESM(require("styled-components"));
|
|
9778
9723
|
var import_react_dialog = require("@radix-ui/react-dialog");
|
|
9779
|
-
var
|
|
9780
|
-
var CloseButton = (0,
|
|
9724
|
+
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
9725
|
+
var CloseButton = (0, import_styled_components55.default)(import_react_dialog.Close)`
|
|
9781
9726
|
align-self: start;
|
|
9782
9727
|
`;
|
|
9783
9728
|
var ModalCloseButton = () => {
|
|
9784
|
-
return /* @__PURE__ */ (0,
|
|
9729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
|
|
9785
9730
|
IconButton,
|
|
9786
9731
|
{
|
|
9787
9732
|
label: "Dismiss modal",
|
|
9788
9733
|
size: "sm",
|
|
9789
9734
|
variant: "ghost",
|
|
9790
|
-
children: /* @__PURE__ */ (0,
|
|
9735
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Icon, { type: "close" })
|
|
9791
9736
|
}
|
|
9792
9737
|
) });
|
|
9793
9738
|
};
|
|
9794
9739
|
|
|
9795
9740
|
// src/components/Modal/ModalHeader.tsx
|
|
9796
|
-
var
|
|
9797
|
-
var Header =
|
|
9741
|
+
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
9742
|
+
var Header = import_styled_components56.default.header`
|
|
9798
9743
|
display: flex;
|
|
9799
9744
|
order: 1;
|
|
9800
9745
|
gap: var(--wui-space-01);
|
|
@@ -9806,7 +9751,7 @@ var Header = import_styled_components57.default.header`
|
|
|
9806
9751
|
margin-top: 0;
|
|
9807
9752
|
}
|
|
9808
9753
|
`;
|
|
9809
|
-
var Title = (0,
|
|
9754
|
+
var Title = (0, import_styled_components56.default)(import_react_dialog2.Title)`
|
|
9810
9755
|
font-family: var(--wui-typography-heading-2-family);
|
|
9811
9756
|
line-height: var(--wui-typography-heading-2-line-height);
|
|
9812
9757
|
font-size: var(--wui-typography-heading-2-size);
|
|
@@ -9818,20 +9763,20 @@ var ModalHeader = ({
|
|
|
9818
9763
|
hideCloseButton
|
|
9819
9764
|
}) => {
|
|
9820
9765
|
const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
|
|
9821
|
-
return /* @__PURE__ */ (0,
|
|
9822
|
-
/* @__PURE__ */ (0,
|
|
9823
|
-
hideCloseButton ? null : /* @__PURE__ */ (0,
|
|
9766
|
+
return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(Header, { children: [
|
|
9767
|
+
/* @__PURE__ */ (0, import_jsx_runtime233.jsx)(TitleWrapper, { children: title }),
|
|
9768
|
+
hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(ModalCloseButton, {})
|
|
9824
9769
|
] });
|
|
9825
9770
|
};
|
|
9826
9771
|
|
|
9827
9772
|
// src/components/Modal/ModalContent.tsx
|
|
9828
9773
|
var import_react39 = require("react");
|
|
9829
|
-
var
|
|
9774
|
+
var import_styled_components57 = __toESM(require("styled-components"));
|
|
9830
9775
|
var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
9831
9776
|
|
|
9832
9777
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
9833
9778
|
var import_react38 = require("react");
|
|
9834
|
-
var
|
|
9779
|
+
var import_type_guards32 = require("@wistia/type-guards");
|
|
9835
9780
|
var useFocusRestore = () => {
|
|
9836
9781
|
const previouslyFocusedRef = (0, import_react38.useRef)(null);
|
|
9837
9782
|
(0, import_react38.useEffect)(() => {
|
|
@@ -9839,7 +9784,7 @@ var useFocusRestore = () => {
|
|
|
9839
9784
|
}, []);
|
|
9840
9785
|
(0, import_react38.useEffect)(() => {
|
|
9841
9786
|
return () => {
|
|
9842
|
-
if ((0,
|
|
9787
|
+
if ((0, import_type_guards32.isNotNil)(previouslyFocusedRef.current)) {
|
|
9843
9788
|
setTimeout(() => {
|
|
9844
9789
|
previouslyFocusedRef.current?.focus();
|
|
9845
9790
|
}, 0);
|
|
@@ -9849,8 +9794,8 @@ var useFocusRestore = () => {
|
|
|
9849
9794
|
};
|
|
9850
9795
|
|
|
9851
9796
|
// src/components/Modal/ModalContent.tsx
|
|
9852
|
-
var
|
|
9853
|
-
var StyledModalContent = (0,
|
|
9797
|
+
var import_jsx_runtime234 = require("react/jsx-runtime");
|
|
9798
|
+
var StyledModalContent = (0, import_styled_components57.default)(import_react_dialog3.Content)`
|
|
9854
9799
|
background-color: var(--wui-color-bg-app);
|
|
9855
9800
|
box-sizing: border-box;
|
|
9856
9801
|
display: flex;
|
|
@@ -9894,7 +9839,7 @@ var StyledModalContent = (0, import_styled_components58.default)(import_react_di
|
|
|
9894
9839
|
var ModalContent = (0, import_react39.forwardRef)(
|
|
9895
9840
|
({ fullHeight, width, children, ...otherProps }, ref) => {
|
|
9896
9841
|
useFocusRestore();
|
|
9897
|
-
return /* @__PURE__ */ (0,
|
|
9842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
|
|
9898
9843
|
StyledModalContent,
|
|
9899
9844
|
{
|
|
9900
9845
|
ref,
|
|
@@ -9910,8 +9855,8 @@ var ModalContent = (0, import_react39.forwardRef)(
|
|
|
9910
9855
|
|
|
9911
9856
|
// src/private/components/Backdrop/Backdrop.tsx
|
|
9912
9857
|
var import_react40 = require("react");
|
|
9913
|
-
var
|
|
9914
|
-
var
|
|
9858
|
+
var import_styled_components58 = __toESM(require("styled-components"));
|
|
9859
|
+
var import_jsx_runtime235 = require("react/jsx-runtime");
|
|
9915
9860
|
var backdropAnimationDuration = 150;
|
|
9916
9861
|
var alignVerticalMap = {
|
|
9917
9862
|
stretch: "normal",
|
|
@@ -9924,7 +9869,7 @@ var alignHorizontalMap = {
|
|
|
9924
9869
|
center: "center",
|
|
9925
9870
|
right: "end"
|
|
9926
9871
|
};
|
|
9927
|
-
var BackdropComponent =
|
|
9872
|
+
var BackdropComponent = import_styled_components58.default.div`
|
|
9928
9873
|
align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
|
|
9929
9874
|
animation-name: backdropShow;
|
|
9930
9875
|
animation-duration: ${() => `${backdropAnimationDuration}ms`};
|
|
@@ -9948,7 +9893,7 @@ var BackdropComponent = import_styled_components59.default.div`
|
|
|
9948
9893
|
}
|
|
9949
9894
|
`;
|
|
9950
9895
|
var Backdrop = (0, import_react40.forwardRef)(
|
|
9951
|
-
({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0,
|
|
9896
|
+
({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
|
|
9952
9897
|
BackdropComponent,
|
|
9953
9898
|
{
|
|
9954
9899
|
ref,
|
|
@@ -9962,9 +9907,9 @@ var Backdrop = (0, import_react40.forwardRef)(
|
|
|
9962
9907
|
Backdrop.displayName = "Backdrop";
|
|
9963
9908
|
|
|
9964
9909
|
// src/components/Modal/Modal.tsx
|
|
9965
|
-
var
|
|
9910
|
+
var import_jsx_runtime236 = require("react/jsx-runtime");
|
|
9966
9911
|
var DEFAULT_MODAL_WIDTH = "532px";
|
|
9967
|
-
var ModalBody =
|
|
9912
|
+
var ModalBody = import_styled_components59.default.div`
|
|
9968
9913
|
flex-direction: column;
|
|
9969
9914
|
display: flex;
|
|
9970
9915
|
order: 2;
|
|
@@ -9982,24 +9927,24 @@ var Modal = (0, import_react41.forwardRef)(
|
|
|
9982
9927
|
width = DEFAULT_MODAL_WIDTH,
|
|
9983
9928
|
...props
|
|
9984
9929
|
}, ref) => {
|
|
9985
|
-
return /* @__PURE__ */ (0,
|
|
9930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
|
|
9986
9931
|
import_react_dialog4.Root,
|
|
9987
9932
|
{
|
|
9988
9933
|
onOpenChange: (open2) => {
|
|
9989
|
-
if (!open2 && (0,
|
|
9934
|
+
if (!open2 && (0, import_type_guards33.isNotNil)(onRequestClose)) {
|
|
9990
9935
|
onRequestClose();
|
|
9991
9936
|
}
|
|
9992
9937
|
},
|
|
9993
9938
|
open: isOpen,
|
|
9994
|
-
children: /* @__PURE__ */ (0,
|
|
9995
|
-
/* @__PURE__ */ (0,
|
|
9996
|
-
/* @__PURE__ */ (0,
|
|
9939
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(import_react_dialog4.Portal, { children: [
|
|
9940
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Backdrop, {}),
|
|
9941
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
|
|
9997
9942
|
ModalContent,
|
|
9998
9943
|
{
|
|
9999
9944
|
ref,
|
|
10000
9945
|
fullHeight,
|
|
10001
9946
|
onOpenAutoFocus: (event) => {
|
|
10002
|
-
if ((0,
|
|
9947
|
+
if ((0, import_type_guards33.isNotNil)(initialFocusRef) && initialFocusRef.current) {
|
|
10003
9948
|
event.preventDefault();
|
|
10004
9949
|
requestAnimationFrame(() => {
|
|
10005
9950
|
initialFocusRef.current?.focus();
|
|
@@ -10009,8 +9954,8 @@ var Modal = (0, import_react41.forwardRef)(
|
|
|
10009
9954
|
width,
|
|
10010
9955
|
...props,
|
|
10011
9956
|
children: [
|
|
10012
|
-
/* @__PURE__ */ (0,
|
|
10013
|
-
/* @__PURE__ */ (0,
|
|
9957
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)(ModalBody, { children }),
|
|
9958
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
|
|
10014
9959
|
ModalHeader,
|
|
10015
9960
|
{
|
|
10016
9961
|
hideCloseButton,
|
|
@@ -10030,17 +9975,17 @@ Modal.displayName = "Modal";
|
|
|
10030
9975
|
|
|
10031
9976
|
// src/components/Popover/Popover.tsx
|
|
10032
9977
|
var import_react_popover = require("@radix-ui/react-popover");
|
|
10033
|
-
var
|
|
9978
|
+
var import_styled_components60 = __toESM(require("styled-components"));
|
|
10034
9979
|
|
|
10035
9980
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
10036
|
-
var
|
|
9981
|
+
var import_type_guards34 = require("@wistia/type-guards");
|
|
10037
9982
|
var getControlProps = (isOpen, onOpenChange) => {
|
|
10038
|
-
return (0,
|
|
9983
|
+
return (0, import_type_guards34.isNotNil)(onOpenChange) && (0, import_type_guards34.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
|
|
10039
9984
|
};
|
|
10040
9985
|
|
|
10041
9986
|
// src/components/Popover/Popover.tsx
|
|
10042
|
-
var
|
|
10043
|
-
var StyledContent2 = (0,
|
|
9987
|
+
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
9988
|
+
var StyledContent2 = (0, import_styled_components60.default)(import_react_popover.Content)`
|
|
10044
9989
|
border-radius: var(--wui-border-radius-02);
|
|
10045
9990
|
padding: var(--wui-space-04);
|
|
10046
9991
|
max-width: 320px;
|
|
@@ -10054,7 +9999,7 @@ var StyledContent2 = (0, import_styled_components61.default)(import_react_popove
|
|
|
10054
9999
|
right: var(--wui-space-02);
|
|
10055
10000
|
}
|
|
10056
10001
|
`;
|
|
10057
|
-
var StyledArrow = (0,
|
|
10002
|
+
var StyledArrow = (0, import_styled_components60.default)(import_react_popover.Arrow)`
|
|
10058
10003
|
fill: white;
|
|
10059
10004
|
display: none;
|
|
10060
10005
|
`;
|
|
@@ -10066,25 +10011,25 @@ var Popover = ({
|
|
|
10066
10011
|
onOpenChange,
|
|
10067
10012
|
...props
|
|
10068
10013
|
}) => {
|
|
10069
|
-
return /* @__PURE__ */ (0,
|
|
10070
|
-
/* @__PURE__ */ (0,
|
|
10071
|
-
/* @__PURE__ */ (0,
|
|
10014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
|
|
10015
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
|
|
10016
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
|
|
10072
10017
|
StyledContent2,
|
|
10073
10018
|
{
|
|
10074
10019
|
sideOffset: 5,
|
|
10075
10020
|
...props,
|
|
10076
10021
|
children: [
|
|
10077
|
-
/* @__PURE__ */ (0,
|
|
10078
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
10022
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsx)(StyledArrow, {}),
|
|
10023
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
|
|
10079
10024
|
IconButton,
|
|
10080
10025
|
{
|
|
10081
10026
|
"data-wui-popover-close": true,
|
|
10082
10027
|
label: "Close",
|
|
10083
10028
|
variant: "ghost",
|
|
10084
|
-
children: /* @__PURE__ */ (0,
|
|
10029
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Icon, { type: "close" })
|
|
10085
10030
|
}
|
|
10086
10031
|
) }),
|
|
10087
|
-
/* @__PURE__ */ (0,
|
|
10032
|
+
/* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { children })
|
|
10088
10033
|
]
|
|
10089
10034
|
}
|
|
10090
10035
|
) })
|
|
@@ -10094,15 +10039,15 @@ Popover.displayName = "Popover";
|
|
|
10094
10039
|
|
|
10095
10040
|
// src/components/Radio/Radio.tsx
|
|
10096
10041
|
var import_react42 = require("react");
|
|
10097
|
-
var
|
|
10098
|
-
var
|
|
10099
|
-
var
|
|
10100
|
-
var StyledLabelWrapper2 =
|
|
10042
|
+
var import_styled_components61 = __toESM(require("styled-components"));
|
|
10043
|
+
var import_type_guards35 = require("@wistia/type-guards");
|
|
10044
|
+
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
10045
|
+
var StyledLabelWrapper2 = import_styled_components61.default.div`
|
|
10101
10046
|
display: flex;
|
|
10102
10047
|
flex-direction: column;
|
|
10103
10048
|
padding-left: var(--wui-space-02);
|
|
10104
10049
|
`;
|
|
10105
|
-
var StyledRadio =
|
|
10050
|
+
var StyledRadio = import_styled_components61.default.input`
|
|
10106
10051
|
box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
|
|
10107
10052
|
appearance: none;
|
|
10108
10053
|
margin: 0;
|
|
@@ -10128,11 +10073,11 @@ var StyledRadio = import_styled_components62.default.input`
|
|
|
10128
10073
|
transform: scale(1);
|
|
10129
10074
|
}
|
|
10130
10075
|
`;
|
|
10131
|
-
var disabledStyle2 =
|
|
10076
|
+
var disabledStyle2 = import_styled_components61.css`
|
|
10132
10077
|
cursor: not-allowed;
|
|
10133
10078
|
opacity: 0.5;
|
|
10134
10079
|
`;
|
|
10135
|
-
var errorStyle =
|
|
10080
|
+
var errorStyle = import_styled_components61.css`
|
|
10136
10081
|
/* TODO Lamp to design error state */
|
|
10137
10082
|
&:hover,
|
|
10138
10083
|
&:focus,
|
|
@@ -10140,11 +10085,11 @@ var errorStyle = import_styled_components62.css`
|
|
|
10140
10085
|
border-color: transparent !important;
|
|
10141
10086
|
}
|
|
10142
10087
|
`;
|
|
10143
|
-
var defaultHoverStyle =
|
|
10088
|
+
var defaultHoverStyle = import_styled_components61.css`
|
|
10144
10089
|
/* TODO Lamp to design hover state */
|
|
10145
10090
|
cursor: pointer;
|
|
10146
10091
|
`;
|
|
10147
|
-
var StyledRadioWrapper =
|
|
10092
|
+
var StyledRadioWrapper = import_styled_components61.default.div`
|
|
10148
10093
|
align-items: baseline;
|
|
10149
10094
|
border: 1px solid transparent;
|
|
10150
10095
|
border-radius: 4px;
|
|
@@ -10181,14 +10126,14 @@ var Radio = (0, import_react42.forwardRef)(
|
|
|
10181
10126
|
...otherProps
|
|
10182
10127
|
}, ref) => {
|
|
10183
10128
|
const generatedId = (0, import_react42.useId)();
|
|
10184
|
-
const computedId = (0,
|
|
10185
|
-
return /* @__PURE__ */ (0,
|
|
10129
|
+
const computedId = (0, import_type_guards35.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
|
|
10130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
|
|
10186
10131
|
StyledRadioWrapper,
|
|
10187
10132
|
{
|
|
10188
10133
|
"aria-invalid": otherProps["aria-invalid"],
|
|
10189
10134
|
disabled,
|
|
10190
10135
|
children: [
|
|
10191
|
-
/* @__PURE__ */ (0,
|
|
10136
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10192
10137
|
StyledRadio,
|
|
10193
10138
|
{
|
|
10194
10139
|
ref,
|
|
@@ -10203,8 +10148,8 @@ var Radio = (0, import_react42.forwardRef)(
|
|
|
10203
10148
|
...otherProps
|
|
10204
10149
|
}
|
|
10205
10150
|
),
|
|
10206
|
-
/* @__PURE__ */ (0,
|
|
10207
|
-
/* @__PURE__ */ (0,
|
|
10151
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(StyledLabelWrapper2, { children: [
|
|
10152
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
10208
10153
|
Label,
|
|
10209
10154
|
{
|
|
10210
10155
|
disabled,
|
|
@@ -10213,7 +10158,7 @@ var Radio = (0, import_react42.forwardRef)(
|
|
|
10213
10158
|
children: label
|
|
10214
10159
|
}
|
|
10215
10160
|
),
|
|
10216
|
-
/* @__PURE__ */ (0,
|
|
10161
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(LabelDescription, { children: description })
|
|
10217
10162
|
] })
|
|
10218
10163
|
]
|
|
10219
10164
|
}
|
|
@@ -10224,13 +10169,13 @@ Radio.displayName = "Radio";
|
|
|
10224
10169
|
|
|
10225
10170
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
10226
10171
|
var import_react46 = require("react");
|
|
10227
|
-
var
|
|
10172
|
+
var import_styled_components63 = __toESM(require("styled-components"));
|
|
10228
10173
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
10229
|
-
var
|
|
10174
|
+
var import_type_guards36 = require("@wistia/type-guards");
|
|
10230
10175
|
|
|
10231
10176
|
// src/components/SegmentedControl/useSelectedItemMeasurements.tsx
|
|
10232
10177
|
var import_react43 = require("react");
|
|
10233
|
-
var
|
|
10178
|
+
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
10234
10179
|
var SelectedItemMeasurementsContext = (0, import_react43.createContext)(
|
|
10235
10180
|
null
|
|
10236
10181
|
);
|
|
@@ -10245,7 +10190,7 @@ var SelectedItemMeasurementsProvider = ({
|
|
|
10245
10190
|
}),
|
|
10246
10191
|
[selectedItemMeasurements]
|
|
10247
10192
|
);
|
|
10248
|
-
return /* @__PURE__ */ (0,
|
|
10193
|
+
return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
|
|
10249
10194
|
};
|
|
10250
10195
|
var useSelectedItemMeasurements = () => {
|
|
10251
10196
|
const context = (0, import_react43.useContext)(SelectedItemMeasurementsContext);
|
|
@@ -10259,7 +10204,7 @@ var useSelectedItemMeasurements = () => {
|
|
|
10259
10204
|
|
|
10260
10205
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
10261
10206
|
var import_react45 = require("react");
|
|
10262
|
-
var
|
|
10207
|
+
var import_styled_components62 = __toESM(require("styled-components"));
|
|
10263
10208
|
|
|
10264
10209
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
10265
10210
|
var import_react44 = require("react");
|
|
@@ -10274,8 +10219,8 @@ var useSegmentedControlValue = () => {
|
|
|
10274
10219
|
};
|
|
10275
10220
|
|
|
10276
10221
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
10277
|
-
var
|
|
10278
|
-
var SelectedItemIndicatorDiv =
|
|
10222
|
+
var import_jsx_runtime240 = require("react/jsx-runtime");
|
|
10223
|
+
var SelectedItemIndicatorDiv = import_styled_components62.default.div`
|
|
10279
10224
|
background-color: var(--wui-color-bg-fill-white);
|
|
10280
10225
|
border-radius: var(--wui-border-radius-rounded);
|
|
10281
10226
|
left: 0;
|
|
@@ -10301,7 +10246,7 @@ var SelectedItemIndicator = () => {
|
|
|
10301
10246
|
if (!selectedValue) {
|
|
10302
10247
|
return null;
|
|
10303
10248
|
}
|
|
10304
|
-
return /* @__PURE__ */ (0,
|
|
10249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
|
|
10305
10250
|
SelectedItemIndicatorDiv,
|
|
10306
10251
|
{
|
|
10307
10252
|
style: {
|
|
@@ -10314,8 +10259,8 @@ var SelectedItemIndicator = () => {
|
|
|
10314
10259
|
};
|
|
10315
10260
|
|
|
10316
10261
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
10317
|
-
var
|
|
10318
|
-
var segmentedControlStyles =
|
|
10262
|
+
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
10263
|
+
var segmentedControlStyles = import_styled_components63.css`
|
|
10319
10264
|
display: inline-flex;
|
|
10320
10265
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
10321
10266
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10325,7 +10270,7 @@ var segmentedControlStyles = import_styled_components64.css`
|
|
|
10325
10270
|
position: relative;
|
|
10326
10271
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
10327
10272
|
`;
|
|
10328
|
-
var StyledSegmentedControl = (0,
|
|
10273
|
+
var StyledSegmentedControl = (0, import_styled_components63.default)(import_react_toggle_group.Root)`
|
|
10329
10274
|
${segmentedControlStyles}
|
|
10330
10275
|
`;
|
|
10331
10276
|
var SegmentedControl = (0, import_react46.forwardRef)(
|
|
@@ -10337,10 +10282,10 @@ var SegmentedControl = (0, import_react46.forwardRef)(
|
|
|
10337
10282
|
onSelectedValueChange,
|
|
10338
10283
|
...props
|
|
10339
10284
|
}, ref) => {
|
|
10340
|
-
if ((0,
|
|
10285
|
+
if ((0, import_type_guards36.isNil)(children)) {
|
|
10341
10286
|
return null;
|
|
10342
10287
|
}
|
|
10343
|
-
return /* @__PURE__ */ (0,
|
|
10288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
|
|
10344
10289
|
StyledSegmentedControl,
|
|
10345
10290
|
{
|
|
10346
10291
|
ref,
|
|
@@ -10352,8 +10297,8 @@ var SegmentedControl = (0, import_react46.forwardRef)(
|
|
|
10352
10297
|
type: "single",
|
|
10353
10298
|
value: selectedValue,
|
|
10354
10299
|
...props,
|
|
10355
|
-
children: /* @__PURE__ */ (0,
|
|
10356
|
-
/* @__PURE__ */ (0,
|
|
10300
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(SelectedItemMeasurementsProvider, { children: [
|
|
10301
|
+
/* @__PURE__ */ (0, import_jsx_runtime241.jsx)(SelectedItemIndicator, {}),
|
|
10357
10302
|
children
|
|
10358
10303
|
] }) })
|
|
10359
10304
|
}
|
|
@@ -10364,27 +10309,27 @@ SegmentedControl.displayName = "SegmentedControl";
|
|
|
10364
10309
|
|
|
10365
10310
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
10366
10311
|
var import_react47 = require("react");
|
|
10367
|
-
var
|
|
10312
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
10368
10313
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
10369
|
-
var
|
|
10314
|
+
var import_type_guards38 = require("@wistia/type-guards");
|
|
10370
10315
|
|
|
10371
10316
|
// src/private/helpers/mergeRefs/mergeRefs.ts
|
|
10372
|
-
var
|
|
10317
|
+
var import_type_guards37 = require("@wistia/type-guards");
|
|
10373
10318
|
var mergeRefs = (refs) => (value) => {
|
|
10374
10319
|
refs.forEach((ref) => {
|
|
10375
|
-
if ((0,
|
|
10320
|
+
if ((0, import_type_guards37.isFunction)(ref)) {
|
|
10376
10321
|
ref(value);
|
|
10377
10322
|
return;
|
|
10378
10323
|
}
|
|
10379
|
-
if ((0,
|
|
10324
|
+
if ((0, import_type_guards37.isNotNil)(ref)) {
|
|
10380
10325
|
ref.current = value;
|
|
10381
10326
|
}
|
|
10382
10327
|
});
|
|
10383
10328
|
};
|
|
10384
10329
|
|
|
10385
10330
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
10386
|
-
var
|
|
10387
|
-
var segmentedControlItemStyles =
|
|
10331
|
+
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
10332
|
+
var segmentedControlItemStyles = import_styled_components64.css`
|
|
10388
10333
|
all: unset; /* ToggleGroupItem is a button element */
|
|
10389
10334
|
align-items: center;
|
|
10390
10335
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10443,7 +10388,7 @@ var segmentedControlItemStyles = import_styled_components65.css`
|
|
|
10443
10388
|
}
|
|
10444
10389
|
}
|
|
10445
10390
|
`;
|
|
10446
|
-
var StyledSegmentedControlItem = (0,
|
|
10391
|
+
var StyledSegmentedControlItem = (0, import_styled_components64.default)(import_react_toggle_group2.Item)`
|
|
10447
10392
|
${segmentedControlItemStyles}
|
|
10448
10393
|
`;
|
|
10449
10394
|
var SegmentedControlItem = (0, import_react47.forwardRef)(
|
|
@@ -10484,12 +10429,12 @@ var SegmentedControlItem = (0, import_react47.forwardRef)(
|
|
|
10484
10429
|
resizeObserver.disconnect();
|
|
10485
10430
|
};
|
|
10486
10431
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
10487
|
-
return /* @__PURE__ */ (0,
|
|
10432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
|
|
10488
10433
|
StyledSegmentedControlItem,
|
|
10489
10434
|
{
|
|
10490
10435
|
ref: combinedRef,
|
|
10491
|
-
$hasLabel: (0,
|
|
10492
|
-
"aria-label": (0,
|
|
10436
|
+
$hasLabel: (0, import_type_guards38.isNotNil)(label),
|
|
10437
|
+
"aria-label": (0, import_type_guards38.isNotNil)(label) ? void 0 : ariaLabel,
|
|
10493
10438
|
disabled,
|
|
10494
10439
|
onClick: handleClick,
|
|
10495
10440
|
value,
|
|
@@ -10503,400 +10448,92 @@ var SegmentedControlItem = (0, import_react47.forwardRef)(
|
|
|
10503
10448
|
);
|
|
10504
10449
|
SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
10505
10450
|
|
|
10506
|
-
// src/components/
|
|
10507
|
-
var
|
|
10508
|
-
var
|
|
10451
|
+
// src/components/Tabs/Tabs.tsx
|
|
10452
|
+
var import_react52 = require("react");
|
|
10453
|
+
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
10454
|
+
var import_type_guards40 = require("@wistia/type-guards");
|
|
10455
|
+
|
|
10456
|
+
// src/components/Tabs/TabPanel.tsx
|
|
10457
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
10458
|
+
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
10459
|
+
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
10460
|
+
var StyledTabPanel = (0, import_styled_components65.default)(import_react_tabs.Content)`
|
|
10461
|
+
display: flex;
|
|
10462
|
+
flex-direction: column;
|
|
10463
|
+
`;
|
|
10464
|
+
var TabPanel = ({ children, value, ...props }) => {
|
|
10465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
10466
|
+
StyledTabPanel,
|
|
10467
|
+
{
|
|
10468
|
+
value,
|
|
10469
|
+
...props,
|
|
10470
|
+
children
|
|
10471
|
+
}
|
|
10472
|
+
);
|
|
10473
|
+
};
|
|
10474
|
+
TabPanel.displayName = "TabPanel";
|
|
10475
|
+
|
|
10476
|
+
// src/components/Tabs/TabList.tsx
|
|
10509
10477
|
var import_styled_components66 = __toESM(require("styled-components"));
|
|
10478
|
+
var import_react_tabs2 = require("@radix-ui/react-tabs");
|
|
10510
10479
|
var import_jsx_runtime244 = require("react/jsx-runtime");
|
|
10511
|
-
var
|
|
10512
|
-
${
|
|
10513
|
-
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
10514
|
-
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
10515
|
-
--wui-select-color-border: var(--wui-color-border);
|
|
10516
|
-
--wui-select-color-border-focus: var(--wui-color-border-active);
|
|
10517
|
-
--wui-select-color-border-error: var(--wui-color-border-error);
|
|
10518
|
-
--wui-select-color-border-disabled: var(--wui-color-border-disabled);
|
|
10519
|
-
--wui-select-border-radius: var(--wui-border-radius-rounded);
|
|
10520
|
-
--wui-select-multiline-border-radius: var(--wui-border-radius-02);
|
|
10521
|
-
--wui-select-vertical-padding: var(--wui-space-02);
|
|
10522
|
-
--wui-select-horizontal-padding: var(--wui-space-03);
|
|
10523
|
-
--wui-select-placeholder: var(--wui-gray-10);
|
|
10524
|
-
--wui-select-color-text-error: var(--wui-color-text-error);
|
|
10480
|
+
var StyledTabList = (0, import_styled_components66.default)(import_react_tabs2.List)`
|
|
10481
|
+
${segmentedControlStyles}
|
|
10525
10482
|
|
|
10526
|
-
|
|
10527
|
-
|
|
10528
|
-
|
|
10529
|
-
|
|
10530
|
-
|
|
10531
|
-
|
|
10532
|
-
|
|
10533
|
-
|
|
10534
|
-
|
|
10535
|
-
|
|
10536
|
-
|
|
10483
|
+
margin-bottom: var(--wui-space-04);
|
|
10484
|
+
`;
|
|
10485
|
+
var TabList = ({
|
|
10486
|
+
children,
|
|
10487
|
+
fullWidth,
|
|
10488
|
+
ariaLabel,
|
|
10489
|
+
...props
|
|
10490
|
+
}) => {
|
|
10491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
|
|
10492
|
+
StyledTabList,
|
|
10493
|
+
{
|
|
10494
|
+
$fullWidth: fullWidth,
|
|
10495
|
+
"aria-label": ariaLabel,
|
|
10496
|
+
...props,
|
|
10497
|
+
children
|
|
10498
|
+
}
|
|
10499
|
+
);
|
|
10500
|
+
};
|
|
10501
|
+
TabList.displayName = "TabList";
|
|
10537
10502
|
|
|
10538
|
-
|
|
10539
|
-
|
|
10540
|
-
|
|
10541
|
-
|
|
10542
|
-
|
|
10503
|
+
// src/components/Tabs/TabItem.tsx
|
|
10504
|
+
var import_react49 = require("react");
|
|
10505
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
10506
|
+
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
10507
|
+
var import_type_guards39 = require("@wistia/type-guards");
|
|
10543
10508
|
|
|
10544
|
-
|
|
10545
|
-
|
|
10546
|
-
|
|
10509
|
+
// src/components/Tabs/useTabsValue.tsx
|
|
10510
|
+
var import_react48 = require("react");
|
|
10511
|
+
var TabsValueContext = (0, import_react48.createContext)(null);
|
|
10512
|
+
var TabsValueProvider = TabsValueContext.Provider;
|
|
10513
|
+
var useTabsValue = () => {
|
|
10514
|
+
const context = (0, import_react48.useContext)(TabsValueContext);
|
|
10515
|
+
if (context === null) {
|
|
10516
|
+
throw new Error("useTabsValue must be used within a TabsValueProvider");
|
|
10547
10517
|
}
|
|
10518
|
+
return context;
|
|
10519
|
+
};
|
|
10548
10520
|
|
|
10549
|
-
|
|
10550
|
-
|
|
10551
|
-
|
|
10552
|
-
}
|
|
10521
|
+
// src/components/Tabs/TabItem.tsx
|
|
10522
|
+
var import_jsx_runtime245 = require("react/jsx-runtime");
|
|
10523
|
+
var StyledTabItem = (0, import_styled_components67.default)(import_react_tabs3.Trigger)`
|
|
10524
|
+
${segmentedControlItemStyles}
|
|
10553
10525
|
|
|
10554
|
-
&:
|
|
10555
|
-
|
|
10556
|
-
background-color: var(--wui-color-bg-surface-disabled);
|
|
10526
|
+
&:focus-visible {
|
|
10527
|
+
outline: none;
|
|
10557
10528
|
}
|
|
10558
10529
|
`;
|
|
10559
|
-
var
|
|
10560
|
-
--wui-select-content-border: var(--wui-color-border);
|
|
10561
|
-
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
10562
|
-
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
10563
|
-
--wui-select-option-padding: var(--wui-space-02);
|
|
10564
|
-
--wui-select-option-inner-gap: var(--wui-space-03);
|
|
10565
|
-
--wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
|
|
10566
|
-
|
|
10567
|
-
overflow: hidden;
|
|
10568
|
-
transform: translateY(8px);
|
|
10569
|
-
background-color: var(--wui-select-content-bg);
|
|
10570
|
-
border: 1px solid var(--wui-select-content-border);
|
|
10571
|
-
border-radius: var(--wui-select-content-border-radius);
|
|
10572
|
-
padding: var(--wui-select-option-padding);
|
|
10573
|
-
min-width: var(--radix-select-trigger-width);
|
|
10574
|
-
max-height: var(--radix-select-content-available-height);
|
|
10575
|
-
z-index: var(--wui-zindex-select);
|
|
10576
|
-
`;
|
|
10577
|
-
var Select = (0, import_react48.forwardRef)(
|
|
10578
|
-
({
|
|
10579
|
-
colorScheme = "inherit",
|
|
10580
|
-
children,
|
|
10581
|
-
onChange = () => null,
|
|
10582
|
-
placeholder = "Select...",
|
|
10583
|
-
fullWidth = false,
|
|
10584
|
-
...props
|
|
10585
|
-
}, forwardedRef) => {
|
|
10586
|
-
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
10587
|
-
return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
|
|
10588
|
-
import_react_select.Root,
|
|
10589
|
-
{
|
|
10590
|
-
...props,
|
|
10591
|
-
onValueChange: onChange,
|
|
10592
|
-
children: [
|
|
10593
|
-
/* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
|
|
10594
|
-
StyledTrigger,
|
|
10595
|
-
{
|
|
10596
|
-
ref: forwardedRef,
|
|
10597
|
-
$colorScheme: colorScheme,
|
|
10598
|
-
$fullWidth: responsiveFullWidth,
|
|
10599
|
-
...props,
|
|
10600
|
-
children: [
|
|
10601
|
-
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.Value, { placeholder }),
|
|
10602
|
-
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
|
|
10603
|
-
Icon,
|
|
10604
|
-
{
|
|
10605
|
-
size: "md",
|
|
10606
|
-
type: "caret-down"
|
|
10607
|
-
}
|
|
10608
|
-
)
|
|
10609
|
-
]
|
|
10610
|
-
}
|
|
10611
|
-
),
|
|
10612
|
-
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(StyledContent3, { position: "popper", children: [
|
|
10613
|
-
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Icon, { type: "caret-up" }) }),
|
|
10614
|
-
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.Viewport, { children }),
|
|
10615
|
-
/* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Icon, { type: "caret-down" }) })
|
|
10616
|
-
] }) })
|
|
10617
|
-
]
|
|
10618
|
-
}
|
|
10619
|
-
);
|
|
10620
|
-
}
|
|
10621
|
-
);
|
|
10622
|
-
Select.displayName = "Select";
|
|
10623
|
-
|
|
10624
|
-
// src/components/Select/SelectOption.tsx
|
|
10625
|
-
var import_react_select2 = require("@radix-ui/react-select");
|
|
10626
|
-
var import_react49 = require("react");
|
|
10627
|
-
var import_styled_components67 = __toESM(require("styled-components"));
|
|
10628
|
-
var import_jsx_runtime245 = require("react/jsx-runtime");
|
|
10629
|
-
var StyledItem = (0, import_styled_components67.default)(import_react_select2.Item)`
|
|
10630
|
-
${variantStyleMap2.body3};
|
|
10631
|
-
display: flex;
|
|
10632
|
-
padding: var(--wui-select-option-padding);
|
|
10633
|
-
gap: var(--wui-select-option-inner-gap);
|
|
10634
|
-
font-size: var(--font-size);
|
|
10635
|
-
font-weight: var(--font-weight);
|
|
10636
|
-
border-radius: var(--wui-border-radius-01);
|
|
10637
|
-
|
|
10638
|
-
&:hover,
|
|
10639
|
-
&:focus-visible {
|
|
10640
|
-
background-color: var(--wui-select-option-bg-hover);
|
|
10641
|
-
outline: none;
|
|
10642
|
-
}
|
|
10643
|
-
|
|
10644
|
-
&[aria-disabled='true'] {
|
|
10645
|
-
color: var(--wui-color-text-disabled);
|
|
10646
|
-
}
|
|
10647
|
-
|
|
10648
|
-
&[aria-disabled='true']:hover {
|
|
10649
|
-
background-color: transparent;
|
|
10650
|
-
}
|
|
10651
|
-
`;
|
|
10652
|
-
var StyledIconContainer = import_styled_components67.default.span`
|
|
10653
|
-
width: 12px;
|
|
10654
|
-
`;
|
|
10655
|
-
var SelectOption = (0, import_react49.forwardRef)(
|
|
10656
|
-
({ children, ...props }, forwardedRef) => {
|
|
10657
|
-
return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
|
|
10658
|
-
StyledItem,
|
|
10659
|
-
{
|
|
10660
|
-
...props,
|
|
10661
|
-
ref: forwardedRef,
|
|
10662
|
-
children: [
|
|
10663
|
-
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
|
|
10664
|
-
Icon,
|
|
10665
|
-
{
|
|
10666
|
-
size: "sm",
|
|
10667
|
-
type: "checkmark"
|
|
10668
|
-
}
|
|
10669
|
-
) }) }),
|
|
10670
|
-
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select2.ItemText, { children })
|
|
10671
|
-
]
|
|
10672
|
-
}
|
|
10673
|
-
);
|
|
10674
|
-
}
|
|
10675
|
-
);
|
|
10676
|
-
SelectOption.displayName = "Option";
|
|
10677
|
-
|
|
10678
|
-
// src/components/Select/SelectOptionGroup.tsx
|
|
10679
|
-
var import_react_select3 = require("@radix-ui/react-select");
|
|
10680
|
-
var import_styled_components68 = __toESM(require("styled-components"));
|
|
10681
|
-
var import_jsx_runtime246 = require("react/jsx-runtime");
|
|
10682
|
-
var StyledLabel4 = (0, import_styled_components68.default)(import_react_select3.Label)`
|
|
10683
|
-
padding: var(--wui-select-option-padding);
|
|
10684
|
-
`;
|
|
10685
|
-
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
10686
|
-
return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
10687
|
-
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
10688
|
-
Text,
|
|
10689
|
-
{
|
|
10690
|
-
prominence: "secondary",
|
|
10691
|
-
variant: "body3",
|
|
10692
|
-
children: label
|
|
10693
|
-
}
|
|
10694
|
-
) }),
|
|
10695
|
-
children
|
|
10696
|
-
] });
|
|
10697
|
-
};
|
|
10698
|
-
|
|
10699
|
-
// src/components/Table/Table.tsx
|
|
10700
|
-
var import_react51 = require("react");
|
|
10701
|
-
var import_styled_components69 = __toESM(require("styled-components"));
|
|
10702
|
-
|
|
10703
|
-
// src/components/Table/TableContext.tsx
|
|
10704
|
-
var import_react50 = __toESM(require("react"));
|
|
10705
|
-
var TableContext = import_react50.default.createContext({ divided: false });
|
|
10706
|
-
|
|
10707
|
-
// src/components/Table/Table.tsx
|
|
10708
|
-
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
10709
|
-
var StyledTable = import_styled_components69.default.table`
|
|
10710
|
-
width: 100%;
|
|
10711
|
-
border-collapse: collapse;
|
|
10712
|
-
|
|
10713
|
-
${({ $striped }) => $striped && import_styled_components69.css`
|
|
10714
|
-
tbody tr:nth-child(even) {
|
|
10715
|
-
background-color: var(--wui-color-bg-surface-secondary);
|
|
10716
|
-
}
|
|
10717
|
-
`}
|
|
10718
|
-
`;
|
|
10719
|
-
var Table = ({
|
|
10720
|
-
children,
|
|
10721
|
-
striped = false,
|
|
10722
|
-
divided = false,
|
|
10723
|
-
...props
|
|
10724
|
-
}) => {
|
|
10725
|
-
const contextValue = (0, import_react51.useMemo)(() => ({ divided }), [divided]);
|
|
10726
|
-
return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
10727
|
-
StyledTable,
|
|
10728
|
-
{
|
|
10729
|
-
$striped: striped,
|
|
10730
|
-
...props,
|
|
10731
|
-
children
|
|
10732
|
-
}
|
|
10733
|
-
) });
|
|
10734
|
-
};
|
|
10735
|
-
|
|
10736
|
-
// src/components/Table/TableBody.tsx
|
|
10737
|
-
var import_styled_components70 = __toESM(require("styled-components"));
|
|
10738
|
-
|
|
10739
|
-
// src/components/Table/TableSectionContext.ts
|
|
10740
|
-
var import_react52 = require("react");
|
|
10741
|
-
var TableSectionContext = (0, import_react52.createContext)(null);
|
|
10742
|
-
|
|
10743
|
-
// src/components/Table/TableBody.tsx
|
|
10744
|
-
var import_jsx_runtime248 = require("react/jsx-runtime");
|
|
10745
|
-
var StyledTbody = import_styled_components70.default.tbody``;
|
|
10746
|
-
var TableBody = ({ children, ...props }) => {
|
|
10747
|
-
return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(StyledTbody, { ...props, children }) });
|
|
10748
|
-
};
|
|
10749
|
-
|
|
10750
|
-
// src/components/Table/TableCell.tsx
|
|
10751
|
-
var import_react53 = require("react");
|
|
10752
|
-
var import_styled_components71 = __toESM(require("styled-components"));
|
|
10753
|
-
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
10754
|
-
var sharedStyles = import_styled_components71.css`
|
|
10755
|
-
color: var(--wui-color-text);
|
|
10756
|
-
padding: var(--wui-space-02);
|
|
10757
|
-
text-align: left;
|
|
10758
|
-
`;
|
|
10759
|
-
var StyledTh = import_styled_components71.default.th`
|
|
10760
|
-
${sharedStyles}
|
|
10761
|
-
font-size: var(--wui-typography-body-4-size);
|
|
10762
|
-
font-weight: var(--wui-typography-weight-label-bold);
|
|
10763
|
-
line-height: var(--wui-typography-body-4-line-height);
|
|
10764
|
-
`;
|
|
10765
|
-
var StyledTd = import_styled_components71.default.td`
|
|
10766
|
-
${sharedStyles}
|
|
10767
|
-
font-size: var(--wui-typography-body-2-size);
|
|
10768
|
-
font-weight: var(--wui-typography-body-2-weight);
|
|
10769
|
-
line-height: var(--wui-typography-body-2-line-height);
|
|
10770
|
-
`;
|
|
10771
|
-
var TableCell = ({ children, ...props }) => {
|
|
10772
|
-
const section = (0, import_react53.useContext)(TableSectionContext);
|
|
10773
|
-
if (section === "head") {
|
|
10774
|
-
return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(StyledTh, { ...props, children });
|
|
10775
|
-
}
|
|
10776
|
-
return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(StyledTd, { ...props, children });
|
|
10777
|
-
};
|
|
10778
|
-
|
|
10779
|
-
// src/components/Table/TableFooter.tsx
|
|
10780
|
-
var import_styled_components72 = __toESM(require("styled-components"));
|
|
10781
|
-
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
10782
|
-
var StyledTfoot = import_styled_components72.default.tfoot``;
|
|
10783
|
-
var TableFooter = ({ children, ...props }) => {
|
|
10784
|
-
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTfoot, { ...props, children }) });
|
|
10785
|
-
};
|
|
10786
|
-
|
|
10787
|
-
// src/components/Table/TableHead.tsx
|
|
10788
|
-
var import_styled_components73 = __toESM(require("styled-components"));
|
|
10789
|
-
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
10790
|
-
var StyledThead = import_styled_components73.default.thead``;
|
|
10791
|
-
var TableHead = ({ children, ...props }) => {
|
|
10792
|
-
return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledThead, { ...props, children }) });
|
|
10793
|
-
};
|
|
10794
|
-
|
|
10795
|
-
// src/components/Table/TableRow.tsx
|
|
10796
|
-
var import_react54 = require("react");
|
|
10797
|
-
var import_styled_components74 = __toESM(require("styled-components"));
|
|
10798
|
-
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
10799
|
-
var StyledTr = import_styled_components74.default.tr`
|
|
10800
|
-
${({ $divided }) => $divided && `border-bottom: 1px solid var(--wui-color-border);`}
|
|
10801
|
-
`;
|
|
10802
|
-
var TableRow = ({ children, ...props }) => {
|
|
10803
|
-
const { divided = false } = (0, import_react54.useContext)(TableContext);
|
|
10804
|
-
return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
|
|
10805
|
-
StyledTr,
|
|
10806
|
-
{
|
|
10807
|
-
$divided: divided,
|
|
10808
|
-
...props,
|
|
10809
|
-
children
|
|
10810
|
-
}
|
|
10811
|
-
);
|
|
10812
|
-
};
|
|
10813
|
-
|
|
10814
|
-
// src/components/Tabs/Tabs.tsx
|
|
10815
|
-
var import_react59 = require("react");
|
|
10816
|
-
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
10817
|
-
var import_type_guards41 = require("@wistia/type-guards");
|
|
10818
|
-
|
|
10819
|
-
// src/components/Tabs/TabPanel.tsx
|
|
10820
|
-
var import_styled_components75 = __toESM(require("styled-components"));
|
|
10821
|
-
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
10822
|
-
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
10823
|
-
var StyledTabPanel = (0, import_styled_components75.default)(import_react_tabs.Content)`
|
|
10824
|
-
display: flex;
|
|
10825
|
-
flex-direction: column;
|
|
10826
|
-
`;
|
|
10827
|
-
var TabPanel = ({ children, value, ...props }) => {
|
|
10828
|
-
return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
|
|
10829
|
-
StyledTabPanel,
|
|
10830
|
-
{
|
|
10831
|
-
value,
|
|
10832
|
-
...props,
|
|
10833
|
-
children
|
|
10834
|
-
}
|
|
10835
|
-
);
|
|
10836
|
-
};
|
|
10837
|
-
TabPanel.displayName = "TabPanel";
|
|
10838
|
-
|
|
10839
|
-
// src/components/Tabs/TabList.tsx
|
|
10840
|
-
var import_styled_components76 = __toESM(require("styled-components"));
|
|
10841
|
-
var import_react_tabs2 = require("@radix-ui/react-tabs");
|
|
10842
|
-
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
10843
|
-
var StyledTabList = (0, import_styled_components76.default)(import_react_tabs2.List)`
|
|
10844
|
-
${segmentedControlStyles}
|
|
10845
|
-
|
|
10846
|
-
margin-bottom: var(--wui-space-04);
|
|
10847
|
-
`;
|
|
10848
|
-
var TabList = ({
|
|
10849
|
-
children,
|
|
10850
|
-
fullWidth,
|
|
10851
|
-
ariaLabel,
|
|
10852
|
-
...props
|
|
10853
|
-
}) => {
|
|
10854
|
-
return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
|
|
10855
|
-
StyledTabList,
|
|
10856
|
-
{
|
|
10857
|
-
$fullWidth: fullWidth,
|
|
10858
|
-
"aria-label": ariaLabel,
|
|
10859
|
-
...props,
|
|
10860
|
-
children
|
|
10861
|
-
}
|
|
10862
|
-
);
|
|
10863
|
-
};
|
|
10864
|
-
TabList.displayName = "TabList";
|
|
10865
|
-
|
|
10866
|
-
// src/components/Tabs/TabItem.tsx
|
|
10867
|
-
var import_react56 = require("react");
|
|
10868
|
-
var import_styled_components77 = __toESM(require("styled-components"));
|
|
10869
|
-
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
10870
|
-
var import_type_guards40 = require("@wistia/type-guards");
|
|
10871
|
-
|
|
10872
|
-
// src/components/Tabs/useTabsValue.tsx
|
|
10873
|
-
var import_react55 = require("react");
|
|
10874
|
-
var TabsValueContext = (0, import_react55.createContext)(null);
|
|
10875
|
-
var TabsValueProvider = TabsValueContext.Provider;
|
|
10876
|
-
var useTabsValue = () => {
|
|
10877
|
-
const context = (0, import_react55.useContext)(TabsValueContext);
|
|
10878
|
-
if (context === null) {
|
|
10879
|
-
throw new Error("useTabsValue must be used within a TabsValueProvider");
|
|
10880
|
-
}
|
|
10881
|
-
return context;
|
|
10882
|
-
};
|
|
10883
|
-
|
|
10884
|
-
// src/components/Tabs/TabItem.tsx
|
|
10885
|
-
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
10886
|
-
var StyledTabItem = (0, import_styled_components77.default)(import_react_tabs3.Trigger)`
|
|
10887
|
-
${segmentedControlItemStyles}
|
|
10888
|
-
|
|
10889
|
-
&:focus-visible {
|
|
10890
|
-
outline: none;
|
|
10891
|
-
}
|
|
10892
|
-
`;
|
|
10893
|
-
var TabItem = (0, import_react56.forwardRef)(
|
|
10530
|
+
var TabItem = (0, import_react49.forwardRef)(
|
|
10894
10531
|
({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
|
|
10895
10532
|
const selectedValue = useTabsValue();
|
|
10896
10533
|
const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
|
|
10897
|
-
const buttonRef = (0,
|
|
10534
|
+
const buttonRef = (0, import_react49.useRef)(null);
|
|
10898
10535
|
const combinedRef = mergeRefs([buttonRef, forwardedRef]);
|
|
10899
|
-
(0,
|
|
10536
|
+
(0, import_react49.useEffect)(() => {
|
|
10900
10537
|
const buttonElem = buttonRef.current;
|
|
10901
10538
|
if (!buttonElem) {
|
|
10902
10539
|
return void 0;
|
|
@@ -10921,12 +10558,12 @@ var TabItem = (0, import_react56.forwardRef)(
|
|
|
10921
10558
|
resizeObserver.disconnect();
|
|
10922
10559
|
};
|
|
10923
10560
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
10924
|
-
return /* @__PURE__ */ (0,
|
|
10561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
|
|
10925
10562
|
StyledTabItem,
|
|
10926
10563
|
{
|
|
10927
10564
|
ref: combinedRef,
|
|
10928
|
-
$hasLabel: (0,
|
|
10929
|
-
"aria-label": (0,
|
|
10565
|
+
$hasLabel: (0, import_type_guards39.isNotNil)(label),
|
|
10566
|
+
"aria-label": (0, import_type_guards39.isNotNil)(label) ? void 0 : ariaLabel,
|
|
10930
10567
|
disabled,
|
|
10931
10568
|
value,
|
|
10932
10569
|
children: [
|
|
@@ -10940,16 +10577,16 @@ var TabItem = (0, import_react56.forwardRef)(
|
|
|
10940
10577
|
TabItem.displayName = "TabItem";
|
|
10941
10578
|
|
|
10942
10579
|
// src/components/Tabs/extractTabItems.ts
|
|
10943
|
-
var
|
|
10580
|
+
var import_react50 = require("react");
|
|
10944
10581
|
var extractTabItems = (children) => {
|
|
10945
10582
|
const tabItems = [];
|
|
10946
|
-
|
|
10947
|
-
if (!(0,
|
|
10583
|
+
import_react50.Children.forEach(children, (child) => {
|
|
10584
|
+
if (!(0, import_react50.isValidElement)(child)) {
|
|
10948
10585
|
return;
|
|
10949
10586
|
}
|
|
10950
10587
|
if (typeof child.type !== "string" && child.type.displayName === "Tab") {
|
|
10951
10588
|
tabItems.push(child);
|
|
10952
|
-
} else if (child.type ===
|
|
10589
|
+
} else if (child.type === import_react50.Fragment) {
|
|
10953
10590
|
const fragmentElement = child;
|
|
10954
10591
|
tabItems.push(...extractTabItems(fragmentElement.props.children));
|
|
10955
10592
|
} else if ((child.props.children ?? null) != null) {
|
|
@@ -10962,10 +10599,10 @@ var extractTabItems = (children) => {
|
|
|
10962
10599
|
};
|
|
10963
10600
|
|
|
10964
10601
|
// src/components/Tabs/SelectedItemIndicator.tsx
|
|
10965
|
-
var
|
|
10966
|
-
var
|
|
10967
|
-
var
|
|
10968
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
10602
|
+
var import_react51 = require("react");
|
|
10603
|
+
var import_styled_components68 = __toESM(require("styled-components"));
|
|
10604
|
+
var import_jsx_runtime246 = require("react/jsx-runtime");
|
|
10605
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components68.default)(SelectedItemIndicatorDiv)`
|
|
10969
10606
|
&:has(~ ${StyledTabItem}:focus-visible) {
|
|
10970
10607
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
10971
10608
|
}
|
|
@@ -10973,7 +10610,7 @@ var TabsSelectedItemIndicatorDiv = (0, import_styled_components78.default)(Selec
|
|
|
10973
10610
|
var SelectedItemIndicator2 = () => {
|
|
10974
10611
|
const { selectedItemMeasurements } = useSelectedItemMeasurements();
|
|
10975
10612
|
const selectedValue = useTabsValue();
|
|
10976
|
-
const selectedItemIndicatorStyle = (0,
|
|
10613
|
+
const selectedItemIndicatorStyle = (0, import_react51.useMemo)(
|
|
10977
10614
|
() => selectedItemMeasurements != null ? {
|
|
10978
10615
|
height: `${selectedItemMeasurements.offsetHeight}px`,
|
|
10979
10616
|
transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
|
|
@@ -10984,7 +10621,7 @@ var SelectedItemIndicator2 = () => {
|
|
|
10984
10621
|
if (selectedValue == null) {
|
|
10985
10622
|
return null;
|
|
10986
10623
|
}
|
|
10987
|
-
return /* @__PURE__ */ (0,
|
|
10624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
10988
10625
|
TabsSelectedItemIndicatorDiv,
|
|
10989
10626
|
{
|
|
10990
10627
|
style: {
|
|
@@ -10997,8 +10634,8 @@ var SelectedItemIndicator2 = () => {
|
|
|
10997
10634
|
};
|
|
10998
10635
|
|
|
10999
10636
|
// src/components/Tabs/Tabs.tsx
|
|
11000
|
-
var
|
|
11001
|
-
var Tabs = (0,
|
|
10637
|
+
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
10638
|
+
var Tabs = (0, import_react52.forwardRef)(
|
|
11002
10639
|
({
|
|
11003
10640
|
children,
|
|
11004
10641
|
fullWidth = true,
|
|
@@ -11009,30 +10646,30 @@ var Tabs = (0, import_react59.forwardRef)(
|
|
|
11009
10646
|
...otherProps
|
|
11010
10647
|
}, ref) => {
|
|
11011
10648
|
const tabItems = extractTabItems(children);
|
|
11012
|
-
const [internalSelectedValue, setInternalSelectedValue] = (0,
|
|
10649
|
+
const [internalSelectedValue, setInternalSelectedValue] = (0, import_react52.useState)(defaultSelectedValue);
|
|
11013
10650
|
const modeProps = defaultSelectedValue !== void 0 ? {
|
|
11014
10651
|
defaultValue: defaultSelectedValue,
|
|
11015
10652
|
onValueChange: setInternalSelectedValue
|
|
11016
10653
|
} : { value: selectedValue, onValueChange: onSelectedValueChange };
|
|
11017
|
-
return /* @__PURE__ */ (0,
|
|
10654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11018
10655
|
import_react_tabs4.Root,
|
|
11019
10656
|
{
|
|
11020
10657
|
ref,
|
|
11021
10658
|
activationMode: "automatic",
|
|
11022
10659
|
...otherProps,
|
|
11023
10660
|
...modeProps,
|
|
11024
|
-
children: /* @__PURE__ */ (0,
|
|
10661
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11025
10662
|
TabsValueProvider,
|
|
11026
10663
|
{
|
|
11027
10664
|
value: defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue,
|
|
11028
|
-
children: /* @__PURE__ */ (0,
|
|
11029
|
-
/* @__PURE__ */ (0,
|
|
10665
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(SelectedItemMeasurementsProvider, { children: [
|
|
10666
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
|
|
11030
10667
|
TabList,
|
|
11031
10668
|
{
|
|
11032
10669
|
ariaLabel,
|
|
11033
10670
|
fullWidth,
|
|
11034
10671
|
children: [
|
|
11035
|
-
/* @__PURE__ */ (0,
|
|
10672
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)(SelectedItemIndicator2, {}),
|
|
11036
10673
|
tabItems.map((tab) => {
|
|
11037
10674
|
const {
|
|
11038
10675
|
value,
|
|
@@ -11041,8 +10678,8 @@ var Tabs = (0, import_react59.forwardRef)(
|
|
|
11041
10678
|
label,
|
|
11042
10679
|
"aria-label": ariaLabelForTab
|
|
11043
10680
|
} = tab.props;
|
|
11044
|
-
if ((0,
|
|
11045
|
-
return /* @__PURE__ */ (0,
|
|
10681
|
+
if ((0, import_type_guards40.isNil)(icon)) {
|
|
10682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11046
10683
|
TabItem,
|
|
11047
10684
|
{
|
|
11048
10685
|
disabled,
|
|
@@ -11052,8 +10689,8 @@ var Tabs = (0, import_react59.forwardRef)(
|
|
|
11052
10689
|
value
|
|
11053
10690
|
);
|
|
11054
10691
|
}
|
|
11055
|
-
if ((0,
|
|
11056
|
-
return /* @__PURE__ */ (0,
|
|
10692
|
+
if ((0, import_type_guards40.isNotNil)(label)) {
|
|
10693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11057
10694
|
TabItem,
|
|
11058
10695
|
{
|
|
11059
10696
|
disabled,
|
|
@@ -11064,8 +10701,8 @@ var Tabs = (0, import_react59.forwardRef)(
|
|
|
11064
10701
|
value
|
|
11065
10702
|
);
|
|
11066
10703
|
}
|
|
11067
|
-
if ((0,
|
|
11068
|
-
return /* @__PURE__ */ (0,
|
|
10704
|
+
if ((0, import_type_guards40.isNotNil)(ariaLabelForTab)) {
|
|
10705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11069
10706
|
TabItem,
|
|
11070
10707
|
{
|
|
11071
10708
|
"aria-label": ariaLabelForTab,
|
|
@@ -11081,7 +10718,7 @@ var Tabs = (0, import_react59.forwardRef)(
|
|
|
11081
10718
|
]
|
|
11082
10719
|
}
|
|
11083
10720
|
),
|
|
11084
|
-
tabItems.map((tab) => /* @__PURE__ */ (0,
|
|
10721
|
+
tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11085
10722
|
TabPanel,
|
|
11086
10723
|
{
|
|
11087
10724
|
value: tab.props.value,
|
|
@@ -11099,19 +10736,19 @@ var Tabs = (0, import_react59.forwardRef)(
|
|
|
11099
10736
|
Tabs.displayName = "Tabs";
|
|
11100
10737
|
|
|
11101
10738
|
// src/components/Tabs/Tab.tsx
|
|
11102
|
-
var
|
|
11103
|
-
var
|
|
11104
|
-
var Tab = (0,
|
|
11105
|
-
return /* @__PURE__ */ (0,
|
|
10739
|
+
var import_react53 = require("react");
|
|
10740
|
+
var import_jsx_runtime248 = require("react/jsx-runtime");
|
|
10741
|
+
var Tab = (0, import_react53.forwardRef)(({ children }, ref) => {
|
|
10742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)("div", { ref, children });
|
|
11106
10743
|
});
|
|
11107
10744
|
Tab.displayName = "Tab";
|
|
11108
10745
|
|
|
11109
10746
|
// src/components/Tag/Tag.tsx
|
|
11110
|
-
var
|
|
11111
|
-
var
|
|
11112
|
-
var
|
|
11113
|
-
var
|
|
11114
|
-
var TagLabel =
|
|
10747
|
+
var import_react54 = require("react");
|
|
10748
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
10749
|
+
var import_type_guards41 = require("@wistia/type-guards");
|
|
10750
|
+
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
10751
|
+
var TagLabel = import_styled_components69.default.a`
|
|
11115
10752
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11116
10753
|
font-size: var(--wui-typography-label-4-size);
|
|
11117
10754
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -11139,14 +10776,14 @@ var TagLabel = import_styled_components79.default.a`
|
|
|
11139
10776
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
11140
10777
|
}
|
|
11141
10778
|
`;
|
|
11142
|
-
var TagDivider =
|
|
10779
|
+
var TagDivider = import_styled_components69.default.div`
|
|
11143
10780
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11144
10781
|
border-left: 1px solid var(--wui-color-border);
|
|
11145
10782
|
display: flex;
|
|
11146
10783
|
height: 14px;
|
|
11147
10784
|
width: 1px;
|
|
11148
10785
|
`;
|
|
11149
|
-
var StyledRemoveButton =
|
|
10786
|
+
var StyledRemoveButton = import_styled_components69.default.button`
|
|
11150
10787
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11151
10788
|
all: unset;
|
|
11152
10789
|
cursor: pointer;
|
|
@@ -11174,7 +10811,7 @@ var StyledRemoveButton = import_styled_components79.default.button`
|
|
|
11174
10811
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
11175
10812
|
}
|
|
11176
10813
|
`;
|
|
11177
|
-
var StyledTag =
|
|
10814
|
+
var StyledTag = import_styled_components69.default.div`
|
|
11178
10815
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11179
10816
|
align-items: center;
|
|
11180
10817
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -11187,47 +10824,47 @@ var StyledTag = import_styled_components79.default.div`
|
|
|
11187
10824
|
}
|
|
11188
10825
|
`;
|
|
11189
10826
|
var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
11190
|
-
if ((0,
|
|
10827
|
+
if ((0, import_type_guards41.isNil)(onClickRemove)) {
|
|
11191
10828
|
return null;
|
|
11192
10829
|
}
|
|
11193
|
-
if ((0,
|
|
10830
|
+
if ((0, import_type_guards41.isNil)(onClickRemoveLabel)) {
|
|
11194
10831
|
throw new Error(
|
|
11195
10832
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
11196
10833
|
);
|
|
11197
10834
|
}
|
|
11198
|
-
return /* @__PURE__ */ (0,
|
|
11199
|
-
/* @__PURE__ */ (0,
|
|
11200
|
-
/* @__PURE__ */ (0,
|
|
10835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(import_jsx_runtime249.Fragment, { children: [
|
|
10836
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(TagDivider, { $colorScheme: colorScheme }),
|
|
10837
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
|
|
11201
10838
|
StyledRemoveButton,
|
|
11202
10839
|
{
|
|
11203
10840
|
$colorScheme: colorScheme,
|
|
11204
10841
|
onClick: onClickRemove,
|
|
11205
10842
|
type: "button",
|
|
11206
10843
|
children: [
|
|
11207
|
-
/* @__PURE__ */ (0,
|
|
10844
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11208
10845
|
Icon,
|
|
11209
10846
|
{
|
|
11210
10847
|
size: "sm",
|
|
11211
10848
|
type: "close"
|
|
11212
10849
|
}
|
|
11213
10850
|
),
|
|
11214
|
-
/* @__PURE__ */ (0,
|
|
10851
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
11215
10852
|
]
|
|
11216
10853
|
}
|
|
11217
10854
|
)
|
|
11218
10855
|
] });
|
|
11219
10856
|
};
|
|
11220
|
-
var Tag = (0,
|
|
10857
|
+
var Tag = (0, import_react54.forwardRef)(
|
|
11221
10858
|
({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
|
|
11222
|
-
const labelProps = (0,
|
|
11223
|
-
return /* @__PURE__ */ (0,
|
|
10859
|
+
const labelProps = (0, import_type_guards41.isNotNil)(href) && (0, import_type_guards41.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
|
|
10860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
|
|
11224
10861
|
StyledTag,
|
|
11225
10862
|
{
|
|
11226
10863
|
ref,
|
|
11227
10864
|
$colorScheme: colorScheme,
|
|
11228
10865
|
...otherProps,
|
|
11229
10866
|
children: [
|
|
11230
|
-
/* @__PURE__ */ (0,
|
|
10867
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11231
10868
|
TagLabel,
|
|
11232
10869
|
{
|
|
11233
10870
|
...labelProps,
|
|
@@ -11235,7 +10872,7 @@ var Tag = (0, import_react61.forwardRef)(
|
|
|
11235
10872
|
children: label
|
|
11236
10873
|
}
|
|
11237
10874
|
),
|
|
11238
|
-
/* @__PURE__ */ (0,
|
|
10875
|
+
/* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11239
10876
|
RemoveButton,
|
|
11240
10877
|
{
|
|
11241
10878
|
colorScheme,
|
|
@@ -11251,26 +10888,26 @@ var Tag = (0, import_react61.forwardRef)(
|
|
|
11251
10888
|
Tag.displayName = "Tag";
|
|
11252
10889
|
|
|
11253
10890
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
11254
|
-
var
|
|
11255
|
-
var
|
|
11256
|
-
var
|
|
10891
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
10892
|
+
var import_type_guards42 = require("@wistia/type-guards");
|
|
10893
|
+
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
11257
10894
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
11258
10895
|
if (iconOnly) {
|
|
11259
|
-
return /* @__PURE__ */ (0,
|
|
10896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
|
|
11260
10897
|
"g",
|
|
11261
10898
|
{
|
|
11262
10899
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
11263
10900
|
fill: brandmarkColor,
|
|
11264
|
-
children: /* @__PURE__ */ (0,
|
|
10901
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
11265
10902
|
}
|
|
11266
10903
|
);
|
|
11267
10904
|
}
|
|
11268
|
-
return /* @__PURE__ */ (0,
|
|
10905
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
|
|
11269
10906
|
"g",
|
|
11270
10907
|
{
|
|
11271
10908
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
11272
10909
|
fill: brandmarkColor,
|
|
11273
|
-
children: /* @__PURE__ */ (0,
|
|
10910
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
11274
10911
|
}
|
|
11275
10912
|
);
|
|
11276
10913
|
};
|
|
@@ -11278,12 +10915,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
11278
10915
|
if (iconOnly) {
|
|
11279
10916
|
return null;
|
|
11280
10917
|
}
|
|
11281
|
-
return /* @__PURE__ */ (0,
|
|
10918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
|
|
11282
10919
|
"g",
|
|
11283
10920
|
{
|
|
11284
10921
|
"data-testid": "ui-wistia-logo-logotype",
|
|
11285
10922
|
fill: logotypeColor,
|
|
11286
|
-
children: /* @__PURE__ */ (0,
|
|
10923
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
|
|
11287
10924
|
}
|
|
11288
10925
|
);
|
|
11289
10926
|
};
|
|
@@ -11293,7 +10930,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
11293
10930
|
}
|
|
11294
10931
|
return "0 0 144 31.47";
|
|
11295
10932
|
};
|
|
11296
|
-
var WistiaLogoComponent =
|
|
10933
|
+
var WistiaLogoComponent = import_styled_components70.default.svg`
|
|
11297
10934
|
height: ${({ height }) => `${height}px`};
|
|
11298
10935
|
|
|
11299
10936
|
/* ensure it will always fit on mobile */
|
|
@@ -11309,12 +10946,12 @@ var WistiaLogoComponent = import_styled_components80.default.svg`
|
|
|
11309
10946
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
11310
10947
|
if ($opticallyCentered) {
|
|
11311
10948
|
if ($iconOnly) {
|
|
11312
|
-
return
|
|
10949
|
+
return import_styled_components70.css`
|
|
11313
10950
|
aspect-ratio: 1;
|
|
11314
10951
|
padding: 11.85% 3.12% 13.91%;
|
|
11315
10952
|
`;
|
|
11316
10953
|
}
|
|
11317
|
-
return
|
|
10954
|
+
return import_styled_components70.css`
|
|
11318
10955
|
aspect-ratio: 127 / 32;
|
|
11319
10956
|
`;
|
|
11320
10957
|
}
|
|
@@ -11351,7 +10988,7 @@ var WistiaLogo = ({
|
|
|
11351
10988
|
};
|
|
11352
10989
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
11353
10990
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
11354
|
-
const Logo = /* @__PURE__ */ (0,
|
|
10991
|
+
const Logo = /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
|
|
11355
10992
|
WistiaLogoComponent,
|
|
11356
10993
|
{
|
|
11357
10994
|
$hoverColor: hoverColor,
|
|
@@ -11364,16 +11001,258 @@ var WistiaLogo = ({
|
|
|
11364
11001
|
xmlns: "http://www.w3.org/2000/svg",
|
|
11365
11002
|
...otherProps,
|
|
11366
11003
|
children: [
|
|
11367
|
-
/* @__PURE__ */ (0,
|
|
11368
|
-
(0,
|
|
11004
|
+
/* @__PURE__ */ (0, import_jsx_runtime250.jsx)("title", { children: title }),
|
|
11005
|
+
(0, import_type_guards42.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("desc", { children: description }) : null,
|
|
11369
11006
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
11370
11007
|
renderLogotype(logotypeColor, iconOnly)
|
|
11371
11008
|
]
|
|
11372
11009
|
}
|
|
11373
11010
|
);
|
|
11374
|
-
return href !== void 0 ? /* @__PURE__ */ (0,
|
|
11011
|
+
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("a", { href, children: Logo }) : Logo;
|
|
11375
11012
|
};
|
|
11376
11013
|
WistiaLogo.displayName = "WistiaLogo";
|
|
11014
|
+
|
|
11015
|
+
// src/components/Select/Select.tsx
|
|
11016
|
+
var import_react_select = require("@radix-ui/react-select");
|
|
11017
|
+
var import_react55 = require("react");
|
|
11018
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
11019
|
+
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
11020
|
+
var StyledTrigger = (0, import_styled_components71.default)(import_react_select.Trigger)`
|
|
11021
|
+
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11022
|
+
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
11023
|
+
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
11024
|
+
--wui-select-color-border: var(--wui-color-border);
|
|
11025
|
+
--wui-select-color-border-focus: var(--wui-color-border-active);
|
|
11026
|
+
--wui-select-color-border-error: var(--wui-color-border-error);
|
|
11027
|
+
--wui-select-color-border-disabled: var(--wui-color-border-disabled);
|
|
11028
|
+
--wui-select-border-radius: var(--wui-border-radius-rounded);
|
|
11029
|
+
--wui-select-multiline-border-radius: var(--wui-border-radius-02);
|
|
11030
|
+
--wui-select-vertical-padding: var(--wui-space-02);
|
|
11031
|
+
--wui-select-horizontal-padding: var(--wui-space-03);
|
|
11032
|
+
--wui-select-placeholder: var(--wui-gray-10);
|
|
11033
|
+
--wui-select-color-text-error: var(--wui-color-text-error);
|
|
11034
|
+
|
|
11035
|
+
padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
|
|
11036
|
+
background-color: var(--wui-select-color-bg);
|
|
11037
|
+
border: 1px solid var(--wui-select-color-border);
|
|
11038
|
+
border-radius: var(--wui-select-border-radius);
|
|
11039
|
+
min-width: 200px;
|
|
11040
|
+
text-align: left;
|
|
11041
|
+
display: inline-flex;
|
|
11042
|
+
align-items: center;
|
|
11043
|
+
justify-content: space-between;
|
|
11044
|
+
max-width: 100%;
|
|
11045
|
+
width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
|
|
11046
|
+
|
|
11047
|
+
> span {
|
|
11048
|
+
white-space: nowrap;
|
|
11049
|
+
text-overflow: ellipsis;
|
|
11050
|
+
overflow: hidden;
|
|
11051
|
+
}
|
|
11052
|
+
|
|
11053
|
+
&[aria-expanded='true'],
|
|
11054
|
+
&:focus {
|
|
11055
|
+
outline: 2px solid var(--wui-color-focus-ring);
|
|
11056
|
+
}
|
|
11057
|
+
|
|
11058
|
+
&[aria-invalid='true'] {
|
|
11059
|
+
outline: 2px solid var(--wui-select-color-border-error);
|
|
11060
|
+
color: var(--wui-select-color-text-error);
|
|
11061
|
+
}
|
|
11062
|
+
|
|
11063
|
+
&:disabled {
|
|
11064
|
+
border-color: var(--wui-color-bg-surface-disabled);
|
|
11065
|
+
background-color: var(--wui-color-bg-surface-disabled);
|
|
11066
|
+
}
|
|
11067
|
+
`;
|
|
11068
|
+
var StyledContent3 = (0, import_styled_components71.default)(import_react_select.Content)`
|
|
11069
|
+
--wui-select-content-border: var(--wui-color-border);
|
|
11070
|
+
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
11071
|
+
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
11072
|
+
--wui-select-option-padding: var(--wui-space-02);
|
|
11073
|
+
--wui-select-option-inner-gap: var(--wui-space-03);
|
|
11074
|
+
--wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
|
|
11075
|
+
|
|
11076
|
+
overflow: hidden;
|
|
11077
|
+
transform: translateY(8px);
|
|
11078
|
+
background-color: var(--wui-select-content-bg);
|
|
11079
|
+
border: 1px solid var(--wui-select-content-border);
|
|
11080
|
+
border-radius: var(--wui-select-content-border-radius);
|
|
11081
|
+
padding: var(--wui-select-option-padding);
|
|
11082
|
+
min-width: var(--radix-select-trigger-width);
|
|
11083
|
+
max-height: var(--radix-select-content-available-height);
|
|
11084
|
+
z-index: var(--wui-zindex-select);
|
|
11085
|
+
`;
|
|
11086
|
+
var Select = (0, import_react55.forwardRef)(
|
|
11087
|
+
({
|
|
11088
|
+
colorScheme = "inherit",
|
|
11089
|
+
children,
|
|
11090
|
+
onChange = () => null,
|
|
11091
|
+
placeholder = "Select...",
|
|
11092
|
+
fullWidth = false,
|
|
11093
|
+
...props
|
|
11094
|
+
}, forwardedRef) => {
|
|
11095
|
+
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
11096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
|
|
11097
|
+
import_react_select.Root,
|
|
11098
|
+
{
|
|
11099
|
+
...props,
|
|
11100
|
+
onValueChange: onChange,
|
|
11101
|
+
children: [
|
|
11102
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
|
|
11103
|
+
StyledTrigger,
|
|
11104
|
+
{
|
|
11105
|
+
ref: forwardedRef,
|
|
11106
|
+
$colorScheme: colorScheme,
|
|
11107
|
+
$fullWidth: responsiveFullWidth,
|
|
11108
|
+
...props,
|
|
11109
|
+
children: [
|
|
11110
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Value, { placeholder }),
|
|
11111
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
|
|
11112
|
+
Icon,
|
|
11113
|
+
{
|
|
11114
|
+
size: "md",
|
|
11115
|
+
type: "caret-down"
|
|
11116
|
+
}
|
|
11117
|
+
)
|
|
11118
|
+
]
|
|
11119
|
+
}
|
|
11120
|
+
),
|
|
11121
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(StyledContent3, { position: "popper", children: [
|
|
11122
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Icon, { type: "caret-up" }) }),
|
|
11123
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Viewport, { children }),
|
|
11124
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Icon, { type: "caret-down" }) })
|
|
11125
|
+
] }) })
|
|
11126
|
+
]
|
|
11127
|
+
}
|
|
11128
|
+
);
|
|
11129
|
+
}
|
|
11130
|
+
);
|
|
11131
|
+
Select.displayName = "Select";
|
|
11132
|
+
|
|
11133
|
+
// src/components/Select/SelectOption.tsx
|
|
11134
|
+
var import_react_select2 = require("@radix-ui/react-select");
|
|
11135
|
+
var import_react56 = require("react");
|
|
11136
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
11137
|
+
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
11138
|
+
var StyledItem = (0, import_styled_components72.default)(import_react_select2.Item)`
|
|
11139
|
+
${variantStyleMap2.body3};
|
|
11140
|
+
display: flex;
|
|
11141
|
+
padding: var(--wui-select-option-padding);
|
|
11142
|
+
gap: var(--wui-select-option-inner-gap);
|
|
11143
|
+
font-size: var(--font-size);
|
|
11144
|
+
font-weight: var(--font-weight);
|
|
11145
|
+
border-radius: var(--wui-border-radius-01);
|
|
11146
|
+
|
|
11147
|
+
&:hover,
|
|
11148
|
+
&:focus-visible {
|
|
11149
|
+
background-color: var(--wui-select-option-bg-hover);
|
|
11150
|
+
outline: none;
|
|
11151
|
+
}
|
|
11152
|
+
|
|
11153
|
+
&[aria-disabled='true'] {
|
|
11154
|
+
color: var(--wui-color-text-disabled);
|
|
11155
|
+
}
|
|
11156
|
+
|
|
11157
|
+
&[aria-disabled='true']:hover {
|
|
11158
|
+
background-color: transparent;
|
|
11159
|
+
}
|
|
11160
|
+
`;
|
|
11161
|
+
var StyledIconContainer = import_styled_components72.default.span`
|
|
11162
|
+
width: 12px;
|
|
11163
|
+
`;
|
|
11164
|
+
var SelectOption = (0, import_react56.forwardRef)(
|
|
11165
|
+
({ children, ...props }, forwardedRef) => {
|
|
11166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
|
|
11167
|
+
StyledItem,
|
|
11168
|
+
{
|
|
11169
|
+
...props,
|
|
11170
|
+
ref: forwardedRef,
|
|
11171
|
+
children: [
|
|
11172
|
+
/* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
|
|
11173
|
+
Icon,
|
|
11174
|
+
{
|
|
11175
|
+
size: "sm",
|
|
11176
|
+
type: "checkmark"
|
|
11177
|
+
}
|
|
11178
|
+
) }) }),
|
|
11179
|
+
/* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
|
|
11180
|
+
]
|
|
11181
|
+
}
|
|
11182
|
+
);
|
|
11183
|
+
}
|
|
11184
|
+
);
|
|
11185
|
+
SelectOption.displayName = "Option";
|
|
11186
|
+
|
|
11187
|
+
// src/components/Select/SelectOptionGroup.tsx
|
|
11188
|
+
var import_react_select3 = require("@radix-ui/react-select");
|
|
11189
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
11190
|
+
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
11191
|
+
var StyledLabel4 = (0, import_styled_components73.default)(import_react_select3.Label)`
|
|
11192
|
+
padding: var(--wui-select-option-padding);
|
|
11193
|
+
`;
|
|
11194
|
+
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
11195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
11196
|
+
/* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
|
|
11197
|
+
Text,
|
|
11198
|
+
{
|
|
11199
|
+
prominence: "secondary",
|
|
11200
|
+
variant: "body3",
|
|
11201
|
+
children: label
|
|
11202
|
+
}
|
|
11203
|
+
) }),
|
|
11204
|
+
children
|
|
11205
|
+
] });
|
|
11206
|
+
};
|
|
11207
|
+
|
|
11208
|
+
// src/components/Image/Image.tsx
|
|
11209
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
11210
|
+
var import_type_guards43 = require("@wistia/type-guards");
|
|
11211
|
+
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
11212
|
+
var getFillStyle2 = (fillContainer) => {
|
|
11213
|
+
if (fillContainer === "horizontal") {
|
|
11214
|
+
return "width: 100%;";
|
|
11215
|
+
}
|
|
11216
|
+
if (fillContainer === "vertical") {
|
|
11217
|
+
return "height: 100%;";
|
|
11218
|
+
}
|
|
11219
|
+
if (fillContainer === true) {
|
|
11220
|
+
return `
|
|
11221
|
+
width: 100%;
|
|
11222
|
+
height: 100%;
|
|
11223
|
+
`;
|
|
11224
|
+
}
|
|
11225
|
+
return void 0;
|
|
11226
|
+
};
|
|
11227
|
+
var StyledImage = import_styled_components74.default.img`
|
|
11228
|
+
border-radius: ${({ $borderRadius }) => (0, import_type_guards43.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
|
|
11229
|
+
${({ $fillContainer }) => getFillStyle2($fillContainer)};
|
|
11230
|
+
object-fit: ${({ $objFit }) => $objFit};
|
|
11231
|
+
object-position: ${({ $objPosition }) => $objPosition};
|
|
11232
|
+
`;
|
|
11233
|
+
var Image = ({
|
|
11234
|
+
src,
|
|
11235
|
+
alt,
|
|
11236
|
+
borderRadius,
|
|
11237
|
+
fill: fillContainer = false,
|
|
11238
|
+
fit: objFit,
|
|
11239
|
+
loading = "lazy",
|
|
11240
|
+
position: objPosition,
|
|
11241
|
+
...otherProps
|
|
11242
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
|
|
11243
|
+
StyledImage,
|
|
11244
|
+
{
|
|
11245
|
+
$borderRadius: borderRadius,
|
|
11246
|
+
$fillContainer: fillContainer,
|
|
11247
|
+
$objFit: objFit,
|
|
11248
|
+
$objPosition: objPosition,
|
|
11249
|
+
alt,
|
|
11250
|
+
loading,
|
|
11251
|
+
src,
|
|
11252
|
+
...otherProps
|
|
11253
|
+
}
|
|
11254
|
+
);
|
|
11255
|
+
Image.displayName = "Image";
|
|
11377
11256
|
// Annotate the CommonJS export names for ESM import in node:
|
|
11378
11257
|
0 && (module.exports = {
|
|
11379
11258
|
ActionButton,
|
|
@@ -11434,12 +11313,6 @@ WistiaLogo.displayName = "WistiaLogo";
|
|
|
11434
11313
|
Stack,
|
|
11435
11314
|
SubMenu,
|
|
11436
11315
|
Tab,
|
|
11437
|
-
Table,
|
|
11438
|
-
TableBody,
|
|
11439
|
-
TableCell,
|
|
11440
|
-
TableFooter,
|
|
11441
|
-
TableHead,
|
|
11442
|
-
TableRow,
|
|
11443
11316
|
Tabs,
|
|
11444
11317
|
Tag,
|
|
11445
11318
|
Text,
|