@wistia/ui 0.10.6-beta.54026f10.e8362fc → 0.10.6
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 +526 -572
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +229 -237
- package/dist/index.d.ts +229 -237
- package/dist/index.mjs +395 -440
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.10.6
|
|
3
|
+
* @license @wistia/ui v0.10.6
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -56,7 +56,6 @@ __export(index_exports, {
|
|
|
56
56
|
Collapsible: () => Collapsible,
|
|
57
57
|
CollapsibleContent: () => CollapsibleContent,
|
|
58
58
|
CollapsibleTrigger: () => CollapsibleTrigger,
|
|
59
|
-
CollapsibleTriggerIcon: () => CollapsibleTriggerIcon,
|
|
60
59
|
ColorSchemeWrapper: () => ColorSchemeWrapper,
|
|
61
60
|
Combobox: () => Combobox2,
|
|
62
61
|
ComboboxOption: () => ComboboxOption,
|
|
@@ -8883,67 +8882,23 @@ Collapsible.displayName = "Collapsible";
|
|
|
8883
8882
|
// src/components/Collapsible/CollapsibleTrigger.tsx
|
|
8884
8883
|
var import_react36 = require("react");
|
|
8885
8884
|
var import_react_collapsible2 = require("@radix-ui/react-collapsible");
|
|
8886
|
-
var import_styled_components41 = __toESM(require("styled-components"));
|
|
8887
8885
|
var import_jsx_runtime216 = require("react/jsx-runtime");
|
|
8888
|
-
var StyledTrigger = (0, import_styled_components41.default)(import_react_collapsible2.Trigger)`
|
|
8889
|
-
[data-wui-collapsible-icon] {
|
|
8890
|
-
transition: transform var(--wui-motion-duration-03) ease-in-out;
|
|
8891
|
-
}
|
|
8892
|
-
|
|
8893
|
-
&[aria-expanded='true'] {
|
|
8894
|
-
[data-wui-collapsible-icon] {
|
|
8895
|
-
&[data-wui-collapsible-icon-rotate='90'] {
|
|
8896
|
-
transform: rotate(90deg);
|
|
8897
|
-
}
|
|
8898
|
-
|
|
8899
|
-
&[data-wui-collapsible-icon-rotate='-90'] {
|
|
8900
|
-
transform: rotate(-90deg);
|
|
8901
|
-
}
|
|
8902
|
-
|
|
8903
|
-
&[data-wui-collapsible-icon-rotate='45'] {
|
|
8904
|
-
transform: rotate(45deg);
|
|
8905
|
-
}
|
|
8906
|
-
}
|
|
8907
|
-
}
|
|
8908
|
-
`;
|
|
8909
8886
|
var CollapsibleTrigger = ({ children }) => {
|
|
8910
8887
|
import_react36.Children.only(children);
|
|
8911
|
-
return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
|
|
8888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
|
|
8912
8889
|
};
|
|
8913
8890
|
|
|
8914
|
-
// src/components/Collapsible/CollapsibleTriggerIcon.tsx
|
|
8915
|
-
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
8916
|
-
var iconRotationMap = {
|
|
8917
|
-
"caret-left-strong": "-90",
|
|
8918
|
-
"caret-left": "-90",
|
|
8919
|
-
"caret-right-strong": "90",
|
|
8920
|
-
"caret-right": "90",
|
|
8921
|
-
plus: "45"
|
|
8922
|
-
};
|
|
8923
|
-
var CollapsibleTriggerIcon = ({ type, ...props }) => {
|
|
8924
|
-
return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
|
|
8925
|
-
Icon,
|
|
8926
|
-
{
|
|
8927
|
-
...props,
|
|
8928
|
-
"data-wui-collapsible-icon": "true",
|
|
8929
|
-
"data-wui-collapsible-icon-rotate": iconRotationMap[type],
|
|
8930
|
-
type
|
|
8931
|
-
}
|
|
8932
|
-
);
|
|
8933
|
-
};
|
|
8934
|
-
CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
|
|
8935
|
-
|
|
8936
8891
|
// src/components/Collapsible/CollapsibleContent.tsx
|
|
8937
|
-
var
|
|
8892
|
+
var import_styled_components41 = __toESM(require("styled-components"));
|
|
8938
8893
|
var import_react_collapsible3 = require("@radix-ui/react-collapsible");
|
|
8939
8894
|
var import_type_guards28 = require("@wistia/type-guards");
|
|
8940
|
-
var
|
|
8941
|
-
var ClampedContent =
|
|
8895
|
+
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
8896
|
+
var ClampedContent = import_styled_components41.default.div`
|
|
8942
8897
|
--wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
|
|
8943
8898
|
`;
|
|
8944
8899
|
var CollapsibleContent = ({ clamp, children }) => {
|
|
8945
8900
|
if ((0, import_type_guards28.isNotUndefined)(clamp)) {
|
|
8946
|
-
return /* @__PURE__ */ (0,
|
|
8901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
|
|
8947
8902
|
ClampedContent,
|
|
8948
8903
|
{
|
|
8949
8904
|
$clamp: clamp,
|
|
@@ -8952,7 +8907,7 @@ var CollapsibleContent = ({ clamp, children }) => {
|
|
|
8952
8907
|
}
|
|
8953
8908
|
);
|
|
8954
8909
|
}
|
|
8955
|
-
return /* @__PURE__ */ (0,
|
|
8910
|
+
return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
|
|
8956
8911
|
children,
|
|
8957
8912
|
" "
|
|
8958
8913
|
] }) });
|
|
@@ -8962,14 +8917,14 @@ var CollapsibleContent = ({ clamp, children }) => {
|
|
|
8962
8917
|
var Ariakit = __toESM(require("@ariakit/react"));
|
|
8963
8918
|
var import_react39 = require("react");
|
|
8964
8919
|
var import_match_sorter = require("match-sorter");
|
|
8965
|
-
var
|
|
8920
|
+
var import_styled_components45 = __toESM(require("styled-components"));
|
|
8966
8921
|
|
|
8967
8922
|
// src/components/Tag/Tag.tsx
|
|
8968
8923
|
var import_react37 = require("react");
|
|
8969
|
-
var
|
|
8924
|
+
var import_styled_components42 = __toESM(require("styled-components"));
|
|
8970
8925
|
var import_type_guards29 = require("@wistia/type-guards");
|
|
8971
|
-
var
|
|
8972
|
-
var TagLabel =
|
|
8926
|
+
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
8927
|
+
var TagLabel = import_styled_components42.default.a`
|
|
8973
8928
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8974
8929
|
font-size: var(--wui-typography-label-4-size);
|
|
8975
8930
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -9004,14 +8959,14 @@ var TagLabel = import_styled_components43.default.a`
|
|
|
9004
8959
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
9005
8960
|
}
|
|
9006
8961
|
`;
|
|
9007
|
-
var TagDivider =
|
|
8962
|
+
var TagDivider = import_styled_components42.default.div`
|
|
9008
8963
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9009
8964
|
border-left: 1px solid var(--wui-color-border);
|
|
9010
8965
|
display: flex;
|
|
9011
8966
|
height: 14px;
|
|
9012
8967
|
width: 1px;
|
|
9013
8968
|
`;
|
|
9014
|
-
var StyledRemoveButton =
|
|
8969
|
+
var StyledRemoveButton = import_styled_components42.default.button`
|
|
9015
8970
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9016
8971
|
all: unset;
|
|
9017
8972
|
cursor: pointer;
|
|
@@ -9039,7 +8994,7 @@ var StyledRemoveButton = import_styled_components43.default.button`
|
|
|
9039
8994
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
9040
8995
|
}
|
|
9041
8996
|
`;
|
|
9042
|
-
var StyledTag =
|
|
8997
|
+
var StyledTag = import_styled_components42.default.div`
|
|
9043
8998
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9044
8999
|
align-items: center;
|
|
9045
9000
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -9060,23 +9015,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
|
9060
9015
|
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
9061
9016
|
);
|
|
9062
9017
|
}
|
|
9063
|
-
return /* @__PURE__ */ (0,
|
|
9064
|
-
/* @__PURE__ */ (0,
|
|
9065
|
-
/* @__PURE__ */ (0,
|
|
9018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(import_jsx_runtime218.Fragment, { children: [
|
|
9019
|
+
/* @__PURE__ */ (0, import_jsx_runtime218.jsx)(TagDivider, { $colorScheme: colorScheme }),
|
|
9020
|
+
/* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
|
|
9066
9021
|
StyledRemoveButton,
|
|
9067
9022
|
{
|
|
9068
9023
|
$colorScheme: colorScheme,
|
|
9069
9024
|
onClick: onClickRemove,
|
|
9070
9025
|
type: "button",
|
|
9071
9026
|
children: [
|
|
9072
|
-
/* @__PURE__ */ (0,
|
|
9027
|
+
/* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
|
|
9073
9028
|
Icon,
|
|
9074
9029
|
{
|
|
9075
9030
|
size: "sm",
|
|
9076
9031
|
type: "close"
|
|
9077
9032
|
}
|
|
9078
9033
|
),
|
|
9079
|
-
/* @__PURE__ */ (0,
|
|
9034
|
+
/* @__PURE__ */ (0, import_jsx_runtime218.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
9080
9035
|
]
|
|
9081
9036
|
}
|
|
9082
9037
|
)
|
|
@@ -9086,14 +9041,14 @@ var Tag = (0, import_react37.forwardRef)(
|
|
|
9086
9041
|
({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
|
|
9087
9042
|
const hasIcon = (0, import_type_guards29.isNotNil)(icon);
|
|
9088
9043
|
const labelProps = (0, import_type_guards29.isNotNil)(href) && (0, import_type_guards29.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
|
|
9089
|
-
return /* @__PURE__ */ (0,
|
|
9044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
|
|
9090
9045
|
StyledTag,
|
|
9091
9046
|
{
|
|
9092
9047
|
ref,
|
|
9093
9048
|
$colorScheme: colorScheme,
|
|
9094
9049
|
...props,
|
|
9095
9050
|
children: [
|
|
9096
|
-
/* @__PURE__ */ (0,
|
|
9051
|
+
/* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
|
|
9097
9052
|
TagLabel,
|
|
9098
9053
|
{
|
|
9099
9054
|
...labelProps,
|
|
@@ -9104,7 +9059,7 @@ var Tag = (0, import_react37.forwardRef)(
|
|
|
9104
9059
|
]
|
|
9105
9060
|
}
|
|
9106
9061
|
),
|
|
9107
|
-
/* @__PURE__ */ (0,
|
|
9062
|
+
/* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
|
|
9108
9063
|
RemoveButton,
|
|
9109
9064
|
{
|
|
9110
9065
|
colorScheme,
|
|
@@ -9121,22 +9076,22 @@ Tag.displayName = "Tag";
|
|
|
9121
9076
|
|
|
9122
9077
|
// src/components/Text/Text.tsx
|
|
9123
9078
|
var import_react38 = require("react");
|
|
9124
|
-
var
|
|
9079
|
+
var import_styled_components43 = __toESM(require("styled-components"));
|
|
9125
9080
|
var import_type_guards30 = require("@wistia/type-guards");
|
|
9126
|
-
var
|
|
9127
|
-
var bodyBoldStyles =
|
|
9081
|
+
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
9082
|
+
var bodyBoldStyles = import_styled_components43.css`
|
|
9128
9083
|
> strong,
|
|
9129
9084
|
b {
|
|
9130
9085
|
font-weight: var(--wui-typography-weight-body-bold);
|
|
9131
9086
|
}
|
|
9132
9087
|
`;
|
|
9133
|
-
var labelBoldStyles =
|
|
9088
|
+
var labelBoldStyles = import_styled_components43.css`
|
|
9134
9089
|
> strong,
|
|
9135
9090
|
b {
|
|
9136
9091
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
9137
9092
|
}
|
|
9138
9093
|
`;
|
|
9139
|
-
var body1TextStyle =
|
|
9094
|
+
var body1TextStyle = import_styled_components43.css`
|
|
9140
9095
|
--font-family: var(--wui-typography-body-1-family);
|
|
9141
9096
|
--font-size: var(--wui-typography-body-1-size);
|
|
9142
9097
|
--font-weight: var(--wui-typography-body-1-weight);
|
|
@@ -9144,7 +9099,7 @@ var body1TextStyle = import_styled_components44.css`
|
|
|
9144
9099
|
--paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
|
|
9145
9100
|
${bodyBoldStyles}
|
|
9146
9101
|
`;
|
|
9147
|
-
var body2TextStyle =
|
|
9102
|
+
var body2TextStyle = import_styled_components43.css`
|
|
9148
9103
|
--font-family: var(--wui-typography-body-2-family);
|
|
9149
9104
|
--font-size: var(--wui-typography-body-2-size);
|
|
9150
9105
|
--font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -9152,7 +9107,7 @@ var body2TextStyle = import_styled_components44.css`
|
|
|
9152
9107
|
--paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
|
|
9153
9108
|
${bodyBoldStyles}
|
|
9154
9109
|
`;
|
|
9155
|
-
var body3TextStyle =
|
|
9110
|
+
var body3TextStyle = import_styled_components43.css`
|
|
9156
9111
|
--font-family: var(--wui-typography-body-3-family);
|
|
9157
9112
|
--font-size: var(--wui-typography-body-3-size);
|
|
9158
9113
|
--font-weight: var(--wui-typography-body-3-weight);
|
|
@@ -9160,7 +9115,7 @@ var body3TextStyle = import_styled_components44.css`
|
|
|
9160
9115
|
--paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
|
|
9161
9116
|
${bodyBoldStyles}
|
|
9162
9117
|
`;
|
|
9163
|
-
var body4TextStyle =
|
|
9118
|
+
var body4TextStyle = import_styled_components43.css`
|
|
9164
9119
|
--font-family: var(--wui-typography-body-4-family);
|
|
9165
9120
|
--font-size: var(--wui-typography-body-4-size);
|
|
9166
9121
|
--font-weight: var(--wui-typography-body-4-weight);
|
|
@@ -9168,47 +9123,47 @@ var body4TextStyle = import_styled_components44.css`
|
|
|
9168
9123
|
--paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
|
|
9169
9124
|
${bodyBoldStyles}
|
|
9170
9125
|
`;
|
|
9171
|
-
var label1TextStyle =
|
|
9126
|
+
var label1TextStyle = import_styled_components43.css`
|
|
9172
9127
|
--font-family: var(--wui-typography-label-1-family);
|
|
9173
9128
|
--font-size: var(--wui-typography-label-1-size);
|
|
9174
9129
|
--font-weight: var(--wui-typography-label-1-weight);
|
|
9175
9130
|
--line-height: var(--wui-typography-label-1-line-height);
|
|
9176
9131
|
${labelBoldStyles}
|
|
9177
9132
|
`;
|
|
9178
|
-
var label2TextStyle =
|
|
9133
|
+
var label2TextStyle = import_styled_components43.css`
|
|
9179
9134
|
--font-family: var(--wui-typography-label-2-family);
|
|
9180
9135
|
--font-size: var(--wui-typography-label-2-size);
|
|
9181
9136
|
--font-weight: var(--wui-typography-label-2-weight);
|
|
9182
9137
|
--line-height: var(--wui-typography-label-2-line-height);
|
|
9183
9138
|
${labelBoldStyles}
|
|
9184
9139
|
`;
|
|
9185
|
-
var label3TextStyle =
|
|
9140
|
+
var label3TextStyle = import_styled_components43.css`
|
|
9186
9141
|
--font-family: var(--wui-typography-label-3-family);
|
|
9187
9142
|
--font-size: var(--wui-typography-label-3-size);
|
|
9188
9143
|
--font-weight: var(--wui-typography-label-3-weight);
|
|
9189
9144
|
--line-height: var(--wui-typography-label-3-line-height);
|
|
9190
9145
|
${labelBoldStyles}
|
|
9191
9146
|
`;
|
|
9192
|
-
var label4TextStyle =
|
|
9147
|
+
var label4TextStyle = import_styled_components43.css`
|
|
9193
9148
|
--font-family: var(--wui-typography-label-4-family);
|
|
9194
9149
|
--font-size: var(--wui-typography-label-4-size);
|
|
9195
9150
|
--font-weight: var(--wui-typography-label-4-weight);
|
|
9196
9151
|
--line-height: var(--wui-typography-label-4-line-height);
|
|
9197
9152
|
${labelBoldStyles}
|
|
9198
9153
|
`;
|
|
9199
|
-
var body1MonoTextStyle =
|
|
9154
|
+
var body1MonoTextStyle = import_styled_components43.css`
|
|
9200
9155
|
${body1TextStyle};
|
|
9201
9156
|
--font-family: var(--wui-typography-family-mono);
|
|
9202
9157
|
`;
|
|
9203
|
-
var body2MonoTextStyle =
|
|
9158
|
+
var body2MonoTextStyle = import_styled_components43.css`
|
|
9204
9159
|
${body2TextStyle};
|
|
9205
9160
|
--font-family: var(--wui-typography-family-mono);
|
|
9206
9161
|
`;
|
|
9207
|
-
var body3MonoTextStyle =
|
|
9162
|
+
var body3MonoTextStyle = import_styled_components43.css`
|
|
9208
9163
|
${body3TextStyle};
|
|
9209
9164
|
--font-family: var(--wui-typography-family-mono);
|
|
9210
9165
|
`;
|
|
9211
|
-
var body4MonoTextStyle =
|
|
9166
|
+
var body4MonoTextStyle = import_styled_components43.css`
|
|
9212
9167
|
${body4TextStyle};
|
|
9213
9168
|
--font-family: var(--wui-typography-family-mono);
|
|
9214
9169
|
`;
|
|
@@ -9243,7 +9198,7 @@ var variantElementMap2 = {
|
|
|
9243
9198
|
label3: labelElement,
|
|
9244
9199
|
label4: labelElement
|
|
9245
9200
|
};
|
|
9246
|
-
var StyledText =
|
|
9201
|
+
var StyledText = import_styled_components43.default.div`
|
|
9247
9202
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9248
9203
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
9249
9204
|
if ($disabled) {
|
|
@@ -9268,26 +9223,26 @@ var StyledText = import_styled_components44.default.div`
|
|
|
9268
9223
|
${({ $variant }) => variantStyleMap2[$variant]}
|
|
9269
9224
|
${({ $truncate }) => {
|
|
9270
9225
|
if ((0, import_type_guards30.isNotNil)($truncate)) {
|
|
9271
|
-
return
|
|
9226
|
+
return import_styled_components43.css`
|
|
9272
9227
|
${ellipsisStyle};
|
|
9273
9228
|
${lineClampCss($truncate)};
|
|
9274
9229
|
`;
|
|
9275
9230
|
}
|
|
9276
9231
|
return void 0;
|
|
9277
9232
|
}}
|
|
9278
|
-
${({ $inline }) => $inline &&
|
|
9233
|
+
${({ $inline }) => $inline && import_styled_components43.css`
|
|
9279
9234
|
display: inline-block;
|
|
9280
9235
|
`}
|
|
9281
|
-
${({ $disabled }) => $disabled &&
|
|
9236
|
+
${({ $disabled }) => $disabled && import_styled_components43.css`
|
|
9282
9237
|
--text-color: var(--wui-color-text-disabled);
|
|
9283
9238
|
`}
|
|
9284
|
-
${({ $preventUserSelect }) => $preventUserSelect &&
|
|
9239
|
+
${({ $preventUserSelect }) => $preventUserSelect && import_styled_components43.css`
|
|
9285
9240
|
user-select: none;
|
|
9286
9241
|
`}
|
|
9287
|
-
${({ $align }) =>
|
|
9242
|
+
${({ $align }) => import_styled_components43.css`
|
|
9288
9243
|
text-align: ${$align};
|
|
9289
9244
|
`}
|
|
9290
|
-
${({ as }) => as === "p" &&
|
|
9245
|
+
${({ as }) => as === "p" && import_styled_components43.css`
|
|
9291
9246
|
display: block;
|
|
9292
9247
|
|
|
9293
9248
|
+ p {
|
|
@@ -9308,7 +9263,7 @@ var TextComponent = (0, import_react38.forwardRef)(
|
|
|
9308
9263
|
renderAs,
|
|
9309
9264
|
...props
|
|
9310
9265
|
}, ref) => {
|
|
9311
|
-
return /* @__PURE__ */ (0,
|
|
9266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
|
|
9312
9267
|
StyledText,
|
|
9313
9268
|
{
|
|
9314
9269
|
ref,
|
|
@@ -9330,8 +9285,8 @@ TextComponent.displayName = "Text";
|
|
|
9330
9285
|
var Text = makePolymorphic(TextComponent);
|
|
9331
9286
|
|
|
9332
9287
|
// src/css/inputCss.ts
|
|
9333
|
-
var
|
|
9334
|
-
var inputCss =
|
|
9288
|
+
var import_styled_components44 = require("styled-components");
|
|
9289
|
+
var inputCss = import_styled_components44.css`
|
|
9335
9290
|
/* Colors */
|
|
9336
9291
|
--wui-input-color-bg: var(--wui-color-bg-surface);
|
|
9337
9292
|
--wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -9357,8 +9312,8 @@ var inputCss = import_styled_components45.css`
|
|
|
9357
9312
|
`;
|
|
9358
9313
|
|
|
9359
9314
|
// src/components/Combobox/Combobox.tsx
|
|
9360
|
-
var
|
|
9361
|
-
var ComboboxWapper =
|
|
9315
|
+
var import_jsx_runtime220 = require("react/jsx-runtime");
|
|
9316
|
+
var ComboboxWapper = import_styled_components45.default.div`
|
|
9362
9317
|
${inputCss};
|
|
9363
9318
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
9364
9319
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -9407,7 +9362,7 @@ var ComboboxWapper = import_styled_components46.default.div`
|
|
|
9407
9362
|
}
|
|
9408
9363
|
}
|
|
9409
9364
|
`;
|
|
9410
|
-
var ComboboxInput = (0,
|
|
9365
|
+
var ComboboxInput = (0, import_styled_components45.default)(Ariakit.Combobox)`
|
|
9411
9366
|
appearance: none;
|
|
9412
9367
|
padding: 0;
|
|
9413
9368
|
width: 100%;
|
|
@@ -9422,7 +9377,7 @@ var ComboboxInput = (0, import_styled_components46.default)(Ariakit.Combobox)`
|
|
|
9422
9377
|
outline-width: 2px;
|
|
9423
9378
|
}
|
|
9424
9379
|
`;
|
|
9425
|
-
var ComboboxPopover = (0,
|
|
9380
|
+
var ComboboxPopover = (0, import_styled_components45.default)(Ariakit.Popover)`
|
|
9426
9381
|
--wui-combobox-content-border: var(--wui-color-border);
|
|
9427
9382
|
--wui-combobox-content-bg: var(--wui-color-bg-surface);
|
|
9428
9383
|
--wui-combobox-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -9447,7 +9402,7 @@ var ComboboxPopover = (0, import_styled_components46.default)(Ariakit.Popover)`
|
|
|
9447
9402
|
--item-opacity: 0.5;
|
|
9448
9403
|
}
|
|
9449
9404
|
`;
|
|
9450
|
-
var ComboboxItem2 = (0,
|
|
9405
|
+
var ComboboxItem2 = (0, import_styled_components45.default)(Ariakit.ComboboxItem)`
|
|
9451
9406
|
${variantStyleMap2.body3};
|
|
9452
9407
|
display: flex;
|
|
9453
9408
|
padding: var(--wui-combobox-option-padding);
|
|
@@ -9472,12 +9427,12 @@ var ComboboxItem2 = (0, import_styled_components46.default)(Ariakit.ComboboxItem
|
|
|
9472
9427
|
background-color: transparent;
|
|
9473
9428
|
}
|
|
9474
9429
|
`;
|
|
9475
|
-
var NoResults =
|
|
9430
|
+
var NoResults = import_styled_components45.default.div`
|
|
9476
9431
|
gap: var(--wui-space-02);
|
|
9477
9432
|
`;
|
|
9478
9433
|
var POPOVER_WIDTH_OFFSET = 20;
|
|
9479
9434
|
var ComboboxOption = ({ value, children }) => {
|
|
9480
|
-
return /* @__PURE__ */ (0,
|
|
9435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
|
|
9481
9436
|
ComboboxItem2,
|
|
9482
9437
|
{
|
|
9483
9438
|
className: "combobox-item",
|
|
@@ -9530,7 +9485,7 @@ var Combobox2 = ({
|
|
|
9530
9485
|
const matches = (0, import_react39.useMemo)(() => {
|
|
9531
9486
|
return (0, import_match_sorter.matchSorter)(Object.keys(options), searchValue);
|
|
9532
9487
|
}, [options, searchValue]);
|
|
9533
|
-
return /* @__PURE__ */ (0,
|
|
9488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
|
|
9534
9489
|
Ariakit.ComboboxProvider,
|
|
9535
9490
|
{
|
|
9536
9491
|
selectedValue: value,
|
|
@@ -9541,13 +9496,13 @@ var Combobox2 = ({
|
|
|
9541
9496
|
});
|
|
9542
9497
|
},
|
|
9543
9498
|
children: [
|
|
9544
|
-
/* @__PURE__ */ (0,
|
|
9499
|
+
/* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
|
|
9545
9500
|
ComboboxWapper,
|
|
9546
9501
|
{
|
|
9547
9502
|
ref: comboboxWrapperRef,
|
|
9548
9503
|
$fullWidth: fullWidth,
|
|
9549
9504
|
children: [
|
|
9550
|
-
value.map((selectedValue) => /* @__PURE__ */ (0,
|
|
9505
|
+
value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
|
|
9551
9506
|
Tag,
|
|
9552
9507
|
{
|
|
9553
9508
|
href: "https://example.com",
|
|
@@ -9557,11 +9512,11 @@ var Combobox2 = ({
|
|
|
9557
9512
|
},
|
|
9558
9513
|
selectedValue
|
|
9559
9514
|
)),
|
|
9560
|
-
/* @__PURE__ */ (0,
|
|
9515
|
+
/* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ComboboxInput, { placeholder })
|
|
9561
9516
|
]
|
|
9562
9517
|
}
|
|
9563
9518
|
),
|
|
9564
|
-
/* @__PURE__ */ (0,
|
|
9519
|
+
/* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
|
|
9565
9520
|
ComboboxPopover,
|
|
9566
9521
|
{
|
|
9567
9522
|
"aria-busy": isPending,
|
|
@@ -9571,14 +9526,14 @@ var Combobox2 = ({
|
|
|
9571
9526
|
width: wrapperWidth
|
|
9572
9527
|
},
|
|
9573
9528
|
children: [
|
|
9574
|
-
matches.map((match) => /* @__PURE__ */ (0,
|
|
9529
|
+
matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
|
|
9575
9530
|
ComboboxItem2,
|
|
9576
9531
|
{
|
|
9577
9532
|
className: "combobox-item",
|
|
9578
9533
|
focusOnHover: true,
|
|
9579
9534
|
value: match,
|
|
9580
9535
|
children: [
|
|
9581
|
-
/* @__PURE__ */ (0,
|
|
9536
|
+
/* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
|
|
9582
9537
|
Icon,
|
|
9583
9538
|
{
|
|
9584
9539
|
size: "sm",
|
|
@@ -9593,7 +9548,7 @@ var Combobox2 = ({
|
|
|
9593
9548
|
},
|
|
9594
9549
|
match
|
|
9595
9550
|
)),
|
|
9596
|
-
!matches.length && /* @__PURE__ */ (0,
|
|
9551
|
+
!matches.length && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(NoResults, { children: "No results found" })
|
|
9597
9552
|
]
|
|
9598
9553
|
}
|
|
9599
9554
|
)
|
|
@@ -9604,10 +9559,10 @@ var Combobox2 = ({
|
|
|
9604
9559
|
|
|
9605
9560
|
// src/components/DataCards/DataCard.tsx
|
|
9606
9561
|
var import_react40 = require("react");
|
|
9607
|
-
var
|
|
9562
|
+
var import_styled_components46 = __toESM(require("styled-components"));
|
|
9608
9563
|
var import_type_guards31 = require("@wistia/type-guards");
|
|
9609
|
-
var
|
|
9610
|
-
var StyledDataCard =
|
|
9564
|
+
var import_jsx_runtime221 = require("react/jsx-runtime");
|
|
9565
|
+
var StyledDataCard = import_styled_components46.default.div`
|
|
9611
9566
|
display: grid;
|
|
9612
9567
|
grid-template-areas: 'label slot' 'value value';
|
|
9613
9568
|
grid-template-rows: auto auto;
|
|
@@ -9662,7 +9617,7 @@ var StyledDataCard = import_styled_components47.default.div`
|
|
|
9662
9617
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
9663
9618
|
}
|
|
9664
9619
|
`;
|
|
9665
|
-
var shimmer =
|
|
9620
|
+
var shimmer = import_styled_components46.keyframes`
|
|
9666
9621
|
0% {
|
|
9667
9622
|
background-position: 200% 0;
|
|
9668
9623
|
}
|
|
@@ -9670,7 +9625,7 @@ var shimmer = import_styled_components47.keyframes`
|
|
|
9670
9625
|
background-position: -200% 0;
|
|
9671
9626
|
}
|
|
9672
9627
|
`;
|
|
9673
|
-
var LoadingBackground =
|
|
9628
|
+
var LoadingBackground = import_styled_components46.default.div`
|
|
9674
9629
|
background: linear-gradient(
|
|
9675
9630
|
90deg,
|
|
9676
9631
|
var(--wui-color-bg-surface-tertiary) 25%,
|
|
@@ -9681,27 +9636,27 @@ var LoadingBackground = import_styled_components47.default.div`
|
|
|
9681
9636
|
animation: ${shimmer} 1.5s infinite;
|
|
9682
9637
|
border-radius: var(--wui-border-radius-01);
|
|
9683
9638
|
`;
|
|
9684
|
-
var StyledLoadingLabel = (0,
|
|
9639
|
+
var StyledLoadingLabel = (0, import_styled_components46.default)(LoadingBackground)`
|
|
9685
9640
|
width: 80px;
|
|
9686
9641
|
height: var(--wui-typography-heading-6-line-height);
|
|
9687
9642
|
`;
|
|
9688
|
-
var StyledLoadingValue = (0,
|
|
9643
|
+
var StyledLoadingValue = (0, import_styled_components46.default)(LoadingBackground)`
|
|
9689
9644
|
width: 90%;
|
|
9690
9645
|
height: var(--wui-typography-heading-3-line-height);
|
|
9691
9646
|
`;
|
|
9692
|
-
var StyledLabel2 = (0,
|
|
9647
|
+
var StyledLabel2 = (0, import_styled_components46.default)(Heading)`
|
|
9693
9648
|
grid-area: label;
|
|
9694
9649
|
`;
|
|
9695
|
-
var StyledValue = (0,
|
|
9650
|
+
var StyledValue = (0, import_styled_components46.default)(Heading)`
|
|
9696
9651
|
grid-area: value;
|
|
9697
9652
|
`;
|
|
9698
|
-
var StyledSlot =
|
|
9653
|
+
var StyledSlot = import_styled_components46.default.div`
|
|
9699
9654
|
display: flex;
|
|
9700
9655
|
justify-content: flex-end;
|
|
9701
9656
|
grid-area: slot;
|
|
9702
9657
|
align-self: center;
|
|
9703
9658
|
`;
|
|
9704
|
-
var StyledDataCardTrendContainer =
|
|
9659
|
+
var StyledDataCardTrendContainer = import_styled_components46.default.div`
|
|
9705
9660
|
position: absolute;
|
|
9706
9661
|
bottom: var(--wui-space-01);
|
|
9707
9662
|
right: var(--wui-space-01);
|
|
@@ -9714,34 +9669,34 @@ var DataCardInner = ({
|
|
|
9714
9669
|
isLoading = false,
|
|
9715
9670
|
trend,
|
|
9716
9671
|
...props
|
|
9717
|
-
}) => /* @__PURE__ */ (0,
|
|
9672
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
|
|
9718
9673
|
StyledDataCard,
|
|
9719
9674
|
{
|
|
9720
9675
|
$colorScheme: colorScheme,
|
|
9721
9676
|
...props,
|
|
9722
9677
|
children: [
|
|
9723
|
-
/* @__PURE__ */ (0,
|
|
9678
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
9724
9679
|
StyledLabel2,
|
|
9725
9680
|
{
|
|
9726
9681
|
renderAs: "dt",
|
|
9727
9682
|
variant: "heading6",
|
|
9728
|
-
children: isLoading ? /* @__PURE__ */ (0,
|
|
9683
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledLoadingLabel, {}) : label
|
|
9729
9684
|
}
|
|
9730
9685
|
),
|
|
9731
|
-
/* @__PURE__ */ (0,
|
|
9686
|
+
/* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
9732
9687
|
StyledValue,
|
|
9733
9688
|
{
|
|
9734
9689
|
renderAs: "dd",
|
|
9735
9690
|
variant: "heading3",
|
|
9736
|
-
children: isLoading ? /* @__PURE__ */ (0,
|
|
9691
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledLoadingValue, {}) : value
|
|
9737
9692
|
}
|
|
9738
9693
|
),
|
|
9739
|
-
(0, import_type_guards31.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0,
|
|
9740
|
-
(0, import_type_guards31.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0,
|
|
9694
|
+
(0, import_type_guards31.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledSlot, { children: upperRightSlot }),
|
|
9695
|
+
(0, import_type_guards31.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledDataCardTrendContainer, { children: trend })
|
|
9741
9696
|
]
|
|
9742
9697
|
}
|
|
9743
9698
|
);
|
|
9744
|
-
var DataCardArrowIcon = /* @__PURE__ */ (0,
|
|
9699
|
+
var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
9745
9700
|
Icon,
|
|
9746
9701
|
{
|
|
9747
9702
|
"data-wui-data-card-hover-icon": true,
|
|
@@ -9751,12 +9706,12 @@ var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
|
|
|
9751
9706
|
var DataCard = (props) => {
|
|
9752
9707
|
const ref = (0, import_react40.useRef)(null);
|
|
9753
9708
|
if ((0, import_type_guards31.isNotNil)(props.href) || (0, import_type_guards31.isNotNil)(props.onClick)) {
|
|
9754
|
-
return /* @__PURE__ */ (0,
|
|
9709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
9755
9710
|
DataCardInner,
|
|
9756
9711
|
{
|
|
9757
9712
|
upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
|
|
9758
9713
|
...props,
|
|
9759
|
-
label: /* @__PURE__ */ (0,
|
|
9714
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
9760
9715
|
Button,
|
|
9761
9716
|
{
|
|
9762
9717
|
ref,
|
|
@@ -9771,14 +9726,14 @@ var DataCard = (props) => {
|
|
|
9771
9726
|
}
|
|
9772
9727
|
) });
|
|
9773
9728
|
}
|
|
9774
|
-
return /* @__PURE__ */ (0,
|
|
9729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(DataCardInner, { ...props });
|
|
9775
9730
|
};
|
|
9776
9731
|
DataCard.displayName = "DataCard";
|
|
9777
9732
|
|
|
9778
9733
|
// src/components/DataCards/DataCards.tsx
|
|
9779
|
-
var
|
|
9780
|
-
var
|
|
9781
|
-
var StyledDataCards = (0,
|
|
9734
|
+
var import_styled_components47 = __toESM(require("styled-components"));
|
|
9735
|
+
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
9736
|
+
var StyledDataCards = (0, import_styled_components47.default)(Box)`
|
|
9782
9737
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
9783
9738
|
margin-top: 0; /* Remove default <dl> style */
|
|
9784
9739
|
> * {
|
|
@@ -9792,7 +9747,7 @@ var DataCards = ({
|
|
|
9792
9747
|
colorScheme = "inherit",
|
|
9793
9748
|
...props
|
|
9794
9749
|
}) => {
|
|
9795
|
-
return /* @__PURE__ */ (0,
|
|
9750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
|
|
9796
9751
|
StyledDataCards,
|
|
9797
9752
|
{
|
|
9798
9753
|
...props,
|
|
@@ -9810,9 +9765,9 @@ var DataCards = ({
|
|
|
9810
9765
|
DataCards.displayName = "DataCards";
|
|
9811
9766
|
|
|
9812
9767
|
// src/components/DataCards/DataCardTrend.tsx
|
|
9813
|
-
var
|
|
9814
|
-
var
|
|
9815
|
-
var StyledDataCardTrend =
|
|
9768
|
+
var import_styled_components48 = __toESM(require("styled-components"));
|
|
9769
|
+
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
9770
|
+
var StyledDataCardTrend = import_styled_components48.default.div`
|
|
9816
9771
|
${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
|
|
9817
9772
|
background: var(--wui-color-bg-app);
|
|
9818
9773
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -9827,8 +9782,8 @@ var DataCardTrend = ({
|
|
|
9827
9782
|
children,
|
|
9828
9783
|
...props
|
|
9829
9784
|
}) => {
|
|
9830
|
-
return /* @__PURE__ */ (0,
|
|
9831
|
-
/* @__PURE__ */ (0,
|
|
9785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
|
|
9786
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
|
|
9832
9787
|
Icon,
|
|
9833
9788
|
{
|
|
9834
9789
|
size: "md",
|
|
@@ -9836,7 +9791,7 @@ var DataCardTrend = ({
|
|
|
9836
9791
|
...props
|
|
9837
9792
|
}
|
|
9838
9793
|
),
|
|
9839
|
-
/* @__PURE__ */ (0,
|
|
9794
|
+
/* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
|
|
9840
9795
|
Text,
|
|
9841
9796
|
{
|
|
9842
9797
|
prominence: "secondary",
|
|
@@ -9848,22 +9803,22 @@ var DataCardTrend = ({
|
|
|
9848
9803
|
};
|
|
9849
9804
|
|
|
9850
9805
|
// src/components/Divider/Divider.tsx
|
|
9851
|
-
var
|
|
9852
|
-
var
|
|
9853
|
-
var horizontalBorderCss =
|
|
9806
|
+
var import_styled_components49 = __toESM(require("styled-components"));
|
|
9807
|
+
var import_jsx_runtime224 = require("react/jsx-runtime");
|
|
9808
|
+
var horizontalBorderCss = import_styled_components49.css`
|
|
9854
9809
|
border-top-color: var(--wui-color-border);
|
|
9855
9810
|
border-top-style: solid;
|
|
9856
9811
|
border-top-width: 1px;
|
|
9857
9812
|
clear: both; /* for horizontal dividers, ensure it clears any floats */
|
|
9858
9813
|
height: 0;
|
|
9859
9814
|
`;
|
|
9860
|
-
var verticalBorderCss =
|
|
9815
|
+
var verticalBorderCss = import_styled_components49.css`
|
|
9861
9816
|
background-color: var(--wui-color-border);
|
|
9862
9817
|
max-width: 1px;
|
|
9863
9818
|
min-height: 100%;
|
|
9864
9819
|
width: 1px;
|
|
9865
9820
|
`;
|
|
9866
|
-
var DividerComponent =
|
|
9821
|
+
var DividerComponent = import_styled_components49.default.div`
|
|
9867
9822
|
${({ $orientation }) => {
|
|
9868
9823
|
switch ($orientation) {
|
|
9869
9824
|
case "vertical":
|
|
@@ -9875,7 +9830,7 @@ var DividerComponent = import_styled_components50.default.div`
|
|
|
9875
9830
|
}}
|
|
9876
9831
|
`;
|
|
9877
9832
|
var Divider = ({ orientation = "horizontal", ...props }) => {
|
|
9878
|
-
return /* @__PURE__ */ (0,
|
|
9833
|
+
return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
|
|
9879
9834
|
DividerComponent,
|
|
9880
9835
|
{
|
|
9881
9836
|
$orientation: orientation,
|
|
@@ -9888,14 +9843,14 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
|
|
|
9888
9843
|
Divider.displayName = "Divider";
|
|
9889
9844
|
|
|
9890
9845
|
// src/components/EditableHeading/EditableHeading.tsx
|
|
9891
|
-
var
|
|
9846
|
+
var import_styled_components52 = __toESM(require("styled-components"));
|
|
9892
9847
|
var import_react42 = require("react");
|
|
9893
9848
|
|
|
9894
9849
|
// src/components/Tooltip/Tooltip.tsx
|
|
9895
9850
|
var import_react_tooltip2 = require("@radix-ui/react-tooltip");
|
|
9896
|
-
var
|
|
9897
|
-
var
|
|
9898
|
-
var hide =
|
|
9851
|
+
var import_styled_components50 = __toESM(require("styled-components"));
|
|
9852
|
+
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
9853
|
+
var hide = import_styled_components50.keyframes`
|
|
9899
9854
|
from {
|
|
9900
9855
|
opacity: 1;
|
|
9901
9856
|
}
|
|
@@ -9903,7 +9858,7 @@ var hide = import_styled_components51.keyframes`
|
|
|
9903
9858
|
opacity: 0;
|
|
9904
9859
|
}
|
|
9905
9860
|
`;
|
|
9906
|
-
var slideDownAndFade =
|
|
9861
|
+
var slideDownAndFade = import_styled_components50.keyframes`
|
|
9907
9862
|
from {
|
|
9908
9863
|
opacity: 0;
|
|
9909
9864
|
transform: translateY(-6px);
|
|
@@ -9913,7 +9868,7 @@ var slideDownAndFade = import_styled_components51.keyframes`
|
|
|
9913
9868
|
transform: translateY(0);
|
|
9914
9869
|
}
|
|
9915
9870
|
`;
|
|
9916
|
-
var slideLeftAndFade =
|
|
9871
|
+
var slideLeftAndFade = import_styled_components50.keyframes`
|
|
9917
9872
|
from {
|
|
9918
9873
|
opacity: 0;
|
|
9919
9874
|
transform: translateX(6px);
|
|
@@ -9923,7 +9878,7 @@ var slideLeftAndFade = import_styled_components51.keyframes`
|
|
|
9923
9878
|
transform: translateX(0);
|
|
9924
9879
|
}
|
|
9925
9880
|
`;
|
|
9926
|
-
var slideUpAndFade =
|
|
9881
|
+
var slideUpAndFade = import_styled_components50.keyframes`
|
|
9927
9882
|
from {
|
|
9928
9883
|
opacity: 0;
|
|
9929
9884
|
transform: translateY(6px);
|
|
@@ -9933,7 +9888,7 @@ var slideUpAndFade = import_styled_components51.keyframes`
|
|
|
9933
9888
|
transform: translateY(0);
|
|
9934
9889
|
}
|
|
9935
9890
|
`;
|
|
9936
|
-
var slideRightAndFade =
|
|
9891
|
+
var slideRightAndFade = import_styled_components50.keyframes`
|
|
9937
9892
|
from {
|
|
9938
9893
|
opacity: 0;
|
|
9939
9894
|
transform: translateX(-6px);
|
|
@@ -9943,7 +9898,7 @@ var slideRightAndFade = import_styled_components51.keyframes`
|
|
|
9943
9898
|
transform: translateX(0);
|
|
9944
9899
|
}
|
|
9945
9900
|
`;
|
|
9946
|
-
var StyledContent = (0,
|
|
9901
|
+
var StyledContent = (0, import_styled_components50.default)(import_react_tooltip2.Content)`
|
|
9947
9902
|
--tooltip-font-family: var(--wui-typography-family-default);
|
|
9948
9903
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
9949
9904
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
@@ -10005,21 +9960,21 @@ var Tooltip = ({
|
|
|
10005
9960
|
if (forceOpen === true) {
|
|
10006
9961
|
rootProps.open = true;
|
|
10007
9962
|
}
|
|
10008
|
-
return /* @__PURE__ */ (0,
|
|
9963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
|
|
10009
9964
|
import_react_tooltip2.Root,
|
|
10010
9965
|
{
|
|
10011
9966
|
delayDuration: delay,
|
|
10012
9967
|
...rootProps,
|
|
10013
9968
|
children: [
|
|
10014
|
-
/* @__PURE__ */ (0,
|
|
10015
|
-
/* @__PURE__ */ (0,
|
|
9969
|
+
/* @__PURE__ */ (0, import_jsx_runtime225.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
|
|
9970
|
+
/* @__PURE__ */ (0, import_jsx_runtime225.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
|
|
10016
9971
|
StyledContent,
|
|
10017
9972
|
{
|
|
10018
9973
|
side: direction,
|
|
10019
9974
|
sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
|
|
10020
9975
|
children: [
|
|
10021
9976
|
content,
|
|
10022
|
-
!hideArrow ? /* @__PURE__ */ (0,
|
|
9977
|
+
!hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
|
|
10023
9978
|
"svg",
|
|
10024
9979
|
{
|
|
10025
9980
|
fill: "var(--tooltip-bg)",
|
|
@@ -10028,7 +9983,7 @@ var Tooltip = ({
|
|
|
10028
9983
|
viewBox: "0 0 12 8",
|
|
10029
9984
|
width: "12",
|
|
10030
9985
|
xmlns: "http://www.w3.org/2000/svg",
|
|
10031
|
-
children: /* @__PURE__ */ (0,
|
|
9986
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
|
|
10032
9987
|
}
|
|
10033
9988
|
) }) : null
|
|
10034
9989
|
]
|
|
@@ -10042,10 +9997,10 @@ Tooltip.displayName = "Tooltip";
|
|
|
10042
9997
|
|
|
10043
9998
|
// src/components/Input/Input.tsx
|
|
10044
9999
|
var import_react41 = require("react");
|
|
10045
|
-
var
|
|
10000
|
+
var import_styled_components51 = __toESM(require("styled-components"));
|
|
10046
10001
|
var import_type_guards32 = require("@wistia/type-guards");
|
|
10047
|
-
var
|
|
10048
|
-
var inputStyles =
|
|
10002
|
+
var import_jsx_runtime226 = require("react/jsx-runtime");
|
|
10003
|
+
var inputStyles = import_styled_components51.css`
|
|
10049
10004
|
${inputCss}
|
|
10050
10005
|
input,
|
|
10051
10006
|
textarea {
|
|
@@ -10080,7 +10035,7 @@ var inputStyles = import_styled_components52.css`
|
|
|
10080
10035
|
}
|
|
10081
10036
|
}
|
|
10082
10037
|
`;
|
|
10083
|
-
var StyledInputContainer =
|
|
10038
|
+
var StyledInputContainer = import_styled_components51.default.div`
|
|
10084
10039
|
display: inline-flex;
|
|
10085
10040
|
position: relative;
|
|
10086
10041
|
${inputStyles};
|
|
@@ -10164,7 +10119,7 @@ var Input = (0, import_react41.forwardRef)(
|
|
|
10164
10119
|
);
|
|
10165
10120
|
let leftIconToDisplay = leftIcon;
|
|
10166
10121
|
if ((0, import_type_guards32.isNil)(leftIcon) && type === "search") {
|
|
10167
|
-
leftIconToDisplay = /* @__PURE__ */ (0,
|
|
10122
|
+
leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Icon, { type: "search" });
|
|
10168
10123
|
}
|
|
10169
10124
|
if ((0, import_type_guards32.isNotNil)(leftIconToDisplay)) {
|
|
10170
10125
|
leftIconToDisplay = (0, import_react41.cloneElement)(leftIconToDisplay, {
|
|
@@ -10189,21 +10144,21 @@ var Input = (0, import_react41.forwardRef)(
|
|
|
10189
10144
|
});
|
|
10190
10145
|
}
|
|
10191
10146
|
};
|
|
10192
|
-
return /* @__PURE__ */ (0,
|
|
10147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
|
|
10193
10148
|
StyledInputContainer,
|
|
10194
10149
|
{
|
|
10195
10150
|
$fullWidth: fullWidth,
|
|
10196
10151
|
$monospace: monospace,
|
|
10197
10152
|
children: [
|
|
10198
10153
|
leftIconToDisplay ?? null,
|
|
10199
|
-
type === "multiline" ? /* @__PURE__ */ (0,
|
|
10154
|
+
type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
|
|
10200
10155
|
"textarea",
|
|
10201
10156
|
{
|
|
10202
10157
|
...props,
|
|
10203
10158
|
ref,
|
|
10204
10159
|
onFocus: handleFocus2
|
|
10205
10160
|
}
|
|
10206
|
-
) : /* @__PURE__ */ (0,
|
|
10161
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
|
|
10207
10162
|
"input",
|
|
10208
10163
|
{
|
|
10209
10164
|
...props,
|
|
@@ -10221,8 +10176,8 @@ var Input = (0, import_react41.forwardRef)(
|
|
|
10221
10176
|
Input.displayName = "Input";
|
|
10222
10177
|
|
|
10223
10178
|
// src/components/EditableHeading/EditableHeading.tsx
|
|
10224
|
-
var
|
|
10225
|
-
var StyledInput = (0,
|
|
10179
|
+
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
10180
|
+
var StyledInput = (0, import_styled_components52.default)(Input)`
|
|
10226
10181
|
:not([rows]) {
|
|
10227
10182
|
min-height: unset;
|
|
10228
10183
|
}
|
|
@@ -10239,7 +10194,7 @@ var StyledInput = (0, import_styled_components53.default)(Input)`
|
|
|
10239
10194
|
height: ${({ $height }) => `${$height}px`};
|
|
10240
10195
|
}
|
|
10241
10196
|
`;
|
|
10242
|
-
var editableStyles =
|
|
10197
|
+
var editableStyles = import_styled_components52.css`
|
|
10243
10198
|
&:has(+ :focus-within) {
|
|
10244
10199
|
background: var(--wui-color-bg-surface-hover);
|
|
10245
10200
|
}
|
|
@@ -10249,7 +10204,7 @@ var editableStyles = import_styled_components53.css`
|
|
|
10249
10204
|
cursor: pointer;
|
|
10250
10205
|
}
|
|
10251
10206
|
`;
|
|
10252
|
-
var StyledHeading2 = (0,
|
|
10207
|
+
var StyledHeading2 = (0, import_styled_components52.default)(Heading)`
|
|
10253
10208
|
width: 100%;
|
|
10254
10209
|
border-radius: var(--wui-border-radius-02);
|
|
10255
10210
|
padding: var(--wui-space-02);
|
|
@@ -10303,7 +10258,7 @@ var EditableHeading = ({
|
|
|
10303
10258
|
handleSetEditing(false);
|
|
10304
10259
|
}
|
|
10305
10260
|
};
|
|
10306
|
-
const HeadingComponent2 = /* @__PURE__ */ (0,
|
|
10261
|
+
const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
|
|
10307
10262
|
StyledHeading2,
|
|
10308
10263
|
{
|
|
10309
10264
|
ref: headingRef,
|
|
@@ -10317,7 +10272,7 @@ var EditableHeading = ({
|
|
|
10317
10272
|
return HeadingComponent2;
|
|
10318
10273
|
}
|
|
10319
10274
|
if (isEditing || __forceEditing) {
|
|
10320
|
-
return /* @__PURE__ */ (0,
|
|
10275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
|
|
10321
10276
|
StyledInput,
|
|
10322
10277
|
{
|
|
10323
10278
|
$height: headingHeight,
|
|
@@ -10335,9 +10290,9 @@ var EditableHeading = ({
|
|
|
10335
10290
|
}
|
|
10336
10291
|
);
|
|
10337
10292
|
}
|
|
10338
|
-
return /* @__PURE__ */ (0,
|
|
10339
|
-
/* @__PURE__ */ (0,
|
|
10340
|
-
/* @__PURE__ */ (0,
|
|
10293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_jsx_runtime227.Fragment, { children: [
|
|
10294
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
|
|
10295
|
+
/* @__PURE__ */ (0, import_jsx_runtime227.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
|
|
10341
10296
|
"button",
|
|
10342
10297
|
{
|
|
10343
10298
|
"aria-label": ariaLabel,
|
|
@@ -10350,10 +10305,10 @@ var EditableHeading = ({
|
|
|
10350
10305
|
|
|
10351
10306
|
// src/components/Form/Form.tsx
|
|
10352
10307
|
var import_react43 = require("react");
|
|
10353
|
-
var
|
|
10308
|
+
var import_styled_components53 = __toESM(require("styled-components"));
|
|
10354
10309
|
var import_type_guards33 = require("@wistia/type-guards");
|
|
10355
|
-
var
|
|
10356
|
-
var StyledForm =
|
|
10310
|
+
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
10311
|
+
var StyledForm = import_styled_components53.default.form`
|
|
10357
10312
|
--form-default-width: 690px;
|
|
10358
10313
|
|
|
10359
10314
|
max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
|
|
@@ -10432,7 +10387,7 @@ var FormComponent = ({
|
|
|
10432
10387
|
}, [labelPosition, values, errors, id, hasSubmitted]);
|
|
10433
10388
|
return (
|
|
10434
10389
|
// @ts-expect-error - generic context providers are a giant pain
|
|
10435
|
-
/* @__PURE__ */ (0,
|
|
10390
|
+
/* @__PURE__ */ (0, import_jsx_runtime228.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
|
|
10436
10391
|
Stack,
|
|
10437
10392
|
{
|
|
10438
10393
|
...props,
|
|
@@ -10491,9 +10446,9 @@ var useFormState = (action, initialData = {}) => {
|
|
|
10491
10446
|
// src/components/Form/FormErrorSummary.tsx
|
|
10492
10447
|
var import_react45 = require("react");
|
|
10493
10448
|
var import_type_guards34 = require("@wistia/type-guards");
|
|
10494
|
-
var
|
|
10449
|
+
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
10495
10450
|
var ErrorItem = ({ name, error, formId }) => {
|
|
10496
|
-
return /* @__PURE__ */ (0,
|
|
10451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
|
|
10497
10452
|
};
|
|
10498
10453
|
var FormErrorSummary = ({ description }) => {
|
|
10499
10454
|
const ref = (0, import_react45.useRef)(null);
|
|
@@ -10502,10 +10457,10 @@ var FormErrorSummary = ({ description }) => {
|
|
|
10502
10457
|
if (isValid || !hasSubmitted) {
|
|
10503
10458
|
return null;
|
|
10504
10459
|
}
|
|
10505
|
-
return /* @__PURE__ */ (0,
|
|
10506
|
-
/* @__PURE__ */ (0,
|
|
10507
|
-
/* @__PURE__ */ (0,
|
|
10508
|
-
([name, error]) => (0, import_type_guards34.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0,
|
|
10460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)("div", { ref, children: [
|
|
10461
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)("p", { children: description }),
|
|
10462
|
+
/* @__PURE__ */ (0, import_jsx_runtime229.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards34.isNotUndefined)(error)).map(
|
|
10463
|
+
([name, error]) => (0, import_type_guards34.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
|
|
10509
10464
|
ErrorItem,
|
|
10510
10465
|
{
|
|
10511
10466
|
error: err,
|
|
@@ -10513,7 +10468,7 @@ var FormErrorSummary = ({ description }) => {
|
|
|
10513
10468
|
name
|
|
10514
10469
|
},
|
|
10515
10470
|
err
|
|
10516
|
-
)) : /* @__PURE__ */ (0,
|
|
10471
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
|
|
10517
10472
|
ErrorItem,
|
|
10518
10473
|
{
|
|
10519
10474
|
error: error ?? "",
|
|
@@ -10528,13 +10483,13 @@ var FormErrorSummary = ({ description }) => {
|
|
|
10528
10483
|
|
|
10529
10484
|
// src/components/FormField/FormField.tsx
|
|
10530
10485
|
var import_react46 = require("react");
|
|
10531
|
-
var
|
|
10486
|
+
var import_styled_components55 = __toESM(require("styled-components"));
|
|
10532
10487
|
var import_type_guards35 = require("@wistia/type-guards");
|
|
10533
10488
|
|
|
10534
10489
|
// src/components/Label/Label.tsx
|
|
10535
|
-
var
|
|
10536
|
-
var
|
|
10537
|
-
var requiredStyle =
|
|
10490
|
+
var import_styled_components54 = __toESM(require("styled-components"));
|
|
10491
|
+
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
10492
|
+
var requiredStyle = import_styled_components54.css`
|
|
10538
10493
|
&::after {
|
|
10539
10494
|
color: var(--wui-color-text-error);
|
|
10540
10495
|
display: inline;
|
|
@@ -10542,10 +10497,10 @@ var requiredStyle = import_styled_components55.css`
|
|
|
10542
10497
|
content: '*';
|
|
10543
10498
|
}
|
|
10544
10499
|
`;
|
|
10545
|
-
var disabledStyle3 =
|
|
10500
|
+
var disabledStyle3 = import_styled_components54.css`
|
|
10546
10501
|
color: var(--wui-color-text-disabled);
|
|
10547
10502
|
`;
|
|
10548
|
-
var StyledLabel3 =
|
|
10503
|
+
var StyledLabel3 = import_styled_components54.default.label`
|
|
10549
10504
|
display: block;
|
|
10550
10505
|
width: 100%;
|
|
10551
10506
|
color: var(--wui-color-text);
|
|
@@ -10577,7 +10532,7 @@ var Label = ({
|
|
|
10577
10532
|
screenReaderOnly = false,
|
|
10578
10533
|
...props
|
|
10579
10534
|
}) => {
|
|
10580
|
-
return /* @__PURE__ */ (0,
|
|
10535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
|
|
10581
10536
|
StyledLabel3,
|
|
10582
10537
|
{
|
|
10583
10538
|
...props,
|
|
@@ -10592,8 +10547,8 @@ var Label = ({
|
|
|
10592
10547
|
Label.displayName = "Label";
|
|
10593
10548
|
|
|
10594
10549
|
// src/components/FormField/FormField.tsx
|
|
10595
|
-
var
|
|
10596
|
-
var StyledFormField =
|
|
10550
|
+
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
10551
|
+
var StyledFormField = import_styled_components55.default.div`
|
|
10597
10552
|
--form-field-spacing: var(--wui-space-01);
|
|
10598
10553
|
--form-field-spacing-inline: var(--wui-space-02);
|
|
10599
10554
|
--form-field-error-color: var(--wui-color-text-secondary-error);
|
|
@@ -10623,7 +10578,7 @@ var StyledFormField = import_styled_components56.default.div`
|
|
|
10623
10578
|
grid-template-rows: 1fr;
|
|
10624
10579
|
}
|
|
10625
10580
|
`;
|
|
10626
|
-
var StyledErrorList =
|
|
10581
|
+
var StyledErrorList = import_styled_components55.default.ul`
|
|
10627
10582
|
margin: 0;
|
|
10628
10583
|
padding: 0;
|
|
10629
10584
|
padding-left: var(--wui-space-04);
|
|
@@ -10633,7 +10588,7 @@ var StyledErrorList = import_styled_components56.default.ul`
|
|
|
10633
10588
|
`;
|
|
10634
10589
|
var ErrorMessages = ({ errors, id }) => {
|
|
10635
10590
|
const isMultipleErrors = (0, import_type_guards35.isArray)(errors);
|
|
10636
|
-
return isMultipleErrors ? /* @__PURE__ */ (0,
|
|
10591
|
+
return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
10637
10592
|
Text,
|
|
10638
10593
|
{
|
|
10639
10594
|
colorScheme: "error",
|
|
@@ -10643,7 +10598,7 @@ var ErrorMessages = ({ errors, id }) => {
|
|
|
10643
10598
|
children: error
|
|
10644
10599
|
},
|
|
10645
10600
|
`${id}-${index}`
|
|
10646
|
-
)) }) : /* @__PURE__ */ (0,
|
|
10601
|
+
)) }) : /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
10647
10602
|
Text,
|
|
10648
10603
|
{
|
|
10649
10604
|
colorScheme: "error",
|
|
@@ -10706,18 +10661,18 @@ var FormField = ({
|
|
|
10706
10661
|
};
|
|
10707
10662
|
}
|
|
10708
10663
|
import_react46.Children.only(children);
|
|
10709
|
-
return /* @__PURE__ */ (0,
|
|
10664
|
+
return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
|
|
10710
10665
|
StyledFormField,
|
|
10711
10666
|
{
|
|
10712
10667
|
...props,
|
|
10713
10668
|
"data-label-position": labelPosition ?? formState.labelPosition,
|
|
10714
10669
|
children: [
|
|
10715
|
-
!isIntegratedLabel && /* @__PURE__ */ (0,
|
|
10716
|
-
(0, import_type_guards35.isNotNil)(description) ? /* @__PURE__ */ (0,
|
|
10670
|
+
!isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Label, { htmlFor: computedId, children: label }),
|
|
10671
|
+
(0, import_type_guards35.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
|
|
10717
10672
|
(0, import_react46.cloneElement)(children, childProps),
|
|
10718
|
-
(0, import_type_guards35.isNotNil)(computedError) ? /* @__PURE__ */ (0,
|
|
10719
|
-
/* @__PURE__ */ (0,
|
|
10720
|
-
/* @__PURE__ */ (0,
|
|
10673
|
+
(0, import_type_guards35.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(import_jsx_runtime231.Fragment, { children: [
|
|
10674
|
+
/* @__PURE__ */ (0, import_jsx_runtime231.jsx)("div", {}),
|
|
10675
|
+
/* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
|
|
10721
10676
|
ErrorMessages,
|
|
10722
10677
|
{
|
|
10723
10678
|
errors: computedError,
|
|
@@ -10733,7 +10688,7 @@ FormField.displayName = "FormField";
|
|
|
10733
10688
|
|
|
10734
10689
|
// src/components/FormGroup/RadioGroup.tsx
|
|
10735
10690
|
var import_react47 = require("react");
|
|
10736
|
-
var
|
|
10691
|
+
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
10737
10692
|
var RadioGroupContext = (0, import_react47.createContext)(null);
|
|
10738
10693
|
var useRadioGroup = () => {
|
|
10739
10694
|
return (0, import_react47.useContext)(RadioGroupContext);
|
|
@@ -10751,15 +10706,15 @@ var RadioGroup = ({
|
|
|
10751
10706
|
onChange
|
|
10752
10707
|
};
|
|
10753
10708
|
}, [name, onChange]);
|
|
10754
|
-
return /* @__PURE__ */ (0,
|
|
10709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(FormGroup, { ...props, children }) });
|
|
10755
10710
|
};
|
|
10756
10711
|
RadioGroup.displayName = "RadioGroup";
|
|
10757
10712
|
|
|
10758
10713
|
// src/components/IconButton/IconButton.tsx
|
|
10759
10714
|
var import_react48 = require("react");
|
|
10760
|
-
var
|
|
10761
|
-
var
|
|
10762
|
-
var StyledButton2 = (0,
|
|
10715
|
+
var import_styled_components56 = __toESM(require("styled-components"));
|
|
10716
|
+
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
10717
|
+
var StyledButton2 = (0, import_styled_components56.default)(Button)`
|
|
10763
10718
|
--icon-button-size-sm: 24px;
|
|
10764
10719
|
--icon-button-size-md: 32px;
|
|
10765
10720
|
--icon-button-size-lg: 40px;
|
|
@@ -10776,7 +10731,7 @@ var StyledButton2 = (0, import_styled_components57.default)(Button)`
|
|
|
10776
10731
|
var IconButton = (0, import_react48.forwardRef)(
|
|
10777
10732
|
({ children, label, size = "md", ...props }, ref) => {
|
|
10778
10733
|
const responsiveSize = useResponsiveProp(size);
|
|
10779
|
-
return /* @__PURE__ */ (0,
|
|
10734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
|
|
10780
10735
|
StyledButton2,
|
|
10781
10736
|
{
|
|
10782
10737
|
...props,
|
|
@@ -10794,11 +10749,11 @@ var IconButton = (0, import_react48.forwardRef)(
|
|
|
10794
10749
|
IconButton.displayName = "IconButton";
|
|
10795
10750
|
|
|
10796
10751
|
// src/components/InputClickToCopy/InputClickToCopy.tsx
|
|
10797
|
-
var
|
|
10752
|
+
var import_styled_components57 = __toESM(require("styled-components"));
|
|
10798
10753
|
var import_react49 = require("react");
|
|
10799
10754
|
var import_type_guards36 = require("@wistia/type-guards");
|
|
10800
|
-
var
|
|
10801
|
-
var StyledInput2 = (0,
|
|
10755
|
+
var import_jsx_runtime234 = require("react/jsx-runtime");
|
|
10756
|
+
var StyledInput2 = (0, import_styled_components57.default)(Input)`
|
|
10802
10757
|
&:not([aria-disabled='true']) {
|
|
10803
10758
|
cursor: pointer;
|
|
10804
10759
|
}
|
|
@@ -10835,7 +10790,7 @@ var InputClickToCopy = (0, import_react49.forwardRef)(
|
|
|
10835
10790
|
return value;
|
|
10836
10791
|
});
|
|
10837
10792
|
};
|
|
10838
|
-
return /* @__PURE__ */ (0,
|
|
10793
|
+
return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
|
|
10839
10794
|
StyledInput2,
|
|
10840
10795
|
{
|
|
10841
10796
|
"aria-label": "Click to Copy",
|
|
@@ -10843,13 +10798,13 @@ var InputClickToCopy = (0, import_react49.forwardRef)(
|
|
|
10843
10798
|
ref,
|
|
10844
10799
|
onClick: handleClick,
|
|
10845
10800
|
readOnly: true,
|
|
10846
|
-
rightIcon: isCopied ? /* @__PURE__ */ (0,
|
|
10801
|
+
rightIcon: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
|
|
10847
10802
|
Icon,
|
|
10848
10803
|
{
|
|
10849
10804
|
colorScheme: "success",
|
|
10850
10805
|
type: "checkmark-circle"
|
|
10851
10806
|
}
|
|
10852
|
-
) : /* @__PURE__ */ (0,
|
|
10807
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Icon, { type: "save-as-copy" }),
|
|
10853
10808
|
value
|
|
10854
10809
|
}
|
|
10855
10810
|
);
|
|
@@ -10858,16 +10813,16 @@ var InputClickToCopy = (0, import_react49.forwardRef)(
|
|
|
10858
10813
|
InputClickToCopy.displayName = "InputClickToCopy";
|
|
10859
10814
|
|
|
10860
10815
|
// src/components/KeyboardShortcut/KeyboardShortcut.tsx
|
|
10861
|
-
var
|
|
10816
|
+
var import_styled_components58 = __toESM(require("styled-components"));
|
|
10862
10817
|
var import_type_guards37 = require("@wistia/type-guards");
|
|
10863
|
-
var
|
|
10864
|
-
var StyledKeyboardShortcut =
|
|
10818
|
+
var import_jsx_runtime235 = require("react/jsx-runtime");
|
|
10819
|
+
var StyledKeyboardShortcut = import_styled_components58.default.div`
|
|
10865
10820
|
align-items: center;
|
|
10866
10821
|
display: flex;
|
|
10867
10822
|
gap: var(--wui-space-02);
|
|
10868
10823
|
${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
|
|
10869
10824
|
`;
|
|
10870
|
-
var StyledKey =
|
|
10825
|
+
var StyledKey = import_styled_components58.default.kbd`
|
|
10871
10826
|
align-items: center;
|
|
10872
10827
|
background: var(--wui-color-bg-surface-secondary);
|
|
10873
10828
|
border-bottom: 1px solid var(--wui-color-border-secondary);
|
|
@@ -10890,11 +10845,11 @@ var StyledKey = import_styled_components59.default.kbd`
|
|
|
10890
10845
|
min-width: 20px;
|
|
10891
10846
|
padding: 0 var(--wui-space-01);
|
|
10892
10847
|
`;
|
|
10893
|
-
var Label2 =
|
|
10848
|
+
var Label2 = import_styled_components58.default.span`
|
|
10894
10849
|
color: var(--wui-color-text);
|
|
10895
10850
|
font-size: 12px;
|
|
10896
10851
|
`;
|
|
10897
|
-
var KeysContainer =
|
|
10852
|
+
var KeysContainer = import_styled_components58.default.div`
|
|
10898
10853
|
display: flex;
|
|
10899
10854
|
gap: var(--wui-space-01);
|
|
10900
10855
|
`;
|
|
@@ -10947,14 +10902,14 @@ var KeyboardShortcut = ({
|
|
|
10947
10902
|
keyboardKeys,
|
|
10948
10903
|
fullWidth = false,
|
|
10949
10904
|
...otherProps
|
|
10950
|
-
}) => /* @__PURE__ */ (0,
|
|
10905
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
|
|
10951
10906
|
StyledKeyboardShortcut,
|
|
10952
10907
|
{
|
|
10953
10908
|
$fullWidth: fullWidth,
|
|
10954
10909
|
...otherProps,
|
|
10955
10910
|
children: [
|
|
10956
|
-
(0, import_type_guards37.isNotNil)(label) && /* @__PURE__ */ (0,
|
|
10957
|
-
/* @__PURE__ */ (0,
|
|
10911
|
+
(0, import_type_guards37.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Label2, { children: label }),
|
|
10912
|
+
/* @__PURE__ */ (0, import_jsx_runtime235.jsx)(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
|
|
10958
10913
|
StyledKey,
|
|
10959
10914
|
{
|
|
10960
10915
|
children: keyToString(keyboardKey)
|
|
@@ -10968,26 +10923,26 @@ KeyboardShortcut.displayName = "KeyboardShortcut";
|
|
|
10968
10923
|
|
|
10969
10924
|
// src/components/List/List.tsx
|
|
10970
10925
|
var import_type_guards39 = require("@wistia/type-guards");
|
|
10971
|
-
var
|
|
10926
|
+
var import_styled_components60 = __toESM(require("styled-components"));
|
|
10972
10927
|
|
|
10973
10928
|
// src/components/List/ListItem.tsx
|
|
10974
|
-
var
|
|
10929
|
+
var import_styled_components59 = __toESM(require("styled-components"));
|
|
10975
10930
|
var import_type_guards38 = require("@wistia/type-guards");
|
|
10976
|
-
var
|
|
10977
|
-
var ListItemComponent =
|
|
10931
|
+
var import_jsx_runtime236 = require("react/jsx-runtime");
|
|
10932
|
+
var ListItemComponent = import_styled_components59.default.li`
|
|
10978
10933
|
margin-bottom: var(--wui-space-02);
|
|
10979
10934
|
`;
|
|
10980
10935
|
var ListItem = ({ children }) => {
|
|
10981
10936
|
if ((0, import_type_guards38.isNil)(children)) {
|
|
10982
10937
|
return null;
|
|
10983
10938
|
}
|
|
10984
|
-
return /* @__PURE__ */ (0,
|
|
10939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(ListItemComponent, { children });
|
|
10985
10940
|
};
|
|
10986
10941
|
ListItem.displayName = "ListItem";
|
|
10987
10942
|
|
|
10988
10943
|
// src/components/List/List.tsx
|
|
10989
|
-
var
|
|
10990
|
-
var spacesStyle =
|
|
10944
|
+
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
10945
|
+
var spacesStyle = import_styled_components60.css`
|
|
10991
10946
|
overflow: hidden;
|
|
10992
10947
|
padding-left: 0;
|
|
10993
10948
|
vertical-align: bottom;
|
|
@@ -11009,7 +10964,7 @@ var spacesStyle = import_styled_components61.css`
|
|
|
11009
10964
|
}
|
|
11010
10965
|
}
|
|
11011
10966
|
`;
|
|
11012
|
-
var commasStyle =
|
|
10967
|
+
var commasStyle = import_styled_components60.css`
|
|
11013
10968
|
${spacesStyle};
|
|
11014
10969
|
|
|
11015
10970
|
li {
|
|
@@ -11019,7 +10974,7 @@ var commasStyle = import_styled_components61.css`
|
|
|
11019
10974
|
}
|
|
11020
10975
|
}
|
|
11021
10976
|
`;
|
|
11022
|
-
var slashesStyle =
|
|
10977
|
+
var slashesStyle = import_styled_components60.css`
|
|
11023
10978
|
${spacesStyle};
|
|
11024
10979
|
|
|
11025
10980
|
li {
|
|
@@ -11030,7 +10985,7 @@ var slashesStyle = import_styled_components61.css`
|
|
|
11030
10985
|
}
|
|
11031
10986
|
}
|
|
11032
10987
|
`;
|
|
11033
|
-
var breadcrumbsStyle =
|
|
10988
|
+
var breadcrumbsStyle = import_styled_components60.css`
|
|
11034
10989
|
${spacesStyle};
|
|
11035
10990
|
|
|
11036
10991
|
li {
|
|
@@ -11041,11 +10996,11 @@ var breadcrumbsStyle = import_styled_components61.css`
|
|
|
11041
10996
|
}
|
|
11042
10997
|
}
|
|
11043
10998
|
`;
|
|
11044
|
-
var unbulletedStyle =
|
|
10999
|
+
var unbulletedStyle = import_styled_components60.css`
|
|
11045
11000
|
list-style: none;
|
|
11046
11001
|
padding-left: 0;
|
|
11047
11002
|
`;
|
|
11048
|
-
var ListComponent =
|
|
11003
|
+
var ListComponent = import_styled_components60.default.ul`
|
|
11049
11004
|
list-style-position: outside;
|
|
11050
11005
|
margin: 0 0 var(--wui-space-01);
|
|
11051
11006
|
padding: 0 0 0 var(--wui-space-04);
|
|
@@ -11072,7 +11027,7 @@ var ListComponent = import_styled_components61.default.ul`
|
|
|
11072
11027
|
`;
|
|
11073
11028
|
var renderListComponent = (listItems, variant, { ...otherProps }) => {
|
|
11074
11029
|
const elementType = variant === "ordered" ? "ol" : "ul";
|
|
11075
|
-
return /* @__PURE__ */ (0,
|
|
11030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
|
|
11076
11031
|
ListComponent,
|
|
11077
11032
|
{
|
|
11078
11033
|
as: elementType,
|
|
@@ -11089,7 +11044,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
|
|
|
11089
11044
|
const nextItem = listItems[i + 1];
|
|
11090
11045
|
const key = `item-${itemCount += 1}`;
|
|
11091
11046
|
if (Array.isArray(nextItem)) {
|
|
11092
|
-
return /* @__PURE__ */ (0,
|
|
11047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(ListItem, { children: [
|
|
11093
11048
|
item,
|
|
11094
11049
|
renderListFromArray(nextItem, variant, otherProps)
|
|
11095
11050
|
] }, key);
|
|
@@ -11097,7 +11052,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
|
|
|
11097
11052
|
if (Array.isArray(item)) {
|
|
11098
11053
|
return null;
|
|
11099
11054
|
}
|
|
11100
|
-
return /* @__PURE__ */ (0,
|
|
11055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ListItem, { children: item }, key);
|
|
11101
11056
|
});
|
|
11102
11057
|
return renderListComponent(items, variant, otherProps);
|
|
11103
11058
|
};
|
|
@@ -11125,7 +11080,7 @@ var List = ({
|
|
|
11125
11080
|
List.displayName = "List";
|
|
11126
11081
|
|
|
11127
11082
|
// src/components/Menu/Menu.tsx
|
|
11128
|
-
var
|
|
11083
|
+
var import_styled_components61 = __toESM(require("styled-components"));
|
|
11129
11084
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
11130
11085
|
var import_type_guards40 = require("@wistia/type-guards");
|
|
11131
11086
|
var import_react51 = require("react");
|
|
@@ -11136,8 +11091,8 @@ var MenuContext = (0, import_react50.createContext)({ compact: false });
|
|
|
11136
11091
|
var useMenuContext = () => (0, import_react50.useContext)(MenuContext);
|
|
11137
11092
|
|
|
11138
11093
|
// src/components/Menu/Menu.tsx
|
|
11139
|
-
var
|
|
11140
|
-
var open =
|
|
11094
|
+
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
11095
|
+
var open = import_styled_components61.keyframes`
|
|
11141
11096
|
from {
|
|
11142
11097
|
opacity: 0;
|
|
11143
11098
|
transform: scale(.97) translateY(-8px);
|
|
@@ -11147,7 +11102,7 @@ var open = import_styled_components62.keyframes`
|
|
|
11147
11102
|
transform: scale(1);
|
|
11148
11103
|
}
|
|
11149
11104
|
`;
|
|
11150
|
-
var close =
|
|
11105
|
+
var close = import_styled_components61.keyframes`
|
|
11151
11106
|
from {
|
|
11152
11107
|
opacity: 1;
|
|
11153
11108
|
transform: scale(1);
|
|
@@ -11157,7 +11112,7 @@ var close = import_styled_components62.keyframes`
|
|
|
11157
11112
|
transform: scale(.97) translateY(-8px);
|
|
11158
11113
|
}
|
|
11159
11114
|
`;
|
|
11160
|
-
var menuItemCss =
|
|
11115
|
+
var menuItemCss = import_styled_components61.css`
|
|
11161
11116
|
--menu-label-description-gap: var(--wui-space-01);
|
|
11162
11117
|
--menu-item-inner-gap: var(--wui-space-03);
|
|
11163
11118
|
--menu-item-left-icon-size: 24px;
|
|
@@ -11168,7 +11123,7 @@ var menuItemCss = import_styled_components62.css`
|
|
|
11168
11123
|
--menu-label-line-height: var(--wui-typography-label-3-line-height);
|
|
11169
11124
|
--menu-divider-margin: var(--wui-space-02);
|
|
11170
11125
|
`;
|
|
11171
|
-
var compactMenuItemCss =
|
|
11126
|
+
var compactMenuItemCss = import_styled_components61.css`
|
|
11172
11127
|
--menu-label-description-gap: 0;
|
|
11173
11128
|
--menu-item-inner-gap: var(--wui-space-02);
|
|
11174
11129
|
--menu-item-left-icon-size: 16px;
|
|
@@ -11179,7 +11134,7 @@ var compactMenuItemCss = import_styled_components62.css`
|
|
|
11179
11134
|
--menu-label-line-height: var(--wui-typography-label-4-line-height);
|
|
11180
11135
|
--menu-divider-margin: var(--wui-space-01);
|
|
11181
11136
|
`;
|
|
11182
|
-
var menuContentCss =
|
|
11137
|
+
var menuContentCss = import_styled_components61.css`
|
|
11183
11138
|
--menu-font-family: var(--wui-typography-family-default);
|
|
11184
11139
|
--menu-bg: var(--wui-color-bg-surface);
|
|
11185
11140
|
--menu-shadow: var(--wui-elevation-01);
|
|
@@ -11221,7 +11176,7 @@ var menuContentCss = import_styled_components62.css`
|
|
|
11221
11176
|
margin: var(--menu-divider-margin) 0;
|
|
11222
11177
|
}
|
|
11223
11178
|
`;
|
|
11224
|
-
var MenuContent = (0,
|
|
11179
|
+
var MenuContent = (0, import_styled_components61.default)(import_react_dropdown_menu.DropdownMenuContent)`
|
|
11225
11180
|
${menuContentCss}
|
|
11226
11181
|
`;
|
|
11227
11182
|
var Menu = ({
|
|
@@ -11247,24 +11202,24 @@ var Menu = ({
|
|
|
11247
11202
|
onOpenChange: () => null
|
|
11248
11203
|
};
|
|
11249
11204
|
}
|
|
11250
|
-
return /* @__PURE__ */ (0,
|
|
11205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
|
|
11251
11206
|
import_react_dropdown_menu.DropdownMenu,
|
|
11252
11207
|
{
|
|
11253
11208
|
modal: false,
|
|
11254
11209
|
...controlProps,
|
|
11255
11210
|
children: [
|
|
11256
|
-
/* @__PURE__ */ (0,
|
|
11211
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards40.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
11257
11212
|
Button,
|
|
11258
11213
|
{
|
|
11259
11214
|
"aria-expanded": isOpen,
|
|
11260
11215
|
disabled,
|
|
11261
11216
|
forceState: isOpen ? "active" : void 0,
|
|
11262
|
-
rightIcon: /* @__PURE__ */ (0,
|
|
11217
|
+
rightIcon: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Icon, { type: "caret-down" }),
|
|
11263
11218
|
...triggerProps,
|
|
11264
11219
|
children: label
|
|
11265
11220
|
}
|
|
11266
11221
|
) }),
|
|
11267
|
-
/* @__PURE__ */ (0,
|
|
11222
|
+
/* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
|
|
11268
11223
|
MenuContent,
|
|
11269
11224
|
{
|
|
11270
11225
|
...props,
|
|
@@ -11285,19 +11240,19 @@ var Menu = ({
|
|
|
11285
11240
|
Menu.displayName = "Menu";
|
|
11286
11241
|
|
|
11287
11242
|
// src/components/Menu/MenuLabel.tsx
|
|
11288
|
-
var
|
|
11243
|
+
var import_styled_components62 = __toESM(require("styled-components"));
|
|
11289
11244
|
var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
|
|
11290
|
-
var
|
|
11291
|
-
var StyledMenuLabel = (0,
|
|
11245
|
+
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
11246
|
+
var StyledMenuLabel = (0, import_styled_components62.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
|
|
11292
11247
|
padding: var(--wui-space-02);
|
|
11293
11248
|
`;
|
|
11294
11249
|
var MenuLabel = ({ children, ...props }) => {
|
|
11295
|
-
return /* @__PURE__ */ (0,
|
|
11250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
|
|
11296
11251
|
StyledMenuLabel,
|
|
11297
11252
|
{
|
|
11298
11253
|
asChild: true,
|
|
11299
11254
|
...props,
|
|
11300
|
-
children: /* @__PURE__ */ (0,
|
|
11255
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
|
|
11301
11256
|
Heading,
|
|
11302
11257
|
{
|
|
11303
11258
|
renderAs: "span",
|
|
@@ -11313,16 +11268,16 @@ MenuLabel.displayName = "MenuLabel";
|
|
|
11313
11268
|
|
|
11314
11269
|
// src/components/Menu/SubMenu.tsx
|
|
11315
11270
|
var import_react53 = require("react");
|
|
11316
|
-
var
|
|
11271
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
11317
11272
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
11318
11273
|
var import_type_guards42 = require("@wistia/type-guards");
|
|
11319
11274
|
|
|
11320
11275
|
// src/components/Menu/MenuItemButton.tsx
|
|
11321
11276
|
var import_react52 = require("react");
|
|
11322
|
-
var
|
|
11277
|
+
var import_styled_components63 = __toESM(require("styled-components"));
|
|
11323
11278
|
var import_type_guards41 = require("@wistia/type-guards");
|
|
11324
|
-
var
|
|
11325
|
-
var StyledButton3 = (0,
|
|
11279
|
+
var import_jsx_runtime240 = require("react/jsx-runtime");
|
|
11280
|
+
var StyledButton3 = (0, import_styled_components63.default)(Button)`
|
|
11326
11281
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
11327
11282
|
|
|
11328
11283
|
display: flex;
|
|
@@ -11361,7 +11316,7 @@ var StyledButton3 = (0, import_styled_components64.default)(Button)`
|
|
|
11361
11316
|
padding-left: var(--wui-space-04);
|
|
11362
11317
|
}
|
|
11363
11318
|
`;
|
|
11364
|
-
var StyledLeftIconContainer =
|
|
11319
|
+
var StyledLeftIconContainer = import_styled_components63.default.div`
|
|
11365
11320
|
height: var(--menu-item-left-icon-size);
|
|
11366
11321
|
width: var(--menu-item-left-icon-size);
|
|
11367
11322
|
|
|
@@ -11372,7 +11327,7 @@ var StyledLeftIconContainer = import_styled_components64.default.div`
|
|
|
11372
11327
|
}
|
|
11373
11328
|
}
|
|
11374
11329
|
`;
|
|
11375
|
-
var StyledRightIconContainer =
|
|
11330
|
+
var StyledRightIconContainer = import_styled_components63.default.div`
|
|
11376
11331
|
height: var(--menu-item-right-icon-size);
|
|
11377
11332
|
width: var(--menu-item-right-icon-size);
|
|
11378
11333
|
|
|
@@ -11383,13 +11338,13 @@ var StyledRightIconContainer = import_styled_components64.default.div`
|
|
|
11383
11338
|
}
|
|
11384
11339
|
}
|
|
11385
11340
|
`;
|
|
11386
|
-
var StyledLabelAndDescriptionContainer =
|
|
11341
|
+
var StyledLabelAndDescriptionContainer = import_styled_components63.default.div`
|
|
11387
11342
|
display: flex;
|
|
11388
11343
|
flex-direction: column;
|
|
11389
11344
|
gap: var(--menu-label-description-gap);
|
|
11390
11345
|
flex-basis: 100%;
|
|
11391
11346
|
`;
|
|
11392
|
-
var StyledBadgeContainer =
|
|
11347
|
+
var StyledBadgeContainer = import_styled_components63.default.div`
|
|
11393
11348
|
align-self: start;
|
|
11394
11349
|
justify-self: end;
|
|
11395
11350
|
font-size: var(--wui-typography-label-4-size);
|
|
@@ -11404,7 +11359,7 @@ var MenuItemButton = (0, import_react52.forwardRef)(({ children, appearance, com
|
|
|
11404
11359
|
colorScheme = "error";
|
|
11405
11360
|
}
|
|
11406
11361
|
if (appearance === "gated") {
|
|
11407
|
-
badge = /* @__PURE__ */ (0,
|
|
11362
|
+
badge = /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
|
|
11408
11363
|
Icon,
|
|
11409
11364
|
{
|
|
11410
11365
|
colorScheme: "purple",
|
|
@@ -11416,7 +11371,7 @@ var MenuItemButton = (0, import_react52.forwardRef)(({ children, appearance, com
|
|
|
11416
11371
|
}
|
|
11417
11372
|
);
|
|
11418
11373
|
}
|
|
11419
|
-
return /* @__PURE__ */ (0,
|
|
11374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(
|
|
11420
11375
|
StyledButton3,
|
|
11421
11376
|
{
|
|
11422
11377
|
...props,
|
|
@@ -11426,10 +11381,10 @@ var MenuItemButton = (0, import_react52.forwardRef)(({ children, appearance, com
|
|
|
11426
11381
|
fullWidth: true,
|
|
11427
11382
|
unstyled: true,
|
|
11428
11383
|
children: [
|
|
11429
|
-
props.leftIcon ? /* @__PURE__ */ (0,
|
|
11430
|
-
/* @__PURE__ */ (0,
|
|
11431
|
-
(0, import_type_guards41.isNotNil)(badge) || (0, import_type_guards41.isNotNil)(command) ? /* @__PURE__ */ (0,
|
|
11432
|
-
props.rightIcon ? /* @__PURE__ */ (0,
|
|
11384
|
+
props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
11385
|
+
/* @__PURE__ */ (0, import_jsx_runtime240.jsx)(StyledLabelAndDescriptionContainer, { children }),
|
|
11386
|
+
(0, import_type_guards41.isNotNil)(badge) || (0, import_type_guards41.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
|
|
11387
|
+
props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
11433
11388
|
]
|
|
11434
11389
|
}
|
|
11435
11390
|
);
|
|
@@ -11437,15 +11392,15 @@ var MenuItemButton = (0, import_react52.forwardRef)(({ children, appearance, com
|
|
|
11437
11392
|
MenuItemButton.displayName = "MenuItemButton";
|
|
11438
11393
|
|
|
11439
11394
|
// src/components/Menu/MenuItemLabelDescription.tsx
|
|
11440
|
-
var
|
|
11441
|
-
var
|
|
11442
|
-
var StyledMenuItemLabel =
|
|
11443
|
-
var StyledMenuItemDescription = (0,
|
|
11395
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
11396
|
+
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
11397
|
+
var StyledMenuItemLabel = import_styled_components64.default.span``;
|
|
11398
|
+
var StyledMenuItemDescription = (0, import_styled_components64.default)(Text)``;
|
|
11444
11399
|
var MenuItemLabel = ({ children }) => {
|
|
11445
|
-
return /* @__PURE__ */ (0,
|
|
11400
|
+
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(StyledMenuItemLabel, { children });
|
|
11446
11401
|
};
|
|
11447
11402
|
var MenuItemDescription = ({ children }) => {
|
|
11448
|
-
return /* @__PURE__ */ (0,
|
|
11403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
|
|
11449
11404
|
StyledMenuItemDescription,
|
|
11450
11405
|
{
|
|
11451
11406
|
prominence: "secondary",
|
|
@@ -11456,18 +11411,18 @@ var MenuItemDescription = ({ children }) => {
|
|
|
11456
11411
|
};
|
|
11457
11412
|
|
|
11458
11413
|
// src/components/Menu/SubMenu.tsx
|
|
11459
|
-
var
|
|
11460
|
-
var SubMenuContent = (0,
|
|
11414
|
+
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
11415
|
+
var SubMenuContent = (0, import_styled_components65.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
|
|
11461
11416
|
${menuContentCss}
|
|
11462
11417
|
|
|
11463
11418
|
${mq.smAndDown} {
|
|
11464
11419
|
transform: translateX(-100%) !important;
|
|
11465
11420
|
}
|
|
11466
11421
|
`;
|
|
11467
|
-
var StyledMobileSubMenuItems =
|
|
11422
|
+
var StyledMobileSubMenuItems = import_styled_components65.default.div`
|
|
11468
11423
|
margin-left: var(--wui-space-04);
|
|
11469
11424
|
`;
|
|
11470
|
-
var StyledSubTrigger = (0,
|
|
11425
|
+
var StyledSubTrigger = (0, import_styled_components65.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
|
|
11471
11426
|
outline: none;
|
|
11472
11427
|
|
|
11473
11428
|
&[data-state='open'],
|
|
@@ -11478,12 +11433,12 @@ var StyledSubTrigger = (0, import_styled_components66.default)(import_react_drop
|
|
|
11478
11433
|
var SubMenuTrigger = ({ icon, ...props }) => {
|
|
11479
11434
|
const { isSmAndUp } = useMq();
|
|
11480
11435
|
const Trigger4 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
|
|
11481
|
-
return /* @__PURE__ */ (0,
|
|
11436
|
+
return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
|
|
11482
11437
|
MenuItemButton,
|
|
11483
11438
|
{
|
|
11484
11439
|
...props,
|
|
11485
11440
|
leftIcon: icon,
|
|
11486
|
-
rightIcon: /* @__PURE__ */ (0,
|
|
11441
|
+
rightIcon: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon, { type: "caret-right" })
|
|
11487
11442
|
}
|
|
11488
11443
|
) });
|
|
11489
11444
|
};
|
|
@@ -11497,14 +11452,14 @@ var SubMenu = ({
|
|
|
11497
11452
|
const { isSmAndUp } = useMq();
|
|
11498
11453
|
const [isExpanded, setIsExpanded] = (0, import_react53.useState)(false);
|
|
11499
11454
|
const { compact } = useMenuContext();
|
|
11500
|
-
return isSmAndUp ? /* @__PURE__ */ (0,
|
|
11501
|
-
/* @__PURE__ */ (0,
|
|
11502
|
-
/* @__PURE__ */ (0,
|
|
11503
|
-
(0, import_type_guards42.isNotNil)(description) ? /* @__PURE__ */ (0,
|
|
11455
|
+
return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
|
|
11456
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(SubMenuTrigger, { ...props, children: [
|
|
11457
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsx)(MenuItemLabel, { children: label }),
|
|
11458
|
+
(0, import_type_guards42.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(MenuItemDescription, { children: description }) : null
|
|
11504
11459
|
] }),
|
|
11505
|
-
/* @__PURE__ */ (0,
|
|
11506
|
-
] }) : /* @__PURE__ */ (0,
|
|
11507
|
-
/* @__PURE__ */ (0,
|
|
11460
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(SubMenuContent, { $compact: compact, children }) })
|
|
11461
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
|
|
11462
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
|
|
11508
11463
|
SubMenuTrigger,
|
|
11509
11464
|
{
|
|
11510
11465
|
...props,
|
|
@@ -11513,12 +11468,12 @@ var SubMenu = ({
|
|
|
11513
11468
|
setIsExpanded((prev) => !prev);
|
|
11514
11469
|
},
|
|
11515
11470
|
children: [
|
|
11516
|
-
/* @__PURE__ */ (0,
|
|
11517
|
-
/* @__PURE__ */ (0,
|
|
11471
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsx)(MenuItemLabel, { children: label }),
|
|
11472
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsx)(MenuItemDescription, { children: description })
|
|
11518
11473
|
]
|
|
11519
11474
|
}
|
|
11520
11475
|
),
|
|
11521
|
-
/* @__PURE__ */ (0,
|
|
11476
|
+
/* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
|
|
11522
11477
|
] });
|
|
11523
11478
|
};
|
|
11524
11479
|
SubMenu.displayName = "SubMenu";
|
|
@@ -11526,15 +11481,15 @@ SubMenu.displayName = "SubMenu";
|
|
|
11526
11481
|
// src/components/Menu/MenuItem.tsx
|
|
11527
11482
|
var import_react54 = require("react");
|
|
11528
11483
|
var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
|
|
11529
|
-
var
|
|
11484
|
+
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
11530
11485
|
var MenuItem = (0, import_react54.forwardRef)(
|
|
11531
11486
|
({ onSelect = () => null, ...props }, ref) => {
|
|
11532
|
-
return /* @__PURE__ */ (0,
|
|
11487
|
+
return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
11533
11488
|
import_react_dropdown_menu4.DropdownMenuItem,
|
|
11534
11489
|
{
|
|
11535
11490
|
asChild: true,
|
|
11536
11491
|
onSelect,
|
|
11537
|
-
children: /* @__PURE__ */ (0,
|
|
11492
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
|
|
11538
11493
|
MenuItemButton,
|
|
11539
11494
|
{
|
|
11540
11495
|
...props,
|
|
@@ -11550,19 +11505,19 @@ MenuItem.displayName = "MenuItem";
|
|
|
11550
11505
|
|
|
11551
11506
|
// src/components/Menu/MenuRadioGroup.tsx
|
|
11552
11507
|
var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
|
|
11553
|
-
var
|
|
11508
|
+
var import_jsx_runtime244 = require("react/jsx-runtime");
|
|
11554
11509
|
var MenuRadioGroup = ({ children, ...props }) => {
|
|
11555
|
-
return /* @__PURE__ */ (0,
|
|
11510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children });
|
|
11556
11511
|
};
|
|
11557
11512
|
MenuRadioGroup.displayName = "MenuRadioGroup";
|
|
11558
11513
|
|
|
11559
11514
|
// src/components/Menu/RadioMenuItem.tsx
|
|
11560
11515
|
var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
|
|
11561
|
-
var
|
|
11516
|
+
var import_jsx_runtime245 = require("react/jsx-runtime");
|
|
11562
11517
|
var RadioMenuItem = ({
|
|
11563
11518
|
onSelect,
|
|
11564
11519
|
value,
|
|
11565
|
-
indicator = /* @__PURE__ */ (0,
|
|
11520
|
+
indicator = /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
|
|
11566
11521
|
Icon,
|
|
11567
11522
|
{
|
|
11568
11523
|
size: "sm",
|
|
@@ -11572,17 +11527,17 @@ var RadioMenuItem = ({
|
|
|
11572
11527
|
...props
|
|
11573
11528
|
}) => {
|
|
11574
11529
|
const extraProps = onSelect ? { onSelect } : {};
|
|
11575
|
-
return /* @__PURE__ */ (0,
|
|
11530
|
+
return /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
|
|
11576
11531
|
import_react_dropdown_menu6.DropdownMenuRadioItem,
|
|
11577
11532
|
{
|
|
11578
11533
|
...extraProps,
|
|
11579
11534
|
asChild: true,
|
|
11580
11535
|
value,
|
|
11581
|
-
children: /* @__PURE__ */ (0,
|
|
11536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
|
|
11582
11537
|
MenuItemButton,
|
|
11583
11538
|
{
|
|
11584
11539
|
...props,
|
|
11585
|
-
rightIcon: /* @__PURE__ */ (0,
|
|
11540
|
+
rightIcon: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
|
|
11586
11541
|
}
|
|
11587
11542
|
)
|
|
11588
11543
|
}
|
|
@@ -11593,9 +11548,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
|
|
|
11593
11548
|
// src/components/Menu/CheckboxMenuItem.tsx
|
|
11594
11549
|
var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
|
|
11595
11550
|
var import_type_guards43 = require("@wistia/type-guards");
|
|
11596
|
-
var
|
|
11551
|
+
var import_jsx_runtime246 = require("react/jsx-runtime");
|
|
11597
11552
|
var CheckboxIndicator = ({ checked, ...props }) => {
|
|
11598
|
-
return checked ? /* @__PURE__ */ (0,
|
|
11553
|
+
return checked ? /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
|
|
11599
11554
|
"svg",
|
|
11600
11555
|
{
|
|
11601
11556
|
...props,
|
|
@@ -11605,14 +11560,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
|
|
|
11605
11560
|
width: "24",
|
|
11606
11561
|
xmlns: "http://www.w3.org/2000/svg",
|
|
11607
11562
|
children: [
|
|
11608
|
-
/* @__PURE__ */ (0,
|
|
11563
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11609
11564
|
"path",
|
|
11610
11565
|
{
|
|
11611
11566
|
d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
|
|
11612
11567
|
fill: "#2949e5"
|
|
11613
11568
|
}
|
|
11614
11569
|
),
|
|
11615
|
-
/* @__PURE__ */ (0,
|
|
11570
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11616
11571
|
"path",
|
|
11617
11572
|
{
|
|
11618
11573
|
d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
|
|
@@ -11621,7 +11576,7 @@ var CheckboxIndicator = ({ checked, ...props }) => {
|
|
|
11621
11576
|
)
|
|
11622
11577
|
]
|
|
11623
11578
|
}
|
|
11624
|
-
) : /* @__PURE__ */ (0,
|
|
11579
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
|
|
11625
11580
|
"svg",
|
|
11626
11581
|
{
|
|
11627
11582
|
...props,
|
|
@@ -11631,14 +11586,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
|
|
|
11631
11586
|
width: "24",
|
|
11632
11587
|
xmlns: "http://www.w3.org/2000/svg",
|
|
11633
11588
|
children: [
|
|
11634
|
-
/* @__PURE__ */ (0,
|
|
11589
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11635
11590
|
"path",
|
|
11636
11591
|
{
|
|
11637
11592
|
d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
|
|
11638
11593
|
fill: "#fcfcfd"
|
|
11639
11594
|
}
|
|
11640
11595
|
),
|
|
11641
|
-
/* @__PURE__ */ (0,
|
|
11596
|
+
/* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11642
11597
|
"path",
|
|
11643
11598
|
{
|
|
11644
11599
|
d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
|
|
@@ -11655,19 +11610,19 @@ var CheckboxMenuItem = ({
|
|
|
11655
11610
|
onCheckedChange,
|
|
11656
11611
|
...props
|
|
11657
11612
|
}) => {
|
|
11658
|
-
return /* @__PURE__ */ (0,
|
|
11613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11659
11614
|
import_react_dropdown_menu7.DropdownMenuCheckboxItem,
|
|
11660
11615
|
{
|
|
11661
11616
|
asChild: true,
|
|
11662
11617
|
checked,
|
|
11663
11618
|
onCheckedChange,
|
|
11664
11619
|
onSelect,
|
|
11665
|
-
children: /* @__PURE__ */ (0,
|
|
11620
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
|
|
11666
11621
|
MenuItemButton,
|
|
11667
11622
|
{
|
|
11668
11623
|
...props,
|
|
11669
|
-
leftIcon: (0, import_type_guards43.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0,
|
|
11670
|
-
rightIcon: (0, import_type_guards43.isNotNil)(props.icon) ? /* @__PURE__ */ (0,
|
|
11624
|
+
leftIcon: (0, import_type_guards43.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CheckboxIndicator, { checked }),
|
|
11625
|
+
rightIcon: (0, import_type_guards43.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Icon, { type: "checkmark" }) }) : void 0
|
|
11671
11626
|
}
|
|
11672
11627
|
)
|
|
11673
11628
|
}
|
|
@@ -11677,36 +11632,36 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
|
|
|
11677
11632
|
|
|
11678
11633
|
// src/components/Modal/Modal.tsx
|
|
11679
11634
|
var import_react58 = require("react");
|
|
11680
|
-
var
|
|
11635
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
11681
11636
|
var import_react_dialog4 = require("@radix-ui/react-dialog");
|
|
11682
11637
|
var import_type_guards45 = require("@wistia/type-guards");
|
|
11683
11638
|
|
|
11684
11639
|
// src/components/Modal/ModalHeader.tsx
|
|
11685
|
-
var
|
|
11640
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
11686
11641
|
var import_react_dialog2 = require("@radix-ui/react-dialog");
|
|
11687
11642
|
|
|
11688
11643
|
// src/components/Modal/ModalCloseButton.tsx
|
|
11689
|
-
var
|
|
11644
|
+
var import_styled_components66 = __toESM(require("styled-components"));
|
|
11690
11645
|
var import_react_dialog = require("@radix-ui/react-dialog");
|
|
11691
|
-
var
|
|
11692
|
-
var CloseButton = (0,
|
|
11646
|
+
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
11647
|
+
var CloseButton = (0, import_styled_components66.default)(import_react_dialog.Close)`
|
|
11693
11648
|
align-self: start;
|
|
11694
11649
|
`;
|
|
11695
11650
|
var ModalCloseButton = () => {
|
|
11696
|
-
return /* @__PURE__ */ (0,
|
|
11651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
|
|
11697
11652
|
IconButton,
|
|
11698
11653
|
{
|
|
11699
11654
|
label: "Dismiss modal",
|
|
11700
11655
|
size: "sm",
|
|
11701
11656
|
variant: "ghost",
|
|
11702
|
-
children: /* @__PURE__ */ (0,
|
|
11657
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { type: "close" })
|
|
11703
11658
|
}
|
|
11704
11659
|
) });
|
|
11705
11660
|
};
|
|
11706
11661
|
|
|
11707
11662
|
// src/components/Modal/ModalHeader.tsx
|
|
11708
|
-
var
|
|
11709
|
-
var Header =
|
|
11663
|
+
var import_jsx_runtime248 = require("react/jsx-runtime");
|
|
11664
|
+
var Header = import_styled_components67.default.header`
|
|
11710
11665
|
display: flex;
|
|
11711
11666
|
order: 1;
|
|
11712
11667
|
gap: var(--wui-space-01);
|
|
@@ -11717,7 +11672,7 @@ var Header = import_styled_components68.default.header`
|
|
|
11717
11672
|
margin: 0 0 var(--wui-space-03);
|
|
11718
11673
|
}
|
|
11719
11674
|
`;
|
|
11720
|
-
var Title = (0,
|
|
11675
|
+
var Title = (0, import_styled_components67.default)(import_react_dialog2.Title)`
|
|
11721
11676
|
font-family: var(--wui-typography-heading-2-family);
|
|
11722
11677
|
line-height: var(--wui-typography-heading-2-line-height);
|
|
11723
11678
|
font-size: var(--wui-typography-heading-2-size);
|
|
@@ -11728,16 +11683,16 @@ var ModalHeader = ({
|
|
|
11728
11683
|
hideTitle,
|
|
11729
11684
|
hideCloseButton
|
|
11730
11685
|
}) => {
|
|
11731
|
-
const TitleComponent = hideTitle ? /* @__PURE__ */ (0,
|
|
11732
|
-
return /* @__PURE__ */ (0,
|
|
11686
|
+
const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Title, { children: title });
|
|
11687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Header, { $hideTitle: hideTitle, children: [
|
|
11733
11688
|
TitleComponent,
|
|
11734
|
-
hideCloseButton ? null : /* @__PURE__ */ (0,
|
|
11689
|
+
hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(ModalCloseButton, {})
|
|
11735
11690
|
] });
|
|
11736
11691
|
};
|
|
11737
11692
|
|
|
11738
11693
|
// src/components/Modal/ModalContent.tsx
|
|
11739
11694
|
var import_react56 = require("react");
|
|
11740
|
-
var
|
|
11695
|
+
var import_styled_components68 = __toESM(require("styled-components"));
|
|
11741
11696
|
var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
11742
11697
|
|
|
11743
11698
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
@@ -11760,38 +11715,38 @@ var useFocusRestore = () => {
|
|
|
11760
11715
|
};
|
|
11761
11716
|
|
|
11762
11717
|
// src/components/Modal/ModalContent.tsx
|
|
11763
|
-
var
|
|
11764
|
-
var alignTopStyles =
|
|
11718
|
+
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
11719
|
+
var alignTopStyles = import_styled_components68.css`
|
|
11765
11720
|
--wui-modal-translate-y: 0;
|
|
11766
11721
|
|
|
11767
11722
|
top: 0;
|
|
11768
11723
|
`;
|
|
11769
|
-
var alignVerticalCenterStyles =
|
|
11724
|
+
var alignVerticalCenterStyles = import_styled_components68.css`
|
|
11770
11725
|
--wui-modal-translate-y: -50%;
|
|
11771
11726
|
|
|
11772
11727
|
top: 50%;
|
|
11773
11728
|
`;
|
|
11774
|
-
var alignBottomStyles =
|
|
11729
|
+
var alignBottomStyles = import_styled_components68.css`
|
|
11775
11730
|
--wui-modal-translate-y: 0;
|
|
11776
11731
|
|
|
11777
11732
|
bottom: 0;
|
|
11778
11733
|
`;
|
|
11779
|
-
var alignHorizontalCenterStyles =
|
|
11734
|
+
var alignHorizontalCenterStyles = import_styled_components68.css`
|
|
11780
11735
|
--wui-modal-translate-x: -50%;
|
|
11781
11736
|
|
|
11782
11737
|
left: 50%;
|
|
11783
11738
|
`;
|
|
11784
|
-
var alignRightStyles =
|
|
11739
|
+
var alignRightStyles = import_styled_components68.css`
|
|
11785
11740
|
--wui-modal-translate-x: 0;
|
|
11786
11741
|
|
|
11787
11742
|
right: 0;
|
|
11788
11743
|
`;
|
|
11789
|
-
var alignLeftStyles =
|
|
11744
|
+
var alignLeftStyles = import_styled_components68.css`
|
|
11790
11745
|
--wui-modal-translate-x: 0;
|
|
11791
11746
|
|
|
11792
11747
|
left: 0;
|
|
11793
11748
|
`;
|
|
11794
|
-
var StyledModalContent = (0,
|
|
11749
|
+
var StyledModalContent = (0, import_styled_components68.default)(import_react_dialog3.Content)`
|
|
11795
11750
|
background-color: var(--wui-color-bg-app);
|
|
11796
11751
|
box-sizing: border-box;
|
|
11797
11752
|
display: flex;
|
|
@@ -11842,7 +11797,7 @@ var StyledModalContent = (0, import_styled_components69.default)(import_react_di
|
|
|
11842
11797
|
var ModalContent = (0, import_react56.forwardRef)(
|
|
11843
11798
|
({ fullHeight, width, alignHorizontal, alignVertical, children, ...props }, ref) => {
|
|
11844
11799
|
useFocusRestore();
|
|
11845
|
-
return /* @__PURE__ */ (0,
|
|
11800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
|
|
11846
11801
|
StyledModalContent,
|
|
11847
11802
|
{
|
|
11848
11803
|
ref,
|
|
@@ -11860,8 +11815,8 @@ var ModalContent = (0, import_react56.forwardRef)(
|
|
|
11860
11815
|
|
|
11861
11816
|
// src/private/components/Backdrop/Backdrop.tsx
|
|
11862
11817
|
var import_react57 = require("react");
|
|
11863
|
-
var
|
|
11864
|
-
var
|
|
11818
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
11819
|
+
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
11865
11820
|
var alignVerticalMap = {
|
|
11866
11821
|
stretch: "normal",
|
|
11867
11822
|
top: "start",
|
|
@@ -11873,7 +11828,7 @@ var alignHorizontalMap = {
|
|
|
11873
11828
|
center: "center",
|
|
11874
11829
|
right: "end"
|
|
11875
11830
|
};
|
|
11876
|
-
var BackdropComponent =
|
|
11831
|
+
var BackdropComponent = import_styled_components69.default.div`
|
|
11877
11832
|
align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
|
|
11878
11833
|
animation-name: backdropShow var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
11879
11834
|
background: var(--wui-color-backdrop);
|
|
@@ -11900,7 +11855,7 @@ var BackdropComponent = import_styled_components70.default.div`
|
|
|
11900
11855
|
}
|
|
11901
11856
|
`;
|
|
11902
11857
|
var Backdrop = (0, import_react57.forwardRef)(
|
|
11903
|
-
({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0,
|
|
11858
|
+
({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
|
|
11904
11859
|
BackdropComponent,
|
|
11905
11860
|
{
|
|
11906
11861
|
ref,
|
|
@@ -11914,9 +11869,9 @@ var Backdrop = (0, import_react57.forwardRef)(
|
|
|
11914
11869
|
Backdrop.displayName = "Backdrop";
|
|
11915
11870
|
|
|
11916
11871
|
// src/components/Modal/Modal.tsx
|
|
11917
|
-
var
|
|
11872
|
+
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
11918
11873
|
var DEFAULT_MODAL_WIDTH = "532px";
|
|
11919
|
-
var ModalBody =
|
|
11874
|
+
var ModalBody = import_styled_components70.default.div`
|
|
11920
11875
|
flex-direction: column;
|
|
11921
11876
|
display: flex;
|
|
11922
11877
|
flex: 1 0 0;
|
|
@@ -11937,7 +11892,7 @@ var Modal = (0, import_react58.forwardRef)(
|
|
|
11937
11892
|
alignVertical = "center",
|
|
11938
11893
|
...props
|
|
11939
11894
|
}, ref) => {
|
|
11940
|
-
return /* @__PURE__ */ (0,
|
|
11895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
|
|
11941
11896
|
import_react_dialog4.Root,
|
|
11942
11897
|
{
|
|
11943
11898
|
onOpenChange: (open2) => {
|
|
@@ -11946,9 +11901,9 @@ var Modal = (0, import_react58.forwardRef)(
|
|
|
11946
11901
|
}
|
|
11947
11902
|
},
|
|
11948
11903
|
open: isOpen,
|
|
11949
|
-
children: /* @__PURE__ */ (0,
|
|
11950
|
-
/* @__PURE__ */ (0,
|
|
11951
|
-
/* @__PURE__ */ (0,
|
|
11904
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(import_react_dialog4.Portal, { children: [
|
|
11905
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Backdrop, {}),
|
|
11906
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
|
|
11952
11907
|
ModalContent,
|
|
11953
11908
|
{
|
|
11954
11909
|
ref,
|
|
@@ -11966,8 +11921,8 @@ var Modal = (0, import_react58.forwardRef)(
|
|
|
11966
11921
|
width,
|
|
11967
11922
|
...props,
|
|
11968
11923
|
children: [
|
|
11969
|
-
/* @__PURE__ */ (0,
|
|
11970
|
-
/* @__PURE__ */ (0,
|
|
11924
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(ModalBody, { children }),
|
|
11925
|
+
/* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
|
|
11971
11926
|
ModalHeader,
|
|
11972
11927
|
{
|
|
11973
11928
|
hideCloseButton,
|
|
@@ -11987,7 +11942,7 @@ Modal.displayName = "Modal";
|
|
|
11987
11942
|
|
|
11988
11943
|
// src/components/Popover/Popover.tsx
|
|
11989
11944
|
var import_react_popover2 = require("@radix-ui/react-popover");
|
|
11990
|
-
var
|
|
11945
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
11991
11946
|
|
|
11992
11947
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
11993
11948
|
var import_type_guards46 = require("@wistia/type-guards");
|
|
@@ -11997,12 +11952,12 @@ var getControlProps = (isOpen, onOpenChange) => {
|
|
|
11997
11952
|
|
|
11998
11953
|
// src/components/Popover/PopoverArrow.tsx
|
|
11999
11954
|
var import_react_popover = require("@radix-ui/react-popover");
|
|
12000
|
-
var
|
|
12001
|
-
var
|
|
12002
|
-
var StyledPath =
|
|
11955
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
11956
|
+
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
11957
|
+
var StyledPath = import_styled_components71.default.path`
|
|
12003
11958
|
fill: var(--wui-color-border-secondary);
|
|
12004
11959
|
`;
|
|
12005
|
-
var circleAnimation =
|
|
11960
|
+
var circleAnimation = import_styled_components71.keyframes`
|
|
12006
11961
|
0% {
|
|
12007
11962
|
opacity: var(--wui-popover-arrow-circle-starting-opacity);
|
|
12008
11963
|
}
|
|
@@ -12010,7 +11965,7 @@ var circleAnimation = import_styled_components72.keyframes`
|
|
|
12010
11965
|
opacity: 0;
|
|
12011
11966
|
}
|
|
12012
11967
|
`;
|
|
12013
|
-
var StyledCircle =
|
|
11968
|
+
var StyledCircle = import_styled_components71.default.circle`
|
|
12014
11969
|
stroke: var(--wui-color-border-active);
|
|
12015
11970
|
animation-duration: 2s;
|
|
12016
11971
|
animation-iteration-count: infinite;
|
|
@@ -12031,13 +11986,13 @@ var StyledCircle = import_styled_components72.default.circle`
|
|
|
12031
11986
|
}
|
|
12032
11987
|
|
|
12033
11988
|
@media (prefers-reduced-motion: no-preference) {
|
|
12034
|
-
${({ $isAnimated }) => $isAnimated &&
|
|
11989
|
+
${({ $isAnimated }) => $isAnimated && import_styled_components71.css`
|
|
12035
11990
|
animation-name: ${circleAnimation};
|
|
12036
11991
|
`}
|
|
12037
11992
|
}
|
|
12038
11993
|
`;
|
|
12039
11994
|
var PopoverArrow = ({ isAnimated }) => {
|
|
12040
|
-
return /* @__PURE__ */ (0,
|
|
11995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_popover.PopoverArrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
|
|
12041
11996
|
"svg",
|
|
12042
11997
|
{
|
|
12043
11998
|
fill: "none",
|
|
@@ -12046,8 +12001,8 @@ var PopoverArrow = ({ isAnimated }) => {
|
|
|
12046
12001
|
width: "48",
|
|
12047
12002
|
xmlns: "http://www.w3.org/2000/svg",
|
|
12048
12003
|
children: [
|
|
12049
|
-
/* @__PURE__ */ (0,
|
|
12050
|
-
/* @__PURE__ */ (0,
|
|
12004
|
+
/* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
|
|
12005
|
+
/* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
|
|
12051
12006
|
StyledCircle,
|
|
12052
12007
|
{
|
|
12053
12008
|
$isAnimated: isAnimated,
|
|
@@ -12058,7 +12013,7 @@ var PopoverArrow = ({ isAnimated }) => {
|
|
|
12058
12013
|
strokeWidth: "4"
|
|
12059
12014
|
}
|
|
12060
12015
|
),
|
|
12061
|
-
/* @__PURE__ */ (0,
|
|
12016
|
+
/* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
|
|
12062
12017
|
StyledCircle,
|
|
12063
12018
|
{
|
|
12064
12019
|
$isAnimated: isAnimated,
|
|
@@ -12076,10 +12031,10 @@ var PopoverArrow = ({ isAnimated }) => {
|
|
|
12076
12031
|
PopoverArrow.displayName = "PopoverArrow";
|
|
12077
12032
|
|
|
12078
12033
|
// src/components/Popover/Popover.tsx
|
|
12079
|
-
var
|
|
12080
|
-
var StyledContent2 = (0,
|
|
12034
|
+
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
12035
|
+
var StyledContent2 = (0, import_styled_components72.default)(import_react_popover2.Content)`
|
|
12081
12036
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12082
|
-
${({ $unstyled }) => !$unstyled &&
|
|
12037
|
+
${({ $unstyled }) => !$unstyled && import_styled_components72.css`
|
|
12083
12038
|
border-radius: var(--wui-border-radius-02);
|
|
12084
12039
|
padding: var(--wui-space-04);
|
|
12085
12040
|
max-width: var(--wui-popover-max-width, 320px);
|
|
@@ -12115,9 +12070,9 @@ var Popover2 = ({
|
|
|
12115
12070
|
"--wui-popover-max-width": maxWidth,
|
|
12116
12071
|
"--wui-popover-max-height": maxHeight
|
|
12117
12072
|
};
|
|
12118
|
-
return /* @__PURE__ */ (0,
|
|
12119
|
-
/* @__PURE__ */ (0,
|
|
12120
|
-
/* @__PURE__ */ (0,
|
|
12073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(import_react_popover2.Root, { ...getControlProps(isOpen, onOpenChange), children: [
|
|
12074
|
+
/* @__PURE__ */ (0, import_jsx_runtime253.jsx)(import_react_popover2.Trigger, { asChild: true, children: trigger }),
|
|
12075
|
+
/* @__PURE__ */ (0, import_jsx_runtime253.jsx)(import_react_popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
|
|
12121
12076
|
StyledContent2,
|
|
12122
12077
|
{
|
|
12123
12078
|
$colorScheme: colorScheme,
|
|
@@ -12126,17 +12081,17 @@ var Popover2 = ({
|
|
|
12126
12081
|
$unstyled: unstyled,
|
|
12127
12082
|
style,
|
|
12128
12083
|
children: [
|
|
12129
|
-
!hideCloseButton && /* @__PURE__ */ (0,
|
|
12084
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(import_react_popover2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
|
|
12130
12085
|
IconButton,
|
|
12131
12086
|
{
|
|
12132
12087
|
"data-wui-popover-close": true,
|
|
12133
12088
|
label: "Close",
|
|
12134
12089
|
variant: "ghost",
|
|
12135
|
-
children: /* @__PURE__ */ (0,
|
|
12090
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Icon, { type: "close" })
|
|
12136
12091
|
}
|
|
12137
12092
|
) }),
|
|
12138
|
-
withArrow ? /* @__PURE__ */ (0,
|
|
12139
|
-
/* @__PURE__ */ (0,
|
|
12093
|
+
withArrow ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(PopoverArrow, { isAnimated }) : null,
|
|
12094
|
+
/* @__PURE__ */ (0, import_jsx_runtime253.jsx)("div", { children })
|
|
12140
12095
|
]
|
|
12141
12096
|
}
|
|
12142
12097
|
) })
|
|
@@ -12145,11 +12100,11 @@ var Popover2 = ({
|
|
|
12145
12100
|
Popover2.displayName = "Popover";
|
|
12146
12101
|
|
|
12147
12102
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
12148
|
-
var
|
|
12103
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
12149
12104
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
12150
12105
|
var import_type_guards47 = require("@wistia/type-guards");
|
|
12151
|
-
var
|
|
12152
|
-
var ProgressBarWrapper =
|
|
12106
|
+
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
12107
|
+
var ProgressBarWrapper = import_styled_components73.default.div`
|
|
12153
12108
|
--progress-bar-height: 8px;
|
|
12154
12109
|
--progress-bar-indicator-color: var(--wui-color-bg-fill);
|
|
12155
12110
|
--progress-bar-background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -12165,7 +12120,7 @@ var getTranslateValue = (progress, max) => {
|
|
|
12165
12120
|
const progressPercentage = progress / max * 100;
|
|
12166
12121
|
return `translateX(-${100 - progressPercentage}%)`;
|
|
12167
12122
|
};
|
|
12168
|
-
var ProgressBarLabel =
|
|
12123
|
+
var ProgressBarLabel = import_styled_components73.default.div`
|
|
12169
12124
|
display: flex;
|
|
12170
12125
|
line-height: var(--wui-typography-label-3-line-height);
|
|
12171
12126
|
font-size: var(--wui-typography-label-3-size);
|
|
@@ -12173,7 +12128,7 @@ var ProgressBarLabel = import_styled_components74.default.div`
|
|
|
12173
12128
|
color: var(--wui-color-text-secondary);
|
|
12174
12129
|
flex-shrink: 0;
|
|
12175
12130
|
`;
|
|
12176
|
-
var StyledProgressIndicator = (0,
|
|
12131
|
+
var StyledProgressIndicator = (0, import_styled_components73.default)(import_react_progress.Indicator)`
|
|
12177
12132
|
background-color: var(--progress-bar-indicator-color);
|
|
12178
12133
|
width: 100%;
|
|
12179
12134
|
height: 100%;
|
|
@@ -12182,7 +12137,7 @@ var StyledProgressIndicator = (0, import_styled_components74.default)(import_rea
|
|
|
12182
12137
|
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
12183
12138
|
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
12184
12139
|
`;
|
|
12185
|
-
var StyledProgressBar = (0,
|
|
12140
|
+
var StyledProgressBar = (0, import_styled_components73.default)(import_react_progress.Root)`
|
|
12186
12141
|
position: relative;
|
|
12187
12142
|
overflow: hidden;
|
|
12188
12143
|
background: var(--progress-bar-background-color);
|
|
@@ -12201,15 +12156,15 @@ var ProgressBar = ({
|
|
|
12201
12156
|
labelRight,
|
|
12202
12157
|
...props
|
|
12203
12158
|
}) => {
|
|
12204
|
-
return /* @__PURE__ */ (0,
|
|
12205
|
-
(0, import_type_guards47.isNotNil)(labelLeft) ? /* @__PURE__ */ (0,
|
|
12206
|
-
/* @__PURE__ */ (0,
|
|
12159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(ProgressBarWrapper, { children: [
|
|
12160
|
+
(0, import_type_guards47.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
|
|
12161
|
+
/* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
|
|
12207
12162
|
StyledProgressBar,
|
|
12208
12163
|
{
|
|
12209
12164
|
max,
|
|
12210
12165
|
value: progress,
|
|
12211
12166
|
...props,
|
|
12212
|
-
children: /* @__PURE__ */ (0,
|
|
12167
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
|
|
12213
12168
|
StyledProgressIndicator,
|
|
12214
12169
|
{
|
|
12215
12170
|
$max: max,
|
|
@@ -12218,17 +12173,17 @@ var ProgressBar = ({
|
|
|
12218
12173
|
)
|
|
12219
12174
|
}
|
|
12220
12175
|
),
|
|
12221
|
-
(0, import_type_guards47.isNotNil)(labelRight) ? /* @__PURE__ */ (0,
|
|
12176
|
+
(0, import_type_guards47.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(ProgressBarLabel, { children: labelRight }) : null
|
|
12222
12177
|
] });
|
|
12223
12178
|
};
|
|
12224
12179
|
ProgressBar.displayName = "ProgressBar";
|
|
12225
12180
|
|
|
12226
12181
|
// src/components/Radio/Radio.tsx
|
|
12227
12182
|
var import_react59 = require("react");
|
|
12228
|
-
var
|
|
12183
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
12229
12184
|
var import_type_guards48 = require("@wistia/type-guards");
|
|
12230
|
-
var
|
|
12231
|
-
var RadioIcon = () => /* @__PURE__ */ (0,
|
|
12185
|
+
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
12186
|
+
var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
|
|
12232
12187
|
"svg",
|
|
12233
12188
|
{
|
|
12234
12189
|
fill: "inherit",
|
|
@@ -12236,7 +12191,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
|
|
|
12236
12191
|
viewBox: "0 0 1 1",
|
|
12237
12192
|
width: "1",
|
|
12238
12193
|
xmlns: "http://www.w3.org/2000/svg",
|
|
12239
|
-
children: /* @__PURE__ */ (0,
|
|
12194
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
|
|
12240
12195
|
"circle",
|
|
12241
12196
|
{
|
|
12242
12197
|
cx: "0.5",
|
|
@@ -12247,7 +12202,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
|
|
|
12247
12202
|
)
|
|
12248
12203
|
}
|
|
12249
12204
|
);
|
|
12250
|
-
var sizeSmall2 =
|
|
12205
|
+
var sizeSmall2 = import_styled_components74.css`
|
|
12251
12206
|
width: 14px;
|
|
12252
12207
|
height: 14px;
|
|
12253
12208
|
min-width: 14px;
|
|
@@ -12258,7 +12213,7 @@ var sizeSmall2 = import_styled_components75.css`
|
|
|
12258
12213
|
height: 7px;
|
|
12259
12214
|
}
|
|
12260
12215
|
`;
|
|
12261
|
-
var sizeMedium2 =
|
|
12216
|
+
var sizeMedium2 = import_styled_components74.css`
|
|
12262
12217
|
width: 16px;
|
|
12263
12218
|
height: 16px;
|
|
12264
12219
|
min-width: 16px;
|
|
@@ -12269,7 +12224,7 @@ var sizeMedium2 = import_styled_components75.css`
|
|
|
12269
12224
|
height: 8px;
|
|
12270
12225
|
}
|
|
12271
12226
|
`;
|
|
12272
|
-
var sizeLarge2 =
|
|
12227
|
+
var sizeLarge2 = import_styled_components74.css`
|
|
12273
12228
|
width: 20px;
|
|
12274
12229
|
height: 20px;
|
|
12275
12230
|
min-width: 20px;
|
|
@@ -12285,14 +12240,14 @@ var getSizeCss2 = (size) => {
|
|
|
12285
12240
|
if (size === "lg") return sizeLarge2;
|
|
12286
12241
|
return sizeMedium2;
|
|
12287
12242
|
};
|
|
12288
|
-
var StyledRadioWrapper =
|
|
12243
|
+
var StyledRadioWrapper = import_styled_components74.default.div`
|
|
12289
12244
|
display: flex;
|
|
12290
12245
|
margin: 0;
|
|
12291
12246
|
|
|
12292
12247
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
12293
12248
|
user-select: none;
|
|
12294
12249
|
`;
|
|
12295
|
-
var StyledRadioInput =
|
|
12250
|
+
var StyledRadioInput = import_styled_components74.default.div`
|
|
12296
12251
|
${({ $size }) => getSizeCss2($size)}
|
|
12297
12252
|
line-height: 0;
|
|
12298
12253
|
margin: 0;
|
|
@@ -12314,7 +12269,7 @@ var StyledRadioInput = import_styled_components75.default.div`
|
|
|
12314
12269
|
}
|
|
12315
12270
|
}
|
|
12316
12271
|
`;
|
|
12317
|
-
var StyledHiddenRadioInput =
|
|
12272
|
+
var StyledHiddenRadioInput = import_styled_components74.default.input`
|
|
12318
12273
|
${visuallyHiddenStyle}
|
|
12319
12274
|
|
|
12320
12275
|
/* toggles display of faux-input border-color */
|
|
@@ -12349,13 +12304,13 @@ var Radio = (0, import_react59.forwardRef)(
|
|
|
12349
12304
|
const contextOnChange = radioGroupContext?.onChange;
|
|
12350
12305
|
const radioName = name ?? contextName;
|
|
12351
12306
|
const handleOnChange = onChange ?? contextOnChange;
|
|
12352
|
-
return /* @__PURE__ */ (0,
|
|
12307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
|
|
12353
12308
|
StyledRadioWrapper,
|
|
12354
12309
|
{
|
|
12355
12310
|
$disabled: disabled,
|
|
12356
12311
|
"aria-invalid": props["aria-invalid"],
|
|
12357
12312
|
children: [
|
|
12358
|
-
/* @__PURE__ */ (0,
|
|
12313
|
+
/* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
|
|
12359
12314
|
StyledHiddenRadioInput,
|
|
12360
12315
|
{
|
|
12361
12316
|
...props,
|
|
@@ -12370,16 +12325,16 @@ var Radio = (0, import_react59.forwardRef)(
|
|
|
12370
12325
|
value
|
|
12371
12326
|
}
|
|
12372
12327
|
),
|
|
12373
|
-
/* @__PURE__ */ (0,
|
|
12328
|
+
/* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
|
|
12374
12329
|
FormControlLabel,
|
|
12375
12330
|
{
|
|
12376
|
-
controlSlot: /* @__PURE__ */ (0,
|
|
12331
|
+
controlSlot: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
|
|
12377
12332
|
StyledRadioInput,
|
|
12378
12333
|
{
|
|
12379
12334
|
$disabled: disabled,
|
|
12380
12335
|
$size: size,
|
|
12381
12336
|
"data-wui-faux-input": "true",
|
|
12382
|
-
children: /* @__PURE__ */ (0,
|
|
12337
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(RadioIcon, {})
|
|
12383
12338
|
}
|
|
12384
12339
|
),
|
|
12385
12340
|
description,
|
|
@@ -12398,13 +12353,13 @@ Radio.displayName = "Radio";
|
|
|
12398
12353
|
|
|
12399
12354
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
12400
12355
|
var import_react62 = require("react");
|
|
12401
|
-
var
|
|
12356
|
+
var import_styled_components76 = __toESM(require("styled-components"));
|
|
12402
12357
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
12403
12358
|
var import_type_guards49 = require("@wistia/type-guards");
|
|
12404
12359
|
|
|
12405
12360
|
// src/components/SegmentedControl/useSelectedItemStyle.tsx
|
|
12406
12361
|
var import_react60 = require("react");
|
|
12407
|
-
var
|
|
12362
|
+
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
12408
12363
|
var SelectedItemStyleContext = (0, import_react60.createContext)(null);
|
|
12409
12364
|
var SelectedItemStyleProvider = ({
|
|
12410
12365
|
children
|
|
@@ -12427,7 +12382,7 @@ var SelectedItemStyleProvider = ({
|
|
|
12427
12382
|
}),
|
|
12428
12383
|
[selectedItemIndicatorStyle]
|
|
12429
12384
|
);
|
|
12430
|
-
return /* @__PURE__ */ (0,
|
|
12385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
|
|
12431
12386
|
};
|
|
12432
12387
|
var useSelectedItemStyle = () => {
|
|
12433
12388
|
const context = (0, import_react60.useContext)(SelectedItemStyleContext);
|
|
@@ -12438,7 +12393,7 @@ var useSelectedItemStyle = () => {
|
|
|
12438
12393
|
};
|
|
12439
12394
|
|
|
12440
12395
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
12441
|
-
var
|
|
12396
|
+
var import_styled_components75 = __toESM(require("styled-components"));
|
|
12442
12397
|
|
|
12443
12398
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
12444
12399
|
var import_react61 = require("react");
|
|
@@ -12453,8 +12408,8 @@ var useSegmentedControlValue = () => {
|
|
|
12453
12408
|
};
|
|
12454
12409
|
|
|
12455
12410
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
12456
|
-
var
|
|
12457
|
-
var SelectedItemIndicatorDiv =
|
|
12411
|
+
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
12412
|
+
var SelectedItemIndicatorDiv = import_styled_components75.default.div`
|
|
12458
12413
|
background-color: var(--wui-color-bg-fill-white);
|
|
12459
12414
|
border-radius: var(--wui-border-radius-rounded);
|
|
12460
12415
|
left: 0;
|
|
@@ -12472,12 +12427,12 @@ var SelectedItemIndicator = () => {
|
|
|
12472
12427
|
if (!selectedValue) {
|
|
12473
12428
|
return null;
|
|
12474
12429
|
}
|
|
12475
|
-
return /* @__PURE__ */ (0,
|
|
12430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
|
|
12476
12431
|
};
|
|
12477
12432
|
|
|
12478
12433
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
12479
|
-
var
|
|
12480
|
-
var segmentedControlStyles =
|
|
12434
|
+
var import_jsx_runtime258 = require("react/jsx-runtime");
|
|
12435
|
+
var segmentedControlStyles = import_styled_components76.css`
|
|
12481
12436
|
display: inline-flex;
|
|
12482
12437
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
12483
12438
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -12488,7 +12443,7 @@ var segmentedControlStyles = import_styled_components77.css`
|
|
|
12488
12443
|
position: relative;
|
|
12489
12444
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
12490
12445
|
`;
|
|
12491
|
-
var StyledSegmentedControl = (0,
|
|
12446
|
+
var StyledSegmentedControl = (0, import_styled_components76.default)(import_react_toggle_group.Root)`
|
|
12492
12447
|
${segmentedControlStyles}
|
|
12493
12448
|
`;
|
|
12494
12449
|
var SegmentedControl = (0, import_react62.forwardRef)(
|
|
@@ -12503,7 +12458,7 @@ var SegmentedControl = (0, import_react62.forwardRef)(
|
|
|
12503
12458
|
if ((0, import_type_guards49.isNil)(children)) {
|
|
12504
12459
|
return null;
|
|
12505
12460
|
}
|
|
12506
|
-
return /* @__PURE__ */ (0,
|
|
12461
|
+
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
|
|
12507
12462
|
StyledSegmentedControl,
|
|
12508
12463
|
{
|
|
12509
12464
|
ref,
|
|
@@ -12515,8 +12470,8 @@ var SegmentedControl = (0, import_react62.forwardRef)(
|
|
|
12515
12470
|
type: "single",
|
|
12516
12471
|
value: selectedValue,
|
|
12517
12472
|
...props,
|
|
12518
|
-
children: /* @__PURE__ */ (0,
|
|
12519
|
-
/* @__PURE__ */ (0,
|
|
12473
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(SelectedItemStyleProvider, { children: [
|
|
12474
|
+
/* @__PURE__ */ (0, import_jsx_runtime258.jsx)(SelectedItemIndicator, {}),
|
|
12520
12475
|
children
|
|
12521
12476
|
] }) })
|
|
12522
12477
|
}
|
|
@@ -12527,11 +12482,11 @@ SegmentedControl.displayName = "SegmentedControl";
|
|
|
12527
12482
|
|
|
12528
12483
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
12529
12484
|
var import_react63 = require("react");
|
|
12530
|
-
var
|
|
12485
|
+
var import_styled_components77 = __toESM(require("styled-components"));
|
|
12531
12486
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
12532
12487
|
var import_type_guards50 = require("@wistia/type-guards");
|
|
12533
|
-
var
|
|
12534
|
-
var segmentedControlItemStyles =
|
|
12488
|
+
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
12489
|
+
var segmentedControlItemStyles = import_styled_components77.css`
|
|
12535
12490
|
all: unset; /* ToggleGroupItem is a button element */
|
|
12536
12491
|
align-items: center;
|
|
12537
12492
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -12591,7 +12546,7 @@ var segmentedControlItemStyles = import_styled_components78.css`
|
|
|
12591
12546
|
}
|
|
12592
12547
|
}
|
|
12593
12548
|
`;
|
|
12594
|
-
var StyledSegmentedControlItem = (0,
|
|
12549
|
+
var StyledSegmentedControlItem = (0, import_styled_components77.default)(import_react_toggle_group2.Item)`
|
|
12595
12550
|
${segmentedControlItemStyles}
|
|
12596
12551
|
`;
|
|
12597
12552
|
var SegmentedControlItem = (0, import_react63.forwardRef)(
|
|
@@ -12632,7 +12587,7 @@ var SegmentedControlItem = (0, import_react63.forwardRef)(
|
|
|
12632
12587
|
resizeObserver.disconnect();
|
|
12633
12588
|
};
|
|
12634
12589
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
12635
|
-
return /* @__PURE__ */ (0,
|
|
12590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
|
|
12636
12591
|
StyledSegmentedControlItem,
|
|
12637
12592
|
{
|
|
12638
12593
|
ref: combinedRef,
|
|
@@ -12655,9 +12610,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
|
|
|
12655
12610
|
// src/components/Select/Select.tsx
|
|
12656
12611
|
var import_react_select = require("@radix-ui/react-select");
|
|
12657
12612
|
var import_react64 = require("react");
|
|
12658
|
-
var
|
|
12659
|
-
var
|
|
12660
|
-
var
|
|
12613
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
12614
|
+
var import_jsx_runtime260 = require("react/jsx-runtime");
|
|
12615
|
+
var StyledTrigger = (0, import_styled_components78.default)(import_react_select.Trigger)`
|
|
12661
12616
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12662
12617
|
${inputCss};
|
|
12663
12618
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -12701,7 +12656,7 @@ var StyledTrigger2 = (0, import_styled_components79.default)(import_react_select
|
|
|
12701
12656
|
color: var(--wui-input-placeholder);
|
|
12702
12657
|
}
|
|
12703
12658
|
`;
|
|
12704
|
-
var StyledContent3 = (0,
|
|
12659
|
+
var StyledContent3 = (0, import_styled_components78.default)(import_react_select.Content)`
|
|
12705
12660
|
--wui-select-content-border: var(--wui-color-border);
|
|
12706
12661
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
12707
12662
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -12729,22 +12684,22 @@ var Select = (0, import_react64.forwardRef)(
|
|
|
12729
12684
|
...props
|
|
12730
12685
|
}, forwardedRef) => {
|
|
12731
12686
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
12732
|
-
return /* @__PURE__ */ (0,
|
|
12687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
|
|
12733
12688
|
import_react_select.Root,
|
|
12734
12689
|
{
|
|
12735
12690
|
...props,
|
|
12736
12691
|
onValueChange: onChange,
|
|
12737
12692
|
children: [
|
|
12738
|
-
/* @__PURE__ */ (0,
|
|
12739
|
-
|
|
12693
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
|
|
12694
|
+
StyledTrigger,
|
|
12740
12695
|
{
|
|
12741
12696
|
ref: forwardedRef,
|
|
12742
12697
|
$colorScheme: colorScheme,
|
|
12743
12698
|
$fullWidth: responsiveFullWidth,
|
|
12744
12699
|
...props,
|
|
12745
12700
|
children: [
|
|
12746
|
-
/* @__PURE__ */ (0,
|
|
12747
|
-
/* @__PURE__ */ (0,
|
|
12701
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(import_react_select.Value, { placeholder }),
|
|
12702
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
|
|
12748
12703
|
Icon,
|
|
12749
12704
|
{
|
|
12750
12705
|
size: "md",
|
|
@@ -12754,10 +12709,10 @@ var Select = (0, import_react64.forwardRef)(
|
|
|
12754
12709
|
]
|
|
12755
12710
|
}
|
|
12756
12711
|
),
|
|
12757
|
-
/* @__PURE__ */ (0,
|
|
12758
|
-
/* @__PURE__ */ (0,
|
|
12759
|
-
/* @__PURE__ */ (0,
|
|
12760
|
-
/* @__PURE__ */ (0,
|
|
12712
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(StyledContent3, { position: "popper", children: [
|
|
12713
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Icon, { type: "caret-up" }) }),
|
|
12714
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(import_react_select.Viewport, { children }),
|
|
12715
|
+
/* @__PURE__ */ (0, import_jsx_runtime260.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Icon, { type: "caret-down" }) })
|
|
12761
12716
|
] }) })
|
|
12762
12717
|
]
|
|
12763
12718
|
}
|
|
@@ -12769,10 +12724,10 @@ Select.displayName = "Select";
|
|
|
12769
12724
|
// src/components/Select/SelectOption.tsx
|
|
12770
12725
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
12771
12726
|
var import_react65 = require("react");
|
|
12772
|
-
var
|
|
12727
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
12773
12728
|
var import_type_guards51 = require("@wistia/type-guards");
|
|
12774
|
-
var
|
|
12775
|
-
var StyledItem = (0,
|
|
12729
|
+
var import_jsx_runtime261 = require("react/jsx-runtime");
|
|
12730
|
+
var StyledItem = (0, import_styled_components79.default)(import_react_select2.Item)`
|
|
12776
12731
|
${variantStyleMap2.body3};
|
|
12777
12732
|
display: flex;
|
|
12778
12733
|
padding: var(--wui-select-option-padding);
|
|
@@ -12796,28 +12751,28 @@ var StyledItem = (0, import_styled_components80.default)(import_react_select2.It
|
|
|
12796
12751
|
background-color: transparent;
|
|
12797
12752
|
}
|
|
12798
12753
|
`;
|
|
12799
|
-
var StyledIconContainer =
|
|
12754
|
+
var StyledIconContainer = import_styled_components79.default.span`
|
|
12800
12755
|
width: 12px;
|
|
12801
12756
|
`;
|
|
12802
12757
|
var SelectOption = (0, import_react65.forwardRef)(
|
|
12803
12758
|
({ children, selectedDisplayValue, ...props }, forwardedRef) => {
|
|
12804
|
-
return /* @__PURE__ */ (0,
|
|
12759
|
+
return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
|
|
12805
12760
|
StyledItem,
|
|
12806
12761
|
{
|
|
12807
12762
|
...props,
|
|
12808
12763
|
ref: forwardedRef,
|
|
12809
12764
|
children: [
|
|
12810
|
-
/* @__PURE__ */ (0,
|
|
12765
|
+
/* @__PURE__ */ (0, import_jsx_runtime261.jsx)(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
|
|
12811
12766
|
Icon,
|
|
12812
12767
|
{
|
|
12813
12768
|
size: "sm",
|
|
12814
12769
|
type: "checkmark"
|
|
12815
12770
|
}
|
|
12816
12771
|
) }) }),
|
|
12817
|
-
(0, import_type_guards51.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0,
|
|
12772
|
+
(0, import_type_guards51.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)("div", { children: [
|
|
12818
12773
|
children,
|
|
12819
|
-
/* @__PURE__ */ (0,
|
|
12820
|
-
] }) : /* @__PURE__ */ (0,
|
|
12774
|
+
/* @__PURE__ */ (0, import_jsx_runtime261.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
12775
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(import_react_select2.ItemText, { children })
|
|
12821
12776
|
]
|
|
12822
12777
|
}
|
|
12823
12778
|
);
|
|
@@ -12827,14 +12782,14 @@ SelectOption.displayName = "SelectOption";
|
|
|
12827
12782
|
|
|
12828
12783
|
// src/components/Select/SelectOptionGroup.tsx
|
|
12829
12784
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
12830
|
-
var
|
|
12831
|
-
var
|
|
12832
|
-
var StyledLabel4 = (0,
|
|
12785
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
12786
|
+
var import_jsx_runtime262 = require("react/jsx-runtime");
|
|
12787
|
+
var StyledLabel4 = (0, import_styled_components80.default)(import_react_select3.Label)`
|
|
12833
12788
|
padding: var(--wui-select-option-padding);
|
|
12834
12789
|
`;
|
|
12835
12790
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
12836
|
-
return /* @__PURE__ */ (0,
|
|
12837
|
-
/* @__PURE__ */ (0,
|
|
12791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
12792
|
+
/* @__PURE__ */ (0, import_jsx_runtime262.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
|
|
12838
12793
|
Text,
|
|
12839
12794
|
{
|
|
12840
12795
|
prominence: "secondary",
|
|
@@ -12848,10 +12803,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
12848
12803
|
|
|
12849
12804
|
// src/components/Slider/Slider.tsx
|
|
12850
12805
|
var import_react_slider = require("@radix-ui/react-slider");
|
|
12851
|
-
var
|
|
12806
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
12852
12807
|
var import_type_guards52 = require("@wistia/type-guards");
|
|
12853
|
-
var
|
|
12854
|
-
var SliderContainer =
|
|
12808
|
+
var import_jsx_runtime263 = require("react/jsx-runtime");
|
|
12809
|
+
var SliderContainer = import_styled_components81.default.div`
|
|
12855
12810
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
12856
12811
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
12857
12812
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -12867,7 +12822,7 @@ var SliderContainer = import_styled_components82.default.div`
|
|
|
12867
12822
|
pointer-events: none;
|
|
12868
12823
|
}
|
|
12869
12824
|
`;
|
|
12870
|
-
var StyledSliderRoot = (0,
|
|
12825
|
+
var StyledSliderRoot = (0, import_styled_components81.default)(import_react_slider.Root)`
|
|
12871
12826
|
position: relative;
|
|
12872
12827
|
display: flex;
|
|
12873
12828
|
align-items: center;
|
|
@@ -12875,20 +12830,20 @@ var StyledSliderRoot = (0, import_styled_components82.default)(import_react_slid
|
|
|
12875
12830
|
touch-action: none;
|
|
12876
12831
|
width: 100%;
|
|
12877
12832
|
`;
|
|
12878
|
-
var StyledSliderTrack = (0,
|
|
12833
|
+
var StyledSliderTrack = (0, import_styled_components81.default)(import_react_slider.Track)`
|
|
12879
12834
|
background-color: var(--wui-slider-track-color);
|
|
12880
12835
|
border-radius: var(--wui-slider-track-border-radius);
|
|
12881
12836
|
flex-grow: 1;
|
|
12882
12837
|
height: 6px;
|
|
12883
12838
|
position: relative;
|
|
12884
12839
|
`;
|
|
12885
|
-
var StyledSliderRange = (0,
|
|
12840
|
+
var StyledSliderRange = (0, import_styled_components81.default)(import_react_slider.Range)`
|
|
12886
12841
|
background-color: var(--wui-slider-range-color);
|
|
12887
12842
|
border-radius: var(--wui-slider-track-border-radius);
|
|
12888
12843
|
height: 100%;
|
|
12889
12844
|
position: absolute;
|
|
12890
12845
|
`;
|
|
12891
|
-
var StyledSliderThumb = (0,
|
|
12846
|
+
var StyledSliderThumb = (0, import_styled_components81.default)(import_react_slider.Thumb)`
|
|
12892
12847
|
background-color: var(--wui-slider-thumb-color);
|
|
12893
12848
|
border-radius: var(--wui-border-radius-rounded);
|
|
12894
12849
|
cursor: grab;
|
|
@@ -12939,12 +12894,12 @@ var Slider = ({
|
|
|
12939
12894
|
onChange(newValue);
|
|
12940
12895
|
}
|
|
12941
12896
|
};
|
|
12942
|
-
return /* @__PURE__ */ (0,
|
|
12897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
|
|
12943
12898
|
SliderContainer,
|
|
12944
12899
|
{
|
|
12945
12900
|
...otherProps,
|
|
12946
12901
|
"data-testid": dataTestId,
|
|
12947
|
-
children: /* @__PURE__ */ (0,
|
|
12902
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
|
|
12948
12903
|
StyledSliderRoot,
|
|
12949
12904
|
{
|
|
12950
12905
|
"aria-label": ariaLabel,
|
|
@@ -12957,8 +12912,8 @@ var Slider = ({
|
|
|
12957
12912
|
step,
|
|
12958
12913
|
...value ? { value } : {},
|
|
12959
12914
|
children: [
|
|
12960
|
-
/* @__PURE__ */ (0,
|
|
12961
|
-
values.map((_, index) => /* @__PURE__ */ (0,
|
|
12915
|
+
/* @__PURE__ */ (0, import_jsx_runtime263.jsx)(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
|
|
12916
|
+
values.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
|
|
12962
12917
|
StyledSliderThumb,
|
|
12963
12918
|
{
|
|
12964
12919
|
"data-testid": `${dataTestId}-thumb-${index}`
|
|
@@ -12975,10 +12930,10 @@ Slider.displayName = "Slider";
|
|
|
12975
12930
|
|
|
12976
12931
|
// src/components/Switch/Switch.tsx
|
|
12977
12932
|
var import_react66 = require("react");
|
|
12978
|
-
var
|
|
12933
|
+
var import_styled_components82 = __toESM(require("styled-components"));
|
|
12979
12934
|
var import_type_guards53 = require("@wistia/type-guards");
|
|
12980
|
-
var
|
|
12981
|
-
var sizeSmall3 =
|
|
12935
|
+
var import_jsx_runtime264 = require("react/jsx-runtime");
|
|
12936
|
+
var sizeSmall3 = import_styled_components82.css`
|
|
12982
12937
|
--wui-size-small-width: 24px;
|
|
12983
12938
|
--wui-size-small-height: 14px;
|
|
12984
12939
|
|
|
@@ -12993,7 +12948,7 @@ var sizeSmall3 = import_styled_components83.css`
|
|
|
12993
12948
|
height: calc(var(--wui-size-small-width) / 2);
|
|
12994
12949
|
}
|
|
12995
12950
|
`;
|
|
12996
|
-
var sizeMedium3 =
|
|
12951
|
+
var sizeMedium3 = import_styled_components82.css`
|
|
12997
12952
|
--wui-size-medium-width: 32px;
|
|
12998
12953
|
--wui-size-medium-height: 18px;
|
|
12999
12954
|
|
|
@@ -13008,7 +12963,7 @@ var sizeMedium3 = import_styled_components83.css`
|
|
|
13008
12963
|
height: calc(var(--wui-size-medium-width) / 2);
|
|
13009
12964
|
}
|
|
13010
12965
|
`;
|
|
13011
|
-
var sizeLarge3 =
|
|
12966
|
+
var sizeLarge3 = import_styled_components82.css`
|
|
13012
12967
|
--wui-size-large-width: 40px;
|
|
13013
12968
|
--wui-size-large-height: 22px;
|
|
13014
12969
|
|
|
@@ -13028,14 +12983,14 @@ var getSizeCss3 = (size) => {
|
|
|
13028
12983
|
if (size === "lg") return sizeLarge3;
|
|
13029
12984
|
return sizeMedium3;
|
|
13030
12985
|
};
|
|
13031
|
-
var StyledSwitchWrapper =
|
|
12986
|
+
var StyledSwitchWrapper = import_styled_components82.default.div`
|
|
13032
12987
|
display: flex;
|
|
13033
12988
|
margin: 0;
|
|
13034
12989
|
|
|
13035
12990
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
13036
12991
|
user-select: none;
|
|
13037
12992
|
`;
|
|
13038
|
-
var StyledSwitchInput =
|
|
12993
|
+
var StyledSwitchInput = import_styled_components82.default.div`
|
|
13039
12994
|
${({ $size }) => getSizeCss3($size)}
|
|
13040
12995
|
line-height: 0;
|
|
13041
12996
|
margin: 0;
|
|
@@ -13063,7 +13018,7 @@ var StyledSwitchInput = import_styled_components83.default.div`
|
|
|
13063
13018
|
transition: all 0.2s ease-in-out;
|
|
13064
13019
|
}
|
|
13065
13020
|
`;
|
|
13066
|
-
var StyledHiddenSwitchInput =
|
|
13021
|
+
var StyledHiddenSwitchInput = import_styled_components82.default.input`
|
|
13067
13022
|
${visuallyHiddenStyle}
|
|
13068
13023
|
|
|
13069
13024
|
/* toggles display of faux-input background-color and toggle position */
|
|
@@ -13096,8 +13051,8 @@ var Switch = (0, import_react66.forwardRef)(
|
|
|
13096
13051
|
}, ref) => {
|
|
13097
13052
|
const generatedId = (0, import_react66.useId)();
|
|
13098
13053
|
const computedId = (0, import_type_guards53.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
|
|
13099
|
-
return /* @__PURE__ */ (0,
|
|
13100
|
-
/* @__PURE__ */ (0,
|
|
13054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
|
|
13055
|
+
/* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
|
|
13101
13056
|
StyledHiddenSwitchInput,
|
|
13102
13057
|
{
|
|
13103
13058
|
...props,
|
|
@@ -13112,10 +13067,10 @@ var Switch = (0, import_react66.forwardRef)(
|
|
|
13112
13067
|
value
|
|
13113
13068
|
}
|
|
13114
13069
|
),
|
|
13115
|
-
/* @__PURE__ */ (0,
|
|
13070
|
+
/* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
|
|
13116
13071
|
FormControlLabel,
|
|
13117
13072
|
{
|
|
13118
|
-
controlSlot: /* @__PURE__ */ (0,
|
|
13073
|
+
controlSlot: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
|
|
13119
13074
|
StyledSwitchInput,
|
|
13120
13075
|
{
|
|
13121
13076
|
$disabled: disabled,
|
|
@@ -13137,25 +13092,25 @@ var Switch = (0, import_react66.forwardRef)(
|
|
|
13137
13092
|
Switch.displayName = "Switch";
|
|
13138
13093
|
|
|
13139
13094
|
// src/components/Table/Table.tsx
|
|
13140
|
-
var
|
|
13141
|
-
var
|
|
13142
|
-
var StyledTable =
|
|
13095
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
13096
|
+
var import_jsx_runtime265 = require("react/jsx-runtime");
|
|
13097
|
+
var StyledTable = import_styled_components83.default.table`
|
|
13143
13098
|
width: 100%;
|
|
13144
13099
|
border-collapse: collapse;
|
|
13145
13100
|
|
|
13146
|
-
${({ $divided }) => $divided &&
|
|
13101
|
+
${({ $divided }) => $divided && import_styled_components83.css`
|
|
13147
13102
|
tr {
|
|
13148
13103
|
border-bottom: 1px solid var(--wui-color-border);
|
|
13149
13104
|
}
|
|
13150
13105
|
`}
|
|
13151
13106
|
|
|
13152
|
-
${({ $striped }) => $striped &&
|
|
13107
|
+
${({ $striped }) => $striped && import_styled_components83.css`
|
|
13153
13108
|
tbody tr:nth-child(even) {
|
|
13154
13109
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
13155
13110
|
}
|
|
13156
13111
|
`}
|
|
13157
13112
|
|
|
13158
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
13113
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components83.css`
|
|
13159
13114
|
thead {
|
|
13160
13115
|
${visuallyHiddenStyle}
|
|
13161
13116
|
}
|
|
@@ -13168,7 +13123,7 @@ var Table = ({
|
|
|
13168
13123
|
visuallyHiddenHeader = false,
|
|
13169
13124
|
...props
|
|
13170
13125
|
}) => {
|
|
13171
|
-
return /* @__PURE__ */ (0,
|
|
13126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
|
|
13172
13127
|
StyledTable,
|
|
13173
13128
|
{
|
|
13174
13129
|
$divided: divided,
|
|
@@ -13181,35 +13136,35 @@ var Table = ({
|
|
|
13181
13136
|
};
|
|
13182
13137
|
|
|
13183
13138
|
// src/components/Table/TableBody.tsx
|
|
13184
|
-
var
|
|
13139
|
+
var import_styled_components84 = __toESM(require("styled-components"));
|
|
13185
13140
|
|
|
13186
13141
|
// src/components/Table/TableSectionContext.ts
|
|
13187
13142
|
var import_react67 = require("react");
|
|
13188
13143
|
var TableSectionContext = (0, import_react67.createContext)(null);
|
|
13189
13144
|
|
|
13190
13145
|
// src/components/Table/TableBody.tsx
|
|
13191
|
-
var
|
|
13192
|
-
var StyledTableBody =
|
|
13146
|
+
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
13147
|
+
var StyledTableBody = import_styled_components84.default.tbody``;
|
|
13193
13148
|
var TableBody = ({ children, ...props }) => {
|
|
13194
|
-
return /* @__PURE__ */ (0,
|
|
13149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(StyledTableBody, { ...props, children }) });
|
|
13195
13150
|
};
|
|
13196
13151
|
|
|
13197
13152
|
// src/components/Table/TableCell.tsx
|
|
13198
13153
|
var import_react68 = require("react");
|
|
13199
|
-
var
|
|
13200
|
-
var
|
|
13201
|
-
var sharedStyles =
|
|
13154
|
+
var import_styled_components85 = __toESM(require("styled-components"));
|
|
13155
|
+
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
13156
|
+
var sharedStyles = import_styled_components85.css`
|
|
13202
13157
|
color: var(--wui-color-text);
|
|
13203
13158
|
padding: var(--wui-space-02);
|
|
13204
13159
|
text-align: left;
|
|
13205
13160
|
`;
|
|
13206
|
-
var StyledTh =
|
|
13161
|
+
var StyledTh = import_styled_components85.default.th`
|
|
13207
13162
|
${sharedStyles}
|
|
13208
13163
|
font-size: var(--wui-typography-body-4-size);
|
|
13209
13164
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
13210
13165
|
line-height: var(--wui-typography-body-4-line-height);
|
|
13211
13166
|
`;
|
|
13212
|
-
var StyledTd =
|
|
13167
|
+
var StyledTd = import_styled_components85.default.td`
|
|
13213
13168
|
${sharedStyles}
|
|
13214
13169
|
font-size: var(--wui-typography-body-2-size);
|
|
13215
13170
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -13218,33 +13173,33 @@ var StyledTd = import_styled_components86.default.td`
|
|
|
13218
13173
|
var TableCell = ({ children, ...props }) => {
|
|
13219
13174
|
const section = (0, import_react68.useContext)(TableSectionContext);
|
|
13220
13175
|
if (section === "head") {
|
|
13221
|
-
return /* @__PURE__ */ (0,
|
|
13176
|
+
return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(StyledTh, { ...props, children });
|
|
13222
13177
|
}
|
|
13223
|
-
return /* @__PURE__ */ (0,
|
|
13178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(StyledTd, { ...props, children });
|
|
13224
13179
|
};
|
|
13225
13180
|
|
|
13226
13181
|
// src/components/Table/TableFoot.tsx
|
|
13227
|
-
var
|
|
13228
|
-
var
|
|
13229
|
-
var StyledTableFoot =
|
|
13182
|
+
var import_styled_components86 = __toESM(require("styled-components"));
|
|
13183
|
+
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13184
|
+
var StyledTableFoot = import_styled_components86.default.tfoot``;
|
|
13230
13185
|
var TableFoot = ({ children, ...props }) => {
|
|
13231
|
-
return /* @__PURE__ */ (0,
|
|
13186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(StyledTableFoot, { ...props, children }) });
|
|
13232
13187
|
};
|
|
13233
13188
|
|
|
13234
13189
|
// src/components/Table/TableHead.tsx
|
|
13235
|
-
var
|
|
13236
|
-
var
|
|
13237
|
-
var StyledThead =
|
|
13190
|
+
var import_styled_components87 = __toESM(require("styled-components"));
|
|
13191
|
+
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
13192
|
+
var StyledThead = import_styled_components87.default.thead``;
|
|
13238
13193
|
var TableHead = ({ children, ...props }) => {
|
|
13239
|
-
return /* @__PURE__ */ (0,
|
|
13194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(StyledThead, { ...props, children }) });
|
|
13240
13195
|
};
|
|
13241
13196
|
|
|
13242
13197
|
// src/components/Table/TableRow.tsx
|
|
13243
|
-
var
|
|
13244
|
-
var
|
|
13245
|
-
var StyledTableRow =
|
|
13198
|
+
var import_styled_components88 = __toESM(require("styled-components"));
|
|
13199
|
+
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13200
|
+
var StyledTableRow = import_styled_components88.default.tr``;
|
|
13246
13201
|
var TableRow = ({ children, ...props }) => {
|
|
13247
|
-
return /* @__PURE__ */ (0,
|
|
13202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(StyledTableRow, { ...props, children });
|
|
13248
13203
|
};
|
|
13249
13204
|
|
|
13250
13205
|
// src/components/Tabs/Tabs.tsx
|
|
@@ -13265,7 +13220,7 @@ var useTabsValue = () => {
|
|
|
13265
13220
|
};
|
|
13266
13221
|
|
|
13267
13222
|
// src/components/Tabs/Tabs.tsx
|
|
13268
|
-
var
|
|
13223
|
+
var import_jsx_runtime271 = require("react/jsx-runtime");
|
|
13269
13224
|
var Tabs = ({
|
|
13270
13225
|
children,
|
|
13271
13226
|
value: valueProp,
|
|
@@ -13293,54 +13248,54 @@ var Tabs = ({
|
|
|
13293
13248
|
if ((0, import_type_guards54.isNotNil)(defaultValue)) {
|
|
13294
13249
|
rootProps.defaultValue = defaultValue;
|
|
13295
13250
|
}
|
|
13296
|
-
return /* @__PURE__ */ (0,
|
|
13251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(SelectedItemStyleProvider, { children }) }) });
|
|
13297
13252
|
};
|
|
13298
13253
|
Tabs.displayName = "Tabs";
|
|
13299
13254
|
|
|
13300
13255
|
// src/components/Tabs/TabsContent.tsx
|
|
13301
13256
|
var import_react_tabs2 = require("@radix-ui/react-tabs");
|
|
13302
|
-
var
|
|
13257
|
+
var import_jsx_runtime272 = require("react/jsx-runtime");
|
|
13303
13258
|
var TabsContent = ({ children, value }) => {
|
|
13304
|
-
return /* @__PURE__ */ (0,
|
|
13259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(import_react_tabs2.Content, { value, children });
|
|
13305
13260
|
};
|
|
13306
13261
|
TabsContent.displayName = "TabsContent";
|
|
13307
13262
|
|
|
13308
13263
|
// src/components/Tabs/TabsList.tsx
|
|
13309
13264
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
13310
|
-
var
|
|
13265
|
+
var import_styled_components90 = __toESM(require("styled-components"));
|
|
13311
13266
|
|
|
13312
13267
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
13313
|
-
var
|
|
13314
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
13268
|
+
var import_styled_components89 = __toESM(require("styled-components"));
|
|
13269
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components89.default)(SelectedItemIndicatorDiv)`
|
|
13315
13270
|
&:has(~ button[role='tab']:focus-visible) {
|
|
13316
13271
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
13317
13272
|
}
|
|
13318
13273
|
`;
|
|
13319
13274
|
|
|
13320
13275
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
13321
|
-
var
|
|
13276
|
+
var import_jsx_runtime273 = require("react/jsx-runtime");
|
|
13322
13277
|
var SelectedTabIndicator = () => {
|
|
13323
13278
|
const { selectedItemIndicatorStyle } = useSelectedItemStyle();
|
|
13324
13279
|
const selectedValue = useTabsValue();
|
|
13325
13280
|
if (selectedValue == null) {
|
|
13326
13281
|
return null;
|
|
13327
13282
|
}
|
|
13328
|
-
return /* @__PURE__ */ (0,
|
|
13283
|
+
return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
|
|
13329
13284
|
};
|
|
13330
13285
|
|
|
13331
13286
|
// src/components/Tabs/TabsList.tsx
|
|
13332
|
-
var
|
|
13333
|
-
var StyledRadixTabsList = (0,
|
|
13287
|
+
var import_jsx_runtime274 = require("react/jsx-runtime");
|
|
13288
|
+
var StyledRadixTabsList = (0, import_styled_components90.default)(import_react_tabs3.List)`
|
|
13334
13289
|
${segmentedControlStyles}
|
|
13335
13290
|
`;
|
|
13336
13291
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
13337
|
-
return /* @__PURE__ */ (0,
|
|
13292
|
+
return /* @__PURE__ */ (0, import_jsx_runtime274.jsxs)(
|
|
13338
13293
|
StyledRadixTabsList,
|
|
13339
13294
|
{
|
|
13340
13295
|
$fullWidth: fullWidth,
|
|
13341
13296
|
"aria-label": props["aria-label"],
|
|
13342
13297
|
children: [
|
|
13343
|
-
/* @__PURE__ */ (0,
|
|
13298
|
+
/* @__PURE__ */ (0, import_jsx_runtime274.jsx)(SelectedTabIndicator, {}),
|
|
13344
13299
|
children
|
|
13345
13300
|
]
|
|
13346
13301
|
}
|
|
@@ -13353,9 +13308,9 @@ var import_react71 = require("react");
|
|
|
13353
13308
|
var import_type_guards55 = require("@wistia/type-guards");
|
|
13354
13309
|
|
|
13355
13310
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
13356
|
-
var
|
|
13311
|
+
var import_styled_components91 = __toESM(require("styled-components"));
|
|
13357
13312
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
13358
|
-
var StyledRadixTabsTrigger = (0,
|
|
13313
|
+
var StyledRadixTabsTrigger = (0, import_styled_components91.default)(import_react_tabs4.Trigger)`
|
|
13359
13314
|
${segmentedControlItemStyles}
|
|
13360
13315
|
|
|
13361
13316
|
&:focus-visible {
|
|
@@ -13364,7 +13319,7 @@ var StyledRadixTabsTrigger = (0, import_styled_components92.default)(import_reac
|
|
|
13364
13319
|
`;
|
|
13365
13320
|
|
|
13366
13321
|
// src/components/Tabs/TabsTrigger.tsx
|
|
13367
|
-
var
|
|
13322
|
+
var import_jsx_runtime275 = require("react/jsx-runtime");
|
|
13368
13323
|
var TabsTrigger = (0, import_react71.forwardRef)(
|
|
13369
13324
|
({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
13370
13325
|
const selectedValue = useTabsValue();
|
|
@@ -13396,7 +13351,7 @@ var TabsTrigger = (0, import_react71.forwardRef)(
|
|
|
13396
13351
|
resizeObserver.disconnect();
|
|
13397
13352
|
};
|
|
13398
13353
|
}, [selectedValue, setSelectedItemMeasurements, value]);
|
|
13399
|
-
return /* @__PURE__ */ (0,
|
|
13354
|
+
return /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(
|
|
13400
13355
|
StyledRadixTabsTrigger,
|
|
13401
13356
|
{
|
|
13402
13357
|
...otherProps,
|
|
@@ -13416,10 +13371,10 @@ var TabsTrigger = (0, import_react71.forwardRef)(
|
|
|
13416
13371
|
TabsTrigger.displayName = "TabsTrigger";
|
|
13417
13372
|
|
|
13418
13373
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
13419
|
-
var
|
|
13374
|
+
var import_styled_components92 = __toESM(require("styled-components"));
|
|
13420
13375
|
var import_type_guards56 = require("@wistia/type-guards");
|
|
13421
|
-
var
|
|
13422
|
-
var StyledThumbnailBadge =
|
|
13376
|
+
var import_jsx_runtime276 = require("react/jsx-runtime");
|
|
13377
|
+
var StyledThumbnailBadge = import_styled_components92.default.div`
|
|
13423
13378
|
align-items: center;
|
|
13424
13379
|
background-color: rgb(0 0 0 / 50%);
|
|
13425
13380
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -13444,23 +13399,23 @@ var StyledThumbnailBadge = import_styled_components93.default.div`
|
|
|
13444
13399
|
}
|
|
13445
13400
|
`;
|
|
13446
13401
|
var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
13447
|
-
return /* @__PURE__ */ (0,
|
|
13402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime276.jsxs)(StyledThumbnailBadge, { ...props, children: [
|
|
13448
13403
|
(0, import_type_guards56.isNotNil)(icon) && icon,
|
|
13449
|
-
/* @__PURE__ */ (0,
|
|
13404
|
+
/* @__PURE__ */ (0, import_jsx_runtime276.jsx)("span", { children: label })
|
|
13450
13405
|
] });
|
|
13451
13406
|
};
|
|
13452
13407
|
ThumbnailBadge.displayName = "ThumbnailBadge";
|
|
13453
13408
|
|
|
13454
13409
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
13455
13410
|
var import_react72 = require("react");
|
|
13456
|
-
var
|
|
13411
|
+
var import_styled_components95 = __toESM(require("styled-components"));
|
|
13457
13412
|
var import_type_guards59 = require("@wistia/type-guards");
|
|
13458
13413
|
|
|
13459
13414
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
13460
13415
|
var import_type_guards57 = require("@wistia/type-guards");
|
|
13461
|
-
var
|
|
13416
|
+
var import_styled_components93 = require("styled-components");
|
|
13462
13417
|
var gradients = {
|
|
13463
|
-
defaultDarkOne:
|
|
13418
|
+
defaultDarkOne: import_styled_components93.css`
|
|
13464
13419
|
background-color: #222d66;
|
|
13465
13420
|
background-image:
|
|
13466
13421
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -13468,7 +13423,7 @@ var gradients = {
|
|
|
13468
13423
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
13469
13424
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
13470
13425
|
`,
|
|
13471
|
-
defaultDarkTwo:
|
|
13426
|
+
defaultDarkTwo: import_styled_components93.css`
|
|
13472
13427
|
background-color: #222d66;
|
|
13473
13428
|
background-image:
|
|
13474
13429
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -13476,7 +13431,7 @@ var gradients = {
|
|
|
13476
13431
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
13477
13432
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
13478
13433
|
`,
|
|
13479
|
-
defaultLightOne:
|
|
13434
|
+
defaultLightOne: import_styled_components93.css`
|
|
13480
13435
|
background-color: #ccd5ff;
|
|
13481
13436
|
background-image:
|
|
13482
13437
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -13484,13 +13439,13 @@ var gradients = {
|
|
|
13484
13439
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
13485
13440
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
13486
13441
|
`,
|
|
13487
|
-
defaultLightTwo:
|
|
13442
|
+
defaultLightTwo: import_styled_components93.css`
|
|
13488
13443
|
background-color: #ccd5ff;
|
|
13489
13444
|
background-image:
|
|
13490
13445
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
13491
13446
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
13492
13447
|
`,
|
|
13493
|
-
defaultMidOne:
|
|
13448
|
+
defaultMidOne: import_styled_components93.css`
|
|
13494
13449
|
background-color: #6b84ff;
|
|
13495
13450
|
background-image:
|
|
13496
13451
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -13498,13 +13453,13 @@ var gradients = {
|
|
|
13498
13453
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
13499
13454
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
13500
13455
|
`,
|
|
13501
|
-
defaultMidTwo:
|
|
13456
|
+
defaultMidTwo: import_styled_components93.css`
|
|
13502
13457
|
background-color: #6b84ff;
|
|
13503
13458
|
background-image:
|
|
13504
13459
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
13505
13460
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
13506
13461
|
`,
|
|
13507
|
-
green:
|
|
13462
|
+
green: import_styled_components93.css`
|
|
13508
13463
|
background-color: #fafffa;
|
|
13509
13464
|
background-image:
|
|
13510
13465
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -13512,7 +13467,7 @@ var gradients = {
|
|
|
13512
13467
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
13513
13468
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
13514
13469
|
`,
|
|
13515
|
-
greenWithPop:
|
|
13470
|
+
greenWithPop: import_styled_components93.css`
|
|
13516
13471
|
background-color: #fafffa;
|
|
13517
13472
|
background-image:
|
|
13518
13473
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -13520,7 +13475,7 @@ var gradients = {
|
|
|
13520
13475
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
13521
13476
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
13522
13477
|
`,
|
|
13523
|
-
pink:
|
|
13478
|
+
pink: import_styled_components93.css`
|
|
13524
13479
|
background-color: #fffff0;
|
|
13525
13480
|
background-image:
|
|
13526
13481
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -13528,7 +13483,7 @@ var gradients = {
|
|
|
13528
13483
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
13529
13484
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
13530
13485
|
`,
|
|
13531
|
-
pinkWithPop:
|
|
13486
|
+
pinkWithPop: import_styled_components93.css`
|
|
13532
13487
|
background-color: #fffff0;
|
|
13533
13488
|
background-image:
|
|
13534
13489
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -13536,7 +13491,7 @@ var gradients = {
|
|
|
13536
13491
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
13537
13492
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
13538
13493
|
`,
|
|
13539
|
-
playfulGradientOne:
|
|
13494
|
+
playfulGradientOne: import_styled_components93.css`
|
|
13540
13495
|
background-color: #f7f8ff;
|
|
13541
13496
|
background-image:
|
|
13542
13497
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -13544,7 +13499,7 @@ var gradients = {
|
|
|
13544
13499
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
13545
13500
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
13546
13501
|
`,
|
|
13547
|
-
playfulGradientTwo:
|
|
13502
|
+
playfulGradientTwo: import_styled_components93.css`
|
|
13548
13503
|
background-color: #f7f8ff;
|
|
13549
13504
|
background-image:
|
|
13550
13505
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -13552,13 +13507,13 @@ var gradients = {
|
|
|
13552
13507
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
13553
13508
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
13554
13509
|
`,
|
|
13555
|
-
purple:
|
|
13510
|
+
purple: import_styled_components93.css`
|
|
13556
13511
|
background-color: #f2caff;
|
|
13557
13512
|
background-image:
|
|
13558
13513
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
13559
13514
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
13560
13515
|
`,
|
|
13561
|
-
purpleWithPop:
|
|
13516
|
+
purpleWithPop: import_styled_components93.css`
|
|
13562
13517
|
background-color: #f2caff;
|
|
13563
13518
|
background-image:
|
|
13564
13519
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -13566,7 +13521,7 @@ var gradients = {
|
|
|
13566
13521
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
13567
13522
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
13568
13523
|
`,
|
|
13569
|
-
yellow:
|
|
13524
|
+
yellow: import_styled_components93.css`
|
|
13570
13525
|
background-color: #fffff0;
|
|
13571
13526
|
background-image:
|
|
13572
13527
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -13574,7 +13529,7 @@ var gradients = {
|
|
|
13574
13529
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
13575
13530
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
13576
13531
|
`,
|
|
13577
|
-
yellowWithPop:
|
|
13532
|
+
yellowWithPop: import_styled_components93.css`
|
|
13578
13533
|
background-color: #fffff0;
|
|
13579
13534
|
background-image:
|
|
13580
13535
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -13589,10 +13544,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
|
|
|
13589
13544
|
};
|
|
13590
13545
|
|
|
13591
13546
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
13592
|
-
var
|
|
13547
|
+
var import_styled_components94 = __toESM(require("styled-components"));
|
|
13593
13548
|
var import_type_guards58 = require("@wistia/type-guards");
|
|
13594
|
-
var
|
|
13595
|
-
var ScrubLine =
|
|
13549
|
+
var import_jsx_runtime277 = require("react/jsx-runtime");
|
|
13550
|
+
var ScrubLine = import_styled_components94.default.div`
|
|
13596
13551
|
position: absolute;
|
|
13597
13552
|
top: 0;
|
|
13598
13553
|
height: 100%;
|
|
@@ -13694,14 +13649,14 @@ var ThumbnailStoryboardViewer = ({
|
|
|
13694
13649
|
backgroundPosition,
|
|
13695
13650
|
backgroundSize
|
|
13696
13651
|
};
|
|
13697
|
-
return /* @__PURE__ */ (0,
|
|
13652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime277.jsxs)(
|
|
13698
13653
|
"div",
|
|
13699
13654
|
{
|
|
13700
13655
|
...props,
|
|
13701
13656
|
style: viewerStyles,
|
|
13702
13657
|
children: [
|
|
13703
|
-
/* @__PURE__ */ (0,
|
|
13704
|
-
showScrubLine ? /* @__PURE__ */ (0,
|
|
13658
|
+
/* @__PURE__ */ (0, import_jsx_runtime277.jsx)("div", { style: storyboardStyles }),
|
|
13659
|
+
showScrubLine ? /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
|
|
13705
13660
|
ScrubLine,
|
|
13706
13661
|
{
|
|
13707
13662
|
style: {
|
|
@@ -13715,20 +13670,20 @@ var ThumbnailStoryboardViewer = ({
|
|
|
13715
13670
|
};
|
|
13716
13671
|
|
|
13717
13672
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
13718
|
-
var
|
|
13719
|
-
var WideThumbnailImage =
|
|
13673
|
+
var import_jsx_runtime278 = require("react/jsx-runtime");
|
|
13674
|
+
var WideThumbnailImage = import_styled_components95.default.img`
|
|
13720
13675
|
height: 100%;
|
|
13721
13676
|
object-fit: cover;
|
|
13722
13677
|
width: 100%;
|
|
13723
13678
|
`;
|
|
13724
|
-
var SquareThumbnailImage =
|
|
13679
|
+
var SquareThumbnailImage = import_styled_components95.default.img`
|
|
13725
13680
|
backdrop-filter: blur(8px);
|
|
13726
13681
|
object-fit: contain;
|
|
13727
13682
|
width: 100%;
|
|
13728
13683
|
`;
|
|
13729
13684
|
var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
13730
13685
|
if (thumbnailImageType === "wide") {
|
|
13731
|
-
return /* @__PURE__ */ (0,
|
|
13686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
|
|
13732
13687
|
WideThumbnailImage,
|
|
13733
13688
|
{
|
|
13734
13689
|
alt: "",
|
|
@@ -13737,7 +13692,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
13737
13692
|
}
|
|
13738
13693
|
);
|
|
13739
13694
|
}
|
|
13740
|
-
return /* @__PURE__ */ (0,
|
|
13695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
|
|
13741
13696
|
SquareThumbnailImage,
|
|
13742
13697
|
{
|
|
13743
13698
|
alt: "",
|
|
@@ -13746,7 +13701,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
13746
13701
|
}
|
|
13747
13702
|
);
|
|
13748
13703
|
};
|
|
13749
|
-
var StyledThumbnail =
|
|
13704
|
+
var StyledThumbnail = import_styled_components95.default.div`
|
|
13750
13705
|
background-image: ${({ $backgroundUrl }) => (0, import_type_guards59.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
13751
13706
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
13752
13707
|
// if we don't have $backgroundUrl show a gradient
|
|
@@ -13840,7 +13795,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
|
|
|
13840
13795
|
} = storyboard;
|
|
13841
13796
|
const targetWidth = (0, import_type_guards59.isString)(width) ? parseInt(width, 10) : Number(width);
|
|
13842
13797
|
const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
|
|
13843
|
-
return /* @__PURE__ */ (0,
|
|
13798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
|
|
13844
13799
|
ThumbnailStoryboardViewer,
|
|
13845
13800
|
{
|
|
13846
13801
|
cursorPosition: effectiveCursorPosition,
|
|
@@ -13860,7 +13815,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
|
|
|
13860
13815
|
if (shouldRenderStoryboard) {
|
|
13861
13816
|
thumbnailContent = renderStoryboard();
|
|
13862
13817
|
} else if ((0, import_type_guards59.isNotNil)(thumbnailUrl)) {
|
|
13863
|
-
thumbnailContent = /* @__PURE__ */ (0,
|
|
13818
|
+
thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
|
|
13864
13819
|
ThumbnailImage,
|
|
13865
13820
|
{
|
|
13866
13821
|
thumbnailImageType,
|
|
@@ -13870,7 +13825,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
|
|
|
13870
13825
|
} else {
|
|
13871
13826
|
thumbnailContent = null;
|
|
13872
13827
|
}
|
|
13873
|
-
return /* @__PURE__ */ (0,
|
|
13828
|
+
return /* @__PURE__ */ (0, import_jsx_runtime278.jsxs)(
|
|
13874
13829
|
StyledThumbnail,
|
|
13875
13830
|
{
|
|
13876
13831
|
ref,
|
|
@@ -13895,13 +13850,13 @@ Thumbnail.displayName = "Thumbnail";
|
|
|
13895
13850
|
|
|
13896
13851
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
13897
13852
|
var import_react73 = __toESM(require("react"));
|
|
13898
|
-
var
|
|
13853
|
+
var import_styled_components96 = __toESM(require("styled-components"));
|
|
13899
13854
|
var import_type_guards60 = require("@wistia/type-guards");
|
|
13900
|
-
var
|
|
13855
|
+
var import_jsx_runtime279 = (
|
|
13901
13856
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
13902
13857
|
require("react/jsx-runtime")
|
|
13903
13858
|
);
|
|
13904
|
-
var StyledThumbnailCollage =
|
|
13859
|
+
var StyledThumbnailCollage = import_styled_components96.default.div`
|
|
13905
13860
|
display: grid;
|
|
13906
13861
|
gap: var(--wui-space-01);
|
|
13907
13862
|
width: 100%;
|
|
@@ -13982,7 +13937,7 @@ var ThumbnailCollage = ({
|
|
|
13982
13937
|
children: void 0
|
|
13983
13938
|
});
|
|
13984
13939
|
}) : [
|
|
13985
|
-
/* @__PURE__ */ (0,
|
|
13940
|
+
/* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
|
|
13986
13941
|
Thumbnail,
|
|
13987
13942
|
{
|
|
13988
13943
|
gradientBackground,
|
|
@@ -13991,7 +13946,7 @@ var ThumbnailCollage = ({
|
|
|
13991
13946
|
"fallback"
|
|
13992
13947
|
)
|
|
13993
13948
|
];
|
|
13994
|
-
return /* @__PURE__ */ (0,
|
|
13949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
|
|
13995
13950
|
StyledThumbnailCollage,
|
|
13996
13951
|
{
|
|
13997
13952
|
$gradientBackground: gradientBackground,
|
|
@@ -14003,26 +13958,26 @@ var ThumbnailCollage = ({
|
|
|
14003
13958
|
};
|
|
14004
13959
|
|
|
14005
13960
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
14006
|
-
var
|
|
13961
|
+
var import_styled_components97 = __toESM(require("styled-components"));
|
|
14007
13962
|
var import_type_guards61 = require("@wistia/type-guards");
|
|
14008
|
-
var
|
|
13963
|
+
var import_jsx_runtime280 = require("react/jsx-runtime");
|
|
14009
13964
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
14010
13965
|
if (iconOnly) {
|
|
14011
|
-
return /* @__PURE__ */ (0,
|
|
13966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
|
|
14012
13967
|
"g",
|
|
14013
13968
|
{
|
|
14014
13969
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
14015
13970
|
fill: brandmarkColor,
|
|
14016
|
-
children: /* @__PURE__ */ (0,
|
|
13971
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime280.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
14017
13972
|
}
|
|
14018
13973
|
);
|
|
14019
13974
|
}
|
|
14020
|
-
return /* @__PURE__ */ (0,
|
|
13975
|
+
return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
|
|
14021
13976
|
"g",
|
|
14022
13977
|
{
|
|
14023
13978
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
14024
13979
|
fill: brandmarkColor,
|
|
14025
|
-
children: /* @__PURE__ */ (0,
|
|
13980
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime280.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
14026
13981
|
}
|
|
14027
13982
|
);
|
|
14028
13983
|
};
|
|
@@ -14030,12 +13985,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
14030
13985
|
if (iconOnly) {
|
|
14031
13986
|
return null;
|
|
14032
13987
|
}
|
|
14033
|
-
return /* @__PURE__ */ (0,
|
|
13988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
|
|
14034
13989
|
"g",
|
|
14035
13990
|
{
|
|
14036
13991
|
"data-testid": "ui-wistia-logo-logotype",
|
|
14037
13992
|
fill: logotypeColor,
|
|
14038
|
-
children: /* @__PURE__ */ (0,
|
|
13993
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime280.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
|
|
14039
13994
|
}
|
|
14040
13995
|
);
|
|
14041
13996
|
};
|
|
@@ -14045,7 +14000,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
14045
14000
|
}
|
|
14046
14001
|
return "0 0 144 31.47";
|
|
14047
14002
|
};
|
|
14048
|
-
var WistiaLogoComponent =
|
|
14003
|
+
var WistiaLogoComponent = import_styled_components97.default.svg`
|
|
14049
14004
|
height: ${({ height }) => `${height}px`};
|
|
14050
14005
|
|
|
14051
14006
|
/* ensure it will always fit on mobile */
|
|
@@ -14061,12 +14016,12 @@ var WistiaLogoComponent = import_styled_components98.default.svg`
|
|
|
14061
14016
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
14062
14017
|
if ($opticallyCentered) {
|
|
14063
14018
|
if ($iconOnly) {
|
|
14064
|
-
return
|
|
14019
|
+
return import_styled_components97.css`
|
|
14065
14020
|
aspect-ratio: 1;
|
|
14066
14021
|
padding: 11.85% 3.12% 13.91%;
|
|
14067
14022
|
`;
|
|
14068
14023
|
}
|
|
14069
|
-
return
|
|
14024
|
+
return import_styled_components97.css`
|
|
14070
14025
|
aspect-ratio: 127 / 32;
|
|
14071
14026
|
`;
|
|
14072
14027
|
}
|
|
@@ -14103,7 +14058,7 @@ var WistiaLogo = ({
|
|
|
14103
14058
|
};
|
|
14104
14059
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
14105
14060
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
14106
|
-
const Logo = /* @__PURE__ */ (0,
|
|
14061
|
+
const Logo = /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
|
|
14107
14062
|
WistiaLogoComponent,
|
|
14108
14063
|
{
|
|
14109
14064
|
$hoverColor: hoverColor,
|
|
@@ -14116,14 +14071,14 @@ var WistiaLogo = ({
|
|
|
14116
14071
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14117
14072
|
...props,
|
|
14118
14073
|
children: [
|
|
14119
|
-
/* @__PURE__ */ (0,
|
|
14120
|
-
(0, import_type_guards61.isNotNil)(description) ? /* @__PURE__ */ (0,
|
|
14074
|
+
/* @__PURE__ */ (0, import_jsx_runtime280.jsx)("title", { children: title }),
|
|
14075
|
+
(0, import_type_guards61.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime280.jsx)("desc", { children: description }) : null,
|
|
14121
14076
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
14122
14077
|
renderLogotype(logotypeColor, iconOnly)
|
|
14123
14078
|
]
|
|
14124
14079
|
}
|
|
14125
14080
|
);
|
|
14126
|
-
return href !== void 0 ? /* @__PURE__ */ (0,
|
|
14081
|
+
return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime280.jsx)("a", { href, children: Logo }) : Logo;
|
|
14127
14082
|
};
|
|
14128
14083
|
WistiaLogo.displayName = "WistiaLogo";
|
|
14129
14084
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -14145,7 +14100,6 @@ WistiaLogo.displayName = "WistiaLogo";
|
|
|
14145
14100
|
Collapsible,
|
|
14146
14101
|
CollapsibleContent,
|
|
14147
14102
|
CollapsibleTrigger,
|
|
14148
|
-
CollapsibleTriggerIcon,
|
|
14149
14103
|
ColorSchemeWrapper,
|
|
14150
14104
|
Combobox,
|
|
14151
14105
|
ComboboxOption,
|