@wistia/ui 0.5.7-beta.7ca8b66e.6f0667b → 0.5.7
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 +134 -200
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +1 -41
- package/dist/index.d.ts +1 -41
- package/dist/index.mjs +127 -192
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -2
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.5.7
|
|
3
|
+
* @license @wistia/ui v0.5.7
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -78,7 +78,6 @@ __export(index_exports, {
|
|
|
78
78
|
MenuLabel: () => MenuLabel,
|
|
79
79
|
MenuRadioGroup: () => MenuRadioGroup,
|
|
80
80
|
Modal: () => Modal,
|
|
81
|
-
Popover: () => Popover,
|
|
82
81
|
Radio: () => Radio,
|
|
83
82
|
RadioGroup: () => RadioGroup,
|
|
84
83
|
RadioMenuItem: () => RadioMenuItem,
|
|
@@ -8851,8 +8850,8 @@ var StyledSubTrigger = (0, import_styled_components54.default)(import_react_drop
|
|
|
8851
8850
|
`;
|
|
8852
8851
|
var SubMenuTrigger = (props) => {
|
|
8853
8852
|
const { isSmAndUp } = useMq();
|
|
8854
|
-
const
|
|
8855
|
-
return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
|
|
8853
|
+
const Trigger4 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
|
|
8854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
|
|
8856
8855
|
MenuItemButton,
|
|
8857
8856
|
{
|
|
8858
8857
|
...props,
|
|
@@ -9314,81 +9313,17 @@ var Modal = (0, import_react41.forwardRef)(
|
|
|
9314
9313
|
);
|
|
9315
9314
|
Modal.displayName = "Modal";
|
|
9316
9315
|
|
|
9317
|
-
// src/components/
|
|
9318
|
-
var
|
|
9316
|
+
// src/components/Radio/Radio.tsx
|
|
9317
|
+
var import_react42 = require("react");
|
|
9319
9318
|
var import_styled_components60 = __toESM(require("styled-components"));
|
|
9320
|
-
|
|
9321
|
-
// src/private/helpers/getControls/getControlProps.tsx
|
|
9322
9319
|
var import_type_guards34 = require("@wistia/type-guards");
|
|
9323
|
-
var getControlProps = (isOpen, onOpenChange) => {
|
|
9324
|
-
return (0, import_type_guards34.isNotNil)(onOpenChange) && (0, import_type_guards34.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
|
|
9325
|
-
};
|
|
9326
|
-
|
|
9327
|
-
// src/components/Popover/Popover.tsx
|
|
9328
9320
|
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
9329
|
-
var
|
|
9330
|
-
border-radius: var(--wui-border-radius-02);
|
|
9331
|
-
padding: var(--wui-space-04);
|
|
9332
|
-
max-width: 320px;
|
|
9333
|
-
background-color: var(--wui-color-bg-surface);
|
|
9334
|
-
box-shadow: var(--wui-elevation-01);
|
|
9335
|
-
border: 1px solid var(--wui-color-border);
|
|
9336
|
-
|
|
9337
|
-
[data-wui-popover-close] {
|
|
9338
|
-
position: absolute;
|
|
9339
|
-
top: var(--wui-space-02);
|
|
9340
|
-
right: var(--wui-space-02);
|
|
9341
|
-
}
|
|
9342
|
-
`;
|
|
9343
|
-
var StyledArrow = (0, import_styled_components60.default)(import_react_popover.Arrow)`
|
|
9344
|
-
fill: white;
|
|
9345
|
-
display: none;
|
|
9346
|
-
`;
|
|
9347
|
-
var Popover = ({
|
|
9348
|
-
children,
|
|
9349
|
-
trigger,
|
|
9350
|
-
isOpen = false,
|
|
9351
|
-
hideCloseButton = false,
|
|
9352
|
-
onOpenChange,
|
|
9353
|
-
...props
|
|
9354
|
-
}) => {
|
|
9355
|
-
return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
|
|
9356
|
-
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
|
|
9357
|
-
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(
|
|
9358
|
-
StyledContent2,
|
|
9359
|
-
{
|
|
9360
|
-
sideOffset: 5,
|
|
9361
|
-
...props,
|
|
9362
|
-
children: [
|
|
9363
|
-
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(StyledArrow, {}),
|
|
9364
|
-
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
|
|
9365
|
-
IconButton,
|
|
9366
|
-
{
|
|
9367
|
-
"data-wui-popover-close": true,
|
|
9368
|
-
label: "Close",
|
|
9369
|
-
variant: "ghost",
|
|
9370
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Icon, { type: "close" })
|
|
9371
|
-
}
|
|
9372
|
-
) }),
|
|
9373
|
-
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)("div", { children })
|
|
9374
|
-
]
|
|
9375
|
-
}
|
|
9376
|
-
) })
|
|
9377
|
-
] });
|
|
9378
|
-
};
|
|
9379
|
-
Popover.displayName = "Popover";
|
|
9380
|
-
|
|
9381
|
-
// src/components/Radio/Radio.tsx
|
|
9382
|
-
var import_react42 = require("react");
|
|
9383
|
-
var import_styled_components61 = __toESM(require("styled-components"));
|
|
9384
|
-
var import_type_guards35 = require("@wistia/type-guards");
|
|
9385
|
-
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
9386
|
-
var StyledLabelWrapper2 = import_styled_components61.default.div`
|
|
9321
|
+
var StyledLabelWrapper2 = import_styled_components60.default.div`
|
|
9387
9322
|
display: flex;
|
|
9388
9323
|
flex-direction: column;
|
|
9389
9324
|
padding-left: var(--wui-space-02);
|
|
9390
9325
|
`;
|
|
9391
|
-
var StyledRadio =
|
|
9326
|
+
var StyledRadio = import_styled_components60.default.input`
|
|
9392
9327
|
box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
|
|
9393
9328
|
appearance: none;
|
|
9394
9329
|
margin: 0;
|
|
@@ -9414,11 +9349,11 @@ var StyledRadio = import_styled_components61.default.input`
|
|
|
9414
9349
|
transform: scale(1);
|
|
9415
9350
|
}
|
|
9416
9351
|
`;
|
|
9417
|
-
var disabledStyle2 =
|
|
9352
|
+
var disabledStyle2 = import_styled_components60.css`
|
|
9418
9353
|
cursor: not-allowed;
|
|
9419
9354
|
opacity: 0.5;
|
|
9420
9355
|
`;
|
|
9421
|
-
var errorStyle =
|
|
9356
|
+
var errorStyle = import_styled_components60.css`
|
|
9422
9357
|
/* TODO Lamp to design error state */
|
|
9423
9358
|
&:hover,
|
|
9424
9359
|
&:focus,
|
|
@@ -9426,11 +9361,11 @@ var errorStyle = import_styled_components61.css`
|
|
|
9426
9361
|
border-color: transparent !important;
|
|
9427
9362
|
}
|
|
9428
9363
|
`;
|
|
9429
|
-
var defaultHoverStyle =
|
|
9364
|
+
var defaultHoverStyle = import_styled_components60.css`
|
|
9430
9365
|
/* TODO Lamp to design hover state */
|
|
9431
9366
|
cursor: pointer;
|
|
9432
9367
|
`;
|
|
9433
|
-
var StyledRadioWrapper =
|
|
9368
|
+
var StyledRadioWrapper = import_styled_components60.default.div`
|
|
9434
9369
|
align-items: baseline;
|
|
9435
9370
|
border: 1px solid transparent;
|
|
9436
9371
|
border-radius: 4px;
|
|
@@ -9467,14 +9402,14 @@ var Radio = (0, import_react42.forwardRef)(
|
|
|
9467
9402
|
...otherProps
|
|
9468
9403
|
}, ref) => {
|
|
9469
9404
|
const generatedId = (0, import_react42.useId)();
|
|
9470
|
-
const computedId = (0,
|
|
9471
|
-
return /* @__PURE__ */ (0,
|
|
9405
|
+
const computedId = (0, import_type_guards34.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
|
|
9406
|
+
return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(
|
|
9472
9407
|
StyledRadioWrapper,
|
|
9473
9408
|
{
|
|
9474
9409
|
"aria-invalid": otherProps["aria-invalid"],
|
|
9475
9410
|
disabled,
|
|
9476
9411
|
children: [
|
|
9477
|
-
/* @__PURE__ */ (0,
|
|
9412
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
|
|
9478
9413
|
StyledRadio,
|
|
9479
9414
|
{
|
|
9480
9415
|
ref,
|
|
@@ -9489,8 +9424,8 @@ var Radio = (0, import_react42.forwardRef)(
|
|
|
9489
9424
|
...otherProps
|
|
9490
9425
|
}
|
|
9491
9426
|
),
|
|
9492
|
-
/* @__PURE__ */ (0,
|
|
9493
|
-
/* @__PURE__ */ (0,
|
|
9427
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(StyledLabelWrapper2, { children: [
|
|
9428
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
|
|
9494
9429
|
Label,
|
|
9495
9430
|
{
|
|
9496
9431
|
disabled,
|
|
@@ -9499,7 +9434,7 @@ var Radio = (0, import_react42.forwardRef)(
|
|
|
9499
9434
|
children: label
|
|
9500
9435
|
}
|
|
9501
9436
|
),
|
|
9502
|
-
/* @__PURE__ */ (0,
|
|
9437
|
+
/* @__PURE__ */ (0, import_jsx_runtime210.jsx)(LabelDescription, { children: description })
|
|
9503
9438
|
] })
|
|
9504
9439
|
]
|
|
9505
9440
|
}
|
|
@@ -9510,13 +9445,13 @@ Radio.displayName = "Radio";
|
|
|
9510
9445
|
|
|
9511
9446
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
9512
9447
|
var import_react46 = require("react");
|
|
9513
|
-
var
|
|
9448
|
+
var import_styled_components62 = __toESM(require("styled-components"));
|
|
9514
9449
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
9515
|
-
var
|
|
9450
|
+
var import_type_guards35 = require("@wistia/type-guards");
|
|
9516
9451
|
|
|
9517
9452
|
// src/components/SegmentedControl/useSelectedItemMeasurements.tsx
|
|
9518
9453
|
var import_react43 = require("react");
|
|
9519
|
-
var
|
|
9454
|
+
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
9520
9455
|
var SelectedItemMeasurementsContext = (0, import_react43.createContext)(
|
|
9521
9456
|
null
|
|
9522
9457
|
);
|
|
@@ -9531,7 +9466,7 @@ var SelectedItemMeasurementsProvider = ({
|
|
|
9531
9466
|
}),
|
|
9532
9467
|
[selectedItemMeasurements]
|
|
9533
9468
|
);
|
|
9534
|
-
return /* @__PURE__ */ (0,
|
|
9469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
|
|
9535
9470
|
};
|
|
9536
9471
|
var useSelectedItemMeasurements = () => {
|
|
9537
9472
|
const context = (0, import_react43.useContext)(SelectedItemMeasurementsContext);
|
|
@@ -9545,7 +9480,7 @@ var useSelectedItemMeasurements = () => {
|
|
|
9545
9480
|
|
|
9546
9481
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
9547
9482
|
var import_react45 = require("react");
|
|
9548
|
-
var
|
|
9483
|
+
var import_styled_components61 = __toESM(require("styled-components"));
|
|
9549
9484
|
|
|
9550
9485
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
9551
9486
|
var import_react44 = require("react");
|
|
@@ -9560,9 +9495,9 @@ var useSegmentedControlValue = () => {
|
|
|
9560
9495
|
};
|
|
9561
9496
|
|
|
9562
9497
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
9563
|
-
var
|
|
9498
|
+
var import_jsx_runtime212 = require("react/jsx-runtime");
|
|
9564
9499
|
var Z_INDEX_TO_SIT_BEHIND_SIBLINGS = -1;
|
|
9565
|
-
var SelectedItemIndicatorDiv =
|
|
9500
|
+
var SelectedItemIndicatorDiv = import_styled_components61.default.div`
|
|
9566
9501
|
background-color: var(--wui-color-bg-fill-white);
|
|
9567
9502
|
border-radius: var(--wui-border-radius-rounded);
|
|
9568
9503
|
left: 0;
|
|
@@ -9587,7 +9522,7 @@ var SelectedItemIndicator = () => {
|
|
|
9587
9522
|
if (!selectedValue) {
|
|
9588
9523
|
return null;
|
|
9589
9524
|
}
|
|
9590
|
-
return /* @__PURE__ */ (0,
|
|
9525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
|
|
9591
9526
|
SelectedItemIndicatorDiv,
|
|
9592
9527
|
{
|
|
9593
9528
|
style: {
|
|
@@ -9600,8 +9535,8 @@ var SelectedItemIndicator = () => {
|
|
|
9600
9535
|
};
|
|
9601
9536
|
|
|
9602
9537
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
9603
|
-
var
|
|
9604
|
-
var segmentedControlStyles =
|
|
9538
|
+
var import_jsx_runtime213 = require("react/jsx-runtime");
|
|
9539
|
+
var segmentedControlStyles = import_styled_components62.css`
|
|
9605
9540
|
display: inline-flex;
|
|
9606
9541
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
9607
9542
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -9611,7 +9546,7 @@ var segmentedControlStyles = import_styled_components63.css`
|
|
|
9611
9546
|
position: relative;
|
|
9612
9547
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
9613
9548
|
`;
|
|
9614
|
-
var StyledSegmentedControl = (0,
|
|
9549
|
+
var StyledSegmentedControl = (0, import_styled_components62.default)(import_react_toggle_group.Root)`
|
|
9615
9550
|
${segmentedControlStyles}
|
|
9616
9551
|
`;
|
|
9617
9552
|
var SegmentedControl = (0, import_react46.forwardRef)(
|
|
@@ -9623,10 +9558,10 @@ var SegmentedControl = (0, import_react46.forwardRef)(
|
|
|
9623
9558
|
onSelectedValueChange,
|
|
9624
9559
|
...props
|
|
9625
9560
|
}, ref) => {
|
|
9626
|
-
if ((0,
|
|
9561
|
+
if ((0, import_type_guards35.isNil)(children)) {
|
|
9627
9562
|
return null;
|
|
9628
9563
|
}
|
|
9629
|
-
return /* @__PURE__ */ (0,
|
|
9564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
|
|
9630
9565
|
StyledSegmentedControl,
|
|
9631
9566
|
{
|
|
9632
9567
|
ref,
|
|
@@ -9638,8 +9573,8 @@ var SegmentedControl = (0, import_react46.forwardRef)(
|
|
|
9638
9573
|
type: "single",
|
|
9639
9574
|
value: selectedValue,
|
|
9640
9575
|
...props,
|
|
9641
|
-
children: /* @__PURE__ */ (0,
|
|
9642
|
-
/* @__PURE__ */ (0,
|
|
9576
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(SelectedItemMeasurementsProvider, { children: [
|
|
9577
|
+
/* @__PURE__ */ (0, import_jsx_runtime213.jsx)(SelectedItemIndicator, {}),
|
|
9643
9578
|
children
|
|
9644
9579
|
] }) })
|
|
9645
9580
|
}
|
|
@@ -9650,27 +9585,27 @@ SegmentedControl.displayName = "SegmentedControl";
|
|
|
9650
9585
|
|
|
9651
9586
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
9652
9587
|
var import_react47 = require("react");
|
|
9653
|
-
var
|
|
9588
|
+
var import_styled_components63 = __toESM(require("styled-components"));
|
|
9654
9589
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
9655
|
-
var
|
|
9590
|
+
var import_type_guards37 = require("@wistia/type-guards");
|
|
9656
9591
|
|
|
9657
9592
|
// src/private/helpers/mergeRefs/mergeRefs.ts
|
|
9658
|
-
var
|
|
9593
|
+
var import_type_guards36 = require("@wistia/type-guards");
|
|
9659
9594
|
var mergeRefs = (refs) => (value) => {
|
|
9660
9595
|
refs.forEach((ref) => {
|
|
9661
|
-
if ((0,
|
|
9596
|
+
if ((0, import_type_guards36.isFunction)(ref)) {
|
|
9662
9597
|
ref(value);
|
|
9663
9598
|
return;
|
|
9664
9599
|
}
|
|
9665
|
-
if ((0,
|
|
9600
|
+
if ((0, import_type_guards36.isNotNil)(ref)) {
|
|
9666
9601
|
ref.current = value;
|
|
9667
9602
|
}
|
|
9668
9603
|
});
|
|
9669
9604
|
};
|
|
9670
9605
|
|
|
9671
9606
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
9672
|
-
var
|
|
9673
|
-
var segmentedControlItemStyles =
|
|
9607
|
+
var import_jsx_runtime214 = require("react/jsx-runtime");
|
|
9608
|
+
var segmentedControlItemStyles = import_styled_components63.css`
|
|
9674
9609
|
all: unset; /* ToggleGroupItem is a button element */
|
|
9675
9610
|
align-items: center;
|
|
9676
9611
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -9730,7 +9665,7 @@ var segmentedControlItemStyles = import_styled_components64.css`
|
|
|
9730
9665
|
}
|
|
9731
9666
|
}
|
|
9732
9667
|
`;
|
|
9733
|
-
var StyledSegmentedControlItem = (0,
|
|
9668
|
+
var StyledSegmentedControlItem = (0, import_styled_components63.default)(import_react_toggle_group2.Item)`
|
|
9734
9669
|
${segmentedControlItemStyles}
|
|
9735
9670
|
`;
|
|
9736
9671
|
var SegmentedControlItem = (0, import_react47.forwardRef)(
|
|
@@ -9771,12 +9706,12 @@ var SegmentedControlItem = (0, import_react47.forwardRef)(
|
|
|
9771
9706
|
resizeObserver.disconnect();
|
|
9772
9707
|
};
|
|
9773
9708
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
9774
|
-
return /* @__PURE__ */ (0,
|
|
9709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
|
|
9775
9710
|
StyledSegmentedControlItem,
|
|
9776
9711
|
{
|
|
9777
9712
|
ref: combinedRef,
|
|
9778
|
-
$hasLabel: (0,
|
|
9779
|
-
"aria-label": (0,
|
|
9713
|
+
$hasLabel: (0, import_type_guards37.isNotNil)(label),
|
|
9714
|
+
"aria-label": (0, import_type_guards37.isNotNil)(label) ? void 0 : ariaLabel,
|
|
9780
9715
|
disabled,
|
|
9781
9716
|
onClick: handleClick,
|
|
9782
9717
|
value,
|
|
@@ -9793,18 +9728,18 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
|
9793
9728
|
// src/components/Tabs/Tabs.tsx
|
|
9794
9729
|
var import_react52 = require("react");
|
|
9795
9730
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
9796
|
-
var
|
|
9731
|
+
var import_type_guards39 = require("@wistia/type-guards");
|
|
9797
9732
|
|
|
9798
9733
|
// src/components/Tabs/TabPanel.tsx
|
|
9799
|
-
var
|
|
9734
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
9800
9735
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
9801
|
-
var
|
|
9802
|
-
var StyledTabPanel = (0,
|
|
9736
|
+
var import_jsx_runtime215 = require("react/jsx-runtime");
|
|
9737
|
+
var StyledTabPanel = (0, import_styled_components64.default)(import_react_tabs.Content)`
|
|
9803
9738
|
display: flex;
|
|
9804
9739
|
flex-direction: column;
|
|
9805
9740
|
`;
|
|
9806
9741
|
var TabPanel = ({ children, value, ...props }) => {
|
|
9807
|
-
return /* @__PURE__ */ (0,
|
|
9742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
|
|
9808
9743
|
StyledTabPanel,
|
|
9809
9744
|
{
|
|
9810
9745
|
value,
|
|
@@ -9816,10 +9751,10 @@ var TabPanel = ({ children, value, ...props }) => {
|
|
|
9816
9751
|
TabPanel.displayName = "TabPanel";
|
|
9817
9752
|
|
|
9818
9753
|
// src/components/Tabs/TabList.tsx
|
|
9819
|
-
var
|
|
9754
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
9820
9755
|
var import_react_tabs2 = require("@radix-ui/react-tabs");
|
|
9821
|
-
var
|
|
9822
|
-
var StyledTabList = (0,
|
|
9756
|
+
var import_jsx_runtime216 = require("react/jsx-runtime");
|
|
9757
|
+
var StyledTabList = (0, import_styled_components65.default)(import_react_tabs2.List)`
|
|
9823
9758
|
${segmentedControlStyles}
|
|
9824
9759
|
|
|
9825
9760
|
margin-bottom: var(--wui-space-04);
|
|
@@ -9830,7 +9765,7 @@ var TabList = ({
|
|
|
9830
9765
|
ariaLabel,
|
|
9831
9766
|
...props
|
|
9832
9767
|
}) => {
|
|
9833
|
-
return /* @__PURE__ */ (0,
|
|
9768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
|
|
9834
9769
|
StyledTabList,
|
|
9835
9770
|
{
|
|
9836
9771
|
$fullWidth: fullWidth,
|
|
@@ -9844,9 +9779,9 @@ TabList.displayName = "TabList";
|
|
|
9844
9779
|
|
|
9845
9780
|
// src/components/Tabs/TabItem.tsx
|
|
9846
9781
|
var import_react49 = require("react");
|
|
9847
|
-
var
|
|
9782
|
+
var import_styled_components66 = __toESM(require("styled-components"));
|
|
9848
9783
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
9849
|
-
var
|
|
9784
|
+
var import_type_guards38 = require("@wistia/type-guards");
|
|
9850
9785
|
|
|
9851
9786
|
// src/components/Tabs/useTabsValue.tsx
|
|
9852
9787
|
var import_react48 = require("react");
|
|
@@ -9861,8 +9796,8 @@ var useTabsValue = () => {
|
|
|
9861
9796
|
};
|
|
9862
9797
|
|
|
9863
9798
|
// src/components/Tabs/TabItem.tsx
|
|
9864
|
-
var
|
|
9865
|
-
var StyledTabItem = (0,
|
|
9799
|
+
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
9800
|
+
var StyledTabItem = (0, import_styled_components66.default)(import_react_tabs3.Trigger)`
|
|
9866
9801
|
${segmentedControlItemStyles}
|
|
9867
9802
|
|
|
9868
9803
|
&:focus-visible {
|
|
@@ -9900,12 +9835,12 @@ var TabItem = (0, import_react49.forwardRef)(
|
|
|
9900
9835
|
resizeObserver.disconnect();
|
|
9901
9836
|
};
|
|
9902
9837
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
9903
|
-
return /* @__PURE__ */ (0,
|
|
9838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(
|
|
9904
9839
|
StyledTabItem,
|
|
9905
9840
|
{
|
|
9906
9841
|
ref: combinedRef,
|
|
9907
|
-
$hasLabel: (0,
|
|
9908
|
-
"aria-label": (0,
|
|
9842
|
+
$hasLabel: (0, import_type_guards38.isNotNil)(label),
|
|
9843
|
+
"aria-label": (0, import_type_guards38.isNotNil)(label) ? void 0 : ariaLabel,
|
|
9909
9844
|
disabled,
|
|
9910
9845
|
value,
|
|
9911
9846
|
children: [
|
|
@@ -9942,9 +9877,9 @@ var extractTabItems = (children) => {
|
|
|
9942
9877
|
|
|
9943
9878
|
// src/components/Tabs/SelectedItemIndicator.tsx
|
|
9944
9879
|
var import_react51 = require("react");
|
|
9945
|
-
var
|
|
9946
|
-
var
|
|
9947
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
9880
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
9881
|
+
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
9882
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components67.default)(SelectedItemIndicatorDiv)`
|
|
9948
9883
|
&:has(~ ${StyledTabItem}:focus-visible) {
|
|
9949
9884
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
9950
9885
|
}
|
|
@@ -9963,7 +9898,7 @@ var SelectedItemIndicator2 = () => {
|
|
|
9963
9898
|
if (selectedValue == null) {
|
|
9964
9899
|
return null;
|
|
9965
9900
|
}
|
|
9966
|
-
return /* @__PURE__ */ (0,
|
|
9901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
|
|
9967
9902
|
TabsSelectedItemIndicatorDiv,
|
|
9968
9903
|
{
|
|
9969
9904
|
style: {
|
|
@@ -9976,7 +9911,7 @@ var SelectedItemIndicator2 = () => {
|
|
|
9976
9911
|
};
|
|
9977
9912
|
|
|
9978
9913
|
// src/components/Tabs/Tabs.tsx
|
|
9979
|
-
var
|
|
9914
|
+
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
9980
9915
|
var Tabs = (0, import_react52.forwardRef)(
|
|
9981
9916
|
({
|
|
9982
9917
|
children,
|
|
@@ -9993,25 +9928,25 @@ var Tabs = (0, import_react52.forwardRef)(
|
|
|
9993
9928
|
defaultValue: defaultSelectedValue,
|
|
9994
9929
|
onValueChange: setInternalSelectedValue
|
|
9995
9930
|
} : { value: selectedValue, onValueChange: onSelectedValueChange };
|
|
9996
|
-
return /* @__PURE__ */ (0,
|
|
9931
|
+
return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
|
|
9997
9932
|
import_react_tabs4.Root,
|
|
9998
9933
|
{
|
|
9999
9934
|
ref,
|
|
10000
9935
|
activationMode: "automatic",
|
|
10001
9936
|
...otherProps,
|
|
10002
9937
|
...modeProps,
|
|
10003
|
-
children: /* @__PURE__ */ (0,
|
|
9938
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
|
|
10004
9939
|
TabsValueProvider,
|
|
10005
9940
|
{
|
|
10006
9941
|
value: defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue,
|
|
10007
|
-
children: /* @__PURE__ */ (0,
|
|
10008
|
-
/* @__PURE__ */ (0,
|
|
9942
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(SelectedItemMeasurementsProvider, { children: [
|
|
9943
|
+
/* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
|
|
10009
9944
|
TabList,
|
|
10010
9945
|
{
|
|
10011
9946
|
ariaLabel,
|
|
10012
9947
|
fullWidth,
|
|
10013
9948
|
children: [
|
|
10014
|
-
/* @__PURE__ */ (0,
|
|
9949
|
+
/* @__PURE__ */ (0, import_jsx_runtime219.jsx)(SelectedItemIndicator2, {}),
|
|
10015
9950
|
tabItems.map((tab) => {
|
|
10016
9951
|
const {
|
|
10017
9952
|
value,
|
|
@@ -10020,8 +9955,8 @@ var Tabs = (0, import_react52.forwardRef)(
|
|
|
10020
9955
|
label,
|
|
10021
9956
|
"aria-label": ariaLabelForTab
|
|
10022
9957
|
} = tab.props;
|
|
10023
|
-
if ((0,
|
|
10024
|
-
return /* @__PURE__ */ (0,
|
|
9958
|
+
if ((0, import_type_guards39.isNil)(icon)) {
|
|
9959
|
+
return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
|
|
10025
9960
|
TabItem,
|
|
10026
9961
|
{
|
|
10027
9962
|
disabled,
|
|
@@ -10031,8 +9966,8 @@ var Tabs = (0, import_react52.forwardRef)(
|
|
|
10031
9966
|
value
|
|
10032
9967
|
);
|
|
10033
9968
|
}
|
|
10034
|
-
if ((0,
|
|
10035
|
-
return /* @__PURE__ */ (0,
|
|
9969
|
+
if ((0, import_type_guards39.isNotNil)(label)) {
|
|
9970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
|
|
10036
9971
|
TabItem,
|
|
10037
9972
|
{
|
|
10038
9973
|
disabled,
|
|
@@ -10043,8 +9978,8 @@ var Tabs = (0, import_react52.forwardRef)(
|
|
|
10043
9978
|
value
|
|
10044
9979
|
);
|
|
10045
9980
|
}
|
|
10046
|
-
if ((0,
|
|
10047
|
-
return /* @__PURE__ */ (0,
|
|
9981
|
+
if ((0, import_type_guards39.isNotNil)(ariaLabelForTab)) {
|
|
9982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
|
|
10048
9983
|
TabItem,
|
|
10049
9984
|
{
|
|
10050
9985
|
"aria-label": ariaLabelForTab,
|
|
@@ -10060,7 +9995,7 @@ var Tabs = (0, import_react52.forwardRef)(
|
|
|
10060
9995
|
]
|
|
10061
9996
|
}
|
|
10062
9997
|
),
|
|
10063
|
-
tabItems.map((tab) => /* @__PURE__ */ (0,
|
|
9998
|
+
tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
|
|
10064
9999
|
TabPanel,
|
|
10065
10000
|
{
|
|
10066
10001
|
value: tab.props.value,
|
|
@@ -10079,18 +10014,18 @@ Tabs.displayName = "Tabs";
|
|
|
10079
10014
|
|
|
10080
10015
|
// src/components/Tabs/Tab.tsx
|
|
10081
10016
|
var import_react53 = require("react");
|
|
10082
|
-
var
|
|
10017
|
+
var import_jsx_runtime220 = require("react/jsx-runtime");
|
|
10083
10018
|
var Tab = (0, import_react53.forwardRef)(({ children }, ref) => {
|
|
10084
|
-
return /* @__PURE__ */ (0,
|
|
10019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", { ref, children });
|
|
10085
10020
|
});
|
|
10086
10021
|
Tab.displayName = "Tab";
|
|
10087
10022
|
|
|
10088
10023
|
// src/components/Tag/Tag.tsx
|
|
10089
10024
|
var import_react54 = require("react");
|
|
10090
|
-
var
|
|
10091
|
-
var
|
|
10092
|
-
var
|
|
10093
|
-
var TagLabel =
|
|
10025
|
+
var import_styled_components68 = __toESM(require("styled-components"));
|
|
10026
|
+
var import_type_guards40 = require("@wistia/type-guards");
|
|
10027
|
+
var import_jsx_runtime221 = require("react/jsx-runtime");
|
|
10028
|
+
var TagLabel = import_styled_components68.default.a`
|
|
10094
10029
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
10095
10030
|
font-size: var(--wui-typography-label-4-size);
|
|
10096
10031
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -10118,14 +10053,14 @@ var TagLabel = import_styled_components69.default.a`
|
|
|
10118
10053
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
10119
10054
|
}
|
|
10120
10055
|
`;
|
|
10121
|
-
var TagDivider =
|
|
10056
|
+
var TagDivider = import_styled_components68.default.div`
|
|
10122
10057
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
10123
10058
|
border-left: 1px solid var(--wui-color-border);
|
|
10124
10059
|
display: flex;
|
|
10125
10060
|
height: 14px;
|
|
10126
10061
|
width: 1px;
|
|
10127
10062
|
`;
|
|
10128
|
-
var StyledRemoveButton =
|
|
10063
|
+
var StyledRemoveButton = import_styled_components68.default.button`
|
|
10129
10064
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
10130
10065
|
all: unset;
|
|
10131
10066
|
cursor: pointer;
|
|
@@ -10153,7 +10088,7 @@ var StyledRemoveButton = import_styled_components69.default.button`
|
|
|
10153
10088
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
10154
10089
|
}
|
|
10155
10090
|
`;
|
|
10156
|
-
var StyledTag =
|
|
10091
|
+
var StyledTag = import_styled_components68.default.div`
|
|
10157
10092
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
10158
10093
|
align-items: center;
|
|
10159
10094
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -10166,31 +10101,31 @@ var StyledTag = import_styled_components69.default.div`
|
|
|
10166
10101
|
}
|
|
10167
10102
|
`;
|
|
10168
10103
|
var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
10169
|
-
if ((0,
|
|
10104
|
+
if ((0, import_type_guards40.isNil)(onClickRemove)) {
|
|
10170
10105
|
return null;
|
|
10171
10106
|
}
|
|
10172
|
-
if ((0,
|
|
10107
|
+
if ((0, import_type_guards40.isNil)(onClickRemoveLabel)) {
|
|
10173
10108
|
throw new Error(
|
|
10174
10109
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
10175
10110
|
);
|
|
10176
10111
|
}
|
|
10177
|
-
return /* @__PURE__ */ (0,
|
|
10178
|
-
/* @__PURE__ */ (0,
|
|
10179
|
-
/* @__PURE__ */ (0,
|
|
10112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_jsx_runtime221.Fragment, { children: [
|
|
10113
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(TagDivider, { $colorScheme: colorScheme }),
|
|
10114
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
|
|
10180
10115
|
StyledRemoveButton,
|
|
10181
10116
|
{
|
|
10182
10117
|
$colorScheme: colorScheme,
|
|
10183
10118
|
onClick: onClickRemove,
|
|
10184
10119
|
type: "button",
|
|
10185
10120
|
children: [
|
|
10186
|
-
/* @__PURE__ */ (0,
|
|
10121
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
10187
10122
|
Icon,
|
|
10188
10123
|
{
|
|
10189
10124
|
size: "sm",
|
|
10190
10125
|
type: "close"
|
|
10191
10126
|
}
|
|
10192
10127
|
),
|
|
10193
|
-
/* @__PURE__ */ (0,
|
|
10128
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
10194
10129
|
]
|
|
10195
10130
|
}
|
|
10196
10131
|
)
|
|
@@ -10198,15 +10133,15 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
|
10198
10133
|
};
|
|
10199
10134
|
var Tag = (0, import_react54.forwardRef)(
|
|
10200
10135
|
({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
|
|
10201
|
-
const labelProps = (0,
|
|
10202
|
-
return /* @__PURE__ */ (0,
|
|
10136
|
+
const labelProps = (0, import_type_guards40.isNotNil)(href) && (0, import_type_guards40.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
|
|
10137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
|
|
10203
10138
|
StyledTag,
|
|
10204
10139
|
{
|
|
10205
10140
|
ref,
|
|
10206
10141
|
$colorScheme: colorScheme,
|
|
10207
10142
|
...otherProps,
|
|
10208
10143
|
children: [
|
|
10209
|
-
/* @__PURE__ */ (0,
|
|
10144
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
10210
10145
|
TagLabel,
|
|
10211
10146
|
{
|
|
10212
10147
|
...labelProps,
|
|
@@ -10214,7 +10149,7 @@ var Tag = (0, import_react54.forwardRef)(
|
|
|
10214
10149
|
children: label
|
|
10215
10150
|
}
|
|
10216
10151
|
),
|
|
10217
|
-
/* @__PURE__ */ (0,
|
|
10152
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
10218
10153
|
RemoveButton,
|
|
10219
10154
|
{
|
|
10220
10155
|
colorScheme,
|
|
@@ -10230,26 +10165,26 @@ var Tag = (0, import_react54.forwardRef)(
|
|
|
10230
10165
|
Tag.displayName = "Tag";
|
|
10231
10166
|
|
|
10232
10167
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
10233
|
-
var
|
|
10234
|
-
var
|
|
10235
|
-
var
|
|
10168
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
10169
|
+
var import_type_guards41 = require("@wistia/type-guards");
|
|
10170
|
+
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
10236
10171
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
10237
10172
|
if (iconOnly) {
|
|
10238
|
-
return /* @__PURE__ */ (0,
|
|
10173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
|
|
10239
10174
|
"g",
|
|
10240
10175
|
{
|
|
10241
10176
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
10242
10177
|
fill: brandmarkColor,
|
|
10243
|
-
children: /* @__PURE__ */ (0,
|
|
10178
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime222.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" })
|
|
10244
10179
|
}
|
|
10245
10180
|
);
|
|
10246
10181
|
}
|
|
10247
|
-
return /* @__PURE__ */ (0,
|
|
10182
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
|
|
10248
10183
|
"g",
|
|
10249
10184
|
{
|
|
10250
10185
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
10251
10186
|
fill: brandmarkColor,
|
|
10252
|
-
children: /* @__PURE__ */ (0,
|
|
10187
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime222.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" })
|
|
10253
10188
|
}
|
|
10254
10189
|
);
|
|
10255
10190
|
};
|
|
@@ -10257,12 +10192,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
10257
10192
|
if (iconOnly) {
|
|
10258
10193
|
return null;
|
|
10259
10194
|
}
|
|
10260
|
-
return /* @__PURE__ */ (0,
|
|
10195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
|
|
10261
10196
|
"g",
|
|
10262
10197
|
{
|
|
10263
10198
|
"data-testid": "ui-wistia-logo-logotype",
|
|
10264
10199
|
fill: logotypeColor,
|
|
10265
|
-
children: /* @__PURE__ */ (0,
|
|
10200
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime222.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" })
|
|
10266
10201
|
}
|
|
10267
10202
|
);
|
|
10268
10203
|
};
|
|
@@ -10272,7 +10207,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
10272
10207
|
}
|
|
10273
10208
|
return "0 0 144 31.47";
|
|
10274
10209
|
};
|
|
10275
|
-
var WistiaLogoComponent =
|
|
10210
|
+
var WistiaLogoComponent = import_styled_components69.default.svg`
|
|
10276
10211
|
height: ${({ height }) => `${height}px`};
|
|
10277
10212
|
|
|
10278
10213
|
/* ensure it will always fit on mobile */
|
|
@@ -10314,7 +10249,7 @@ var WistiaLogo = ({
|
|
|
10314
10249
|
};
|
|
10315
10250
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
10316
10251
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
10317
|
-
const Logo = /* @__PURE__ */ (0,
|
|
10252
|
+
const Logo = /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
|
|
10318
10253
|
WistiaLogoComponent,
|
|
10319
10254
|
{
|
|
10320
10255
|
$hoverColor: hoverColor,
|
|
@@ -10324,23 +10259,23 @@ var WistiaLogo = ({
|
|
|
10324
10259
|
xmlns: "http://www.w3.org/2000/svg",
|
|
10325
10260
|
...otherProps,
|
|
10326
10261
|
children: [
|
|
10327
|
-
/* @__PURE__ */ (0,
|
|
10328
|
-
(0,
|
|
10262
|
+
/* @__PURE__ */ (0, import_jsx_runtime222.jsx)("title", { children: title }),
|
|
10263
|
+
(0, import_type_guards41.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("desc", { children: description }) : null,
|
|
10329
10264
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
10330
10265
|
renderLogotype(logotypeColor, iconOnly)
|
|
10331
10266
|
]
|
|
10332
10267
|
}
|
|
10333
10268
|
);
|
|
10334
|
-
return href !== void 0 ? /* @__PURE__ */ (0,
|
|
10269
|
+
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)("a", { href, children: Logo }) : Logo;
|
|
10335
10270
|
};
|
|
10336
10271
|
WistiaLogo.displayName = "WistiaLogo";
|
|
10337
10272
|
|
|
10338
10273
|
// src/components/Select/Select.tsx
|
|
10339
10274
|
var import_react_select = require("@radix-ui/react-select");
|
|
10340
10275
|
var import_react55 = require("react");
|
|
10341
|
-
var
|
|
10342
|
-
var
|
|
10343
|
-
var StyledTrigger = (0,
|
|
10276
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
10277
|
+
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
10278
|
+
var StyledTrigger = (0, import_styled_components70.default)(import_react_select.Trigger)`
|
|
10344
10279
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
10345
10280
|
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
10346
10281
|
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -10381,7 +10316,7 @@ var StyledTrigger = (0, import_styled_components71.default)(import_react_select.
|
|
|
10381
10316
|
background-color: var(--wui-color-bg-surface-disabled);
|
|
10382
10317
|
}
|
|
10383
10318
|
`;
|
|
10384
|
-
var
|
|
10319
|
+
var StyledContent2 = (0, import_styled_components70.default)(import_react_select.Content)`
|
|
10385
10320
|
--wui-select-content-border: var(--wui-color-border);
|
|
10386
10321
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
10387
10322
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -10407,13 +10342,13 @@ var Select = (0, import_react55.forwardRef)(
|
|
|
10407
10342
|
...props
|
|
10408
10343
|
}, forwardedRef) => {
|
|
10409
10344
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
10410
|
-
return /* @__PURE__ */ (0,
|
|
10345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
|
|
10411
10346
|
import_react_select.Root,
|
|
10412
10347
|
{
|
|
10413
10348
|
...props,
|
|
10414
10349
|
onValueChange: onChange,
|
|
10415
10350
|
children: [
|
|
10416
|
-
/* @__PURE__ */ (0,
|
|
10351
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
|
|
10417
10352
|
StyledTrigger,
|
|
10418
10353
|
{
|
|
10419
10354
|
ref: forwardedRef,
|
|
@@ -10421,8 +10356,8 @@ var Select = (0, import_react55.forwardRef)(
|
|
|
10421
10356
|
$fullWidth: responsiveFullWidth,
|
|
10422
10357
|
...props,
|
|
10423
10358
|
children: [
|
|
10424
|
-
/* @__PURE__ */ (0,
|
|
10425
|
-
/* @__PURE__ */ (0,
|
|
10359
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_select.Value, { placeholder }),
|
|
10360
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
|
|
10426
10361
|
Icon,
|
|
10427
10362
|
{
|
|
10428
10363
|
size: "md",
|
|
@@ -10432,10 +10367,10 @@ var Select = (0, import_react55.forwardRef)(
|
|
|
10432
10367
|
]
|
|
10433
10368
|
}
|
|
10434
10369
|
),
|
|
10435
|
-
/* @__PURE__ */ (0,
|
|
10436
|
-
/* @__PURE__ */ (0,
|
|
10437
|
-
/* @__PURE__ */ (0,
|
|
10438
|
-
/* @__PURE__ */ (0,
|
|
10370
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(StyledContent2, { position: "popper", children: [
|
|
10371
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Icon, { type: "caret-up" }) }),
|
|
10372
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_select.Viewport, { children }),
|
|
10373
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Icon, { type: "caret-down" }) })
|
|
10439
10374
|
] }) })
|
|
10440
10375
|
]
|
|
10441
10376
|
}
|
|
@@ -10447,9 +10382,9 @@ Select.displayName = "Select";
|
|
|
10447
10382
|
// src/components/Select/SelectOption.tsx
|
|
10448
10383
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
10449
10384
|
var import_react56 = require("react");
|
|
10450
|
-
var
|
|
10451
|
-
var
|
|
10452
|
-
var StyledItem = (0,
|
|
10385
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
10386
|
+
var import_jsx_runtime224 = require("react/jsx-runtime");
|
|
10387
|
+
var StyledItem = (0, import_styled_components71.default)(import_react_select2.Item)`
|
|
10453
10388
|
${variantStyleMap2.body3};
|
|
10454
10389
|
display: flex;
|
|
10455
10390
|
padding: var(--wui-select-option-padding);
|
|
@@ -10472,25 +10407,25 @@ var StyledItem = (0, import_styled_components72.default)(import_react_select2.It
|
|
|
10472
10407
|
background-color: transparent;
|
|
10473
10408
|
}
|
|
10474
10409
|
`;
|
|
10475
|
-
var StyledIconContainer =
|
|
10410
|
+
var StyledIconContainer = import_styled_components71.default.span`
|
|
10476
10411
|
width: 12px;
|
|
10477
10412
|
`;
|
|
10478
10413
|
var SelectOption = (0, import_react56.forwardRef)(
|
|
10479
10414
|
({ children, ...props }, forwardedRef) => {
|
|
10480
|
-
return /* @__PURE__ */ (0,
|
|
10415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
|
|
10481
10416
|
StyledItem,
|
|
10482
10417
|
{
|
|
10483
10418
|
...props,
|
|
10484
10419
|
ref: forwardedRef,
|
|
10485
10420
|
children: [
|
|
10486
|
-
/* @__PURE__ */ (0,
|
|
10421
|
+
/* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
|
|
10487
10422
|
Icon,
|
|
10488
10423
|
{
|
|
10489
10424
|
size: "sm",
|
|
10490
10425
|
type: "checkmark"
|
|
10491
10426
|
}
|
|
10492
10427
|
) }) }),
|
|
10493
|
-
/* @__PURE__ */ (0,
|
|
10428
|
+
/* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_select2.ItemText, { children })
|
|
10494
10429
|
]
|
|
10495
10430
|
}
|
|
10496
10431
|
);
|
|
@@ -10500,14 +10435,14 @@ SelectOption.displayName = "Option";
|
|
|
10500
10435
|
|
|
10501
10436
|
// src/components/Select/SelectOptionGroup.tsx
|
|
10502
10437
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
10503
|
-
var
|
|
10504
|
-
var
|
|
10505
|
-
var StyledLabel4 = (0,
|
|
10438
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
10439
|
+
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
10440
|
+
var StyledLabel4 = (0, import_styled_components72.default)(import_react_select3.Label)`
|
|
10506
10441
|
padding: var(--wui-select-option-padding);
|
|
10507
10442
|
`;
|
|
10508
10443
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
10509
|
-
return /* @__PURE__ */ (0,
|
|
10510
|
-
/* @__PURE__ */ (0,
|
|
10444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
10445
|
+
/* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
|
|
10511
10446
|
Text,
|
|
10512
10447
|
{
|
|
10513
10448
|
prominence: "secondary",
|
|
@@ -10559,7 +10494,6 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
10559
10494
|
MenuLabel,
|
|
10560
10495
|
MenuRadioGroup,
|
|
10561
10496
|
Modal,
|
|
10562
|
-
Popover,
|
|
10563
10497
|
Radio,
|
|
10564
10498
|
RadioGroup,
|
|
10565
10499
|
RadioMenuItem,
|