@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.mjs
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
|
*
|
|
@@ -5948,7 +5948,7 @@ var StyledBadge = styled9.div`
|
|
|
5948
5948
|
padding: var(--wui-space-01) var(--wui-space-02);
|
|
5949
5949
|
width: fit-content;
|
|
5950
5950
|
|
|
5951
|
-
/*
|
|
5951
|
+
/* TODO should these be a token? */
|
|
5952
5952
|
svg {
|
|
5953
5953
|
height: 12px;
|
|
5954
5954
|
width: 12px;
|
|
@@ -8381,143 +8381,12 @@ var Radio = forwardRef17(
|
|
|
8381
8381
|
);
|
|
8382
8382
|
Radio.displayName = "Radio";
|
|
8383
8383
|
|
|
8384
|
-
// src/components/
|
|
8384
|
+
// src/components/Tag/Tag.tsx
|
|
8385
8385
|
import { forwardRef as forwardRef18 } from "react";
|
|
8386
8386
|
import styled38 from "styled-components";
|
|
8387
|
-
import {
|
|
8388
|
-
import {
|
|
8389
|
-
|
|
8390
|
-
var StyledSegmentedControl = styled38(ToggleGroupRoot)`
|
|
8391
|
-
display: inline-flex;
|
|
8392
|
-
background-color: var(--wui-color-bg-surface-secondary);
|
|
8393
|
-
border-radius: var(--wui-border-radius-rounded);
|
|
8394
|
-
border: 2px solid var(--wui-color-bg-surface-secondary);
|
|
8395
|
-
gap: var(--wui-space-01);
|
|
8396
|
-
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
8397
|
-
`;
|
|
8398
|
-
var SegmentedControl = forwardRef18(
|
|
8399
|
-
({
|
|
8400
|
-
children,
|
|
8401
|
-
disabled = false,
|
|
8402
|
-
fullWidth = false,
|
|
8403
|
-
selectedValue,
|
|
8404
|
-
onSelectedValueChange,
|
|
8405
|
-
...props
|
|
8406
|
-
}, ref) => {
|
|
8407
|
-
if (isNil11(children)) {
|
|
8408
|
-
return null;
|
|
8409
|
-
}
|
|
8410
|
-
return /* @__PURE__ */ jsx203(
|
|
8411
|
-
StyledSegmentedControl,
|
|
8412
|
-
{
|
|
8413
|
-
ref,
|
|
8414
|
-
$fullWidth: fullWidth,
|
|
8415
|
-
disabled,
|
|
8416
|
-
loop: true,
|
|
8417
|
-
onValueChange: onSelectedValueChange,
|
|
8418
|
-
rovingFocus: true,
|
|
8419
|
-
type: "single",
|
|
8420
|
-
value: selectedValue,
|
|
8421
|
-
...props,
|
|
8422
|
-
children
|
|
8423
|
-
}
|
|
8424
|
-
);
|
|
8425
|
-
}
|
|
8426
|
-
);
|
|
8427
|
-
SegmentedControl.displayName = "SegmentedControl";
|
|
8428
|
-
|
|
8429
|
-
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
8430
|
-
import { forwardRef as forwardRef19 } from "react";
|
|
8431
|
-
import styled39 from "styled-components";
|
|
8432
|
-
import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
|
|
8433
|
-
import { isNotNil as isNotNil16 } from "@wistia/type-guards";
|
|
8434
|
-
import { jsxs as jsxs23 } from "react/jsx-runtime";
|
|
8435
|
-
var StyledSegmentedControlItem = styled39(ToggleGroupItem)`
|
|
8436
|
-
all: unset; /* ToggleGroupItem is a button element */
|
|
8437
|
-
align-items: center;
|
|
8438
|
-
border-radius: var(--wui-border-radius-rounded);
|
|
8439
|
-
color: var(--wui-color-text-secondary);
|
|
8440
|
-
cursor: pointer;
|
|
8441
|
-
display: flex;
|
|
8442
|
-
flex-grow: 1;
|
|
8443
|
-
flex-shrink: 1;
|
|
8444
|
-
font-size: var(--wui-typography-label-3-size);
|
|
8445
|
-
justify-content: center;
|
|
8446
|
-
padding: 6px 8px;
|
|
8447
|
-
user-select: none;
|
|
8448
|
-
|
|
8449
|
-
/* Icon component */
|
|
8450
|
-
svg {
|
|
8451
|
-
height: 16px;
|
|
8452
|
-
width: 16px;
|
|
8453
|
-
|
|
8454
|
-
/* add right margin if there's a label and an icon */
|
|
8455
|
-
${({ $hasLabel }) => $hasLabel ? "margin-right: var(--wui-space-01)" : ""}
|
|
8456
|
-
}
|
|
8457
|
-
|
|
8458
|
-
&:hover {
|
|
8459
|
-
background-color: var(--wui-color-bg-surface-secondary-hover);
|
|
8460
|
-
}
|
|
8461
|
-
|
|
8462
|
-
&:focus-visible {
|
|
8463
|
-
outline: 2px solid var(--wui-color-focus-ring);
|
|
8464
|
-
}
|
|
8465
|
-
|
|
8466
|
-
&[data-state='on'] {
|
|
8467
|
-
background-color: var(--wui-color-bg-fill-white);
|
|
8468
|
-
color: var(--wui-color-text-selected);
|
|
8469
|
-
cursor: default;
|
|
8470
|
-
}
|
|
8471
|
-
|
|
8472
|
-
&:focus-visible,
|
|
8473
|
-
&[data-state='on'] {
|
|
8474
|
-
svg path {
|
|
8475
|
-
fill: var(--wui-color-focus-ring);
|
|
8476
|
-
}
|
|
8477
|
-
}
|
|
8478
|
-
|
|
8479
|
-
&[data-disabled] {
|
|
8480
|
-
cursor: not-allowed;
|
|
8481
|
-
|
|
8482
|
-
&:hover {
|
|
8483
|
-
background-color: inherit;
|
|
8484
|
-
}
|
|
8485
|
-
}
|
|
8486
|
-
`;
|
|
8487
|
-
var SegmentedControlItem = forwardRef19(
|
|
8488
|
-
({ disabled, icon, label, "aria-label": ariaLabel, value }, ref) => {
|
|
8489
|
-
const handleClick = (event) => {
|
|
8490
|
-
const target = event.target;
|
|
8491
|
-
const { state } = target.dataset;
|
|
8492
|
-
if (state === "on") {
|
|
8493
|
-
event.preventDefault();
|
|
8494
|
-
}
|
|
8495
|
-
};
|
|
8496
|
-
return /* @__PURE__ */ jsxs23(
|
|
8497
|
-
StyledSegmentedControlItem,
|
|
8498
|
-
{
|
|
8499
|
-
ref,
|
|
8500
|
-
$hasLabel: isNotNil16(label),
|
|
8501
|
-
"aria-label": isNotNil16(label) ? void 0 : ariaLabel,
|
|
8502
|
-
disabled,
|
|
8503
|
-
onClick: handleClick,
|
|
8504
|
-
value,
|
|
8505
|
-
children: [
|
|
8506
|
-
icon,
|
|
8507
|
-
label
|
|
8508
|
-
]
|
|
8509
|
-
}
|
|
8510
|
-
);
|
|
8511
|
-
}
|
|
8512
|
-
);
|
|
8513
|
-
SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
8514
|
-
|
|
8515
|
-
// src/components/Tag/Tag.tsx
|
|
8516
|
-
import { forwardRef as forwardRef20 } from "react";
|
|
8517
|
-
import styled40 from "styled-components";
|
|
8518
|
-
import { isNil as isNil12, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
|
|
8519
|
-
import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
8520
|
-
var TagLabel = styled40.a`
|
|
8387
|
+
import { isNil as isNil11, isNotNil as isNotNil16, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
|
|
8388
|
+
import { Fragment as Fragment3, jsx as jsx203, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
8389
|
+
var TagLabel = styled38.a`
|
|
8521
8390
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8522
8391
|
font-size: var(--wui-typography-label-4-size);
|
|
8523
8392
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -8545,14 +8414,14 @@ var TagLabel = styled40.a`
|
|
|
8545
8414
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
8546
8415
|
}
|
|
8547
8416
|
`;
|
|
8548
|
-
var TagDivider =
|
|
8417
|
+
var TagDivider = styled38.div`
|
|
8549
8418
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8550
8419
|
border-left: 1px solid var(--wui-color-border);
|
|
8551
8420
|
display: flex;
|
|
8552
8421
|
height: 14px;
|
|
8553
8422
|
width: 1px;
|
|
8554
8423
|
`;
|
|
8555
|
-
var StyledRemoveButton =
|
|
8424
|
+
var StyledRemoveButton = styled38.button`
|
|
8556
8425
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8557
8426
|
all: unset;
|
|
8558
8427
|
cursor: pointer;
|
|
@@ -8580,7 +8449,7 @@ var StyledRemoveButton = styled40.button`
|
|
|
8580
8449
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
8581
8450
|
}
|
|
8582
8451
|
`;
|
|
8583
|
-
var StyledTag =
|
|
8452
|
+
var StyledTag = styled38.div`
|
|
8584
8453
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8585
8454
|
align-items: center;
|
|
8586
8455
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -8589,47 +8458,47 @@ var StyledTag = styled40.div`
|
|
|
8589
8458
|
overflow: hidden;
|
|
8590
8459
|
`;
|
|
8591
8460
|
var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
8592
|
-
if (
|
|
8461
|
+
if (isNil11(onClickRemove)) {
|
|
8593
8462
|
return null;
|
|
8594
8463
|
}
|
|
8595
|
-
if (
|
|
8464
|
+
if (isNil11(onClickRemoveLabel)) {
|
|
8596
8465
|
throw new Error(
|
|
8597
8466
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
8598
8467
|
);
|
|
8599
8468
|
}
|
|
8600
|
-
return /* @__PURE__ */
|
|
8601
|
-
/* @__PURE__ */
|
|
8602
|
-
/* @__PURE__ */
|
|
8469
|
+
return /* @__PURE__ */ jsxs23(Fragment3, { children: [
|
|
8470
|
+
/* @__PURE__ */ jsx203(TagDivider, { $colorScheme: colorScheme }),
|
|
8471
|
+
/* @__PURE__ */ jsxs23(
|
|
8603
8472
|
StyledRemoveButton,
|
|
8604
8473
|
{
|
|
8605
8474
|
$colorScheme: colorScheme,
|
|
8606
8475
|
onClick: onClickRemove,
|
|
8607
8476
|
type: "button",
|
|
8608
8477
|
children: [
|
|
8609
|
-
/* @__PURE__ */
|
|
8478
|
+
/* @__PURE__ */ jsx203(
|
|
8610
8479
|
Icon,
|
|
8611
8480
|
{
|
|
8612
8481
|
size: "sm",
|
|
8613
8482
|
type: "close"
|
|
8614
8483
|
}
|
|
8615
8484
|
),
|
|
8616
|
-
/* @__PURE__ */
|
|
8485
|
+
/* @__PURE__ */ jsx203(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
8617
8486
|
]
|
|
8618
8487
|
}
|
|
8619
8488
|
)
|
|
8620
8489
|
] });
|
|
8621
8490
|
};
|
|
8622
|
-
var Tag =
|
|
8491
|
+
var Tag = forwardRef18(
|
|
8623
8492
|
({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
|
|
8624
|
-
const labelProps =
|
|
8625
|
-
return /* @__PURE__ */
|
|
8493
|
+
const labelProps = isNotNil16(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
|
|
8494
|
+
return /* @__PURE__ */ jsxs23(
|
|
8626
8495
|
StyledTag,
|
|
8627
8496
|
{
|
|
8628
8497
|
ref,
|
|
8629
8498
|
$colorScheme: colorScheme,
|
|
8630
8499
|
...otherProps,
|
|
8631
8500
|
children: [
|
|
8632
|
-
/* @__PURE__ */
|
|
8501
|
+
/* @__PURE__ */ jsx203(
|
|
8633
8502
|
TagLabel,
|
|
8634
8503
|
{
|
|
8635
8504
|
...labelProps,
|
|
@@ -8637,7 +8506,7 @@ var Tag = forwardRef20(
|
|
|
8637
8506
|
children: label
|
|
8638
8507
|
}
|
|
8639
8508
|
),
|
|
8640
|
-
/* @__PURE__ */
|
|
8509
|
+
/* @__PURE__ */ jsx203(
|
|
8641
8510
|
RemoveButton,
|
|
8642
8511
|
{
|
|
8643
8512
|
colorScheme,
|
|
@@ -8660,8 +8529,8 @@ import {
|
|
|
8660
8529
|
Portal,
|
|
8661
8530
|
Arrow
|
|
8662
8531
|
} from "@radix-ui/react-tooltip";
|
|
8663
|
-
import
|
|
8664
|
-
import { jsx as
|
|
8532
|
+
import styled39, { css as css22 } from "styled-components";
|
|
8533
|
+
import { jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
8665
8534
|
var CompactTooltipStyles = css22`
|
|
8666
8535
|
--tooltip-font-size: var(--wui-typography-label-4-size);
|
|
8667
8536
|
--tooltip-line-height: var(--wui-typography-label-4-line-height);
|
|
@@ -8669,7 +8538,7 @@ var CompactTooltipStyles = css22`
|
|
|
8669
8538
|
--tooltip-horizontal-padding: var(--wui-space-02);
|
|
8670
8539
|
--tooltip-vertical-padding: var(--wui-space-03);
|
|
8671
8540
|
`;
|
|
8672
|
-
var StyledContent =
|
|
8541
|
+
var StyledContent = styled39(Content)`
|
|
8673
8542
|
--tooltip-font-family: var(--wui-typography-family-default);
|
|
8674
8543
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
8675
8544
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
@@ -8727,14 +8596,14 @@ var Tooltip = ({
|
|
|
8727
8596
|
if (forceOpen === true) {
|
|
8728
8597
|
rootProps.open = true;
|
|
8729
8598
|
}
|
|
8730
|
-
return /* @__PURE__ */
|
|
8599
|
+
return /* @__PURE__ */ jsxs24(
|
|
8731
8600
|
Root,
|
|
8732
8601
|
{
|
|
8733
8602
|
delayDuration: delay,
|
|
8734
8603
|
...rootProps,
|
|
8735
8604
|
children: [
|
|
8736
|
-
/* @__PURE__ */
|
|
8737
|
-
/* @__PURE__ */
|
|
8605
|
+
/* @__PURE__ */ jsx204(Trigger, { asChild: true, children }),
|
|
8606
|
+
/* @__PURE__ */ jsx204(Portal, { children: /* @__PURE__ */ jsxs24(
|
|
8738
8607
|
StyledContent,
|
|
8739
8608
|
{
|
|
8740
8609
|
$compact: compact,
|
|
@@ -8742,7 +8611,7 @@ var Tooltip = ({
|
|
|
8742
8611
|
sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
|
|
8743
8612
|
children: [
|
|
8744
8613
|
content,
|
|
8745
|
-
!hideArrow ? /* @__PURE__ */
|
|
8614
|
+
!hideArrow ? /* @__PURE__ */ jsx204(Arrow, { asChild: true, children: /* @__PURE__ */ jsx204(
|
|
8746
8615
|
"svg",
|
|
8747
8616
|
{
|
|
8748
8617
|
fill: "var(--tooltip-bg)",
|
|
@@ -8751,7 +8620,7 @@ var Tooltip = ({
|
|
|
8751
8620
|
viewBox: "0 0 12 8",
|
|
8752
8621
|
width: "12",
|
|
8753
8622
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8754
|
-
children: /* @__PURE__ */
|
|
8623
|
+
children: /* @__PURE__ */ jsx204("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" })
|
|
8755
8624
|
}
|
|
8756
8625
|
) }) : null
|
|
8757
8626
|
]
|
|
@@ -8764,26 +8633,26 @@ var Tooltip = ({
|
|
|
8764
8633
|
Tooltip.displayName = "Tooltip";
|
|
8765
8634
|
|
|
8766
8635
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
8767
|
-
import
|
|
8768
|
-
import { isNotNil as
|
|
8769
|
-
import { jsx as
|
|
8636
|
+
import styled40 from "styled-components";
|
|
8637
|
+
import { isNotNil as isNotNil17 } from "@wistia/type-guards";
|
|
8638
|
+
import { jsx as jsx205, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
8770
8639
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
8771
8640
|
if (iconOnly) {
|
|
8772
|
-
return /* @__PURE__ */
|
|
8641
|
+
return /* @__PURE__ */ jsx205(
|
|
8773
8642
|
"g",
|
|
8774
8643
|
{
|
|
8775
8644
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
8776
8645
|
fill: brandmarkColor,
|
|
8777
|
-
children: /* @__PURE__ */
|
|
8646
|
+
children: /* @__PURE__ */ jsx205("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" })
|
|
8778
8647
|
}
|
|
8779
8648
|
);
|
|
8780
8649
|
}
|
|
8781
|
-
return /* @__PURE__ */
|
|
8650
|
+
return /* @__PURE__ */ jsx205(
|
|
8782
8651
|
"g",
|
|
8783
8652
|
{
|
|
8784
8653
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
8785
8654
|
fill: brandmarkColor,
|
|
8786
|
-
children: /* @__PURE__ */
|
|
8655
|
+
children: /* @__PURE__ */ jsx205("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" })
|
|
8787
8656
|
}
|
|
8788
8657
|
);
|
|
8789
8658
|
};
|
|
@@ -8791,12 +8660,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
8791
8660
|
if (iconOnly) {
|
|
8792
8661
|
return null;
|
|
8793
8662
|
}
|
|
8794
|
-
return /* @__PURE__ */
|
|
8663
|
+
return /* @__PURE__ */ jsx205(
|
|
8795
8664
|
"g",
|
|
8796
8665
|
{
|
|
8797
8666
|
"data-testid": "ui-wistia-logo-logotype",
|
|
8798
8667
|
fill: logotypeColor,
|
|
8799
|
-
children: /* @__PURE__ */
|
|
8668
|
+
children: /* @__PURE__ */ jsx205("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" })
|
|
8800
8669
|
}
|
|
8801
8670
|
);
|
|
8802
8671
|
};
|
|
@@ -8806,7 +8675,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
8806
8675
|
}
|
|
8807
8676
|
return "0 0 144 31.47";
|
|
8808
8677
|
};
|
|
8809
|
-
var WistiaLogoComponent =
|
|
8678
|
+
var WistiaLogoComponent = styled40.svg`
|
|
8810
8679
|
height: ${({ height }) => `${height}px`};
|
|
8811
8680
|
|
|
8812
8681
|
/* ensure it will always fit on mobile */
|
|
@@ -8848,7 +8717,7 @@ var WistiaLogo = ({
|
|
|
8848
8717
|
};
|
|
8849
8718
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
8850
8719
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
8851
|
-
const Logo = /* @__PURE__ */
|
|
8720
|
+
const Logo = /* @__PURE__ */ jsxs25(
|
|
8852
8721
|
WistiaLogoComponent,
|
|
8853
8722
|
{
|
|
8854
8723
|
$hoverColor: hoverColor,
|
|
@@ -8858,14 +8727,14 @@ var WistiaLogo = ({
|
|
|
8858
8727
|
xmlns: "http://www.w3.org/2000/svg",
|
|
8859
8728
|
...otherProps,
|
|
8860
8729
|
children: [
|
|
8861
|
-
/* @__PURE__ */
|
|
8862
|
-
|
|
8730
|
+
/* @__PURE__ */ jsx205("title", { children: title }),
|
|
8731
|
+
isNotNil17(description) ? /* @__PURE__ */ jsx205("desc", { children: description }) : null,
|
|
8863
8732
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
8864
8733
|
renderLogotype(logotypeColor, iconOnly)
|
|
8865
8734
|
]
|
|
8866
8735
|
}
|
|
8867
8736
|
);
|
|
8868
|
-
return href !== void 0 ? /* @__PURE__ */
|
|
8737
|
+
return href !== void 0 ? /* @__PURE__ */ jsx205("a", { href, children: Logo }) : Logo;
|
|
8869
8738
|
};
|
|
8870
8739
|
WistiaLogo.displayName = "WistiaLogo";
|
|
8871
8740
|
|
|
@@ -8880,10 +8749,10 @@ import {
|
|
|
8880
8749
|
Value,
|
|
8881
8750
|
ScrollDownButton
|
|
8882
8751
|
} from "@radix-ui/react-select";
|
|
8883
|
-
import { forwardRef as
|
|
8884
|
-
import
|
|
8885
|
-
import { jsx as
|
|
8886
|
-
var StyledTrigger =
|
|
8752
|
+
import { forwardRef as forwardRef19 } from "react";
|
|
8753
|
+
import styled41 from "styled-components";
|
|
8754
|
+
import { jsx as jsx206, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
8755
|
+
var StyledTrigger = styled41(Trigger2)`
|
|
8887
8756
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8888
8757
|
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
8889
8758
|
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -8924,7 +8793,7 @@ var StyledTrigger = styled43(Trigger2)`
|
|
|
8924
8793
|
background-color: var(--wui-color-bg-surface-disabled);
|
|
8925
8794
|
}
|
|
8926
8795
|
`;
|
|
8927
|
-
var StyledContent2 =
|
|
8796
|
+
var StyledContent2 = styled41(Content2)`
|
|
8928
8797
|
--wui-select-content-border: var(--wui-color-border);
|
|
8929
8798
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
8930
8799
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -8940,7 +8809,7 @@ var StyledContent2 = styled43(Content2)`
|
|
|
8940
8809
|
padding: var(--wui-select-option-padding);
|
|
8941
8810
|
min-width: 200px;
|
|
8942
8811
|
`;
|
|
8943
|
-
var Select =
|
|
8812
|
+
var Select = forwardRef19(
|
|
8944
8813
|
({
|
|
8945
8814
|
colorScheme = "inherit",
|
|
8946
8815
|
children,
|
|
@@ -8950,13 +8819,13 @@ var Select = forwardRef21(
|
|
|
8950
8819
|
...props
|
|
8951
8820
|
}, forwardedRef) => {
|
|
8952
8821
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
8953
|
-
return /* @__PURE__ */
|
|
8822
|
+
return /* @__PURE__ */ jsxs26(
|
|
8954
8823
|
Root2,
|
|
8955
8824
|
{
|
|
8956
8825
|
...props,
|
|
8957
8826
|
onValueChange: onChange,
|
|
8958
8827
|
children: [
|
|
8959
|
-
/* @__PURE__ */
|
|
8828
|
+
/* @__PURE__ */ jsxs26(
|
|
8960
8829
|
StyledTrigger,
|
|
8961
8830
|
{
|
|
8962
8831
|
ref: forwardedRef,
|
|
@@ -8964,8 +8833,8 @@ var Select = forwardRef21(
|
|
|
8964
8833
|
$fullWidth: responsiveFullWidth,
|
|
8965
8834
|
...props,
|
|
8966
8835
|
children: [
|
|
8967
|
-
/* @__PURE__ */
|
|
8968
|
-
/* @__PURE__ */
|
|
8836
|
+
/* @__PURE__ */ jsx206(Value, { placeholder }),
|
|
8837
|
+
/* @__PURE__ */ jsx206(
|
|
8969
8838
|
Icon,
|
|
8970
8839
|
{
|
|
8971
8840
|
size: "md",
|
|
@@ -8975,10 +8844,10 @@ var Select = forwardRef21(
|
|
|
8975
8844
|
]
|
|
8976
8845
|
}
|
|
8977
8846
|
),
|
|
8978
|
-
/* @__PURE__ */
|
|
8979
|
-
/* @__PURE__ */
|
|
8980
|
-
/* @__PURE__ */
|
|
8981
|
-
/* @__PURE__ */
|
|
8847
|
+
/* @__PURE__ */ jsx206(Portal2, { children: /* @__PURE__ */ jsxs26(StyledContent2, { position: "popper", children: [
|
|
8848
|
+
/* @__PURE__ */ jsx206(ScrollUpButton, { children: /* @__PURE__ */ jsx206(Icon, { type: "caret-up" }) }),
|
|
8849
|
+
/* @__PURE__ */ jsx206(Viewport, { children }),
|
|
8850
|
+
/* @__PURE__ */ jsx206(ScrollDownButton, { children: /* @__PURE__ */ jsx206(Icon, { type: "caret-down" }) })
|
|
8982
8851
|
] }) })
|
|
8983
8852
|
]
|
|
8984
8853
|
}
|
|
@@ -8989,10 +8858,10 @@ Select.displayName = "Select";
|
|
|
8989
8858
|
|
|
8990
8859
|
// src/components/Select/SelectOption.tsx
|
|
8991
8860
|
import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
|
|
8992
|
-
import { forwardRef as
|
|
8993
|
-
import
|
|
8994
|
-
import { jsx as
|
|
8995
|
-
var StyledItem =
|
|
8861
|
+
import { forwardRef as forwardRef20 } from "react";
|
|
8862
|
+
import styled42 from "styled-components";
|
|
8863
|
+
import { jsx as jsx207, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
8864
|
+
var StyledItem = styled42(Item)`
|
|
8996
8865
|
${variantStyleMap2.body3};
|
|
8997
8866
|
display: flex;
|
|
8998
8867
|
padding: var(--wui-select-option-padding);
|
|
@@ -9015,25 +8884,25 @@ var StyledItem = styled44(Item)`
|
|
|
9015
8884
|
background-color: transparent;
|
|
9016
8885
|
}
|
|
9017
8886
|
`;
|
|
9018
|
-
var StyledIconContainer =
|
|
8887
|
+
var StyledIconContainer = styled42.span`
|
|
9019
8888
|
width: 12px;
|
|
9020
8889
|
`;
|
|
9021
|
-
var SelectOption =
|
|
8890
|
+
var SelectOption = forwardRef20(
|
|
9022
8891
|
({ children, ...props }, forwardedRef) => {
|
|
9023
|
-
return /* @__PURE__ */
|
|
8892
|
+
return /* @__PURE__ */ jsxs27(
|
|
9024
8893
|
StyledItem,
|
|
9025
8894
|
{
|
|
9026
8895
|
...props,
|
|
9027
8896
|
ref: forwardedRef,
|
|
9028
8897
|
children: [
|
|
9029
|
-
/* @__PURE__ */
|
|
8898
|
+
/* @__PURE__ */ jsx207(StyledIconContainer, { children: /* @__PURE__ */ jsx207(ItemIndicator, { children: /* @__PURE__ */ jsx207(
|
|
9030
8899
|
Icon,
|
|
9031
8900
|
{
|
|
9032
8901
|
size: "sm",
|
|
9033
8902
|
type: "checkmark"
|
|
9034
8903
|
}
|
|
9035
8904
|
) }) }),
|
|
9036
|
-
/* @__PURE__ */
|
|
8905
|
+
/* @__PURE__ */ jsx207(ItemText, { children })
|
|
9037
8906
|
]
|
|
9038
8907
|
}
|
|
9039
8908
|
);
|
|
@@ -9043,14 +8912,14 @@ SelectOption.displayName = "Option";
|
|
|
9043
8912
|
|
|
9044
8913
|
// src/components/Select/SelectOptionGroup.tsx
|
|
9045
8914
|
import { Group, Label as Label2 } from "@radix-ui/react-select";
|
|
9046
|
-
import
|
|
9047
|
-
import { jsx as
|
|
9048
|
-
var StyledLabel3 =
|
|
8915
|
+
import styled43 from "styled-components";
|
|
8916
|
+
import { jsx as jsx208, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
8917
|
+
var StyledLabel3 = styled43(Label2)`
|
|
9049
8918
|
padding: var(--wui-select-option-padding);
|
|
9050
8919
|
`;
|
|
9051
8920
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
9052
|
-
return /* @__PURE__ */
|
|
9053
|
-
/* @__PURE__ */
|
|
8921
|
+
return /* @__PURE__ */ jsxs28(Group, { ...props, children: [
|
|
8922
|
+
/* @__PURE__ */ jsx208(StyledLabel3, { children: /* @__PURE__ */ jsx208(
|
|
9054
8923
|
Text,
|
|
9055
8924
|
{
|
|
9056
8925
|
prominence: "secondary",
|
|
@@ -9098,8 +8967,6 @@ export {
|
|
|
9098
8967
|
RadioGroup,
|
|
9099
8968
|
RadioMenuItem,
|
|
9100
8969
|
ScreenReaderOnly,
|
|
9101
|
-
SegmentedControl,
|
|
9102
|
-
SegmentedControlItem,
|
|
9103
8970
|
Select,
|
|
9104
8971
|
SelectOption,
|
|
9105
8972
|
SelectOptionGroup,
|