@wistia/ui 0.4.9-beta.f08d243b.56e8ca2 → 0.4.9
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 +70 -205
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +12 -83
- package/dist/index.d.ts +12 -83
- package/dist/index.mjs +71 -204
- 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.4.9
|
|
3
|
+
* @license @wistia/ui v0.4.9
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -75,8 +75,6 @@ __export(index_exports, {
|
|
|
75
75
|
RadioGroup: () => RadioGroup,
|
|
76
76
|
RadioMenuItem: () => RadioMenuItem,
|
|
77
77
|
ScreenReaderOnly: () => ScreenReaderOnly,
|
|
78
|
-
SegmentedControl: () => SegmentedControl,
|
|
79
|
-
SegmentedControlItem: () => SegmentedControlItem,
|
|
80
78
|
Select: () => Select,
|
|
81
79
|
SelectOption: () => SelectOption,
|
|
82
80
|
SelectOptionGroup: () => SelectOptionGroup,
|
|
@@ -6044,7 +6042,7 @@ var StyledBadge = import_styled_components22.default.div`
|
|
|
6044
6042
|
padding: var(--wui-space-01) var(--wui-space-02);
|
|
6045
6043
|
width: fit-content;
|
|
6046
6044
|
|
|
6047
|
-
/*
|
|
6045
|
+
/* TODO should these be a token? */
|
|
6048
6046
|
svg {
|
|
6049
6047
|
height: 12px;
|
|
6050
6048
|
width: 12px;
|
|
@@ -8458,143 +8456,12 @@ var Radio = (0, import_react39.forwardRef)(
|
|
|
8458
8456
|
);
|
|
8459
8457
|
Radio.displayName = "Radio";
|
|
8460
8458
|
|
|
8461
|
-
// src/components/
|
|
8459
|
+
// src/components/Tag/Tag.tsx
|
|
8462
8460
|
var import_react40 = require("react");
|
|
8463
8461
|
var import_styled_components51 = __toESM(require("styled-components"));
|
|
8464
|
-
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
8465
8462
|
var import_type_guards30 = require("@wistia/type-guards");
|
|
8466
8463
|
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
8467
|
-
var
|
|
8468
|
-
display: inline-flex;
|
|
8469
|
-
background-color: var(--wui-color-bg-surface-secondary);
|
|
8470
|
-
border-radius: var(--wui-border-radius-rounded);
|
|
8471
|
-
border: 2px solid var(--wui-color-bg-surface-secondary);
|
|
8472
|
-
gap: var(--wui-space-01);
|
|
8473
|
-
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
8474
|
-
`;
|
|
8475
|
-
var SegmentedControl = (0, import_react40.forwardRef)(
|
|
8476
|
-
({
|
|
8477
|
-
children,
|
|
8478
|
-
disabled = false,
|
|
8479
|
-
fullWidth = false,
|
|
8480
|
-
selectedValue,
|
|
8481
|
-
onSelectedValueChange,
|
|
8482
|
-
...props
|
|
8483
|
-
}, ref) => {
|
|
8484
|
-
if ((0, import_type_guards30.isNil)(children)) {
|
|
8485
|
-
return null;
|
|
8486
|
-
}
|
|
8487
|
-
return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
|
|
8488
|
-
StyledSegmentedControl,
|
|
8489
|
-
{
|
|
8490
|
-
ref,
|
|
8491
|
-
$fullWidth: fullWidth,
|
|
8492
|
-
disabled,
|
|
8493
|
-
loop: true,
|
|
8494
|
-
onValueChange: onSelectedValueChange,
|
|
8495
|
-
rovingFocus: true,
|
|
8496
|
-
type: "single",
|
|
8497
|
-
value: selectedValue,
|
|
8498
|
-
...props,
|
|
8499
|
-
children
|
|
8500
|
-
}
|
|
8501
|
-
);
|
|
8502
|
-
}
|
|
8503
|
-
);
|
|
8504
|
-
SegmentedControl.displayName = "SegmentedControl";
|
|
8505
|
-
|
|
8506
|
-
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
8507
|
-
var import_react41 = require("react");
|
|
8508
|
-
var import_styled_components52 = __toESM(require("styled-components"));
|
|
8509
|
-
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
8510
|
-
var import_type_guards31 = require("@wistia/type-guards");
|
|
8511
|
-
var import_jsx_runtime204 = require("react/jsx-runtime");
|
|
8512
|
-
var StyledSegmentedControlItem = (0, import_styled_components52.default)(import_react_toggle_group2.Item)`
|
|
8513
|
-
all: unset; /* ToggleGroupItem is a button element */
|
|
8514
|
-
align-items: center;
|
|
8515
|
-
border-radius: var(--wui-border-radius-rounded);
|
|
8516
|
-
color: var(--wui-color-text-secondary);
|
|
8517
|
-
cursor: pointer;
|
|
8518
|
-
display: flex;
|
|
8519
|
-
flex-grow: 1;
|
|
8520
|
-
flex-shrink: 1;
|
|
8521
|
-
font-size: var(--wui-typography-label-3-size);
|
|
8522
|
-
justify-content: center;
|
|
8523
|
-
padding: 6px 8px;
|
|
8524
|
-
user-select: none;
|
|
8525
|
-
|
|
8526
|
-
/* Icon component */
|
|
8527
|
-
svg {
|
|
8528
|
-
height: 16px;
|
|
8529
|
-
width: 16px;
|
|
8530
|
-
|
|
8531
|
-
/* add right margin if there's a label and an icon */
|
|
8532
|
-
${({ $hasLabel }) => $hasLabel ? "margin-right: var(--wui-space-01)" : ""}
|
|
8533
|
-
}
|
|
8534
|
-
|
|
8535
|
-
&:hover {
|
|
8536
|
-
background-color: var(--wui-color-bg-surface-secondary-hover);
|
|
8537
|
-
}
|
|
8538
|
-
|
|
8539
|
-
&:focus-visible {
|
|
8540
|
-
outline: 2px solid var(--wui-color-focus-ring);
|
|
8541
|
-
}
|
|
8542
|
-
|
|
8543
|
-
&[data-state='on'] {
|
|
8544
|
-
background-color: var(--wui-color-bg-fill-white);
|
|
8545
|
-
color: var(--wui-color-text-selected);
|
|
8546
|
-
cursor: default;
|
|
8547
|
-
}
|
|
8548
|
-
|
|
8549
|
-
&:focus-visible,
|
|
8550
|
-
&[data-state='on'] {
|
|
8551
|
-
svg path {
|
|
8552
|
-
fill: var(--wui-color-focus-ring);
|
|
8553
|
-
}
|
|
8554
|
-
}
|
|
8555
|
-
|
|
8556
|
-
&[data-disabled] {
|
|
8557
|
-
cursor: not-allowed;
|
|
8558
|
-
|
|
8559
|
-
&:hover {
|
|
8560
|
-
background-color: inherit;
|
|
8561
|
-
}
|
|
8562
|
-
}
|
|
8563
|
-
`;
|
|
8564
|
-
var SegmentedControlItem = (0, import_react41.forwardRef)(
|
|
8565
|
-
({ disabled, icon, label, "aria-label": ariaLabel, value }, ref) => {
|
|
8566
|
-
const handleClick = (event) => {
|
|
8567
|
-
const target = event.target;
|
|
8568
|
-
const { state } = target.dataset;
|
|
8569
|
-
if (state === "on") {
|
|
8570
|
-
event.preventDefault();
|
|
8571
|
-
}
|
|
8572
|
-
};
|
|
8573
|
-
return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
|
|
8574
|
-
StyledSegmentedControlItem,
|
|
8575
|
-
{
|
|
8576
|
-
ref,
|
|
8577
|
-
$hasLabel: (0, import_type_guards31.isNotNil)(label),
|
|
8578
|
-
"aria-label": (0, import_type_guards31.isNotNil)(label) ? void 0 : ariaLabel,
|
|
8579
|
-
disabled,
|
|
8580
|
-
onClick: handleClick,
|
|
8581
|
-
value,
|
|
8582
|
-
children: [
|
|
8583
|
-
icon,
|
|
8584
|
-
label
|
|
8585
|
-
]
|
|
8586
|
-
}
|
|
8587
|
-
);
|
|
8588
|
-
}
|
|
8589
|
-
);
|
|
8590
|
-
SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
8591
|
-
|
|
8592
|
-
// src/components/Tag/Tag.tsx
|
|
8593
|
-
var import_react42 = require("react");
|
|
8594
|
-
var import_styled_components53 = __toESM(require("styled-components"));
|
|
8595
|
-
var import_type_guards32 = require("@wistia/type-guards");
|
|
8596
|
-
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
8597
|
-
var TagLabel = import_styled_components53.default.a`
|
|
8464
|
+
var TagLabel = import_styled_components51.default.a`
|
|
8598
8465
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8599
8466
|
font-size: var(--wui-typography-label-4-size);
|
|
8600
8467
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -8622,14 +8489,14 @@ var TagLabel = import_styled_components53.default.a`
|
|
|
8622
8489
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
8623
8490
|
}
|
|
8624
8491
|
`;
|
|
8625
|
-
var TagDivider =
|
|
8492
|
+
var TagDivider = import_styled_components51.default.div`
|
|
8626
8493
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8627
8494
|
border-left: 1px solid var(--wui-color-border);
|
|
8628
8495
|
display: flex;
|
|
8629
8496
|
height: 14px;
|
|
8630
8497
|
width: 1px;
|
|
8631
8498
|
`;
|
|
8632
|
-
var StyledRemoveButton =
|
|
8499
|
+
var StyledRemoveButton = import_styled_components51.default.button`
|
|
8633
8500
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8634
8501
|
all: unset;
|
|
8635
8502
|
cursor: pointer;
|
|
@@ -8657,7 +8524,7 @@ var StyledRemoveButton = import_styled_components53.default.button`
|
|
|
8657
8524
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
8658
8525
|
}
|
|
8659
8526
|
`;
|
|
8660
|
-
var StyledTag =
|
|
8527
|
+
var StyledTag = import_styled_components51.default.div`
|
|
8661
8528
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8662
8529
|
align-items: center;
|
|
8663
8530
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -8666,47 +8533,47 @@ var StyledTag = import_styled_components53.default.div`
|
|
|
8666
8533
|
overflow: hidden;
|
|
8667
8534
|
`;
|
|
8668
8535
|
var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
8669
|
-
if ((0,
|
|
8536
|
+
if ((0, import_type_guards30.isNil)(onClickRemove)) {
|
|
8670
8537
|
return null;
|
|
8671
8538
|
}
|
|
8672
|
-
if ((0,
|
|
8539
|
+
if ((0, import_type_guards30.isNil)(onClickRemoveLabel)) {
|
|
8673
8540
|
throw new Error(
|
|
8674
8541
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
8675
8542
|
);
|
|
8676
8543
|
}
|
|
8677
|
-
return /* @__PURE__ */ (0,
|
|
8678
|
-
/* @__PURE__ */ (0,
|
|
8679
|
-
/* @__PURE__ */ (0,
|
|
8544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(import_jsx_runtime203.Fragment, { children: [
|
|
8545
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsx)(TagDivider, { $colorScheme: colorScheme }),
|
|
8546
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
|
|
8680
8547
|
StyledRemoveButton,
|
|
8681
8548
|
{
|
|
8682
8549
|
$colorScheme: colorScheme,
|
|
8683
8550
|
onClick: onClickRemove,
|
|
8684
8551
|
type: "button",
|
|
8685
8552
|
children: [
|
|
8686
|
-
/* @__PURE__ */ (0,
|
|
8553
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
|
|
8687
8554
|
Icon,
|
|
8688
8555
|
{
|
|
8689
8556
|
size: "sm",
|
|
8690
8557
|
type: "close"
|
|
8691
8558
|
}
|
|
8692
8559
|
),
|
|
8693
|
-
/* @__PURE__ */ (0,
|
|
8560
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
8694
8561
|
]
|
|
8695
8562
|
}
|
|
8696
8563
|
)
|
|
8697
8564
|
] });
|
|
8698
8565
|
};
|
|
8699
|
-
var Tag = (0,
|
|
8566
|
+
var Tag = (0, import_react40.forwardRef)(
|
|
8700
8567
|
({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
|
|
8701
|
-
const labelProps = (0,
|
|
8702
|
-
return /* @__PURE__ */ (0,
|
|
8568
|
+
const labelProps = (0, import_type_guards30.isNotNil)(href) && (0, import_type_guards30.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
|
|
8569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
|
|
8703
8570
|
StyledTag,
|
|
8704
8571
|
{
|
|
8705
8572
|
ref,
|
|
8706
8573
|
$colorScheme: colorScheme,
|
|
8707
8574
|
...otherProps,
|
|
8708
8575
|
children: [
|
|
8709
|
-
/* @__PURE__ */ (0,
|
|
8576
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
|
|
8710
8577
|
TagLabel,
|
|
8711
8578
|
{
|
|
8712
8579
|
...labelProps,
|
|
@@ -8714,7 +8581,7 @@ var Tag = (0, import_react42.forwardRef)(
|
|
|
8714
8581
|
children: label
|
|
8715
8582
|
}
|
|
8716
8583
|
),
|
|
8717
|
-
/* @__PURE__ */ (0,
|
|
8584
|
+
/* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
|
|
8718
8585
|
RemoveButton,
|
|
8719
8586
|
{
|
|
8720
8587
|
colorScheme,
|
|
@@ -8731,16 +8598,16 @@ Tag.displayName = "Tag";
|
|
|
8731
8598
|
|
|
8732
8599
|
// src/components/Tooltip/Tooltip.tsx
|
|
8733
8600
|
var import_react_tooltip2 = require("@radix-ui/react-tooltip");
|
|
8734
|
-
var
|
|
8735
|
-
var
|
|
8736
|
-
var CompactTooltipStyles =
|
|
8601
|
+
var import_styled_components52 = __toESM(require("styled-components"));
|
|
8602
|
+
var import_jsx_runtime204 = require("react/jsx-runtime");
|
|
8603
|
+
var CompactTooltipStyles = import_styled_components52.css`
|
|
8737
8604
|
--tooltip-font-size: var(--wui-typography-label-4-size);
|
|
8738
8605
|
--tooltip-line-height: var(--wui-typography-label-4-line-height);
|
|
8739
8606
|
--tooltip-font-weight: var(--wui-typography-label-4-weight);
|
|
8740
8607
|
--tooltip-horizontal-padding: var(--wui-space-02);
|
|
8741
8608
|
--tooltip-vertical-padding: var(--wui-space-03);
|
|
8742
8609
|
`;
|
|
8743
|
-
var StyledContent = (0,
|
|
8610
|
+
var StyledContent = (0, import_styled_components52.default)(import_react_tooltip2.Content)`
|
|
8744
8611
|
--tooltip-font-family: var(--wui-typography-family-default);
|
|
8745
8612
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
8746
8613
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
@@ -8798,14 +8665,14 @@ var Tooltip = ({
|
|
|
8798
8665
|
if (forceOpen === true) {
|
|
8799
8666
|
rootProps.open = true;
|
|
8800
8667
|
}
|
|
8801
|
-
return /* @__PURE__ */ (0,
|
|
8668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
|
|
8802
8669
|
import_react_tooltip2.Root,
|
|
8803
8670
|
{
|
|
8804
8671
|
delayDuration: delay,
|
|
8805
8672
|
...rootProps,
|
|
8806
8673
|
children: [
|
|
8807
|
-
/* @__PURE__ */ (0,
|
|
8808
|
-
/* @__PURE__ */ (0,
|
|
8674
|
+
/* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
|
|
8675
|
+
/* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
|
|
8809
8676
|
StyledContent,
|
|
8810
8677
|
{
|
|
8811
8678
|
$compact: compact,
|
|
@@ -8813,7 +8680,7 @@ var Tooltip = ({
|
|
|
8813
8680
|
sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
|
|
8814
8681
|
children: [
|
|
8815
8682
|
content,
|
|
8816
|
-
!hideArrow ? /* @__PURE__ */ (0,
|
|
8683
|
+
!hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
|
|
8817
8684
|
"svg",
|
|
8818
8685
|
{
|
|
8819
8686
|
fill: "var(--tooltip-bg)",
|
|
@@ -8822,7 +8689,7 @@ var Tooltip = ({
|
|
|
8822
8689
|
viewBox: "0 0 12 8",
|
|
8823
8690
|
width: "12",
|
|
8824
8691
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8825
|
-
children: /* @__PURE__ */ (0,
|
|
8692
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
|
|
8826
8693
|
}
|
|
8827
8694
|
) }) : null
|
|
8828
8695
|
]
|
|
@@ -8835,26 +8702,26 @@ var Tooltip = ({
|
|
|
8835
8702
|
Tooltip.displayName = "Tooltip";
|
|
8836
8703
|
|
|
8837
8704
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
8838
|
-
var
|
|
8839
|
-
var
|
|
8840
|
-
var
|
|
8705
|
+
var import_styled_components53 = __toESM(require("styled-components"));
|
|
8706
|
+
var import_type_guards31 = require("@wistia/type-guards");
|
|
8707
|
+
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
8841
8708
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
8842
8709
|
if (iconOnly) {
|
|
8843
|
-
return /* @__PURE__ */ (0,
|
|
8710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
|
|
8844
8711
|
"g",
|
|
8845
8712
|
{
|
|
8846
8713
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
8847
8714
|
fill: brandmarkColor,
|
|
8848
|
-
children: /* @__PURE__ */ (0,
|
|
8715
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime205.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" })
|
|
8849
8716
|
}
|
|
8850
8717
|
);
|
|
8851
8718
|
}
|
|
8852
|
-
return /* @__PURE__ */ (0,
|
|
8719
|
+
return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
|
|
8853
8720
|
"g",
|
|
8854
8721
|
{
|
|
8855
8722
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
8856
8723
|
fill: brandmarkColor,
|
|
8857
|
-
children: /* @__PURE__ */ (0,
|
|
8724
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime205.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" })
|
|
8858
8725
|
}
|
|
8859
8726
|
);
|
|
8860
8727
|
};
|
|
@@ -8862,12 +8729,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
8862
8729
|
if (iconOnly) {
|
|
8863
8730
|
return null;
|
|
8864
8731
|
}
|
|
8865
|
-
return /* @__PURE__ */ (0,
|
|
8732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
|
|
8866
8733
|
"g",
|
|
8867
8734
|
{
|
|
8868
8735
|
"data-testid": "ui-wistia-logo-logotype",
|
|
8869
8736
|
fill: logotypeColor,
|
|
8870
|
-
children: /* @__PURE__ */ (0,
|
|
8737
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime205.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" })
|
|
8871
8738
|
}
|
|
8872
8739
|
);
|
|
8873
8740
|
};
|
|
@@ -8877,7 +8744,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
8877
8744
|
}
|
|
8878
8745
|
return "0 0 144 31.47";
|
|
8879
8746
|
};
|
|
8880
|
-
var WistiaLogoComponent =
|
|
8747
|
+
var WistiaLogoComponent = import_styled_components53.default.svg`
|
|
8881
8748
|
height: ${({ height }) => `${height}px`};
|
|
8882
8749
|
|
|
8883
8750
|
/* ensure it will always fit on mobile */
|
|
@@ -8919,7 +8786,7 @@ var WistiaLogo = ({
|
|
|
8919
8786
|
};
|
|
8920
8787
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
8921
8788
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
8922
|
-
const Logo = /* @__PURE__ */ (0,
|
|
8789
|
+
const Logo = /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
|
|
8923
8790
|
WistiaLogoComponent,
|
|
8924
8791
|
{
|
|
8925
8792
|
$hoverColor: hoverColor,
|
|
@@ -8929,23 +8796,23 @@ var WistiaLogo = ({
|
|
|
8929
8796
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8930
8797
|
...otherProps,
|
|
8931
8798
|
children: [
|
|
8932
|
-
/* @__PURE__ */ (0,
|
|
8933
|
-
(0,
|
|
8799
|
+
/* @__PURE__ */ (0, import_jsx_runtime205.jsx)("title", { children: title }),
|
|
8800
|
+
(0, import_type_guards31.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("desc", { children: description }) : null,
|
|
8934
8801
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
8935
8802
|
renderLogotype(logotypeColor, iconOnly)
|
|
8936
8803
|
]
|
|
8937
8804
|
}
|
|
8938
8805
|
);
|
|
8939
|
-
return href !== void 0 ? /* @__PURE__ */ (0,
|
|
8806
|
+
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
|
|
8940
8807
|
};
|
|
8941
8808
|
WistiaLogo.displayName = "WistiaLogo";
|
|
8942
8809
|
|
|
8943
8810
|
// src/components/Select/Select.tsx
|
|
8944
8811
|
var import_react_select = require("@radix-ui/react-select");
|
|
8945
|
-
var
|
|
8946
|
-
var
|
|
8947
|
-
var
|
|
8948
|
-
var StyledTrigger = (0,
|
|
8812
|
+
var import_react41 = require("react");
|
|
8813
|
+
var import_styled_components54 = __toESM(require("styled-components"));
|
|
8814
|
+
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
8815
|
+
var StyledTrigger = (0, import_styled_components54.default)(import_react_select.Trigger)`
|
|
8949
8816
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8950
8817
|
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
8951
8818
|
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -8986,7 +8853,7 @@ var StyledTrigger = (0, import_styled_components56.default)(import_react_select.
|
|
|
8986
8853
|
background-color: var(--wui-color-bg-surface-disabled);
|
|
8987
8854
|
}
|
|
8988
8855
|
`;
|
|
8989
|
-
var StyledContent2 = (0,
|
|
8856
|
+
var StyledContent2 = (0, import_styled_components54.default)(import_react_select.Content)`
|
|
8990
8857
|
--wui-select-content-border: var(--wui-color-border);
|
|
8991
8858
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
8992
8859
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -9002,7 +8869,7 @@ var StyledContent2 = (0, import_styled_components56.default)(import_react_select
|
|
|
9002
8869
|
padding: var(--wui-select-option-padding);
|
|
9003
8870
|
min-width: 200px;
|
|
9004
8871
|
`;
|
|
9005
|
-
var Select = (0,
|
|
8872
|
+
var Select = (0, import_react41.forwardRef)(
|
|
9006
8873
|
({
|
|
9007
8874
|
colorScheme = "inherit",
|
|
9008
8875
|
children,
|
|
@@ -9012,13 +8879,13 @@ var Select = (0, import_react43.forwardRef)(
|
|
|
9012
8879
|
...props
|
|
9013
8880
|
}, forwardedRef) => {
|
|
9014
8881
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
9015
|
-
return /* @__PURE__ */ (0,
|
|
8882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
|
|
9016
8883
|
import_react_select.Root,
|
|
9017
8884
|
{
|
|
9018
8885
|
...props,
|
|
9019
8886
|
onValueChange: onChange,
|
|
9020
8887
|
children: [
|
|
9021
|
-
/* @__PURE__ */ (0,
|
|
8888
|
+
/* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
|
|
9022
8889
|
StyledTrigger,
|
|
9023
8890
|
{
|
|
9024
8891
|
ref: forwardedRef,
|
|
@@ -9026,8 +8893,8 @@ var Select = (0, import_react43.forwardRef)(
|
|
|
9026
8893
|
$fullWidth: responsiveFullWidth,
|
|
9027
8894
|
...props,
|
|
9028
8895
|
children: [
|
|
9029
|
-
/* @__PURE__ */ (0,
|
|
9030
|
-
/* @__PURE__ */ (0,
|
|
8896
|
+
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
|
|
8897
|
+
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
|
|
9031
8898
|
Icon,
|
|
9032
8899
|
{
|
|
9033
8900
|
size: "md",
|
|
@@ -9037,10 +8904,10 @@ var Select = (0, import_react43.forwardRef)(
|
|
|
9037
8904
|
]
|
|
9038
8905
|
}
|
|
9039
8906
|
),
|
|
9040
|
-
/* @__PURE__ */ (0,
|
|
9041
|
-
/* @__PURE__ */ (0,
|
|
9042
|
-
/* @__PURE__ */ (0,
|
|
9043
|
-
/* @__PURE__ */ (0,
|
|
8907
|
+
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
|
|
8908
|
+
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
|
|
8909
|
+
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
|
|
8910
|
+
/* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
|
|
9044
8911
|
] }) })
|
|
9045
8912
|
]
|
|
9046
8913
|
}
|
|
@@ -9051,10 +8918,10 @@ Select.displayName = "Select";
|
|
|
9051
8918
|
|
|
9052
8919
|
// src/components/Select/SelectOption.tsx
|
|
9053
8920
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
9054
|
-
var
|
|
9055
|
-
var
|
|
9056
|
-
var
|
|
9057
|
-
var StyledItem = (0,
|
|
8921
|
+
var import_react42 = require("react");
|
|
8922
|
+
var import_styled_components55 = __toESM(require("styled-components"));
|
|
8923
|
+
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
8924
|
+
var StyledItem = (0, import_styled_components55.default)(import_react_select2.Item)`
|
|
9058
8925
|
${variantStyleMap2.body3};
|
|
9059
8926
|
display: flex;
|
|
9060
8927
|
padding: var(--wui-select-option-padding);
|
|
@@ -9077,25 +8944,25 @@ var StyledItem = (0, import_styled_components57.default)(import_react_select2.It
|
|
|
9077
8944
|
background-color: transparent;
|
|
9078
8945
|
}
|
|
9079
8946
|
`;
|
|
9080
|
-
var StyledIconContainer =
|
|
8947
|
+
var StyledIconContainer = import_styled_components55.default.span`
|
|
9081
8948
|
width: 12px;
|
|
9082
8949
|
`;
|
|
9083
|
-
var SelectOption = (0,
|
|
8950
|
+
var SelectOption = (0, import_react42.forwardRef)(
|
|
9084
8951
|
({ children, ...props }, forwardedRef) => {
|
|
9085
|
-
return /* @__PURE__ */ (0,
|
|
8952
|
+
return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
|
|
9086
8953
|
StyledItem,
|
|
9087
8954
|
{
|
|
9088
8955
|
...props,
|
|
9089
8956
|
ref: forwardedRef,
|
|
9090
8957
|
children: [
|
|
9091
|
-
/* @__PURE__ */ (0,
|
|
8958
|
+
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
|
|
9092
8959
|
Icon,
|
|
9093
8960
|
{
|
|
9094
8961
|
size: "sm",
|
|
9095
8962
|
type: "checkmark"
|
|
9096
8963
|
}
|
|
9097
8964
|
) }) }),
|
|
9098
|
-
/* @__PURE__ */ (0,
|
|
8965
|
+
/* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemText, { children })
|
|
9099
8966
|
]
|
|
9100
8967
|
}
|
|
9101
8968
|
);
|
|
@@ -9105,14 +8972,14 @@ SelectOption.displayName = "Option";
|
|
|
9105
8972
|
|
|
9106
8973
|
// src/components/Select/SelectOptionGroup.tsx
|
|
9107
8974
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
9108
|
-
var
|
|
9109
|
-
var
|
|
9110
|
-
var StyledLabel3 = (0,
|
|
8975
|
+
var import_styled_components56 = __toESM(require("styled-components"));
|
|
8976
|
+
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8977
|
+
var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
|
|
9111
8978
|
padding: var(--wui-select-option-padding);
|
|
9112
8979
|
`;
|
|
9113
8980
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
9114
|
-
return /* @__PURE__ */ (0,
|
|
9115
|
-
/* @__PURE__ */ (0,
|
|
8981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
8982
|
+
/* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
|
|
9116
8983
|
Text,
|
|
9117
8984
|
{
|
|
9118
8985
|
prominence: "secondary",
|
|
@@ -9161,8 +9028,6 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
9161
9028
|
RadioGroup,
|
|
9162
9029
|
RadioMenuItem,
|
|
9163
9030
|
ScreenReaderOnly,
|
|
9164
|
-
SegmentedControl,
|
|
9165
|
-
SegmentedControlItem,
|
|
9166
9031
|
Select,
|
|
9167
9032
|
SelectOption,
|
|
9168
9033
|
SelectOptionGroup,
|