@wistia/ui 0.10.8 → 0.10.9-beta.046019dc.a0bcb98
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 +243 -229
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +57 -45
- package/dist/index.d.ts +57 -45
- package/dist/index.mjs +105 -88
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -4
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.10.
|
|
3
|
+
* @license @wistia/ui v0.10.9-beta.046019dc.a0bcb98
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -137,11 +137,11 @@ __export(index_exports, {
|
|
|
137
137
|
useBoolean: () => useBoolean,
|
|
138
138
|
useClipboard: () => useClipboard,
|
|
139
139
|
useElementObserver: () => useElementObserver,
|
|
140
|
-
useFilePicker: () =>
|
|
140
|
+
useFilePicker: () => useFilePicker,
|
|
141
141
|
useFocusTrap: () => useFocusTrap,
|
|
142
142
|
useForceUpdate: () => useForceUpdate,
|
|
143
143
|
useFormState: () => useFormState,
|
|
144
|
-
useImperativeFilePicker: () =>
|
|
144
|
+
useImperativeFilePicker: () => useImperativeFilePicker,
|
|
145
145
|
useIsHovered: () => useIsHovered,
|
|
146
146
|
useKey: () => useKey,
|
|
147
147
|
useLocalStorage: () => useLocalStorage,
|
|
@@ -2190,6 +2190,20 @@ var useElementObserver = () => {
|
|
|
2190
2190
|
// src/hooks/useFilePicker/useFilePicker.tsx
|
|
2191
2191
|
var import_use_file_picker = require("use-file-picker");
|
|
2192
2192
|
var import_validators = require("use-file-picker/validators");
|
|
2193
|
+
var useFilePicker = (config = {}) => {
|
|
2194
|
+
const finalConfig = {
|
|
2195
|
+
readFilesContent: false,
|
|
2196
|
+
...config
|
|
2197
|
+
};
|
|
2198
|
+
return (0, import_use_file_picker.useFilePicker)(finalConfig);
|
|
2199
|
+
};
|
|
2200
|
+
var useImperativeFilePicker = (config = {}) => {
|
|
2201
|
+
const finalConfig = {
|
|
2202
|
+
readFilesContent: false,
|
|
2203
|
+
...config
|
|
2204
|
+
};
|
|
2205
|
+
return (0, import_use_file_picker.useImperativeFilePicker)(finalConfig);
|
|
2206
|
+
};
|
|
2193
2207
|
|
|
2194
2208
|
// src/hooks/useFocusTrap/useFocusTrap.ts
|
|
2195
2209
|
var import_react9 = require("react");
|
|
@@ -2680,12 +2694,12 @@ var import_sonner2 = require("sonner");
|
|
|
2680
2694
|
|
|
2681
2695
|
// src/private/components/Toast/Toast.tsx
|
|
2682
2696
|
var import_react19 = require("react");
|
|
2683
|
-
var import_styled_components16 =
|
|
2697
|
+
var import_styled_components16 = require("styled-components");
|
|
2684
2698
|
var import_type_guards11 = require("@wistia/type-guards");
|
|
2685
2699
|
|
|
2686
2700
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2687
2701
|
var import_type_guards10 = require("@wistia/type-guards");
|
|
2688
|
-
var import_styled_components14 =
|
|
2702
|
+
var import_styled_components14 = require("styled-components");
|
|
2689
2703
|
|
|
2690
2704
|
// src/css/lineClampCss.tsx
|
|
2691
2705
|
var import_styled_components13 = require("styled-components");
|
|
@@ -2723,7 +2737,7 @@ var ellipsisStyle = import_styled_components14.css`
|
|
|
2723
2737
|
}
|
|
2724
2738
|
}
|
|
2725
2739
|
`;
|
|
2726
|
-
var EllipsisComponent = import_styled_components14.
|
|
2740
|
+
var EllipsisComponent = import_styled_components14.styled.span`
|
|
2727
2741
|
${ellipsisStyle};
|
|
2728
2742
|
${({ $lines }) => {
|
|
2729
2743
|
if ((0, import_type_guards10.isNotNil)($lines)) {
|
|
@@ -2866,14 +2880,14 @@ var getColorScheme = (colorScheme) => {
|
|
|
2866
2880
|
|
|
2867
2881
|
// src/private/components/Toast/Toast.tsx
|
|
2868
2882
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2869
|
-
var Message = (0, import_styled_components16.
|
|
2883
|
+
var Message = (0, import_styled_components16.styled)(Ellipsis)`
|
|
2870
2884
|
line-height: var(--wui-typography-label-3-line-height);
|
|
2871
2885
|
font-size: var(--wui-typography-label-3-size);
|
|
2872
2886
|
font-weight: var(--wui-typography-label-3-weight);
|
|
2873
2887
|
|
|
2874
2888
|
${lineClampCss(3)}
|
|
2875
2889
|
`;
|
|
2876
|
-
var MessageWrapper = import_styled_components16.
|
|
2890
|
+
var MessageWrapper = import_styled_components16.styled.div`
|
|
2877
2891
|
display: flex;
|
|
2878
2892
|
flex-grow: 1;
|
|
2879
2893
|
flex-shrink: 1;
|
|
@@ -2886,13 +2900,13 @@ var MessageWrapper = import_styled_components16.default.div`
|
|
|
2886
2900
|
margin-right: var(--wui-space-02); /* space between icon & message */
|
|
2887
2901
|
}
|
|
2888
2902
|
`;
|
|
2889
|
-
var ActionWrapper = import_styled_components16.
|
|
2903
|
+
var ActionWrapper = import_styled_components16.styled.div`
|
|
2890
2904
|
flex-grow: 0;
|
|
2891
2905
|
flex-shrink: 0;
|
|
2892
2906
|
flex-basis: auto;
|
|
2893
2907
|
margin-right: var(--wui-space-03);
|
|
2894
2908
|
`;
|
|
2895
|
-
var StyledToast = import_styled_components16.
|
|
2909
|
+
var StyledToast = import_styled_components16.styled.div`
|
|
2896
2910
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
2897
2911
|
display: flex;
|
|
2898
2912
|
align-items: center;
|
|
@@ -2975,11 +2989,11 @@ var useToast = () => {
|
|
|
2975
2989
|
|
|
2976
2990
|
// src/components/ActionButton/ActionButton.tsx
|
|
2977
2991
|
var import_react24 = require("react");
|
|
2978
|
-
var import_styled_components22 =
|
|
2992
|
+
var import_styled_components22 = require("styled-components");
|
|
2979
2993
|
|
|
2980
2994
|
// src/components/Button/Button.tsx
|
|
2981
2995
|
var import_react23 = require("react");
|
|
2982
|
-
var import_styled_components21 =
|
|
2996
|
+
var import_styled_components21 = require("styled-components");
|
|
2983
2997
|
var import_type_guards15 = require("@wistia/type-guards");
|
|
2984
2998
|
|
|
2985
2999
|
// src/css/buttonResetCss.tsx
|
|
@@ -3184,7 +3198,7 @@ var buttonSizeStyles = {
|
|
|
3184
3198
|
|
|
3185
3199
|
// src/components/Icon/Icon.tsx
|
|
3186
3200
|
var import_type_guards13 = require("@wistia/type-guards");
|
|
3187
|
-
var import_styled_components19 =
|
|
3201
|
+
var import_styled_components19 = require("styled-components");
|
|
3188
3202
|
|
|
3189
3203
|
// src/components/Icon/icons/AbTestIcon.tsx
|
|
3190
3204
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
@@ -7102,7 +7116,7 @@ var iconSizeMap = {
|
|
|
7102
7116
|
xl: "32",
|
|
7103
7117
|
xxl: "48"
|
|
7104
7118
|
};
|
|
7105
|
-
var StyledIcon = import_styled_components19.
|
|
7119
|
+
var StyledIcon = import_styled_components19.styled.svg`
|
|
7106
7120
|
${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
|
|
7107
7121
|
`;
|
|
7108
7122
|
var Icon = ({
|
|
@@ -7152,7 +7166,7 @@ Icon.displayName = "Icon";
|
|
|
7152
7166
|
|
|
7153
7167
|
// src/components/Link/Link.tsx
|
|
7154
7168
|
var import_react22 = require("react");
|
|
7155
|
-
var import_styled_components20 =
|
|
7169
|
+
var import_styled_components20 = require("styled-components");
|
|
7156
7170
|
var import_react_router_dom = require("react-router-dom");
|
|
7157
7171
|
var import_type_guards14 = require("@wistia/type-guards");
|
|
7158
7172
|
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
@@ -7171,7 +7185,7 @@ var generateHref = (href, type, disabled) => {
|
|
|
7171
7185
|
};
|
|
7172
7186
|
var isButton = (props) => (0, import_type_guards14.isUndefined)(props.href);
|
|
7173
7187
|
var isLink = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
|
|
7174
|
-
var StyledLink = import_styled_components20.
|
|
7188
|
+
var StyledLink = import_styled_components20.styled.a`
|
|
7175
7189
|
${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
|
|
7176
7190
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7177
7191
|
cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
|
|
@@ -7293,7 +7307,7 @@ Link.displayName = "Link";
|
|
|
7293
7307
|
// src/components/Button/Button.tsx
|
|
7294
7308
|
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
7295
7309
|
var isLink2 = (props) => (0, import_type_guards15.isNotUndefined)(props.href);
|
|
7296
|
-
var StyledButton = import_styled_components21.
|
|
7310
|
+
var StyledButton = import_styled_components21.styled.button`
|
|
7297
7311
|
${buttonResetCss}
|
|
7298
7312
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7299
7313
|
${({ $size }) => buttonSizeStyles[$size]}
|
|
@@ -7302,7 +7316,7 @@ var StyledButton = import_styled_components21.default.button`
|
|
|
7302
7316
|
${({ $fullWidth }) => $fullWidth && "width: 100%;"}
|
|
7303
7317
|
text-align: center;
|
|
7304
7318
|
`;
|
|
7305
|
-
var StyledButtonContent = import_styled_components21.
|
|
7319
|
+
var StyledButtonContent = import_styled_components21.styled.div`
|
|
7306
7320
|
align-items: center;
|
|
7307
7321
|
display: inline-flex;
|
|
7308
7322
|
flex-grow: 1;
|
|
@@ -7314,10 +7328,10 @@ var StyledButtonContent = import_styled_components21.default.div`
|
|
|
7314
7328
|
${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
|
|
7315
7329
|
${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
|
|
7316
7330
|
`;
|
|
7317
|
-
var StyledButtonContentLabel = import_styled_components21.
|
|
7331
|
+
var StyledButtonContentLabel = import_styled_components21.styled.span`
|
|
7318
7332
|
flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
|
|
7319
7333
|
`;
|
|
7320
|
-
var StyledButtonLoading = import_styled_components21.
|
|
7334
|
+
var StyledButtonLoading = import_styled_components21.styled.div`
|
|
7321
7335
|
position: absolute;
|
|
7322
7336
|
display: flex;
|
|
7323
7337
|
`;
|
|
@@ -7434,7 +7448,7 @@ Button.displayName = "Button";
|
|
|
7434
7448
|
|
|
7435
7449
|
// src/components/ActionButton/ActionButton.tsx
|
|
7436
7450
|
var import_jsx_runtime196 = require("react/jsx-runtime");
|
|
7437
|
-
var StyledActionButton = (0, import_styled_components22.
|
|
7451
|
+
var StyledActionButton = (0, import_styled_components22.styled)(Button)`
|
|
7438
7452
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7439
7453
|
display: grid;
|
|
7440
7454
|
grid-template-columns: 24px 1fr;
|
|
@@ -7479,7 +7493,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
|
|
|
7479
7493
|
}
|
|
7480
7494
|
}
|
|
7481
7495
|
`;
|
|
7482
|
-
var StyledMainIcon = import_styled_components22.
|
|
7496
|
+
var StyledMainIcon = import_styled_components22.styled.div`
|
|
7483
7497
|
grid-column: 1;
|
|
7484
7498
|
grid-row: 1;
|
|
7485
7499
|
width: 24px;
|
|
@@ -7493,7 +7507,7 @@ var StyledMainIcon = import_styled_components22.default.div`
|
|
|
7493
7507
|
}
|
|
7494
7508
|
}
|
|
7495
7509
|
`;
|
|
7496
|
-
var StyledSecondaryIcon = import_styled_components22.
|
|
7510
|
+
var StyledSecondaryIcon = import_styled_components22.styled.div`
|
|
7497
7511
|
grid-column: 2;
|
|
7498
7512
|
grid-row: 1;
|
|
7499
7513
|
width: 100%;
|
|
@@ -7519,7 +7533,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
|
|
|
7519
7533
|
}
|
|
7520
7534
|
}
|
|
7521
7535
|
`;
|
|
7522
|
-
var StyledLabel = import_styled_components22.
|
|
7536
|
+
var StyledLabel = import_styled_components22.styled.span`
|
|
7523
7537
|
font-family: var(--wui-typography-heading-4-family);
|
|
7524
7538
|
font-size: var(--wui-typography-heading-4-size);
|
|
7525
7539
|
font-weight: var(--wui-typography-heading-4-weight);
|
|
@@ -7575,7 +7589,7 @@ ActionButton.displayName = "ActionButton";
|
|
|
7575
7589
|
// src/components/Avatar/Avatar.tsx
|
|
7576
7590
|
var import_react25 = require("react");
|
|
7577
7591
|
var import_type_guards18 = require("@wistia/type-guards");
|
|
7578
|
-
var import_styled_components25 =
|
|
7592
|
+
var import_styled_components25 = require("styled-components");
|
|
7579
7593
|
|
|
7580
7594
|
// src/components/Avatar/formatNameForDisplay.tsx
|
|
7581
7595
|
var import_type_guards16 = require("@wistia/type-guards");
|
|
@@ -7592,7 +7606,7 @@ var formatNameForDisplay = (name) => {
|
|
|
7592
7606
|
};
|
|
7593
7607
|
|
|
7594
7608
|
// src/components/Image/Image.tsx
|
|
7595
|
-
var import_styled_components23 =
|
|
7609
|
+
var import_styled_components23 = require("styled-components");
|
|
7596
7610
|
var import_type_guards17 = require("@wistia/type-guards");
|
|
7597
7611
|
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
7598
7612
|
var getFillStyle = (fillContainer) => {
|
|
@@ -7610,7 +7624,7 @@ var getFillStyle = (fillContainer) => {
|
|
|
7610
7624
|
}
|
|
7611
7625
|
return void 0;
|
|
7612
7626
|
};
|
|
7613
|
-
var StyledImage = import_styled_components23.
|
|
7627
|
+
var StyledImage = import_styled_components23.styled.img`
|
|
7614
7628
|
border-radius: ${({ $borderRadius }) => (0, import_type_guards17.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
|
|
7615
7629
|
${({ $fillContainer }) => getFillStyle($fillContainer)};
|
|
7616
7630
|
object-fit: ${({ $objFit }) => $objFit};
|
|
@@ -7645,7 +7659,7 @@ var Image = ({
|
|
|
7645
7659
|
Image.displayName = "Image";
|
|
7646
7660
|
|
|
7647
7661
|
// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
|
|
7648
|
-
var import_styled_components24 =
|
|
7662
|
+
var import_styled_components24 = require("styled-components");
|
|
7649
7663
|
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
7650
7664
|
var defaultColorSchemeOptions = ["default", "inherit"];
|
|
7651
7665
|
var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
|
|
@@ -7668,7 +7682,7 @@ var colorSchemeOptions = [
|
|
|
7668
7682
|
...brandColorSchemeOptions,
|
|
7669
7683
|
...vendorColorSchemeOptions
|
|
7670
7684
|
];
|
|
7671
|
-
var StyledColorSchemeWrapper = import_styled_components24.
|
|
7685
|
+
var StyledColorSchemeWrapper = import_styled_components24.styled.div`
|
|
7672
7686
|
${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
|
|
7673
7687
|
`;
|
|
7674
7688
|
var ColorSchemeWrapper = ({
|
|
@@ -7724,7 +7738,7 @@ var Initial = ({ initial }) => /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
|
|
|
7724
7738
|
]
|
|
7725
7739
|
}
|
|
7726
7740
|
);
|
|
7727
|
-
var AvatarWrapper = import_styled_components25.
|
|
7741
|
+
var AvatarWrapper = import_styled_components25.styled.div`
|
|
7728
7742
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7729
7743
|
width: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
7730
7744
|
height: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
@@ -7822,10 +7836,10 @@ Avatar.displayName = "Avatar";
|
|
|
7822
7836
|
|
|
7823
7837
|
// src/components/Badge/Badge.tsx
|
|
7824
7838
|
var import_react26 = require("react");
|
|
7825
|
-
var import_styled_components26 =
|
|
7839
|
+
var import_styled_components26 = require("styled-components");
|
|
7826
7840
|
var import_type_guards19 = require("@wistia/type-guards");
|
|
7827
7841
|
var import_jsx_runtime200 = require("react/jsx-runtime");
|
|
7828
|
-
var StyledBadge = import_styled_components26.
|
|
7842
|
+
var StyledBadge = import_styled_components26.styled.div`
|
|
7829
7843
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7830
7844
|
align-items: center;
|
|
7831
7845
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -7873,12 +7887,12 @@ Badge.displayName = "Badge";
|
|
|
7873
7887
|
|
|
7874
7888
|
// src/components/Banner/Banner.tsx
|
|
7875
7889
|
var import_react31 = require("react");
|
|
7876
|
-
var import_styled_components32 =
|
|
7890
|
+
var import_styled_components32 = require("styled-components");
|
|
7877
7891
|
var import_type_guards24 = require("@wistia/type-guards");
|
|
7878
7892
|
|
|
7879
7893
|
// src/components/Box/Box.tsx
|
|
7880
7894
|
var import_react27 = require("react");
|
|
7881
|
-
var import_styled_components27 =
|
|
7895
|
+
var import_styled_components27 = require("styled-components");
|
|
7882
7896
|
var import_type_guards20 = require("@wistia/type-guards");
|
|
7883
7897
|
|
|
7884
7898
|
// src/private/helpers/makePolymorphic/makePolymorphic.tsx
|
|
@@ -7961,7 +7975,7 @@ var getFlexStyle = (flexMode) => {
|
|
|
7961
7975
|
return null;
|
|
7962
7976
|
}
|
|
7963
7977
|
};
|
|
7964
|
-
var StyledBoxComponent = import_styled_components27.
|
|
7978
|
+
var StyledBoxComponent = import_styled_components27.styled.div`
|
|
7965
7979
|
align-content: ${({ $alignContent }) => $alignContent};
|
|
7966
7980
|
align-items: ${({ $alignItems }) => $alignItems};
|
|
7967
7981
|
align-self: ${({ $alignSelf }) => $alignSelf ?? null};
|
|
@@ -8065,7 +8079,7 @@ var Box = makePolymorphic(BoxComponent);
|
|
|
8065
8079
|
|
|
8066
8080
|
// src/components/Heading/Heading.tsx
|
|
8067
8081
|
var import_react28 = require("react");
|
|
8068
|
-
var import_styled_components28 =
|
|
8082
|
+
var import_styled_components28 = require("styled-components");
|
|
8069
8083
|
var import_type_guards21 = require("@wistia/type-guards");
|
|
8070
8084
|
var import_jsx_runtime202 = require("react/jsx-runtime");
|
|
8071
8085
|
var heroStyle = import_styled_components28.css`
|
|
@@ -8120,7 +8134,7 @@ var variantStyleMap = {
|
|
|
8120
8134
|
heading6: heading6TextStyle
|
|
8121
8135
|
};
|
|
8122
8136
|
var DEFAULT_ELEMENT2 = "h1";
|
|
8123
|
-
var StyledHeading = import_styled_components28.
|
|
8137
|
+
var StyledHeading = import_styled_components28.styled.div`
|
|
8124
8138
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8125
8139
|
font-family: var(--font-family);
|
|
8126
8140
|
font-size: var(--font-size);
|
|
@@ -8182,7 +8196,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
|
|
|
8182
8196
|
$preventUserSelect: preventUserSelect,
|
|
8183
8197
|
$truncate: truncate,
|
|
8184
8198
|
$variant: variant,
|
|
8185
|
-
as: renderAs ?? variantElementMap[variant],
|
|
8199
|
+
as: renderAs ?? variantElementMap[variant] ?? DEFAULT_ELEMENT2,
|
|
8186
8200
|
...props
|
|
8187
8201
|
}
|
|
8188
8202
|
)
|
|
@@ -8192,7 +8206,7 @@ var Heading = makePolymorphic(HeadingComponent);
|
|
|
8192
8206
|
|
|
8193
8207
|
// src/components/Text/Text.tsx
|
|
8194
8208
|
var import_react29 = require("react");
|
|
8195
|
-
var import_styled_components29 =
|
|
8209
|
+
var import_styled_components29 = require("styled-components");
|
|
8196
8210
|
var import_type_guards22 = require("@wistia/type-guards");
|
|
8197
8211
|
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
8198
8212
|
var bodyBoldStyles = import_styled_components29.css`
|
|
@@ -8314,7 +8328,7 @@ var variantElementMap2 = {
|
|
|
8314
8328
|
label3: labelElement,
|
|
8315
8329
|
label4: labelElement
|
|
8316
8330
|
};
|
|
8317
|
-
var StyledText = import_styled_components29.
|
|
8331
|
+
var StyledText = import_styled_components29.styled.div`
|
|
8318
8332
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8319
8333
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
8320
8334
|
if ($disabled) {
|
|
@@ -8391,7 +8405,7 @@ var TextComponent = (0, import_react29.forwardRef)(
|
|
|
8391
8405
|
$prominence: prominence,
|
|
8392
8406
|
$truncate: truncate,
|
|
8393
8407
|
$variant: variant,
|
|
8394
|
-
as: renderAs ?? variantElementMap2[variant],
|
|
8408
|
+
as: renderAs ?? variantElementMap2[variant] ?? DEFAULT_ELEMENT3,
|
|
8395
8409
|
...props
|
|
8396
8410
|
}
|
|
8397
8411
|
);
|
|
@@ -8401,7 +8415,7 @@ TextComponent.displayName = "Text";
|
|
|
8401
8415
|
var Text = makePolymorphic(TextComponent);
|
|
8402
8416
|
|
|
8403
8417
|
// src/components/ButtonGroup/ButtonGroup.tsx
|
|
8404
|
-
var import_styled_components30 =
|
|
8418
|
+
var import_styled_components30 = require("styled-components");
|
|
8405
8419
|
var import_type_guards23 = require("@wistia/type-guards");
|
|
8406
8420
|
var import_jsx_runtime204 = require("react/jsx-runtime");
|
|
8407
8421
|
var getAlignment = (align) => {
|
|
@@ -8416,7 +8430,7 @@ var getAlignment = (align) => {
|
|
|
8416
8430
|
}
|
|
8417
8431
|
return "flex-start";
|
|
8418
8432
|
};
|
|
8419
|
-
var ButtonGroupComponent = import_styled_components30.
|
|
8433
|
+
var ButtonGroupComponent = import_styled_components30.styled.div`
|
|
8420
8434
|
display: flex;
|
|
8421
8435
|
|
|
8422
8436
|
/* this helps ensure that primary buttons appear at the top of the column */
|
|
@@ -8481,9 +8495,9 @@ ButtonGroup.displayName = "ButtonGroup";
|
|
|
8481
8495
|
|
|
8482
8496
|
// src/components/IconButton/IconButton.tsx
|
|
8483
8497
|
var import_react30 = require("react");
|
|
8484
|
-
var import_styled_components31 =
|
|
8498
|
+
var import_styled_components31 = require("styled-components");
|
|
8485
8499
|
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
8486
|
-
var StyledButton2 = (0, import_styled_components31.
|
|
8500
|
+
var StyledButton2 = (0, import_styled_components31.styled)(Button)`
|
|
8487
8501
|
--icon-button-size-sm: 24px;
|
|
8488
8502
|
--icon-button-size-md: 32px;
|
|
8489
8503
|
--icon-button-size-lg: 40px;
|
|
@@ -8522,7 +8536,7 @@ var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
|
8522
8536
|
var BREAKPOINT_WIDTH = 600;
|
|
8523
8537
|
var VERTICAL_BREAKPOINT_WIDTH = 284;
|
|
8524
8538
|
var MIN_IMAGE_WIDTH = 400;
|
|
8525
|
-
var StyledBanner = import_styled_components32.
|
|
8539
|
+
var StyledBanner = import_styled_components32.styled.div`
|
|
8526
8540
|
--wui-banner-padding: var(--wui-space-04);
|
|
8527
8541
|
--wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
|
|
8528
8542
|
|
|
@@ -8555,7 +8569,7 @@ var StyledBanner = import_styled_components32.default.div`
|
|
|
8555
8569
|
|
|
8556
8570
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8557
8571
|
`;
|
|
8558
|
-
var IconWrapper = (0, import_styled_components32.
|
|
8572
|
+
var IconWrapper = (0, import_styled_components32.styled)(Box)`
|
|
8559
8573
|
--wui-banner-icon-size: var(--font-size, 24px);
|
|
8560
8574
|
|
|
8561
8575
|
${({ $iconPosition }) => $iconPosition === "inline" && import_styled_components32.css`
|
|
@@ -8695,9 +8709,9 @@ Banner.displayName = "Banner";
|
|
|
8695
8709
|
|
|
8696
8710
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
8697
8711
|
var import_react32 = require("react");
|
|
8698
|
-
var import_styled_components33 =
|
|
8712
|
+
var import_styled_components33 = require("styled-components");
|
|
8699
8713
|
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
8700
|
-
var StyledBreadcrumbs = import_styled_components33.
|
|
8714
|
+
var StyledBreadcrumbs = import_styled_components33.styled.nav`
|
|
8701
8715
|
display: flex;
|
|
8702
8716
|
align-items: center;
|
|
8703
8717
|
gap: var(--wui-space-01);
|
|
@@ -8742,9 +8756,9 @@ var Breadcrumbs = ({ children, ...props }) => {
|
|
|
8742
8756
|
Breadcrumbs.displayName = "Breadcrumbs";
|
|
8743
8757
|
|
|
8744
8758
|
// src/components/Breadcrumbs/Breadcrumb.tsx
|
|
8745
|
-
var import_styled_components34 =
|
|
8759
|
+
var import_styled_components34 = require("styled-components");
|
|
8746
8760
|
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8747
|
-
var BreadcrumbContent = import_styled_components34.
|
|
8761
|
+
var BreadcrumbContent = import_styled_components34.styled.span`
|
|
8748
8762
|
overflow: hidden;
|
|
8749
8763
|
white-space: nowrap;
|
|
8750
8764
|
display: block;
|
|
@@ -8776,9 +8790,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
|
|
|
8776
8790
|
};
|
|
8777
8791
|
|
|
8778
8792
|
// src/components/Card/Card.tsx
|
|
8779
|
-
var import_styled_components35 =
|
|
8793
|
+
var import_styled_components35 = require("styled-components");
|
|
8780
8794
|
var import_jsx_runtime209 = require("react/jsx-runtime");
|
|
8781
|
-
var StyledCard = (0, import_styled_components35.
|
|
8795
|
+
var StyledCard = (0, import_styled_components35.styled)(Box)`
|
|
8782
8796
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8783
8797
|
box-sizing: border-box;
|
|
8784
8798
|
padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
|
|
@@ -8836,9 +8850,9 @@ Card.displayName = "Card";
|
|
|
8836
8850
|
|
|
8837
8851
|
// src/components/Center/Center.tsx
|
|
8838
8852
|
var import_react33 = require("react");
|
|
8839
|
-
var import_styled_components36 =
|
|
8853
|
+
var import_styled_components36 = require("styled-components");
|
|
8840
8854
|
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
8841
|
-
var StyledCenter = import_styled_components36.
|
|
8855
|
+
var StyledCenter = import_styled_components36.styled.div`
|
|
8842
8856
|
box-sizing: border-box;
|
|
8843
8857
|
margin-left: auto;
|
|
8844
8858
|
margin-right: auto;
|
|
@@ -8867,21 +8881,21 @@ Center.displayName = "Center";
|
|
|
8867
8881
|
|
|
8868
8882
|
// src/components/Checkbox/Checkbox.tsx
|
|
8869
8883
|
var import_react37 = require("react");
|
|
8870
|
-
var import_styled_components42 =
|
|
8884
|
+
var import_styled_components42 = require("styled-components");
|
|
8871
8885
|
var import_type_guards28 = require("@wistia/type-guards");
|
|
8872
8886
|
|
|
8873
8887
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
8874
|
-
var import_styled_components39 =
|
|
8888
|
+
var import_styled_components39 = require("styled-components");
|
|
8875
8889
|
var import_type_guards27 = require("@wistia/type-guards");
|
|
8876
8890
|
|
|
8877
8891
|
// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
|
|
8878
|
-
var import_styled_components37 =
|
|
8892
|
+
var import_styled_components37 = require("styled-components");
|
|
8879
8893
|
var import_type_guards25 = require("@wistia/type-guards");
|
|
8880
8894
|
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
8881
8895
|
var disabledStyle = import_styled_components37.css`
|
|
8882
8896
|
color: var(--wui-color-text-disabled);
|
|
8883
8897
|
`;
|
|
8884
|
-
var StyledFormControlLabelDescription = import_styled_components37.
|
|
8898
|
+
var StyledFormControlLabelDescription = import_styled_components37.styled.div`
|
|
8885
8899
|
color: var(--wui-color-text-secondary);
|
|
8886
8900
|
display: block;
|
|
8887
8901
|
font-size: var(--wui-typography-body-4-size);
|
|
@@ -8911,11 +8925,11 @@ var FormControlLabelDescription = ({
|
|
|
8911
8925
|
FormControlLabelDescription.displayName = "FormControlLabelDescription";
|
|
8912
8926
|
|
|
8913
8927
|
// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
|
|
8914
|
-
var import_styled_components38 =
|
|
8928
|
+
var import_styled_components38 = require("styled-components");
|
|
8915
8929
|
var import_type_guards26 = require("@wistia/type-guards");
|
|
8916
8930
|
var import_jsx_runtime212 = require("react/jsx-runtime");
|
|
8917
|
-
var VisuallyHidden = import_styled_components38.
|
|
8918
|
-
var VisuallyHiddenButFocusable = import_styled_components38.
|
|
8931
|
+
var VisuallyHidden = import_styled_components38.styled.div({ ...visuallyHiddenStyle });
|
|
8932
|
+
var VisuallyHiddenButFocusable = import_styled_components38.styled.div({
|
|
8919
8933
|
"&:not(:focus-within)": visuallyHiddenStyle
|
|
8920
8934
|
});
|
|
8921
8935
|
var ScreenReaderOnly = ({
|
|
@@ -8938,11 +8952,11 @@ var disabledStyle2 = import_styled_components39.css`
|
|
|
8938
8952
|
cursor: not-allowed;
|
|
8939
8953
|
color: var(--wui-color-text-disabled);
|
|
8940
8954
|
`;
|
|
8941
|
-
var StyledLabelWrapper = import_styled_components39.
|
|
8955
|
+
var StyledLabelWrapper = import_styled_components39.styled.div`
|
|
8942
8956
|
display: flex;
|
|
8943
8957
|
flex-direction: column;
|
|
8944
8958
|
`;
|
|
8945
|
-
var StyledFormControlLabel = import_styled_components39.
|
|
8959
|
+
var StyledFormControlLabel = import_styled_components39.styled.label`
|
|
8946
8960
|
cursor: pointer;
|
|
8947
8961
|
display: flex;
|
|
8948
8962
|
align-items: center;
|
|
@@ -8990,15 +9004,15 @@ FormControlLabel.displayName = "FormControlLabel";
|
|
|
8990
9004
|
var import_react36 = require("react");
|
|
8991
9005
|
|
|
8992
9006
|
// src/components/FormGroup/FormGroup.tsx
|
|
8993
|
-
var import_styled_components41 =
|
|
9007
|
+
var import_styled_components41 = require("styled-components");
|
|
8994
9008
|
var import_react35 = require("react");
|
|
8995
9009
|
|
|
8996
9010
|
// src/components/Stack/Stack.tsx
|
|
8997
9011
|
var import_react34 = require("react");
|
|
8998
|
-
var import_styled_components40 =
|
|
9012
|
+
var import_styled_components40 = require("styled-components");
|
|
8999
9013
|
var import_jsx_runtime214 = require("react/jsx-runtime");
|
|
9000
9014
|
var DEFAULT_ELEMENT4 = "div";
|
|
9001
|
-
var StyledStack = import_styled_components40.
|
|
9015
|
+
var StyledStack = import_styled_components40.styled.div`
|
|
9002
9016
|
display: flex;
|
|
9003
9017
|
flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
|
|
9004
9018
|
gap: ${({ $gap }) => `var(--wui-${$gap})`};
|
|
@@ -9027,14 +9041,14 @@ var Stack = makePolymorphic(StackComponent);
|
|
|
9027
9041
|
|
|
9028
9042
|
// src/components/FormGroup/FormGroup.tsx
|
|
9029
9043
|
var import_jsx_runtime215 = require("react/jsx-runtime");
|
|
9030
|
-
var StyledFieldset = import_styled_components41.
|
|
9044
|
+
var StyledFieldset = import_styled_components41.styled.fieldset`
|
|
9031
9045
|
border: 0;
|
|
9032
9046
|
`;
|
|
9033
|
-
var StyledLegend = import_styled_components41.
|
|
9047
|
+
var StyledLegend = import_styled_components41.styled.legend`
|
|
9034
9048
|
margin-bottom: var(--space-01);
|
|
9035
9049
|
`;
|
|
9036
9050
|
var FormGroup = ({ children, label, ...props }) => {
|
|
9037
|
-
const ref = (0, import_react35.useRef)();
|
|
9051
|
+
const ref = (0, import_react35.useRef)(null);
|
|
9038
9052
|
return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(
|
|
9039
9053
|
Stack,
|
|
9040
9054
|
{
|
|
@@ -9137,14 +9151,14 @@ var getSizeCss = (size) => {
|
|
|
9137
9151
|
if (size === "lg") return sizeLarge;
|
|
9138
9152
|
return sizeMedium;
|
|
9139
9153
|
};
|
|
9140
|
-
var StyledCheckboxWrapper = import_styled_components42.
|
|
9154
|
+
var StyledCheckboxWrapper = import_styled_components42.styled.div`
|
|
9141
9155
|
display: flex;
|
|
9142
9156
|
margin: 0;
|
|
9143
9157
|
|
|
9144
9158
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
9145
9159
|
user-select: none;
|
|
9146
9160
|
`;
|
|
9147
|
-
var StyledCheckboxInput = import_styled_components42.
|
|
9161
|
+
var StyledCheckboxInput = import_styled_components42.styled.div`
|
|
9148
9162
|
${({ $size }) => getSizeCss($size)}
|
|
9149
9163
|
line-height: 0;
|
|
9150
9164
|
margin: 0;
|
|
@@ -9166,7 +9180,7 @@ var StyledCheckboxInput = import_styled_components42.default.div`
|
|
|
9166
9180
|
}
|
|
9167
9181
|
}
|
|
9168
9182
|
`;
|
|
9169
|
-
var StyledHiddenCheckboxInput = import_styled_components42.
|
|
9183
|
+
var StyledHiddenCheckboxInput = import_styled_components42.styled.input`
|
|
9170
9184
|
${visuallyHiddenStyle}
|
|
9171
9185
|
|
|
9172
9186
|
/* toggles display of faux-input background-color */
|
|
@@ -9288,9 +9302,9 @@ ClickRegion.displayName = "ClickRegion";
|
|
|
9288
9302
|
// src/components/Collapsible/Collapsible.tsx
|
|
9289
9303
|
var import_react_collapsible = require("@radix-ui/react-collapsible");
|
|
9290
9304
|
var import_type_guards29 = require("@wistia/type-guards");
|
|
9291
|
-
var import_styled_components43 =
|
|
9305
|
+
var import_styled_components43 = require("styled-components");
|
|
9292
9306
|
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
9293
|
-
var StyledRoot = (0, import_styled_components43.
|
|
9307
|
+
var StyledRoot = (0, import_styled_components43.styled)(import_react_collapsible.Root)`
|
|
9294
9308
|
&[data-state='closed'] [data-wui-collapsible-content] {
|
|
9295
9309
|
display: -webkit-box;
|
|
9296
9310
|
-webkit-box-orient: vertical;
|
|
@@ -9313,9 +9327,9 @@ Collapsible.displayName = "Collapsible";
|
|
|
9313
9327
|
// src/components/Collapsible/CollapsibleTrigger.tsx
|
|
9314
9328
|
var import_react39 = require("react");
|
|
9315
9329
|
var import_react_collapsible2 = require("@radix-ui/react-collapsible");
|
|
9316
|
-
var import_styled_components44 =
|
|
9330
|
+
var import_styled_components44 = require("styled-components");
|
|
9317
9331
|
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
9318
|
-
var StyledTrigger = (0, import_styled_components44.
|
|
9332
|
+
var StyledTrigger = (0, import_styled_components44.styled)(import_react_collapsible2.Trigger)`
|
|
9319
9333
|
[data-wui-collapsible-icon] {
|
|
9320
9334
|
transition: transform var(--wui-motion-duration-03) ease-in-out;
|
|
9321
9335
|
}
|
|
@@ -9364,11 +9378,11 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
|
|
|
9364
9378
|
CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
|
|
9365
9379
|
|
|
9366
9380
|
// src/components/Collapsible/CollapsibleContent.tsx
|
|
9367
|
-
var import_styled_components45 =
|
|
9381
|
+
var import_styled_components45 = require("styled-components");
|
|
9368
9382
|
var import_react_collapsible3 = require("@radix-ui/react-collapsible");
|
|
9369
9383
|
var import_type_guards30 = require("@wistia/type-guards");
|
|
9370
9384
|
var import_jsx_runtime221 = require("react/jsx-runtime");
|
|
9371
|
-
var ClampedContent = import_styled_components45.
|
|
9385
|
+
var ClampedContent = import_styled_components45.styled.div`
|
|
9372
9386
|
--wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
|
|
9373
9387
|
`;
|
|
9374
9388
|
var CollapsibleContent = ({ clamp, children }) => {
|
|
@@ -9392,14 +9406,14 @@ var CollapsibleContent = ({ clamp, children }) => {
|
|
|
9392
9406
|
var Ariakit = __toESM(require("@ariakit/react"));
|
|
9393
9407
|
var import_react41 = require("react");
|
|
9394
9408
|
var import_match_sorter = require("match-sorter");
|
|
9395
|
-
var import_styled_components48 =
|
|
9409
|
+
var import_styled_components48 = require("styled-components");
|
|
9396
9410
|
|
|
9397
9411
|
// src/components/Tag/Tag.tsx
|
|
9398
9412
|
var import_react40 = require("react");
|
|
9399
|
-
var import_styled_components46 =
|
|
9413
|
+
var import_styled_components46 = require("styled-components");
|
|
9400
9414
|
var import_type_guards31 = require("@wistia/type-guards");
|
|
9401
9415
|
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
9402
|
-
var TagLabel = import_styled_components46.
|
|
9416
|
+
var TagLabel = import_styled_components46.styled.a`
|
|
9403
9417
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9404
9418
|
font-size: var(--wui-typography-label-4-size);
|
|
9405
9419
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -9434,14 +9448,14 @@ var TagLabel = import_styled_components46.default.a`
|
|
|
9434
9448
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
9435
9449
|
}
|
|
9436
9450
|
`;
|
|
9437
|
-
var TagDivider = import_styled_components46.
|
|
9451
|
+
var TagDivider = import_styled_components46.styled.div`
|
|
9438
9452
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9439
9453
|
border-left: 1px solid var(--wui-color-border);
|
|
9440
9454
|
display: flex;
|
|
9441
9455
|
height: 14px;
|
|
9442
9456
|
width: 1px;
|
|
9443
9457
|
`;
|
|
9444
|
-
var StyledRemoveButton = import_styled_components46.
|
|
9458
|
+
var StyledRemoveButton = import_styled_components46.styled.button`
|
|
9445
9459
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9446
9460
|
all: unset;
|
|
9447
9461
|
cursor: pointer;
|
|
@@ -9469,7 +9483,7 @@ var StyledRemoveButton = import_styled_components46.default.button`
|
|
|
9469
9483
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
9470
9484
|
}
|
|
9471
9485
|
`;
|
|
9472
|
-
var StyledTag = import_styled_components46.
|
|
9486
|
+
var StyledTag = import_styled_components46.styled.div`
|
|
9473
9487
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9474
9488
|
align-items: center;
|
|
9475
9489
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -9578,7 +9592,7 @@ var inputCss = import_styled_components47.css`
|
|
|
9578
9592
|
|
|
9579
9593
|
// src/components/Combobox/Combobox.tsx
|
|
9580
9594
|
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
9581
|
-
var ComboboxWapper = import_styled_components48.
|
|
9595
|
+
var ComboboxWapper = import_styled_components48.styled.div`
|
|
9582
9596
|
${inputCss};
|
|
9583
9597
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
9584
9598
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -9627,7 +9641,7 @@ var ComboboxWapper = import_styled_components48.default.div`
|
|
|
9627
9641
|
}
|
|
9628
9642
|
}
|
|
9629
9643
|
`;
|
|
9630
|
-
var ComboboxInput = (0, import_styled_components48.
|
|
9644
|
+
var ComboboxInput = (0, import_styled_components48.styled)(Ariakit.Combobox)`
|
|
9631
9645
|
appearance: none;
|
|
9632
9646
|
padding: 0;
|
|
9633
9647
|
width: 100%;
|
|
@@ -9642,7 +9656,7 @@ var ComboboxInput = (0, import_styled_components48.default)(Ariakit.Combobox)`
|
|
|
9642
9656
|
outline-width: 2px;
|
|
9643
9657
|
}
|
|
9644
9658
|
`;
|
|
9645
|
-
var ComboboxPopover = (0, import_styled_components48.
|
|
9659
|
+
var ComboboxPopover = (0, import_styled_components48.styled)(Ariakit.Popover)`
|
|
9646
9660
|
--wui-combobox-content-border: var(--wui-color-border);
|
|
9647
9661
|
--wui-combobox-content-bg: var(--wui-color-bg-surface);
|
|
9648
9662
|
--wui-combobox-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -9667,7 +9681,7 @@ var ComboboxPopover = (0, import_styled_components48.default)(Ariakit.Popover)`
|
|
|
9667
9681
|
--item-opacity: 0.5;
|
|
9668
9682
|
}
|
|
9669
9683
|
`;
|
|
9670
|
-
var ComboboxItem2 = (0, import_styled_components48.
|
|
9684
|
+
var ComboboxItem2 = (0, import_styled_components48.styled)(Ariakit.ComboboxItem)`
|
|
9671
9685
|
${variantStyleMap2.body3};
|
|
9672
9686
|
display: flex;
|
|
9673
9687
|
padding: var(--wui-combobox-option-padding);
|
|
@@ -9692,7 +9706,7 @@ var ComboboxItem2 = (0, import_styled_components48.default)(Ariakit.ComboboxItem
|
|
|
9692
9706
|
background-color: transparent;
|
|
9693
9707
|
}
|
|
9694
9708
|
`;
|
|
9695
|
-
var NoResults = import_styled_components48.
|
|
9709
|
+
var NoResults = import_styled_components48.styled.div`
|
|
9696
9710
|
gap: var(--wui-space-02);
|
|
9697
9711
|
`;
|
|
9698
9712
|
var POPOVER_WIDTH_OFFSET = 20;
|
|
@@ -9824,10 +9838,10 @@ var Combobox2 = ({
|
|
|
9824
9838
|
|
|
9825
9839
|
// src/components/DataCards/DataCard.tsx
|
|
9826
9840
|
var import_react42 = require("react");
|
|
9827
|
-
var import_styled_components49 =
|
|
9841
|
+
var import_styled_components49 = require("styled-components");
|
|
9828
9842
|
var import_type_guards32 = require("@wistia/type-guards");
|
|
9829
9843
|
var import_jsx_runtime224 = require("react/jsx-runtime");
|
|
9830
|
-
var StyledDataCard = import_styled_components49.
|
|
9844
|
+
var StyledDataCard = import_styled_components49.styled.div`
|
|
9831
9845
|
display: grid;
|
|
9832
9846
|
grid-template-areas: 'label slot' 'value value';
|
|
9833
9847
|
grid-template-rows: auto auto;
|
|
@@ -9890,7 +9904,7 @@ var shimmer = import_styled_components49.keyframes`
|
|
|
9890
9904
|
background-position: -200% 0;
|
|
9891
9905
|
}
|
|
9892
9906
|
`;
|
|
9893
|
-
var LoadingBackground = import_styled_components49.
|
|
9907
|
+
var LoadingBackground = import_styled_components49.styled.div`
|
|
9894
9908
|
background: linear-gradient(
|
|
9895
9909
|
90deg,
|
|
9896
9910
|
var(--wui-color-bg-surface-tertiary) 25%,
|
|
@@ -9901,27 +9915,27 @@ var LoadingBackground = import_styled_components49.default.div`
|
|
|
9901
9915
|
animation: ${shimmer} 1.5s infinite;
|
|
9902
9916
|
border-radius: var(--wui-border-radius-01);
|
|
9903
9917
|
`;
|
|
9904
|
-
var StyledLoadingLabel = (0, import_styled_components49.
|
|
9918
|
+
var StyledLoadingLabel = (0, import_styled_components49.styled)(LoadingBackground)`
|
|
9905
9919
|
width: 80px;
|
|
9906
9920
|
height: var(--wui-typography-heading-6-line-height);
|
|
9907
9921
|
`;
|
|
9908
|
-
var StyledLoadingValue = (0, import_styled_components49.
|
|
9922
|
+
var StyledLoadingValue = (0, import_styled_components49.styled)(LoadingBackground)`
|
|
9909
9923
|
width: 90%;
|
|
9910
9924
|
height: var(--wui-typography-heading-3-line-height);
|
|
9911
9925
|
`;
|
|
9912
|
-
var StyledLabel2 = (0, import_styled_components49.
|
|
9926
|
+
var StyledLabel2 = (0, import_styled_components49.styled)(Heading)`
|
|
9913
9927
|
grid-area: label;
|
|
9914
9928
|
`;
|
|
9915
|
-
var StyledValue = (0, import_styled_components49.
|
|
9929
|
+
var StyledValue = (0, import_styled_components49.styled)(Heading)`
|
|
9916
9930
|
grid-area: value;
|
|
9917
9931
|
`;
|
|
9918
|
-
var StyledSlot = import_styled_components49.
|
|
9932
|
+
var StyledSlot = import_styled_components49.styled.div`
|
|
9919
9933
|
display: flex;
|
|
9920
9934
|
justify-content: flex-end;
|
|
9921
9935
|
grid-area: slot;
|
|
9922
9936
|
align-self: center;
|
|
9923
9937
|
`;
|
|
9924
|
-
var StyledDataCardTrendContainer = import_styled_components49.
|
|
9938
|
+
var StyledDataCardTrendContainer = import_styled_components49.styled.div`
|
|
9925
9939
|
position: absolute;
|
|
9926
9940
|
bottom: var(--wui-space-01);
|
|
9927
9941
|
right: var(--wui-space-01);
|
|
@@ -9996,9 +10010,9 @@ var DataCard = (props) => {
|
|
|
9996
10010
|
DataCard.displayName = "DataCard";
|
|
9997
10011
|
|
|
9998
10012
|
// src/components/DataCards/DataCards.tsx
|
|
9999
|
-
var import_styled_components50 =
|
|
10013
|
+
var import_styled_components50 = require("styled-components");
|
|
10000
10014
|
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
10001
|
-
var StyledDataCards = (0, import_styled_components50.
|
|
10015
|
+
var StyledDataCards = (0, import_styled_components50.styled)(Box)`
|
|
10002
10016
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
10003
10017
|
margin-top: 0; /* Remove default <dl> style */
|
|
10004
10018
|
> * {
|
|
@@ -10030,9 +10044,9 @@ var DataCards = ({
|
|
|
10030
10044
|
DataCards.displayName = "DataCards";
|
|
10031
10045
|
|
|
10032
10046
|
// src/components/DataCards/DataCardTrend.tsx
|
|
10033
|
-
var import_styled_components51 =
|
|
10047
|
+
var import_styled_components51 = require("styled-components");
|
|
10034
10048
|
var import_jsx_runtime226 = require("react/jsx-runtime");
|
|
10035
|
-
var StyledDataCardTrend = import_styled_components51.
|
|
10049
|
+
var StyledDataCardTrend = import_styled_components51.styled.div`
|
|
10036
10050
|
${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
|
|
10037
10051
|
background: var(--wui-color-bg-app);
|
|
10038
10052
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10068,7 +10082,7 @@ var DataCardTrend = ({
|
|
|
10068
10082
|
};
|
|
10069
10083
|
|
|
10070
10084
|
// src/components/Divider/Divider.tsx
|
|
10071
|
-
var import_styled_components52 =
|
|
10085
|
+
var import_styled_components52 = require("styled-components");
|
|
10072
10086
|
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
10073
10087
|
var horizontalBorderCss = import_styled_components52.css`
|
|
10074
10088
|
border-top-color: var(--wui-color-border);
|
|
@@ -10083,7 +10097,7 @@ var verticalBorderCss = import_styled_components52.css`
|
|
|
10083
10097
|
min-height: 100%;
|
|
10084
10098
|
width: 1px;
|
|
10085
10099
|
`;
|
|
10086
|
-
var DividerComponent = import_styled_components52.
|
|
10100
|
+
var DividerComponent = import_styled_components52.styled.div`
|
|
10087
10101
|
${({ $orientation }) => {
|
|
10088
10102
|
switch ($orientation) {
|
|
10089
10103
|
case "vertical":
|
|
@@ -10108,12 +10122,12 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
|
|
|
10108
10122
|
Divider.displayName = "Divider";
|
|
10109
10123
|
|
|
10110
10124
|
// src/components/EditableHeading/EditableHeading.tsx
|
|
10111
|
-
var import_styled_components55 =
|
|
10125
|
+
var import_styled_components55 = require("styled-components");
|
|
10112
10126
|
var import_react44 = require("react");
|
|
10113
10127
|
|
|
10114
10128
|
// src/components/Tooltip/Tooltip.tsx
|
|
10115
10129
|
var import_react_tooltip2 = require("@radix-ui/react-tooltip");
|
|
10116
|
-
var import_styled_components53 =
|
|
10130
|
+
var import_styled_components53 = require("styled-components");
|
|
10117
10131
|
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
10118
10132
|
var hide = import_styled_components53.keyframes`
|
|
10119
10133
|
from {
|
|
@@ -10163,7 +10177,7 @@ var slideRightAndFade = import_styled_components53.keyframes`
|
|
|
10163
10177
|
transform: translateX(0);
|
|
10164
10178
|
}
|
|
10165
10179
|
`;
|
|
10166
|
-
var StyledContent = (0, import_styled_components53.
|
|
10180
|
+
var StyledContent = (0, import_styled_components53.styled)(import_react_tooltip2.Content)`
|
|
10167
10181
|
--tooltip-font-family: var(--wui-typography-family-default);
|
|
10168
10182
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
10169
10183
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
@@ -10262,7 +10276,7 @@ Tooltip.displayName = "Tooltip";
|
|
|
10262
10276
|
|
|
10263
10277
|
// src/components/Input/Input.tsx
|
|
10264
10278
|
var import_react43 = require("react");
|
|
10265
|
-
var import_styled_components54 =
|
|
10279
|
+
var import_styled_components54 = require("styled-components");
|
|
10266
10280
|
var import_type_guards33 = require("@wistia/type-guards");
|
|
10267
10281
|
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
10268
10282
|
var inputStyles = import_styled_components54.css`
|
|
@@ -10300,7 +10314,7 @@ var inputStyles = import_styled_components54.css`
|
|
|
10300
10314
|
}
|
|
10301
10315
|
}
|
|
10302
10316
|
`;
|
|
10303
|
-
var StyledInputContainer = import_styled_components54.
|
|
10317
|
+
var StyledInputContainer = import_styled_components54.styled.div`
|
|
10304
10318
|
display: inline-flex;
|
|
10305
10319
|
position: relative;
|
|
10306
10320
|
${inputStyles};
|
|
@@ -10442,7 +10456,7 @@ Input.displayName = "Input";
|
|
|
10442
10456
|
|
|
10443
10457
|
// src/components/EditableHeading/EditableHeading.tsx
|
|
10444
10458
|
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
10445
|
-
var StyledInput = (0, import_styled_components55.
|
|
10459
|
+
var StyledInput = (0, import_styled_components55.styled)(Input)`
|
|
10446
10460
|
:not([rows]) {
|
|
10447
10461
|
min-height: unset;
|
|
10448
10462
|
}
|
|
@@ -10469,7 +10483,7 @@ var editableStyles = import_styled_components55.css`
|
|
|
10469
10483
|
cursor: pointer;
|
|
10470
10484
|
}
|
|
10471
10485
|
`;
|
|
10472
|
-
var StyledHeading2 = (0, import_styled_components55.
|
|
10486
|
+
var StyledHeading2 = (0, import_styled_components55.styled)(Heading)`
|
|
10473
10487
|
width: 100%;
|
|
10474
10488
|
border-radius: var(--wui-border-radius-02);
|
|
10475
10489
|
padding: var(--wui-space-02);
|
|
@@ -10570,10 +10584,10 @@ var EditableHeading = ({
|
|
|
10570
10584
|
|
|
10571
10585
|
// src/components/Form/Form.tsx
|
|
10572
10586
|
var import_react45 = require("react");
|
|
10573
|
-
var import_styled_components56 =
|
|
10587
|
+
var import_styled_components56 = require("styled-components");
|
|
10574
10588
|
var import_type_guards34 = require("@wistia/type-guards");
|
|
10575
10589
|
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
10576
|
-
var StyledForm = import_styled_components56.
|
|
10590
|
+
var StyledForm = import_styled_components56.styled.form`
|
|
10577
10591
|
--form-default-width: 690px;
|
|
10578
10592
|
|
|
10579
10593
|
max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
|
|
@@ -10597,7 +10611,7 @@ var FormComponent = ({
|
|
|
10597
10611
|
}, forwardedRef) => {
|
|
10598
10612
|
const [errors, setErrors] = (0, import_react45.useState)({});
|
|
10599
10613
|
const [hasSubmitted, setHasSubmitted] = (0, import_react45.useState)(false);
|
|
10600
|
-
const innerRef = (0, import_react45.useRef)();
|
|
10614
|
+
const innerRef = (0, import_react45.useRef)(null);
|
|
10601
10615
|
const ref = forwardedRef ?? innerRef;
|
|
10602
10616
|
const autoId = (0, import_react45.useId)();
|
|
10603
10617
|
const id = props.id ?? autoId;
|
|
@@ -10658,7 +10672,7 @@ var FormComponent = ({
|
|
|
10658
10672
|
...props,
|
|
10659
10673
|
ref,
|
|
10660
10674
|
$fullWidth: fullWidth,
|
|
10661
|
-
|
|
10675
|
+
renderAs: StyledForm,
|
|
10662
10676
|
gap: "space-05",
|
|
10663
10677
|
id,
|
|
10664
10678
|
onBlur: handleBlur2,
|
|
@@ -10748,11 +10762,11 @@ var FormErrorSummary = ({ description }) => {
|
|
|
10748
10762
|
|
|
10749
10763
|
// src/components/FormField/FormField.tsx
|
|
10750
10764
|
var import_react48 = require("react");
|
|
10751
|
-
var import_styled_components58 =
|
|
10765
|
+
var import_styled_components58 = require("styled-components");
|
|
10752
10766
|
var import_type_guards36 = require("@wistia/type-guards");
|
|
10753
10767
|
|
|
10754
10768
|
// src/components/Label/Label.tsx
|
|
10755
|
-
var import_styled_components57 =
|
|
10769
|
+
var import_styled_components57 = require("styled-components");
|
|
10756
10770
|
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
10757
10771
|
var requiredStyle = import_styled_components57.css`
|
|
10758
10772
|
&::after {
|
|
@@ -10765,7 +10779,7 @@ var requiredStyle = import_styled_components57.css`
|
|
|
10765
10779
|
var disabledStyle3 = import_styled_components57.css`
|
|
10766
10780
|
color: var(--wui-color-text-disabled);
|
|
10767
10781
|
`;
|
|
10768
|
-
var StyledLabel3 = import_styled_components57.
|
|
10782
|
+
var StyledLabel3 = import_styled_components57.styled.label`
|
|
10769
10783
|
display: block;
|
|
10770
10784
|
width: 100%;
|
|
10771
10785
|
color: var(--wui-color-text);
|
|
@@ -10813,7 +10827,7 @@ Label.displayName = "Label";
|
|
|
10813
10827
|
|
|
10814
10828
|
// src/components/FormField/FormField.tsx
|
|
10815
10829
|
var import_jsx_runtime234 = require("react/jsx-runtime");
|
|
10816
|
-
var StyledFormField = import_styled_components58.
|
|
10830
|
+
var StyledFormField = import_styled_components58.styled.div`
|
|
10817
10831
|
--form-field-spacing: var(--wui-space-01);
|
|
10818
10832
|
--form-field-spacing-inline: var(--wui-space-02);
|
|
10819
10833
|
--form-field-error-color: var(--wui-color-text-secondary-error);
|
|
@@ -10843,7 +10857,7 @@ var StyledFormField = import_styled_components58.default.div`
|
|
|
10843
10857
|
grid-template-rows: 1fr;
|
|
10844
10858
|
}
|
|
10845
10859
|
`;
|
|
10846
|
-
var StyledErrorList = import_styled_components58.
|
|
10860
|
+
var StyledErrorList = import_styled_components58.styled.ul`
|
|
10847
10861
|
margin: 0;
|
|
10848
10862
|
padding: 0;
|
|
10849
10863
|
padding-left: var(--wui-space-04);
|
|
@@ -10976,11 +10990,11 @@ var RadioGroup = ({
|
|
|
10976
10990
|
RadioGroup.displayName = "RadioGroup";
|
|
10977
10991
|
|
|
10978
10992
|
// src/components/InputClickToCopy/InputClickToCopy.tsx
|
|
10979
|
-
var import_styled_components59 =
|
|
10993
|
+
var import_styled_components59 = require("styled-components");
|
|
10980
10994
|
var import_react50 = require("react");
|
|
10981
10995
|
var import_type_guards37 = require("@wistia/type-guards");
|
|
10982
10996
|
var import_jsx_runtime236 = require("react/jsx-runtime");
|
|
10983
|
-
var StyledInput2 = (0, import_styled_components59.
|
|
10997
|
+
var StyledInput2 = (0, import_styled_components59.styled)(Input)`
|
|
10984
10998
|
&:not([aria-disabled='true']) {
|
|
10985
10999
|
cursor: pointer;
|
|
10986
11000
|
}
|
|
@@ -11040,16 +11054,16 @@ var InputClickToCopy = (0, import_react50.forwardRef)(
|
|
|
11040
11054
|
InputClickToCopy.displayName = "InputClickToCopy";
|
|
11041
11055
|
|
|
11042
11056
|
// src/components/KeyboardShortcut/KeyboardShortcut.tsx
|
|
11043
|
-
var import_styled_components60 =
|
|
11057
|
+
var import_styled_components60 = require("styled-components");
|
|
11044
11058
|
var import_type_guards38 = require("@wistia/type-guards");
|
|
11045
11059
|
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
11046
|
-
var StyledKeyboardShortcut = import_styled_components60.
|
|
11060
|
+
var StyledKeyboardShortcut = import_styled_components60.styled.div`
|
|
11047
11061
|
align-items: center;
|
|
11048
11062
|
display: flex;
|
|
11049
11063
|
gap: var(--wui-space-02);
|
|
11050
11064
|
${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
|
|
11051
11065
|
`;
|
|
11052
|
-
var StyledKey = import_styled_components60.
|
|
11066
|
+
var StyledKey = import_styled_components60.styled.kbd`
|
|
11053
11067
|
align-items: center;
|
|
11054
11068
|
background: var(--wui-color-bg-surface-secondary);
|
|
11055
11069
|
border-bottom: 1px solid var(--wui-color-border-secondary);
|
|
@@ -11072,11 +11086,11 @@ var StyledKey = import_styled_components60.default.kbd`
|
|
|
11072
11086
|
min-width: 20px;
|
|
11073
11087
|
padding: 0 var(--wui-space-01);
|
|
11074
11088
|
`;
|
|
11075
|
-
var Label2 = import_styled_components60.
|
|
11089
|
+
var Label2 = import_styled_components60.styled.span`
|
|
11076
11090
|
color: var(--wui-color-text);
|
|
11077
11091
|
font-size: 12px;
|
|
11078
11092
|
`;
|
|
11079
|
-
var KeysContainer = import_styled_components60.
|
|
11093
|
+
var KeysContainer = import_styled_components60.styled.div`
|
|
11080
11094
|
display: flex;
|
|
11081
11095
|
gap: var(--wui-space-01);
|
|
11082
11096
|
`;
|
|
@@ -11150,13 +11164,13 @@ KeyboardShortcut.displayName = "KeyboardShortcut";
|
|
|
11150
11164
|
|
|
11151
11165
|
// src/components/List/List.tsx
|
|
11152
11166
|
var import_type_guards40 = require("@wistia/type-guards");
|
|
11153
|
-
var import_styled_components62 =
|
|
11167
|
+
var import_styled_components62 = require("styled-components");
|
|
11154
11168
|
|
|
11155
11169
|
// src/components/List/ListItem.tsx
|
|
11156
|
-
var import_styled_components61 =
|
|
11170
|
+
var import_styled_components61 = require("styled-components");
|
|
11157
11171
|
var import_type_guards39 = require("@wistia/type-guards");
|
|
11158
11172
|
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
11159
|
-
var ListItemComponent = import_styled_components61.
|
|
11173
|
+
var ListItemComponent = import_styled_components61.styled.li`
|
|
11160
11174
|
margin-bottom: var(--wui-space-02);
|
|
11161
11175
|
`;
|
|
11162
11176
|
var ListItem = ({ children }) => {
|
|
@@ -11227,7 +11241,7 @@ var unbulletedStyle = import_styled_components62.css`
|
|
|
11227
11241
|
list-style: none;
|
|
11228
11242
|
padding-left: 0;
|
|
11229
11243
|
`;
|
|
11230
|
-
var ListComponent = import_styled_components62.
|
|
11244
|
+
var ListComponent = import_styled_components62.styled.ul`
|
|
11231
11245
|
list-style-position: outside;
|
|
11232
11246
|
margin: 0 0 var(--wui-space-01);
|
|
11233
11247
|
padding: 0 0 0 var(--wui-space-04);
|
|
@@ -11307,7 +11321,7 @@ var List = ({
|
|
|
11307
11321
|
List.displayName = "List";
|
|
11308
11322
|
|
|
11309
11323
|
// src/components/Menu/Menu.tsx
|
|
11310
|
-
var import_styled_components63 =
|
|
11324
|
+
var import_styled_components63 = require("styled-components");
|
|
11311
11325
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
11312
11326
|
var import_type_guards41 = require("@wistia/type-guards");
|
|
11313
11327
|
var import_react52 = require("react");
|
|
@@ -11403,7 +11417,7 @@ var menuContentCss = import_styled_components63.css`
|
|
|
11403
11417
|
margin: var(--menu-divider-margin) 0;
|
|
11404
11418
|
}
|
|
11405
11419
|
`;
|
|
11406
|
-
var MenuContent = (0, import_styled_components63.
|
|
11420
|
+
var MenuContent = (0, import_styled_components63.styled)(import_react_dropdown_menu.DropdownMenuContent)`
|
|
11407
11421
|
${menuContentCss}
|
|
11408
11422
|
`;
|
|
11409
11423
|
var Menu = ({
|
|
@@ -11467,10 +11481,10 @@ var Menu = ({
|
|
|
11467
11481
|
Menu.displayName = "Menu";
|
|
11468
11482
|
|
|
11469
11483
|
// src/components/Menu/MenuLabel.tsx
|
|
11470
|
-
var import_styled_components64 =
|
|
11484
|
+
var import_styled_components64 = require("styled-components");
|
|
11471
11485
|
var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
|
|
11472
11486
|
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
11473
|
-
var StyledMenuLabel = (0, import_styled_components64.
|
|
11487
|
+
var StyledMenuLabel = (0, import_styled_components64.styled)(import_react_dropdown_menu2.DropdownMenuLabel)`
|
|
11474
11488
|
padding: var(--wui-space-02);
|
|
11475
11489
|
`;
|
|
11476
11490
|
var MenuLabel = ({ children, ...props }) => {
|
|
@@ -11495,16 +11509,16 @@ MenuLabel.displayName = "MenuLabel";
|
|
|
11495
11509
|
|
|
11496
11510
|
// src/components/Menu/SubMenu.tsx
|
|
11497
11511
|
var import_react54 = require("react");
|
|
11498
|
-
var import_styled_components67 =
|
|
11512
|
+
var import_styled_components67 = require("styled-components");
|
|
11499
11513
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
11500
11514
|
var import_type_guards43 = require("@wistia/type-guards");
|
|
11501
11515
|
|
|
11502
11516
|
// src/components/Menu/MenuItemButton.tsx
|
|
11503
11517
|
var import_react53 = require("react");
|
|
11504
|
-
var import_styled_components65 =
|
|
11518
|
+
var import_styled_components65 = require("styled-components");
|
|
11505
11519
|
var import_type_guards42 = require("@wistia/type-guards");
|
|
11506
11520
|
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
11507
|
-
var StyledButton3 = (0, import_styled_components65.
|
|
11521
|
+
var StyledButton3 = (0, import_styled_components65.styled)(Button)`
|
|
11508
11522
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
11509
11523
|
|
|
11510
11524
|
display: flex;
|
|
@@ -11543,7 +11557,7 @@ var StyledButton3 = (0, import_styled_components65.default)(Button)`
|
|
|
11543
11557
|
padding-left: var(--wui-space-04);
|
|
11544
11558
|
}
|
|
11545
11559
|
`;
|
|
11546
|
-
var StyledLeftIconContainer = import_styled_components65.
|
|
11560
|
+
var StyledLeftIconContainer = import_styled_components65.styled.div`
|
|
11547
11561
|
height: var(--menu-item-left-icon-size);
|
|
11548
11562
|
width: var(--menu-item-left-icon-size);
|
|
11549
11563
|
|
|
@@ -11554,7 +11568,7 @@ var StyledLeftIconContainer = import_styled_components65.default.div`
|
|
|
11554
11568
|
}
|
|
11555
11569
|
}
|
|
11556
11570
|
`;
|
|
11557
|
-
var StyledRightIconContainer = import_styled_components65.
|
|
11571
|
+
var StyledRightIconContainer = import_styled_components65.styled.div`
|
|
11558
11572
|
height: var(--menu-item-right-icon-size);
|
|
11559
11573
|
width: var(--menu-item-right-icon-size);
|
|
11560
11574
|
|
|
@@ -11565,13 +11579,13 @@ var StyledRightIconContainer = import_styled_components65.default.div`
|
|
|
11565
11579
|
}
|
|
11566
11580
|
}
|
|
11567
11581
|
`;
|
|
11568
|
-
var StyledLabelAndDescriptionContainer = import_styled_components65.
|
|
11582
|
+
var StyledLabelAndDescriptionContainer = import_styled_components65.styled.div`
|
|
11569
11583
|
display: flex;
|
|
11570
11584
|
flex-direction: column;
|
|
11571
11585
|
gap: var(--menu-label-description-gap);
|
|
11572
11586
|
flex-basis: 100%;
|
|
11573
11587
|
`;
|
|
11574
|
-
var StyledBadgeContainer = import_styled_components65.
|
|
11588
|
+
var StyledBadgeContainer = import_styled_components65.styled.div`
|
|
11575
11589
|
align-self: start;
|
|
11576
11590
|
justify-self: end;
|
|
11577
11591
|
font-size: var(--wui-typography-label-4-size);
|
|
@@ -11619,10 +11633,10 @@ var MenuItemButton = (0, import_react53.forwardRef)(({ children, appearance, com
|
|
|
11619
11633
|
MenuItemButton.displayName = "MenuItemButton";
|
|
11620
11634
|
|
|
11621
11635
|
// src/components/Menu/MenuItemLabelDescription.tsx
|
|
11622
|
-
var import_styled_components66 =
|
|
11636
|
+
var import_styled_components66 = require("styled-components");
|
|
11623
11637
|
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
11624
|
-
var StyledMenuItemLabel = import_styled_components66.
|
|
11625
|
-
var StyledMenuItemDescription = (0, import_styled_components66.
|
|
11638
|
+
var StyledMenuItemLabel = import_styled_components66.styled.span``;
|
|
11639
|
+
var StyledMenuItemDescription = (0, import_styled_components66.styled)(Text)``;
|
|
11626
11640
|
var MenuItemLabel = ({ children }) => {
|
|
11627
11641
|
return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(StyledMenuItemLabel, { children });
|
|
11628
11642
|
};
|
|
@@ -11639,17 +11653,17 @@ var MenuItemDescription = ({ children }) => {
|
|
|
11639
11653
|
|
|
11640
11654
|
// src/components/Menu/SubMenu.tsx
|
|
11641
11655
|
var import_jsx_runtime244 = require("react/jsx-runtime");
|
|
11642
|
-
var SubMenuContent = (0, import_styled_components67.
|
|
11656
|
+
var SubMenuContent = (0, import_styled_components67.styled)(import_react_dropdown_menu3.DropdownMenuSubContent)`
|
|
11643
11657
|
${menuContentCss}
|
|
11644
11658
|
|
|
11645
11659
|
${mq.smAndDown} {
|
|
11646
11660
|
transform: translateX(-100%) !important;
|
|
11647
11661
|
}
|
|
11648
11662
|
`;
|
|
11649
|
-
var StyledMobileSubMenuItems = import_styled_components67.
|
|
11663
|
+
var StyledMobileSubMenuItems = import_styled_components67.styled.div`
|
|
11650
11664
|
margin-left: var(--wui-space-04);
|
|
11651
11665
|
`;
|
|
11652
|
-
var StyledSubTrigger = (0, import_styled_components67.
|
|
11666
|
+
var StyledSubTrigger = (0, import_styled_components67.styled)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
|
|
11653
11667
|
outline: none;
|
|
11654
11668
|
|
|
11655
11669
|
&[data-state='open'],
|
|
@@ -11859,19 +11873,19 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
|
|
|
11859
11873
|
|
|
11860
11874
|
// src/components/Modal/Modal.tsx
|
|
11861
11875
|
var import_react59 = require("react");
|
|
11862
|
-
var import_styled_components72 =
|
|
11876
|
+
var import_styled_components72 = require("styled-components");
|
|
11863
11877
|
var import_react_dialog4 = require("@radix-ui/react-dialog");
|
|
11864
11878
|
var import_type_guards46 = require("@wistia/type-guards");
|
|
11865
11879
|
|
|
11866
11880
|
// src/components/Modal/ModalHeader.tsx
|
|
11867
|
-
var import_styled_components69 =
|
|
11881
|
+
var import_styled_components69 = require("styled-components");
|
|
11868
11882
|
var import_react_dialog2 = require("@radix-ui/react-dialog");
|
|
11869
11883
|
|
|
11870
11884
|
// src/components/Modal/ModalCloseButton.tsx
|
|
11871
|
-
var import_styled_components68 =
|
|
11885
|
+
var import_styled_components68 = require("styled-components");
|
|
11872
11886
|
var import_react_dialog = require("@radix-ui/react-dialog");
|
|
11873
11887
|
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
11874
|
-
var CloseButton = (0, import_styled_components68.
|
|
11888
|
+
var CloseButton = (0, import_styled_components68.styled)(import_react_dialog.Close)`
|
|
11875
11889
|
align-self: start;
|
|
11876
11890
|
`;
|
|
11877
11891
|
var ModalCloseButton = () => {
|
|
@@ -11888,7 +11902,7 @@ var ModalCloseButton = () => {
|
|
|
11888
11902
|
|
|
11889
11903
|
// src/components/Modal/ModalHeader.tsx
|
|
11890
11904
|
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
11891
|
-
var Header = import_styled_components69.
|
|
11905
|
+
var Header = import_styled_components69.styled.header`
|
|
11892
11906
|
display: flex;
|
|
11893
11907
|
order: 1;
|
|
11894
11908
|
gap: var(--wui-space-01);
|
|
@@ -11899,7 +11913,7 @@ var Header = import_styled_components69.default.header`
|
|
|
11899
11913
|
margin: 0 0 var(--wui-space-03);
|
|
11900
11914
|
}
|
|
11901
11915
|
`;
|
|
11902
|
-
var Title = (0, import_styled_components69.
|
|
11916
|
+
var Title = (0, import_styled_components69.styled)(import_react_dialog2.Title)`
|
|
11903
11917
|
font-family: var(--wui-typography-heading-2-family);
|
|
11904
11918
|
line-height: var(--wui-typography-heading-2-line-height);
|
|
11905
11919
|
font-size: var(--wui-typography-heading-2-size);
|
|
@@ -11919,7 +11933,7 @@ var ModalHeader = ({
|
|
|
11919
11933
|
|
|
11920
11934
|
// src/components/Modal/ModalContent.tsx
|
|
11921
11935
|
var import_react57 = require("react");
|
|
11922
|
-
var import_styled_components70 =
|
|
11936
|
+
var import_styled_components70 = require("styled-components");
|
|
11923
11937
|
var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
11924
11938
|
|
|
11925
11939
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
@@ -11973,7 +11987,7 @@ var alignLeftStyles = import_styled_components70.css`
|
|
|
11973
11987
|
|
|
11974
11988
|
left: 0;
|
|
11975
11989
|
`;
|
|
11976
|
-
var StyledModalContent = (0, import_styled_components70.
|
|
11990
|
+
var StyledModalContent = (0, import_styled_components70.styled)(import_react_dialog3.Content)`
|
|
11977
11991
|
background-color: var(--wui-color-bg-app);
|
|
11978
11992
|
box-sizing: border-box;
|
|
11979
11993
|
display: flex;
|
|
@@ -12042,7 +12056,7 @@ var ModalContent = (0, import_react57.forwardRef)(
|
|
|
12042
12056
|
|
|
12043
12057
|
// src/private/components/Backdrop/Backdrop.tsx
|
|
12044
12058
|
var import_react58 = require("react");
|
|
12045
|
-
var import_styled_components71 =
|
|
12059
|
+
var import_styled_components71 = require("styled-components");
|
|
12046
12060
|
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
12047
12061
|
var alignVerticalMap = {
|
|
12048
12062
|
stretch: "normal",
|
|
@@ -12055,7 +12069,7 @@ var alignHorizontalMap = {
|
|
|
12055
12069
|
center: "center",
|
|
12056
12070
|
right: "end"
|
|
12057
12071
|
};
|
|
12058
|
-
var BackdropComponent = import_styled_components71.
|
|
12072
|
+
var BackdropComponent = import_styled_components71.styled.div`
|
|
12059
12073
|
align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
|
|
12060
12074
|
animation-name: backdropShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
12061
12075
|
background: var(--wui-color-backdrop);
|
|
@@ -12098,7 +12112,7 @@ Backdrop.displayName = "Backdrop";
|
|
|
12098
12112
|
// src/components/Modal/Modal.tsx
|
|
12099
12113
|
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
12100
12114
|
var DEFAULT_MODAL_WIDTH = "532px";
|
|
12101
|
-
var ModalBody = import_styled_components72.
|
|
12115
|
+
var ModalBody = import_styled_components72.styled.div`
|
|
12102
12116
|
flex-direction: column;
|
|
12103
12117
|
display: flex;
|
|
12104
12118
|
flex: 1 0 0;
|
|
@@ -12169,7 +12183,7 @@ Modal.displayName = "Modal";
|
|
|
12169
12183
|
|
|
12170
12184
|
// src/components/Popover/Popover.tsx
|
|
12171
12185
|
var import_react_popover2 = require("@radix-ui/react-popover");
|
|
12172
|
-
var import_styled_components74 =
|
|
12186
|
+
var import_styled_components74 = require("styled-components");
|
|
12173
12187
|
|
|
12174
12188
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
12175
12189
|
var import_type_guards47 = require("@wistia/type-guards");
|
|
@@ -12179,9 +12193,9 @@ var getControlProps = (isOpen, onOpenChange) => {
|
|
|
12179
12193
|
|
|
12180
12194
|
// src/components/Popover/PopoverArrow.tsx
|
|
12181
12195
|
var import_react_popover = require("@radix-ui/react-popover");
|
|
12182
|
-
var import_styled_components73 =
|
|
12196
|
+
var import_styled_components73 = require("styled-components");
|
|
12183
12197
|
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
12184
|
-
var StyledPath = import_styled_components73.
|
|
12198
|
+
var StyledPath = import_styled_components73.styled.path`
|
|
12185
12199
|
fill: var(--wui-color-border-secondary);
|
|
12186
12200
|
`;
|
|
12187
12201
|
var circleAnimation = import_styled_components73.keyframes`
|
|
@@ -12192,7 +12206,7 @@ var circleAnimation = import_styled_components73.keyframes`
|
|
|
12192
12206
|
opacity: 0;
|
|
12193
12207
|
}
|
|
12194
12208
|
`;
|
|
12195
|
-
var StyledCircle = import_styled_components73.
|
|
12209
|
+
var StyledCircle = import_styled_components73.styled.circle`
|
|
12196
12210
|
stroke: var(--wui-color-border-active);
|
|
12197
12211
|
animation-duration: 2s;
|
|
12198
12212
|
animation-iteration-count: infinite;
|
|
@@ -12259,7 +12273,7 @@ PopoverArrow.displayName = "PopoverArrow";
|
|
|
12259
12273
|
|
|
12260
12274
|
// src/components/Popover/Popover.tsx
|
|
12261
12275
|
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
12262
|
-
var StyledContent2 = (0, import_styled_components74.
|
|
12276
|
+
var StyledContent2 = (0, import_styled_components74.styled)(import_react_popover2.Content)`
|
|
12263
12277
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12264
12278
|
${({ $unstyled }) => !$unstyled && import_styled_components74.css`
|
|
12265
12279
|
border-radius: var(--wui-border-radius-02);
|
|
@@ -12327,11 +12341,11 @@ var Popover2 = ({
|
|
|
12327
12341
|
Popover2.displayName = "Popover";
|
|
12328
12342
|
|
|
12329
12343
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
12330
|
-
var import_styled_components75 =
|
|
12344
|
+
var import_styled_components75 = require("styled-components");
|
|
12331
12345
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
12332
12346
|
var import_type_guards48 = require("@wistia/type-guards");
|
|
12333
12347
|
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
12334
|
-
var ProgressBarWrapper = import_styled_components75.
|
|
12348
|
+
var ProgressBarWrapper = import_styled_components75.styled.div`
|
|
12335
12349
|
--progress-bar-height: 8px;
|
|
12336
12350
|
--progress-bar-indicator-color: var(--wui-color-bg-fill);
|
|
12337
12351
|
--progress-bar-background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -12347,7 +12361,7 @@ var getTranslateValue = (progress, max) => {
|
|
|
12347
12361
|
const progressPercentage = progress / max * 100;
|
|
12348
12362
|
return `translateX(-${100 - progressPercentage}%)`;
|
|
12349
12363
|
};
|
|
12350
|
-
var ProgressBarLabel = import_styled_components75.
|
|
12364
|
+
var ProgressBarLabel = import_styled_components75.styled.div`
|
|
12351
12365
|
display: flex;
|
|
12352
12366
|
line-height: var(--wui-typography-label-3-line-height);
|
|
12353
12367
|
font-size: var(--wui-typography-label-3-size);
|
|
@@ -12355,7 +12369,7 @@ var ProgressBarLabel = import_styled_components75.default.div`
|
|
|
12355
12369
|
color: var(--wui-color-text-secondary);
|
|
12356
12370
|
flex-shrink: 0;
|
|
12357
12371
|
`;
|
|
12358
|
-
var StyledProgressIndicator = (0, import_styled_components75.
|
|
12372
|
+
var StyledProgressIndicator = (0, import_styled_components75.styled)(import_react_progress.Indicator)`
|
|
12359
12373
|
background-color: var(--progress-bar-indicator-color);
|
|
12360
12374
|
width: 100%;
|
|
12361
12375
|
height: 100%;
|
|
@@ -12364,7 +12378,7 @@ var StyledProgressIndicator = (0, import_styled_components75.default)(import_rea
|
|
|
12364
12378
|
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
12365
12379
|
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
12366
12380
|
`;
|
|
12367
|
-
var StyledProgressBar = (0, import_styled_components75.
|
|
12381
|
+
var StyledProgressBar = (0, import_styled_components75.styled)(import_react_progress.Root)`
|
|
12368
12382
|
position: relative;
|
|
12369
12383
|
overflow: hidden;
|
|
12370
12384
|
background: var(--progress-bar-background-color);
|
|
@@ -12407,7 +12421,7 @@ ProgressBar.displayName = "ProgressBar";
|
|
|
12407
12421
|
|
|
12408
12422
|
// src/components/Radio/Radio.tsx
|
|
12409
12423
|
var import_react60 = require("react");
|
|
12410
|
-
var import_styled_components76 =
|
|
12424
|
+
var import_styled_components76 = require("styled-components");
|
|
12411
12425
|
var import_type_guards49 = require("@wistia/type-guards");
|
|
12412
12426
|
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
12413
12427
|
var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
|
|
@@ -12467,14 +12481,14 @@ var getSizeCss2 = (size) => {
|
|
|
12467
12481
|
if (size === "lg") return sizeLarge2;
|
|
12468
12482
|
return sizeMedium2;
|
|
12469
12483
|
};
|
|
12470
|
-
var StyledRadioWrapper = import_styled_components76.
|
|
12484
|
+
var StyledRadioWrapper = import_styled_components76.styled.div`
|
|
12471
12485
|
display: flex;
|
|
12472
12486
|
margin: 0;
|
|
12473
12487
|
|
|
12474
12488
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
12475
12489
|
user-select: none;
|
|
12476
12490
|
`;
|
|
12477
|
-
var StyledRadioInput = import_styled_components76.
|
|
12491
|
+
var StyledRadioInput = import_styled_components76.styled.div`
|
|
12478
12492
|
${({ $size }) => getSizeCss2($size)}
|
|
12479
12493
|
line-height: 0;
|
|
12480
12494
|
margin: 0;
|
|
@@ -12496,7 +12510,7 @@ var StyledRadioInput = import_styled_components76.default.div`
|
|
|
12496
12510
|
}
|
|
12497
12511
|
}
|
|
12498
12512
|
`;
|
|
12499
|
-
var StyledHiddenRadioInput = import_styled_components76.
|
|
12513
|
+
var StyledHiddenRadioInput = import_styled_components76.styled.input`
|
|
12500
12514
|
${visuallyHiddenStyle}
|
|
12501
12515
|
|
|
12502
12516
|
/* toggles display of faux-input border-color */
|
|
@@ -12580,7 +12594,7 @@ Radio.displayName = "Radio";
|
|
|
12580
12594
|
|
|
12581
12595
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
12582
12596
|
var import_react63 = require("react");
|
|
12583
|
-
var import_styled_components78 =
|
|
12597
|
+
var import_styled_components78 = require("styled-components");
|
|
12584
12598
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
12585
12599
|
var import_type_guards50 = require("@wistia/type-guards");
|
|
12586
12600
|
|
|
@@ -12620,7 +12634,7 @@ var useSelectedItemStyle = () => {
|
|
|
12620
12634
|
};
|
|
12621
12635
|
|
|
12622
12636
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
12623
|
-
var import_styled_components77 =
|
|
12637
|
+
var import_styled_components77 = require("styled-components");
|
|
12624
12638
|
|
|
12625
12639
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
12626
12640
|
var import_react62 = require("react");
|
|
@@ -12636,7 +12650,7 @@ var useSegmentedControlValue = () => {
|
|
|
12636
12650
|
|
|
12637
12651
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
12638
12652
|
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
12639
|
-
var SelectedItemIndicatorDiv = import_styled_components77.
|
|
12653
|
+
var SelectedItemIndicatorDiv = import_styled_components77.styled.div`
|
|
12640
12654
|
background-color: var(--wui-color-bg-fill-white);
|
|
12641
12655
|
border-radius: var(--wui-border-radius-rounded);
|
|
12642
12656
|
left: 0;
|
|
@@ -12670,7 +12684,7 @@ var segmentedControlStyles = import_styled_components78.css`
|
|
|
12670
12684
|
position: relative;
|
|
12671
12685
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
12672
12686
|
`;
|
|
12673
|
-
var StyledSegmentedControl = (0, import_styled_components78.
|
|
12687
|
+
var StyledSegmentedControl = (0, import_styled_components78.styled)(import_react_toggle_group.Root)`
|
|
12674
12688
|
${segmentedControlStyles}
|
|
12675
12689
|
`;
|
|
12676
12690
|
var SegmentedControl = (0, import_react63.forwardRef)(
|
|
@@ -12709,7 +12723,7 @@ SegmentedControl.displayName = "SegmentedControl";
|
|
|
12709
12723
|
|
|
12710
12724
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
12711
12725
|
var import_react64 = require("react");
|
|
12712
|
-
var import_styled_components79 =
|
|
12726
|
+
var import_styled_components79 = require("styled-components");
|
|
12713
12727
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
12714
12728
|
var import_type_guards51 = require("@wistia/type-guards");
|
|
12715
12729
|
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
@@ -12773,7 +12787,7 @@ var segmentedControlItemStyles = import_styled_components79.css`
|
|
|
12773
12787
|
}
|
|
12774
12788
|
}
|
|
12775
12789
|
`;
|
|
12776
|
-
var StyledSegmentedControlItem = (0, import_styled_components79.
|
|
12790
|
+
var StyledSegmentedControlItem = (0, import_styled_components79.styled)(import_react_toggle_group2.Item)`
|
|
12777
12791
|
${segmentedControlItemStyles}
|
|
12778
12792
|
`;
|
|
12779
12793
|
var SegmentedControlItem = (0, import_react64.forwardRef)(
|
|
@@ -12837,9 +12851,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
|
12837
12851
|
// src/components/Select/Select.tsx
|
|
12838
12852
|
var import_react_select = require("@radix-ui/react-select");
|
|
12839
12853
|
var import_react65 = require("react");
|
|
12840
|
-
var import_styled_components80 =
|
|
12854
|
+
var import_styled_components80 = require("styled-components");
|
|
12841
12855
|
var import_jsx_runtime262 = require("react/jsx-runtime");
|
|
12842
|
-
var StyledTrigger2 = (0, import_styled_components80.
|
|
12856
|
+
var StyledTrigger2 = (0, import_styled_components80.styled)(import_react_select.Trigger)`
|
|
12843
12857
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12844
12858
|
${inputCss};
|
|
12845
12859
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -12883,7 +12897,7 @@ var StyledTrigger2 = (0, import_styled_components80.default)(import_react_select
|
|
|
12883
12897
|
color: var(--wui-input-placeholder);
|
|
12884
12898
|
}
|
|
12885
12899
|
`;
|
|
12886
|
-
var StyledContent3 = (0, import_styled_components80.
|
|
12900
|
+
var StyledContent3 = (0, import_styled_components80.styled)(import_react_select.Content)`
|
|
12887
12901
|
--wui-select-content-border: var(--wui-color-border);
|
|
12888
12902
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
12889
12903
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -12951,10 +12965,10 @@ Select.displayName = "Select";
|
|
|
12951
12965
|
// src/components/Select/SelectOption.tsx
|
|
12952
12966
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
12953
12967
|
var import_react66 = require("react");
|
|
12954
|
-
var import_styled_components81 =
|
|
12968
|
+
var import_styled_components81 = require("styled-components");
|
|
12955
12969
|
var import_type_guards52 = require("@wistia/type-guards");
|
|
12956
12970
|
var import_jsx_runtime263 = require("react/jsx-runtime");
|
|
12957
|
-
var StyledItem = (0, import_styled_components81.
|
|
12971
|
+
var StyledItem = (0, import_styled_components81.styled)(import_react_select2.Item)`
|
|
12958
12972
|
${variantStyleMap2.body3};
|
|
12959
12973
|
display: flex;
|
|
12960
12974
|
padding: var(--wui-select-option-padding);
|
|
@@ -12978,7 +12992,7 @@ var StyledItem = (0, import_styled_components81.default)(import_react_select2.It
|
|
|
12978
12992
|
background-color: transparent;
|
|
12979
12993
|
}
|
|
12980
12994
|
`;
|
|
12981
|
-
var StyledIconContainer = import_styled_components81.
|
|
12995
|
+
var StyledIconContainer = import_styled_components81.styled.span`
|
|
12982
12996
|
width: 12px;
|
|
12983
12997
|
`;
|
|
12984
12998
|
var SelectOption = (0, import_react66.forwardRef)(
|
|
@@ -13009,9 +13023,9 @@ SelectOption.displayName = "SelectOption";
|
|
|
13009
13023
|
|
|
13010
13024
|
// src/components/Select/SelectOptionGroup.tsx
|
|
13011
13025
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
13012
|
-
var import_styled_components82 =
|
|
13026
|
+
var import_styled_components82 = require("styled-components");
|
|
13013
13027
|
var import_jsx_runtime264 = require("react/jsx-runtime");
|
|
13014
|
-
var StyledLabel4 = (0, import_styled_components82.
|
|
13028
|
+
var StyledLabel4 = (0, import_styled_components82.styled)(import_react_select3.Label)`
|
|
13015
13029
|
padding: var(--wui-select-option-padding);
|
|
13016
13030
|
`;
|
|
13017
13031
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
@@ -13030,10 +13044,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
13030
13044
|
|
|
13031
13045
|
// src/components/Slider/Slider.tsx
|
|
13032
13046
|
var import_react_slider = require("@radix-ui/react-slider");
|
|
13033
|
-
var import_styled_components83 =
|
|
13047
|
+
var import_styled_components83 = require("styled-components");
|
|
13034
13048
|
var import_type_guards53 = require("@wistia/type-guards");
|
|
13035
13049
|
var import_jsx_runtime265 = require("react/jsx-runtime");
|
|
13036
|
-
var SliderContainer = import_styled_components83.
|
|
13050
|
+
var SliderContainer = import_styled_components83.styled.div`
|
|
13037
13051
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
13038
13052
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
13039
13053
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -13049,7 +13063,7 @@ var SliderContainer = import_styled_components83.default.div`
|
|
|
13049
13063
|
pointer-events: none;
|
|
13050
13064
|
}
|
|
13051
13065
|
`;
|
|
13052
|
-
var StyledSliderRoot = (0, import_styled_components83.
|
|
13066
|
+
var StyledSliderRoot = (0, import_styled_components83.styled)(import_react_slider.Root)`
|
|
13053
13067
|
position: relative;
|
|
13054
13068
|
display: flex;
|
|
13055
13069
|
align-items: center;
|
|
@@ -13057,20 +13071,20 @@ var StyledSliderRoot = (0, import_styled_components83.default)(import_react_slid
|
|
|
13057
13071
|
touch-action: none;
|
|
13058
13072
|
width: 100%;
|
|
13059
13073
|
`;
|
|
13060
|
-
var StyledSliderTrack = (0, import_styled_components83.
|
|
13074
|
+
var StyledSliderTrack = (0, import_styled_components83.styled)(import_react_slider.Track)`
|
|
13061
13075
|
background-color: var(--wui-slider-track-color);
|
|
13062
13076
|
border-radius: var(--wui-slider-track-border-radius);
|
|
13063
13077
|
flex-grow: 1;
|
|
13064
13078
|
height: 6px;
|
|
13065
13079
|
position: relative;
|
|
13066
13080
|
`;
|
|
13067
|
-
var StyledSliderRange = (0, import_styled_components83.
|
|
13081
|
+
var StyledSliderRange = (0, import_styled_components83.styled)(import_react_slider.Range)`
|
|
13068
13082
|
background-color: var(--wui-slider-range-color);
|
|
13069
13083
|
border-radius: var(--wui-slider-track-border-radius);
|
|
13070
13084
|
height: 100%;
|
|
13071
13085
|
position: absolute;
|
|
13072
13086
|
`;
|
|
13073
|
-
var StyledSliderThumb = (0, import_styled_components83.
|
|
13087
|
+
var StyledSliderThumb = (0, import_styled_components83.styled)(import_react_slider.Thumb)`
|
|
13074
13088
|
background-color: var(--wui-slider-thumb-color);
|
|
13075
13089
|
border-radius: var(--wui-border-radius-rounded);
|
|
13076
13090
|
cursor: grab;
|
|
@@ -13157,7 +13171,7 @@ Slider.displayName = "Slider";
|
|
|
13157
13171
|
|
|
13158
13172
|
// src/components/Switch/Switch.tsx
|
|
13159
13173
|
var import_react67 = require("react");
|
|
13160
|
-
var import_styled_components84 =
|
|
13174
|
+
var import_styled_components84 = require("styled-components");
|
|
13161
13175
|
var import_type_guards54 = require("@wistia/type-guards");
|
|
13162
13176
|
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
13163
13177
|
var sizeSmall3 = import_styled_components84.css`
|
|
@@ -13210,14 +13224,14 @@ var getSizeCss3 = (size) => {
|
|
|
13210
13224
|
if (size === "lg") return sizeLarge3;
|
|
13211
13225
|
return sizeMedium3;
|
|
13212
13226
|
};
|
|
13213
|
-
var StyledSwitchWrapper = import_styled_components84.
|
|
13227
|
+
var StyledSwitchWrapper = import_styled_components84.styled.div`
|
|
13214
13228
|
display: flex;
|
|
13215
13229
|
margin: 0;
|
|
13216
13230
|
|
|
13217
13231
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
13218
13232
|
user-select: none;
|
|
13219
13233
|
`;
|
|
13220
|
-
var StyledSwitchInput = import_styled_components84.
|
|
13234
|
+
var StyledSwitchInput = import_styled_components84.styled.div`
|
|
13221
13235
|
${({ $size }) => getSizeCss3($size)}
|
|
13222
13236
|
line-height: 0;
|
|
13223
13237
|
margin: 0;
|
|
@@ -13245,7 +13259,7 @@ var StyledSwitchInput = import_styled_components84.default.div`
|
|
|
13245
13259
|
transition: all 0.2s ease-in-out;
|
|
13246
13260
|
}
|
|
13247
13261
|
`;
|
|
13248
|
-
var StyledHiddenSwitchInput = import_styled_components84.
|
|
13262
|
+
var StyledHiddenSwitchInput = import_styled_components84.styled.input`
|
|
13249
13263
|
${visuallyHiddenStyle}
|
|
13250
13264
|
|
|
13251
13265
|
/* toggles display of faux-input background-color and toggle position */
|
|
@@ -13319,9 +13333,9 @@ var Switch = (0, import_react67.forwardRef)(
|
|
|
13319
13333
|
Switch.displayName = "Switch";
|
|
13320
13334
|
|
|
13321
13335
|
// src/components/Table/Table.tsx
|
|
13322
|
-
var import_styled_components85 =
|
|
13336
|
+
var import_styled_components85 = require("styled-components");
|
|
13323
13337
|
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
13324
|
-
var StyledTable = import_styled_components85.
|
|
13338
|
+
var StyledTable = import_styled_components85.styled.table`
|
|
13325
13339
|
width: 100%;
|
|
13326
13340
|
border-collapse: collapse;
|
|
13327
13341
|
|
|
@@ -13363,7 +13377,7 @@ var Table = ({
|
|
|
13363
13377
|
};
|
|
13364
13378
|
|
|
13365
13379
|
// src/components/Table/TableBody.tsx
|
|
13366
|
-
var import_styled_components86 =
|
|
13380
|
+
var import_styled_components86 = require("styled-components");
|
|
13367
13381
|
|
|
13368
13382
|
// src/components/Table/TableSectionContext.ts
|
|
13369
13383
|
var import_react68 = require("react");
|
|
@@ -13371,27 +13385,27 @@ var TableSectionContext = (0, import_react68.createContext)(null);
|
|
|
13371
13385
|
|
|
13372
13386
|
// src/components/Table/TableBody.tsx
|
|
13373
13387
|
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13374
|
-
var StyledTableBody = import_styled_components86.
|
|
13388
|
+
var StyledTableBody = import_styled_components86.styled.tbody``;
|
|
13375
13389
|
var TableBody = ({ children, ...props }) => {
|
|
13376
13390
|
return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StyledTableBody, { ...props, children }) });
|
|
13377
13391
|
};
|
|
13378
13392
|
|
|
13379
13393
|
// src/components/Table/TableCell.tsx
|
|
13380
13394
|
var import_react69 = require("react");
|
|
13381
|
-
var import_styled_components87 =
|
|
13395
|
+
var import_styled_components87 = require("styled-components");
|
|
13382
13396
|
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
13383
13397
|
var sharedStyles = import_styled_components87.css`
|
|
13384
13398
|
color: var(--wui-color-text);
|
|
13385
13399
|
padding: var(--wui-space-02);
|
|
13386
13400
|
text-align: left;
|
|
13387
13401
|
`;
|
|
13388
|
-
var StyledTh = import_styled_components87.
|
|
13402
|
+
var StyledTh = import_styled_components87.styled.th`
|
|
13389
13403
|
${sharedStyles}
|
|
13390
13404
|
font-size: var(--wui-typography-body-4-size);
|
|
13391
13405
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
13392
13406
|
line-height: var(--wui-typography-body-4-line-height);
|
|
13393
13407
|
`;
|
|
13394
|
-
var StyledTd = import_styled_components87.
|
|
13408
|
+
var StyledTd = import_styled_components87.styled.td`
|
|
13395
13409
|
${sharedStyles}
|
|
13396
13410
|
font-size: var(--wui-typography-body-2-size);
|
|
13397
13411
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -13406,25 +13420,25 @@ var TableCell = ({ children, ...props }) => {
|
|
|
13406
13420
|
};
|
|
13407
13421
|
|
|
13408
13422
|
// src/components/Table/TableFoot.tsx
|
|
13409
|
-
var import_styled_components88 =
|
|
13423
|
+
var import_styled_components88 = require("styled-components");
|
|
13410
13424
|
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13411
|
-
var StyledTableFoot = import_styled_components88.
|
|
13425
|
+
var StyledTableFoot = import_styled_components88.styled.tfoot``;
|
|
13412
13426
|
var TableFoot = ({ children, ...props }) => {
|
|
13413
13427
|
return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(StyledTableFoot, { ...props, children }) });
|
|
13414
13428
|
};
|
|
13415
13429
|
|
|
13416
13430
|
// src/components/Table/TableHead.tsx
|
|
13417
|
-
var import_styled_components89 =
|
|
13431
|
+
var import_styled_components89 = require("styled-components");
|
|
13418
13432
|
var import_jsx_runtime271 = require("react/jsx-runtime");
|
|
13419
|
-
var StyledThead = import_styled_components89.
|
|
13433
|
+
var StyledThead = import_styled_components89.styled.thead``;
|
|
13420
13434
|
var TableHead = ({ children, ...props }) => {
|
|
13421
13435
|
return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(StyledThead, { ...props, children }) });
|
|
13422
13436
|
};
|
|
13423
13437
|
|
|
13424
13438
|
// src/components/Table/TableRow.tsx
|
|
13425
|
-
var import_styled_components90 =
|
|
13439
|
+
var import_styled_components90 = require("styled-components");
|
|
13426
13440
|
var import_jsx_runtime272 = require("react/jsx-runtime");
|
|
13427
|
-
var StyledTableRow = import_styled_components90.
|
|
13441
|
+
var StyledTableRow = import_styled_components90.styled.tr``;
|
|
13428
13442
|
var TableRow = ({ children, ...props }) => {
|
|
13429
13443
|
return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(StyledTableRow, { ...props, children });
|
|
13430
13444
|
};
|
|
@@ -13489,11 +13503,11 @@ TabsContent.displayName = "TabsContent";
|
|
|
13489
13503
|
|
|
13490
13504
|
// src/components/Tabs/TabsList.tsx
|
|
13491
13505
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
13492
|
-
var import_styled_components92 =
|
|
13506
|
+
var import_styled_components92 = require("styled-components");
|
|
13493
13507
|
|
|
13494
13508
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
13495
|
-
var import_styled_components91 =
|
|
13496
|
-
var TabsSelectedItemIndicatorDiv = (0, import_styled_components91.
|
|
13509
|
+
var import_styled_components91 = require("styled-components");
|
|
13510
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components91.styled)(SelectedItemIndicatorDiv)`
|
|
13497
13511
|
&:has(~ button[role='tab']:focus-visible) {
|
|
13498
13512
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
13499
13513
|
}
|
|
@@ -13512,7 +13526,7 @@ var SelectedTabIndicator = () => {
|
|
|
13512
13526
|
|
|
13513
13527
|
// src/components/Tabs/TabsList.tsx
|
|
13514
13528
|
var import_jsx_runtime276 = require("react/jsx-runtime");
|
|
13515
|
-
var StyledRadixTabsList = (0, import_styled_components92.
|
|
13529
|
+
var StyledRadixTabsList = (0, import_styled_components92.styled)(import_react_tabs3.List)`
|
|
13516
13530
|
${segmentedControlStyles}
|
|
13517
13531
|
`;
|
|
13518
13532
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
@@ -13535,9 +13549,9 @@ var import_react72 = require("react");
|
|
|
13535
13549
|
var import_type_guards56 = require("@wistia/type-guards");
|
|
13536
13550
|
|
|
13537
13551
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
13538
|
-
var import_styled_components93 =
|
|
13552
|
+
var import_styled_components93 = require("styled-components");
|
|
13539
13553
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
13540
|
-
var StyledRadixTabsTrigger = (0, import_styled_components93.
|
|
13554
|
+
var StyledRadixTabsTrigger = (0, import_styled_components93.styled)(import_react_tabs4.Trigger)`
|
|
13541
13555
|
${segmentedControlItemStyles}
|
|
13542
13556
|
|
|
13543
13557
|
&:focus-visible {
|
|
@@ -13598,10 +13612,10 @@ var TabsTrigger = (0, import_react72.forwardRef)(
|
|
|
13598
13612
|
TabsTrigger.displayName = "TabsTrigger";
|
|
13599
13613
|
|
|
13600
13614
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
13601
|
-
var import_styled_components94 =
|
|
13615
|
+
var import_styled_components94 = require("styled-components");
|
|
13602
13616
|
var import_type_guards57 = require("@wistia/type-guards");
|
|
13603
13617
|
var import_jsx_runtime278 = require("react/jsx-runtime");
|
|
13604
|
-
var StyledThumbnailBadge = import_styled_components94.
|
|
13618
|
+
var StyledThumbnailBadge = import_styled_components94.styled.div`
|
|
13605
13619
|
align-items: center;
|
|
13606
13620
|
background-color: rgb(0 0 0 / 50%);
|
|
13607
13621
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -13635,7 +13649,7 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
|
|
|
13635
13649
|
|
|
13636
13650
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
13637
13651
|
var import_react73 = require("react");
|
|
13638
|
-
var import_styled_components97 =
|
|
13652
|
+
var import_styled_components97 = require("styled-components");
|
|
13639
13653
|
var import_type_guards60 = require("@wistia/type-guards");
|
|
13640
13654
|
|
|
13641
13655
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
@@ -13771,10 +13785,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
|
|
|
13771
13785
|
};
|
|
13772
13786
|
|
|
13773
13787
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
13774
|
-
var import_styled_components96 =
|
|
13788
|
+
var import_styled_components96 = require("styled-components");
|
|
13775
13789
|
var import_type_guards59 = require("@wistia/type-guards");
|
|
13776
13790
|
var import_jsx_runtime279 = require("react/jsx-runtime");
|
|
13777
|
-
var ScrubLine = import_styled_components96.
|
|
13791
|
+
var ScrubLine = import_styled_components96.styled.div`
|
|
13778
13792
|
position: absolute;
|
|
13779
13793
|
top: 0;
|
|
13780
13794
|
height: 100%;
|
|
@@ -13898,12 +13912,12 @@ var ThumbnailStoryboardViewer = ({
|
|
|
13898
13912
|
|
|
13899
13913
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
13900
13914
|
var import_jsx_runtime280 = require("react/jsx-runtime");
|
|
13901
|
-
var WideThumbnailImage = import_styled_components97.
|
|
13915
|
+
var WideThumbnailImage = import_styled_components97.styled.img`
|
|
13902
13916
|
height: 100%;
|
|
13903
13917
|
object-fit: cover;
|
|
13904
13918
|
width: 100%;
|
|
13905
13919
|
`;
|
|
13906
|
-
var SquareThumbnailImage = import_styled_components97.
|
|
13920
|
+
var SquareThumbnailImage = import_styled_components97.styled.img`
|
|
13907
13921
|
backdrop-filter: blur(8px);
|
|
13908
13922
|
object-fit: contain;
|
|
13909
13923
|
width: 100%;
|
|
@@ -13928,7 +13942,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
13928
13942
|
}
|
|
13929
13943
|
);
|
|
13930
13944
|
};
|
|
13931
|
-
var StyledThumbnail = import_styled_components97.
|
|
13945
|
+
var StyledThumbnail = import_styled_components97.styled.div`
|
|
13932
13946
|
background-image: ${({ $backgroundUrl }) => (0, import_type_guards60.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
13933
13947
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
13934
13948
|
// if we don't have $backgroundUrl show a gradient
|
|
@@ -14077,13 +14091,13 @@ Thumbnail.displayName = "Thumbnail";
|
|
|
14077
14091
|
|
|
14078
14092
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
14079
14093
|
var import_react74 = __toESM(require("react"));
|
|
14080
|
-
var import_styled_components98 =
|
|
14094
|
+
var import_styled_components98 = require("styled-components");
|
|
14081
14095
|
var import_type_guards61 = require("@wistia/type-guards");
|
|
14082
14096
|
var import_jsx_runtime281 = (
|
|
14083
14097
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
14084
14098
|
require("react/jsx-runtime")
|
|
14085
14099
|
);
|
|
14086
|
-
var StyledThumbnailCollage = import_styled_components98.
|
|
14100
|
+
var StyledThumbnailCollage = import_styled_components98.styled.div`
|
|
14087
14101
|
display: grid;
|
|
14088
14102
|
gap: var(--wui-space-01);
|
|
14089
14103
|
width: 100%;
|
|
@@ -14185,7 +14199,7 @@ var ThumbnailCollage = ({
|
|
|
14185
14199
|
};
|
|
14186
14200
|
|
|
14187
14201
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
14188
|
-
var import_styled_components99 =
|
|
14202
|
+
var import_styled_components99 = require("styled-components");
|
|
14189
14203
|
var import_type_guards62 = require("@wistia/type-guards");
|
|
14190
14204
|
var import_jsx_runtime282 = require("react/jsx-runtime");
|
|
14191
14205
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
@@ -14227,7 +14241,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
14227
14241
|
}
|
|
14228
14242
|
return "0 0 144 31.47";
|
|
14229
14243
|
};
|
|
14230
|
-
var WistiaLogoComponent = import_styled_components99.
|
|
14244
|
+
var WistiaLogoComponent = import_styled_components99.styled.svg`
|
|
14231
14245
|
height: ${({ height }) => `${height}px`};
|
|
14232
14246
|
|
|
14233
14247
|
/* ensure it will always fit on mobile */
|