@wistia/ui 0.12.1-beta.a5f0b8ca.9a827ca → 0.12.1
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 +277 -599
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +1 -162
- package/dist/index.d.ts +1 -162
- package/dist/index.mjs +226 -546
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.12.1
|
|
3
|
+
* @license @wistia/ui v0.12.1
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -100,8 +100,6 @@ __export(index_exports, {
|
|
|
100
100
|
Popover: () => Popover2,
|
|
101
101
|
ProgressBar: () => ProgressBar,
|
|
102
102
|
Radio: () => Radio,
|
|
103
|
-
RadioCard: () => RadioCard,
|
|
104
|
-
RadioCardImage: () => RadioCardImage,
|
|
105
103
|
RadioGroup: () => RadioGroup,
|
|
106
104
|
RadioMenuItem: () => RadioMenuItem,
|
|
107
105
|
ScreenReaderOnly: () => ScreenReaderOnly,
|
|
@@ -9104,7 +9102,7 @@ var StyledFieldset = import_styled_components41.default.fieldset`
|
|
|
9104
9102
|
border: 0;
|
|
9105
9103
|
`;
|
|
9106
9104
|
var StyledLegend = import_styled_components41.default.legend`
|
|
9107
|
-
margin-bottom: var(--
|
|
9105
|
+
margin-bottom: var(--space-01);
|
|
9108
9106
|
`;
|
|
9109
9107
|
var FormGroup = ({ children, label, ...props }) => {
|
|
9110
9108
|
const ref = (0, import_react35.useRef)(null);
|
|
@@ -12894,339 +12892,21 @@ var Radio = (0, import_react61.forwardRef)(
|
|
|
12894
12892
|
);
|
|
12895
12893
|
Radio.displayName = "Radio";
|
|
12896
12894
|
|
|
12897
|
-
// src/components/RadioCard/RadioCard.tsx
|
|
12898
|
-
var import_react63 = require("react");
|
|
12899
|
-
|
|
12900
|
-
// src/components/RadioCard/RadioCardRoot.tsx
|
|
12901
|
-
var import_react62 = require("react");
|
|
12902
|
-
var import_styled_components78 = __toESM(require("styled-components"));
|
|
12903
|
-
var import_type_guards52 = require("@wistia/type-guards");
|
|
12904
|
-
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
12905
|
-
var checkedStyles = import_styled_components78.css`
|
|
12906
|
-
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
12907
|
-
--wui-color-icon: var(--wui-color-icon-selected);
|
|
12908
|
-
--wui-radio-card-background-color: var(--wui-color-bg-surface-info);
|
|
12909
|
-
--wui-color-text: var(--wui-color-text-info);
|
|
12910
|
-
--wui-color-text-secondary: var(--wui-color-text-info);
|
|
12911
|
-
`;
|
|
12912
|
-
var disabledStyles = import_styled_components78.css`
|
|
12913
|
-
--wui-radio-card-border-color: var(--wui-color-border-disabled);
|
|
12914
|
-
--wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
|
|
12915
|
-
--wui-radio-card-cursor: not-allowed;
|
|
12916
|
-
--wui-color-icon: var(--wui-color-icon-disabled);
|
|
12917
|
-
--wui-color-text: var(--wui-color-text-disabled);
|
|
12918
|
-
--wui-color-text-secondary: var(--wui-color-text-disabled);
|
|
12919
|
-
`;
|
|
12920
|
-
var focusStyles = import_styled_components78.css`
|
|
12921
|
-
outline: 2px solid var(--wui-color-focus-ring);
|
|
12922
|
-
`;
|
|
12923
|
-
var imageCoverStyles = import_styled_components78.css`
|
|
12924
|
-
--wui-radio-card-image-inset: 0px;
|
|
12925
|
-
--wui-radio-card-border-width: 0px;
|
|
12926
|
-
--wui-inset-shadow-width: 1px;
|
|
12927
|
-
--wui-radio-card-border-color: rgb(0 0 0 / 25%);
|
|
12928
|
-
|
|
12929
|
-
overflow: hidden;
|
|
12930
|
-
|
|
12931
|
-
&:has(input:checked) {
|
|
12932
|
-
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
12933
|
-
--wui-radio-card-image-inset: 2px;
|
|
12934
|
-
--wui-inset-shadow-width: 2px;
|
|
12935
|
-
}
|
|
12936
|
-
|
|
12937
|
-
&:hover:not(:has(input:disabled, input:checked)) {
|
|
12938
|
-
--wui-radio-card-border-color: rgb(0 0 0 / 50%);
|
|
12939
|
-
}
|
|
12940
|
-
|
|
12941
|
-
&::after {
|
|
12942
|
-
content: '';
|
|
12943
|
-
position: absolute;
|
|
12944
|
-
top: 0;
|
|
12945
|
-
width: 100%;
|
|
12946
|
-
height: 100%;
|
|
12947
|
-
border-radius: var(--wui-radio-card-border-radius);
|
|
12948
|
-
box-shadow:
|
|
12949
|
-
inset 0 0 0 var(--wui-inset-shadow-width) var(--wui-radio-card-border-color),
|
|
12950
|
-
inset 0 0 0 calc(var(--wui-radio-card-image-inset) * 2) var(--wui-radio-card-background-color);
|
|
12951
|
-
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
12952
|
-
}
|
|
12953
|
-
`;
|
|
12954
|
-
var StyledCard2 = import_styled_components78.default.label`
|
|
12955
|
-
--wui-radio-card-border-color: var(--wui-color-border-secondary);
|
|
12956
|
-
--wui-radio-card-background-color: var(--wui-color-bg-surface);
|
|
12957
|
-
--wui-radio-card-cursor: pointer;
|
|
12958
|
-
--wui-radio-card-border-width: 1px;
|
|
12959
|
-
--wui-radio-card-border-radius: var(--wui-border-radius-02);
|
|
12960
|
-
|
|
12961
|
-
position: relative;
|
|
12962
|
-
display: flex;
|
|
12963
|
-
padding: ${({ $padding }) => `var(--wui-${$padding})`};
|
|
12964
|
-
aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
|
|
12965
|
-
border: var(--wui-radio-card-border-width) solid var(--wui-radio-card-border-color);
|
|
12966
|
-
border-radius: var(--wui-radio-card-border-radius);
|
|
12967
|
-
background-color: var(--wui-radio-card-background-color);
|
|
12968
|
-
cursor: var(--wui-radio-card-cursor);
|
|
12969
|
-
transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
|
|
12970
|
-
|
|
12971
|
-
svg {
|
|
12972
|
-
transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
|
|
12973
|
-
}
|
|
12974
|
-
|
|
12975
|
-
&:hover {
|
|
12976
|
-
--wui-radio-card-border-color: var(--wui-color-border-secondary-hover);
|
|
12977
|
-
}
|
|
12978
|
-
|
|
12979
|
-
&:active {
|
|
12980
|
-
--wui-radio-card-border-color: var(--wui-color-border-secondary-active);
|
|
12981
|
-
}
|
|
12982
|
-
|
|
12983
|
-
&:has(input:checked) {
|
|
12984
|
-
${checkedStyles}
|
|
12985
|
-
}
|
|
12986
|
-
|
|
12987
|
-
&:has(input:disabled) {
|
|
12988
|
-
${disabledStyles}
|
|
12989
|
-
}
|
|
12990
|
-
|
|
12991
|
-
&:has(input:focus-visible) {
|
|
12992
|
-
${focusStyles}
|
|
12993
|
-
}
|
|
12994
|
-
|
|
12995
|
-
&:has([data-wui-radio-card-image]) {
|
|
12996
|
-
&:has(input:disabled) {
|
|
12997
|
-
[data-wui-radio-card-image] {
|
|
12998
|
-
filter: grayscale(100%);
|
|
12999
|
-
}
|
|
13000
|
-
}
|
|
13001
|
-
|
|
13002
|
-
&:has([data-wui-radio-card-image='cover']) {
|
|
13003
|
-
${imageCoverStyles}
|
|
13004
|
-
}
|
|
13005
|
-
}
|
|
13006
|
-
`;
|
|
13007
|
-
var StyledHiddenInput = import_styled_components78.default.input`
|
|
13008
|
-
${visuallyHiddenStyle}
|
|
13009
|
-
`;
|
|
13010
|
-
var RadioCardRoot = (0, import_react62.forwardRef)(
|
|
13011
|
-
({
|
|
13012
|
-
children,
|
|
13013
|
-
disabled = false,
|
|
13014
|
-
id,
|
|
13015
|
-
name,
|
|
13016
|
-
onChange,
|
|
13017
|
-
value,
|
|
13018
|
-
aspectRatio = "initial",
|
|
13019
|
-
padding = "space-04",
|
|
13020
|
-
checked,
|
|
13021
|
-
...props
|
|
13022
|
-
}, ref) => {
|
|
13023
|
-
const generatedId = (0, import_react62.useId)();
|
|
13024
|
-
const computedId = (0, import_type_guards52.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
|
|
13025
|
-
const radioGroupContext = useRadioGroup();
|
|
13026
|
-
const contextName = radioGroupContext?.name;
|
|
13027
|
-
const contextOnChange = radioGroupContext?.onChange;
|
|
13028
|
-
const contextValue = radioGroupContext?.value;
|
|
13029
|
-
const radioName = name ?? contextName;
|
|
13030
|
-
const handleOnChange = onChange ?? contextOnChange;
|
|
13031
|
-
const defaultChecked = (0, import_type_guards52.isNotUndefined)(value) && (0, import_type_guards52.isNotUndefined)(contextValue) ? contextValue.includes(value) : void 0;
|
|
13032
|
-
return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
|
|
13033
|
-
StyledCard2,
|
|
13034
|
-
{
|
|
13035
|
-
$aspectRatio: aspectRatio,
|
|
13036
|
-
$padding: padding,
|
|
13037
|
-
htmlFor: computedId,
|
|
13038
|
-
children: [
|
|
13039
|
-
/* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
|
|
13040
|
-
StyledHiddenInput,
|
|
13041
|
-
{
|
|
13042
|
-
...props,
|
|
13043
|
-
ref,
|
|
13044
|
-
disabled,
|
|
13045
|
-
id: computedId,
|
|
13046
|
-
name: radioName,
|
|
13047
|
-
onChange: handleOnChange,
|
|
13048
|
-
type: "radio",
|
|
13049
|
-
value,
|
|
13050
|
-
...(0, import_type_guards52.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
|
|
13051
|
-
}
|
|
13052
|
-
),
|
|
13053
|
-
children
|
|
13054
|
-
]
|
|
13055
|
-
}
|
|
13056
|
-
);
|
|
13057
|
-
}
|
|
13058
|
-
);
|
|
13059
|
-
RadioCardRoot.displayName = "RadioCardRoot";
|
|
13060
|
-
|
|
13061
|
-
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
13062
|
-
var import_styled_components80 = __toESM(require("styled-components"));
|
|
13063
|
-
var import_type_guards53 = require("@wistia/type-guards");
|
|
13064
|
-
|
|
13065
|
-
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
13066
|
-
var import_styled_components79 = __toESM(require("styled-components"));
|
|
13067
|
-
var RadioCardIndicator = import_styled_components79.default.div`
|
|
13068
|
-
--wui-radio-card-indicator-size: 14px;
|
|
13069
|
-
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
|
|
13070
|
-
--wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
|
|
13071
|
-
|
|
13072
|
-
/* TODO: figure out radio / checkbox / switch colors */
|
|
13073
|
-
--wui-radio-card-indicator-border-color: var(--wui-color-border-secondary-active);
|
|
13074
|
-
|
|
13075
|
-
width: var(--wui-radio-card-indicator-size);
|
|
13076
|
-
height: var(--wui-radio-card-indicator-size);
|
|
13077
|
-
min-width: var(--wui-radio-card-indicator-size);
|
|
13078
|
-
min-height: var(--wui-radio-card-indicator-size);
|
|
13079
|
-
background-color: var(--wui-radio-card-indicator-background-color);
|
|
13080
|
-
box-shadow: inset 0 0 0 1px var(--wui-radio-card-indicator-border-color);
|
|
13081
|
-
border-radius: 100%;
|
|
13082
|
-
position: relative;
|
|
13083
|
-
cursor: pointer;
|
|
13084
|
-
transition: border-color var(--wui-motion-duration-03) var(--wui-motion-ease);
|
|
13085
|
-
|
|
13086
|
-
&::after {
|
|
13087
|
-
content: '';
|
|
13088
|
-
position: absolute;
|
|
13089
|
-
top: 50%;
|
|
13090
|
-
left: 50%;
|
|
13091
|
-
width: 0;
|
|
13092
|
-
height: 0;
|
|
13093
|
-
background-color: var(--wui-radio-card-indicator-fill-color);
|
|
13094
|
-
border-radius: 100%;
|
|
13095
|
-
transform: translate(-50%, -50%);
|
|
13096
|
-
}
|
|
13097
|
-
|
|
13098
|
-
${StyledCard2}:has(input:checked) & {
|
|
13099
|
-
--wui-radio-card-indicator-border-color: var(--wui-color-focus-ring);
|
|
13100
|
-
--wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
|
|
13101
|
-
|
|
13102
|
-
&::after {
|
|
13103
|
-
width: calc(var(--wui-radio-card-indicator-size) / 2);
|
|
13104
|
-
height: calc(var(--wui-radio-card-indicator-size) / 2);
|
|
13105
|
-
}
|
|
13106
|
-
}
|
|
13107
|
-
|
|
13108
|
-
${StyledCard2}:has(input:disabled) & {
|
|
13109
|
-
--wui-radio-card-indicator-border-color: var(--wui-color-border-secondary);
|
|
13110
|
-
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
|
|
13111
|
-
}
|
|
13112
|
-
`;
|
|
13113
|
-
RadioCardIndicator.displayName = "RadioCardIndicator";
|
|
13114
|
-
|
|
13115
|
-
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
13116
|
-
var import_jsx_runtime262 = require("react/jsx-runtime");
|
|
13117
|
-
var StyledCardContent = import_styled_components80.default.div`
|
|
13118
|
-
display: grid;
|
|
13119
|
-
grid-auto-flow: column;
|
|
13120
|
-
gap: var(--wui-space-02);
|
|
13121
|
-
`;
|
|
13122
|
-
var StyledCardIcon = import_styled_components80.default.div`
|
|
13123
|
-
display: contents;
|
|
13124
|
-
`;
|
|
13125
|
-
var StyledIndicatorContainer = import_styled_components80.default.div`
|
|
13126
|
-
height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
|
|
13127
|
-
display: flex;
|
|
13128
|
-
align-items: center;
|
|
13129
|
-
`;
|
|
13130
|
-
var RadioCardDefaultLayout = ({
|
|
13131
|
-
icon,
|
|
13132
|
-
label,
|
|
13133
|
-
description,
|
|
13134
|
-
showIndicator = true
|
|
13135
|
-
}) => {
|
|
13136
|
-
return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(StyledCardContent, { children: [
|
|
13137
|
-
showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledIndicatorContainer, { $hasIcon: (0, import_type_guards53.isNotNil)(icon), children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
|
|
13138
|
-
/* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(Stack, { gap: "space-02", children: [
|
|
13139
|
-
(0, import_type_guards53.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
|
|
13140
|
-
/* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
|
|
13141
|
-
Stack,
|
|
13142
|
-
{
|
|
13143
|
-
gap: "space-01",
|
|
13144
|
-
style: (0, import_type_guards53.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
|
|
13145
|
-
children: [
|
|
13146
|
-
/* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("strong", { children: label }) }),
|
|
13147
|
-
(0, import_type_guards53.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
|
|
13148
|
-
Text,
|
|
13149
|
-
{
|
|
13150
|
-
prominence: "secondary",
|
|
13151
|
-
variant: "body3",
|
|
13152
|
-
children: description
|
|
13153
|
-
}
|
|
13154
|
-
)
|
|
13155
|
-
]
|
|
13156
|
-
}
|
|
13157
|
-
)
|
|
13158
|
-
] })
|
|
13159
|
-
] });
|
|
13160
|
-
};
|
|
13161
|
-
RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
|
|
13162
|
-
|
|
13163
|
-
// src/components/RadioCard/RadioCard.tsx
|
|
13164
|
-
var import_jsx_runtime263 = require("react/jsx-runtime");
|
|
13165
|
-
var RadioCard = (0, import_react63.forwardRef)(
|
|
13166
|
-
({ icon, label, description, showIndicator, ...rootProps }, ref) => {
|
|
13167
|
-
return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
|
|
13168
|
-
RadioCardRoot,
|
|
13169
|
-
{
|
|
13170
|
-
ref,
|
|
13171
|
-
...rootProps,
|
|
13172
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
|
|
13173
|
-
RadioCardDefaultLayout,
|
|
13174
|
-
{
|
|
13175
|
-
description,
|
|
13176
|
-
icon,
|
|
13177
|
-
label,
|
|
13178
|
-
showIndicator
|
|
13179
|
-
}
|
|
13180
|
-
)
|
|
13181
|
-
}
|
|
13182
|
-
);
|
|
13183
|
-
}
|
|
13184
|
-
);
|
|
13185
|
-
RadioCard.displayName = "RadioCard";
|
|
13186
|
-
|
|
13187
|
-
// src/components/RadioCard/RadioCardImage.tsx
|
|
13188
|
-
var import_react64 = require("react");
|
|
13189
|
-
var import_jsx_runtime264 = require("react/jsx-runtime");
|
|
13190
|
-
var RadioCardImage = (0, import_react64.forwardRef)(
|
|
13191
|
-
({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
|
|
13192
|
-
return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
|
|
13193
|
-
RadioCardRoot,
|
|
13194
|
-
{
|
|
13195
|
-
ref,
|
|
13196
|
-
...rootProps,
|
|
13197
|
-
aspectRatio,
|
|
13198
|
-
padding,
|
|
13199
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
|
|
13200
|
-
Image,
|
|
13201
|
-
{
|
|
13202
|
-
alt: label,
|
|
13203
|
-
"data-wui-radio-card-image": padding === "space-00" ? "cover" : "contain",
|
|
13204
|
-
fill: true,
|
|
13205
|
-
fit: padding === "space-00" ? "cover" : "contain",
|
|
13206
|
-
src: imageSrc
|
|
13207
|
-
}
|
|
13208
|
-
)
|
|
13209
|
-
}
|
|
13210
|
-
);
|
|
13211
|
-
}
|
|
13212
|
-
);
|
|
13213
|
-
RadioCardImage.displayName = "RadioCardImage";
|
|
13214
|
-
|
|
13215
12895
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
13216
|
-
var
|
|
13217
|
-
var
|
|
12896
|
+
var import_react64 = require("react");
|
|
12897
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
13218
12898
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
13219
|
-
var
|
|
12899
|
+
var import_type_guards53 = require("@wistia/type-guards");
|
|
13220
12900
|
|
|
13221
12901
|
// src/components/SegmentedControl/useSelectedItemStyle.tsx
|
|
13222
|
-
var
|
|
13223
|
-
var
|
|
13224
|
-
var SelectedItemStyleContext = (0,
|
|
12902
|
+
var import_react62 = require("react");
|
|
12903
|
+
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
12904
|
+
var SelectedItemStyleContext = (0, import_react62.createContext)(null);
|
|
13225
12905
|
var SelectedItemStyleProvider = ({
|
|
13226
12906
|
children
|
|
13227
12907
|
}) => {
|
|
13228
|
-
const [selectedItemMeasurements, setSelectedItemMeasurements] = (0,
|
|
13229
|
-
const selectedItemIndicatorStyle = (0,
|
|
12908
|
+
const [selectedItemMeasurements, setSelectedItemMeasurements] = (0, import_react62.useState)(null);
|
|
12909
|
+
const selectedItemIndicatorStyle = (0, import_react62.useMemo)(
|
|
13230
12910
|
() => selectedItemMeasurements != null ? {
|
|
13231
12911
|
height: `${selectedItemMeasurements.offsetHeight}px`,
|
|
13232
12912
|
transform: `translateX(${selectedItemMeasurements.offsetLeft}px) translateY(-50%)`,
|
|
@@ -13234,17 +12914,17 @@ var SelectedItemStyleProvider = ({
|
|
|
13234
12914
|
} : void 0,
|
|
13235
12915
|
[selectedItemMeasurements]
|
|
13236
12916
|
);
|
|
13237
|
-
const contextValue = (0,
|
|
12917
|
+
const contextValue = (0, import_react62.useMemo)(
|
|
13238
12918
|
() => ({
|
|
13239
12919
|
setSelectedItemMeasurements,
|
|
13240
12920
|
selectedItemIndicatorStyle
|
|
13241
12921
|
}),
|
|
13242
12922
|
[selectedItemIndicatorStyle]
|
|
13243
12923
|
);
|
|
13244
|
-
return /* @__PURE__ */ (0,
|
|
12924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
|
|
13245
12925
|
};
|
|
13246
12926
|
var useSelectedItemStyle = () => {
|
|
13247
|
-
const context = (0,
|
|
12927
|
+
const context = (0, import_react62.useContext)(SelectedItemStyleContext);
|
|
13248
12928
|
if (context === null) {
|
|
13249
12929
|
throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
|
|
13250
12930
|
}
|
|
@@ -13252,15 +12932,15 @@ var useSelectedItemStyle = () => {
|
|
|
13252
12932
|
};
|
|
13253
12933
|
|
|
13254
12934
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
13255
|
-
var
|
|
13256
|
-
var
|
|
12935
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
12936
|
+
var import_type_guards52 = require("@wistia/type-guards");
|
|
13257
12937
|
|
|
13258
12938
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
13259
|
-
var
|
|
13260
|
-
var SegmentedControlValueContext = (0,
|
|
12939
|
+
var import_react63 = require("react");
|
|
12940
|
+
var SegmentedControlValueContext = (0, import_react63.createContext)(null);
|
|
13261
12941
|
var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
|
|
13262
12942
|
var useSegmentedControlValue = () => {
|
|
13263
|
-
const context = (0,
|
|
12943
|
+
const context = (0, import_react63.useContext)(SegmentedControlValueContext);
|
|
13264
12944
|
if (context === null) {
|
|
13265
12945
|
throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
|
|
13266
12946
|
}
|
|
@@ -13268,13 +12948,13 @@ var useSegmentedControlValue = () => {
|
|
|
13268
12948
|
};
|
|
13269
12949
|
|
|
13270
12950
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
13271
|
-
var
|
|
13272
|
-
var selectedItemIndicatorStyles =
|
|
12951
|
+
var import_jsx_runtime262 = require("react/jsx-runtime");
|
|
12952
|
+
var selectedItemIndicatorStyles = import_styled_components78.css`
|
|
13273
12953
|
background-color: var(--wui-color-bg-fill-white);
|
|
13274
12954
|
border-radius: var(--wui-border-radius-rounded);
|
|
13275
12955
|
box-shadow: var(--wui-elevation-01);
|
|
13276
12956
|
`;
|
|
13277
|
-
var SelectedItemIndicatorDiv =
|
|
12957
|
+
var SelectedItemIndicatorDiv = import_styled_components78.default.div`
|
|
13278
12958
|
${selectedItemIndicatorStyles}
|
|
13279
12959
|
left: 0;
|
|
13280
12960
|
position: absolute;
|
|
@@ -13287,10 +12967,10 @@ var SelectedItemIndicatorDiv = import_styled_components81.default.div`
|
|
|
13287
12967
|
var SelectedItemIndicator = () => {
|
|
13288
12968
|
const selectedValue = useSegmentedControlValue();
|
|
13289
12969
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
13290
|
-
if (!selectedValue || (0,
|
|
12970
|
+
if (!selectedValue || (0, import_type_guards52.isUndefined)(selectedItemIndicatorStyle)) {
|
|
13291
12971
|
return null;
|
|
13292
12972
|
}
|
|
13293
|
-
return /* @__PURE__ */ (0,
|
|
12973
|
+
return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
|
|
13294
12974
|
SelectedItemIndicatorDiv,
|
|
13295
12975
|
{
|
|
13296
12976
|
"data-wui-selected-item-indicator": true,
|
|
@@ -13300,8 +12980,8 @@ var SelectedItemIndicator = () => {
|
|
|
13300
12980
|
};
|
|
13301
12981
|
|
|
13302
12982
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
13303
|
-
var
|
|
13304
|
-
var segmentedControlStyles =
|
|
12983
|
+
var import_jsx_runtime263 = require("react/jsx-runtime");
|
|
12984
|
+
var segmentedControlStyles = import_styled_components79.css`
|
|
13305
12985
|
display: inline-flex;
|
|
13306
12986
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
13307
12987
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -13312,10 +12992,10 @@ var segmentedControlStyles = import_styled_components82.css`
|
|
|
13312
12992
|
position: relative;
|
|
13313
12993
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
13314
12994
|
`;
|
|
13315
|
-
var StyledSegmentedControl = (0,
|
|
12995
|
+
var StyledSegmentedControl = (0, import_styled_components79.default)(import_react_toggle_group.Root)`
|
|
13316
12996
|
${segmentedControlStyles}
|
|
13317
12997
|
`;
|
|
13318
|
-
var SegmentedControl = (0,
|
|
12998
|
+
var SegmentedControl = (0, import_react64.forwardRef)(
|
|
13319
12999
|
({
|
|
13320
13000
|
children,
|
|
13321
13001
|
disabled = false,
|
|
@@ -13324,10 +13004,10 @@ var SegmentedControl = (0, import_react67.forwardRef)(
|
|
|
13324
13004
|
onSelectedValueChange,
|
|
13325
13005
|
...props
|
|
13326
13006
|
}, ref) => {
|
|
13327
|
-
if ((0,
|
|
13007
|
+
if ((0, import_type_guards53.isNil)(children)) {
|
|
13328
13008
|
return null;
|
|
13329
13009
|
}
|
|
13330
|
-
return /* @__PURE__ */ (0,
|
|
13010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
|
|
13331
13011
|
StyledSegmentedControl,
|
|
13332
13012
|
{
|
|
13333
13013
|
ref,
|
|
@@ -13339,9 +13019,9 @@ var SegmentedControl = (0, import_react67.forwardRef)(
|
|
|
13339
13019
|
type: "single",
|
|
13340
13020
|
value: selectedValue,
|
|
13341
13021
|
...props,
|
|
13342
|
-
children: /* @__PURE__ */ (0,
|
|
13022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(SelectedItemStyleProvider, { children: [
|
|
13343
13023
|
children,
|
|
13344
|
-
/* @__PURE__ */ (0,
|
|
13024
|
+
/* @__PURE__ */ (0, import_jsx_runtime263.jsx)(SelectedItemIndicator, {})
|
|
13345
13025
|
] }) })
|
|
13346
13026
|
}
|
|
13347
13027
|
);
|
|
@@ -13350,12 +13030,12 @@ var SegmentedControl = (0, import_react67.forwardRef)(
|
|
|
13350
13030
|
SegmentedControl.displayName = "SegmentedControl";
|
|
13351
13031
|
|
|
13352
13032
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
13353
|
-
var
|
|
13354
|
-
var
|
|
13033
|
+
var import_react65 = require("react");
|
|
13034
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
13355
13035
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
13356
|
-
var
|
|
13357
|
-
var
|
|
13358
|
-
var segmentedControlItemStyles =
|
|
13036
|
+
var import_type_guards54 = require("@wistia/type-guards");
|
|
13037
|
+
var import_jsx_runtime264 = require("react/jsx-runtime");
|
|
13038
|
+
var segmentedControlItemStyles = import_styled_components80.css`
|
|
13359
13039
|
all: unset; /* ToggleGroupItem is a button element */
|
|
13360
13040
|
align-items: center;
|
|
13361
13041
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -13422,14 +13102,14 @@ var segmentedControlItemStyles = import_styled_components83.css`
|
|
|
13422
13102
|
}
|
|
13423
13103
|
}
|
|
13424
13104
|
`;
|
|
13425
|
-
var StyledSegmentedControlItem = (0,
|
|
13105
|
+
var StyledSegmentedControlItem = (0, import_styled_components80.default)(import_react_toggle_group2.Item)`
|
|
13426
13106
|
${segmentedControlItemStyles}
|
|
13427
13107
|
`;
|
|
13428
|
-
var SegmentedControlItem = (0,
|
|
13108
|
+
var SegmentedControlItem = (0, import_react65.forwardRef)(
|
|
13429
13109
|
({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
13430
13110
|
const selectedValue = useSegmentedControlValue();
|
|
13431
13111
|
const { setSelectedItemMeasurements } = useSelectedItemStyle();
|
|
13432
|
-
const buttonRef = (0,
|
|
13112
|
+
const buttonRef = (0, import_react65.useRef)(null);
|
|
13433
13113
|
const combinedRef = mergeRefs([buttonRef, forwardedRef]);
|
|
13434
13114
|
const handleClick = (event) => {
|
|
13435
13115
|
const target = event.target;
|
|
@@ -13438,7 +13118,7 @@ var SegmentedControlItem = (0, import_react68.forwardRef)(
|
|
|
13438
13118
|
event.preventDefault();
|
|
13439
13119
|
}
|
|
13440
13120
|
};
|
|
13441
|
-
(0,
|
|
13121
|
+
(0, import_react65.useEffect)(() => {
|
|
13442
13122
|
const buttonElem = buttonRef.current;
|
|
13443
13123
|
if (!buttonElem) {
|
|
13444
13124
|
return void 0;
|
|
@@ -13463,13 +13143,13 @@ var SegmentedControlItem = (0, import_react68.forwardRef)(
|
|
|
13463
13143
|
resizeObserver.disconnect();
|
|
13464
13144
|
};
|
|
13465
13145
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
13466
|
-
return /* @__PURE__ */ (0,
|
|
13146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
|
|
13467
13147
|
StyledSegmentedControlItem,
|
|
13468
13148
|
{
|
|
13469
13149
|
ref: combinedRef,
|
|
13470
13150
|
...otherProps,
|
|
13471
|
-
$hasLabel: (0,
|
|
13472
|
-
"aria-label": (0,
|
|
13151
|
+
$hasLabel: (0, import_type_guards54.isNotNil)(label),
|
|
13152
|
+
"aria-label": (0, import_type_guards54.isNotNil)(label) ? void 0 : ariaLabel,
|
|
13473
13153
|
disabled,
|
|
13474
13154
|
onClick: handleClick,
|
|
13475
13155
|
value,
|
|
@@ -13485,10 +13165,10 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
|
13485
13165
|
|
|
13486
13166
|
// src/components/Select/Select.tsx
|
|
13487
13167
|
var import_react_select = require("@radix-ui/react-select");
|
|
13488
|
-
var
|
|
13489
|
-
var
|
|
13490
|
-
var
|
|
13491
|
-
var StyledTrigger2 = (0,
|
|
13168
|
+
var import_react66 = require("react");
|
|
13169
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
13170
|
+
var import_jsx_runtime265 = require("react/jsx-runtime");
|
|
13171
|
+
var StyledTrigger2 = (0, import_styled_components81.default)(import_react_select.Trigger)`
|
|
13492
13172
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
13493
13173
|
${inputCss};
|
|
13494
13174
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -13532,7 +13212,7 @@ var StyledTrigger2 = (0, import_styled_components84.default)(import_react_select
|
|
|
13532
13212
|
color: var(--wui-input-placeholder);
|
|
13533
13213
|
}
|
|
13534
13214
|
`;
|
|
13535
|
-
var StyledContent3 = (0,
|
|
13215
|
+
var StyledContent3 = (0, import_styled_components81.default)(import_react_select.Content)`
|
|
13536
13216
|
--wui-select-content-border: var(--wui-color-border);
|
|
13537
13217
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
13538
13218
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -13550,7 +13230,7 @@ var StyledContent3 = (0, import_styled_components84.default)(import_react_select
|
|
|
13550
13230
|
max-height: var(--radix-select-content-available-height);
|
|
13551
13231
|
z-index: var(--wui-zindex-select);
|
|
13552
13232
|
`;
|
|
13553
|
-
var Select = (0,
|
|
13233
|
+
var Select = (0, import_react66.forwardRef)(
|
|
13554
13234
|
({
|
|
13555
13235
|
colorScheme = "inherit",
|
|
13556
13236
|
children,
|
|
@@ -13560,13 +13240,13 @@ var Select = (0, import_react69.forwardRef)(
|
|
|
13560
13240
|
...props
|
|
13561
13241
|
}, forwardedRef) => {
|
|
13562
13242
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
13563
|
-
return /* @__PURE__ */ (0,
|
|
13243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
|
|
13564
13244
|
import_react_select.Root,
|
|
13565
13245
|
{
|
|
13566
13246
|
...props,
|
|
13567
13247
|
onValueChange: onChange,
|
|
13568
13248
|
children: [
|
|
13569
|
-
/* @__PURE__ */ (0,
|
|
13249
|
+
/* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
|
|
13570
13250
|
StyledTrigger2,
|
|
13571
13251
|
{
|
|
13572
13252
|
ref: forwardedRef,
|
|
@@ -13574,8 +13254,8 @@ var Select = (0, import_react69.forwardRef)(
|
|
|
13574
13254
|
$fullWidth: responsiveFullWidth,
|
|
13575
13255
|
...props,
|
|
13576
13256
|
children: [
|
|
13577
|
-
/* @__PURE__ */ (0,
|
|
13578
|
-
/* @__PURE__ */ (0,
|
|
13257
|
+
/* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_select.Value, { placeholder }),
|
|
13258
|
+
/* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
|
|
13579
13259
|
Icon,
|
|
13580
13260
|
{
|
|
13581
13261
|
size: "md",
|
|
@@ -13585,10 +13265,10 @@ var Select = (0, import_react69.forwardRef)(
|
|
|
13585
13265
|
]
|
|
13586
13266
|
}
|
|
13587
13267
|
),
|
|
13588
|
-
/* @__PURE__ */ (0,
|
|
13589
|
-
/* @__PURE__ */ (0,
|
|
13590
|
-
/* @__PURE__ */ (0,
|
|
13591
|
-
/* @__PURE__ */ (0,
|
|
13268
|
+
/* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(StyledContent3, { position: "popper", children: [
|
|
13269
|
+
/* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { type: "caret-up" }) }),
|
|
13270
|
+
/* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_select.Viewport, { children }),
|
|
13271
|
+
/* @__PURE__ */ (0, import_jsx_runtime265.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { type: "caret-down" }) })
|
|
13592
13272
|
] }) })
|
|
13593
13273
|
]
|
|
13594
13274
|
}
|
|
@@ -13599,11 +13279,11 @@ Select.displayName = "Select";
|
|
|
13599
13279
|
|
|
13600
13280
|
// src/components/Select/SelectOption.tsx
|
|
13601
13281
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
13602
|
-
var
|
|
13603
|
-
var
|
|
13604
|
-
var
|
|
13605
|
-
var
|
|
13606
|
-
var StyledItem = (0,
|
|
13282
|
+
var import_react67 = require("react");
|
|
13283
|
+
var import_styled_components82 = __toESM(require("styled-components"));
|
|
13284
|
+
var import_type_guards55 = require("@wistia/type-guards");
|
|
13285
|
+
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
13286
|
+
var StyledItem = (0, import_styled_components82.default)(import_react_select2.Item)`
|
|
13607
13287
|
${variantStyleMap2.body3};
|
|
13608
13288
|
display: flex;
|
|
13609
13289
|
padding: var(--wui-select-option-padding);
|
|
@@ -13627,28 +13307,28 @@ var StyledItem = (0, import_styled_components85.default)(import_react_select2.It
|
|
|
13627
13307
|
background-color: transparent;
|
|
13628
13308
|
}
|
|
13629
13309
|
`;
|
|
13630
|
-
var StyledIconContainer =
|
|
13310
|
+
var StyledIconContainer = import_styled_components82.default.span`
|
|
13631
13311
|
width: 12px;
|
|
13632
13312
|
`;
|
|
13633
|
-
var SelectOption = (0,
|
|
13313
|
+
var SelectOption = (0, import_react67.forwardRef)(
|
|
13634
13314
|
({ children, selectedDisplayValue, ...props }, forwardedRef) => {
|
|
13635
|
-
return /* @__PURE__ */ (0,
|
|
13315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
|
|
13636
13316
|
StyledItem,
|
|
13637
13317
|
{
|
|
13638
13318
|
...props,
|
|
13639
13319
|
ref: forwardedRef,
|
|
13640
13320
|
children: [
|
|
13641
|
-
/* @__PURE__ */ (0,
|
|
13321
|
+
/* @__PURE__ */ (0, import_jsx_runtime266.jsx)(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
|
|
13642
13322
|
Icon,
|
|
13643
13323
|
{
|
|
13644
13324
|
size: "sm",
|
|
13645
13325
|
type: "checkmark"
|
|
13646
13326
|
}
|
|
13647
13327
|
) }) }),
|
|
13648
|
-
(0,
|
|
13328
|
+
(0, import_type_guards55.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)("div", { children: [
|
|
13649
13329
|
children,
|
|
13650
|
-
/* @__PURE__ */ (0,
|
|
13651
|
-
] }) : /* @__PURE__ */ (0,
|
|
13330
|
+
/* @__PURE__ */ (0, import_jsx_runtime266.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
13331
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(import_react_select2.ItemText, { children })
|
|
13652
13332
|
]
|
|
13653
13333
|
}
|
|
13654
13334
|
);
|
|
@@ -13658,14 +13338,14 @@ SelectOption.displayName = "SelectOption";
|
|
|
13658
13338
|
|
|
13659
13339
|
// src/components/Select/SelectOptionGroup.tsx
|
|
13660
13340
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
13661
|
-
var
|
|
13662
|
-
var
|
|
13663
|
-
var StyledLabel4 = (0,
|
|
13341
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
13342
|
+
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
13343
|
+
var StyledLabel4 = (0, import_styled_components83.default)(import_react_select3.Label)`
|
|
13664
13344
|
padding: var(--wui-select-option-padding);
|
|
13665
13345
|
`;
|
|
13666
13346
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
13667
|
-
return /* @__PURE__ */ (0,
|
|
13668
|
-
/* @__PURE__ */ (0,
|
|
13347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
13348
|
+
/* @__PURE__ */ (0, import_jsx_runtime267.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
|
|
13669
13349
|
Text,
|
|
13670
13350
|
{
|
|
13671
13351
|
prominence: "secondary",
|
|
@@ -13679,10 +13359,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
13679
13359
|
|
|
13680
13360
|
// src/components/Slider/Slider.tsx
|
|
13681
13361
|
var import_react_slider = require("@radix-ui/react-slider");
|
|
13682
|
-
var
|
|
13683
|
-
var
|
|
13684
|
-
var
|
|
13685
|
-
var SliderContainer =
|
|
13362
|
+
var import_styled_components84 = __toESM(require("styled-components"));
|
|
13363
|
+
var import_type_guards56 = require("@wistia/type-guards");
|
|
13364
|
+
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13365
|
+
var SliderContainer = import_styled_components84.default.div`
|
|
13686
13366
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
13687
13367
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
13688
13368
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -13698,7 +13378,7 @@ var SliderContainer = import_styled_components87.default.div`
|
|
|
13698
13378
|
pointer-events: none;
|
|
13699
13379
|
}
|
|
13700
13380
|
`;
|
|
13701
|
-
var StyledSliderRoot = (0,
|
|
13381
|
+
var StyledSliderRoot = (0, import_styled_components84.default)(import_react_slider.Root)`
|
|
13702
13382
|
position: relative;
|
|
13703
13383
|
display: flex;
|
|
13704
13384
|
align-items: center;
|
|
@@ -13706,20 +13386,20 @@ var StyledSliderRoot = (0, import_styled_components87.default)(import_react_slid
|
|
|
13706
13386
|
touch-action: none;
|
|
13707
13387
|
width: 100%;
|
|
13708
13388
|
`;
|
|
13709
|
-
var StyledSliderTrack = (0,
|
|
13389
|
+
var StyledSliderTrack = (0, import_styled_components84.default)(import_react_slider.Track)`
|
|
13710
13390
|
background-color: var(--wui-slider-track-color);
|
|
13711
13391
|
border-radius: var(--wui-slider-track-border-radius);
|
|
13712
13392
|
flex-grow: 1;
|
|
13713
13393
|
height: 6px;
|
|
13714
13394
|
position: relative;
|
|
13715
13395
|
`;
|
|
13716
|
-
var StyledSliderRange = (0,
|
|
13396
|
+
var StyledSliderRange = (0, import_styled_components84.default)(import_react_slider.Range)`
|
|
13717
13397
|
background-color: var(--wui-slider-range-color);
|
|
13718
13398
|
border-radius: var(--wui-slider-track-border-radius);
|
|
13719
13399
|
height: 100%;
|
|
13720
13400
|
position: absolute;
|
|
13721
13401
|
`;
|
|
13722
|
-
var StyledSliderThumb = (0,
|
|
13402
|
+
var StyledSliderThumb = (0, import_styled_components84.default)(import_react_slider.Thumb)`
|
|
13723
13403
|
background-color: var(--wui-slider-thumb-color);
|
|
13724
13404
|
border-radius: var(--wui-border-radius-rounded);
|
|
13725
13405
|
cursor: grab;
|
|
@@ -13759,7 +13439,7 @@ var Slider = ({
|
|
|
13759
13439
|
"data-testid": dataTestId = "ui-slider",
|
|
13760
13440
|
...otherProps
|
|
13761
13441
|
}) => {
|
|
13762
|
-
if (!((0,
|
|
13442
|
+
if (!((0, import_type_guards56.isNonEmptyString)(ariaLabel) || (0, import_type_guards56.isNonEmptyString)(ariaLabelledby))) {
|
|
13763
13443
|
throw new Error(
|
|
13764
13444
|
"UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
|
|
13765
13445
|
);
|
|
@@ -13770,12 +13450,12 @@ var Slider = ({
|
|
|
13770
13450
|
onChange(newValue);
|
|
13771
13451
|
}
|
|
13772
13452
|
};
|
|
13773
|
-
return /* @__PURE__ */ (0,
|
|
13453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
13774
13454
|
SliderContainer,
|
|
13775
13455
|
{
|
|
13776
13456
|
...otherProps,
|
|
13777
13457
|
"data-testid": dataTestId,
|
|
13778
|
-
children: /* @__PURE__ */ (0,
|
|
13458
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
|
|
13779
13459
|
StyledSliderRoot,
|
|
13780
13460
|
{
|
|
13781
13461
|
"aria-label": ariaLabel,
|
|
@@ -13788,8 +13468,8 @@ var Slider = ({
|
|
|
13788
13468
|
step,
|
|
13789
13469
|
...value ? { value } : {},
|
|
13790
13470
|
children: [
|
|
13791
|
-
/* @__PURE__ */ (0,
|
|
13792
|
-
values.map((_, index) => /* @__PURE__ */ (0,
|
|
13471
|
+
/* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
|
|
13472
|
+
values.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
|
|
13793
13473
|
StyledSliderThumb,
|
|
13794
13474
|
{
|
|
13795
13475
|
"data-testid": `${dataTestId}-thumb-${index}`
|
|
@@ -13805,11 +13485,11 @@ var Slider = ({
|
|
|
13805
13485
|
Slider.displayName = "Slider";
|
|
13806
13486
|
|
|
13807
13487
|
// src/components/Switch/Switch.tsx
|
|
13808
|
-
var
|
|
13809
|
-
var
|
|
13810
|
-
var
|
|
13811
|
-
var
|
|
13812
|
-
var sizeSmall3 =
|
|
13488
|
+
var import_react68 = require("react");
|
|
13489
|
+
var import_styled_components85 = __toESM(require("styled-components"));
|
|
13490
|
+
var import_type_guards57 = require("@wistia/type-guards");
|
|
13491
|
+
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
13492
|
+
var sizeSmall3 = import_styled_components85.css`
|
|
13813
13493
|
--wui-size-small-width: 24px;
|
|
13814
13494
|
--wui-size-small-height: 14px;
|
|
13815
13495
|
|
|
@@ -13824,7 +13504,7 @@ var sizeSmall3 = import_styled_components88.css`
|
|
|
13824
13504
|
height: calc(var(--wui-size-small-width) / 2);
|
|
13825
13505
|
}
|
|
13826
13506
|
`;
|
|
13827
|
-
var sizeMedium3 =
|
|
13507
|
+
var sizeMedium3 = import_styled_components85.css`
|
|
13828
13508
|
--wui-size-medium-width: 32px;
|
|
13829
13509
|
--wui-size-medium-height: 18px;
|
|
13830
13510
|
|
|
@@ -13839,7 +13519,7 @@ var sizeMedium3 = import_styled_components88.css`
|
|
|
13839
13519
|
height: calc(var(--wui-size-medium-width) / 2);
|
|
13840
13520
|
}
|
|
13841
13521
|
`;
|
|
13842
|
-
var sizeLarge3 =
|
|
13522
|
+
var sizeLarge3 = import_styled_components85.css`
|
|
13843
13523
|
--wui-size-large-width: 40px;
|
|
13844
13524
|
--wui-size-large-height: 22px;
|
|
13845
13525
|
|
|
@@ -13859,14 +13539,14 @@ var getSizeCss3 = (size) => {
|
|
|
13859
13539
|
if (size === "lg") return sizeLarge3;
|
|
13860
13540
|
return sizeMedium3;
|
|
13861
13541
|
};
|
|
13862
|
-
var StyledSwitchWrapper =
|
|
13542
|
+
var StyledSwitchWrapper = import_styled_components85.default.div`
|
|
13863
13543
|
display: flex;
|
|
13864
13544
|
margin: 0;
|
|
13865
13545
|
|
|
13866
13546
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
13867
13547
|
user-select: none;
|
|
13868
13548
|
`;
|
|
13869
|
-
var StyledSwitchInput =
|
|
13549
|
+
var StyledSwitchInput = import_styled_components85.default.div`
|
|
13870
13550
|
${({ $size }) => getSizeCss3($size)}
|
|
13871
13551
|
line-height: 0;
|
|
13872
13552
|
margin: 0;
|
|
@@ -13894,7 +13574,7 @@ var StyledSwitchInput = import_styled_components88.default.div`
|
|
|
13894
13574
|
transition: all 0.2s ease-in-out;
|
|
13895
13575
|
}
|
|
13896
13576
|
`;
|
|
13897
|
-
var StyledHiddenSwitchInput =
|
|
13577
|
+
var StyledHiddenSwitchInput = import_styled_components85.default.input`
|
|
13898
13578
|
${visuallyHiddenStyle}
|
|
13899
13579
|
|
|
13900
13580
|
/* toggles display of faux-input background-color and toggle position */
|
|
@@ -13910,7 +13590,7 @@ var StyledHiddenSwitchInput = import_styled_components88.default.input`
|
|
|
13910
13590
|
}
|
|
13911
13591
|
}
|
|
13912
13592
|
`;
|
|
13913
|
-
var Switch = (0,
|
|
13593
|
+
var Switch = (0, import_react68.forwardRef)(
|
|
13914
13594
|
({
|
|
13915
13595
|
align = "left",
|
|
13916
13596
|
checked,
|
|
@@ -13926,10 +13606,10 @@ var Switch = (0, import_react71.forwardRef)(
|
|
|
13926
13606
|
hideLabel = false,
|
|
13927
13607
|
...props
|
|
13928
13608
|
}, ref) => {
|
|
13929
|
-
const generatedId = (0,
|
|
13930
|
-
const computedId = (0,
|
|
13931
|
-
return /* @__PURE__ */ (0,
|
|
13932
|
-
/* @__PURE__ */ (0,
|
|
13609
|
+
const generatedId = (0, import_react68.useId)();
|
|
13610
|
+
const computedId = (0, import_type_guards57.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
|
|
13611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
|
|
13612
|
+
/* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
|
|
13933
13613
|
StyledHiddenSwitchInput,
|
|
13934
13614
|
{
|
|
13935
13615
|
...props,
|
|
@@ -13944,11 +13624,11 @@ var Switch = (0, import_react71.forwardRef)(
|
|
|
13944
13624
|
value
|
|
13945
13625
|
}
|
|
13946
13626
|
),
|
|
13947
|
-
/* @__PURE__ */ (0,
|
|
13627
|
+
/* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
|
|
13948
13628
|
FormControlLabel,
|
|
13949
13629
|
{
|
|
13950
13630
|
align,
|
|
13951
|
-
controlSlot: /* @__PURE__ */ (0,
|
|
13631
|
+
controlSlot: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
|
|
13952
13632
|
StyledSwitchInput,
|
|
13953
13633
|
{
|
|
13954
13634
|
$disabled: disabled,
|
|
@@ -13970,25 +13650,25 @@ var Switch = (0, import_react71.forwardRef)(
|
|
|
13970
13650
|
Switch.displayName = "Switch";
|
|
13971
13651
|
|
|
13972
13652
|
// src/components/Table/Table.tsx
|
|
13973
|
-
var
|
|
13974
|
-
var
|
|
13975
|
-
var StyledTable =
|
|
13653
|
+
var import_styled_components86 = __toESM(require("styled-components"));
|
|
13654
|
+
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13655
|
+
var StyledTable = import_styled_components86.default.table`
|
|
13976
13656
|
width: 100%;
|
|
13977
13657
|
border-collapse: collapse;
|
|
13978
13658
|
|
|
13979
|
-
${({ $divided }) => $divided &&
|
|
13659
|
+
${({ $divided }) => $divided && import_styled_components86.css`
|
|
13980
13660
|
tr {
|
|
13981
13661
|
border-bottom: 1px solid var(--wui-color-border);
|
|
13982
13662
|
}
|
|
13983
13663
|
`}
|
|
13984
13664
|
|
|
13985
|
-
${({ $striped }) => $striped &&
|
|
13665
|
+
${({ $striped }) => $striped && import_styled_components86.css`
|
|
13986
13666
|
tbody tr:nth-child(even) {
|
|
13987
13667
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
13988
13668
|
}
|
|
13989
13669
|
`}
|
|
13990
13670
|
|
|
13991
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
13671
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components86.css`
|
|
13992
13672
|
thead {
|
|
13993
13673
|
${visuallyHiddenStyle}
|
|
13994
13674
|
}
|
|
@@ -14001,7 +13681,7 @@ var Table = ({
|
|
|
14001
13681
|
visuallyHiddenHeader = false,
|
|
14002
13682
|
...props
|
|
14003
13683
|
}) => {
|
|
14004
|
-
return /* @__PURE__ */ (0,
|
|
13684
|
+
return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
|
|
14005
13685
|
StyledTable,
|
|
14006
13686
|
{
|
|
14007
13687
|
$divided: divided,
|
|
@@ -14014,83 +13694,83 @@ var Table = ({
|
|
|
14014
13694
|
};
|
|
14015
13695
|
|
|
14016
13696
|
// src/components/Table/TableBody.tsx
|
|
14017
|
-
var
|
|
13697
|
+
var import_styled_components87 = __toESM(require("styled-components"));
|
|
14018
13698
|
|
|
14019
13699
|
// src/components/Table/TableSectionContext.ts
|
|
14020
|
-
var
|
|
14021
|
-
var TableSectionContext = (0,
|
|
13700
|
+
var import_react69 = require("react");
|
|
13701
|
+
var TableSectionContext = (0, import_react69.createContext)(null);
|
|
14022
13702
|
|
|
14023
13703
|
// src/components/Table/TableBody.tsx
|
|
14024
|
-
var
|
|
14025
|
-
var StyledTableBody =
|
|
13704
|
+
var import_jsx_runtime271 = require("react/jsx-runtime");
|
|
13705
|
+
var StyledTableBody = import_styled_components87.default.tbody``;
|
|
14026
13706
|
var TableBody = ({ children, ...props }) => {
|
|
14027
|
-
return /* @__PURE__ */ (0,
|
|
13707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(StyledTableBody, { ...props, children }) });
|
|
14028
13708
|
};
|
|
14029
13709
|
|
|
14030
13710
|
// src/components/Table/TableCell.tsx
|
|
14031
|
-
var
|
|
14032
|
-
var
|
|
14033
|
-
var
|
|
14034
|
-
var sharedStyles =
|
|
13711
|
+
var import_react70 = require("react");
|
|
13712
|
+
var import_styled_components88 = __toESM(require("styled-components"));
|
|
13713
|
+
var import_jsx_runtime272 = require("react/jsx-runtime");
|
|
13714
|
+
var sharedStyles = import_styled_components88.css`
|
|
14035
13715
|
color: var(--wui-color-text);
|
|
14036
13716
|
padding: var(--wui-space-02);
|
|
14037
13717
|
text-align: left;
|
|
14038
13718
|
`;
|
|
14039
|
-
var StyledTh =
|
|
13719
|
+
var StyledTh = import_styled_components88.default.th`
|
|
14040
13720
|
${sharedStyles}
|
|
14041
13721
|
font-size: var(--wui-typography-body-4-size);
|
|
14042
13722
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
14043
13723
|
line-height: var(--wui-typography-body-4-line-height);
|
|
14044
13724
|
`;
|
|
14045
|
-
var StyledTd =
|
|
13725
|
+
var StyledTd = import_styled_components88.default.td`
|
|
14046
13726
|
${sharedStyles}
|
|
14047
13727
|
font-size: var(--wui-typography-body-2-size);
|
|
14048
13728
|
font-weight: var(--wui-typography-body-2-weight);
|
|
14049
13729
|
line-height: var(--wui-typography-body-2-line-height);
|
|
14050
13730
|
`;
|
|
14051
13731
|
var TableCell = ({ children, ...props }) => {
|
|
14052
|
-
const section = (0,
|
|
13732
|
+
const section = (0, import_react70.useContext)(TableSectionContext);
|
|
14053
13733
|
if (section === "head") {
|
|
14054
|
-
return /* @__PURE__ */ (0,
|
|
13734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(StyledTh, { ...props, children });
|
|
14055
13735
|
}
|
|
14056
|
-
return /* @__PURE__ */ (0,
|
|
13736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(StyledTd, { ...props, children });
|
|
14057
13737
|
};
|
|
14058
13738
|
|
|
14059
13739
|
// src/components/Table/TableFoot.tsx
|
|
14060
|
-
var
|
|
14061
|
-
var
|
|
14062
|
-
var StyledTableFoot =
|
|
13740
|
+
var import_styled_components89 = __toESM(require("styled-components"));
|
|
13741
|
+
var import_jsx_runtime273 = require("react/jsx-runtime");
|
|
13742
|
+
var StyledTableFoot = import_styled_components89.default.tfoot``;
|
|
14063
13743
|
var TableFoot = ({ children, ...props }) => {
|
|
14064
|
-
return /* @__PURE__ */ (0,
|
|
13744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(StyledTableFoot, { ...props, children }) });
|
|
14065
13745
|
};
|
|
14066
13746
|
|
|
14067
13747
|
// src/components/Table/TableHead.tsx
|
|
14068
|
-
var
|
|
14069
|
-
var
|
|
14070
|
-
var StyledThead =
|
|
13748
|
+
var import_styled_components90 = __toESM(require("styled-components"));
|
|
13749
|
+
var import_jsx_runtime274 = require("react/jsx-runtime");
|
|
13750
|
+
var StyledThead = import_styled_components90.default.thead``;
|
|
14071
13751
|
var TableHead = ({ children, ...props }) => {
|
|
14072
|
-
return /* @__PURE__ */ (0,
|
|
13752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(StyledThead, { ...props, children }) });
|
|
14073
13753
|
};
|
|
14074
13754
|
|
|
14075
13755
|
// src/components/Table/TableRow.tsx
|
|
14076
|
-
var
|
|
14077
|
-
var
|
|
14078
|
-
var StyledTableRow =
|
|
13756
|
+
var import_styled_components91 = __toESM(require("styled-components"));
|
|
13757
|
+
var import_jsx_runtime275 = require("react/jsx-runtime");
|
|
13758
|
+
var StyledTableRow = import_styled_components91.default.tr``;
|
|
14079
13759
|
var TableRow = ({ children, ...props }) => {
|
|
14080
|
-
return /* @__PURE__ */ (0,
|
|
13760
|
+
return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(StyledTableRow, { ...props, children });
|
|
14081
13761
|
};
|
|
14082
13762
|
|
|
14083
13763
|
// src/components/Tabs/Tabs.tsx
|
|
14084
13764
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
14085
|
-
var
|
|
14086
|
-
var
|
|
13765
|
+
var import_react72 = require("react");
|
|
13766
|
+
var import_type_guards58 = require("@wistia/type-guards");
|
|
14087
13767
|
|
|
14088
13768
|
// src/components/Tabs/useTabsValue.tsx
|
|
14089
|
-
var
|
|
14090
|
-
var TabsValueContext = (0,
|
|
13769
|
+
var import_react71 = require("react");
|
|
13770
|
+
var TabsValueContext = (0, import_react71.createContext)(null);
|
|
14091
13771
|
var TabsValueProvider = TabsValueContext.Provider;
|
|
14092
13772
|
var useTabsValue = () => {
|
|
14093
|
-
const context = (0,
|
|
13773
|
+
const context = (0, import_react71.useContext)(TabsValueContext);
|
|
14094
13774
|
if (context === null) {
|
|
14095
13775
|
throw new Error("useTabsValue must be used within a TabsValueProvider");
|
|
14096
13776
|
}
|
|
@@ -14098,7 +13778,7 @@ var useTabsValue = () => {
|
|
|
14098
13778
|
};
|
|
14099
13779
|
|
|
14100
13780
|
// src/components/Tabs/Tabs.tsx
|
|
14101
|
-
var
|
|
13781
|
+
var import_jsx_runtime276 = require("react/jsx-runtime");
|
|
14102
13782
|
var Tabs = ({
|
|
14103
13783
|
children,
|
|
14104
13784
|
value: valueProp,
|
|
@@ -14106,8 +13786,8 @@ var Tabs = ({
|
|
|
14106
13786
|
defaultValue,
|
|
14107
13787
|
...props
|
|
14108
13788
|
}) => {
|
|
14109
|
-
const [value, setValue] = (0,
|
|
14110
|
-
const onValueChange = (0,
|
|
13789
|
+
const [value, setValue] = (0, import_react72.useState)(valueProp ?? defaultValue);
|
|
13790
|
+
const onValueChange = (0, import_react72.useCallback)(
|
|
14111
13791
|
(newValue) => {
|
|
14112
13792
|
setValue(newValue);
|
|
14113
13793
|
if (onValueChangeProp) {
|
|
@@ -14120,48 +13800,48 @@ var Tabs = ({
|
|
|
14120
13800
|
...props,
|
|
14121
13801
|
onValueChange
|
|
14122
13802
|
};
|
|
14123
|
-
if ((0,
|
|
13803
|
+
if ((0, import_type_guards58.isNotNil)(value)) {
|
|
14124
13804
|
rootProps.value = value;
|
|
14125
13805
|
}
|
|
14126
|
-
if ((0,
|
|
13806
|
+
if ((0, import_type_guards58.isNotNil)(defaultValue)) {
|
|
14127
13807
|
rootProps.defaultValue = defaultValue;
|
|
14128
13808
|
}
|
|
14129
|
-
return /* @__PURE__ */ (0,
|
|
13809
|
+
return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(SelectedItemStyleProvider, { children }) }) });
|
|
14130
13810
|
};
|
|
14131
13811
|
Tabs.displayName = "Tabs";
|
|
14132
13812
|
|
|
14133
13813
|
// src/components/Tabs/TabsContent.tsx
|
|
14134
13814
|
var import_react_tabs2 = require("@radix-ui/react-tabs");
|
|
14135
|
-
var
|
|
13815
|
+
var import_jsx_runtime277 = require("react/jsx-runtime");
|
|
14136
13816
|
var TabsContent = ({ children, value }) => {
|
|
14137
|
-
return /* @__PURE__ */ (0,
|
|
13817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(import_react_tabs2.Content, { value, children });
|
|
14138
13818
|
};
|
|
14139
13819
|
TabsContent.displayName = "TabsContent";
|
|
14140
13820
|
|
|
14141
13821
|
// src/components/Tabs/TabsList.tsx
|
|
14142
13822
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
14143
|
-
var
|
|
13823
|
+
var import_styled_components93 = __toESM(require("styled-components"));
|
|
14144
13824
|
|
|
14145
13825
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
14146
|
-
var
|
|
13826
|
+
var import_type_guards59 = require("@wistia/type-guards");
|
|
14147
13827
|
|
|
14148
13828
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
14149
|
-
var
|
|
14150
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
13829
|
+
var import_styled_components92 = __toESM(require("styled-components"));
|
|
13830
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components92.default)(SelectedItemIndicatorDiv)`
|
|
14151
13831
|
&:has(~ button[role='tab']:focus-visible) {
|
|
14152
13832
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
14153
13833
|
}
|
|
14154
13834
|
`;
|
|
14155
13835
|
|
|
14156
13836
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
14157
|
-
var
|
|
13837
|
+
var import_jsx_runtime278 = require("react/jsx-runtime");
|
|
14158
13838
|
var SelectedTabIndicator = () => {
|
|
14159
13839
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
14160
13840
|
const selectedValue = useTabsValue();
|
|
14161
|
-
if (selectedValue == null || (0,
|
|
13841
|
+
if (selectedValue == null || (0, import_type_guards59.isUndefined)(selectedItemIndicatorStyle)) {
|
|
14162
13842
|
return null;
|
|
14163
13843
|
}
|
|
14164
|
-
return /* @__PURE__ */ (0,
|
|
13844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
|
|
14165
13845
|
TabsSelectedItemIndicatorDiv,
|
|
14166
13846
|
{
|
|
14167
13847
|
"data-wui-selected-item-indicator": true,
|
|
@@ -14171,19 +13851,19 @@ var SelectedTabIndicator = () => {
|
|
|
14171
13851
|
};
|
|
14172
13852
|
|
|
14173
13853
|
// src/components/Tabs/TabsList.tsx
|
|
14174
|
-
var
|
|
14175
|
-
var StyledRadixTabsList = (0,
|
|
13854
|
+
var import_jsx_runtime279 = require("react/jsx-runtime");
|
|
13855
|
+
var StyledRadixTabsList = (0, import_styled_components93.default)(import_react_tabs3.List)`
|
|
14176
13856
|
${segmentedControlStyles}
|
|
14177
13857
|
`;
|
|
14178
13858
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
14179
|
-
return /* @__PURE__ */ (0,
|
|
13859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
|
|
14180
13860
|
StyledRadixTabsList,
|
|
14181
13861
|
{
|
|
14182
13862
|
$fullWidth: fullWidth,
|
|
14183
13863
|
"aria-label": props["aria-label"],
|
|
14184
13864
|
children: [
|
|
14185
13865
|
children,
|
|
14186
|
-
/* @__PURE__ */ (0,
|
|
13866
|
+
/* @__PURE__ */ (0, import_jsx_runtime279.jsx)(SelectedTabIndicator, {})
|
|
14187
13867
|
]
|
|
14188
13868
|
}
|
|
14189
13869
|
);
|
|
@@ -14191,13 +13871,13 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
|
14191
13871
|
TabsList.displayName = "TabsList";
|
|
14192
13872
|
|
|
14193
13873
|
// src/components/Tabs/TabsTrigger.tsx
|
|
14194
|
-
var
|
|
14195
|
-
var
|
|
13874
|
+
var import_react73 = require("react");
|
|
13875
|
+
var import_type_guards60 = require("@wistia/type-guards");
|
|
14196
13876
|
|
|
14197
13877
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
14198
|
-
var
|
|
13878
|
+
var import_styled_components94 = __toESM(require("styled-components"));
|
|
14199
13879
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
14200
|
-
var StyledRadixTabsTrigger = (0,
|
|
13880
|
+
var StyledRadixTabsTrigger = (0, import_styled_components94.default)(import_react_tabs4.Trigger)`
|
|
14201
13881
|
${segmentedControlItemStyles}
|
|
14202
13882
|
|
|
14203
13883
|
&:focus-visible {
|
|
@@ -14206,14 +13886,14 @@ var StyledRadixTabsTrigger = (0, import_styled_components97.default)(import_reac
|
|
|
14206
13886
|
`;
|
|
14207
13887
|
|
|
14208
13888
|
// src/components/Tabs/TabsTrigger.tsx
|
|
14209
|
-
var
|
|
14210
|
-
var TabsTrigger = (0,
|
|
13889
|
+
var import_jsx_runtime280 = require("react/jsx-runtime");
|
|
13890
|
+
var TabsTrigger = (0, import_react73.forwardRef)(
|
|
14211
13891
|
({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
14212
13892
|
const selectedValue = useTabsValue();
|
|
14213
13893
|
const { setSelectedItemMeasurements } = useSelectedItemStyle();
|
|
14214
|
-
const buttonRef = (0,
|
|
13894
|
+
const buttonRef = (0, import_react73.useRef)(null);
|
|
14215
13895
|
const combinedRef = mergeRefs([buttonRef, forwardedRef]);
|
|
14216
|
-
(0,
|
|
13896
|
+
(0, import_react73.useEffect)(() => {
|
|
14217
13897
|
const buttonElem = buttonRef.current;
|
|
14218
13898
|
if (!buttonElem) {
|
|
14219
13899
|
return void 0;
|
|
@@ -14238,13 +13918,13 @@ var TabsTrigger = (0, import_react76.forwardRef)(
|
|
|
14238
13918
|
resizeObserver.disconnect();
|
|
14239
13919
|
};
|
|
14240
13920
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
14241
|
-
return /* @__PURE__ */ (0,
|
|
13921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
|
|
14242
13922
|
StyledRadixTabsTrigger,
|
|
14243
13923
|
{
|
|
14244
13924
|
...otherProps,
|
|
14245
13925
|
ref: combinedRef,
|
|
14246
|
-
$hasLabel: (0,
|
|
14247
|
-
"aria-label": (0,
|
|
13926
|
+
$hasLabel: (0, import_type_guards60.isNotNil)(label),
|
|
13927
|
+
"aria-label": (0, import_type_guards60.isNotNil)(label) ? void 0 : ariaLabel,
|
|
14248
13928
|
disabled,
|
|
14249
13929
|
value,
|
|
14250
13930
|
children: [
|
|
@@ -14258,10 +13938,10 @@ var TabsTrigger = (0, import_react76.forwardRef)(
|
|
|
14258
13938
|
TabsTrigger.displayName = "TabsTrigger";
|
|
14259
13939
|
|
|
14260
13940
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
14261
|
-
var
|
|
14262
|
-
var
|
|
14263
|
-
var
|
|
14264
|
-
var StyledThumbnailBadge =
|
|
13941
|
+
var import_styled_components95 = __toESM(require("styled-components"));
|
|
13942
|
+
var import_type_guards61 = require("@wistia/type-guards");
|
|
13943
|
+
var import_jsx_runtime281 = require("react/jsx-runtime");
|
|
13944
|
+
var StyledThumbnailBadge = import_styled_components95.default.div`
|
|
14265
13945
|
align-items: center;
|
|
14266
13946
|
background-color: rgb(0 0 0 / 50%);
|
|
14267
13947
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -14286,23 +13966,23 @@ var StyledThumbnailBadge = import_styled_components98.default.div`
|
|
|
14286
13966
|
}
|
|
14287
13967
|
`;
|
|
14288
13968
|
var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
14289
|
-
return /* @__PURE__ */ (0,
|
|
14290
|
-
(0,
|
|
14291
|
-
/* @__PURE__ */ (0,
|
|
13969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime281.jsxs)(StyledThumbnailBadge, { ...props, children: [
|
|
13970
|
+
(0, import_type_guards61.isNotNil)(icon) && icon,
|
|
13971
|
+
/* @__PURE__ */ (0, import_jsx_runtime281.jsx)("span", { children: label })
|
|
14292
13972
|
] });
|
|
14293
13973
|
};
|
|
14294
13974
|
ThumbnailBadge.displayName = "ThumbnailBadge";
|
|
14295
13975
|
|
|
14296
13976
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
14297
|
-
var
|
|
14298
|
-
var
|
|
14299
|
-
var
|
|
13977
|
+
var import_react74 = require("react");
|
|
13978
|
+
var import_styled_components98 = __toESM(require("styled-components"));
|
|
13979
|
+
var import_type_guards64 = require("@wistia/type-guards");
|
|
14300
13980
|
|
|
14301
13981
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
14302
|
-
var
|
|
14303
|
-
var
|
|
13982
|
+
var import_type_guards62 = require("@wistia/type-guards");
|
|
13983
|
+
var import_styled_components96 = require("styled-components");
|
|
14304
13984
|
var gradients = {
|
|
14305
|
-
defaultDarkOne:
|
|
13985
|
+
defaultDarkOne: import_styled_components96.css`
|
|
14306
13986
|
background-color: #222d66;
|
|
14307
13987
|
background-image:
|
|
14308
13988
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -14310,7 +13990,7 @@ var gradients = {
|
|
|
14310
13990
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
14311
13991
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
14312
13992
|
`,
|
|
14313
|
-
defaultDarkTwo:
|
|
13993
|
+
defaultDarkTwo: import_styled_components96.css`
|
|
14314
13994
|
background-color: #222d66;
|
|
14315
13995
|
background-image:
|
|
14316
13996
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -14318,7 +13998,7 @@ var gradients = {
|
|
|
14318
13998
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
14319
13999
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
14320
14000
|
`,
|
|
14321
|
-
defaultLightOne:
|
|
14001
|
+
defaultLightOne: import_styled_components96.css`
|
|
14322
14002
|
background-color: #ccd5ff;
|
|
14323
14003
|
background-image:
|
|
14324
14004
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -14326,13 +14006,13 @@ var gradients = {
|
|
|
14326
14006
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
14327
14007
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
14328
14008
|
`,
|
|
14329
|
-
defaultLightTwo:
|
|
14009
|
+
defaultLightTwo: import_styled_components96.css`
|
|
14330
14010
|
background-color: #ccd5ff;
|
|
14331
14011
|
background-image:
|
|
14332
14012
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
14333
14013
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
14334
14014
|
`,
|
|
14335
|
-
defaultMidOne:
|
|
14015
|
+
defaultMidOne: import_styled_components96.css`
|
|
14336
14016
|
background-color: #6b84ff;
|
|
14337
14017
|
background-image:
|
|
14338
14018
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -14340,13 +14020,13 @@ var gradients = {
|
|
|
14340
14020
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
14341
14021
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
14342
14022
|
`,
|
|
14343
|
-
defaultMidTwo:
|
|
14023
|
+
defaultMidTwo: import_styled_components96.css`
|
|
14344
14024
|
background-color: #6b84ff;
|
|
14345
14025
|
background-image:
|
|
14346
14026
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
14347
14027
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
14348
14028
|
`,
|
|
14349
|
-
green:
|
|
14029
|
+
green: import_styled_components96.css`
|
|
14350
14030
|
background-color: #fafffa;
|
|
14351
14031
|
background-image:
|
|
14352
14032
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -14354,7 +14034,7 @@ var gradients = {
|
|
|
14354
14034
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
14355
14035
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
14356
14036
|
`,
|
|
14357
|
-
greenWithPop:
|
|
14037
|
+
greenWithPop: import_styled_components96.css`
|
|
14358
14038
|
background-color: #fafffa;
|
|
14359
14039
|
background-image:
|
|
14360
14040
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -14362,7 +14042,7 @@ var gradients = {
|
|
|
14362
14042
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
14363
14043
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
14364
14044
|
`,
|
|
14365
|
-
pink:
|
|
14045
|
+
pink: import_styled_components96.css`
|
|
14366
14046
|
background-color: #fffff0;
|
|
14367
14047
|
background-image:
|
|
14368
14048
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -14370,7 +14050,7 @@ var gradients = {
|
|
|
14370
14050
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
14371
14051
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
14372
14052
|
`,
|
|
14373
|
-
pinkWithPop:
|
|
14053
|
+
pinkWithPop: import_styled_components96.css`
|
|
14374
14054
|
background-color: #fffff0;
|
|
14375
14055
|
background-image:
|
|
14376
14056
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -14378,7 +14058,7 @@ var gradients = {
|
|
|
14378
14058
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
14379
14059
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
14380
14060
|
`,
|
|
14381
|
-
playfulGradientOne:
|
|
14061
|
+
playfulGradientOne: import_styled_components96.css`
|
|
14382
14062
|
background-color: #f7f8ff;
|
|
14383
14063
|
background-image:
|
|
14384
14064
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -14386,7 +14066,7 @@ var gradients = {
|
|
|
14386
14066
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
14387
14067
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
14388
14068
|
`,
|
|
14389
|
-
playfulGradientTwo:
|
|
14069
|
+
playfulGradientTwo: import_styled_components96.css`
|
|
14390
14070
|
background-color: #f7f8ff;
|
|
14391
14071
|
background-image:
|
|
14392
14072
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -14394,13 +14074,13 @@ var gradients = {
|
|
|
14394
14074
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
14395
14075
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
14396
14076
|
`,
|
|
14397
|
-
purple:
|
|
14077
|
+
purple: import_styled_components96.css`
|
|
14398
14078
|
background-color: #f2caff;
|
|
14399
14079
|
background-image:
|
|
14400
14080
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
14401
14081
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
14402
14082
|
`,
|
|
14403
|
-
purpleWithPop:
|
|
14083
|
+
purpleWithPop: import_styled_components96.css`
|
|
14404
14084
|
background-color: #f2caff;
|
|
14405
14085
|
background-image:
|
|
14406
14086
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -14408,7 +14088,7 @@ var gradients = {
|
|
|
14408
14088
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
14409
14089
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
14410
14090
|
`,
|
|
14411
|
-
yellow:
|
|
14091
|
+
yellow: import_styled_components96.css`
|
|
14412
14092
|
background-color: #fffff0;
|
|
14413
14093
|
background-image:
|
|
14414
14094
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -14416,7 +14096,7 @@ var gradients = {
|
|
|
14416
14096
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
14417
14097
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
14418
14098
|
`,
|
|
14419
|
-
yellowWithPop:
|
|
14099
|
+
yellowWithPop: import_styled_components96.css`
|
|
14420
14100
|
background-color: #fffff0;
|
|
14421
14101
|
background-image:
|
|
14422
14102
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -14427,14 +14107,14 @@ var gradients = {
|
|
|
14427
14107
|
};
|
|
14428
14108
|
var gradientMap = Object.keys(gradients);
|
|
14429
14109
|
var getBackgroundGradient = (gradientName = void 0) => {
|
|
14430
|
-
return (0,
|
|
14110
|
+
return (0, import_type_guards62.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
|
|
14431
14111
|
};
|
|
14432
14112
|
|
|
14433
14113
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
14434
|
-
var
|
|
14435
|
-
var
|
|
14436
|
-
var
|
|
14437
|
-
var ScrubLine =
|
|
14114
|
+
var import_styled_components97 = __toESM(require("styled-components"));
|
|
14115
|
+
var import_type_guards63 = require("@wistia/type-guards");
|
|
14116
|
+
var import_jsx_runtime282 = require("react/jsx-runtime");
|
|
14117
|
+
var ScrubLine = import_styled_components97.default.div`
|
|
14438
14118
|
position: absolute;
|
|
14439
14119
|
top: 0;
|
|
14440
14120
|
height: 100%;
|
|
@@ -14518,8 +14198,8 @@ var ThumbnailStoryboardViewer = ({
|
|
|
14518
14198
|
);
|
|
14519
14199
|
const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
|
|
14520
14200
|
const backgroundImage = `url(${storyboardUrl})`;
|
|
14521
|
-
const showScrubLine = (0,
|
|
14522
|
-
const scrubLinePosition = (0,
|
|
14201
|
+
const showScrubLine = (0, import_type_guards63.isNotNil)(cursorPosition);
|
|
14202
|
+
const scrubLinePosition = (0, import_type_guards63.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
|
|
14523
14203
|
const viewerStyles = {
|
|
14524
14204
|
position: "relative",
|
|
14525
14205
|
overflow: "hidden",
|
|
@@ -14537,14 +14217,14 @@ var ThumbnailStoryboardViewer = ({
|
|
|
14537
14217
|
backgroundPosition,
|
|
14538
14218
|
backgroundSize
|
|
14539
14219
|
};
|
|
14540
|
-
return /* @__PURE__ */ (0,
|
|
14220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime282.jsxs)(
|
|
14541
14221
|
"div",
|
|
14542
14222
|
{
|
|
14543
14223
|
...props,
|
|
14544
14224
|
style: viewerStyles,
|
|
14545
14225
|
children: [
|
|
14546
|
-
/* @__PURE__ */ (0,
|
|
14547
|
-
showScrubLine ? /* @__PURE__ */ (0,
|
|
14226
|
+
/* @__PURE__ */ (0, import_jsx_runtime282.jsx)("div", { style: storyboardStyles }),
|
|
14227
|
+
showScrubLine ? /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(
|
|
14548
14228
|
ScrubLine,
|
|
14549
14229
|
{
|
|
14550
14230
|
style: {
|
|
@@ -14558,20 +14238,20 @@ var ThumbnailStoryboardViewer = ({
|
|
|
14558
14238
|
};
|
|
14559
14239
|
|
|
14560
14240
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
14561
|
-
var
|
|
14562
|
-
var WideThumbnailImage =
|
|
14241
|
+
var import_jsx_runtime283 = require("react/jsx-runtime");
|
|
14242
|
+
var WideThumbnailImage = import_styled_components98.default.img`
|
|
14563
14243
|
height: 100%;
|
|
14564
14244
|
object-fit: cover;
|
|
14565
14245
|
width: 100%;
|
|
14566
14246
|
`;
|
|
14567
|
-
var SquareThumbnailImage =
|
|
14247
|
+
var SquareThumbnailImage = import_styled_components98.default.img`
|
|
14568
14248
|
backdrop-filter: blur(8px);
|
|
14569
14249
|
object-fit: contain;
|
|
14570
14250
|
width: 100%;
|
|
14571
14251
|
`;
|
|
14572
14252
|
var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
14573
14253
|
if (thumbnailImageType === "wide") {
|
|
14574
|
-
return /* @__PURE__ */ (0,
|
|
14254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
|
|
14575
14255
|
WideThumbnailImage,
|
|
14576
14256
|
{
|
|
14577
14257
|
alt: "",
|
|
@@ -14580,7 +14260,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
14580
14260
|
}
|
|
14581
14261
|
);
|
|
14582
14262
|
}
|
|
14583
|
-
return /* @__PURE__ */ (0,
|
|
14263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
|
|
14584
14264
|
SquareThumbnailImage,
|
|
14585
14265
|
{
|
|
14586
14266
|
alt: "",
|
|
@@ -14589,11 +14269,11 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
14589
14269
|
}
|
|
14590
14270
|
);
|
|
14591
14271
|
};
|
|
14592
|
-
var StyledThumbnail =
|
|
14593
|
-
background-image: ${({ $backgroundUrl }) => (0,
|
|
14272
|
+
var StyledThumbnail = import_styled_components98.default.div`
|
|
14273
|
+
background-image: ${({ $backgroundUrl }) => (0, import_type_guards64.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
14594
14274
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
14595
14275
|
// if we don't have $backgroundUrl show a gradient
|
|
14596
|
-
(0,
|
|
14276
|
+
(0, import_type_guards64.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
|
|
14597
14277
|
)};
|
|
14598
14278
|
background-position: center center;
|
|
14599
14279
|
background-size: cover;
|
|
@@ -14618,7 +14298,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
|
|
|
14618
14298
|
left: relativeLeft
|
|
14619
14299
|
};
|
|
14620
14300
|
};
|
|
14621
|
-
var Thumbnail = (0,
|
|
14301
|
+
var Thumbnail = (0, import_react74.forwardRef)(
|
|
14622
14302
|
({
|
|
14623
14303
|
gradientBackground = "defaultMidOne",
|
|
14624
14304
|
thumbnailImageType = "wide",
|
|
@@ -14629,17 +14309,17 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14629
14309
|
height,
|
|
14630
14310
|
...props
|
|
14631
14311
|
}, ref) => {
|
|
14632
|
-
const [percent, setPercent] = (0,
|
|
14633
|
-
const [isMouseOver, setIsMouseOver] = (0,
|
|
14634
|
-
const [isStoryboardReady, setIsStoryboardReady] = (0,
|
|
14635
|
-
const storyboardElementRef = (0,
|
|
14636
|
-
const [cursorPosition, setCursorPosition] = (0,
|
|
14637
|
-
const backgroundUrl = (0,
|
|
14638
|
-
() => thumbnailImageType === "square" && (0,
|
|
14312
|
+
const [percent, setPercent] = (0, import_react74.useState)(0);
|
|
14313
|
+
const [isMouseOver, setIsMouseOver] = (0, import_react74.useState)(false);
|
|
14314
|
+
const [isStoryboardReady, setIsStoryboardReady] = (0, import_react74.useState)(false);
|
|
14315
|
+
const storyboardElementRef = (0, import_react74.useRef)(null);
|
|
14316
|
+
const [cursorPosition, setCursorPosition] = (0, import_react74.useState)(null);
|
|
14317
|
+
const backgroundUrl = (0, import_react74.useMemo)(
|
|
14318
|
+
() => thumbnailImageType === "square" && (0, import_type_guards64.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
14639
14319
|
[thumbnailImageType, thumbnailUrl]
|
|
14640
14320
|
);
|
|
14641
|
-
const isScrubbable = (0,
|
|
14642
|
-
const trackStoryboardLoadStatus = (0,
|
|
14321
|
+
const isScrubbable = (0, import_type_guards64.isNotNil)(storyboard);
|
|
14322
|
+
const trackStoryboardLoadStatus = (0, import_react74.useCallback)(() => {
|
|
14643
14323
|
if (storyboardElementRef.current || !storyboard) {
|
|
14644
14324
|
return storyboardElementRef.current;
|
|
14645
14325
|
}
|
|
@@ -14649,7 +14329,7 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14649
14329
|
storyboardElementRef.current = asset;
|
|
14650
14330
|
return storyboardElementRef.current;
|
|
14651
14331
|
}, [storyboard]);
|
|
14652
|
-
const handleMouseMove = (0,
|
|
14332
|
+
const handleMouseMove = (0, import_react74.useCallback)(
|
|
14653
14333
|
(mouseEvent) => {
|
|
14654
14334
|
if (!isScrubbable) return;
|
|
14655
14335
|
const elem = mouseEvent.currentTarget;
|
|
@@ -14662,16 +14342,16 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14662
14342
|
},
|
|
14663
14343
|
[isScrubbable, trackStoryboardLoadStatus]
|
|
14664
14344
|
);
|
|
14665
|
-
const handleMouseOut = (0,
|
|
14345
|
+
const handleMouseOut = (0, import_react74.useCallback)(() => {
|
|
14666
14346
|
if (!isScrubbable) return;
|
|
14667
14347
|
setIsMouseOver(false);
|
|
14668
14348
|
setCursorPosition(null);
|
|
14669
14349
|
}, [isScrubbable]);
|
|
14670
|
-
const shouldRenderStoryboard = (0,
|
|
14350
|
+
const shouldRenderStoryboard = (0, import_react74.useMemo)(() => {
|
|
14671
14351
|
return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
|
|
14672
14352
|
}, [isScrubbable, isMouseOver, isStoryboardReady]);
|
|
14673
|
-
const renderStoryboard = (0,
|
|
14674
|
-
if (!storyboard || (0,
|
|
14353
|
+
const renderStoryboard = (0, import_react74.useCallback)(() => {
|
|
14354
|
+
if (!storyboard || (0, import_type_guards64.isUndefined)(height) || (0, import_type_guards64.isEmptyString)(height)) return null;
|
|
14675
14355
|
const {
|
|
14676
14356
|
url,
|
|
14677
14357
|
width: sbWidth,
|
|
@@ -14681,9 +14361,9 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14681
14361
|
frameCount,
|
|
14682
14362
|
aspectRatio
|
|
14683
14363
|
} = storyboard;
|
|
14684
|
-
const targetWidth = (0,
|
|
14364
|
+
const targetWidth = (0, import_type_guards64.isString)(width) ? parseInt(width, 10) : Number(width);
|
|
14685
14365
|
const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
|
|
14686
|
-
return /* @__PURE__ */ (0,
|
|
14366
|
+
return /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
|
|
14687
14367
|
ThumbnailStoryboardViewer,
|
|
14688
14368
|
{
|
|
14689
14369
|
cursorPosition: effectiveCursorPosition,
|
|
@@ -14702,8 +14382,8 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14702
14382
|
let thumbnailContent = null;
|
|
14703
14383
|
if (shouldRenderStoryboard) {
|
|
14704
14384
|
thumbnailContent = renderStoryboard();
|
|
14705
|
-
} else if ((0,
|
|
14706
|
-
thumbnailContent = /* @__PURE__ */ (0,
|
|
14385
|
+
} else if ((0, import_type_guards64.isNotNil)(thumbnailUrl)) {
|
|
14386
|
+
thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
|
|
14707
14387
|
ThumbnailImage,
|
|
14708
14388
|
{
|
|
14709
14389
|
thumbnailImageType,
|
|
@@ -14713,7 +14393,7 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14713
14393
|
} else {
|
|
14714
14394
|
thumbnailContent = null;
|
|
14715
14395
|
}
|
|
14716
|
-
return /* @__PURE__ */ (0,
|
|
14396
|
+
return /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(
|
|
14717
14397
|
StyledThumbnail,
|
|
14718
14398
|
{
|
|
14719
14399
|
ref,
|
|
@@ -14727,7 +14407,7 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14727
14407
|
onMouseOut: handleMouseOut,
|
|
14728
14408
|
role: "presentation",
|
|
14729
14409
|
children: [
|
|
14730
|
-
(0,
|
|
14410
|
+
(0, import_type_guards64.isNotNil)(children) ? children : null,
|
|
14731
14411
|
thumbnailContent
|
|
14732
14412
|
]
|
|
14733
14413
|
}
|
|
@@ -14737,14 +14417,14 @@ var Thumbnail = (0, import_react77.forwardRef)(
|
|
|
14737
14417
|
Thumbnail.displayName = "Thumbnail";
|
|
14738
14418
|
|
|
14739
14419
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
14740
|
-
var
|
|
14741
|
-
var
|
|
14742
|
-
var
|
|
14743
|
-
var
|
|
14420
|
+
var import_react75 = __toESM(require("react"));
|
|
14421
|
+
var import_styled_components99 = __toESM(require("styled-components"));
|
|
14422
|
+
var import_type_guards65 = require("@wistia/type-guards");
|
|
14423
|
+
var import_jsx_runtime284 = (
|
|
14744
14424
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
14745
14425
|
require("react/jsx-runtime")
|
|
14746
14426
|
);
|
|
14747
|
-
var StyledThumbnailCollage =
|
|
14427
|
+
var StyledThumbnailCollage = import_styled_components99.default.div`
|
|
14748
14428
|
display: grid;
|
|
14749
14429
|
gap: var(--wui-space-01);
|
|
14750
14430
|
width: 100%;
|
|
@@ -14817,15 +14497,15 @@ var ThumbnailCollage = ({
|
|
|
14817
14497
|
gradientBackground = "defaultMidOne",
|
|
14818
14498
|
...props
|
|
14819
14499
|
}) => {
|
|
14820
|
-
const thumbnailArray =
|
|
14500
|
+
const thumbnailArray = import_react75.default.Children.toArray(children);
|
|
14821
14501
|
const truncatedThumbnails = thumbnailArray.slice(0, 3);
|
|
14822
|
-
const thumbnails = (0,
|
|
14823
|
-
return
|
|
14502
|
+
const thumbnails = (0, import_type_guards65.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
|
|
14503
|
+
return import_react75.default.cloneElement(child, {
|
|
14824
14504
|
...child.props,
|
|
14825
14505
|
children: void 0
|
|
14826
14506
|
});
|
|
14827
14507
|
}) : [
|
|
14828
|
-
/* @__PURE__ */ (0,
|
|
14508
|
+
/* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
|
|
14829
14509
|
Thumbnail,
|
|
14830
14510
|
{
|
|
14831
14511
|
gradientBackground,
|
|
@@ -14834,7 +14514,7 @@ var ThumbnailCollage = ({
|
|
|
14834
14514
|
"fallback"
|
|
14835
14515
|
)
|
|
14836
14516
|
];
|
|
14837
|
-
return /* @__PURE__ */ (0,
|
|
14517
|
+
return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
|
|
14838
14518
|
StyledThumbnailCollage,
|
|
14839
14519
|
{
|
|
14840
14520
|
$gradientBackground: gradientBackground,
|
|
@@ -14846,26 +14526,26 @@ var ThumbnailCollage = ({
|
|
|
14846
14526
|
};
|
|
14847
14527
|
|
|
14848
14528
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
14849
|
-
var
|
|
14850
|
-
var
|
|
14851
|
-
var
|
|
14529
|
+
var import_styled_components100 = __toESM(require("styled-components"));
|
|
14530
|
+
var import_type_guards66 = require("@wistia/type-guards");
|
|
14531
|
+
var import_jsx_runtime285 = require("react/jsx-runtime");
|
|
14852
14532
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
14853
14533
|
if (iconOnly) {
|
|
14854
|
-
return /* @__PURE__ */ (0,
|
|
14534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
|
|
14855
14535
|
"g",
|
|
14856
14536
|
{
|
|
14857
14537
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
14858
14538
|
fill: brandmarkColor,
|
|
14859
|
-
children: /* @__PURE__ */ (0,
|
|
14539
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime285.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
14860
14540
|
}
|
|
14861
14541
|
);
|
|
14862
14542
|
}
|
|
14863
|
-
return /* @__PURE__ */ (0,
|
|
14543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
|
|
14864
14544
|
"g",
|
|
14865
14545
|
{
|
|
14866
14546
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
14867
14547
|
fill: brandmarkColor,
|
|
14868
|
-
children: /* @__PURE__ */ (0,
|
|
14548
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime285.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
14869
14549
|
}
|
|
14870
14550
|
);
|
|
14871
14551
|
};
|
|
@@ -14873,12 +14553,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
14873
14553
|
if (iconOnly) {
|
|
14874
14554
|
return null;
|
|
14875
14555
|
}
|
|
14876
|
-
return /* @__PURE__ */ (0,
|
|
14556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
|
|
14877
14557
|
"g",
|
|
14878
14558
|
{
|
|
14879
14559
|
"data-testid": "ui-wistia-logo-logotype",
|
|
14880
14560
|
fill: logotypeColor,
|
|
14881
|
-
children: /* @__PURE__ */ (0,
|
|
14561
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime285.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
|
|
14882
14562
|
}
|
|
14883
14563
|
);
|
|
14884
14564
|
};
|
|
@@ -14888,7 +14568,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
14888
14568
|
}
|
|
14889
14569
|
return "0 0 144 31.47";
|
|
14890
14570
|
};
|
|
14891
|
-
var WistiaLogoComponent =
|
|
14571
|
+
var WistiaLogoComponent = import_styled_components100.default.svg`
|
|
14892
14572
|
height: ${({ height }) => `${height}px`};
|
|
14893
14573
|
|
|
14894
14574
|
/* ensure it will always fit on mobile */
|
|
@@ -14904,12 +14584,12 @@ var WistiaLogoComponent = import_styled_components103.default.svg`
|
|
|
14904
14584
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
14905
14585
|
if ($opticallyCentered) {
|
|
14906
14586
|
if ($iconOnly) {
|
|
14907
|
-
return
|
|
14587
|
+
return import_styled_components100.css`
|
|
14908
14588
|
aspect-ratio: 1;
|
|
14909
14589
|
padding: 11.85% 3.12% 13.91%;
|
|
14910
14590
|
`;
|
|
14911
14591
|
}
|
|
14912
|
-
return
|
|
14592
|
+
return import_styled_components100.css`
|
|
14913
14593
|
aspect-ratio: 127 / 32;
|
|
14914
14594
|
`;
|
|
14915
14595
|
}
|
|
@@ -14946,7 +14626,7 @@ var WistiaLogo = ({
|
|
|
14946
14626
|
};
|
|
14947
14627
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
14948
14628
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
14949
|
-
const Logo = /* @__PURE__ */ (0,
|
|
14629
|
+
const Logo = /* @__PURE__ */ (0, import_jsx_runtime285.jsxs)(
|
|
14950
14630
|
WistiaLogoComponent,
|
|
14951
14631
|
{
|
|
14952
14632
|
$hoverColor: hoverColor,
|
|
@@ -14959,23 +14639,23 @@ var WistiaLogo = ({
|
|
|
14959
14639
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14960
14640
|
...props,
|
|
14961
14641
|
children: [
|
|
14962
|
-
/* @__PURE__ */ (0,
|
|
14963
|
-
(0,
|
|
14642
|
+
/* @__PURE__ */ (0, import_jsx_runtime285.jsx)("title", { children: title }),
|
|
14643
|
+
(0, import_type_guards66.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime285.jsx)("desc", { children: description }) : null,
|
|
14964
14644
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
14965
14645
|
renderLogotype(logotypeColor, iconOnly)
|
|
14966
14646
|
]
|
|
14967
14647
|
}
|
|
14968
14648
|
);
|
|
14969
|
-
return href !== void 0 ? /* @__PURE__ */ (0,
|
|
14649
|
+
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime285.jsx)("a", { href, children: Logo }) : Logo;
|
|
14970
14650
|
};
|
|
14971
14651
|
WistiaLogo.displayName = "WistiaLogo";
|
|
14972
14652
|
|
|
14973
14653
|
// src/components/InputPassword/InputPassword.tsx
|
|
14974
|
-
var
|
|
14975
|
-
var
|
|
14976
|
-
var
|
|
14977
|
-
var
|
|
14978
|
-
var StyledIconButton = (0,
|
|
14654
|
+
var import_styled_components101 = __toESM(require("styled-components"));
|
|
14655
|
+
var import_react76 = require("react");
|
|
14656
|
+
var import_type_guards67 = require("@wistia/type-guards");
|
|
14657
|
+
var import_jsx_runtime286 = require("react/jsx-runtime");
|
|
14658
|
+
var StyledIconButton = (0, import_styled_components101.default)(IconButton)`
|
|
14979
14659
|
/* override size for icon button since prop gets changed by Input */
|
|
14980
14660
|
height: var(--icon-button-size-sm);
|
|
14981
14661
|
width: var(--icon-button-size-sm);
|
|
@@ -14983,23 +14663,23 @@ var StyledIconButton = (0, import_styled_components104.default)(IconButton)`
|
|
|
14983
14663
|
/* override input padding variable since it is used for Input Icon positioning */
|
|
14984
14664
|
--wui-input-horizontal-padding: 4px;
|
|
14985
14665
|
`;
|
|
14986
|
-
var InputPassword = (0,
|
|
14666
|
+
var InputPassword = (0, import_react76.forwardRef)(
|
|
14987
14667
|
({ onVisibilityToggle, disabled = false, ...props }, ref) => {
|
|
14988
|
-
const [isVisible, setIsVisible] = (0,
|
|
14668
|
+
const [isVisible, setIsVisible] = (0, import_react76.useState)(false);
|
|
14989
14669
|
const handleClick = () => {
|
|
14990
14670
|
const newVisibility = !isVisible;
|
|
14991
14671
|
setIsVisible(newVisibility);
|
|
14992
|
-
if ((0,
|
|
14672
|
+
if ((0, import_type_guards67.isFunction)(onVisibilityToggle)) {
|
|
14993
14673
|
onVisibilityToggle(newVisibility);
|
|
14994
14674
|
}
|
|
14995
14675
|
};
|
|
14996
|
-
return /* @__PURE__ */ (0,
|
|
14676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
|
|
14997
14677
|
Input,
|
|
14998
14678
|
{
|
|
14999
14679
|
...props,
|
|
15000
14680
|
ref,
|
|
15001
14681
|
disabled,
|
|
15002
|
-
rightIcon: /* @__PURE__ */ (0,
|
|
14682
|
+
rightIcon: /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
|
|
15003
14683
|
StyledIconButton,
|
|
15004
14684
|
{
|
|
15005
14685
|
disabled,
|
|
@@ -15007,7 +14687,7 @@ var InputPassword = (0, import_react79.forwardRef)(
|
|
|
15007
14687
|
onClick: handleClick,
|
|
15008
14688
|
tabIndex: disabled ? -1 : 0,
|
|
15009
14689
|
variant: "ghost",
|
|
15010
|
-
children: /* @__PURE__ */ (0,
|
|
14690
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(Icon, { type: isVisible ? "preview" : "hide" })
|
|
15011
14691
|
}
|
|
15012
14692
|
),
|
|
15013
14693
|
type: isVisible ? "text" : "password"
|
|
@@ -15079,8 +14759,6 @@ InputPassword.displayName = "InputPassword";
|
|
|
15079
14759
|
Popover,
|
|
15080
14760
|
ProgressBar,
|
|
15081
14761
|
Radio,
|
|
15082
|
-
RadioCard,
|
|
15083
|
-
RadioCardImage,
|
|
15084
14762
|
RadioGroup,
|
|
15085
14763
|
RadioMenuItem,
|
|
15086
14764
|
ScreenReaderOnly,
|