@luscii-healthtech/web-ui 56.1.0 → 57.0.0
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.development.js +63 -103
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/src/components/Box/Box.d.ts +1 -32
- package/dist/src/components/Radio/LabeledRadioCard.d.ts +1 -1
- package/dist/src/components/Stack/Stack.d.ts +1 -16
- package/dist/src/generated/components/Box/Box.d.ts +1 -32
- package/dist/src/generated/components/Radio/LabeledRadioCard.d.ts +1 -1
- package/dist/src/generated/components/Stack/Stack.d.ts +1 -16
- package/dist/stories/ActionController.stories.d.ts +1 -16
- package/dist/stories/AsideLayout.stories.d.ts +1 -16
- package/dist/stories/Box.stories.d.ts +1 -16
- package/dist/stories/DetailsDisclosure.stories.d.ts +1 -464
- package/dist/stories/Divider.stories.d.ts +0 -32
- package/dist/stories/HoverIndicatorControl.stories.d.ts +1 -16
- package/dist/stories/PageWithCenteredContentLayout.stories.d.ts +3 -48
- package/dist/stories/Section.stories.d.ts +1 -16
- package/dist/stories/SplitViewLayout.stories.d.ts +1 -16
- package/dist/stories/Stack.stories.d.ts +0 -1
- package/dist/stories/Tabs.stories.d.ts +1 -16
- package/dist/stories/TimelineCardLayout.stories.d.ts +0 -16
- package/dist/stories/VerticalMenu.stories.d.ts +1 -16
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1239,22 +1239,6 @@ const createRadiusRightClassName = (borderRadius) => {
|
|
|
1239
1239
|
});
|
|
1240
1240
|
};
|
|
1241
1241
|
|
|
1242
|
-
const spacingKeys = [
|
|
1243
|
-
"p",
|
|
1244
|
-
"pt",
|
|
1245
|
-
"pr",
|
|
1246
|
-
"pb",
|
|
1247
|
-
"pl",
|
|
1248
|
-
"px",
|
|
1249
|
-
"py",
|
|
1250
|
-
"m",
|
|
1251
|
-
"mt",
|
|
1252
|
-
"mr",
|
|
1253
|
-
"mb",
|
|
1254
|
-
"ml",
|
|
1255
|
-
"mx",
|
|
1256
|
-
"my"
|
|
1257
|
-
];
|
|
1258
1242
|
const underscoredSpacingPropNames = [
|
|
1259
1243
|
"_p",
|
|
1260
1244
|
"_pt",
|
|
@@ -1271,25 +1255,15 @@ const underscoredSpacingPropNames = [
|
|
|
1271
1255
|
"_mx",
|
|
1272
1256
|
"_my"
|
|
1273
1257
|
];
|
|
1274
|
-
const
|
|
1275
|
-
...spacingKeys,
|
|
1276
|
-
...underscoredSpacingPropNames
|
|
1277
|
-
];
|
|
1278
|
-
const createSpacingClassNames = (keys, spacingPropsArg) => {
|
|
1279
|
-
const underscoredPropKeys = [...underscoredSpacingPropNames];
|
|
1280
|
-
const current = keys.filter((key) => spacingPropsArg[key] && !underscoredPropKeys.includes(key)).map((key) => `ui:${key}-${spacingPropsArg[key]}`).join(" ");
|
|
1281
|
-
const underscored = keys.filter((key) => spacingPropsArg[key] && underscoredPropKeys.includes(key)).map((key) => `ui:${key.replace("_", "")}-f_${spacingPropsArg[key]}`).join(" ");
|
|
1282
|
-
return `${current} ${underscored}`;
|
|
1283
|
-
};
|
|
1258
|
+
const createSpacingClassNames = (spacingPropsArg) => underscoredSpacingPropNames.filter((key) => spacingPropsArg[key]).map((key) => `ui:${key.replace("_", "")}-f_${spacingPropsArg[key]}`).join(" ");
|
|
1284
1259
|
const BoxInner = (props, ref) => {
|
|
1285
1260
|
const { as: Element = "div", borderRadius, borderRadiusLeft, borderRadiusRight, className, elevation, width, backgroundColor, hoverBackgroundColor, cursor } = props, attributes = __rest(props, ["as", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "className", "elevation", "width", "backgroundColor", "hoverBackgroundColor", "cursor"]);
|
|
1286
|
-
const spacingClasses = createSpacingClassNames(
|
|
1261
|
+
const spacingClasses = createSpacingClassNames(props);
|
|
1287
1262
|
const shadowClassName = createShadowClassName(elevation);
|
|
1288
1263
|
const borderRadiusClassName = createRadiusClassName(borderRadius);
|
|
1289
1264
|
const borderRadiusLeftClassName = createRadiusLeftClassName(borderRadiusLeft);
|
|
1290
1265
|
const borderRadiusRightClassName = createRadiusRightClassName(borderRadiusRight);
|
|
1291
1266
|
const attributesWithoutSpacingKeys = lodashEs.omit(attributes, [
|
|
1292
|
-
...spacingKeys,
|
|
1293
1267
|
...underscoredSpacingPropNames
|
|
1294
1268
|
]);
|
|
1295
1269
|
const boxClasses = classNames__default.default(spacingClasses, {
|
|
@@ -1339,27 +1313,13 @@ const BoxInner = (props, ref) => {
|
|
|
1339
1313
|
const Box = React__namespace.default.forwardRef(BoxInner);
|
|
1340
1314
|
|
|
1341
1315
|
const StackInner = (props, ref) => {
|
|
1342
|
-
const { children,
|
|
1316
|
+
const { children, _gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false, divider, as } = props, attributes = __rest(props, ["children", "_gap", "align", "justify", "axis", "className", "reverse", "wrap", "divider", "as"]);
|
|
1343
1317
|
const stackClasses = classNames__default.default(`ui:flex`, {
|
|
1344
1318
|
"ui:flex-row": axis === "x",
|
|
1345
1319
|
"ui:flex-col": axis === "y",
|
|
1346
1320
|
"ui:flex-row-reverse": axis === "x" && reverse,
|
|
1347
1321
|
"ui:flex-col-reverse": axis === "y" && reverse,
|
|
1348
1322
|
"ui:flex-wrap": wrap,
|
|
1349
|
-
/**
|
|
1350
|
-
* @deprecated
|
|
1351
|
-
* Old spacing system, to be removed in a future major release. Use the `_gap` prop instead.
|
|
1352
|
-
*/
|
|
1353
|
-
"ui:gap-m": gap === "m",
|
|
1354
|
-
"ui:gap-none": gap === "none",
|
|
1355
|
-
"ui:gap-xxxxs": gap === "xxxxs",
|
|
1356
|
-
"ui:gap-xxxs": gap === "xxxs",
|
|
1357
|
-
"ui:gap-xxs": gap === "xxs",
|
|
1358
|
-
"ui:gap-xs": gap === "xs",
|
|
1359
|
-
"ui:gap-s": gap === "s",
|
|
1360
|
-
"ui:gap-l": gap === "l",
|
|
1361
|
-
"ui:gap-xl": gap === "xl",
|
|
1362
|
-
"ui:gap-xxl": gap === "xxl",
|
|
1363
1323
|
"ui:gap-f_none": _gap === "none",
|
|
1364
1324
|
"ui:gap-f_xs": _gap === "xs",
|
|
1365
1325
|
"ui:gap-f_s": _gap === "s",
|
|
@@ -1513,7 +1473,7 @@ const BaseListItem = React__namespace.default.forwardRef(({ itemId, title, toolt
|
|
|
1513
1473
|
title,
|
|
1514
1474
|
subtitle,
|
|
1515
1475
|
icon
|
|
1516
|
-
}, onAssetLoadError) }), jsxRuntime.jsxs("div", { className: "ui:py-4", children: [typeof title === "string" ? jsxRuntime.jsx(Text, { variant: isSelected ? "strong" : "base", children: title }) : title, subtitle && (typeof subtitle === "string" ? jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: subtitle }) : subtitle)] }), jsxRuntime.jsx("div", { className: "ui:grow" }), jsxRuntime.jsx(Stack, { axis: "x",
|
|
1476
|
+
}, onAssetLoadError) }), jsxRuntime.jsxs("div", { className: "ui:py-4", children: [typeof title === "string" ? jsxRuntime.jsx(Text, { variant: isSelected ? "strong" : "base", children: title }) : title, subtitle && (typeof subtitle === "string" ? jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: subtitle }) : subtitle)] }), jsxRuntime.jsx("div", { className: "ui:grow" }), jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", className: classNames__default.default({
|
|
1517
1477
|
"ui:opacity-0": onlyShowAccessoriesOnHover,
|
|
1518
1478
|
"ui:group-hover:opacity-100": onlyShowAccessoriesOnHover
|
|
1519
1479
|
}), children: accessories })] }));
|
|
@@ -1639,7 +1599,7 @@ const DefaultList = (_a) => {
|
|
|
1639
1599
|
});
|
|
1640
1600
|
};
|
|
1641
1601
|
const composeIconWithChevron = (parentItem, isExpanded) => {
|
|
1642
|
-
return jsxRuntime.jsxs(Stack, { axis: "x",
|
|
1602
|
+
return jsxRuntime.jsxs(Stack, { axis: "x", _gap: "m", align: "center", children: [jsxRuntime.jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: (e) => {
|
|
1643
1603
|
e.stopPropagation();
|
|
1644
1604
|
toggleExpand(parentItem.itemId);
|
|
1645
1605
|
}, onKeyDown: (e) => {
|
|
@@ -1856,7 +1816,7 @@ const Content$2 = (_a) => {
|
|
|
1856
1816
|
return "ui:fill-secondary-background";
|
|
1857
1817
|
}
|
|
1858
1818
|
};
|
|
1859
|
-
return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: getBackgroundColor(),
|
|
1819
|
+
return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: getBackgroundColor(), _px: "l", _py: "m", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: getArrowBackgroundColor() })] })) });
|
|
1860
1820
|
};
|
|
1861
1821
|
Content$2.displayName = "Tooltip.Content";
|
|
1862
1822
|
const Root$1 = (props) => jsxRuntime.jsx(Tooltip__namespace.Root, Object.assign({}, props));
|
|
@@ -2004,7 +1964,7 @@ const CenteredHero = ({ title, text, image, slots, background = "slate-50", imag
|
|
|
2004
1964
|
}), "data-test-id": dataTestId, children: [image && jsxRuntime.jsx("img", { src: image, className: classNames__default.default("ui:mb-4", {
|
|
2005
1965
|
"ui:max-h-36": imageSize === "small",
|
|
2006
1966
|
"ui:max-h-72": imageSize === "large"
|
|
2007
|
-
}) }), title && jsxRuntime.jsx(Title, { variant: "base", children: title }), text && jsxRuntime.jsx(Text, { className: "ui:text-center", children: text }), (slots === null || slots === void 0 ? void 0 : slots.bottom) && jsxRuntime.jsx(Box, {
|
|
1967
|
+
}) }), title && jsxRuntime.jsx(Title, { variant: "base", children: title }), text && jsxRuntime.jsx(Text, { className: "ui:text-center", children: text }), (slots === null || slots === void 0 ? void 0 : slots.bottom) && jsxRuntime.jsx(Box, { _mt: "l", children: slots === null || slots === void 0 ? void 0 : slots.bottom })] });
|
|
2008
1968
|
};
|
|
2009
1969
|
|
|
2010
1970
|
const AccordionListActions = (props) => {
|
|
@@ -2206,7 +2166,7 @@ function ChatBubble(props) {
|
|
|
2206
2166
|
}, transitionClasses, className), children: jsxRuntime.jsxs("div", { className: classNames__default.default("ui:transition-colors ui:duration-150 ui:ease-out", backgroundColorClasses, "ui:relative ui:grid ui:p-m ui:radius-m", {
|
|
2207
2167
|
"ui:group-hover/chat-bubble:bg-blue-50": isInteractive && color === "blue",
|
|
2208
2168
|
"ui:group-hover/chat-bubble:bg-slate-50": isInteractive && color === "grey"
|
|
2209
|
-
}), children: [jsxRuntime.jsx("div", { className: classNames__default.default(tipColorClasses, tipPositionClasses, transitionClasses, "ui:absolute ui:h-[11px] ui:w-[11px] ui:transform ui:border-11") }), jsxRuntime.jsx(Meta, Object.assign({}, props)), jsxRuntime.jsxs(Stack, { width: "full",
|
|
2169
|
+
}), children: [jsxRuntime.jsx("div", { className: classNames__default.default(tipColorClasses, tipPositionClasses, transitionClasses, "ui:absolute ui:h-[11px] ui:w-[11px] ui:transform ui:border-11") }), jsxRuntime.jsx(Meta, Object.assign({}, props)), jsxRuntime.jsxs(Stack, { width: "full", _gap: "base", children: [jsxRuntime.jsx(Content$1, { children }), readReceipt || footerAccessory ? jsxRuntime.jsxs(Stack, { axis: "x", _gap: "base", align: "center", divider: jsxRuntime.jsx(Text, { as: "span", color: "on-surface-variant", children: "\u2022" }), children: [readReceipt && jsxRuntime.jsx(Text, { variant: "sm", children: readReceipt }), footerAccessory] }) : null] })] }) }));
|
|
2210
2170
|
}
|
|
2211
2171
|
function Meta(props) {
|
|
2212
2172
|
const { sender, timestamp } = props;
|
|
@@ -2335,7 +2295,7 @@ function MoreAvatarsLabel(props) {
|
|
|
2335
2295
|
if (amountOfAvatars <= maxAvatars) {
|
|
2336
2296
|
return null;
|
|
2337
2297
|
}
|
|
2338
|
-
return jsxRuntime.jsx(Box, {
|
|
2298
|
+
return jsxRuntime.jsx(Box, { _ml: "s", children: jsxRuntime.jsx(Text, { variant: "medium", color: "on-surface-variant", children: moreAvatarsLabel(amountOfAvatars - maxAvatars) }) });
|
|
2339
2299
|
}
|
|
2340
2300
|
|
|
2341
2301
|
const Badge = (props) => {
|
|
@@ -2399,7 +2359,7 @@ const DotButton = (_a) => {
|
|
|
2399
2359
|
};
|
|
2400
2360
|
const DotList = ({ activeIndex, amount, onClickIndex, buttonLabel }) => {
|
|
2401
2361
|
const items = Array.from({ length: amount }).map((_, i) => i);
|
|
2402
|
-
return jsxRuntime.jsx(Stack, { as: "ol", role: "tablist", axis: "x",
|
|
2362
|
+
return jsxRuntime.jsx(Stack, { as: "ol", role: "tablist", axis: "x", _gap: "m", children: items.map((index) => jsxRuntime.jsx(Box, { as: "li", children: jsxRuntime.jsx(DotButton, { isActive: activeIndex === index, onClick: () => onClickIndex(index), "aria-label": buttonLabel === null || buttonLabel === void 0 ? void 0 : buttonLabel(index), role: "tab" }) }, index)) });
|
|
2403
2363
|
};
|
|
2404
2364
|
const Carousel = ({ id, className, slides = [], labels }) => {
|
|
2405
2365
|
const [currentIndex, setCurrentIndex] = React.useState(0);
|
|
@@ -2435,7 +2395,7 @@ const Carousel = ({ id, className, slides = [], labels }) => {
|
|
|
2435
2395
|
const index = Math.round(scrollLeft / scrollWidth);
|
|
2436
2396
|
setCurrentIndexDebounced(index);
|
|
2437
2397
|
}, [setCurrentIndexDebounced]);
|
|
2438
|
-
return jsxRuntime.jsx("div", { ref: slidesContainer, id, className, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch",
|
|
2398
|
+
return jsxRuntime.jsx("div", { ref: slidesContainer, id, className, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", _gap: "l", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "stretch", width: "full", _gap: "l", children: [jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickPrevious, leadingIcon: jsxRuntime.jsx(LeftArrowIcon, {}), "aria-label": labels === null || labels === void 0 ? void 0 : labels.previousButton, disabled: slides.length === 0 }) }), jsxRuntime.jsx(Stack, { as: "ol", axis: "x", width: "full", align: "stretch", className: "ui:w-full ui:snap-x ui:snap-mandatory ui:overflow-x-auto", style: { scrollbarWidth: "none" }, onScroll, children: slides.map((slide, i) => jsxRuntime.jsx(Box, { width: "full", as: "li", className: "ui:shrink-0 ui:snap-start", children: slide }, i)) }), jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickNext, leadingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), "aria-label": labels === null || labels === void 0 ? void 0 : labels.nextButton, disabled: slides.length === 0 }) })] }), jsxRuntime.jsx(Stack, { align: "center", children: jsxRuntime.jsx(DotList, { activeIndex: currentIndex, amount: slides.length, onClickIndex: scrollToIndex }) })] }) });
|
|
2439
2399
|
};
|
|
2440
2400
|
|
|
2441
2401
|
var css_248z$7 = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n.cweb-checkbox {\n outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n position: absolute;\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n border-color: #cccccc;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n border-color: var(--ui-color-red-800, #991b1b);\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n width: 0.5rem;\n height: 0.5rem;\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n width: 10px;\n height: 10px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n opacity: 0.6;\n}";
|
|
@@ -2566,7 +2526,7 @@ const LabeledCheckboxBase = React__namespace.default.forwardRef((props, ref) =>
|
|
|
2566
2526
|
const { id, disabled } = attributes;
|
|
2567
2527
|
const semanticId = React__namespace.default.useId();
|
|
2568
2528
|
const isCard = variant === "card";
|
|
2569
|
-
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x",
|
|
2529
|
+
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", htmlFor: id, className: classNames__default.default(
|
|
2570
2530
|
"ui:cursor-pointer",
|
|
2571
2531
|
{
|
|
2572
2532
|
"ui:cursor-not-allowed": disabled
|
|
@@ -2613,13 +2573,13 @@ const LabeledCheckboxCard = React__namespace.default.forwardRef((props, ref) =>
|
|
|
2613
2573
|
const LabeledCheckboxGroup = (props) => {
|
|
2614
2574
|
const { children, title, className } = props;
|
|
2615
2575
|
const semanticId = React__namespace.default.useId();
|
|
2616
|
-
return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className),
|
|
2576
|
+
return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "base", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, { _gap: "l", children }), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
|
|
2617
2577
|
};
|
|
2618
2578
|
|
|
2619
2579
|
const LabeledCheckboxCardGroup = (props) => {
|
|
2620
2580
|
const { children, title, className, columns = 2, helperText, errorText } = props, attributes = __rest(props, ["children", "title", "className", "columns", "helperText", "errorText"]);
|
|
2621
2581
|
const semanticId = React__namespace.default.useId();
|
|
2622
|
-
return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className,
|
|
2582
|
+
return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className, _gap: "base" }, attributes, { children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx("div", { className: classNames__default.default("ui:grid ui:gap-x-m ui:gap-y-xs ui:items-start", {
|
|
2623
2583
|
"ui:grid-cols-1": columns === 1,
|
|
2624
2584
|
"ui:grid-cols-2": columns === 2,
|
|
2625
2585
|
"ui:grid-cols-3": columns === 3,
|
|
@@ -2733,7 +2693,7 @@ const NotificationBanner = (_a) => {
|
|
|
2733
2693
|
blue: "blue-800"
|
|
2734
2694
|
};
|
|
2735
2695
|
const colour = color ? textColor[color] : "base";
|
|
2736
|
-
return jsxRuntime.jsxs(Stack, Object.assign({
|
|
2696
|
+
return jsxRuntime.jsxs(Stack, Object.assign({ _p: "l", as: "div", axis: "x", align: "center", justify: centerContent ? "center" : "start", "data-test-id": "notification-banner", borderRadius: "xxxxs", width: stretch ? "full" : void 0, className: classNames__default.default(classes, {
|
|
2737
2697
|
"ui:inline-flex": !stretch
|
|
2738
2698
|
}) }, boxProps, { children: [icon && (typeof icon === "function" ? React__namespace.default.createElement(icon, {
|
|
2739
2699
|
className: "ui:w-6 ui:h-6 ui:mr-3 ui:shrink-0"
|
|
@@ -2752,7 +2712,7 @@ function RadioInner(_a) {
|
|
|
2752
2712
|
const { value, disabled } = otherProps;
|
|
2753
2713
|
const nameHtmlFor = `${name}-field-${value}`;
|
|
2754
2714
|
const semanticId = React__namespace.default.useId();
|
|
2755
|
-
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x",
|
|
2715
|
+
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", className: "ui:radio-form-field-label ui:flex ui:flex-row ui:leading-none", htmlFor: nameHtmlFor, "data-has-error": isError, "data-test-id": nameHtmlFor, children: [jsxRuntime.jsx(StyledRadio, Object.assign({}, otherProps, { name, id: nameHtmlFor, ref: innerRef, "aria-describedby": semanticId })), jsxRuntime.jsxs("div", { children: [text && jsxRuntime.jsx(Text, { inline: true, variant: "base", color: disabled ? "slate-500" : void 0, children: text }), jsxRuntime.jsx(HelperAndErrorText, { helperText: info, describingId: semanticId })] })] });
|
|
2756
2716
|
}
|
|
2757
2717
|
const RadioV2 = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(RadioInner, Object.assign({}, props, { innerRef: ref })));
|
|
2758
2718
|
|
|
@@ -2913,7 +2873,7 @@ const InfoField = (props) => {
|
|
|
2913
2873
|
};
|
|
2914
2874
|
break;
|
|
2915
2875
|
}
|
|
2916
|
-
return jsxRuntime.jsxs(Stack, { axis: "x", align: "center",
|
|
2876
|
+
return jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "m", className: props.className, children: [props.icon, jsxRuntime.jsxs(Stack, Object.assign({}, boxProps, { className: "ui:overflow-hidden", children: [jsxRuntime.jsx(Text, { type: "sm", color: "slate-500", className: classNames__default.default({ "ui:break-words": props.supportsMultiline }, { "ui:whitespace-nowrap": !props.supportsMultiline }), children: props.label }), jsxRuntime.jsx(Text, { className: classNames__default.default({ "ui:break-words": props.supportsMultiline }, { "ui:whitespace-nowrap": !props.supportsMultiline }), truncate: !props.supportsMultiline, children: props.value })] }))] });
|
|
2917
2877
|
};
|
|
2918
2878
|
|
|
2919
2879
|
function cn$1(...inputs) {
|
|
@@ -3002,20 +2962,20 @@ const LabeledDatePicker = (_a) => {
|
|
|
3002
2962
|
"ui:!border-negative-border": isError,
|
|
3003
2963
|
"ui:!focus:outline-negative": isError
|
|
3004
2964
|
}, classNameFromProps);
|
|
3005
|
-
return jsxRuntime.jsxs(Stack, { as: "label",
|
|
2965
|
+
return jsxRuntime.jsxs(Stack, { as: "label", _gap: "s", align: fullWidth ? "stretch" : void 0, children: [label && jsxRuntime.jsx(LabelText, { children: label }), jsxRuntime.jsx(DatePicker, Object.assign({}, props, { className: datePickerClassNames, "aria-describedby": helperErrorTextId })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
|
|
3006
2966
|
};
|
|
3007
2967
|
|
|
3008
2968
|
const LabeledInput = React__namespace.default.forwardRef((props, ref) => {
|
|
3009
2969
|
const { className, helperText, errorText, label, fullWidth, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "fullWidth", "aria-describedby"]);
|
|
3010
2970
|
const helperErrorTextId = React__namespace.default.useId();
|
|
3011
|
-
return jsxRuntime.jsxs(Stack, { as: "label",
|
|
2971
|
+
return jsxRuntime.jsxs(Stack, { as: "label", _gap: "s", align: fullWidth ? "stretch" : void 0, className, children: [label && jsxRuntime.jsx(LabelText, { children: props.label }), jsxRuntime.jsx(StyledInput, Object.assign({}, rest, { ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
|
|
3012
2972
|
});
|
|
3013
2973
|
|
|
3014
2974
|
const LabeledRadio = React__namespace.default.forwardRef((props, ref) => {
|
|
3015
2975
|
const { children, label, helperText, errorText, className, inputClassName } = props, attributes = __rest(props, ["children", "label", "helperText", "errorText", "className", "inputClassName"]);
|
|
3016
2976
|
const { id, disabled } = attributes;
|
|
3017
2977
|
const semanticId = React__namespace.default.useId();
|
|
3018
|
-
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x",
|
|
2978
|
+
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", htmlFor: id, className: classNames__default.default("ui:radio-form-field-label", className), children: [jsxRuntime.jsxs("div", { className: "ui:relative ui:flex ui:flex-row ui:items-center ui:self-start", children: [jsxRuntime.jsx(Text, { "aria-hidden": true, className: "ui:w-4 ui:opacity-0", children: "CENTER" }), jsxRuntime.jsx("div", { className: "ui:absolute", children: jsxRuntime.jsx(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(RadioLabel, { label, disabled, children }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] });
|
|
3019
2979
|
});
|
|
3020
2980
|
function RadioLabel(props) {
|
|
3021
2981
|
const { children, label, disabled } = props;
|
|
@@ -3038,7 +2998,7 @@ const LabeledRadioGroup = (props) => {
|
|
|
3038
2998
|
axis: "y",
|
|
3039
2999
|
_gap: "base"
|
|
3040
3000
|
};
|
|
3041
|
-
return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className),
|
|
3001
|
+
return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "s", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, Object.assign({}, orientationProps, { children })), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
|
|
3042
3002
|
};
|
|
3043
3003
|
|
|
3044
3004
|
const Actions$1 = (props) => {
|
|
@@ -3060,7 +3020,7 @@ const Padding$1 = (props) => {
|
|
|
3060
3020
|
const { children } = props, rest = __rest(props, ["children"]);
|
|
3061
3021
|
return (
|
|
3062
3022
|
// Using margin here, because adjacent margins collapse.
|
|
3063
|
-
jsxRuntime.jsx(Box, Object.assign({
|
|
3023
|
+
jsxRuntime.jsx(Box, Object.assign({ _m: "xl" }, rest, { children }))
|
|
3064
3024
|
);
|
|
3065
3025
|
};
|
|
3066
3026
|
|
|
@@ -3185,7 +3145,7 @@ const TabsContent = React__namespace.forwardRef((_a, ref) => {
|
|
|
3185
3145
|
});
|
|
3186
3146
|
TabsContent.displayName = "Tabs.Content";
|
|
3187
3147
|
const TabsPadding = (props) => {
|
|
3188
|
-
return jsxRuntime.jsx(Box, Object.assign({
|
|
3148
|
+
return jsxRuntime.jsx(Box, Object.assign({ _py: "xl" }, props));
|
|
3189
3149
|
};
|
|
3190
3150
|
const TabLabelText = (props) => {
|
|
3191
3151
|
return jsxRuntime.jsx(Text, Object.assign({ variant: "strong", color: "current", as: "span" }, props));
|
|
@@ -3405,7 +3365,7 @@ function TableBodyRowDataCell(props) {
|
|
|
3405
3365
|
}
|
|
3406
3366
|
const content = props.fieldConfig.content(props.item);
|
|
3407
3367
|
const isTextCellEmpty = isTableFieldText(content) && !content.text && !content.tag;
|
|
3408
|
-
return jsxRuntime.jsxs("td", { className: classNames__default.default("ui:px-2 ui:align-middle ui:first:pl-6 ui:last:pr-6"), children: [isTableFieldText(content) && jsxRuntime.jsxs(Stack, { axis: "x", align: "center",
|
|
3368
|
+
return jsxRuntime.jsxs("td", { className: classNames__default.default("ui:px-2 ui:align-middle ui:first:pl-6 ui:last:pr-6"), children: [isTableFieldText(content) && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "m", children: [content.tag && jsxRuntime.jsx(Tag, { _type: getTagType(content.tag.color), children: content.tag.text }), jsxRuntime.jsx(CellTextContent, { content, emptyFieldContent: isTextCellEmpty ? props.emptyFieldContentText : void 0 })] }), isTableFieldAction(content) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:flex-row ui:justify-end", "ui:transition-opacity ui:duration-300 ui:ease-in-out", {
|
|
3409
3369
|
"ui:opacity-0": props.fieldConfig.onlyShowContentOnHovering,
|
|
3410
3370
|
"ui:group-hover:opacity-100": props.fieldConfig.onlyShowContentOnHovering
|
|
3411
3371
|
}), children: content.map((action) => {
|
|
@@ -3422,7 +3382,7 @@ const CellTextContent = (props) => {
|
|
|
3422
3382
|
if (!props.content.description && !props.content.text && !props.emptyFieldContent) {
|
|
3423
3383
|
return null;
|
|
3424
3384
|
}
|
|
3425
|
-
return jsxRuntime.jsxs(Stack, {
|
|
3385
|
+
return jsxRuntime.jsxs(Stack, { _py: "l", children: [(props.content.text || props.emptyFieldContent) && jsxRuntime.jsx(Text, { className: classNames__default.default("ui:text-left ui:leading-5", {
|
|
3426
3386
|
"ui:break-all": props.content.breakAllWord,
|
|
3427
3387
|
"ui:break-words": !props.content.breakAllWord
|
|
3428
3388
|
}), children: (_a = props.content.text) !== null && _a !== void 0 ? _a : props.emptyFieldContent }), props.content.description && jsxRuntime.jsx(Text, { className: classNames__default.default({
|
|
@@ -3616,7 +3576,7 @@ const PaginationMenuLarge = (props) => {
|
|
|
3616
3576
|
props.onChange(Number.parseInt(newPage, 10), props.pageSize);
|
|
3617
3577
|
}
|
|
3618
3578
|
};
|
|
3619
|
-
return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "center",
|
|
3579
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "m", justify: "start", width: "full", children: [props.pageSize && props.resultCount && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { children: props.localization.display }), jsxRuntime.jsx(StyledSelect, { onChange: handleOnPageSizeSelect, value: props.pageSize, children: PAGE_SIZE_OPTIONS.map((option) => jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })] }), jsxRuntime.jsx(Text, { children: props.localization.page }), jsxRuntime.jsx(StyledSelect, { onChange: handleOnPageNumberSelect, value: props.currentPageNumber, disabled: props.pageCount < 2, children: getPageNumberOptions(props.pageCount).map((option) => jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })] }), jsxRuntime.jsxs(Stack, { axis: "x", align: "center", justify: "end", width: "full", children: [jsxRuntime.jsx(Text, { color: "slate-500", children: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount) }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", "data-page": props.currentPageNumber - 1, onClick: handleOnPrevNextButtonClick, disabled: props.currentPageNumber === 1 || props.pageCount === 0, className: "ui:ml-4", children: props.localization.previous }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", disabled: props.currentPageNumber === props.pageCount || props.pageCount === 0, "data-page": props.currentPageNumber + 1, onClick: handleOnPrevNextButtonClick, className: "ui:ml-4", children: props.localization.next })] })] });
|
|
3620
3580
|
};
|
|
3621
3581
|
|
|
3622
3582
|
const PaginationMenuCursor = (props) => {
|
|
@@ -3626,7 +3586,7 @@ const PaginationMenuCursor = (props) => {
|
|
|
3626
3586
|
props.onChange(cursor);
|
|
3627
3587
|
}
|
|
3628
3588
|
};
|
|
3629
|
-
return jsxRuntime.jsxs(Stack, { axis: "x",
|
|
3589
|
+
return jsxRuntime.jsxs(Stack, { axis: "x", _gap: "l", justify: "end", width: "full", children: [jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", leadingIcon: jsxRuntime.jsx(LeftArrowIcon, {}), "data-cursor": props.previousCursor, disabled: !props.previousCursor, onClick: handleOnChange, children: props.localization.previous }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", trailingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), "data-cursor": props.nextCursor, disabled: !props.nextCursor, onClick: handleOnChange, children: props.localization.next })] });
|
|
3630
3590
|
};
|
|
3631
3591
|
|
|
3632
3592
|
const Wrapper = ({ className, children }) => jsxRuntime.jsx(Stack, { axis: "x", align: "center", className: classNames__default.default(className), justify: "between", width: "full", children });
|
|
@@ -3686,7 +3646,7 @@ function Table(_a) {
|
|
|
3686
3646
|
const shouldDisplayHeaderSelectAll = isSelectable && items && items.length > 0;
|
|
3687
3647
|
const shouldDisplaySelectAllControls = shouldDisplayHeaderSelectAll && rowSelectionHeaderAccessories && selectedItems && selectedItems.length > 0;
|
|
3688
3648
|
const toggleAllCheckbox = jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("span", { className: "ui:sr-only", children: "Select all rows" }), jsxRuntime.jsx(Checkbox, { isChecked: getSelectAllCheckboxState() === "checked", isIndeterminate: getSelectAllCheckboxState() === "indeterminate", onChange: handleOnToggleAll })] });
|
|
3689
|
-
return jsxRuntime.jsxs("table", Object.assign({ className: classNames__default.default("ui:w-full ui:table-auto ui:bg-white", "ui:border-separate ui:border-spacing-0 ui:rounded-2xl", className), "data-test-id": dataTestId }, otherAttributes, { children: [showHeader ? jsxRuntime.jsx(TableHeader, { fieldConfigurations, colSpan, selectAllCheckbox: shouldDisplayHeaderSelectAll ? toggleAllCheckbox : null, selectAllComponent: shouldDisplaySelectAllControls ? jsxRuntime.jsxs(Stack, { axis: "x", align: "center",
|
|
3649
|
+
return jsxRuntime.jsxs("table", Object.assign({ className: classNames__default.default("ui:w-full ui:table-auto ui:bg-white", "ui:border-separate ui:border-spacing-0 ui:rounded-2xl", className), "data-test-id": dataTestId }, otherAttributes, { children: [showHeader ? jsxRuntime.jsx(TableHeader, { fieldConfigurations, colSpan, selectAllCheckbox: shouldDisplayHeaderSelectAll ? toggleAllCheckbox : null, selectAllComponent: shouldDisplaySelectAllControls ? jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "m", _my: "base", children: [toggleAllCheckbox, rowSelectionHeaderAccessories] }) : null }) : null, jsxRuntime.jsx(
|
|
3690
3650
|
TableBody,
|
|
3691
3651
|
{
|
|
3692
3652
|
// TODO: early return to remove all the boolean juggling.
|
|
@@ -4083,12 +4043,12 @@ const Step = ({ title, subtitle, state = "completed" }) => {
|
|
|
4083
4043
|
titleColor = "blue-800";
|
|
4084
4044
|
break;
|
|
4085
4045
|
}
|
|
4086
|
-
return jsxRuntime.jsxs(Box, { width: "full", children: [jsxRuntime.jsx(Box, {
|
|
4046
|
+
return jsxRuntime.jsxs(Box, { width: "full", children: [jsxRuntime.jsx(Box, { _mb: "base", width: "full", className: classNames__default.default("ui:h-1 ui:rounded", barColorClassName) }), jsxRuntime.jsx(Text, { variant: "strong", color: titleColor, children: title }), subtitle && jsxRuntime.jsx(Text, { variant: "strong", color: subtitleColor, children: subtitle })] });
|
|
4087
4047
|
};
|
|
4088
4048
|
|
|
4089
4049
|
const Steps = (props) => {
|
|
4090
4050
|
const { children, className } = props;
|
|
4091
|
-
return jsxRuntime.jsx(Stack, { axis: "x", justify: "stretch",
|
|
4051
|
+
return jsxRuntime.jsx(Stack, { axis: "x", justify: "stretch", _gap: "xl", className, children: React__namespace.default.Children.map(children, (child) => {
|
|
4092
4052
|
if (!React__namespace.default.isValidElement(child)) {
|
|
4093
4053
|
return null;
|
|
4094
4054
|
}
|
|
@@ -4232,7 +4192,7 @@ const VerticalDivider = (props) => {
|
|
|
4232
4192
|
}, className) }, rest));
|
|
4233
4193
|
};
|
|
4234
4194
|
const VerticalFlowDivider = (props) => {
|
|
4235
|
-
return jsxRuntime.jsx(Stack, Object.assign({ width: "full", align: "center", role: "separator",
|
|
4195
|
+
return jsxRuntime.jsx(Stack, Object.assign({ width: "full", align: "center", role: "separator", _pb: "s" }, props, { children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 29, fill: "none", children: [jsxRuntime.jsx("path", { fill: "#94A3B8", d: "M7.293 28.707a1 1 0 0 0 1.414 0l6.364-6.364a1 1 0 0 0-1.414-1.414L8 26.586l-5.657-5.657A1 1 0 0 0 .93 22.343l6.364 6.364ZM7 0v28h2V0H7Z" }), jsxRuntime.jsx("circle", { cx: 8, cy: 3, r: 2.5, fill: "#CBD5E1", stroke: "#64748B" })] }) }));
|
|
4236
4196
|
};
|
|
4237
4197
|
const HorizontalFlowDivider = (props) => {
|
|
4238
4198
|
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", align: "center", role: "separator" }, props, { children: jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M16.6269 12.7491H5.25C5.03718 12.7491 4.85898 12.6773 4.7154 12.5337C4.5718 12.3901 4.5 12.2119 4.5 11.9991C4.5 11.7863 4.5718 11.6081 4.7154 11.4645C4.85898 11.3209 5.03718 11.2491 5.25 11.2491H16.6269L11.4577 6.07985C11.309 5.93114 11.2356 5.7571 11.2375 5.55775C11.2394 5.35839 11.3179 5.18114 11.4731 5.02603C11.6282 4.88116 11.8038 4.80616 12 4.80103C12.1961 4.79589 12.3718 4.87089 12.5269 5.02603L18.8672 11.3664C18.9608 11.46 19.0269 11.5587 19.0653 11.6626C19.1038 11.7664 19.123 11.8786 19.123 11.9991C19.123 12.1196 19.1038 12.2318 19.0653 12.3356C19.0269 12.4395 18.9608 12.5382 18.8672 12.6318L12.5269 18.9721C12.3884 19.1106 12.217 19.1814 12.0125 19.1846C11.808 19.1878 11.6282 19.117 11.4731 18.9721C11.3179 18.817 11.2404 18.6388 11.2404 18.4375C11.2404 18.2362 11.3179 18.058 11.4731 17.9029L16.6269 12.7491Z", fill: "#64748B" }) }) }));
|
|
@@ -4368,11 +4328,11 @@ const PreviewPhone = ({ className, children }) => {
|
|
|
4368
4328
|
};
|
|
4369
4329
|
|
|
4370
4330
|
const SectionHeader = ({ title, aside, isLoading = false }) => {
|
|
4371
|
-
return jsxRuntime.jsxs(Stack, { axis: "x", as: "header", justify: "between", align: "center", width: "full", "data-test-id": "section-header",
|
|
4331
|
+
return jsxRuntime.jsxs(Stack, { axis: "x", as: "header", justify: "between", align: "center", width: "full", "data-test-id": "section-header", _p: "l", children: [jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center", _gap: "m", children: [typeof title === "string" ? jsxRuntime.jsx(Title, { variant: "sm", children: title }) : title, isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true })] }), aside] });
|
|
4372
4332
|
};
|
|
4373
4333
|
|
|
4374
4334
|
const SectionFooter = ({ children }) => {
|
|
4375
|
-
return jsxRuntime.jsx(Stack, { as: "footer", width: "full",
|
|
4335
|
+
return jsxRuntime.jsx(Stack, { as: "footer", width: "full", _p: "l", className: "ui:border-t-slate-200", children });
|
|
4376
4336
|
};
|
|
4377
4337
|
|
|
4378
4338
|
const Section = (_a) => {
|
|
@@ -4639,7 +4599,7 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
|
|
|
4639
4599
|
const LabeledSelect = React__namespace.default.forwardRef((props, ref) => {
|
|
4640
4600
|
const { className, helperText, errorText, label, fullWidth, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "fullWidth", "aria-describedby"]);
|
|
4641
4601
|
const helperErrorTextId = React__namespace.default.useId();
|
|
4642
|
-
return jsxRuntime.jsxs(Stack, { as: "label",
|
|
4602
|
+
return jsxRuntime.jsxs(Stack, { as: "label", _gap: "s", align: fullWidth ? "stretch" : void 0, className, children: [label && jsxRuntime.jsx(LabelText, { children: props.label }), jsxRuntime.jsx(StyledSelect, Object.assign({}, rest, { ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
|
|
4643
4603
|
});
|
|
4644
4604
|
|
|
4645
4605
|
const LabeledSelectSearchable = React__namespace.default.forwardRef((props, ref) => {
|
|
@@ -4648,7 +4608,7 @@ const LabeledSelectSearchable = React__namespace.default.forwardRef((props, ref)
|
|
|
4648
4608
|
const helperErrorTextId = React__namespace.default.useId();
|
|
4649
4609
|
const hasError = Boolean(errorText);
|
|
4650
4610
|
const labelledBy = [ariaLabelledBy, label ? labelId : void 0].filter(Boolean).join(" ") || void 0;
|
|
4651
|
-
return jsxRuntime.jsxs(Stack, {
|
|
4611
|
+
return jsxRuntime.jsxs(Stack, { _gap: "s", align: fullWidth ? "stretch" : void 0, className, children: [label && jsxRuntime.jsx(Box, { id: labelId, children: jsxRuntime.jsx(LabelText, { children: label }) }), jsxRuntime.jsx(Select, Object.assign({}, rest, { ref, isError: hasError, "aria-labelledby": labelledBy, "aria-invalid": hasError || void 0, "aria-errormessage": hasError ? helperErrorTextId : void 0 })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
|
|
4652
4612
|
});
|
|
4653
4613
|
|
|
4654
4614
|
const useOutsideClick = (ref, callback) => {
|
|
@@ -4861,13 +4821,13 @@ const ModalDialog = (_a) => {
|
|
|
4861
4821
|
const Body = (_a) => {
|
|
4862
4822
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
4863
4823
|
const classes = classNames__default.default(className, "ui:overflow-y-auto ui:flex-1");
|
|
4864
|
-
return jsxRuntime.jsx(Box, Object.assign({ className: classes,
|
|
4824
|
+
return jsxRuntime.jsx(Box, Object.assign({ className: classes, _p: "l" }, rest));
|
|
4865
4825
|
};
|
|
4866
4826
|
const Header$1 = (props) => {
|
|
4867
|
-
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", justify: "between", align: "center",
|
|
4827
|
+
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", justify: "between", align: "center", _gap: "l", _p: "l" }, props));
|
|
4868
4828
|
};
|
|
4869
4829
|
const Footer = (props) => {
|
|
4870
|
-
return jsxRuntime.jsx(Stack, Object.assign({ as: "footer",
|
|
4830
|
+
return jsxRuntime.jsx(Stack, Object.assign({ as: "footer", _p: "l", backgroundColor: "background", className: "ui:rounded-b-[inherit]" }, props));
|
|
4871
4831
|
};
|
|
4872
4832
|
const CloseButton = (props) => {
|
|
4873
4833
|
return jsxRuntime.jsx(TertiaryButton, Object.assign({ leadingIcon: jsxRuntime.jsx(CrossIcon, {}) }, props));
|
|
@@ -4875,7 +4835,7 @@ const CloseButton = (props) => {
|
|
|
4875
4835
|
const Actions = (_a) => {
|
|
4876
4836
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
4877
4837
|
const classes = classNames__default.default(className, "ui:self-end");
|
|
4878
|
-
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x",
|
|
4838
|
+
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", _gap: "m", className: classes }, rest));
|
|
4879
4839
|
};
|
|
4880
4840
|
ModalDialog.Header = Header$1;
|
|
4881
4841
|
ModalDialog.Title = Card.Title;
|
|
@@ -5021,7 +4981,7 @@ const ImagePickerInner = ({
|
|
|
5021
4981
|
var _a2;
|
|
5022
4982
|
setIsImagesPanelOpen(false);
|
|
5023
4983
|
(_a2 = fileInputRef.current) === null || _a2 === void 0 ? void 0 : _a2.click();
|
|
5024
|
-
}, children: localisation.uploadImage }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", disabled: isDisabled, name: `uploaded-${name}`, accept: acceptedMimeTypes.join(","), onChange: uploadImage, className: "ui:hidden" })] }), isClearButtonVisible && selectedMedia !== placeholderImage && !isUploading && jsxRuntime.jsx(SecondaryButton, { text: localisation.clearSelection, isDisabled, isPending: isUploading, onClick: handleDeleteClick })] })] }), jsxRuntime.jsxs(ModalDialog, { open: isImagesPanelOpen, onClose: handleCloseModal, variant: "centered-dialog", size: "l", children: [jsxRuntime.jsxs(ModalDialog.Header, { children: [jsxRuntime.jsx(ModalDialog.Title, { children: localisation.modalTitle }), jsxRuntime.jsx(ModalDialog.CloseButton, { onClick: handleCloseModal })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(ModalDialog.Body, { children: jsxRuntime.jsxs(Stack, { axis: "y",
|
|
4984
|
+
}, children: localisation.uploadImage }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", disabled: isDisabled, name: `uploaded-${name}`, accept: acceptedMimeTypes.join(","), onChange: uploadImage, className: "ui:hidden" })] }), isClearButtonVisible && selectedMedia !== placeholderImage && !isUploading && jsxRuntime.jsx(SecondaryButton, { text: localisation.clearSelection, isDisabled, isPending: isUploading, onClick: handleDeleteClick })] })] }), jsxRuntime.jsxs(ModalDialog, { open: isImagesPanelOpen, onClose: handleCloseModal, variant: "centered-dialog", size: "l", children: [jsxRuntime.jsxs(ModalDialog.Header, { children: [jsxRuntime.jsx(ModalDialog.Title, { children: localisation.modalTitle }), jsxRuntime.jsx(ModalDialog.CloseButton, { onClick: handleCloseModal })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(ModalDialog.Body, { children: jsxRuntime.jsxs(Stack, { axis: "y", _gap: "l", width: "full", className: "ui:max-h-135", children: [jsxRuntime.jsx(SearchInput, { name: "searchImages", className: "ui:w-full", value: search, placeholder: localisation.search, onChange: handleSearchChange }), jsxRuntime.jsx("div", { className: "ui:flex ui:w-full ui:flex-row ui:flex-wrap ui:items-center", children: filteredCategories === null || filteredCategories === void 0 ? void 0 : filteredCategories.map((category) => jsxRuntime.jsx(ImageCategory, { category, images: images === null || images === void 0 ? void 0 : images.filter((categoryImage) => categoryImage.includes(category.folder)), highlightedImage, handleImageClick, isTypeCompact }, category.folder)) })] }) }), jsxRuntime.jsx(ModalDialog.Footer, { children: jsxRuntime.jsx(ModalDialog.Actions, { width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", _gap: "m", justify: "end", width: "full", children: [jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: handleCloseModal, children: localisation.cancel }), jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", onClick: handleConfirmSelection, children: localisation.selectButton })] }) }) })] })] });
|
|
5025
4985
|
};
|
|
5026
4986
|
const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
|
|
5027
4987
|
var _a, _b;
|
|
@@ -5150,7 +5110,7 @@ const LinkTooltip = ({ linkElement, editorInstance, onClose, translations }) =>
|
|
|
5150
5110
|
top: "anchor(bottom)",
|
|
5151
5111
|
left: "anchor(left)",
|
|
5152
5112
|
marginTop: "8px"
|
|
5153
|
-
}, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, {
|
|
5113
|
+
}, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, { _p: "m", children: jsxRuntime.jsxs(Text, { children: [translations.visitUrlLabel, " ", jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ui:text-blue-600 ui:underline ui:text-sm ui:overflow-hidden ui:text-ellipsis ui:whitespace-nowrap hover:ui:text-blue-700", children: url })] }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsxs(Stack, { axis: "x", _gap: "base", _p: "m", children: [jsxRuntime.jsx(TertiaryButton, { onClick: handleEditLink, text: translations.editButtonText, size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: handleRemoveLink, text: translations.removeButtonText, size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: onClose, text: translations.closeButtonText, size: "medium" })] })] }) }) });
|
|
5154
5114
|
};
|
|
5155
5115
|
|
|
5156
5116
|
const TextEditorToolbarButton = ({ option, hasTextSelected, editor, translations }) => {
|
|
@@ -5234,7 +5194,7 @@ const getGroupKey = (group) => {
|
|
|
5234
5194
|
}).join("-");
|
|
5235
5195
|
};
|
|
5236
5196
|
const TextEditorToolbar = ({ toolbarId, toolbar, hasTextSelected, editor, translations }) => {
|
|
5237
|
-
return jsxRuntime.jsx(Stack, { axis: "x",
|
|
5197
|
+
return jsxRuntime.jsx(Stack, { axis: "x", _gap: "l", _px: "xs", id: toolbarId, children: toolbar.map((group) => jsxRuntime.jsx(Stack, { axis: "x", _gap: "xs", children: group.map((option, optionIndex) => jsxRuntime.jsx(TextEditorToolbarButton, { option, hasTextSelected, editor, translations }, getOptionKey(option, optionIndex))) }, getGroupKey(group))) });
|
|
5238
5198
|
};
|
|
5239
5199
|
|
|
5240
5200
|
const MentionList = React.forwardRef(({ items, command }, ref) => {
|
|
@@ -5750,7 +5710,7 @@ const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
|
|
|
5750
5710
|
const Summary = (_a) => {
|
|
5751
5711
|
var { children, omitOpenIndicator = false, className } = _a, rest = __rest(_a, ["children", "omitOpenIndicator", "className"]);
|
|
5752
5712
|
const { isOpen } = React.useContext(context$2);
|
|
5753
|
-
return jsxRuntime.jsx(Stack, Object.assign({ as: "summary", cursor: "pointer", className: classNames__default.default("ui:rounded-[inherit]", className) }, rest, { children: jsxRuntime.jsx(Stack, { axis: "x", justify: "between", align: "center", width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", width: "full", align: "center",
|
|
5713
|
+
return jsxRuntime.jsx(Stack, Object.assign({ as: "summary", cursor: "pointer", className: classNames__default.default("ui:rounded-[inherit]", className) }, rest, { children: jsxRuntime.jsx(Stack, { axis: "x", justify: "between", align: "center", width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", width: "full", align: "center", _gap: "base", children: [!omitOpenIndicator && jsxRuntime.jsx(DefaultOpenIndicator, { isOpen }), jsxRuntime.jsx(Box, { width: "full", children })] }) }) }));
|
|
5754
5714
|
};
|
|
5755
5715
|
DetailsDisclosure.Summary = Summary;
|
|
5756
5716
|
Summary.OpenIndicator = OpenIndicator;
|
|
@@ -5768,11 +5728,11 @@ const VerticalMenu = (props) => {
|
|
|
5768
5728
|
const shouldShowCollapseButton = localization && Boolean(onCollapseButtonClick);
|
|
5769
5729
|
const hasHeaderContent = title || shouldShowCollapseButton;
|
|
5770
5730
|
const contextValue = React.useMemo(() => ({ variant }), [variant]);
|
|
5771
|
-
return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div",
|
|
5731
|
+
return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", _px: "base", _py: "l", align: "normal", className: classNames__default.default("ui:max-h-full", {
|
|
5772
5732
|
"ui:max-w-full": !isCollapsed,
|
|
5773
5733
|
[DEFAULT_TEXT_CLASS_NAME]: isCollapsed,
|
|
5774
5734
|
[COLLAPSED_WIDTH_CLASS_NAME]: isCollapsed
|
|
5775
|
-
}, className) }, rest, { children: [jsxRuntime.jsxs(Stack, { width: "full", children: [header && jsxRuntime.jsx(Box, { width: "full", children: header }), jsxRuntime.jsxs(Stack, { axis: "x",
|
|
5735
|
+
}, className) }, rest, { children: [jsxRuntime.jsxs(Stack, { width: "full", children: [header && jsxRuntime.jsx(Box, { width: "full", children: header }), jsxRuntime.jsxs(Stack, { axis: "x", _gap: "base", _p: hasHeaderContent ? "l" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
|
|
5776
5736
|
Box,
|
|
5777
5737
|
{
|
|
5778
5738
|
/**
|
|
@@ -5797,7 +5757,7 @@ const VerticalMenu = (props) => {
|
|
|
5797
5757
|
children: jsxRuntime.jsx(SidebarIcon, {})
|
|
5798
5758
|
}) })
|
|
5799
5759
|
}
|
|
5800
|
-
)] })] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx(Stack, { width: "full", className: "ui:flex-1 ui:overflow-y-auto",
|
|
5760
|
+
)] })] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx(Stack, { width: "full", className: "ui:flex-1 ui:overflow-y-auto", _gap: isCollapsed ? "base" : void 0, children: props.children }), jsxRuntime.jsx("div", { className: "ui:mt-auto", children: footer })] })) });
|
|
5801
5761
|
};
|
|
5802
5762
|
VerticalMenu.Divider = MenuDivider;
|
|
5803
5763
|
VerticalMenu.Item = MenuItem;
|
|
@@ -5896,7 +5856,7 @@ function MenuItemLayout(props) {
|
|
|
5896
5856
|
return jsxRuntime.jsx("div", { children });
|
|
5897
5857
|
}
|
|
5898
5858
|
const itemIsTextOrNumber = typeof text === "string" || typeof text === "number";
|
|
5899
|
-
return jsxRuntime.jsxs(Stack, { axis: isCollapsed ? "y" : "x", align: isCollapsed ? "center" : "start",
|
|
5859
|
+
return jsxRuntime.jsxs(Stack, { axis: isCollapsed ? "y" : "x", align: isCollapsed ? "center" : "start", _gap: isCollapsed ? "s" : "base", className: classNames__default.default("ui:relative", className), children: [icon && /**
|
|
5900
5860
|
* If the item is a text or number, we can to add an aria-label to the icon
|
|
5901
5861
|
* so that it can be read by screen readers. If the item is not a text or
|
|
5902
5862
|
* number, there's not much we can do and accessibility is up to the consumer.
|
|
@@ -5924,7 +5884,7 @@ function MenuItemNotificationBubble(props) {
|
|
|
5924
5884
|
), children: jsxRuntime.jsx(Text, { color: "white", as: "span", className: "ui:align-text-bottom", children: props.children }) });
|
|
5925
5885
|
}
|
|
5926
5886
|
function MenuDivider(props) {
|
|
5927
|
-
return jsxRuntime.jsx(Box, { width: "full",
|
|
5887
|
+
return jsxRuntime.jsx(Box, { width: "full", _my: "base", children: jsxRuntime.jsx(Divider, Object.assign({ className: "ui:border-neutral-border-high-contrast ui:last:border-b-1 ui:w-full" }, props)) });
|
|
5928
5888
|
}
|
|
5929
5889
|
function MenuItemGroupOpenIndicator({ isOpen }) {
|
|
5930
5890
|
return jsxRuntime.jsx(Text, { color: "on-surface", as: "span", children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
|
|
@@ -5933,7 +5893,7 @@ function MenuItemGroupOpenIndicator({ isOpen }) {
|
|
|
5933
5893
|
}
|
|
5934
5894
|
function MenuItemGroup(_a) {
|
|
5935
5895
|
var { title, children, className } = _a, rest = __rest(_a, ["title", "children", "className"]);
|
|
5936
|
-
return jsxRuntime.jsxs(DetailsDisclosure, Object.assign({ omitBorder: true, omitSummaryDivider: true, className: classNames__default.default("ui:w-full", className) }, rest, { children: [jsxRuntime.jsx(DetailsDisclosure.Summary, { hoverBackgroundColor: void 0,
|
|
5896
|
+
return jsxRuntime.jsxs(DetailsDisclosure, Object.assign({ omitBorder: true, omitSummaryDivider: true, className: classNames__default.default("ui:w-full", className) }, rest, { children: [jsxRuntime.jsx(DetailsDisclosure.Summary, { hoverBackgroundColor: void 0, omitOpenIndicator: true, children: jsxRuntime.jsx(MenuItemLayout, { children: jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsxs(Stack, { axis: "x", align: "center", justify: "between", children: [jsxRuntime.jsx(MenuItemText, { children: title }), jsxRuntime.jsx(DetailsDisclosure.Summary.OpenIndicator, { component: MenuItemGroupOpenIndicator })] }) }) }) }), jsxRuntime.jsx(MenuItemPadding, { paddingX: true, paddingY: false, children })] }));
|
|
5937
5897
|
}
|
|
5938
5898
|
function SectionTitle(props) {
|
|
5939
5899
|
return jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsx(Text, { variant: "strong", children: props.children }) });
|
|
@@ -5949,7 +5909,7 @@ const ActiveFilters = (props) => {
|
|
|
5949
5909
|
return categorizedFilterOption;
|
|
5950
5910
|
});
|
|
5951
5911
|
}).filter((activeFilter) => activeFilter.isChecked);
|
|
5952
|
-
return jsxRuntime.jsx("div", { className: "ui:bg-gray-100", children: jsxRuntime.jsxs("div", { className: "ui:min-h-15 ui:max-w-7xl ui:py-s ui:sm:flex ui:sm:items-center", children: [jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: localization.filtersLabel }), jsxRuntime.jsx("div", { className: "ui:mt-2 ui:sm:ml-4 ui:sm:mt-0", children: jsxRuntime.jsx(Stack, { axis: "x",
|
|
5912
|
+
return jsxRuntime.jsx("div", { className: "ui:bg-gray-100", children: jsxRuntime.jsxs("div", { className: "ui:min-h-15 ui:max-w-7xl ui:py-s ui:sm:flex ui:sm:items-center", children: [jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: localization.filtersLabel }), jsxRuntime.jsx("div", { className: "ui:mt-2 ui:sm:ml-4 ui:sm:mt-0", children: jsxRuntime.jsx(Stack, { axis: "x", _gap: "l", align: "center", wrap: true, children: activeFilters.map((activeFilter, idx) => jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("span", { className: "ui:mx-1 ui:inline-flex ui:items-center ui:rounded-full ui:border ui:border-neutral-border-high-contrast ui:bg-white ui:py-xxxxs ui:pl-m ui:pr-xxs ui:hover:border-neutral-interactive ui:hover:bg-primary-background", children: [jsxRuntime.jsx(Text, { variant: "base", children: activeFilter.label }), jsxRuntime.jsx("button", { type: "button", "aria-label": removeFilterOptionLabelGetter(activeFilter), className: "ui:mx-1 ui:inline-flex ui:h-6 ui:w-6 ui:shrink-0 ui:rounded-full ui:p-0 ui:text-on-surface", onClick: () => onRemoveActiveFilter({
|
|
5953
5913
|
changedFilterOption: {
|
|
5954
5914
|
isChecked: false,
|
|
5955
5915
|
id: activeFilter.id,
|
|
@@ -6080,7 +6040,7 @@ const FilterBar = (_a) => {
|
|
|
6080
6040
|
};
|
|
6081
6041
|
const hasFiltersApplied = categorizedFilters.some((categorizedFilter) => categorizedFilter.options.some((option) => option.isChecked));
|
|
6082
6042
|
const shouldShowActiveFilters = hasFiltersApplied ? true : !hideActiveFiltersWhenEmpty;
|
|
6083
|
-
return jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("section", { "aria-labelledby": "filter-heading", children: [jsxRuntime.jsx(Box, { borderRadius: "l",
|
|
6043
|
+
return jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("section", { "aria-labelledby": "filter-heading", children: [jsxRuntime.jsx(Box, { borderRadius: "l", _py: "l", children: jsxRuntime.jsxs(Stack, { axis: "x", align: "normal", justify: "between", className: "ui:-ml-m", children: [jsxRuntime.jsx(Stack, { axis: "x", align: "normal", children: menuOrder.map((menu, index) => {
|
|
6084
6044
|
const hasPresetMenu = presetFilterOptions && menuOrder.includes("presetFilters");
|
|
6085
6045
|
const hasSortingMenu = sortingOptions && menuOrder.includes("sorting");
|
|
6086
6046
|
const hasMultipleMenus = hasPresetMenu && hasSortingMenu;
|
|
@@ -6310,7 +6270,7 @@ const FileUpload = React.forwardRef((props, ref) => {
|
|
|
6310
6270
|
}, onChange: handleChangeEvent, disabled: isDisabled }, otherProps))] });
|
|
6311
6271
|
});
|
|
6312
6272
|
const UploadedFileSection = ({ file, onRemove }) => {
|
|
6313
|
-
return jsxRuntime.jsx("div", { className: "ui:inline-block ui:flex-row ui:rounded-lg ui:bg-blue-100", children: jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center",
|
|
6273
|
+
return jsxRuntime.jsx("div", { className: "ui:inline-block ui:flex-row ui:rounded-lg ui:bg-blue-100", children: jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center", _gap: "base", _py: "base", _px: "l", title: file.name, children: [jsxRuntime.jsx(Text, { truncate: true, className: "ui:max-w-55", children: file.name }), jsxRuntime.jsx(TertiaryButton, { icon: "TrashBinIcon", onClick: onRemove })] }) });
|
|
6314
6274
|
};
|
|
6315
6275
|
|
|
6316
6276
|
const StatusIndicator = (props) => {
|
|
@@ -6334,7 +6294,7 @@ const Skeleton = ({ width, height, variant = "text", children }) => {
|
|
|
6334
6294
|
var templateObject_1;
|
|
6335
6295
|
|
|
6336
6296
|
const LoadingState = () => {
|
|
6337
|
-
return jsxRuntime.jsx(Card, { className: classNames__default.default("ui:w-full ui:border ui:border-slate-100"), padding: false, elevation: "surface", children: jsxRuntime.jsx(Box, { children: jsxRuntime.jsxs(Stack, { width: "full",
|
|
6297
|
+
return jsxRuntime.jsx(Card, { className: classNames__default.default("ui:w-full ui:border ui:border-slate-100"), padding: false, elevation: "surface", children: jsxRuntime.jsx(Box, { children: jsxRuntime.jsxs(Stack, { width: "full", _p: "l", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsx(Stack, { _gap: "m", width: "full", children: jsxRuntime.jsxs(Stack, { _gap: "l", axis: "x", align: "center", width: "full", children: [jsxRuntime.jsx(Skeleton, { variant: "rounded", width: 24, height: 24 }), jsxRuntime.jsxs(Stack, { width: "full", children: [jsxRuntime.jsx(Title, { variant: "xs", children: jsxRuntime.jsx(Skeleton, { width: 120 }) }), jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: jsxRuntime.jsx(Skeleton, { width: 100 }) })] })] }) }), jsxRuntime.jsx(Skeleton, { variant: "rounded", width: 24, height: 24 })] }) }) });
|
|
6338
6298
|
};
|
|
6339
6299
|
|
|
6340
6300
|
const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, statusText, state = "default", variant, disabled = false, isLoading = false, onClick }) => {
|
|
@@ -6346,7 +6306,7 @@ const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, status
|
|
|
6346
6306
|
"ui:text-start ui:hover:border-slate-200 ui:focus:border-blue-800 ui:focus:outline-primary": onClick
|
|
6347
6307
|
}), padding: false, elevation: presentation === "highlighted" ? "medium" : "surface", onClick, disabled, children: jsxRuntime.jsx(Box, { className: classNames__default.default({
|
|
6348
6308
|
["ui:border-l-8 ui:border-primary"]: presentation === "highlighted"
|
|
6349
|
-
}), children: jsxRuntime.jsxs(Stack, { width: "full",
|
|
6309
|
+
}), children: jsxRuntime.jsxs(Stack, { width: "full", _p: "l", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsxs(Stack, { _gap: "m", children: [statusText && jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: statusText }), jsxRuntime.jsxs(Stack, { _gap: "l", axis: "x", align: "center", children: [(icon === null || icon === void 0 ? void 0 : icon.url) && jsxRuntime.jsx("img", { className: "ui:shrink-0", width: 24, height: 24, src: icon.url }), (icon === null || icon === void 0 ? void 0 : icon.iconKey) && jsxRuntime.jsx(Icon, { className: "ui:shrink-0", name: icon.iconKey }), leadingIcon, jsxRuntime.jsxs(Stack, { width: "full", children: [(presentation === "bold" || presentation === "highlighted") && jsxRuntime.jsx(Title, { variant: "xs", children: title }), presentation === "default" && getTitle(), typeof subtitle === "string" ? jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: subtitle }) : subtitle] })] })] }), trailingIcon] }) }) }), jsxRuntime.jsx("svg", { role: "presentation", width: "17", height: "27", viewBox: "0 0 17 27", fill: "none", className: classNames__default.default("ui:translate-x-[-1.5px]", {
|
|
6350
6310
|
["ui:invisible"]: presentation !== "highlighted"
|
|
6351
6311
|
}), children: jsxRuntime.jsx("path", { d: "M0.5 0.5L16 13L0.5 26", stroke: "rgb(226 232 240)", fill: "#fff" }) })] });
|
|
6352
6312
|
};
|
|
@@ -6355,7 +6315,7 @@ const TimelineDot = ({ className }) => jsxRuntime.jsx("svg", { width: "24", heig
|
|
|
6355
6315
|
const TimelineEmphasizedDot = ({ className }) => jsxRuntime.jsx("svg", { width: "24", height: "24", fill: "none", className, children: jsxRuntime.jsx("circle", { cx: "12", cy: "11.5", r: "9.5", className: "ui:fill-white ui:stroke-blue-800 ui:stroke-[4px]" }) });
|
|
6356
6316
|
const TimelineCardLayout = (_a) => {
|
|
6357
6317
|
var { dotStyle, lineStyle = "solid", children } = _a, stackProps = __rest(_a, ["dotStyle", "lineStyle", "children"]);
|
|
6358
|
-
return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x",
|
|
6318
|
+
return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x", _gap: "m", width: "full", align: "stretch" }, stackProps, { children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: classNames__default.default("ui:relative ui:w-full ui:max-w-[24px] ui:bg-position-[left_11px_top]"), children: jsxRuntime.jsxs("div", { className: classNames__default.default("ui:absolute ui:top-[-8px] ui:h-[calc(100%+16px)] ui:w-full ui:max-w-[24px] ui:bg-position-[left_11px_top]", {
|
|
6359
6319
|
"ui:timelineCardLayout-line--dashed": lineStyle === "dashed",
|
|
6360
6320
|
"ui:timelineCardLayout-line--solid": lineStyle === "solid"
|
|
6361
6321
|
}), children: [dotStyle === "emphasized" && jsxRuntime.jsx(TimelineEmphasizedDot, { className: "ui:absolute ui:bottom-0 ui:top-0 ui:my-auto" }), dotStyle === "regular" && jsxRuntime.jsx(TimelineDot, { className: "ui:absolute ui:bottom-0 ui:top-0 ui:my-auto" })] }) }), jsxRuntime.jsx(Box, { width: "full", children })] }));
|
|
@@ -6697,14 +6657,14 @@ const RangeCoverageComponent = (_a) => {
|
|
|
6697
6657
|
return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
|
|
6698
6658
|
}
|
|
6699
6659
|
const segments = calculateSegments({ sections, start, end });
|
|
6700
|
-
return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, {
|
|
6660
|
+
return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Title, { variant: "xs", level: "3", children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "l", children: jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
|
|
6701
6661
|
const background = isColorTuple(swatch.color) ? createStripedPattern({
|
|
6702
6662
|
colorA: swatch.color[0],
|
|
6703
6663
|
colorB: swatch.color[1],
|
|
6704
6664
|
startOffset: -6
|
|
6705
6665
|
}) : swatch.color;
|
|
6706
6666
|
return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
|
|
6707
|
-
}) }) })] }), jsxRuntime.jsxs(Stack, {
|
|
6667
|
+
}) }) })] }), jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
|
|
6708
6668
|
var _a2, _b;
|
|
6709
6669
|
const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
|
|
6710
6670
|
const renderedTooltipContent = (_a2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.render) === null || _a2 === void 0 ? void 0 : _a2.call(tooltipContent, sectionDataWithBackground);
|
|
@@ -6801,7 +6761,7 @@ const isSupportedFileType = (fileUrl) => {
|
|
|
6801
6761
|
return isSupportedImage(fileUrl) || isSupportedFile(fileUrl);
|
|
6802
6762
|
};
|
|
6803
6763
|
const ButtonTooltipContent = ({ children }) => {
|
|
6804
|
-
return jsxRuntime.jsxs(Tooltip__namespace.Content, { className: classNames__default.default("ui:max-w-55", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4, children: [jsxRuntime.jsx(Box, { backgroundColor: "secondary-background",
|
|
6764
|
+
return jsxRuntime.jsxs(Tooltip__namespace.Content, { className: classNames__default.default("ui:max-w-55", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4, children: [jsxRuntime.jsx(Box, { backgroundColor: "secondary-background", _px: "l", _py: "m", borderRadius: "xxxxs", children: jsxRuntime.jsx(Text, { color: "on-secondary", children }) }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "ui:fill-secondary-background" })] });
|
|
6805
6765
|
};
|
|
6806
6766
|
const backdropClassNames = classNames__default.default("ui:backdrop:backdrop-blur-sm", "ui:backdrop:bg-overlay-dark");
|
|
6807
6767
|
const previewClassNames = classNames__default.default(
|
|
@@ -6833,7 +6793,7 @@ const FilePreview = (props) => {
|
|
|
6833
6793
|
const onCloseDialog = (event) => {
|
|
6834
6794
|
onClose(event);
|
|
6835
6795
|
};
|
|
6836
|
-
return jsxRuntime.jsx(ModalDialog, { className: classNames__default.default(backdropClassNames, "ui:[&>div]:bg-transparent"), variant: "full-screen", open: true, onClose: onCloseDialog, children: jsxRuntime.jsxs(Stack, { align: "center", justify: "center", width: "full", className: previewClassNames, children: [jsxRuntime.jsxs(Stack, { axis: "x",
|
|
6796
|
+
return jsxRuntime.jsx(ModalDialog, { className: classNames__default.default(backdropClassNames, "ui:[&>div]:bg-transparent"), variant: "full-screen", open: true, onClose: onCloseDialog, children: jsxRuntime.jsxs(Stack, { align: "center", justify: "center", width: "full", className: previewClassNames, children: [jsxRuntime.jsxs(Stack, { axis: "x", _gap: "l", className: buttonContainerClassNames, children: [jsxRuntime.jsx("a", { href: downloadUrl !== null && downloadUrl !== void 0 ? downloadUrl : fileUrl, target: "_blank", rel: "noopener noreferrer", onClick: onDownload, children: jsxRuntime.jsxs(Tooltip__namespace.Root, { children: [jsxRuntime.jsx(Tooltip__namespace.Trigger, { children: jsxRuntime.jsx(SecondaryIconButton, { label: localization.downloadButtonLabel, children: jsxRuntime.jsx(DownloadIcon, {}) }) }), jsxRuntime.jsx(ButtonTooltipContent, { children: localization.downloadButtonLabel })] }) }), jsxRuntime.jsxs(Tooltip__namespace.Root, { children: [jsxRuntime.jsx(Tooltip__namespace.Trigger, { children: jsxRuntime.jsx(SecondaryIconButton, { label: localization.closeButtonLabel, onClick: onClose, children: jsxRuntime.jsx(CrossIcon, {}) }) }), jsxRuntime.jsx(ButtonTooltipContent, { children: localization.closeButtonLabel })] })] }), isSupportedImage(fileUrl) && jsxRuntime.jsx(Image$1, { src: fileUrl, className: imageClassNames }), isSupportedFile(fileUrl) && jsxRuntime.jsx("embed", { src: fileUrl, className: fileClassNames })] }) });
|
|
6837
6797
|
};
|
|
6838
6798
|
|
|
6839
6799
|
const AlertWidget = (props) => {
|
|
@@ -6865,7 +6825,7 @@ const AlertWidget = (props) => {
|
|
|
6865
6825
|
"ui:bg-warning-background": props.variant === "amber",
|
|
6866
6826
|
"ui:border-on-warning": props.variant === "amber",
|
|
6867
6827
|
"ui:text-on-warning": props.variant === "amber"
|
|
6868
|
-
}), borderRadius: "xxs",
|
|
6828
|
+
}), borderRadius: "xxs", _px: "base", _py: "s", axis: "x", _gap: "base", align: "center", children: [jsxRuntime.jsx(IconComponent, {}), typeof props.content === "string" ? jsxRuntime.jsx(Text, { color: contentTextColor, variant: "strong", children: props.content }) : props.content] });
|
|
6869
6829
|
};
|
|
6870
6830
|
|
|
6871
6831
|
const context = React.createContext(false);
|
|
@@ -6945,13 +6905,13 @@ const Header = (props) => {
|
|
|
6945
6905
|
"ui:items-center": slotsAlignment === "center",
|
|
6946
6906
|
"ui:items-start": slotsAlignment === "start"
|
|
6947
6907
|
});
|
|
6948
|
-
return jsxRuntime.jsxs(Stack, Object.assign({ "data-component": "PageWithCenteredContentLayout.Header", as: "header",
|
|
6908
|
+
return jsxRuntime.jsxs(Stack, Object.assign({ "data-component": "PageWithCenteredContentLayout.Header", as: "header", _p: "2xl", axis: "x", className: classes, _gap: "2xl", align: "center", justify: "center", backgroundColor: "background" }, restProps, { children: [(leftActionSlot || rightActionSlot) && jsxRuntime.jsx(Box, { className: "ui:w-[--spacing(9)] ui:h-[--spacing(9)]", children: leftActionSlot }), jsxRuntime.jsx(Stack, { axis: "x", justify: "center", width: "full", className: "ui:lg:max-w-[--spacing(310)]", children: jsxRuntime.jsx(Box, { width: "full", children }) }), (leftActionSlot || rightActionSlot) && jsxRuntime.jsx(Box, { className: "ui:w-[--spacing(9)] ui:h-[--spacing(9)]", children: rightActionSlot })] }));
|
|
6949
6909
|
};
|
|
6950
6910
|
Header.displayName = "PageWithCenteredContentLayout.Header";
|
|
6951
6911
|
const Main = (props) => {
|
|
6952
6912
|
const { children, className } = props, restProps = __rest(props, ["children", "className"]);
|
|
6953
6913
|
const classes = classNames__default.default(className, "ui:max-w-[100vw] ui:h-full ui:content-center ui:z-10");
|
|
6954
|
-
return jsxRuntime.jsx(Stack, Object.assign({ "data-component": "PageWithCenteredContentLayout.Main", as: "main", width: "full", align: "center",
|
|
6914
|
+
return jsxRuntime.jsx(Stack, Object.assign({ "data-component": "PageWithCenteredContentLayout.Main", as: "main", width: "full", align: "center", _p: "2xl", className: classes }, restProps, { children: jsxRuntime.jsx(Box, { width: "full", className: "ui:lg:max-w-[--spacing(310)] ui:h-full", children }) }));
|
|
6955
6915
|
};
|
|
6956
6916
|
Main.displayName = "PageWithCenteredContentLayout.Main";
|
|
6957
6917
|
const PageWithCenteredContentLayout = (props) => {
|
|
@@ -7071,7 +7031,7 @@ const NaturalLanguageFormInputSelect = Object.assign(NaturalLanguageFormInputSel
|
|
|
7071
7031
|
|
|
7072
7032
|
const NaturalLanguageForm = React__namespace.default.forwardRef((props, ref) => {
|
|
7073
7033
|
const { className, children, height = "md" } = props;
|
|
7074
|
-
return jsxRuntime.jsx(NaturalLanguageFormContext.Provider, { value: { height }, children: jsxRuntime.jsx(Stack, { ref, axis: "x",
|
|
7034
|
+
return jsxRuntime.jsx(NaturalLanguageFormContext.Provider, { value: { height }, children: jsxRuntime.jsx(Stack, { ref, axis: "x", _gap: "m", align: "center", wrap: true, className, children }) });
|
|
7075
7035
|
});
|
|
7076
7036
|
NaturalLanguageForm.displayName = "NaturalLanguageForm";
|
|
7077
7037
|
const NaturalLanguageFormWithSubComponents = Object.assign(NaturalLanguageForm, {
|