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