@wistia/ui 0.26.5 → 0.26.6-beta.4fcdf0a7.d70cf12
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.d.ts +95 -24
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +228 -178
- package/dist/index.js.map +1 -1
- package/package.json +16 -16
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.26.
|
|
3
|
+
* @license @wistia/ui v0.26.6-beta.4fcdf0a7.d70cf12
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
|
|
11
11
|
import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
|
|
12
12
|
import { createGlobalStyle, css, keyframes, styled } from "styled-components";
|
|
13
|
-
import { isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
|
|
13
|
+
import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
|
|
14
14
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
15
15
|
import { Toaster, toast } from "sonner";
|
|
16
16
|
import { isValid } from "date-fns/isValid";
|
|
@@ -519,13 +519,6 @@ const buildTimeDuration = (numberOfMilliseconds) => {
|
|
|
519
519
|
};
|
|
520
520
|
};
|
|
521
521
|
//#endregion
|
|
522
|
-
//#region src/helpers/dateTime/isDate.ts
|
|
523
|
-
/**
|
|
524
|
-
* @param {*} date - possible date value - unknown type
|
|
525
|
-
* @returns {boolean} - whether it is a date object
|
|
526
|
-
*/
|
|
527
|
-
const isDate = (date) => date instanceof Date;
|
|
528
|
-
//#endregion
|
|
529
522
|
//#region src/helpers/dateTime/isInvalidDate.ts
|
|
530
523
|
/**
|
|
531
524
|
* @param {*} date - a Date object - could be unknown though
|
|
@@ -1093,17 +1086,6 @@ const dateTime = {
|
|
|
1093
1086
|
timeOnlyString
|
|
1094
1087
|
};
|
|
1095
1088
|
//#endregion
|
|
1096
|
-
//#region src/helpers/mergeRefs/mergeRefs.ts
|
|
1097
|
-
const mergeRefs = (refs) => (value) => {
|
|
1098
|
-
refs.forEach((ref) => {
|
|
1099
|
-
if (isFunction(ref)) {
|
|
1100
|
-
ref(value);
|
|
1101
|
-
return;
|
|
1102
|
-
}
|
|
1103
|
-
if (isNotNil(ref)) ref.current = value;
|
|
1104
|
-
});
|
|
1105
|
-
};
|
|
1106
|
-
//#endregion
|
|
1107
1089
|
//#region src/helpers/isUrl/isUrl.ts
|
|
1108
1090
|
/**
|
|
1109
1091
|
* Loosely validates a URL string
|
|
@@ -1123,6 +1105,167 @@ const isUrl = (str) => {
|
|
|
1123
1105
|
return localhostDomain.test(remaining) || nonLocalhostDomain.test(remaining);
|
|
1124
1106
|
};
|
|
1125
1107
|
//#endregion
|
|
1108
|
+
//#region src/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
1109
|
+
const gradients = {
|
|
1110
|
+
defaultDarkOne: css`
|
|
1111
|
+
background-color: #222d66;
|
|
1112
|
+
background-image:
|
|
1113
|
+
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
1114
|
+
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
1115
|
+
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
1116
|
+
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
1117
|
+
`,
|
|
1118
|
+
defaultDarkTwo: css`
|
|
1119
|
+
background-color: #222d66;
|
|
1120
|
+
background-image:
|
|
1121
|
+
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
1122
|
+
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%),
|
|
1123
|
+
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
1124
|
+
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
1125
|
+
`,
|
|
1126
|
+
defaultLightOne: css`
|
|
1127
|
+
background-color: #ccd5ff;
|
|
1128
|
+
background-image:
|
|
1129
|
+
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
1130
|
+
radial-gradient(farthest-corner at top left, #ccd5ff, transparent 65%),
|
|
1131
|
+
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
1132
|
+
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
1133
|
+
`,
|
|
1134
|
+
defaultLightTwo: css`
|
|
1135
|
+
background-color: #ccd5ff;
|
|
1136
|
+
background-image:
|
|
1137
|
+
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
1138
|
+
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
1139
|
+
`,
|
|
1140
|
+
defaultMidOne: css`
|
|
1141
|
+
background-color: #6b84ff;
|
|
1142
|
+
background-image:
|
|
1143
|
+
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
1144
|
+
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
1145
|
+
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
1146
|
+
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
1147
|
+
`,
|
|
1148
|
+
defaultMidTwo: css`
|
|
1149
|
+
background-color: #6b84ff;
|
|
1150
|
+
background-image:
|
|
1151
|
+
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
1152
|
+
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
1153
|
+
`,
|
|
1154
|
+
green: css`
|
|
1155
|
+
background-color: #fafffa;
|
|
1156
|
+
background-image:
|
|
1157
|
+
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
1158
|
+
radial-gradient(farthest-corner at top right, #268713, transparent 50%),
|
|
1159
|
+
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
1160
|
+
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
1161
|
+
`,
|
|
1162
|
+
greenWithPop: css`
|
|
1163
|
+
background-color: #fafffa;
|
|
1164
|
+
background-image:
|
|
1165
|
+
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
1166
|
+
radial-gradient(farthest-corner at top right, #2949e5, transparent 50%),
|
|
1167
|
+
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
1168
|
+
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
1169
|
+
`,
|
|
1170
|
+
pink: css`
|
|
1171
|
+
background-color: #fffff0;
|
|
1172
|
+
background-image:
|
|
1173
|
+
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
1174
|
+
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
1175
|
+
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
1176
|
+
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
1177
|
+
`,
|
|
1178
|
+
pinkWithPop: css`
|
|
1179
|
+
background-color: #fffff0;
|
|
1180
|
+
background-image:
|
|
1181
|
+
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
1182
|
+
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
1183
|
+
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
1184
|
+
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
1185
|
+
`,
|
|
1186
|
+
playfulGradientOne: css`
|
|
1187
|
+
background-color: #f7f8ff;
|
|
1188
|
+
background-image:
|
|
1189
|
+
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
1190
|
+
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
1191
|
+
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
1192
|
+
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
1193
|
+
`,
|
|
1194
|
+
playfulGradientTwo: css`
|
|
1195
|
+
background-color: #f7f8ff;
|
|
1196
|
+
background-image:
|
|
1197
|
+
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
1198
|
+
radial-gradient(farthest-corner at bottom right, #eff18d, transparent 50%),
|
|
1199
|
+
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
1200
|
+
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
1201
|
+
`,
|
|
1202
|
+
purple: css`
|
|
1203
|
+
background-color: #f2caff;
|
|
1204
|
+
background-image:
|
|
1205
|
+
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
1206
|
+
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
1207
|
+
`,
|
|
1208
|
+
purpleWithPop: css`
|
|
1209
|
+
background-color: #f2caff;
|
|
1210
|
+
background-image:
|
|
1211
|
+
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
1212
|
+
radial-gradient(farthest-corner at top left, #d65cff, transparent 65%),
|
|
1213
|
+
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
1214
|
+
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
1215
|
+
`,
|
|
1216
|
+
yellow: css`
|
|
1217
|
+
background-color: #fffff0;
|
|
1218
|
+
background-image:
|
|
1219
|
+
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
1220
|
+
radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
|
|
1221
|
+
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
1222
|
+
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
1223
|
+
`,
|
|
1224
|
+
yellowWithPop: css`
|
|
1225
|
+
background-color: #fffff0;
|
|
1226
|
+
background-image:
|
|
1227
|
+
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
1228
|
+
radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
|
|
1229
|
+
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
1230
|
+
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 55%);
|
|
1231
|
+
`
|
|
1232
|
+
};
|
|
1233
|
+
const gradientMap = Object.keys(gradients);
|
|
1234
|
+
/**
|
|
1235
|
+
* Retrieves the CSS background gradient corresponding to the given gradient name.
|
|
1236
|
+
* If the specified gradient name is not found, the default gradient ('defaultDarkOne') is returned.
|
|
1237
|
+
* @param {GradientName} gradientName - The name of the gradient to retrieve.
|
|
1238
|
+
* @returns {CssStyleType} The CSS string representing the specified gradient.
|
|
1239
|
+
*/
|
|
1240
|
+
const getBackgroundGradient = (gradientName) => {
|
|
1241
|
+
return isNotNil(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
|
|
1242
|
+
};
|
|
1243
|
+
//#endregion
|
|
1244
|
+
//#region src/helpers/getBackgroundGradient/getSemiRandomBackgroundGradient.ts
|
|
1245
|
+
const MULTIPLIER = 31;
|
|
1246
|
+
/**
|
|
1247
|
+
* Retrieves a semi-random background gradient based on the given id.
|
|
1248
|
+
*
|
|
1249
|
+
* @param {string} id - The id to use to generate the semi-random background gradient.
|
|
1250
|
+
* @returns {GradientName} gradientName
|
|
1251
|
+
*/
|
|
1252
|
+
const getSemiRandomBackgroundGradient = (id) => {
|
|
1253
|
+
if (!(typeof id === "string" && id)) return gradientMap[0];
|
|
1254
|
+
const hashCode = Array.from(id).reduce((num, char) => Math.imul(MULTIPLIER, num) + char.charCodeAt(0) || 0, 0);
|
|
1255
|
+
return gradientMap[Math.abs(hashCode) % gradientMap.length];
|
|
1256
|
+
};
|
|
1257
|
+
//#endregion
|
|
1258
|
+
//#region src/helpers/mergeRefs/mergeRefs.ts
|
|
1259
|
+
const mergeRefs = (refs) => (value) => {
|
|
1260
|
+
refs.forEach((ref) => {
|
|
1261
|
+
if (isFunction(ref)) {
|
|
1262
|
+
ref(value);
|
|
1263
|
+
return;
|
|
1264
|
+
}
|
|
1265
|
+
if (isNotNil(ref)) ref.current = value;
|
|
1266
|
+
});
|
|
1267
|
+
};
|
|
1268
|
+
//#endregion
|
|
1126
1269
|
//#region src/css/breakpoints.ts
|
|
1127
1270
|
const breakpoints = {
|
|
1128
1271
|
xs: "0em",
|
|
@@ -6085,7 +6228,7 @@ const StyledBoxComponent = styled.div`
|
|
|
6085
6228
|
flex-shrink: ${({ $shrink }) => isNotNil($shrink) ? $shrink : null};
|
|
6086
6229
|
order: ${({ $order }) => isNotNil($order) ? $order : null};
|
|
6087
6230
|
`;
|
|
6088
|
-
const DEFAULT_ELEMENT$
|
|
6231
|
+
const DEFAULT_ELEMENT$5 = "div";
|
|
6089
6232
|
const BoxComponent = forwardRef(({ alignContent = "stretch", alignItems = "flex-start", alignSelf, basis, children, direction = "row", fill = false, fillViewport = false, gap, grow, height, inline = false, justifyContent = "flex-start", order, renderAs, shrink, width, wrapItems = false, flexMode, ...props }, ref) => {
|
|
6090
6233
|
const responsiveAlignContent = useResponsiveProp(alignContent);
|
|
6091
6234
|
const responsiveAlignItems = useResponsiveProp(alignItems);
|
|
@@ -6129,7 +6272,7 @@ const BoxComponent = forwardRef(({ alignContent = "stretch", alignItems = "flex-
|
|
|
6129
6272
|
$shrink: responsiveShrink,
|
|
6130
6273
|
$width: responsiveWidth,
|
|
6131
6274
|
$wrapItems: responsiveWrapItems,
|
|
6132
|
-
as: renderAs ?? DEFAULT_ELEMENT$
|
|
6275
|
+
as: renderAs ?? DEFAULT_ELEMENT$5,
|
|
6133
6276
|
...props,
|
|
6134
6277
|
children
|
|
6135
6278
|
});
|
|
@@ -6209,7 +6352,7 @@ const variantStyleMap$1 = {
|
|
|
6209
6352
|
--line-height: var(--wui-typography-heading-6-line-height);
|
|
6210
6353
|
`
|
|
6211
6354
|
};
|
|
6212
|
-
const DEFAULT_ELEMENT$
|
|
6355
|
+
const DEFAULT_ELEMENT$4 = "h1";
|
|
6213
6356
|
const StyledHeading$1 = styled.div`
|
|
6214
6357
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
6215
6358
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
@@ -6245,8 +6388,8 @@ const StyledHeading$1 = styled.div`
|
|
|
6245
6388
|
${iconInlineStyle}
|
|
6246
6389
|
`;
|
|
6247
6390
|
const variantElementMap$1 = {
|
|
6248
|
-
hero: DEFAULT_ELEMENT$
|
|
6249
|
-
heading1: DEFAULT_ELEMENT$
|
|
6391
|
+
hero: DEFAULT_ELEMENT$4,
|
|
6392
|
+
heading1: DEFAULT_ELEMENT$4,
|
|
6250
6393
|
heading2: "h2",
|
|
6251
6394
|
heading3: "h3",
|
|
6252
6395
|
heading4: "h4",
|
|
@@ -6265,7 +6408,7 @@ const HeadingComponent = forwardRef(({ align = "left", children, colorScheme = "
|
|
|
6265
6408
|
$preventUserSelect: preventUserSelect,
|
|
6266
6409
|
$prominence: prominence,
|
|
6267
6410
|
$variant: variant,
|
|
6268
|
-
as: renderAs ?? variantElementMap$1[variant] ?? DEFAULT_ELEMENT$
|
|
6411
|
+
as: renderAs ?? variantElementMap$1[variant] ?? DEFAULT_ELEMENT$4,
|
|
6269
6412
|
...props,
|
|
6270
6413
|
children: processedChildren
|
|
6271
6414
|
});
|
|
@@ -6385,16 +6528,16 @@ const variantStyleMap = {
|
|
|
6385
6528
|
};
|
|
6386
6529
|
const bodyElement = "p";
|
|
6387
6530
|
const labelElement = "span";
|
|
6388
|
-
const DEFAULT_ELEMENT$
|
|
6531
|
+
const DEFAULT_ELEMENT$3 = bodyElement;
|
|
6389
6532
|
const variantElementMap = {
|
|
6390
|
-
body1: DEFAULT_ELEMENT$
|
|
6391
|
-
body2: DEFAULT_ELEMENT$
|
|
6392
|
-
body3: DEFAULT_ELEMENT$
|
|
6393
|
-
body4: DEFAULT_ELEMENT$
|
|
6394
|
-
body1Mono: DEFAULT_ELEMENT$
|
|
6395
|
-
body2Mono: DEFAULT_ELEMENT$
|
|
6396
|
-
body3Mono: DEFAULT_ELEMENT$
|
|
6397
|
-
body4Mono: DEFAULT_ELEMENT$
|
|
6533
|
+
body1: DEFAULT_ELEMENT$3,
|
|
6534
|
+
body2: DEFAULT_ELEMENT$3,
|
|
6535
|
+
body3: DEFAULT_ELEMENT$3,
|
|
6536
|
+
body4: DEFAULT_ELEMENT$3,
|
|
6537
|
+
body1Mono: DEFAULT_ELEMENT$3,
|
|
6538
|
+
body2Mono: DEFAULT_ELEMENT$3,
|
|
6539
|
+
body3Mono: DEFAULT_ELEMENT$3,
|
|
6540
|
+
body4Mono: DEFAULT_ELEMENT$3,
|
|
6398
6541
|
label1: labelElement,
|
|
6399
6542
|
label2: labelElement,
|
|
6400
6543
|
label3: labelElement,
|
|
@@ -6456,7 +6599,7 @@ const TextComponent = forwardRef(({ align = "left", children, colorScheme = "inh
|
|
|
6456
6599
|
$preventUserSelect: preventUserSelect,
|
|
6457
6600
|
$prominence: prominence,
|
|
6458
6601
|
$variant: variant,
|
|
6459
|
-
as: renderAs ?? variantElementMap[variant] ?? DEFAULT_ELEMENT$
|
|
6602
|
+
as: renderAs ?? variantElementMap[variant] ?? DEFAULT_ELEMENT$3,
|
|
6460
6603
|
...props,
|
|
6461
6604
|
children: processedChildren
|
|
6462
6605
|
});
|
|
@@ -6879,7 +7022,7 @@ const FormControlLabel = ({ align = "left", label, description, disabled = false
|
|
|
6879
7022
|
FormControlLabel.displayName = "FormControlLabel";
|
|
6880
7023
|
//#endregion
|
|
6881
7024
|
//#region src/components/Stack/Stack.tsx
|
|
6882
|
-
const DEFAULT_ELEMENT$
|
|
7025
|
+
const DEFAULT_ELEMENT$2 = "div";
|
|
6883
7026
|
const StyledStack = styled.div`
|
|
6884
7027
|
display: flex;
|
|
6885
7028
|
flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
|
|
@@ -6898,7 +7041,7 @@ const StackComponent = forwardRef(({ renderAs, direction = "vertical", gap = "sp
|
|
|
6898
7041
|
$gap: responsiveGap,
|
|
6899
7042
|
$paddingX: useResponsiveProp(padding?.x),
|
|
6900
7043
|
$paddingY: useResponsiveProp(padding?.y),
|
|
6901
|
-
as: renderAs ?? DEFAULT_ELEMENT$
|
|
7044
|
+
as: renderAs ?? DEFAULT_ELEMENT$2,
|
|
6902
7045
|
...props
|
|
6903
7046
|
});
|
|
6904
7047
|
});
|
|
@@ -11274,7 +11417,7 @@ const RadioGroup = ({ children, name, onChange, value, ...props }) => {
|
|
|
11274
11417
|
RadioGroup.displayName = "RadioGroup_UI";
|
|
11275
11418
|
//#endregion
|
|
11276
11419
|
//#region src/components/Grid/Grid.tsx
|
|
11277
|
-
const DEFAULT_ELEMENT = "div";
|
|
11420
|
+
const DEFAULT_ELEMENT$1 = "div";
|
|
11278
11421
|
/**
|
|
11279
11422
|
* Determines the grid template columns CSS value based on the grid configuration
|
|
11280
11423
|
*/
|
|
@@ -11327,7 +11470,7 @@ const GridComponent = forwardRef(({ children, columns = "auto", minChildWidth =
|
|
|
11327
11470
|
$maxColumns: useResponsiveProp(columns),
|
|
11328
11471
|
$minChildWidth: useResponsiveProp(minChildWidth),
|
|
11329
11472
|
$rowGap: row,
|
|
11330
|
-
as: renderAs ?? DEFAULT_ELEMENT,
|
|
11473
|
+
as: renderAs ?? DEFAULT_ELEMENT$1,
|
|
11331
11474
|
...props,
|
|
11332
11475
|
children
|
|
11333
11476
|
});
|
|
@@ -13100,11 +13243,12 @@ const Meter = ({ segments, label, labelMeta, description, hideKey = false, max =
|
|
|
13100
13243
|
const segmentsWithOffsets = segments.reduce((acc, segment) => {
|
|
13101
13244
|
const offset = acc.reduce((sum, prev) => sum + prev.widthPercent, 0);
|
|
13102
13245
|
const widthPercent = segment.value / max * 100;
|
|
13103
|
-
|
|
13246
|
+
acc.push({
|
|
13104
13247
|
...segment,
|
|
13105
13248
|
offset,
|
|
13106
13249
|
widthPercent
|
|
13107
|
-
}
|
|
13250
|
+
});
|
|
13251
|
+
return acc;
|
|
13108
13252
|
}, []);
|
|
13109
13253
|
const keySegments = segmentsWithOffsets.filter((segment) => isNotNil(segment.label));
|
|
13110
13254
|
const totalValue = segments.reduce((sum, segment) => sum + segment.value, 0);
|
|
@@ -15445,141 +15589,6 @@ const ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
|
15445
15589
|
};
|
|
15446
15590
|
ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
15447
15591
|
//#endregion
|
|
15448
|
-
//#region src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
15449
|
-
const gradients = {
|
|
15450
|
-
defaultDarkOne: css`
|
|
15451
|
-
background-color: #222d66;
|
|
15452
|
-
background-image:
|
|
15453
|
-
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
15454
|
-
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
15455
|
-
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
15456
|
-
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
15457
|
-
`,
|
|
15458
|
-
defaultDarkTwo: css`
|
|
15459
|
-
background-color: #222d66;
|
|
15460
|
-
background-image:
|
|
15461
|
-
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
15462
|
-
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%),
|
|
15463
|
-
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
15464
|
-
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
15465
|
-
`,
|
|
15466
|
-
defaultLightOne: css`
|
|
15467
|
-
background-color: #ccd5ff;
|
|
15468
|
-
background-image:
|
|
15469
|
-
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
15470
|
-
radial-gradient(farthest-corner at top left, #ccd5ff, transparent 65%),
|
|
15471
|
-
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
15472
|
-
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
15473
|
-
`,
|
|
15474
|
-
defaultLightTwo: css`
|
|
15475
|
-
background-color: #ccd5ff;
|
|
15476
|
-
background-image:
|
|
15477
|
-
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
15478
|
-
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
15479
|
-
`,
|
|
15480
|
-
defaultMidOne: css`
|
|
15481
|
-
background-color: #6b84ff;
|
|
15482
|
-
background-image:
|
|
15483
|
-
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
15484
|
-
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
15485
|
-
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
15486
|
-
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
15487
|
-
`,
|
|
15488
|
-
defaultMidTwo: css`
|
|
15489
|
-
background-color: #6b84ff;
|
|
15490
|
-
background-image:
|
|
15491
|
-
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
15492
|
-
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
15493
|
-
`,
|
|
15494
|
-
green: css`
|
|
15495
|
-
background-color: #fafffa;
|
|
15496
|
-
background-image:
|
|
15497
|
-
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
15498
|
-
radial-gradient(farthest-corner at top right, #268713, transparent 50%),
|
|
15499
|
-
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
15500
|
-
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
15501
|
-
`,
|
|
15502
|
-
greenWithPop: css`
|
|
15503
|
-
background-color: #fafffa;
|
|
15504
|
-
background-image:
|
|
15505
|
-
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
15506
|
-
radial-gradient(farthest-corner at top right, #2949e5, transparent 50%),
|
|
15507
|
-
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
15508
|
-
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
15509
|
-
`,
|
|
15510
|
-
pink: css`
|
|
15511
|
-
background-color: #fffff0;
|
|
15512
|
-
background-image:
|
|
15513
|
-
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
15514
|
-
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
15515
|
-
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
15516
|
-
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
15517
|
-
`,
|
|
15518
|
-
pinkWithPop: css`
|
|
15519
|
-
background-color: #fffff0;
|
|
15520
|
-
background-image:
|
|
15521
|
-
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
15522
|
-
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
15523
|
-
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
15524
|
-
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
15525
|
-
`,
|
|
15526
|
-
playfulGradientOne: css`
|
|
15527
|
-
background-color: #f7f8ff;
|
|
15528
|
-
background-image:
|
|
15529
|
-
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
15530
|
-
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
15531
|
-
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
15532
|
-
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
15533
|
-
`,
|
|
15534
|
-
playfulGradientTwo: css`
|
|
15535
|
-
background-color: #f7f8ff;
|
|
15536
|
-
background-image:
|
|
15537
|
-
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
15538
|
-
radial-gradient(farthest-corner at bottom right, #eff18d, transparent 50%),
|
|
15539
|
-
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
15540
|
-
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
15541
|
-
`,
|
|
15542
|
-
purple: css`
|
|
15543
|
-
background-color: #f2caff;
|
|
15544
|
-
background-image:
|
|
15545
|
-
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
15546
|
-
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
15547
|
-
`,
|
|
15548
|
-
purpleWithPop: css`
|
|
15549
|
-
background-color: #f2caff;
|
|
15550
|
-
background-image:
|
|
15551
|
-
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
15552
|
-
radial-gradient(farthest-corner at top left, #d65cff, transparent 65%),
|
|
15553
|
-
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
15554
|
-
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
15555
|
-
`,
|
|
15556
|
-
yellow: css`
|
|
15557
|
-
background-color: #fffff0;
|
|
15558
|
-
background-image:
|
|
15559
|
-
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
15560
|
-
radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
|
|
15561
|
-
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
15562
|
-
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
15563
|
-
`,
|
|
15564
|
-
yellowWithPop: css`
|
|
15565
|
-
background-color: #fffff0;
|
|
15566
|
-
background-image:
|
|
15567
|
-
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
15568
|
-
radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
|
|
15569
|
-
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
15570
|
-
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 55%);
|
|
15571
|
-
`
|
|
15572
|
-
};
|
|
15573
|
-
/**
|
|
15574
|
-
* Retrieves the CSS background gradient corresponding to the given gradient name.
|
|
15575
|
-
* If the specified gradient name is not found, the default gradient ('defaultDarkOne') is returned.
|
|
15576
|
-
* @param {GradientName} gradientName - The name of the gradient to retrieve.
|
|
15577
|
-
* @returns {CssStyleType} The CSS string representing the specified gradient.
|
|
15578
|
-
*/
|
|
15579
|
-
const getBackgroundGradient = (gradientName) => {
|
|
15580
|
-
return isNotNil(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
|
|
15581
|
-
};
|
|
15582
|
-
//#endregion
|
|
15583
15592
|
//#region src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
15584
15593
|
const ScrubLine = styled.div`
|
|
15585
15594
|
position: absolute;
|
|
@@ -15993,6 +16002,47 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
|
|
|
15993
16002
|
};
|
|
15994
16003
|
WistiaLogo.displayName = "WistiaLogo_UI";
|
|
15995
16004
|
//#endregion
|
|
15996
|
-
|
|
16005
|
+
//#region src/components/Position/Position.tsx
|
|
16006
|
+
const resolveInsetValue = (value) => {
|
|
16007
|
+
if (!isNotNil(value)) return null;
|
|
16008
|
+
if (typeof value === "number") return `${String(value)}px`;
|
|
16009
|
+
if (value.startsWith("space-")) return `var(--wui-${value})`;
|
|
16010
|
+
return value;
|
|
16011
|
+
};
|
|
16012
|
+
const StyledPosition = styled.div`
|
|
16013
|
+
position: ${({ $position }) => $position};
|
|
16014
|
+
top: ${({ $top }) => resolveInsetValue($top) ?? null};
|
|
16015
|
+
right: ${({ $right }) => resolveInsetValue($right) ?? null};
|
|
16016
|
+
bottom: ${({ $bottom }) => resolveInsetValue($bottom) ?? null};
|
|
16017
|
+
left: ${({ $left }) => resolveInsetValue($left) ?? null};
|
|
16018
|
+
inset: ${({ $inset }) => resolveInsetValue($inset) ?? null};
|
|
16019
|
+
z-index: ${({ $zIndex }) => isNotNil($zIndex) ? $zIndex : null};
|
|
16020
|
+
${({ $gap }) => isNotNil($gap) ? `gap: var(--wui-${$gap});` : ""};
|
|
16021
|
+
`;
|
|
16022
|
+
const DEFAULT_ELEMENT = "div";
|
|
16023
|
+
/**
|
|
16024
|
+
* Position sets the CSS `position` property and its associated inset/offset values on an element.
|
|
16025
|
+
*/
|
|
16026
|
+
const PositionComponent = forwardRef(({ bottom, children, gap, inset, left, renderAs, right, top, type = "absolute", zIndex, ...props }, ref) => /* @__PURE__ */ jsx(StyledPosition, {
|
|
16027
|
+
ref,
|
|
16028
|
+
$bottom: bottom,
|
|
16029
|
+
$gap: gap,
|
|
16030
|
+
$inset: inset,
|
|
16031
|
+
$left: left,
|
|
16032
|
+
$position: type,
|
|
16033
|
+
$right: right,
|
|
16034
|
+
$top: top,
|
|
16035
|
+
$zIndex: zIndex,
|
|
16036
|
+
as: renderAs ?? DEFAULT_ELEMENT,
|
|
16037
|
+
...props,
|
|
16038
|
+
children
|
|
16039
|
+
}));
|
|
16040
|
+
PositionComponent.displayName = "Position_UI";
|
|
16041
|
+
/**
|
|
16042
|
+
* Position sets the CSS `position` property and its associated inset/offset values on an element.
|
|
16043
|
+
*/
|
|
16044
|
+
const Position = makePolymorphic(PositionComponent);
|
|
16045
|
+
//#endregion
|
|
16046
|
+
export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Position, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
|
|
15997
16047
|
|
|
15998
16048
|
//# sourceMappingURL=index.js.map
|