@wistia/ui 0.12.0 → 0.12.1-beta.3a3a5ac3.e63c6fc
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 +682 -352
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +164 -9
- package/dist/index.d.ts +164 -9
- package/dist/index.mjs +616 -288
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.12.
|
|
3
|
+
* @license @wistia/ui v0.12.1-beta.3a3a5ac3.e63c6fc
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -8961,7 +8961,7 @@ var StyledFieldset = styled25.fieldset`
|
|
|
8961
8961
|
border: 0;
|
|
8962
8962
|
`;
|
|
8963
8963
|
var StyledLegend = styled25.legend`
|
|
8964
|
-
margin-bottom: var(--space-
|
|
8964
|
+
margin-bottom: var(--wui-space-02);
|
|
8965
8965
|
`;
|
|
8966
8966
|
var FormGroup = ({ children, label, ...props }) => {
|
|
8967
8967
|
const ref = useRef7(null);
|
|
@@ -10964,9 +10964,11 @@ var RadioGroup = ({
|
|
|
10964
10964
|
RadioGroup.displayName = "RadioGroup";
|
|
10965
10965
|
|
|
10966
10966
|
// src/components/Grid/Grid.tsx
|
|
10967
|
+
import { forwardRef as forwardRef15 } from "react";
|
|
10967
10968
|
import styled42, { css as css31 } from "styled-components";
|
|
10968
10969
|
import { isRecord as isRecord5 } from "@wistia/type-guards";
|
|
10969
10970
|
import { jsx as jsx238 } from "react/jsx-runtime";
|
|
10971
|
+
var DEFAULT_ELEMENT5 = "div";
|
|
10970
10972
|
var StyledGrid = styled42.div`
|
|
10971
10973
|
--wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
|
|
10972
10974
|
--wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
|
|
@@ -11008,34 +11010,33 @@ var StyledGrid = styled42.div`
|
|
|
11008
11010
|
`;
|
|
11009
11011
|
}}
|
|
11010
11012
|
`;
|
|
11011
|
-
var
|
|
11012
|
-
children,
|
|
11013
|
-
|
|
11014
|
-
|
|
11015
|
-
|
|
11016
|
-
|
|
11017
|
-
|
|
11018
|
-
|
|
11019
|
-
|
|
11020
|
-
|
|
11021
|
-
|
|
11022
|
-
|
|
11023
|
-
|
|
11024
|
-
|
|
11025
|
-
|
|
11026
|
-
|
|
11027
|
-
|
|
11028
|
-
|
|
11029
|
-
|
|
11030
|
-
|
|
11031
|
-
|
|
11032
|
-
|
|
11033
|
-
|
|
11034
|
-
Grid.displayName = "Grid";
|
|
11013
|
+
var GridComponent = forwardRef15(
|
|
11014
|
+
({ children, columns = "auto", minChildWidth = "auto", gap = "space-04", renderAs, ...props }, ref) => {
|
|
11015
|
+
const responsiveGap = useResponsiveProp(gap);
|
|
11016
|
+
const { column, row } = isRecord5(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
|
|
11017
|
+
const responsiveColumns = useResponsiveProp(columns);
|
|
11018
|
+
const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
|
|
11019
|
+
return /* @__PURE__ */ jsx238(
|
|
11020
|
+
StyledGrid,
|
|
11021
|
+
{
|
|
11022
|
+
ref,
|
|
11023
|
+
$columnGap: column,
|
|
11024
|
+
$maxColumns: responsiveColumns,
|
|
11025
|
+
$minChildWidth: responsiveMinChildWidth,
|
|
11026
|
+
$rowGap: row,
|
|
11027
|
+
as: renderAs ?? DEFAULT_ELEMENT5,
|
|
11028
|
+
...props,
|
|
11029
|
+
children
|
|
11030
|
+
}
|
|
11031
|
+
);
|
|
11032
|
+
}
|
|
11033
|
+
);
|
|
11034
|
+
GridComponent.displayName = "Grid";
|
|
11035
|
+
var Grid = makePolymorphic(GridComponent);
|
|
11035
11036
|
|
|
11036
11037
|
// src/components/InputClickToCopy/InputClickToCopy.tsx
|
|
11037
11038
|
import styled43 from "styled-components";
|
|
11038
|
-
import { forwardRef as
|
|
11039
|
+
import { forwardRef as forwardRef16, useEffect as useEffect11, useState as useState15 } from "react";
|
|
11039
11040
|
import { isFunction as isFunction3 } from "@wistia/type-guards";
|
|
11040
11041
|
import { jsx as jsx239 } from "react/jsx-runtime";
|
|
11041
11042
|
var StyledInput2 = styled43(Input)`
|
|
@@ -11048,7 +11049,7 @@ var StyledInput2 = styled43(Input)`
|
|
|
11048
11049
|
}
|
|
11049
11050
|
`;
|
|
11050
11051
|
var COPY_SUCCESS_DURATION = 2e3;
|
|
11051
|
-
var InputClickToCopy =
|
|
11052
|
+
var InputClickToCopy = forwardRef16(
|
|
11052
11053
|
({ value, onCopy, ...props }, ref) => {
|
|
11053
11054
|
const [isCopied, setIsCopied] = useState15(false);
|
|
11054
11055
|
useEffect11(() => {
|
|
@@ -11365,7 +11366,7 @@ var List = ({
|
|
|
11365
11366
|
List.displayName = "List";
|
|
11366
11367
|
|
|
11367
11368
|
// src/components/Menu/Menu.tsx
|
|
11368
|
-
import { forwardRef as
|
|
11369
|
+
import { forwardRef as forwardRef17, useMemo as useMemo10 } from "react";
|
|
11369
11370
|
import styled47, { css as css33, keyframes as keyframes3 } from "styled-components";
|
|
11370
11371
|
import {
|
|
11371
11372
|
DropdownMenu,
|
|
@@ -11470,7 +11471,7 @@ var MenuContent = styled47(DropdownMenuContent)`
|
|
|
11470
11471
|
${menuContentCss}
|
|
11471
11472
|
min-width: var(--radix-dropdown-menu-trigger-width);
|
|
11472
11473
|
`;
|
|
11473
|
-
var Menu =
|
|
11474
|
+
var Menu = forwardRef17(
|
|
11474
11475
|
({
|
|
11475
11476
|
align = "start",
|
|
11476
11477
|
children,
|
|
@@ -11575,7 +11576,7 @@ import {
|
|
|
11575
11576
|
import { isNotNil as isNotNil25 } from "@wistia/type-guards";
|
|
11576
11577
|
|
|
11577
11578
|
// src/components/Menu/MenuItemButton.tsx
|
|
11578
|
-
import { forwardRef as
|
|
11579
|
+
import { forwardRef as forwardRef18 } from "react";
|
|
11579
11580
|
import styled49 from "styled-components";
|
|
11580
11581
|
import { isNotNil as isNotNil24, isNotUndefined as isNotUndefined12 } from "@wistia/type-guards";
|
|
11581
11582
|
import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
@@ -11652,7 +11653,7 @@ var StyledBadgeContainer = styled49.div`
|
|
|
11652
11653
|
font-size: var(--wui-typography-label-4-size);
|
|
11653
11654
|
color: var(--wui-color-text-secondary);
|
|
11654
11655
|
`;
|
|
11655
|
-
var MenuItemButton =
|
|
11656
|
+
var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...props }, ref) => {
|
|
11656
11657
|
let { colorScheme, badge } = props;
|
|
11657
11658
|
if (appearance === "dangerous") {
|
|
11658
11659
|
if (isNotUndefined12(colorScheme)) {
|
|
@@ -11781,10 +11782,10 @@ var SubMenu = ({
|
|
|
11781
11782
|
SubMenu.displayName = "SubMenu";
|
|
11782
11783
|
|
|
11783
11784
|
// src/components/Menu/MenuItem.tsx
|
|
11784
|
-
import { forwardRef as
|
|
11785
|
+
import { forwardRef as forwardRef19 } from "react";
|
|
11785
11786
|
import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
|
|
11786
11787
|
import { jsx as jsx248 } from "react/jsx-runtime";
|
|
11787
|
-
var MenuItem =
|
|
11788
|
+
var MenuItem = forwardRef19(
|
|
11788
11789
|
({ onSelect = () => null, ...props }, ref) => {
|
|
11789
11790
|
return /* @__PURE__ */ jsx248(
|
|
11790
11791
|
DropdownMenuItem2,
|
|
@@ -11941,17 +11942,17 @@ var CheckboxMenuItem = ({
|
|
|
11941
11942
|
CheckboxMenuItem.displayName = "CheckboxMenuItem";
|
|
11942
11943
|
|
|
11943
11944
|
// src/components/Menu/FilterMenu.tsx
|
|
11944
|
-
import { Children as Children7, forwardRef as
|
|
11945
|
+
import { Children as Children7, forwardRef as forwardRef20 } from "react";
|
|
11946
|
+
import { DropdownMenuItem as DropdownMenuItem3 } from "@radix-ui/react-dropdown-menu";
|
|
11945
11947
|
import { jsx as jsx252, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
11946
11948
|
var FilterMenuItem = CheckboxMenuItem;
|
|
11947
|
-
var FilterMenu =
|
|
11949
|
+
var FilterMenu = forwardRef20(
|
|
11948
11950
|
({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
|
|
11949
11951
|
return /* @__PURE__ */ jsxs35(
|
|
11950
11952
|
Menu,
|
|
11951
11953
|
{
|
|
11952
11954
|
...props,
|
|
11953
11955
|
ref,
|
|
11954
|
-
isOpen: true,
|
|
11955
11956
|
children: [
|
|
11956
11957
|
/* @__PURE__ */ jsx252(
|
|
11957
11958
|
Card,
|
|
@@ -11975,7 +11976,6 @@ var FilterMenu = forwardRef19(
|
|
|
11975
11976
|
onChange: (event) => {
|
|
11976
11977
|
onSearchValueChange(event.target.value);
|
|
11977
11978
|
},
|
|
11978
|
-
onClick: (event) => event.preventDefault(),
|
|
11979
11979
|
onKeyDown: (event) => {
|
|
11980
11980
|
if (event.key === "ArrowDown") {
|
|
11981
11981
|
event.preventDefault();
|
|
@@ -11989,7 +11989,8 @@ var FilterMenu = forwardRef19(
|
|
|
11989
11989
|
},
|
|
11990
11990
|
placeholder: "Search...",
|
|
11991
11991
|
tabIndex: 0,
|
|
11992
|
-
type: "search"
|
|
11992
|
+
type: "search",
|
|
11993
|
+
value: searchValue
|
|
11993
11994
|
}
|
|
11994
11995
|
)
|
|
11995
11996
|
}
|
|
@@ -12003,31 +12004,38 @@ var FilterMenu = forwardRef19(
|
|
|
12003
12004
|
}
|
|
12004
12005
|
),
|
|
12005
12006
|
Children7.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx252(MenuItem, { disabled: true, children: "No results found" }),
|
|
12006
|
-
value.length > 0 && /* @__PURE__ */ jsx252(
|
|
12007
|
-
|
|
12007
|
+
value.length > 0 && /* @__PURE__ */ jsx252(
|
|
12008
|
+
DropdownMenuItem3,
|
|
12008
12009
|
{
|
|
12009
|
-
|
|
12010
|
-
|
|
12011
|
-
borderRadius: "border-radius-02",
|
|
12012
|
-
paddingSize: "space-01",
|
|
12013
|
-
prominence: "default",
|
|
12014
|
-
style: {
|
|
12015
|
-
position: "absolute",
|
|
12016
|
-
bottom: 0,
|
|
12017
|
-
left: 0,
|
|
12018
|
-
right: 0,
|
|
12019
|
-
margin: "1px"
|
|
12020
|
-
},
|
|
12010
|
+
disabled: true,
|
|
12011
|
+
style: { marginTop: "24px" },
|
|
12021
12012
|
children: /* @__PURE__ */ jsx252(
|
|
12022
|
-
|
|
12013
|
+
Card,
|
|
12023
12014
|
{
|
|
12024
|
-
|
|
12025
|
-
|
|
12026
|
-
|
|
12015
|
+
alignItems: "flex-end",
|
|
12016
|
+
border: false,
|
|
12017
|
+
borderRadius: "border-radius-02",
|
|
12018
|
+
paddingSize: "space-01",
|
|
12019
|
+
prominence: "default",
|
|
12020
|
+
style: {
|
|
12021
|
+
position: "absolute",
|
|
12022
|
+
bottom: 0,
|
|
12023
|
+
left: 0,
|
|
12024
|
+
right: 0,
|
|
12025
|
+
margin: "1px"
|
|
12026
|
+
},
|
|
12027
|
+
children: /* @__PURE__ */ jsx252(
|
|
12028
|
+
Button,
|
|
12029
|
+
{
|
|
12030
|
+
onClick: () => onChange([]),
|
|
12031
|
+
size: "sm",
|
|
12032
|
+
children: "Clear"
|
|
12033
|
+
}
|
|
12034
|
+
)
|
|
12027
12035
|
}
|
|
12028
12036
|
)
|
|
12029
12037
|
}
|
|
12030
|
-
)
|
|
12038
|
+
)
|
|
12031
12039
|
]
|
|
12032
12040
|
}
|
|
12033
12041
|
);
|
|
@@ -12036,7 +12044,7 @@ var FilterMenu = forwardRef19(
|
|
|
12036
12044
|
FilterMenu.displayName = "FilterMenu";
|
|
12037
12045
|
|
|
12038
12046
|
// src/components/Modal/Modal.tsx
|
|
12039
|
-
import { forwardRef as
|
|
12047
|
+
import { forwardRef as forwardRef22 } from "react";
|
|
12040
12048
|
import styled56 from "styled-components";
|
|
12041
12049
|
import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
|
|
12042
12050
|
import { isNotNil as isNotNil28 } from "@wistia/type-guards";
|
|
@@ -12096,7 +12104,7 @@ var ModalHeader = ({
|
|
|
12096
12104
|
};
|
|
12097
12105
|
|
|
12098
12106
|
// src/components/Modal/ModalContent.tsx
|
|
12099
|
-
import { forwardRef as
|
|
12107
|
+
import { forwardRef as forwardRef21 } from "react";
|
|
12100
12108
|
import styled54, { css as css34, keyframes as keyframes4 } from "styled-components";
|
|
12101
12109
|
import { Content as DialogContent } from "@radix-ui/react-dialog";
|
|
12102
12110
|
|
|
@@ -12246,7 +12254,7 @@ var StyledModalContent = styled54(DialogContent)`
|
|
|
12246
12254
|
${({ $positionVariant }) => positionStyleMap[$positionVariant]}
|
|
12247
12255
|
}
|
|
12248
12256
|
`;
|
|
12249
|
-
var ModalContent =
|
|
12257
|
+
var ModalContent = forwardRef21(
|
|
12250
12258
|
({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
|
|
12251
12259
|
useFocusRestore();
|
|
12252
12260
|
return /* @__PURE__ */ jsx255(
|
|
@@ -12305,7 +12313,7 @@ var ModalBody = styled56.div`
|
|
|
12305
12313
|
flex: 1 0 0;
|
|
12306
12314
|
order: 2;
|
|
12307
12315
|
`;
|
|
12308
|
-
var Modal =
|
|
12316
|
+
var Modal = forwardRef22(
|
|
12309
12317
|
({
|
|
12310
12318
|
children,
|
|
12311
12319
|
hideCloseButton = false,
|
|
@@ -12603,7 +12611,7 @@ var ProgressBar = ({
|
|
|
12603
12611
|
ProgressBar.displayName = "ProgressBar";
|
|
12604
12612
|
|
|
12605
12613
|
// src/components/Radio/Radio.tsx
|
|
12606
|
-
import { forwardRef as
|
|
12614
|
+
import { forwardRef as forwardRef23, useId as useId3 } from "react";
|
|
12607
12615
|
import styled60, { css as css37 } from "styled-components";
|
|
12608
12616
|
import { isNonEmptyString as isNonEmptyString4, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
|
|
12609
12617
|
import { jsx as jsx260, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
@@ -12706,7 +12714,7 @@ var StyledHiddenRadioInput = styled60.input`
|
|
|
12706
12714
|
display: block;
|
|
12707
12715
|
}
|
|
12708
12716
|
`;
|
|
12709
|
-
var Radio =
|
|
12717
|
+
var Radio = forwardRef23(
|
|
12710
12718
|
({
|
|
12711
12719
|
checked,
|
|
12712
12720
|
disabled = false,
|
|
@@ -12777,15 +12785,333 @@ var Radio = forwardRef22(
|
|
|
12777
12785
|
);
|
|
12778
12786
|
Radio.displayName = "Radio";
|
|
12779
12787
|
|
|
12788
|
+
// src/components/RadioCard/RadioCard.tsx
|
|
12789
|
+
import { forwardRef as forwardRef25 } from "react";
|
|
12790
|
+
|
|
12791
|
+
// src/components/RadioCard/RadioCardRoot.tsx
|
|
12792
|
+
import { forwardRef as forwardRef24, useId as useId4 } from "react";
|
|
12793
|
+
import styled61, { css as css38 } from "styled-components";
|
|
12794
|
+
import { isNonEmptyString as isNonEmptyString5, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
|
|
12795
|
+
import { jsx as jsx261, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
12796
|
+
var checkedStyles = css38`
|
|
12797
|
+
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
12798
|
+
--wui-color-icon: var(--wui-color-icon-selected);
|
|
12799
|
+
--wui-radio-card-background-color: var(--wui-color-bg-surface-info);
|
|
12800
|
+
--wui-color-text: var(--wui-color-text-info);
|
|
12801
|
+
--wui-color-text-secondary: var(--wui-color-text-info);
|
|
12802
|
+
`;
|
|
12803
|
+
var disabledStyles = css38`
|
|
12804
|
+
--wui-radio-card-border-color: var(--wui-color-border-disabled);
|
|
12805
|
+
--wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
|
|
12806
|
+
--wui-radio-card-cursor: not-allowed;
|
|
12807
|
+
--wui-color-icon: var(--wui-color-icon-disabled);
|
|
12808
|
+
--wui-color-text: var(--wui-color-text-disabled);
|
|
12809
|
+
--wui-color-text-secondary: var(--wui-color-text-disabled);
|
|
12810
|
+
`;
|
|
12811
|
+
var focusStyles = css38`
|
|
12812
|
+
outline: 2px solid var(--wui-color-focus-ring);
|
|
12813
|
+
`;
|
|
12814
|
+
var imageCoverStyles = css38`
|
|
12815
|
+
--wui-radio-card-image-inset: 0px;
|
|
12816
|
+
--wui-radio-card-border-width: 0px;
|
|
12817
|
+
--wui-inset-shadow-width: 1px;
|
|
12818
|
+
--wui-radio-card-border-color: rgb(0 0 0 / 25%);
|
|
12819
|
+
|
|
12820
|
+
overflow: hidden;
|
|
12821
|
+
|
|
12822
|
+
&:has(input:checked) {
|
|
12823
|
+
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
12824
|
+
--wui-radio-card-image-inset: 2px;
|
|
12825
|
+
--wui-inset-shadow-width: 2px;
|
|
12826
|
+
}
|
|
12827
|
+
|
|
12828
|
+
&:hover:not(:has(input:disabled, input:checked)) {
|
|
12829
|
+
--wui-radio-card-border-color: rgb(0 0 0 / 50%);
|
|
12830
|
+
}
|
|
12831
|
+
|
|
12832
|
+
&::after {
|
|
12833
|
+
content: '';
|
|
12834
|
+
position: absolute;
|
|
12835
|
+
top: 0;
|
|
12836
|
+
width: 100%;
|
|
12837
|
+
height: 100%;
|
|
12838
|
+
border-radius: var(--wui-radio-card-border-radius);
|
|
12839
|
+
box-shadow:
|
|
12840
|
+
inset 0 0 0 var(--wui-inset-shadow-width) var(--wui-radio-card-border-color),
|
|
12841
|
+
inset 0 0 0 calc(var(--wui-radio-card-image-inset) * 2) var(--wui-radio-card-background-color);
|
|
12842
|
+
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
12843
|
+
}
|
|
12844
|
+
`;
|
|
12845
|
+
var StyledCard2 = styled61.label`
|
|
12846
|
+
--wui-radio-card-border-color: var(--wui-color-border-secondary);
|
|
12847
|
+
--wui-radio-card-background-color: var(--wui-color-bg-surface);
|
|
12848
|
+
--wui-radio-card-cursor: pointer;
|
|
12849
|
+
--wui-radio-card-border-width: 1px;
|
|
12850
|
+
--wui-radio-card-border-radius: var(--wui-border-radius-02);
|
|
12851
|
+
|
|
12852
|
+
position: relative;
|
|
12853
|
+
display: flex;
|
|
12854
|
+
padding: ${({ $padding }) => `var(--wui-${$padding})`};
|
|
12855
|
+
aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
|
|
12856
|
+
border: var(--wui-radio-card-border-width) solid var(--wui-radio-card-border-color);
|
|
12857
|
+
border-radius: var(--wui-radio-card-border-radius);
|
|
12858
|
+
background-color: var(--wui-radio-card-background-color);
|
|
12859
|
+
cursor: var(--wui-radio-card-cursor);
|
|
12860
|
+
transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
|
|
12861
|
+
|
|
12862
|
+
svg {
|
|
12863
|
+
transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
|
|
12864
|
+
}
|
|
12865
|
+
|
|
12866
|
+
&:hover {
|
|
12867
|
+
--wui-radio-card-border-color: var(--wui-color-border-secondary-hover);
|
|
12868
|
+
}
|
|
12869
|
+
|
|
12870
|
+
&:active {
|
|
12871
|
+
--wui-radio-card-border-color: var(--wui-color-border-secondary-active);
|
|
12872
|
+
}
|
|
12873
|
+
|
|
12874
|
+
&:has(input:checked) {
|
|
12875
|
+
${checkedStyles}
|
|
12876
|
+
}
|
|
12877
|
+
|
|
12878
|
+
&:has(input:disabled) {
|
|
12879
|
+
${disabledStyles}
|
|
12880
|
+
}
|
|
12881
|
+
|
|
12882
|
+
&:has(input:focus-visible) {
|
|
12883
|
+
${focusStyles}
|
|
12884
|
+
}
|
|
12885
|
+
|
|
12886
|
+
&:has([data-wui-radio-card-image]) {
|
|
12887
|
+
&:has(input:disabled) {
|
|
12888
|
+
[data-wui-radio-card-image] {
|
|
12889
|
+
filter: grayscale(100%);
|
|
12890
|
+
}
|
|
12891
|
+
}
|
|
12892
|
+
|
|
12893
|
+
&:has([data-wui-radio-card-image='cover']) {
|
|
12894
|
+
${imageCoverStyles}
|
|
12895
|
+
}
|
|
12896
|
+
}
|
|
12897
|
+
`;
|
|
12898
|
+
var StyledHiddenInput = styled61.input`
|
|
12899
|
+
${visuallyHiddenStyle}
|
|
12900
|
+
`;
|
|
12901
|
+
var RadioCardRoot = forwardRef24(
|
|
12902
|
+
({
|
|
12903
|
+
children,
|
|
12904
|
+
disabled = false,
|
|
12905
|
+
id,
|
|
12906
|
+
name,
|
|
12907
|
+
onChange,
|
|
12908
|
+
value,
|
|
12909
|
+
aspectRatio = "initial",
|
|
12910
|
+
padding = "space-04",
|
|
12911
|
+
checked,
|
|
12912
|
+
...props
|
|
12913
|
+
}, ref) => {
|
|
12914
|
+
const generatedId = useId4();
|
|
12915
|
+
const computedId = isNonEmptyString5(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
12916
|
+
const radioGroupContext = useRadioGroup();
|
|
12917
|
+
const contextName = radioGroupContext?.name;
|
|
12918
|
+
const contextOnChange = radioGroupContext?.onChange;
|
|
12919
|
+
const contextValue = radioGroupContext?.value;
|
|
12920
|
+
const radioName = name ?? contextName;
|
|
12921
|
+
const handleOnChange = onChange ?? contextOnChange;
|
|
12922
|
+
const defaultChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue.includes(value) : void 0;
|
|
12923
|
+
return /* @__PURE__ */ jsxs42(
|
|
12924
|
+
StyledCard2,
|
|
12925
|
+
{
|
|
12926
|
+
$aspectRatio: aspectRatio,
|
|
12927
|
+
$padding: padding,
|
|
12928
|
+
htmlFor: computedId,
|
|
12929
|
+
children: [
|
|
12930
|
+
/* @__PURE__ */ jsx261(
|
|
12931
|
+
StyledHiddenInput,
|
|
12932
|
+
{
|
|
12933
|
+
...props,
|
|
12934
|
+
ref,
|
|
12935
|
+
disabled,
|
|
12936
|
+
id: computedId,
|
|
12937
|
+
name: radioName,
|
|
12938
|
+
onChange: handleOnChange,
|
|
12939
|
+
type: "radio",
|
|
12940
|
+
value,
|
|
12941
|
+
...isNotUndefined14(defaultChecked) ? { defaultChecked } : { checked }
|
|
12942
|
+
}
|
|
12943
|
+
),
|
|
12944
|
+
children
|
|
12945
|
+
]
|
|
12946
|
+
}
|
|
12947
|
+
);
|
|
12948
|
+
}
|
|
12949
|
+
);
|
|
12950
|
+
RadioCardRoot.displayName = "RadioCardRoot";
|
|
12951
|
+
|
|
12952
|
+
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
12953
|
+
import styled63 from "styled-components";
|
|
12954
|
+
import { isNotNil as isNotNil31 } from "@wistia/type-guards";
|
|
12955
|
+
|
|
12956
|
+
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
12957
|
+
import styled62 from "styled-components";
|
|
12958
|
+
var RadioCardIndicator = styled62.div`
|
|
12959
|
+
--wui-radio-card-indicator-size: 14px;
|
|
12960
|
+
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
|
|
12961
|
+
--wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
|
|
12962
|
+
|
|
12963
|
+
/* TODO: figure out radio / checkbox / switch colors */
|
|
12964
|
+
--wui-radio-card-indicator-border-color: var(--wui-color-border-secondary-active);
|
|
12965
|
+
|
|
12966
|
+
width: var(--wui-radio-card-indicator-size);
|
|
12967
|
+
height: var(--wui-radio-card-indicator-size);
|
|
12968
|
+
min-width: var(--wui-radio-card-indicator-size);
|
|
12969
|
+
min-height: var(--wui-radio-card-indicator-size);
|
|
12970
|
+
background-color: var(--wui-radio-card-indicator-background-color);
|
|
12971
|
+
box-shadow: inset 0 0 0 1px var(--wui-radio-card-indicator-border-color);
|
|
12972
|
+
border-radius: 100%;
|
|
12973
|
+
position: relative;
|
|
12974
|
+
cursor: pointer;
|
|
12975
|
+
transition: border-color var(--wui-motion-duration-03) var(--wui-motion-ease);
|
|
12976
|
+
|
|
12977
|
+
&::after {
|
|
12978
|
+
content: '';
|
|
12979
|
+
position: absolute;
|
|
12980
|
+
top: 50%;
|
|
12981
|
+
left: 50%;
|
|
12982
|
+
width: 0;
|
|
12983
|
+
height: 0;
|
|
12984
|
+
background-color: var(--wui-radio-card-indicator-fill-color);
|
|
12985
|
+
border-radius: 100%;
|
|
12986
|
+
transform: translate(-50%, -50%);
|
|
12987
|
+
}
|
|
12988
|
+
|
|
12989
|
+
${StyledCard2}:has(input:checked) & {
|
|
12990
|
+
--wui-radio-card-indicator-border-color: var(--wui-color-focus-ring);
|
|
12991
|
+
--wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
|
|
12992
|
+
|
|
12993
|
+
&::after {
|
|
12994
|
+
width: calc(var(--wui-radio-card-indicator-size) / 2);
|
|
12995
|
+
height: calc(var(--wui-radio-card-indicator-size) / 2);
|
|
12996
|
+
}
|
|
12997
|
+
}
|
|
12998
|
+
|
|
12999
|
+
${StyledCard2}:has(input:disabled) & {
|
|
13000
|
+
--wui-radio-card-indicator-border-color: var(--wui-color-border-secondary);
|
|
13001
|
+
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
|
|
13002
|
+
}
|
|
13003
|
+
`;
|
|
13004
|
+
RadioCardIndicator.displayName = "RadioCardIndicator";
|
|
13005
|
+
|
|
13006
|
+
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
13007
|
+
import { jsx as jsx262, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
13008
|
+
var StyledCardContent = styled63.div`
|
|
13009
|
+
display: grid;
|
|
13010
|
+
grid-auto-flow: column;
|
|
13011
|
+
gap: var(--wui-space-02);
|
|
13012
|
+
`;
|
|
13013
|
+
var StyledCardIcon = styled63.div`
|
|
13014
|
+
display: contents;
|
|
13015
|
+
`;
|
|
13016
|
+
var StyledIndicatorContainer = styled63.div`
|
|
13017
|
+
height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
|
|
13018
|
+
display: flex;
|
|
13019
|
+
align-items: center;
|
|
13020
|
+
`;
|
|
13021
|
+
var RadioCardDefaultLayout = ({
|
|
13022
|
+
icon,
|
|
13023
|
+
label,
|
|
13024
|
+
description,
|
|
13025
|
+
showIndicator = true
|
|
13026
|
+
}) => {
|
|
13027
|
+
return /* @__PURE__ */ jsxs43(StyledCardContent, { children: [
|
|
13028
|
+
showIndicator ? /* @__PURE__ */ jsx262(StyledIndicatorContainer, { $hasIcon: isNotNil31(icon), children: /* @__PURE__ */ jsx262(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
|
|
13029
|
+
/* @__PURE__ */ jsxs43(Stack, { gap: "space-02", children: [
|
|
13030
|
+
isNotNil31(icon) && /* @__PURE__ */ jsx262(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
|
|
13031
|
+
/* @__PURE__ */ jsxs43(
|
|
13032
|
+
Stack,
|
|
13033
|
+
{
|
|
13034
|
+
gap: "space-01",
|
|
13035
|
+
style: isNotNil31(icon) ? { paddingLeft: 2 } : void 0,
|
|
13036
|
+
children: [
|
|
13037
|
+
/* @__PURE__ */ jsx262(Text, { variant: "label3", children: /* @__PURE__ */ jsx262("strong", { children: label }) }),
|
|
13038
|
+
isNotNil31(description) && /* @__PURE__ */ jsx262(
|
|
13039
|
+
Text,
|
|
13040
|
+
{
|
|
13041
|
+
prominence: "secondary",
|
|
13042
|
+
variant: "body3",
|
|
13043
|
+
children: description
|
|
13044
|
+
}
|
|
13045
|
+
)
|
|
13046
|
+
]
|
|
13047
|
+
}
|
|
13048
|
+
)
|
|
13049
|
+
] })
|
|
13050
|
+
] });
|
|
13051
|
+
};
|
|
13052
|
+
RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
|
|
13053
|
+
|
|
13054
|
+
// src/components/RadioCard/RadioCard.tsx
|
|
13055
|
+
import { jsx as jsx263 } from "react/jsx-runtime";
|
|
13056
|
+
var RadioCard = forwardRef25(
|
|
13057
|
+
({ icon, label, description, showIndicator, ...rootProps }, ref) => {
|
|
13058
|
+
return /* @__PURE__ */ jsx263(
|
|
13059
|
+
RadioCardRoot,
|
|
13060
|
+
{
|
|
13061
|
+
ref,
|
|
13062
|
+
...rootProps,
|
|
13063
|
+
children: /* @__PURE__ */ jsx263(
|
|
13064
|
+
RadioCardDefaultLayout,
|
|
13065
|
+
{
|
|
13066
|
+
description,
|
|
13067
|
+
icon,
|
|
13068
|
+
label,
|
|
13069
|
+
showIndicator
|
|
13070
|
+
}
|
|
13071
|
+
)
|
|
13072
|
+
}
|
|
13073
|
+
);
|
|
13074
|
+
}
|
|
13075
|
+
);
|
|
13076
|
+
RadioCard.displayName = "RadioCard";
|
|
13077
|
+
|
|
13078
|
+
// src/components/RadioCard/RadioCardImage.tsx
|
|
13079
|
+
import { forwardRef as forwardRef26 } from "react";
|
|
13080
|
+
import { jsx as jsx264 } from "react/jsx-runtime";
|
|
13081
|
+
var RadioCardImage = forwardRef26(
|
|
13082
|
+
({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
|
|
13083
|
+
return /* @__PURE__ */ jsx264(
|
|
13084
|
+
RadioCardRoot,
|
|
13085
|
+
{
|
|
13086
|
+
ref,
|
|
13087
|
+
...rootProps,
|
|
13088
|
+
aspectRatio,
|
|
13089
|
+
padding,
|
|
13090
|
+
children: /* @__PURE__ */ jsx264(
|
|
13091
|
+
Image,
|
|
13092
|
+
{
|
|
13093
|
+
alt: label,
|
|
13094
|
+
"data-wui-radio-card-image": padding === "space-00" ? "cover" : "contain",
|
|
13095
|
+
fill: true,
|
|
13096
|
+
fit: padding === "space-00" ? "cover" : "contain",
|
|
13097
|
+
src: imageSrc
|
|
13098
|
+
}
|
|
13099
|
+
)
|
|
13100
|
+
}
|
|
13101
|
+
);
|
|
13102
|
+
}
|
|
13103
|
+
);
|
|
13104
|
+
RadioCardImage.displayName = "RadioCardImage";
|
|
13105
|
+
|
|
12780
13106
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
12781
|
-
import { forwardRef as
|
|
12782
|
-
import
|
|
13107
|
+
import { forwardRef as forwardRef27 } from "react";
|
|
13108
|
+
import styled65, { css as css40 } from "styled-components";
|
|
12783
13109
|
import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
|
|
12784
13110
|
import { isNil as isNil16 } from "@wistia/type-guards";
|
|
12785
13111
|
|
|
12786
13112
|
// src/components/SegmentedControl/useSelectedItemStyle.tsx
|
|
12787
13113
|
import { createContext as createContext7, useContext as useContext8, useMemo as useMemo11, useState as useState17 } from "react";
|
|
12788
|
-
import { jsx as
|
|
13114
|
+
import { jsx as jsx265 } from "react/jsx-runtime";
|
|
12789
13115
|
var SelectedItemStyleContext = createContext7(null);
|
|
12790
13116
|
var SelectedItemStyleProvider = ({
|
|
12791
13117
|
children
|
|
@@ -12806,7 +13132,7 @@ var SelectedItemStyleProvider = ({
|
|
|
12806
13132
|
}),
|
|
12807
13133
|
[selectedItemIndicatorStyle]
|
|
12808
13134
|
);
|
|
12809
|
-
return /* @__PURE__ */
|
|
13135
|
+
return /* @__PURE__ */ jsx265(SelectedItemStyleContext.Provider, { value: contextValue, children });
|
|
12810
13136
|
};
|
|
12811
13137
|
var useSelectedItemStyle = () => {
|
|
12812
13138
|
const context = useContext8(SelectedItemStyleContext);
|
|
@@ -12817,7 +13143,7 @@ var useSelectedItemStyle = () => {
|
|
|
12817
13143
|
};
|
|
12818
13144
|
|
|
12819
13145
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
12820
|
-
import
|
|
13146
|
+
import styled64, { css as css39 } from "styled-components";
|
|
12821
13147
|
import { isUndefined as isUndefined5 } from "@wistia/type-guards";
|
|
12822
13148
|
|
|
12823
13149
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
@@ -12833,13 +13159,13 @@ var useSegmentedControlValue = () => {
|
|
|
12833
13159
|
};
|
|
12834
13160
|
|
|
12835
13161
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
12836
|
-
import { jsx as
|
|
12837
|
-
var selectedItemIndicatorStyles =
|
|
13162
|
+
import { jsx as jsx266 } from "react/jsx-runtime";
|
|
13163
|
+
var selectedItemIndicatorStyles = css39`
|
|
12838
13164
|
background-color: var(--wui-color-bg-fill-white);
|
|
12839
13165
|
border-radius: var(--wui-border-radius-rounded);
|
|
12840
13166
|
box-shadow: var(--wui-elevation-01);
|
|
12841
13167
|
`;
|
|
12842
|
-
var SelectedItemIndicatorDiv =
|
|
13168
|
+
var SelectedItemIndicatorDiv = styled64.div`
|
|
12843
13169
|
${selectedItemIndicatorStyles}
|
|
12844
13170
|
left: 0;
|
|
12845
13171
|
position: absolute;
|
|
@@ -12855,7 +13181,7 @@ var SelectedItemIndicator = () => {
|
|
|
12855
13181
|
if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
|
|
12856
13182
|
return null;
|
|
12857
13183
|
}
|
|
12858
|
-
return /* @__PURE__ */
|
|
13184
|
+
return /* @__PURE__ */ jsx266(
|
|
12859
13185
|
SelectedItemIndicatorDiv,
|
|
12860
13186
|
{
|
|
12861
13187
|
"data-wui-selected-item-indicator": true,
|
|
@@ -12865,8 +13191,8 @@ var SelectedItemIndicator = () => {
|
|
|
12865
13191
|
};
|
|
12866
13192
|
|
|
12867
13193
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
12868
|
-
import { jsx as
|
|
12869
|
-
var segmentedControlStyles =
|
|
13194
|
+
import { jsx as jsx267, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
13195
|
+
var segmentedControlStyles = css40`
|
|
12870
13196
|
display: inline-flex;
|
|
12871
13197
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
12872
13198
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -12877,10 +13203,10 @@ var segmentedControlStyles = css39`
|
|
|
12877
13203
|
position: relative;
|
|
12878
13204
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
12879
13205
|
`;
|
|
12880
|
-
var StyledSegmentedControl =
|
|
13206
|
+
var StyledSegmentedControl = styled65(ToggleGroupRoot)`
|
|
12881
13207
|
${segmentedControlStyles}
|
|
12882
13208
|
`;
|
|
12883
|
-
var SegmentedControl =
|
|
13209
|
+
var SegmentedControl = forwardRef27(
|
|
12884
13210
|
({
|
|
12885
13211
|
children,
|
|
12886
13212
|
disabled = false,
|
|
@@ -12892,7 +13218,7 @@ var SegmentedControl = forwardRef23(
|
|
|
12892
13218
|
if (isNil16(children)) {
|
|
12893
13219
|
return null;
|
|
12894
13220
|
}
|
|
12895
|
-
return /* @__PURE__ */
|
|
13221
|
+
return /* @__PURE__ */ jsx267(
|
|
12896
13222
|
StyledSegmentedControl,
|
|
12897
13223
|
{
|
|
12898
13224
|
ref,
|
|
@@ -12904,9 +13230,9 @@ var SegmentedControl = forwardRef23(
|
|
|
12904
13230
|
type: "single",
|
|
12905
13231
|
value: selectedValue,
|
|
12906
13232
|
...props,
|
|
12907
|
-
children: /* @__PURE__ */
|
|
13233
|
+
children: /* @__PURE__ */ jsx267(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs44(SelectedItemStyleProvider, { children: [
|
|
12908
13234
|
children,
|
|
12909
|
-
/* @__PURE__ */
|
|
13235
|
+
/* @__PURE__ */ jsx267(SelectedItemIndicator, {})
|
|
12910
13236
|
] }) })
|
|
12911
13237
|
}
|
|
12912
13238
|
);
|
|
@@ -12915,12 +13241,12 @@ var SegmentedControl = forwardRef23(
|
|
|
12915
13241
|
SegmentedControl.displayName = "SegmentedControl";
|
|
12916
13242
|
|
|
12917
13243
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
12918
|
-
import { forwardRef as
|
|
12919
|
-
import
|
|
13244
|
+
import { forwardRef as forwardRef28, useEffect as useEffect13, useRef as useRef15 } from "react";
|
|
13245
|
+
import styled66, { css as css41 } from "styled-components";
|
|
12920
13246
|
import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
|
|
12921
|
-
import { isNotNil as
|
|
12922
|
-
import { jsxs as
|
|
12923
|
-
var segmentedControlItemStyles =
|
|
13247
|
+
import { isNotNil as isNotNil32 } from "@wistia/type-guards";
|
|
13248
|
+
import { jsxs as jsxs45 } from "react/jsx-runtime";
|
|
13249
|
+
var segmentedControlItemStyles = css41`
|
|
12924
13250
|
all: unset; /* ToggleGroupItem is a button element */
|
|
12925
13251
|
align-items: center;
|
|
12926
13252
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -12987,10 +13313,10 @@ var segmentedControlItemStyles = css40`
|
|
|
12987
13313
|
}
|
|
12988
13314
|
}
|
|
12989
13315
|
`;
|
|
12990
|
-
var StyledSegmentedControlItem =
|
|
13316
|
+
var StyledSegmentedControlItem = styled66(ToggleGroupItem)`
|
|
12991
13317
|
${segmentedControlItemStyles}
|
|
12992
13318
|
`;
|
|
12993
|
-
var SegmentedControlItem =
|
|
13319
|
+
var SegmentedControlItem = forwardRef28(
|
|
12994
13320
|
({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
12995
13321
|
const selectedValue = useSegmentedControlValue();
|
|
12996
13322
|
const { setSelectedItemMeasurements } = useSelectedItemStyle();
|
|
@@ -13028,13 +13354,13 @@ var SegmentedControlItem = forwardRef24(
|
|
|
13028
13354
|
resizeObserver.disconnect();
|
|
13029
13355
|
};
|
|
13030
13356
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
13031
|
-
return /* @__PURE__ */
|
|
13357
|
+
return /* @__PURE__ */ jsxs45(
|
|
13032
13358
|
StyledSegmentedControlItem,
|
|
13033
13359
|
{
|
|
13034
13360
|
ref: combinedRef,
|
|
13035
13361
|
...otherProps,
|
|
13036
|
-
$hasLabel:
|
|
13037
|
-
"aria-label":
|
|
13362
|
+
$hasLabel: isNotNil32(label),
|
|
13363
|
+
"aria-label": isNotNil32(label) ? void 0 : ariaLabel,
|
|
13038
13364
|
disabled,
|
|
13039
13365
|
onClick: handleClick,
|
|
13040
13366
|
value,
|
|
@@ -13059,10 +13385,10 @@ import {
|
|
|
13059
13385
|
Value,
|
|
13060
13386
|
ScrollDownButton
|
|
13061
13387
|
} from "@radix-ui/react-select";
|
|
13062
|
-
import { forwardRef as
|
|
13063
|
-
import
|
|
13064
|
-
import { jsx as
|
|
13065
|
-
var StyledTrigger2 =
|
|
13388
|
+
import { forwardRef as forwardRef29 } from "react";
|
|
13389
|
+
import styled67 from "styled-components";
|
|
13390
|
+
import { jsx as jsx268, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
13391
|
+
var StyledTrigger2 = styled67(Trigger3)`
|
|
13066
13392
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
13067
13393
|
${inputCss};
|
|
13068
13394
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -13106,7 +13432,7 @@ var StyledTrigger2 = styled64(Trigger3)`
|
|
|
13106
13432
|
color: var(--wui-input-placeholder);
|
|
13107
13433
|
}
|
|
13108
13434
|
`;
|
|
13109
|
-
var StyledContent3 =
|
|
13435
|
+
var StyledContent3 = styled67(Content3)`
|
|
13110
13436
|
--wui-select-content-border: var(--wui-color-border);
|
|
13111
13437
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
13112
13438
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -13124,7 +13450,7 @@ var StyledContent3 = styled64(Content3)`
|
|
|
13124
13450
|
max-height: var(--radix-select-content-available-height);
|
|
13125
13451
|
z-index: var(--wui-zindex-select);
|
|
13126
13452
|
`;
|
|
13127
|
-
var Select =
|
|
13453
|
+
var Select = forwardRef29(
|
|
13128
13454
|
({
|
|
13129
13455
|
colorScheme = "inherit",
|
|
13130
13456
|
children,
|
|
@@ -13134,13 +13460,13 @@ var Select = forwardRef25(
|
|
|
13134
13460
|
...props
|
|
13135
13461
|
}, forwardedRef) => {
|
|
13136
13462
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
13137
|
-
return /* @__PURE__ */
|
|
13463
|
+
return /* @__PURE__ */ jsxs46(
|
|
13138
13464
|
Root2,
|
|
13139
13465
|
{
|
|
13140
13466
|
...props,
|
|
13141
13467
|
onValueChange: onChange,
|
|
13142
13468
|
children: [
|
|
13143
|
-
/* @__PURE__ */
|
|
13469
|
+
/* @__PURE__ */ jsxs46(
|
|
13144
13470
|
StyledTrigger2,
|
|
13145
13471
|
{
|
|
13146
13472
|
ref: forwardedRef,
|
|
@@ -13148,8 +13474,8 @@ var Select = forwardRef25(
|
|
|
13148
13474
|
$fullWidth: responsiveFullWidth,
|
|
13149
13475
|
...props,
|
|
13150
13476
|
children: [
|
|
13151
|
-
/* @__PURE__ */
|
|
13152
|
-
/* @__PURE__ */
|
|
13477
|
+
/* @__PURE__ */ jsx268(Value, { placeholder }),
|
|
13478
|
+
/* @__PURE__ */ jsx268(
|
|
13153
13479
|
Icon,
|
|
13154
13480
|
{
|
|
13155
13481
|
size: "md",
|
|
@@ -13159,10 +13485,10 @@ var Select = forwardRef25(
|
|
|
13159
13485
|
]
|
|
13160
13486
|
}
|
|
13161
13487
|
),
|
|
13162
|
-
/* @__PURE__ */
|
|
13163
|
-
/* @__PURE__ */
|
|
13164
|
-
/* @__PURE__ */
|
|
13165
|
-
/* @__PURE__ */
|
|
13488
|
+
/* @__PURE__ */ jsx268(Portal2, { children: /* @__PURE__ */ jsxs46(StyledContent3, { position: "popper", children: [
|
|
13489
|
+
/* @__PURE__ */ jsx268(ScrollUpButton, { children: /* @__PURE__ */ jsx268(Icon, { type: "caret-up" }) }),
|
|
13490
|
+
/* @__PURE__ */ jsx268(Viewport, { children }),
|
|
13491
|
+
/* @__PURE__ */ jsx268(ScrollDownButton, { children: /* @__PURE__ */ jsx268(Icon, { type: "caret-down" }) })
|
|
13166
13492
|
] }) })
|
|
13167
13493
|
]
|
|
13168
13494
|
}
|
|
@@ -13173,11 +13499,11 @@ Select.displayName = "Select";
|
|
|
13173
13499
|
|
|
13174
13500
|
// src/components/Select/SelectOption.tsx
|
|
13175
13501
|
import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
|
|
13176
|
-
import { forwardRef as
|
|
13177
|
-
import
|
|
13178
|
-
import { isNotNil as
|
|
13179
|
-
import { jsx as
|
|
13180
|
-
var StyledItem =
|
|
13502
|
+
import { forwardRef as forwardRef30 } from "react";
|
|
13503
|
+
import styled68 from "styled-components";
|
|
13504
|
+
import { isNotNil as isNotNil33 } from "@wistia/type-guards";
|
|
13505
|
+
import { jsx as jsx269, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
13506
|
+
var StyledItem = styled68(Item)`
|
|
13181
13507
|
${variantStyleMap2.body3};
|
|
13182
13508
|
display: flex;
|
|
13183
13509
|
padding: var(--wui-select-option-padding);
|
|
@@ -13201,28 +13527,28 @@ var StyledItem = styled65(Item)`
|
|
|
13201
13527
|
background-color: transparent;
|
|
13202
13528
|
}
|
|
13203
13529
|
`;
|
|
13204
|
-
var StyledIconContainer =
|
|
13530
|
+
var StyledIconContainer = styled68.span`
|
|
13205
13531
|
width: 12px;
|
|
13206
13532
|
`;
|
|
13207
|
-
var SelectOption =
|
|
13533
|
+
var SelectOption = forwardRef30(
|
|
13208
13534
|
({ children, selectedDisplayValue, ...props }, forwardedRef) => {
|
|
13209
|
-
return /* @__PURE__ */
|
|
13535
|
+
return /* @__PURE__ */ jsxs47(
|
|
13210
13536
|
StyledItem,
|
|
13211
13537
|
{
|
|
13212
13538
|
...props,
|
|
13213
13539
|
ref: forwardedRef,
|
|
13214
13540
|
children: [
|
|
13215
|
-
/* @__PURE__ */
|
|
13541
|
+
/* @__PURE__ */ jsx269(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ jsx269(ItemIndicator, { children: /* @__PURE__ */ jsx269(
|
|
13216
13542
|
Icon,
|
|
13217
13543
|
{
|
|
13218
13544
|
size: "sm",
|
|
13219
13545
|
type: "checkmark"
|
|
13220
13546
|
}
|
|
13221
13547
|
) }) }),
|
|
13222
|
-
|
|
13548
|
+
isNotNil33(selectedDisplayValue) ? /* @__PURE__ */ jsxs47("div", { children: [
|
|
13223
13549
|
children,
|
|
13224
|
-
/* @__PURE__ */
|
|
13225
|
-
] }) : /* @__PURE__ */
|
|
13550
|
+
/* @__PURE__ */ jsx269("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx269(ItemText, { children: selectedDisplayValue }) })
|
|
13551
|
+
] }) : /* @__PURE__ */ jsx269(ItemText, { children })
|
|
13226
13552
|
]
|
|
13227
13553
|
}
|
|
13228
13554
|
);
|
|
@@ -13232,14 +13558,14 @@ SelectOption.displayName = "SelectOption";
|
|
|
13232
13558
|
|
|
13233
13559
|
// src/components/Select/SelectOptionGroup.tsx
|
|
13234
13560
|
import { Group, Label as Label3 } from "@radix-ui/react-select";
|
|
13235
|
-
import
|
|
13236
|
-
import { jsx as
|
|
13237
|
-
var StyledLabel4 =
|
|
13561
|
+
import styled69 from "styled-components";
|
|
13562
|
+
import { jsx as jsx270, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
13563
|
+
var StyledLabel4 = styled69(Label3)`
|
|
13238
13564
|
padding: var(--wui-select-option-padding);
|
|
13239
13565
|
`;
|
|
13240
13566
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
13241
|
-
return /* @__PURE__ */
|
|
13242
|
-
/* @__PURE__ */
|
|
13567
|
+
return /* @__PURE__ */ jsxs48(Group, { ...props, children: [
|
|
13568
|
+
/* @__PURE__ */ jsx270(StyledLabel4, { children: /* @__PURE__ */ jsx270(
|
|
13243
13569
|
Text,
|
|
13244
13570
|
{
|
|
13245
13571
|
prominence: "secondary",
|
|
@@ -13258,10 +13584,10 @@ import {
|
|
|
13258
13584
|
Range as RadixSliderRange,
|
|
13259
13585
|
Thumb as RadixSliderThumb
|
|
13260
13586
|
} from "@radix-ui/react-slider";
|
|
13261
|
-
import
|
|
13262
|
-
import { isNonEmptyString as
|
|
13263
|
-
import { jsx as
|
|
13264
|
-
var SliderContainer =
|
|
13587
|
+
import styled70 from "styled-components";
|
|
13588
|
+
import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
|
|
13589
|
+
import { jsx as jsx271, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
13590
|
+
var SliderContainer = styled70.div`
|
|
13265
13591
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
13266
13592
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
13267
13593
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -13277,7 +13603,7 @@ var SliderContainer = styled67.div`
|
|
|
13277
13603
|
pointer-events: none;
|
|
13278
13604
|
}
|
|
13279
13605
|
`;
|
|
13280
|
-
var StyledSliderRoot =
|
|
13606
|
+
var StyledSliderRoot = styled70(RadixSliderRoot)`
|
|
13281
13607
|
position: relative;
|
|
13282
13608
|
display: flex;
|
|
13283
13609
|
align-items: center;
|
|
@@ -13285,20 +13611,20 @@ var StyledSliderRoot = styled67(RadixSliderRoot)`
|
|
|
13285
13611
|
touch-action: none;
|
|
13286
13612
|
width: 100%;
|
|
13287
13613
|
`;
|
|
13288
|
-
var StyledSliderTrack =
|
|
13614
|
+
var StyledSliderTrack = styled70(RadixSliderTrack)`
|
|
13289
13615
|
background-color: var(--wui-slider-track-color);
|
|
13290
13616
|
border-radius: var(--wui-slider-track-border-radius);
|
|
13291
13617
|
flex-grow: 1;
|
|
13292
13618
|
height: 6px;
|
|
13293
13619
|
position: relative;
|
|
13294
13620
|
`;
|
|
13295
|
-
var StyledSliderRange =
|
|
13621
|
+
var StyledSliderRange = styled70(RadixSliderRange)`
|
|
13296
13622
|
background-color: var(--wui-slider-range-color);
|
|
13297
13623
|
border-radius: var(--wui-slider-track-border-radius);
|
|
13298
13624
|
height: 100%;
|
|
13299
13625
|
position: absolute;
|
|
13300
13626
|
`;
|
|
13301
|
-
var StyledSliderThumb =
|
|
13627
|
+
var StyledSliderThumb = styled70(RadixSliderThumb)`
|
|
13302
13628
|
background-color: var(--wui-slider-thumb-color);
|
|
13303
13629
|
border-radius: var(--wui-border-radius-rounded);
|
|
13304
13630
|
cursor: grab;
|
|
@@ -13338,7 +13664,7 @@ var Slider = ({
|
|
|
13338
13664
|
"data-testid": dataTestId = "ui-slider",
|
|
13339
13665
|
...otherProps
|
|
13340
13666
|
}) => {
|
|
13341
|
-
if (!(
|
|
13667
|
+
if (!(isNonEmptyString6(ariaLabel) || isNonEmptyString6(ariaLabelledby))) {
|
|
13342
13668
|
throw new Error(
|
|
13343
13669
|
"UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
|
|
13344
13670
|
);
|
|
@@ -13349,12 +13675,12 @@ var Slider = ({
|
|
|
13349
13675
|
onChange(newValue);
|
|
13350
13676
|
}
|
|
13351
13677
|
};
|
|
13352
|
-
return /* @__PURE__ */
|
|
13678
|
+
return /* @__PURE__ */ jsx271(
|
|
13353
13679
|
SliderContainer,
|
|
13354
13680
|
{
|
|
13355
13681
|
...otherProps,
|
|
13356
13682
|
"data-testid": dataTestId,
|
|
13357
|
-
children: /* @__PURE__ */
|
|
13683
|
+
children: /* @__PURE__ */ jsxs49(
|
|
13358
13684
|
StyledSliderRoot,
|
|
13359
13685
|
{
|
|
13360
13686
|
"aria-label": ariaLabel,
|
|
@@ -13367,8 +13693,8 @@ var Slider = ({
|
|
|
13367
13693
|
step,
|
|
13368
13694
|
...value ? { value } : {},
|
|
13369
13695
|
children: [
|
|
13370
|
-
/* @__PURE__ */
|
|
13371
|
-
values.map((_, index) => /* @__PURE__ */
|
|
13696
|
+
/* @__PURE__ */ jsx271(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx271(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
|
|
13697
|
+
values.map((_, index) => /* @__PURE__ */ jsx271(
|
|
13372
13698
|
StyledSliderThumb,
|
|
13373
13699
|
{
|
|
13374
13700
|
"data-testid": `${dataTestId}-thumb-${index}`
|
|
@@ -13384,11 +13710,11 @@ var Slider = ({
|
|
|
13384
13710
|
Slider.displayName = "Slider";
|
|
13385
13711
|
|
|
13386
13712
|
// src/components/Switch/Switch.tsx
|
|
13387
|
-
import { forwardRef as
|
|
13388
|
-
import
|
|
13389
|
-
import { isNonEmptyString as
|
|
13390
|
-
import { jsx as
|
|
13391
|
-
var sizeSmall3 =
|
|
13713
|
+
import { forwardRef as forwardRef31, useId as useId5 } from "react";
|
|
13714
|
+
import styled71, { css as css42 } from "styled-components";
|
|
13715
|
+
import { isNonEmptyString as isNonEmptyString7 } from "@wistia/type-guards";
|
|
13716
|
+
import { jsx as jsx272, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
13717
|
+
var sizeSmall3 = css42`
|
|
13392
13718
|
--wui-size-small-width: 24px;
|
|
13393
13719
|
--wui-size-small-height: 14px;
|
|
13394
13720
|
|
|
@@ -13403,7 +13729,7 @@ var sizeSmall3 = css41`
|
|
|
13403
13729
|
height: calc(var(--wui-size-small-width) / 2);
|
|
13404
13730
|
}
|
|
13405
13731
|
`;
|
|
13406
|
-
var sizeMedium3 =
|
|
13732
|
+
var sizeMedium3 = css42`
|
|
13407
13733
|
--wui-size-medium-width: 32px;
|
|
13408
13734
|
--wui-size-medium-height: 18px;
|
|
13409
13735
|
|
|
@@ -13418,7 +13744,7 @@ var sizeMedium3 = css41`
|
|
|
13418
13744
|
height: calc(var(--wui-size-medium-width) / 2);
|
|
13419
13745
|
}
|
|
13420
13746
|
`;
|
|
13421
|
-
var sizeLarge3 =
|
|
13747
|
+
var sizeLarge3 = css42`
|
|
13422
13748
|
--wui-size-large-width: 40px;
|
|
13423
13749
|
--wui-size-large-height: 22px;
|
|
13424
13750
|
|
|
@@ -13438,14 +13764,14 @@ var getSizeCss3 = (size) => {
|
|
|
13438
13764
|
if (size === "lg") return sizeLarge3;
|
|
13439
13765
|
return sizeMedium3;
|
|
13440
13766
|
};
|
|
13441
|
-
var StyledSwitchWrapper =
|
|
13767
|
+
var StyledSwitchWrapper = styled71.div`
|
|
13442
13768
|
display: flex;
|
|
13443
13769
|
margin: 0;
|
|
13444
13770
|
|
|
13445
13771
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
13446
13772
|
user-select: none;
|
|
13447
13773
|
`;
|
|
13448
|
-
var StyledSwitchInput =
|
|
13774
|
+
var StyledSwitchInput = styled71.div`
|
|
13449
13775
|
${({ $size }) => getSizeCss3($size)}
|
|
13450
13776
|
line-height: 0;
|
|
13451
13777
|
margin: 0;
|
|
@@ -13473,7 +13799,7 @@ var StyledSwitchInput = styled68.div`
|
|
|
13473
13799
|
transition: all 0.2s ease-in-out;
|
|
13474
13800
|
}
|
|
13475
13801
|
`;
|
|
13476
|
-
var StyledHiddenSwitchInput =
|
|
13802
|
+
var StyledHiddenSwitchInput = styled71.input`
|
|
13477
13803
|
${visuallyHiddenStyle}
|
|
13478
13804
|
|
|
13479
13805
|
/* toggles display of faux-input background-color and toggle position */
|
|
@@ -13489,7 +13815,7 @@ var StyledHiddenSwitchInput = styled68.input`
|
|
|
13489
13815
|
}
|
|
13490
13816
|
}
|
|
13491
13817
|
`;
|
|
13492
|
-
var Switch =
|
|
13818
|
+
var Switch = forwardRef31(
|
|
13493
13819
|
({
|
|
13494
13820
|
align = "left",
|
|
13495
13821
|
checked,
|
|
@@ -13505,10 +13831,10 @@ var Switch = forwardRef27(
|
|
|
13505
13831
|
hideLabel = false,
|
|
13506
13832
|
...props
|
|
13507
13833
|
}, ref) => {
|
|
13508
|
-
const generatedId =
|
|
13509
|
-
const computedId =
|
|
13510
|
-
return /* @__PURE__ */
|
|
13511
|
-
/* @__PURE__ */
|
|
13834
|
+
const generatedId = useId5();
|
|
13835
|
+
const computedId = isNonEmptyString7(id) ? id : `wistia-ui-switch-${generatedId}`;
|
|
13836
|
+
return /* @__PURE__ */ jsxs50(StyledSwitchWrapper, { $disabled: disabled, children: [
|
|
13837
|
+
/* @__PURE__ */ jsx272(
|
|
13512
13838
|
StyledHiddenSwitchInput,
|
|
13513
13839
|
{
|
|
13514
13840
|
...props,
|
|
@@ -13523,11 +13849,11 @@ var Switch = forwardRef27(
|
|
|
13523
13849
|
value
|
|
13524
13850
|
}
|
|
13525
13851
|
),
|
|
13526
|
-
/* @__PURE__ */
|
|
13852
|
+
/* @__PURE__ */ jsx272(
|
|
13527
13853
|
FormControlLabel,
|
|
13528
13854
|
{
|
|
13529
13855
|
align,
|
|
13530
|
-
controlSlot: /* @__PURE__ */
|
|
13856
|
+
controlSlot: /* @__PURE__ */ jsx272(
|
|
13531
13857
|
StyledSwitchInput,
|
|
13532
13858
|
{
|
|
13533
13859
|
$disabled: disabled,
|
|
@@ -13549,25 +13875,25 @@ var Switch = forwardRef27(
|
|
|
13549
13875
|
Switch.displayName = "Switch";
|
|
13550
13876
|
|
|
13551
13877
|
// src/components/Table/Table.tsx
|
|
13552
|
-
import
|
|
13553
|
-
import { jsx as
|
|
13554
|
-
var StyledTable =
|
|
13878
|
+
import styled72, { css as css43 } from "styled-components";
|
|
13879
|
+
import { jsx as jsx273 } from "react/jsx-runtime";
|
|
13880
|
+
var StyledTable = styled72.table`
|
|
13555
13881
|
width: 100%;
|
|
13556
13882
|
border-collapse: collapse;
|
|
13557
13883
|
|
|
13558
|
-
${({ $divided }) => $divided &&
|
|
13884
|
+
${({ $divided }) => $divided && css43`
|
|
13559
13885
|
tr {
|
|
13560
13886
|
border-bottom: 1px solid var(--wui-color-border);
|
|
13561
13887
|
}
|
|
13562
13888
|
`}
|
|
13563
13889
|
|
|
13564
|
-
${({ $striped }) => $striped &&
|
|
13890
|
+
${({ $striped }) => $striped && css43`
|
|
13565
13891
|
tbody tr:nth-child(even) {
|
|
13566
13892
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
13567
13893
|
}
|
|
13568
13894
|
`}
|
|
13569
13895
|
|
|
13570
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
13896
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && css43`
|
|
13571
13897
|
thead {
|
|
13572
13898
|
${visuallyHiddenStyle}
|
|
13573
13899
|
}
|
|
@@ -13580,7 +13906,7 @@ var Table = ({
|
|
|
13580
13906
|
visuallyHiddenHeader = false,
|
|
13581
13907
|
...props
|
|
13582
13908
|
}) => {
|
|
13583
|
-
return /* @__PURE__ */
|
|
13909
|
+
return /* @__PURE__ */ jsx273(
|
|
13584
13910
|
StyledTable,
|
|
13585
13911
|
{
|
|
13586
13912
|
$divided: divided,
|
|
@@ -13593,35 +13919,35 @@ var Table = ({
|
|
|
13593
13919
|
};
|
|
13594
13920
|
|
|
13595
13921
|
// src/components/Table/TableBody.tsx
|
|
13596
|
-
import
|
|
13922
|
+
import styled73 from "styled-components";
|
|
13597
13923
|
|
|
13598
13924
|
// src/components/Table/TableSectionContext.ts
|
|
13599
13925
|
import { createContext as createContext9 } from "react";
|
|
13600
13926
|
var TableSectionContext = createContext9(null);
|
|
13601
13927
|
|
|
13602
13928
|
// src/components/Table/TableBody.tsx
|
|
13603
|
-
import { jsx as
|
|
13604
|
-
var StyledTableBody =
|
|
13929
|
+
import { jsx as jsx274 } from "react/jsx-runtime";
|
|
13930
|
+
var StyledTableBody = styled73.tbody``;
|
|
13605
13931
|
var TableBody = ({ children, ...props }) => {
|
|
13606
|
-
return /* @__PURE__ */
|
|
13932
|
+
return /* @__PURE__ */ jsx274(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx274(StyledTableBody, { ...props, children }) });
|
|
13607
13933
|
};
|
|
13608
13934
|
|
|
13609
13935
|
// src/components/Table/TableCell.tsx
|
|
13610
13936
|
import { useContext as useContext10 } from "react";
|
|
13611
|
-
import
|
|
13612
|
-
import { jsx as
|
|
13613
|
-
var sharedStyles =
|
|
13937
|
+
import styled74, { css as css44 } from "styled-components";
|
|
13938
|
+
import { jsx as jsx275 } from "react/jsx-runtime";
|
|
13939
|
+
var sharedStyles = css44`
|
|
13614
13940
|
color: var(--wui-color-text);
|
|
13615
13941
|
padding: var(--wui-space-02);
|
|
13616
13942
|
text-align: left;
|
|
13617
13943
|
`;
|
|
13618
|
-
var StyledTh =
|
|
13944
|
+
var StyledTh = styled74.th`
|
|
13619
13945
|
${sharedStyles}
|
|
13620
13946
|
font-size: var(--wui-typography-body-4-size);
|
|
13621
13947
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
13622
13948
|
line-height: var(--wui-typography-body-4-line-height);
|
|
13623
13949
|
`;
|
|
13624
|
-
var StyledTd =
|
|
13950
|
+
var StyledTd = styled74.td`
|
|
13625
13951
|
${sharedStyles}
|
|
13626
13952
|
font-size: var(--wui-typography-body-2-size);
|
|
13627
13953
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -13630,39 +13956,39 @@ var StyledTd = styled71.td`
|
|
|
13630
13956
|
var TableCell = ({ children, ...props }) => {
|
|
13631
13957
|
const section = useContext10(TableSectionContext);
|
|
13632
13958
|
if (section === "head") {
|
|
13633
|
-
return /* @__PURE__ */
|
|
13959
|
+
return /* @__PURE__ */ jsx275(StyledTh, { ...props, children });
|
|
13634
13960
|
}
|
|
13635
|
-
return /* @__PURE__ */
|
|
13961
|
+
return /* @__PURE__ */ jsx275(StyledTd, { ...props, children });
|
|
13636
13962
|
};
|
|
13637
13963
|
|
|
13638
13964
|
// src/components/Table/TableFoot.tsx
|
|
13639
|
-
import
|
|
13640
|
-
import { jsx as
|
|
13641
|
-
var StyledTableFoot =
|
|
13965
|
+
import styled75 from "styled-components";
|
|
13966
|
+
import { jsx as jsx276 } from "react/jsx-runtime";
|
|
13967
|
+
var StyledTableFoot = styled75.tfoot``;
|
|
13642
13968
|
var TableFoot = ({ children, ...props }) => {
|
|
13643
|
-
return /* @__PURE__ */
|
|
13969
|
+
return /* @__PURE__ */ jsx276(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx276(StyledTableFoot, { ...props, children }) });
|
|
13644
13970
|
};
|
|
13645
13971
|
|
|
13646
13972
|
// src/components/Table/TableHead.tsx
|
|
13647
|
-
import
|
|
13648
|
-
import { jsx as
|
|
13649
|
-
var StyledThead =
|
|
13973
|
+
import styled76 from "styled-components";
|
|
13974
|
+
import { jsx as jsx277 } from "react/jsx-runtime";
|
|
13975
|
+
var StyledThead = styled76.thead``;
|
|
13650
13976
|
var TableHead = ({ children, ...props }) => {
|
|
13651
|
-
return /* @__PURE__ */
|
|
13977
|
+
return /* @__PURE__ */ jsx277(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx277(StyledThead, { ...props, children }) });
|
|
13652
13978
|
};
|
|
13653
13979
|
|
|
13654
13980
|
// src/components/Table/TableRow.tsx
|
|
13655
|
-
import
|
|
13656
|
-
import { jsx as
|
|
13657
|
-
var StyledTableRow =
|
|
13981
|
+
import styled77 from "styled-components";
|
|
13982
|
+
import { jsx as jsx278 } from "react/jsx-runtime";
|
|
13983
|
+
var StyledTableRow = styled77.tr``;
|
|
13658
13984
|
var TableRow = ({ children, ...props }) => {
|
|
13659
|
-
return /* @__PURE__ */
|
|
13985
|
+
return /* @__PURE__ */ jsx278(StyledTableRow, { ...props, children });
|
|
13660
13986
|
};
|
|
13661
13987
|
|
|
13662
13988
|
// src/components/Tabs/Tabs.tsx
|
|
13663
13989
|
import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
|
|
13664
13990
|
import { useCallback as useCallback10, useState as useState18 } from "react";
|
|
13665
|
-
import { isNotNil as
|
|
13991
|
+
import { isNotNil as isNotNil34 } from "@wistia/type-guards";
|
|
13666
13992
|
|
|
13667
13993
|
// src/components/Tabs/useTabsValue.tsx
|
|
13668
13994
|
import { createContext as createContext10, useContext as useContext11 } from "react";
|
|
@@ -13677,7 +14003,7 @@ var useTabsValue = () => {
|
|
|
13677
14003
|
};
|
|
13678
14004
|
|
|
13679
14005
|
// src/components/Tabs/Tabs.tsx
|
|
13680
|
-
import { jsx as
|
|
14006
|
+
import { jsx as jsx279 } from "react/jsx-runtime";
|
|
13681
14007
|
var Tabs = ({
|
|
13682
14008
|
children,
|
|
13683
14009
|
value: valueProp,
|
|
@@ -13699,48 +14025,48 @@ var Tabs = ({
|
|
|
13699
14025
|
...props,
|
|
13700
14026
|
onValueChange
|
|
13701
14027
|
};
|
|
13702
|
-
if (
|
|
14028
|
+
if (isNotNil34(value)) {
|
|
13703
14029
|
rootProps.value = value;
|
|
13704
14030
|
}
|
|
13705
|
-
if (
|
|
14031
|
+
if (isNotNil34(defaultValue)) {
|
|
13706
14032
|
rootProps.defaultValue = defaultValue;
|
|
13707
14033
|
}
|
|
13708
|
-
return /* @__PURE__ */
|
|
14034
|
+
return /* @__PURE__ */ jsx279(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx279(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx279(SelectedItemStyleProvider, { children }) }) });
|
|
13709
14035
|
};
|
|
13710
14036
|
Tabs.displayName = "Tabs";
|
|
13711
14037
|
|
|
13712
14038
|
// src/components/Tabs/TabsContent.tsx
|
|
13713
14039
|
import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
|
|
13714
|
-
import { jsx as
|
|
14040
|
+
import { jsx as jsx280 } from "react/jsx-runtime";
|
|
13715
14041
|
var TabsContent = ({ children, value }) => {
|
|
13716
|
-
return /* @__PURE__ */
|
|
14042
|
+
return /* @__PURE__ */ jsx280(RadixTabsContent, { value, children });
|
|
13717
14043
|
};
|
|
13718
14044
|
TabsContent.displayName = "TabsContent";
|
|
13719
14045
|
|
|
13720
14046
|
// src/components/Tabs/TabsList.tsx
|
|
13721
14047
|
import { List as RadixTabList } from "@radix-ui/react-tabs";
|
|
13722
|
-
import
|
|
14048
|
+
import styled79 from "styled-components";
|
|
13723
14049
|
|
|
13724
14050
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
13725
14051
|
import { isUndefined as isUndefined6 } from "@wistia/type-guards";
|
|
13726
14052
|
|
|
13727
14053
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
13728
|
-
import
|
|
13729
|
-
var TabsSelectedItemIndicatorDiv =
|
|
14054
|
+
import styled78 from "styled-components";
|
|
14055
|
+
var TabsSelectedItemIndicatorDiv = styled78(SelectedItemIndicatorDiv)`
|
|
13730
14056
|
&:has(~ button[role='tab']:focus-visible) {
|
|
13731
14057
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
13732
14058
|
}
|
|
13733
14059
|
`;
|
|
13734
14060
|
|
|
13735
14061
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
13736
|
-
import { jsx as
|
|
14062
|
+
import { jsx as jsx281 } from "react/jsx-runtime";
|
|
13737
14063
|
var SelectedTabIndicator = () => {
|
|
13738
14064
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
13739
14065
|
const selectedValue = useTabsValue();
|
|
13740
14066
|
if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
|
|
13741
14067
|
return null;
|
|
13742
14068
|
}
|
|
13743
|
-
return /* @__PURE__ */
|
|
14069
|
+
return /* @__PURE__ */ jsx281(
|
|
13744
14070
|
TabsSelectedItemIndicatorDiv,
|
|
13745
14071
|
{
|
|
13746
14072
|
"data-wui-selected-item-indicator": true,
|
|
@@ -13750,19 +14076,19 @@ var SelectedTabIndicator = () => {
|
|
|
13750
14076
|
};
|
|
13751
14077
|
|
|
13752
14078
|
// src/components/Tabs/TabsList.tsx
|
|
13753
|
-
import { jsx as
|
|
13754
|
-
var StyledRadixTabsList =
|
|
14079
|
+
import { jsx as jsx282, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
14080
|
+
var StyledRadixTabsList = styled79(RadixTabList)`
|
|
13755
14081
|
${segmentedControlStyles}
|
|
13756
14082
|
`;
|
|
13757
14083
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
13758
|
-
return /* @__PURE__ */
|
|
14084
|
+
return /* @__PURE__ */ jsxs51(
|
|
13759
14085
|
StyledRadixTabsList,
|
|
13760
14086
|
{
|
|
13761
14087
|
$fullWidth: fullWidth,
|
|
13762
14088
|
"aria-label": props["aria-label"],
|
|
13763
14089
|
children: [
|
|
13764
14090
|
children,
|
|
13765
|
-
/* @__PURE__ */
|
|
14091
|
+
/* @__PURE__ */ jsx282(SelectedTabIndicator, {})
|
|
13766
14092
|
]
|
|
13767
14093
|
}
|
|
13768
14094
|
);
|
|
@@ -13770,13 +14096,13 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
|
13770
14096
|
TabsList.displayName = "TabsList";
|
|
13771
14097
|
|
|
13772
14098
|
// src/components/Tabs/TabsTrigger.tsx
|
|
13773
|
-
import { forwardRef as
|
|
13774
|
-
import { isNotNil as
|
|
14099
|
+
import { forwardRef as forwardRef32, useEffect as useEffect14, useRef as useRef16 } from "react";
|
|
14100
|
+
import { isNotNil as isNotNil35 } from "@wistia/type-guards";
|
|
13775
14101
|
|
|
13776
14102
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
13777
|
-
import
|
|
14103
|
+
import styled80 from "styled-components";
|
|
13778
14104
|
import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
|
|
13779
|
-
var StyledRadixTabsTrigger =
|
|
14105
|
+
var StyledRadixTabsTrigger = styled80(RadixTabsTrigger)`
|
|
13780
14106
|
${segmentedControlItemStyles}
|
|
13781
14107
|
|
|
13782
14108
|
&:focus-visible {
|
|
@@ -13785,8 +14111,8 @@ var StyledRadixTabsTrigger = styled77(RadixTabsTrigger)`
|
|
|
13785
14111
|
`;
|
|
13786
14112
|
|
|
13787
14113
|
// src/components/Tabs/TabsTrigger.tsx
|
|
13788
|
-
import { jsxs as
|
|
13789
|
-
var TabsTrigger =
|
|
14114
|
+
import { jsxs as jsxs52 } from "react/jsx-runtime";
|
|
14115
|
+
var TabsTrigger = forwardRef32(
|
|
13790
14116
|
({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
13791
14117
|
const selectedValue = useTabsValue();
|
|
13792
14118
|
const { setSelectedItemMeasurements } = useSelectedItemStyle();
|
|
@@ -13817,13 +14143,13 @@ var TabsTrigger = forwardRef28(
|
|
|
13817
14143
|
resizeObserver.disconnect();
|
|
13818
14144
|
};
|
|
13819
14145
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
13820
|
-
return /* @__PURE__ */
|
|
14146
|
+
return /* @__PURE__ */ jsxs52(
|
|
13821
14147
|
StyledRadixTabsTrigger,
|
|
13822
14148
|
{
|
|
13823
14149
|
...otherProps,
|
|
13824
14150
|
ref: combinedRef,
|
|
13825
|
-
$hasLabel:
|
|
13826
|
-
"aria-label":
|
|
14151
|
+
$hasLabel: isNotNil35(label),
|
|
14152
|
+
"aria-label": isNotNil35(label) ? void 0 : ariaLabel,
|
|
13827
14153
|
disabled,
|
|
13828
14154
|
value,
|
|
13829
14155
|
children: [
|
|
@@ -13837,10 +14163,10 @@ var TabsTrigger = forwardRef28(
|
|
|
13837
14163
|
TabsTrigger.displayName = "TabsTrigger";
|
|
13838
14164
|
|
|
13839
14165
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
13840
|
-
import
|
|
13841
|
-
import { isNotNil as
|
|
13842
|
-
import { jsx as
|
|
13843
|
-
var StyledThumbnailBadge =
|
|
14166
|
+
import styled81 from "styled-components";
|
|
14167
|
+
import { isNotNil as isNotNil36 } from "@wistia/type-guards";
|
|
14168
|
+
import { jsx as jsx283, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
14169
|
+
var StyledThumbnailBadge = styled81.div`
|
|
13844
14170
|
align-items: center;
|
|
13845
14171
|
background-color: rgb(0 0 0 / 50%);
|
|
13846
14172
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -13865,23 +14191,23 @@ var StyledThumbnailBadge = styled78.div`
|
|
|
13865
14191
|
}
|
|
13866
14192
|
`;
|
|
13867
14193
|
var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
13868
|
-
return /* @__PURE__ */
|
|
13869
|
-
|
|
13870
|
-
/* @__PURE__ */
|
|
14194
|
+
return /* @__PURE__ */ jsxs53(StyledThumbnailBadge, { ...props, children: [
|
|
14195
|
+
isNotNil36(icon) && icon,
|
|
14196
|
+
/* @__PURE__ */ jsx283("span", { children: label })
|
|
13871
14197
|
] });
|
|
13872
14198
|
};
|
|
13873
14199
|
ThumbnailBadge.displayName = "ThumbnailBadge";
|
|
13874
14200
|
|
|
13875
14201
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
13876
|
-
import { forwardRef as
|
|
13877
|
-
import
|
|
13878
|
-
import { isNil as isNil17, isNotNil as
|
|
14202
|
+
import { forwardRef as forwardRef33, useState as useState19, useRef as useRef17, useCallback as useCallback11, useMemo as useMemo12 } from "react";
|
|
14203
|
+
import styled83 from "styled-components";
|
|
14204
|
+
import { isNil as isNil17, isNotNil as isNotNil39, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString2 } from "@wistia/type-guards";
|
|
13879
14205
|
|
|
13880
14206
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
13881
|
-
import { isNotNil as
|
|
13882
|
-
import { css as
|
|
14207
|
+
import { isNotNil as isNotNil37 } from "@wistia/type-guards";
|
|
14208
|
+
import { css as css45 } from "styled-components";
|
|
13883
14209
|
var gradients = {
|
|
13884
|
-
defaultDarkOne:
|
|
14210
|
+
defaultDarkOne: css45`
|
|
13885
14211
|
background-color: #222d66;
|
|
13886
14212
|
background-image:
|
|
13887
14213
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -13889,7 +14215,7 @@ var gradients = {
|
|
|
13889
14215
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
13890
14216
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
13891
14217
|
`,
|
|
13892
|
-
defaultDarkTwo:
|
|
14218
|
+
defaultDarkTwo: css45`
|
|
13893
14219
|
background-color: #222d66;
|
|
13894
14220
|
background-image:
|
|
13895
14221
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -13897,7 +14223,7 @@ var gradients = {
|
|
|
13897
14223
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
13898
14224
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
13899
14225
|
`,
|
|
13900
|
-
defaultLightOne:
|
|
14226
|
+
defaultLightOne: css45`
|
|
13901
14227
|
background-color: #ccd5ff;
|
|
13902
14228
|
background-image:
|
|
13903
14229
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -13905,13 +14231,13 @@ var gradients = {
|
|
|
13905
14231
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
13906
14232
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
13907
14233
|
`,
|
|
13908
|
-
defaultLightTwo:
|
|
14234
|
+
defaultLightTwo: css45`
|
|
13909
14235
|
background-color: #ccd5ff;
|
|
13910
14236
|
background-image:
|
|
13911
14237
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
13912
14238
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
13913
14239
|
`,
|
|
13914
|
-
defaultMidOne:
|
|
14240
|
+
defaultMidOne: css45`
|
|
13915
14241
|
background-color: #6b84ff;
|
|
13916
14242
|
background-image:
|
|
13917
14243
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -13919,13 +14245,13 @@ var gradients = {
|
|
|
13919
14245
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
13920
14246
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
13921
14247
|
`,
|
|
13922
|
-
defaultMidTwo:
|
|
14248
|
+
defaultMidTwo: css45`
|
|
13923
14249
|
background-color: #6b84ff;
|
|
13924
14250
|
background-image:
|
|
13925
14251
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
13926
14252
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
13927
14253
|
`,
|
|
13928
|
-
green:
|
|
14254
|
+
green: css45`
|
|
13929
14255
|
background-color: #fafffa;
|
|
13930
14256
|
background-image:
|
|
13931
14257
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -13933,7 +14259,7 @@ var gradients = {
|
|
|
13933
14259
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
13934
14260
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
13935
14261
|
`,
|
|
13936
|
-
greenWithPop:
|
|
14262
|
+
greenWithPop: css45`
|
|
13937
14263
|
background-color: #fafffa;
|
|
13938
14264
|
background-image:
|
|
13939
14265
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -13941,7 +14267,7 @@ var gradients = {
|
|
|
13941
14267
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
13942
14268
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
13943
14269
|
`,
|
|
13944
|
-
pink:
|
|
14270
|
+
pink: css45`
|
|
13945
14271
|
background-color: #fffff0;
|
|
13946
14272
|
background-image:
|
|
13947
14273
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -13949,7 +14275,7 @@ var gradients = {
|
|
|
13949
14275
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
13950
14276
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
13951
14277
|
`,
|
|
13952
|
-
pinkWithPop:
|
|
14278
|
+
pinkWithPop: css45`
|
|
13953
14279
|
background-color: #fffff0;
|
|
13954
14280
|
background-image:
|
|
13955
14281
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -13957,7 +14283,7 @@ var gradients = {
|
|
|
13957
14283
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
13958
14284
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
13959
14285
|
`,
|
|
13960
|
-
playfulGradientOne:
|
|
14286
|
+
playfulGradientOne: css45`
|
|
13961
14287
|
background-color: #f7f8ff;
|
|
13962
14288
|
background-image:
|
|
13963
14289
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -13965,7 +14291,7 @@ var gradients = {
|
|
|
13965
14291
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
13966
14292
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
13967
14293
|
`,
|
|
13968
|
-
playfulGradientTwo:
|
|
14294
|
+
playfulGradientTwo: css45`
|
|
13969
14295
|
background-color: #f7f8ff;
|
|
13970
14296
|
background-image:
|
|
13971
14297
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -13973,13 +14299,13 @@ var gradients = {
|
|
|
13973
14299
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
13974
14300
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
13975
14301
|
`,
|
|
13976
|
-
purple:
|
|
14302
|
+
purple: css45`
|
|
13977
14303
|
background-color: #f2caff;
|
|
13978
14304
|
background-image:
|
|
13979
14305
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
13980
14306
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
13981
14307
|
`,
|
|
13982
|
-
purpleWithPop:
|
|
14308
|
+
purpleWithPop: css45`
|
|
13983
14309
|
background-color: #f2caff;
|
|
13984
14310
|
background-image:
|
|
13985
14311
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -13987,7 +14313,7 @@ var gradients = {
|
|
|
13987
14313
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
13988
14314
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
13989
14315
|
`,
|
|
13990
|
-
yellow:
|
|
14316
|
+
yellow: css45`
|
|
13991
14317
|
background-color: #fffff0;
|
|
13992
14318
|
background-image:
|
|
13993
14319
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -13995,7 +14321,7 @@ var gradients = {
|
|
|
13995
14321
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
13996
14322
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
13997
14323
|
`,
|
|
13998
|
-
yellowWithPop:
|
|
14324
|
+
yellowWithPop: css45`
|
|
13999
14325
|
background-color: #fffff0;
|
|
14000
14326
|
background-image:
|
|
14001
14327
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -14006,14 +14332,14 @@ var gradients = {
|
|
|
14006
14332
|
};
|
|
14007
14333
|
var gradientMap = Object.keys(gradients);
|
|
14008
14334
|
var getBackgroundGradient = (gradientName = void 0) => {
|
|
14009
|
-
return
|
|
14335
|
+
return isNotNil37(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
|
|
14010
14336
|
};
|
|
14011
14337
|
|
|
14012
14338
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
14013
|
-
import
|
|
14014
|
-
import { isNotNil as
|
|
14015
|
-
import { jsx as
|
|
14016
|
-
var ScrubLine =
|
|
14339
|
+
import styled82 from "styled-components";
|
|
14340
|
+
import { isNotNil as isNotNil38 } from "@wistia/type-guards";
|
|
14341
|
+
import { jsx as jsx284, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
14342
|
+
var ScrubLine = styled82.div`
|
|
14017
14343
|
position: absolute;
|
|
14018
14344
|
top: 0;
|
|
14019
14345
|
height: 100%;
|
|
@@ -14097,8 +14423,8 @@ var ThumbnailStoryboardViewer = ({
|
|
|
14097
14423
|
);
|
|
14098
14424
|
const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
|
|
14099
14425
|
const backgroundImage = `url(${storyboardUrl})`;
|
|
14100
|
-
const showScrubLine =
|
|
14101
|
-
const scrubLinePosition =
|
|
14426
|
+
const showScrubLine = isNotNil38(cursorPosition);
|
|
14427
|
+
const scrubLinePosition = isNotNil38(cursorPosition) ? `${cursorPosition - 1}px` : "0";
|
|
14102
14428
|
const viewerStyles = {
|
|
14103
14429
|
position: "relative",
|
|
14104
14430
|
overflow: "hidden",
|
|
@@ -14116,14 +14442,14 @@ var ThumbnailStoryboardViewer = ({
|
|
|
14116
14442
|
backgroundPosition,
|
|
14117
14443
|
backgroundSize
|
|
14118
14444
|
};
|
|
14119
|
-
return /* @__PURE__ */
|
|
14445
|
+
return /* @__PURE__ */ jsxs54(
|
|
14120
14446
|
"div",
|
|
14121
14447
|
{
|
|
14122
14448
|
...props,
|
|
14123
14449
|
style: viewerStyles,
|
|
14124
14450
|
children: [
|
|
14125
|
-
/* @__PURE__ */
|
|
14126
|
-
showScrubLine ? /* @__PURE__ */
|
|
14451
|
+
/* @__PURE__ */ jsx284("div", { style: storyboardStyles }),
|
|
14452
|
+
showScrubLine ? /* @__PURE__ */ jsx284(
|
|
14127
14453
|
ScrubLine,
|
|
14128
14454
|
{
|
|
14129
14455
|
style: {
|
|
@@ -14137,20 +14463,20 @@ var ThumbnailStoryboardViewer = ({
|
|
|
14137
14463
|
};
|
|
14138
14464
|
|
|
14139
14465
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
14140
|
-
import { jsx as
|
|
14141
|
-
var WideThumbnailImage =
|
|
14466
|
+
import { jsx as jsx285, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
14467
|
+
var WideThumbnailImage = styled83.img`
|
|
14142
14468
|
height: 100%;
|
|
14143
14469
|
object-fit: cover;
|
|
14144
14470
|
width: 100%;
|
|
14145
14471
|
`;
|
|
14146
|
-
var SquareThumbnailImage =
|
|
14472
|
+
var SquareThumbnailImage = styled83.img`
|
|
14147
14473
|
backdrop-filter: blur(8px);
|
|
14148
14474
|
object-fit: contain;
|
|
14149
14475
|
width: 100%;
|
|
14150
14476
|
`;
|
|
14151
14477
|
var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
14152
14478
|
if (thumbnailImageType === "wide") {
|
|
14153
|
-
return /* @__PURE__ */
|
|
14479
|
+
return /* @__PURE__ */ jsx285(
|
|
14154
14480
|
WideThumbnailImage,
|
|
14155
14481
|
{
|
|
14156
14482
|
alt: "",
|
|
@@ -14159,7 +14485,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
14159
14485
|
}
|
|
14160
14486
|
);
|
|
14161
14487
|
}
|
|
14162
|
-
return /* @__PURE__ */
|
|
14488
|
+
return /* @__PURE__ */ jsx285(
|
|
14163
14489
|
SquareThumbnailImage,
|
|
14164
14490
|
{
|
|
14165
14491
|
alt: "",
|
|
@@ -14168,8 +14494,8 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
14168
14494
|
}
|
|
14169
14495
|
);
|
|
14170
14496
|
};
|
|
14171
|
-
var StyledThumbnail =
|
|
14172
|
-
background-image: ${({ $backgroundUrl }) =>
|
|
14497
|
+
var StyledThumbnail = styled83.div`
|
|
14498
|
+
background-image: ${({ $backgroundUrl }) => isNotNil39($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
14173
14499
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
14174
14500
|
// if we don't have $backgroundUrl show a gradient
|
|
14175
14501
|
isNil17($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
|
|
@@ -14197,7 +14523,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
|
|
|
14197
14523
|
left: relativeLeft
|
|
14198
14524
|
};
|
|
14199
14525
|
};
|
|
14200
|
-
var Thumbnail =
|
|
14526
|
+
var Thumbnail = forwardRef33(
|
|
14201
14527
|
({
|
|
14202
14528
|
gradientBackground = "defaultMidOne",
|
|
14203
14529
|
thumbnailImageType = "wide",
|
|
@@ -14214,10 +14540,10 @@ var Thumbnail = forwardRef29(
|
|
|
14214
14540
|
const storyboardElementRef = useRef17(null);
|
|
14215
14541
|
const [cursorPosition, setCursorPosition] = useState19(null);
|
|
14216
14542
|
const backgroundUrl = useMemo12(
|
|
14217
|
-
() => thumbnailImageType === "square" &&
|
|
14543
|
+
() => thumbnailImageType === "square" && isNotNil39(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
14218
14544
|
[thumbnailImageType, thumbnailUrl]
|
|
14219
14545
|
);
|
|
14220
|
-
const isScrubbable =
|
|
14546
|
+
const isScrubbable = isNotNil39(storyboard);
|
|
14221
14547
|
const trackStoryboardLoadStatus = useCallback11(() => {
|
|
14222
14548
|
if (storyboardElementRef.current || !storyboard) {
|
|
14223
14549
|
return storyboardElementRef.current;
|
|
@@ -14262,7 +14588,7 @@ var Thumbnail = forwardRef29(
|
|
|
14262
14588
|
} = storyboard;
|
|
14263
14589
|
const targetWidth = isString2(width) ? parseInt(width, 10) : Number(width);
|
|
14264
14590
|
const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
|
|
14265
|
-
return /* @__PURE__ */
|
|
14591
|
+
return /* @__PURE__ */ jsx285(
|
|
14266
14592
|
ThumbnailStoryboardViewer,
|
|
14267
14593
|
{
|
|
14268
14594
|
cursorPosition: effectiveCursorPosition,
|
|
@@ -14281,8 +14607,8 @@ var Thumbnail = forwardRef29(
|
|
|
14281
14607
|
let thumbnailContent = null;
|
|
14282
14608
|
if (shouldRenderStoryboard) {
|
|
14283
14609
|
thumbnailContent = renderStoryboard();
|
|
14284
|
-
} else if (
|
|
14285
|
-
thumbnailContent = /* @__PURE__ */
|
|
14610
|
+
} else if (isNotNil39(thumbnailUrl)) {
|
|
14611
|
+
thumbnailContent = /* @__PURE__ */ jsx285(
|
|
14286
14612
|
ThumbnailImage,
|
|
14287
14613
|
{
|
|
14288
14614
|
thumbnailImageType,
|
|
@@ -14292,7 +14618,7 @@ var Thumbnail = forwardRef29(
|
|
|
14292
14618
|
} else {
|
|
14293
14619
|
thumbnailContent = null;
|
|
14294
14620
|
}
|
|
14295
|
-
return /* @__PURE__ */
|
|
14621
|
+
return /* @__PURE__ */ jsxs55(
|
|
14296
14622
|
StyledThumbnail,
|
|
14297
14623
|
{
|
|
14298
14624
|
ref,
|
|
@@ -14306,7 +14632,7 @@ var Thumbnail = forwardRef29(
|
|
|
14306
14632
|
onMouseOut: handleMouseOut,
|
|
14307
14633
|
role: "presentation",
|
|
14308
14634
|
children: [
|
|
14309
|
-
|
|
14635
|
+
isNotNil39(children) ? children : null,
|
|
14310
14636
|
thumbnailContent
|
|
14311
14637
|
]
|
|
14312
14638
|
}
|
|
@@ -14317,10 +14643,10 @@ Thumbnail.displayName = "Thumbnail";
|
|
|
14317
14643
|
|
|
14318
14644
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
14319
14645
|
import React2 from "react";
|
|
14320
|
-
import
|
|
14646
|
+
import styled84 from "styled-components";
|
|
14321
14647
|
import { isNonEmptyArray } from "@wistia/type-guards";
|
|
14322
|
-
import { jsx as
|
|
14323
|
-
var StyledThumbnailCollage =
|
|
14648
|
+
import { jsx as jsx286 } from "react/jsx-runtime";
|
|
14649
|
+
var StyledThumbnailCollage = styled84.div`
|
|
14324
14650
|
display: grid;
|
|
14325
14651
|
gap: var(--wui-space-01);
|
|
14326
14652
|
width: 100%;
|
|
@@ -14402,7 +14728,7 @@ var ThumbnailCollage = ({
|
|
|
14402
14728
|
});
|
|
14403
14729
|
}) : [
|
|
14404
14730
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
14405
|
-
/* @__PURE__ */
|
|
14731
|
+
/* @__PURE__ */ jsx286(
|
|
14406
14732
|
Thumbnail,
|
|
14407
14733
|
{
|
|
14408
14734
|
gradientBackground,
|
|
@@ -14411,7 +14737,7 @@ var ThumbnailCollage = ({
|
|
|
14411
14737
|
"fallback"
|
|
14412
14738
|
)
|
|
14413
14739
|
];
|
|
14414
|
-
return /* @__PURE__ */
|
|
14740
|
+
return /* @__PURE__ */ jsx286(
|
|
14415
14741
|
StyledThumbnailCollage,
|
|
14416
14742
|
{
|
|
14417
14743
|
$gradientBackground: gradientBackground,
|
|
@@ -14423,26 +14749,26 @@ var ThumbnailCollage = ({
|
|
|
14423
14749
|
};
|
|
14424
14750
|
|
|
14425
14751
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
14426
|
-
import
|
|
14427
|
-
import { isNotNil as
|
|
14428
|
-
import { jsx as
|
|
14752
|
+
import styled85, { css as css46 } from "styled-components";
|
|
14753
|
+
import { isNotNil as isNotNil40 } from "@wistia/type-guards";
|
|
14754
|
+
import { jsx as jsx287, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
14429
14755
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
14430
14756
|
if (iconOnly) {
|
|
14431
|
-
return /* @__PURE__ */
|
|
14757
|
+
return /* @__PURE__ */ jsx287(
|
|
14432
14758
|
"g",
|
|
14433
14759
|
{
|
|
14434
14760
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
14435
14761
|
fill: brandmarkColor,
|
|
14436
|
-
children: /* @__PURE__ */
|
|
14762
|
+
children: /* @__PURE__ */ jsx287("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" })
|
|
14437
14763
|
}
|
|
14438
14764
|
);
|
|
14439
14765
|
}
|
|
14440
|
-
return /* @__PURE__ */
|
|
14766
|
+
return /* @__PURE__ */ jsx287(
|
|
14441
14767
|
"g",
|
|
14442
14768
|
{
|
|
14443
14769
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
14444
14770
|
fill: brandmarkColor,
|
|
14445
|
-
children: /* @__PURE__ */
|
|
14771
|
+
children: /* @__PURE__ */ jsx287("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" })
|
|
14446
14772
|
}
|
|
14447
14773
|
);
|
|
14448
14774
|
};
|
|
@@ -14450,12 +14776,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
14450
14776
|
if (iconOnly) {
|
|
14451
14777
|
return null;
|
|
14452
14778
|
}
|
|
14453
|
-
return /* @__PURE__ */
|
|
14779
|
+
return /* @__PURE__ */ jsx287(
|
|
14454
14780
|
"g",
|
|
14455
14781
|
{
|
|
14456
14782
|
"data-testid": "ui-wistia-logo-logotype",
|
|
14457
14783
|
fill: logotypeColor,
|
|
14458
|
-
children: /* @__PURE__ */
|
|
14784
|
+
children: /* @__PURE__ */ jsx287("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" })
|
|
14459
14785
|
}
|
|
14460
14786
|
);
|
|
14461
14787
|
};
|
|
@@ -14465,7 +14791,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
14465
14791
|
}
|
|
14466
14792
|
return "0 0 144 31.47";
|
|
14467
14793
|
};
|
|
14468
|
-
var WistiaLogoComponent =
|
|
14794
|
+
var WistiaLogoComponent = styled85.svg`
|
|
14469
14795
|
height: ${({ height }) => `${height}px`};
|
|
14470
14796
|
|
|
14471
14797
|
/* ensure it will always fit on mobile */
|
|
@@ -14481,12 +14807,12 @@ var WistiaLogoComponent = styled82.svg`
|
|
|
14481
14807
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
14482
14808
|
if ($opticallyCentered) {
|
|
14483
14809
|
if ($iconOnly) {
|
|
14484
|
-
return
|
|
14810
|
+
return css46`
|
|
14485
14811
|
aspect-ratio: 1;
|
|
14486
14812
|
padding: 11.85% 3.12% 13.91%;
|
|
14487
14813
|
`;
|
|
14488
14814
|
}
|
|
14489
|
-
return
|
|
14815
|
+
return css46`
|
|
14490
14816
|
aspect-ratio: 127 / 32;
|
|
14491
14817
|
`;
|
|
14492
14818
|
}
|
|
@@ -14523,7 +14849,7 @@ var WistiaLogo = ({
|
|
|
14523
14849
|
};
|
|
14524
14850
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
14525
14851
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
14526
|
-
const Logo = /* @__PURE__ */
|
|
14852
|
+
const Logo = /* @__PURE__ */ jsxs56(
|
|
14527
14853
|
WistiaLogoComponent,
|
|
14528
14854
|
{
|
|
14529
14855
|
$hoverColor: hoverColor,
|
|
@@ -14536,23 +14862,23 @@ var WistiaLogo = ({
|
|
|
14536
14862
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14537
14863
|
...props,
|
|
14538
14864
|
children: [
|
|
14539
|
-
/* @__PURE__ */
|
|
14540
|
-
|
|
14865
|
+
/* @__PURE__ */ jsx287("title", { children: title }),
|
|
14866
|
+
isNotNil40(description) ? /* @__PURE__ */ jsx287("desc", { children: description }) : null,
|
|
14541
14867
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
14542
14868
|
renderLogotype(logotypeColor, iconOnly)
|
|
14543
14869
|
]
|
|
14544
14870
|
}
|
|
14545
14871
|
);
|
|
14546
|
-
return href !== void 0 ? /* @__PURE__ */
|
|
14872
|
+
return href !== void 0 ? /* @__PURE__ */ jsx287("a", { href, children: Logo }) : Logo;
|
|
14547
14873
|
};
|
|
14548
14874
|
WistiaLogo.displayName = "WistiaLogo";
|
|
14549
14875
|
|
|
14550
14876
|
// src/components/InputPassword/InputPassword.tsx
|
|
14551
|
-
import
|
|
14552
|
-
import { forwardRef as
|
|
14877
|
+
import styled86 from "styled-components";
|
|
14878
|
+
import { forwardRef as forwardRef34, useState as useState20 } from "react";
|
|
14553
14879
|
import { isFunction as isFunction4 } from "@wistia/type-guards";
|
|
14554
|
-
import { jsx as
|
|
14555
|
-
var StyledIconButton =
|
|
14880
|
+
import { jsx as jsx288 } from "react/jsx-runtime";
|
|
14881
|
+
var StyledIconButton = styled86(IconButton)`
|
|
14556
14882
|
/* override size for icon button since prop gets changed by Input */
|
|
14557
14883
|
height: var(--icon-button-size-sm);
|
|
14558
14884
|
width: var(--icon-button-size-sm);
|
|
@@ -14560,7 +14886,7 @@ var StyledIconButton = styled83(IconButton)`
|
|
|
14560
14886
|
/* override input padding variable since it is used for Input Icon positioning */
|
|
14561
14887
|
--wui-input-horizontal-padding: 4px;
|
|
14562
14888
|
`;
|
|
14563
|
-
var InputPassword =
|
|
14889
|
+
var InputPassword = forwardRef34(
|
|
14564
14890
|
({ onVisibilityToggle, disabled = false, ...props }, ref) => {
|
|
14565
14891
|
const [isVisible, setIsVisible] = useState20(false);
|
|
14566
14892
|
const handleClick = () => {
|
|
@@ -14570,13 +14896,13 @@ var InputPassword = forwardRef30(
|
|
|
14570
14896
|
onVisibilityToggle(newVisibility);
|
|
14571
14897
|
}
|
|
14572
14898
|
};
|
|
14573
|
-
return /* @__PURE__ */
|
|
14899
|
+
return /* @__PURE__ */ jsx288(
|
|
14574
14900
|
Input,
|
|
14575
14901
|
{
|
|
14576
14902
|
...props,
|
|
14577
14903
|
ref,
|
|
14578
14904
|
disabled,
|
|
14579
|
-
rightIcon: /* @__PURE__ */
|
|
14905
|
+
rightIcon: /* @__PURE__ */ jsx288(
|
|
14580
14906
|
StyledIconButton,
|
|
14581
14907
|
{
|
|
14582
14908
|
disabled,
|
|
@@ -14584,7 +14910,7 @@ var InputPassword = forwardRef30(
|
|
|
14584
14910
|
onClick: handleClick,
|
|
14585
14911
|
tabIndex: disabled ? -1 : 0,
|
|
14586
14912
|
variant: "ghost",
|
|
14587
|
-
children: /* @__PURE__ */
|
|
14913
|
+
children: /* @__PURE__ */ jsx288(Icon, { type: isVisible ? "preview" : "hide" })
|
|
14588
14914
|
}
|
|
14589
14915
|
),
|
|
14590
14916
|
type: isVisible ? "text" : "password"
|
|
@@ -14655,6 +14981,8 @@ export {
|
|
|
14655
14981
|
Popover2 as Popover,
|
|
14656
14982
|
ProgressBar,
|
|
14657
14983
|
Radio,
|
|
14984
|
+
RadioCard,
|
|
14985
|
+
RadioCardImage,
|
|
14658
14986
|
RadioGroup,
|
|
14659
14987
|
RadioMenuItem,
|
|
14660
14988
|
ScreenReaderOnly,
|