@wistia/ui 0.6.15 → 0.6.16-beta.47a83a4d.6fb3abe
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 +251 -171
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +27 -1
- package/dist/index.d.ts +27 -1
- package/dist/index.mjs +234 -155
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.6.
|
|
3
|
+
* @license @wistia/ui v0.6.16-beta.47a83a4d.6fb3abe
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -86,6 +86,7 @@ __export(index_exports, {
|
|
|
86
86
|
Modal: () => Modal,
|
|
87
87
|
PersistentFileAmountLimitValidator: () => import_validators.PersistentFileAmountLimitValidator,
|
|
88
88
|
Popover: () => Popover,
|
|
89
|
+
ProgressBar: () => ProgressBar,
|
|
89
90
|
Radio: () => Radio,
|
|
90
91
|
RadioGroup: () => RadioGroup,
|
|
91
92
|
RadioMenuItem: () => RadioMenuItem,
|
|
@@ -9862,12 +9863,11 @@ var Header = import_styled_components58.default.header`
|
|
|
9862
9863
|
display: flex;
|
|
9863
9864
|
order: 1;
|
|
9864
9865
|
gap: var(--wui-space-01);
|
|
9865
|
-
|
|
9866
|
-
justify-content: space-between;
|
|
9866
|
+
justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
|
|
9867
9867
|
|
|
9868
9868
|
/* DialogTitle creates an h2 element which inherits some margin */
|
|
9869
9869
|
h2 {
|
|
9870
|
-
margin
|
|
9870
|
+
margin: 0 0 var(--wui-space-03);
|
|
9871
9871
|
}
|
|
9872
9872
|
`;
|
|
9873
9873
|
var Title = (0, import_styled_components58.default)(import_react_dialog2.Title)`
|
|
@@ -9881,9 +9881,9 @@ var ModalHeader = ({
|
|
|
9881
9881
|
hideTitle,
|
|
9882
9882
|
hideCloseButton
|
|
9883
9883
|
}) => {
|
|
9884
|
-
const
|
|
9885
|
-
return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(Header, { children: [
|
|
9886
|
-
|
|
9884
|
+
const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Title, { children: title });
|
|
9885
|
+
return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(Header, { $hideTitle: hideTitle, children: [
|
|
9886
|
+
TitleComponent,
|
|
9887
9887
|
hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ModalCloseButton, {})
|
|
9888
9888
|
] });
|
|
9889
9889
|
};
|
|
@@ -10155,17 +10155,96 @@ var Popover = ({
|
|
|
10155
10155
|
};
|
|
10156
10156
|
Popover.displayName = "Popover";
|
|
10157
10157
|
|
|
10158
|
-
// src/components/
|
|
10159
|
-
var import_react43 = require("react");
|
|
10158
|
+
// src/components/ProgressBar/ProgressBar.tsx
|
|
10160
10159
|
var import_styled_components63 = __toESM(require("styled-components"));
|
|
10160
|
+
var import_react_progress = require("@radix-ui/react-progress");
|
|
10161
10161
|
var import_type_guards36 = require("@wistia/type-guards");
|
|
10162
10162
|
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
10163
|
-
var
|
|
10163
|
+
var ProgressBarWrapper = import_styled_components63.default.div`
|
|
10164
|
+
--progress-bar-height: 8px;
|
|
10165
|
+
--progress-bar-indicator-color: var(--wui-color-bg-fill);
|
|
10166
|
+
--progress-bar-background-color: var(--wui-color-bg-surface-secondary);
|
|
10167
|
+
|
|
10168
|
+
display: flex;
|
|
10169
|
+
align-items: center;
|
|
10170
|
+
gap: var(--wui-space-02);
|
|
10171
|
+
`;
|
|
10172
|
+
var getTranslateValue = (progress, max) => {
|
|
10173
|
+
if (progress === 0) {
|
|
10174
|
+
return "translateX(-101%)";
|
|
10175
|
+
}
|
|
10176
|
+
const progressPercentage = progress / max * 100;
|
|
10177
|
+
return `translateX(-${100 - progressPercentage}%)`;
|
|
10178
|
+
};
|
|
10179
|
+
var ProgressBarLabel = import_styled_components63.default.div`
|
|
10180
|
+
display: flex;
|
|
10181
|
+
line-height: var(--wui-typography-label-3-line-height);
|
|
10182
|
+
font-size: var(--wui-typography-label-3-size);
|
|
10183
|
+
font-weight: var(--wui-typography-weight-label);
|
|
10184
|
+
color: var(--wui-color-text-secondary);
|
|
10185
|
+
flex-shrink: 0;
|
|
10186
|
+
`;
|
|
10187
|
+
var StyledProgressIndicator = (0, import_styled_components63.default)(import_react_progress.Indicator)`
|
|
10188
|
+
background-color: var(--progress-bar-indicator-color);
|
|
10189
|
+
width: 100%;
|
|
10190
|
+
height: 100%;
|
|
10191
|
+
border-top-right-radius: var(--wui-border-radius-rounded);
|
|
10192
|
+
border-bottom-right-radius: var(--wui-border-radius-rounded);
|
|
10193
|
+
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
10194
|
+
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
10195
|
+
`;
|
|
10196
|
+
var StyledProgressBar = (0, import_styled_components63.default)(import_react_progress.Root)`
|
|
10197
|
+
position: relative;
|
|
10198
|
+
overflow: hidden;
|
|
10199
|
+
background: var(--progress-bar-background-color);
|
|
10200
|
+
border-radius: var(--wui-border-radius-rounded);
|
|
10201
|
+
width: 100%;
|
|
10202
|
+
height: var(--progress-bar-height);
|
|
10203
|
+
|
|
10204
|
+
/* Fix overflow clipping in Safari: https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
|
|
10205
|
+
transform: translateZ(0);
|
|
10206
|
+
`;
|
|
10207
|
+
var ProgressBar = ({
|
|
10208
|
+
progress,
|
|
10209
|
+
max = 100,
|
|
10210
|
+
children,
|
|
10211
|
+
labelLeft,
|
|
10212
|
+
labelRight,
|
|
10213
|
+
...props
|
|
10214
|
+
}) => {
|
|
10215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(ProgressBarWrapper, { children: [
|
|
10216
|
+
(0, import_type_guards36.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
|
|
10217
|
+
/* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
|
|
10218
|
+
StyledProgressBar,
|
|
10219
|
+
{
|
|
10220
|
+
max,
|
|
10221
|
+
value: progress,
|
|
10222
|
+
...props,
|
|
10223
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
|
|
10224
|
+
StyledProgressIndicator,
|
|
10225
|
+
{
|
|
10226
|
+
$max: max,
|
|
10227
|
+
$progress: progress
|
|
10228
|
+
}
|
|
10229
|
+
)
|
|
10230
|
+
}
|
|
10231
|
+
),
|
|
10232
|
+
(0, import_type_guards36.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ProgressBarLabel, { children: labelRight }) : null
|
|
10233
|
+
] });
|
|
10234
|
+
};
|
|
10235
|
+
ProgressBar.displayName = "ProgressBar";
|
|
10236
|
+
|
|
10237
|
+
// src/components/Radio/Radio.tsx
|
|
10238
|
+
var import_react43 = require("react");
|
|
10239
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
10240
|
+
var import_type_guards37 = require("@wistia/type-guards");
|
|
10241
|
+
var import_jsx_runtime240 = require("react/jsx-runtime");
|
|
10242
|
+
var StyledLabelWrapper2 = import_styled_components64.default.div`
|
|
10164
10243
|
display: flex;
|
|
10165
10244
|
flex-direction: column;
|
|
10166
10245
|
padding-left: var(--wui-space-02);
|
|
10167
10246
|
`;
|
|
10168
|
-
var StyledRadio =
|
|
10247
|
+
var StyledRadio = import_styled_components64.default.input`
|
|
10169
10248
|
box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
|
|
10170
10249
|
appearance: none;
|
|
10171
10250
|
margin: 0;
|
|
@@ -10191,11 +10270,11 @@ var StyledRadio = import_styled_components63.default.input`
|
|
|
10191
10270
|
transform: scale(1);
|
|
10192
10271
|
}
|
|
10193
10272
|
`;
|
|
10194
|
-
var disabledStyle2 =
|
|
10273
|
+
var disabledStyle2 = import_styled_components64.css`
|
|
10195
10274
|
cursor: not-allowed;
|
|
10196
10275
|
opacity: 0.5;
|
|
10197
10276
|
`;
|
|
10198
|
-
var errorStyle =
|
|
10277
|
+
var errorStyle = import_styled_components64.css`
|
|
10199
10278
|
/* TODO Lamp to design error state */
|
|
10200
10279
|
&:hover,
|
|
10201
10280
|
&:focus,
|
|
@@ -10203,11 +10282,11 @@ var errorStyle = import_styled_components63.css`
|
|
|
10203
10282
|
border-color: transparent !important;
|
|
10204
10283
|
}
|
|
10205
10284
|
`;
|
|
10206
|
-
var defaultHoverStyle =
|
|
10285
|
+
var defaultHoverStyle = import_styled_components64.css`
|
|
10207
10286
|
/* TODO Lamp to design hover state */
|
|
10208
10287
|
cursor: pointer;
|
|
10209
10288
|
`;
|
|
10210
|
-
var StyledRadioWrapper =
|
|
10289
|
+
var StyledRadioWrapper = import_styled_components64.default.div`
|
|
10211
10290
|
align-items: baseline;
|
|
10212
10291
|
border: 1px solid transparent;
|
|
10213
10292
|
border-radius: 4px;
|
|
@@ -10244,14 +10323,14 @@ var Radio = (0, import_react43.forwardRef)(
|
|
|
10244
10323
|
...otherProps
|
|
10245
10324
|
}, ref) => {
|
|
10246
10325
|
const generatedId = (0, import_react43.useId)();
|
|
10247
|
-
const computedId = (0,
|
|
10248
|
-
return /* @__PURE__ */ (0,
|
|
10326
|
+
const computedId = (0, import_type_guards37.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
|
|
10327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(
|
|
10249
10328
|
StyledRadioWrapper,
|
|
10250
10329
|
{
|
|
10251
10330
|
"aria-invalid": otherProps["aria-invalid"],
|
|
10252
10331
|
disabled,
|
|
10253
10332
|
children: [
|
|
10254
|
-
/* @__PURE__ */ (0,
|
|
10333
|
+
/* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
|
|
10255
10334
|
StyledRadio,
|
|
10256
10335
|
{
|
|
10257
10336
|
ref,
|
|
@@ -10266,8 +10345,8 @@ var Radio = (0, import_react43.forwardRef)(
|
|
|
10266
10345
|
...otherProps
|
|
10267
10346
|
}
|
|
10268
10347
|
),
|
|
10269
|
-
/* @__PURE__ */ (0,
|
|
10270
|
-
/* @__PURE__ */ (0,
|
|
10348
|
+
/* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(StyledLabelWrapper2, { children: [
|
|
10349
|
+
/* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
|
|
10271
10350
|
Label,
|
|
10272
10351
|
{
|
|
10273
10352
|
disabled,
|
|
@@ -10276,7 +10355,7 @@ var Radio = (0, import_react43.forwardRef)(
|
|
|
10276
10355
|
children: label
|
|
10277
10356
|
}
|
|
10278
10357
|
),
|
|
10279
|
-
/* @__PURE__ */ (0,
|
|
10358
|
+
/* @__PURE__ */ (0, import_jsx_runtime240.jsx)(LabelDescription, { children: description })
|
|
10280
10359
|
] })
|
|
10281
10360
|
]
|
|
10282
10361
|
}
|
|
@@ -10287,13 +10366,13 @@ Radio.displayName = "Radio";
|
|
|
10287
10366
|
|
|
10288
10367
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
10289
10368
|
var import_react47 = require("react");
|
|
10290
|
-
var
|
|
10369
|
+
var import_styled_components66 = __toESM(require("styled-components"));
|
|
10291
10370
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
10292
|
-
var
|
|
10371
|
+
var import_type_guards38 = require("@wistia/type-guards");
|
|
10293
10372
|
|
|
10294
10373
|
// src/components/SegmentedControl/useSelectedItemMeasurements.tsx
|
|
10295
10374
|
var import_react44 = require("react");
|
|
10296
|
-
var
|
|
10375
|
+
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
10297
10376
|
var SelectedItemMeasurementsContext = (0, import_react44.createContext)(
|
|
10298
10377
|
null
|
|
10299
10378
|
);
|
|
@@ -10308,7 +10387,7 @@ var SelectedItemMeasurementsProvider = ({
|
|
|
10308
10387
|
}),
|
|
10309
10388
|
[selectedItemMeasurements]
|
|
10310
10389
|
);
|
|
10311
|
-
return /* @__PURE__ */ (0,
|
|
10390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
|
|
10312
10391
|
};
|
|
10313
10392
|
var useSelectedItemMeasurements = () => {
|
|
10314
10393
|
const context = (0, import_react44.useContext)(SelectedItemMeasurementsContext);
|
|
@@ -10322,7 +10401,7 @@ var useSelectedItemMeasurements = () => {
|
|
|
10322
10401
|
|
|
10323
10402
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
10324
10403
|
var import_react46 = require("react");
|
|
10325
|
-
var
|
|
10404
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
10326
10405
|
|
|
10327
10406
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
10328
10407
|
var import_react45 = require("react");
|
|
@@ -10337,8 +10416,8 @@ var useSegmentedControlValue = () => {
|
|
|
10337
10416
|
};
|
|
10338
10417
|
|
|
10339
10418
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
10340
|
-
var
|
|
10341
|
-
var SelectedItemIndicatorDiv =
|
|
10419
|
+
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
10420
|
+
var SelectedItemIndicatorDiv = import_styled_components65.default.div`
|
|
10342
10421
|
background-color: var(--wui-color-bg-fill-white);
|
|
10343
10422
|
border-radius: var(--wui-border-radius-rounded);
|
|
10344
10423
|
left: 0;
|
|
@@ -10364,7 +10443,7 @@ var SelectedItemIndicator = () => {
|
|
|
10364
10443
|
if (!selectedValue) {
|
|
10365
10444
|
return null;
|
|
10366
10445
|
}
|
|
10367
|
-
return /* @__PURE__ */ (0,
|
|
10446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
|
|
10368
10447
|
SelectedItemIndicatorDiv,
|
|
10369
10448
|
{
|
|
10370
10449
|
style: {
|
|
@@ -10377,8 +10456,8 @@ var SelectedItemIndicator = () => {
|
|
|
10377
10456
|
};
|
|
10378
10457
|
|
|
10379
10458
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
10380
|
-
var
|
|
10381
|
-
var segmentedControlStyles =
|
|
10459
|
+
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
10460
|
+
var segmentedControlStyles = import_styled_components66.css`
|
|
10382
10461
|
display: inline-flex;
|
|
10383
10462
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
10384
10463
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10388,7 +10467,7 @@ var segmentedControlStyles = import_styled_components65.css`
|
|
|
10388
10467
|
position: relative;
|
|
10389
10468
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
10390
10469
|
`;
|
|
10391
|
-
var StyledSegmentedControl = (0,
|
|
10470
|
+
var StyledSegmentedControl = (0, import_styled_components66.default)(import_react_toggle_group.Root)`
|
|
10392
10471
|
${segmentedControlStyles}
|
|
10393
10472
|
`;
|
|
10394
10473
|
var SegmentedControl = (0, import_react47.forwardRef)(
|
|
@@ -10400,10 +10479,10 @@ var SegmentedControl = (0, import_react47.forwardRef)(
|
|
|
10400
10479
|
onSelectedValueChange,
|
|
10401
10480
|
...props
|
|
10402
10481
|
}, ref) => {
|
|
10403
|
-
if ((0,
|
|
10482
|
+
if ((0, import_type_guards38.isNil)(children)) {
|
|
10404
10483
|
return null;
|
|
10405
10484
|
}
|
|
10406
|
-
return /* @__PURE__ */ (0,
|
|
10485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
10407
10486
|
StyledSegmentedControl,
|
|
10408
10487
|
{
|
|
10409
10488
|
ref,
|
|
@@ -10415,8 +10494,8 @@ var SegmentedControl = (0, import_react47.forwardRef)(
|
|
|
10415
10494
|
type: "single",
|
|
10416
10495
|
value: selectedValue,
|
|
10417
10496
|
...props,
|
|
10418
|
-
children: /* @__PURE__ */ (0,
|
|
10419
|
-
/* @__PURE__ */ (0,
|
|
10497
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(SelectedItemMeasurementsProvider, { children: [
|
|
10498
|
+
/* @__PURE__ */ (0, import_jsx_runtime243.jsx)(SelectedItemIndicator, {}),
|
|
10420
10499
|
children
|
|
10421
10500
|
] }) })
|
|
10422
10501
|
}
|
|
@@ -10427,27 +10506,27 @@ SegmentedControl.displayName = "SegmentedControl";
|
|
|
10427
10506
|
|
|
10428
10507
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
10429
10508
|
var import_react48 = require("react");
|
|
10430
|
-
var
|
|
10509
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
10431
10510
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
10432
|
-
var
|
|
10511
|
+
var import_type_guards40 = require("@wistia/type-guards");
|
|
10433
10512
|
|
|
10434
10513
|
// src/private/helpers/mergeRefs/mergeRefs.ts
|
|
10435
|
-
var
|
|
10514
|
+
var import_type_guards39 = require("@wistia/type-guards");
|
|
10436
10515
|
var mergeRefs = (refs) => (value) => {
|
|
10437
10516
|
refs.forEach((ref) => {
|
|
10438
|
-
if ((0,
|
|
10517
|
+
if ((0, import_type_guards39.isFunction)(ref)) {
|
|
10439
10518
|
ref(value);
|
|
10440
10519
|
return;
|
|
10441
10520
|
}
|
|
10442
|
-
if ((0,
|
|
10521
|
+
if ((0, import_type_guards39.isNotNil)(ref)) {
|
|
10443
10522
|
ref.current = value;
|
|
10444
10523
|
}
|
|
10445
10524
|
});
|
|
10446
10525
|
};
|
|
10447
10526
|
|
|
10448
10527
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
10449
|
-
var
|
|
10450
|
-
var segmentedControlItemStyles =
|
|
10528
|
+
var import_jsx_runtime244 = require("react/jsx-runtime");
|
|
10529
|
+
var segmentedControlItemStyles = import_styled_components67.css`
|
|
10451
10530
|
all: unset; /* ToggleGroupItem is a button element */
|
|
10452
10531
|
align-items: center;
|
|
10453
10532
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10506,7 +10585,7 @@ var segmentedControlItemStyles = import_styled_components66.css`
|
|
|
10506
10585
|
}
|
|
10507
10586
|
}
|
|
10508
10587
|
`;
|
|
10509
|
-
var StyledSegmentedControlItem = (0,
|
|
10588
|
+
var StyledSegmentedControlItem = (0, import_styled_components67.default)(import_react_toggle_group2.Item)`
|
|
10510
10589
|
${segmentedControlItemStyles}
|
|
10511
10590
|
`;
|
|
10512
10591
|
var SegmentedControlItem = (0, import_react48.forwardRef)(
|
|
@@ -10547,12 +10626,12 @@ var SegmentedControlItem = (0, import_react48.forwardRef)(
|
|
|
10547
10626
|
resizeObserver.disconnect();
|
|
10548
10627
|
};
|
|
10549
10628
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
10550
|
-
return /* @__PURE__ */ (0,
|
|
10629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
|
|
10551
10630
|
StyledSegmentedControlItem,
|
|
10552
10631
|
{
|
|
10553
10632
|
ref: combinedRef,
|
|
10554
|
-
$hasLabel: (0,
|
|
10555
|
-
"aria-label": (0,
|
|
10633
|
+
$hasLabel: (0, import_type_guards40.isNotNil)(label),
|
|
10634
|
+
"aria-label": (0, import_type_guards40.isNotNil)(label) ? void 0 : ariaLabel,
|
|
10556
10635
|
disabled,
|
|
10557
10636
|
onClick: handleClick,
|
|
10558
10637
|
value,
|
|
@@ -10569,9 +10648,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
|
10569
10648
|
// src/components/Select/Select.tsx
|
|
10570
10649
|
var import_react_select = require("@radix-ui/react-select");
|
|
10571
10650
|
var import_react49 = require("react");
|
|
10572
|
-
var
|
|
10573
|
-
var
|
|
10574
|
-
var StyledTrigger = (0,
|
|
10651
|
+
var import_styled_components68 = __toESM(require("styled-components"));
|
|
10652
|
+
var import_jsx_runtime245 = require("react/jsx-runtime");
|
|
10653
|
+
var StyledTrigger = (0, import_styled_components68.default)(import_react_select.Trigger)`
|
|
10575
10654
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
10576
10655
|
--wui-select-color-bg: var(--wui-color-bg-surface);
|
|
10577
10656
|
--wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -10619,7 +10698,7 @@ var StyledTrigger = (0, import_styled_components67.default)(import_react_select.
|
|
|
10619
10698
|
background-color: var(--wui-color-bg-surface-disabled);
|
|
10620
10699
|
}
|
|
10621
10700
|
`;
|
|
10622
|
-
var StyledContent3 = (0,
|
|
10701
|
+
var StyledContent3 = (0, import_styled_components68.default)(import_react_select.Content)`
|
|
10623
10702
|
--wui-select-content-border: var(--wui-color-border);
|
|
10624
10703
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
10625
10704
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -10647,13 +10726,13 @@ var Select = (0, import_react49.forwardRef)(
|
|
|
10647
10726
|
...props
|
|
10648
10727
|
}, forwardedRef) => {
|
|
10649
10728
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
10650
|
-
return /* @__PURE__ */ (0,
|
|
10729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
|
|
10651
10730
|
import_react_select.Root,
|
|
10652
10731
|
{
|
|
10653
10732
|
...props,
|
|
10654
10733
|
onValueChange: onChange,
|
|
10655
10734
|
children: [
|
|
10656
|
-
/* @__PURE__ */ (0,
|
|
10735
|
+
/* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
|
|
10657
10736
|
StyledTrigger,
|
|
10658
10737
|
{
|
|
10659
10738
|
ref: forwardedRef,
|
|
@@ -10661,8 +10740,8 @@ var Select = (0, import_react49.forwardRef)(
|
|
|
10661
10740
|
$fullWidth: responsiveFullWidth,
|
|
10662
10741
|
...props,
|
|
10663
10742
|
children: [
|
|
10664
|
-
/* @__PURE__ */ (0,
|
|
10665
|
-
/* @__PURE__ */ (0,
|
|
10743
|
+
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.Value, { placeholder }),
|
|
10744
|
+
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
|
|
10666
10745
|
Icon,
|
|
10667
10746
|
{
|
|
10668
10747
|
size: "md",
|
|
@@ -10672,10 +10751,10 @@ var Select = (0, import_react49.forwardRef)(
|
|
|
10672
10751
|
]
|
|
10673
10752
|
}
|
|
10674
10753
|
),
|
|
10675
|
-
/* @__PURE__ */ (0,
|
|
10676
|
-
/* @__PURE__ */ (0,
|
|
10677
|
-
/* @__PURE__ */ (0,
|
|
10678
|
-
/* @__PURE__ */ (0,
|
|
10754
|
+
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(StyledContent3, { position: "popper", children: [
|
|
10755
|
+
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon, { type: "caret-up" }) }),
|
|
10756
|
+
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.Viewport, { children }),
|
|
10757
|
+
/* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon, { type: "caret-down" }) })
|
|
10679
10758
|
] }) })
|
|
10680
10759
|
]
|
|
10681
10760
|
}
|
|
@@ -10687,9 +10766,9 @@ Select.displayName = "Select";
|
|
|
10687
10766
|
// src/components/Select/SelectOption.tsx
|
|
10688
10767
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
10689
10768
|
var import_react50 = require("react");
|
|
10690
|
-
var
|
|
10691
|
-
var
|
|
10692
|
-
var StyledItem = (0,
|
|
10769
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
10770
|
+
var import_jsx_runtime246 = require("react/jsx-runtime");
|
|
10771
|
+
var StyledItem = (0, import_styled_components69.default)(import_react_select2.Item)`
|
|
10693
10772
|
${variantStyleMap2.body3};
|
|
10694
10773
|
display: flex;
|
|
10695
10774
|
padding: var(--wui-select-option-padding);
|
|
@@ -10712,25 +10791,25 @@ var StyledItem = (0, import_styled_components68.default)(import_react_select2.It
|
|
|
10712
10791
|
background-color: transparent;
|
|
10713
10792
|
}
|
|
10714
10793
|
`;
|
|
10715
|
-
var StyledIconContainer =
|
|
10794
|
+
var StyledIconContainer = import_styled_components69.default.span`
|
|
10716
10795
|
width: 12px;
|
|
10717
10796
|
`;
|
|
10718
10797
|
var SelectOption = (0, import_react50.forwardRef)(
|
|
10719
10798
|
({ children, ...props }, forwardedRef) => {
|
|
10720
|
-
return /* @__PURE__ */ (0,
|
|
10799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
|
|
10721
10800
|
StyledItem,
|
|
10722
10801
|
{
|
|
10723
10802
|
...props,
|
|
10724
10803
|
ref: forwardedRef,
|
|
10725
10804
|
children: [
|
|
10726
|
-
/* @__PURE__ */ (0,
|
|
10805
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
10727
10806
|
Icon,
|
|
10728
10807
|
{
|
|
10729
10808
|
size: "sm",
|
|
10730
10809
|
type: "checkmark"
|
|
10731
10810
|
}
|
|
10732
10811
|
) }) }),
|
|
10733
|
-
/* @__PURE__ */ (0,
|
|
10812
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select2.ItemText, { children })
|
|
10734
10813
|
]
|
|
10735
10814
|
}
|
|
10736
10815
|
);
|
|
@@ -10740,14 +10819,14 @@ SelectOption.displayName = "Option";
|
|
|
10740
10819
|
|
|
10741
10820
|
// src/components/Select/SelectOptionGroup.tsx
|
|
10742
10821
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
10743
|
-
var
|
|
10744
|
-
var
|
|
10745
|
-
var StyledLabel4 = (0,
|
|
10822
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
10823
|
+
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
10824
|
+
var StyledLabel4 = (0, import_styled_components70.default)(import_react_select3.Label)`
|
|
10746
10825
|
padding: var(--wui-select-option-padding);
|
|
10747
10826
|
`;
|
|
10748
10827
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
10749
|
-
return /* @__PURE__ */ (0,
|
|
10750
|
-
/* @__PURE__ */ (0,
|
|
10828
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
10829
|
+
/* @__PURE__ */ (0, import_jsx_runtime247.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
10751
10830
|
Text,
|
|
10752
10831
|
{
|
|
10753
10832
|
prominence: "secondary",
|
|
@@ -10761,19 +10840,19 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
10761
10840
|
|
|
10762
10841
|
// src/components/Table/Table.tsx
|
|
10763
10842
|
var import_react52 = require("react");
|
|
10764
|
-
var
|
|
10843
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
10765
10844
|
|
|
10766
10845
|
// src/components/Table/TableContext.tsx
|
|
10767
10846
|
var import_react51 = __toESM(require("react"));
|
|
10768
10847
|
var TableContext = import_react51.default.createContext({ divided: false });
|
|
10769
10848
|
|
|
10770
10849
|
// src/components/Table/Table.tsx
|
|
10771
|
-
var
|
|
10772
|
-
var StyledTable =
|
|
10850
|
+
var import_jsx_runtime248 = require("react/jsx-runtime");
|
|
10851
|
+
var StyledTable = import_styled_components71.default.table`
|
|
10773
10852
|
width: 100%;
|
|
10774
10853
|
border-collapse: collapse;
|
|
10775
10854
|
|
|
10776
|
-
${({ $striped }) => $striped &&
|
|
10855
|
+
${({ $striped }) => $striped && import_styled_components71.css`
|
|
10777
10856
|
tbody tr:nth-child(even) {
|
|
10778
10857
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
10779
10858
|
}
|
|
@@ -10786,7 +10865,7 @@ var Table = ({
|
|
|
10786
10865
|
...props
|
|
10787
10866
|
}) => {
|
|
10788
10867
|
const contextValue = (0, import_react52.useMemo)(() => ({ divided }), [divided]);
|
|
10789
|
-
return /* @__PURE__ */ (0,
|
|
10868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
|
|
10790
10869
|
StyledTable,
|
|
10791
10870
|
{
|
|
10792
10871
|
$striped: striped,
|
|
@@ -10797,35 +10876,35 @@ var Table = ({
|
|
|
10797
10876
|
};
|
|
10798
10877
|
|
|
10799
10878
|
// src/components/Table/TableBody.tsx
|
|
10800
|
-
var
|
|
10879
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
10801
10880
|
|
|
10802
10881
|
// src/components/Table/TableSectionContext.ts
|
|
10803
10882
|
var import_react53 = require("react");
|
|
10804
10883
|
var TableSectionContext = (0, import_react53.createContext)(null);
|
|
10805
10884
|
|
|
10806
10885
|
// src/components/Table/TableBody.tsx
|
|
10807
|
-
var
|
|
10808
|
-
var StyledTbody =
|
|
10886
|
+
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
10887
|
+
var StyledTbody = import_styled_components72.default.tbody``;
|
|
10809
10888
|
var TableBody = ({ children, ...props }) => {
|
|
10810
|
-
return /* @__PURE__ */ (0,
|
|
10889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(StyledTbody, { ...props, children }) });
|
|
10811
10890
|
};
|
|
10812
10891
|
|
|
10813
10892
|
// src/components/Table/TableCell.tsx
|
|
10814
10893
|
var import_react54 = require("react");
|
|
10815
|
-
var
|
|
10816
|
-
var
|
|
10817
|
-
var sharedStyles =
|
|
10894
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
10895
|
+
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
10896
|
+
var sharedStyles = import_styled_components73.css`
|
|
10818
10897
|
color: var(--wui-color-text);
|
|
10819
10898
|
padding: var(--wui-space-02);
|
|
10820
10899
|
text-align: left;
|
|
10821
10900
|
`;
|
|
10822
|
-
var StyledTh =
|
|
10901
|
+
var StyledTh = import_styled_components73.default.th`
|
|
10823
10902
|
${sharedStyles}
|
|
10824
10903
|
font-size: var(--wui-typography-body-4-size);
|
|
10825
10904
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
10826
10905
|
line-height: var(--wui-typography-body-4-line-height);
|
|
10827
10906
|
`;
|
|
10828
|
-
var StyledTd =
|
|
10907
|
+
var StyledTd = import_styled_components73.default.td`
|
|
10829
10908
|
${sharedStyles}
|
|
10830
10909
|
font-size: var(--wui-typography-body-2-size);
|
|
10831
10910
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -10834,37 +10913,37 @@ var StyledTd = import_styled_components72.default.td`
|
|
|
10834
10913
|
var TableCell = ({ children, ...props }) => {
|
|
10835
10914
|
const section = (0, import_react54.useContext)(TableSectionContext);
|
|
10836
10915
|
if (section === "head") {
|
|
10837
|
-
return /* @__PURE__ */ (0,
|
|
10916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTh, { ...props, children });
|
|
10838
10917
|
}
|
|
10839
|
-
return /* @__PURE__ */ (0,
|
|
10918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTd, { ...props, children });
|
|
10840
10919
|
};
|
|
10841
10920
|
|
|
10842
10921
|
// src/components/Table/TableFooter.tsx
|
|
10843
|
-
var
|
|
10844
|
-
var
|
|
10845
|
-
var StyledTfoot =
|
|
10922
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
10923
|
+
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
10924
|
+
var StyledTfoot = import_styled_components74.default.tfoot``;
|
|
10846
10925
|
var TableFooter = ({ children, ...props }) => {
|
|
10847
|
-
return /* @__PURE__ */ (0,
|
|
10926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTfoot, { ...props, children }) });
|
|
10848
10927
|
};
|
|
10849
10928
|
|
|
10850
10929
|
// src/components/Table/TableHead.tsx
|
|
10851
|
-
var
|
|
10852
|
-
var
|
|
10853
|
-
var StyledThead =
|
|
10930
|
+
var import_styled_components75 = __toESM(require("styled-components"));
|
|
10931
|
+
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
10932
|
+
var StyledThead = import_styled_components75.default.thead``;
|
|
10854
10933
|
var TableHead = ({ children, ...props }) => {
|
|
10855
|
-
return /* @__PURE__ */ (0,
|
|
10934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledThead, { ...props, children }) });
|
|
10856
10935
|
};
|
|
10857
10936
|
|
|
10858
10937
|
// src/components/Table/TableRow.tsx
|
|
10859
10938
|
var import_react55 = require("react");
|
|
10860
|
-
var
|
|
10861
|
-
var
|
|
10862
|
-
var StyledTr =
|
|
10939
|
+
var import_styled_components76 = __toESM(require("styled-components"));
|
|
10940
|
+
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
10941
|
+
var StyledTr = import_styled_components76.default.tr`
|
|
10863
10942
|
${({ $divided }) => $divided && `border-bottom: 1px solid var(--wui-color-border);`}
|
|
10864
10943
|
`;
|
|
10865
10944
|
var TableRow = ({ children, ...props }) => {
|
|
10866
10945
|
const { divided = false } = (0, import_react55.useContext)(TableContext);
|
|
10867
|
-
return /* @__PURE__ */ (0,
|
|
10946
|
+
return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
|
|
10868
10947
|
StyledTr,
|
|
10869
10948
|
{
|
|
10870
10949
|
$divided: divided,
|
|
@@ -10877,19 +10956,19 @@ var TableRow = ({ children, ...props }) => {
|
|
|
10877
10956
|
// src/components/Tabs/Tabs.tsx
|
|
10878
10957
|
var import_react60 = require("react");
|
|
10879
10958
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
10880
|
-
var
|
|
10881
|
-
var
|
|
10959
|
+
var import_type_guards42 = require("@wistia/type-guards");
|
|
10960
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
10882
10961
|
|
|
10883
10962
|
// src/components/Tabs/TabPanel.tsx
|
|
10884
|
-
var
|
|
10963
|
+
var import_styled_components77 = __toESM(require("styled-components"));
|
|
10885
10964
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
10886
|
-
var
|
|
10887
|
-
var StyledTabPanel = (0,
|
|
10965
|
+
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
10966
|
+
var StyledTabPanel = (0, import_styled_components77.default)(import_react_tabs.Content)`
|
|
10888
10967
|
display: flex;
|
|
10889
10968
|
flex-direction: column;
|
|
10890
10969
|
`;
|
|
10891
10970
|
var TabPanel = ({ children, value, ...props }) => {
|
|
10892
|
-
return /* @__PURE__ */ (0,
|
|
10971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
|
|
10893
10972
|
StyledTabPanel,
|
|
10894
10973
|
{
|
|
10895
10974
|
value,
|
|
@@ -10901,10 +10980,10 @@ var TabPanel = ({ children, value, ...props }) => {
|
|
|
10901
10980
|
TabPanel.displayName = "TabPanel";
|
|
10902
10981
|
|
|
10903
10982
|
// src/components/Tabs/TabList.tsx
|
|
10904
|
-
var
|
|
10983
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
10905
10984
|
var import_react_tabs2 = require("@radix-ui/react-tabs");
|
|
10906
|
-
var
|
|
10907
|
-
var StyledTabList = (0,
|
|
10985
|
+
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
10986
|
+
var StyledTabList = (0, import_styled_components78.default)(import_react_tabs2.List)`
|
|
10908
10987
|
${segmentedControlStyles}
|
|
10909
10988
|
|
|
10910
10989
|
margin-bottom: var(--wui-space-04);
|
|
@@ -10917,7 +10996,7 @@ var TabList = ({
|
|
|
10917
10996
|
ariaLabel,
|
|
10918
10997
|
...props
|
|
10919
10998
|
}) => {
|
|
10920
|
-
return /* @__PURE__ */ (0,
|
|
10999
|
+
return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
|
|
10921
11000
|
StyledTabList,
|
|
10922
11001
|
{
|
|
10923
11002
|
$fullWidth: fullWidth,
|
|
@@ -10931,9 +11010,9 @@ TabList.displayName = "TabList";
|
|
|
10931
11010
|
|
|
10932
11011
|
// src/components/Tabs/TabItem.tsx
|
|
10933
11012
|
var import_react57 = require("react");
|
|
10934
|
-
var
|
|
11013
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
10935
11014
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
10936
|
-
var
|
|
11015
|
+
var import_type_guards41 = require("@wistia/type-guards");
|
|
10937
11016
|
|
|
10938
11017
|
// src/components/Tabs/useTabsValue.tsx
|
|
10939
11018
|
var import_react56 = require("react");
|
|
@@ -10948,8 +11027,8 @@ var useTabsValue = () => {
|
|
|
10948
11027
|
};
|
|
10949
11028
|
|
|
10950
11029
|
// src/components/Tabs/TabItem.tsx
|
|
10951
|
-
var
|
|
10952
|
-
var StyledTabItem = (0,
|
|
11030
|
+
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
11031
|
+
var StyledTabItem = (0, import_styled_components79.default)(import_react_tabs3.Trigger)`
|
|
10953
11032
|
${segmentedControlItemStyles}
|
|
10954
11033
|
|
|
10955
11034
|
&:focus-visible {
|
|
@@ -10987,12 +11066,12 @@ var TabItem = (0, import_react57.forwardRef)(
|
|
|
10987
11066
|
resizeObserver.disconnect();
|
|
10988
11067
|
};
|
|
10989
11068
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
10990
|
-
return /* @__PURE__ */ (0,
|
|
11069
|
+
return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(
|
|
10991
11070
|
StyledTabItem,
|
|
10992
11071
|
{
|
|
10993
11072
|
ref: combinedRef,
|
|
10994
|
-
$hasLabel: (0,
|
|
10995
|
-
"aria-label": (0,
|
|
11073
|
+
$hasLabel: (0, import_type_guards41.isNotNil)(label),
|
|
11074
|
+
"aria-label": (0, import_type_guards41.isNotNil)(label) ? void 0 : ariaLabel,
|
|
10996
11075
|
disabled,
|
|
10997
11076
|
value,
|
|
10998
11077
|
children: [
|
|
@@ -11029,9 +11108,9 @@ var extractTabItems = (children) => {
|
|
|
11029
11108
|
|
|
11030
11109
|
// src/components/Tabs/SelectedItemIndicator.tsx
|
|
11031
11110
|
var import_react59 = require("react");
|
|
11032
|
-
var
|
|
11033
|
-
var
|
|
11034
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
11111
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
11112
|
+
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
11113
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components80.default)(SelectedItemIndicatorDiv)`
|
|
11035
11114
|
&:has(~ ${StyledTabItem}:focus-visible) {
|
|
11036
11115
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
11037
11116
|
}
|
|
@@ -11050,7 +11129,7 @@ var SelectedItemIndicator2 = () => {
|
|
|
11050
11129
|
if (selectedValue == null) {
|
|
11051
11130
|
return null;
|
|
11052
11131
|
}
|
|
11053
|
-
return /* @__PURE__ */ (0,
|
|
11132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
|
|
11054
11133
|
TabsSelectedItemIndicatorDiv,
|
|
11055
11134
|
{
|
|
11056
11135
|
style: {
|
|
@@ -11063,19 +11142,19 @@ var SelectedItemIndicator2 = () => {
|
|
|
11063
11142
|
};
|
|
11064
11143
|
|
|
11065
11144
|
// src/components/Tabs/Tabs.tsx
|
|
11066
|
-
var
|
|
11067
|
-
var TabsContainer =
|
|
11145
|
+
var import_jsx_runtime258 = require("react/jsx-runtime");
|
|
11146
|
+
var TabsContainer = import_styled_components81.default.div`
|
|
11068
11147
|
display: flex;
|
|
11069
11148
|
flex-direction: column;
|
|
11070
11149
|
height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
|
|
11071
11150
|
overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
|
|
11072
11151
|
`;
|
|
11073
|
-
var StickyTabContent =
|
|
11152
|
+
var StickyTabContent = import_styled_components81.default.div`
|
|
11074
11153
|
flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
|
|
11075
11154
|
overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
|
|
11076
11155
|
overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
|
|
11077
11156
|
`;
|
|
11078
|
-
var StyledTabsRoot = (0,
|
|
11157
|
+
var StyledTabsRoot = (0, import_styled_components81.default)(import_react_tabs4.Root)`
|
|
11079
11158
|
display: flex;
|
|
11080
11159
|
flex-direction: column;
|
|
11081
11160
|
height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
|
|
@@ -11098,7 +11177,7 @@ var Tabs = (0, import_react60.forwardRef)(
|
|
|
11098
11177
|
onValueChange: setInternalSelectedValue
|
|
11099
11178
|
} : { value: selectedValue, onValueChange: onSelectedValueChange };
|
|
11100
11179
|
const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
|
|
11101
|
-
return /* @__PURE__ */ (0,
|
|
11180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
11102
11181
|
StyledTabsRoot,
|
|
11103
11182
|
{
|
|
11104
11183
|
ref,
|
|
@@ -11106,14 +11185,14 @@ var Tabs = (0, import_react60.forwardRef)(
|
|
|
11106
11185
|
activationMode: "automatic",
|
|
11107
11186
|
...otherProps,
|
|
11108
11187
|
...modeProps,
|
|
11109
|
-
children: /* @__PURE__ */ (0,
|
|
11110
|
-
/* @__PURE__ */ (0,
|
|
11188
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(SelectedItemMeasurementsProvider, { children: [
|
|
11189
|
+
/* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
|
|
11111
11190
|
TabList,
|
|
11112
11191
|
{
|
|
11113
11192
|
ariaLabel,
|
|
11114
11193
|
fullWidth,
|
|
11115
11194
|
children: [
|
|
11116
|
-
/* @__PURE__ */ (0,
|
|
11195
|
+
/* @__PURE__ */ (0, import_jsx_runtime258.jsx)(SelectedItemIndicator2, {}),
|
|
11117
11196
|
tabItems.map((tab) => {
|
|
11118
11197
|
const {
|
|
11119
11198
|
value,
|
|
@@ -11122,8 +11201,8 @@ var Tabs = (0, import_react60.forwardRef)(
|
|
|
11122
11201
|
label,
|
|
11123
11202
|
"aria-label": ariaLabelForTab
|
|
11124
11203
|
} = tab.props;
|
|
11125
|
-
if ((0,
|
|
11126
|
-
return /* @__PURE__ */ (0,
|
|
11204
|
+
if ((0, import_type_guards42.isNil)(icon)) {
|
|
11205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
11127
11206
|
TabItem,
|
|
11128
11207
|
{
|
|
11129
11208
|
disabled,
|
|
@@ -11133,8 +11212,8 @@ var Tabs = (0, import_react60.forwardRef)(
|
|
|
11133
11212
|
value
|
|
11134
11213
|
);
|
|
11135
11214
|
}
|
|
11136
|
-
if ((0,
|
|
11137
|
-
return /* @__PURE__ */ (0,
|
|
11215
|
+
if ((0, import_type_guards42.isNotNil)(label)) {
|
|
11216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
11138
11217
|
TabItem,
|
|
11139
11218
|
{
|
|
11140
11219
|
disabled,
|
|
@@ -11145,8 +11224,8 @@ var Tabs = (0, import_react60.forwardRef)(
|
|
|
11145
11224
|
value
|
|
11146
11225
|
);
|
|
11147
11226
|
}
|
|
11148
|
-
if ((0,
|
|
11149
|
-
return /* @__PURE__ */ (0,
|
|
11227
|
+
if ((0, import_type_guards42.isNotNil)(ariaLabelForTab)) {
|
|
11228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
11150
11229
|
TabItem,
|
|
11151
11230
|
{
|
|
11152
11231
|
"aria-label": ariaLabelForTab,
|
|
@@ -11162,7 +11241,7 @@ var Tabs = (0, import_react60.forwardRef)(
|
|
|
11162
11241
|
]
|
|
11163
11242
|
}
|
|
11164
11243
|
),
|
|
11165
|
-
/* @__PURE__ */ (0,
|
|
11244
|
+
/* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
11166
11245
|
TabPanel,
|
|
11167
11246
|
{
|
|
11168
11247
|
value: tab.props.value,
|
|
@@ -11179,18 +11258,18 @@ Tabs.displayName = "Tabs";
|
|
|
11179
11258
|
|
|
11180
11259
|
// src/components/Tabs/Tab.tsx
|
|
11181
11260
|
var import_react61 = require("react");
|
|
11182
|
-
var
|
|
11261
|
+
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
11183
11262
|
var Tab = (0, import_react61.forwardRef)(({ children }, ref) => {
|
|
11184
|
-
return /* @__PURE__ */ (0,
|
|
11263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("div", { ref, children });
|
|
11185
11264
|
});
|
|
11186
11265
|
Tab.displayName = "Tab";
|
|
11187
11266
|
|
|
11188
11267
|
// src/components/Tag/Tag.tsx
|
|
11189
11268
|
var import_react62 = require("react");
|
|
11190
|
-
var
|
|
11191
|
-
var
|
|
11192
|
-
var
|
|
11193
|
-
var TagLabel =
|
|
11269
|
+
var import_styled_components82 = __toESM(require("styled-components"));
|
|
11270
|
+
var import_type_guards43 = require("@wistia/type-guards");
|
|
11271
|
+
var import_jsx_runtime260 = require("react/jsx-runtime");
|
|
11272
|
+
var TagLabel = import_styled_components82.default.a`
|
|
11194
11273
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11195
11274
|
font-size: var(--wui-typography-label-4-size);
|
|
11196
11275
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -11218,14 +11297,14 @@ var TagLabel = import_styled_components81.default.a`
|
|
|
11218
11297
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
11219
11298
|
}
|
|
11220
11299
|
`;
|
|
11221
|
-
var TagDivider =
|
|
11300
|
+
var TagDivider = import_styled_components82.default.div`
|
|
11222
11301
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11223
11302
|
border-left: 1px solid var(--wui-color-border);
|
|
11224
11303
|
display: flex;
|
|
11225
11304
|
height: 14px;
|
|
11226
11305
|
width: 1px;
|
|
11227
11306
|
`;
|
|
11228
|
-
var StyledRemoveButton =
|
|
11307
|
+
var StyledRemoveButton = import_styled_components82.default.button`
|
|
11229
11308
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11230
11309
|
all: unset;
|
|
11231
11310
|
cursor: pointer;
|
|
@@ -11253,7 +11332,7 @@ var StyledRemoveButton = import_styled_components81.default.button`
|
|
|
11253
11332
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
11254
11333
|
}
|
|
11255
11334
|
`;
|
|
11256
|
-
var StyledTag =
|
|
11335
|
+
var StyledTag = import_styled_components82.default.div`
|
|
11257
11336
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
11258
11337
|
align-items: center;
|
|
11259
11338
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -11266,31 +11345,31 @@ var StyledTag = import_styled_components81.default.div`
|
|
|
11266
11345
|
}
|
|
11267
11346
|
`;
|
|
11268
11347
|
var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
11269
|
-
if ((0,
|
|
11348
|
+
if ((0, import_type_guards43.isNil)(onClickRemove)) {
|
|
11270
11349
|
return null;
|
|
11271
11350
|
}
|
|
11272
|
-
if ((0,
|
|
11351
|
+
if ((0, import_type_guards43.isNil)(onClickRemoveLabel)) {
|
|
11273
11352
|
throw new Error(
|
|
11274
11353
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
11275
11354
|
);
|
|
11276
11355
|
}
|
|
11277
|
-
return /* @__PURE__ */ (0,
|
|
11278
|
-
/* @__PURE__ */ (0,
|
|
11279
|
-
/* @__PURE__ */ (0,
|
|
11356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(import_jsx_runtime260.Fragment, { children: [
|
|
11357
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(TagDivider, { $colorScheme: colorScheme }),
|
|
11358
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
|
|
11280
11359
|
StyledRemoveButton,
|
|
11281
11360
|
{
|
|
11282
11361
|
$colorScheme: colorScheme,
|
|
11283
11362
|
onClick: onClickRemove,
|
|
11284
11363
|
type: "button",
|
|
11285
11364
|
children: [
|
|
11286
|
-
/* @__PURE__ */ (0,
|
|
11365
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
11287
11366
|
Icon,
|
|
11288
11367
|
{
|
|
11289
11368
|
size: "sm",
|
|
11290
11369
|
type: "close"
|
|
11291
11370
|
}
|
|
11292
11371
|
),
|
|
11293
|
-
/* @__PURE__ */ (0,
|
|
11372
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
11294
11373
|
]
|
|
11295
11374
|
}
|
|
11296
11375
|
)
|
|
@@ -11298,15 +11377,15 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
|
11298
11377
|
};
|
|
11299
11378
|
var Tag = (0, import_react62.forwardRef)(
|
|
11300
11379
|
({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
|
|
11301
|
-
const labelProps = (0,
|
|
11302
|
-
return /* @__PURE__ */ (0,
|
|
11380
|
+
const labelProps = (0, import_type_guards43.isNotNil)(href) && (0, import_type_guards43.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
|
|
11381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
|
|
11303
11382
|
StyledTag,
|
|
11304
11383
|
{
|
|
11305
11384
|
ref,
|
|
11306
11385
|
$colorScheme: colorScheme,
|
|
11307
11386
|
...otherProps,
|
|
11308
11387
|
children: [
|
|
11309
|
-
/* @__PURE__ */ (0,
|
|
11388
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
11310
11389
|
TagLabel,
|
|
11311
11390
|
{
|
|
11312
11391
|
...labelProps,
|
|
@@ -11314,7 +11393,7 @@ var Tag = (0, import_react62.forwardRef)(
|
|
|
11314
11393
|
children: label
|
|
11315
11394
|
}
|
|
11316
11395
|
),
|
|
11317
|
-
/* @__PURE__ */ (0,
|
|
11396
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
11318
11397
|
RemoveButton,
|
|
11319
11398
|
{
|
|
11320
11399
|
colorScheme,
|
|
@@ -11330,26 +11409,26 @@ var Tag = (0, import_react62.forwardRef)(
|
|
|
11330
11409
|
Tag.displayName = "Tag";
|
|
11331
11410
|
|
|
11332
11411
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
11333
|
-
var
|
|
11334
|
-
var
|
|
11335
|
-
var
|
|
11412
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
11413
|
+
var import_type_guards44 = require("@wistia/type-guards");
|
|
11414
|
+
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
11336
11415
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
11337
11416
|
if (iconOnly) {
|
|
11338
|
-
return /* @__PURE__ */ (0,
|
|
11417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
|
|
11339
11418
|
"g",
|
|
11340
11419
|
{
|
|
11341
11420
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
11342
11421
|
fill: brandmarkColor,
|
|
11343
|
-
children: /* @__PURE__ */ (0,
|
|
11422
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime261.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" })
|
|
11344
11423
|
}
|
|
11345
11424
|
);
|
|
11346
11425
|
}
|
|
11347
|
-
return /* @__PURE__ */ (0,
|
|
11426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
|
|
11348
11427
|
"g",
|
|
11349
11428
|
{
|
|
11350
11429
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
11351
11430
|
fill: brandmarkColor,
|
|
11352
|
-
children: /* @__PURE__ */ (0,
|
|
11431
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime261.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" })
|
|
11353
11432
|
}
|
|
11354
11433
|
);
|
|
11355
11434
|
};
|
|
@@ -11357,12 +11436,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
11357
11436
|
if (iconOnly) {
|
|
11358
11437
|
return null;
|
|
11359
11438
|
}
|
|
11360
|
-
return /* @__PURE__ */ (0,
|
|
11439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
|
|
11361
11440
|
"g",
|
|
11362
11441
|
{
|
|
11363
11442
|
"data-testid": "ui-wistia-logo-logotype",
|
|
11364
11443
|
fill: logotypeColor,
|
|
11365
|
-
children: /* @__PURE__ */ (0,
|
|
11444
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime261.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" })
|
|
11366
11445
|
}
|
|
11367
11446
|
);
|
|
11368
11447
|
};
|
|
@@ -11372,7 +11451,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
11372
11451
|
}
|
|
11373
11452
|
return "0 0 144 31.47";
|
|
11374
11453
|
};
|
|
11375
|
-
var WistiaLogoComponent =
|
|
11454
|
+
var WistiaLogoComponent = import_styled_components83.default.svg`
|
|
11376
11455
|
height: ${({ height }) => `${height}px`};
|
|
11377
11456
|
|
|
11378
11457
|
/* ensure it will always fit on mobile */
|
|
@@ -11388,12 +11467,12 @@ var WistiaLogoComponent = import_styled_components82.default.svg`
|
|
|
11388
11467
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
11389
11468
|
if ($opticallyCentered) {
|
|
11390
11469
|
if ($iconOnly) {
|
|
11391
|
-
return
|
|
11470
|
+
return import_styled_components83.css`
|
|
11392
11471
|
aspect-ratio: 1;
|
|
11393
11472
|
padding: 11.85% 3.12% 13.91%;
|
|
11394
11473
|
`;
|
|
11395
11474
|
}
|
|
11396
|
-
return
|
|
11475
|
+
return import_styled_components83.css`
|
|
11397
11476
|
aspect-ratio: 127 / 32;
|
|
11398
11477
|
`;
|
|
11399
11478
|
}
|
|
@@ -11430,7 +11509,7 @@ var WistiaLogo = ({
|
|
|
11430
11509
|
};
|
|
11431
11510
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
11432
11511
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
11433
|
-
const Logo = /* @__PURE__ */ (0,
|
|
11512
|
+
const Logo = /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
|
|
11434
11513
|
WistiaLogoComponent,
|
|
11435
11514
|
{
|
|
11436
11515
|
$hoverColor: hoverColor,
|
|
@@ -11443,14 +11522,14 @@ var WistiaLogo = ({
|
|
|
11443
11522
|
xmlns: "http://www.w3.org/2000/svg",
|
|
11444
11523
|
...otherProps,
|
|
11445
11524
|
children: [
|
|
11446
|
-
/* @__PURE__ */ (0,
|
|
11447
|
-
(0,
|
|
11525
|
+
/* @__PURE__ */ (0, import_jsx_runtime261.jsx)("title", { children: title }),
|
|
11526
|
+
(0, import_type_guards44.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("desc", { children: description }) : null,
|
|
11448
11527
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
11449
11528
|
renderLogotype(logotypeColor, iconOnly)
|
|
11450
11529
|
]
|
|
11451
11530
|
}
|
|
11452
11531
|
);
|
|
11453
|
-
return href !== void 0 ? /* @__PURE__ */ (0,
|
|
11532
|
+
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("a", { href, children: Logo }) : Logo;
|
|
11454
11533
|
};
|
|
11455
11534
|
WistiaLogo.displayName = "WistiaLogo";
|
|
11456
11535
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -11502,6 +11581,7 @@ WistiaLogo.displayName = "WistiaLogo";
|
|
|
11502
11581
|
Modal,
|
|
11503
11582
|
PersistentFileAmountLimitValidator,
|
|
11504
11583
|
Popover,
|
|
11584
|
+
ProgressBar,
|
|
11505
11585
|
Radio,
|
|
11506
11586
|
RadioGroup,
|
|
11507
11587
|
RadioMenuItem,
|