@luscii-healthtech/web-ui 56.0.1 → 56.2.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 +65 -60
- 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/Icons/WandIcon.d.ts +4 -0
- package/dist/src/components/Icons/index.d.ts +1 -0
- package/dist/src/components/Radio/LabeledRadioCard.d.ts +1 -1
- package/dist/src/generated/components/Icons/WandIcon.d.ts +4 -0
- package/dist/src/generated/components/Icons/index.d.ts +1 -0
- package/dist/src/generated/components/Radio/LabeledRadioCard.d.ts +1 -1
- package/dist/src/generated/generated/iconNames.d.ts +1 -1
- package/dist/src/generated/iconNames.d.ts +1 -1
- package/dist/src/generated/iconNames.js +1 -0
- package/dist/src/generated/iconNames.js.map +1 -1
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -815,6 +815,9 @@ var UploadIcon = IconWrapper(SvgUploadIcon);
|
|
|
815
815
|
const SvgVideoIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "m10.794 15.365 4.356-2.798a.64.64 0 0 0 .321-.566.64.64 0 0 0-.321-.568l-4.356-2.798a.62.62 0 0 0-.69-.037.64.64 0 0 0-.354.604v5.596q0 .41.354.604.354.195.69-.037m1.208 6.135a9.3 9.3 0 0 1-3.706-.748 9.6 9.6 0 0 1-3.016-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.972 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .749 3.704q0 1.972-.748 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20" }) }));
|
|
816
816
|
var VideoIcon = IconWrapper(SvgVideoIcon);
|
|
817
817
|
|
|
818
|
+
const SvgWandIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "m16.111 12.675-2.082 3.354a.59.59 0 0 1-.619.282q-.4-.055-.497-.46l-.738-2.982-7.094 7.104a.74.74 0 0 1-.515.22.7.7 0 0 1-.54-.22.72.72 0 0 1-.216-.527q0-.31.217-.527l7.104-7.12-2.973-.738q-.404-.096-.465-.492a.57.57 0 0 1 .278-.613l3.354-2.068-.29-3.95a.55.55 0 0 1 .318-.59.55.55 0 0 1 .666.08l3.029 2.549 3.66-1.487q.378-.161.666.126t.126.667l-1.477 3.66 2.548 3.013a.56.56 0 0 1 .086.67.54.54 0 0 1-.586.324zM3.821 6.08a.44.44 0 0 1-.14-.322q0-.18.14-.32l1.002-1.003q.14-.14.321-.14.18 0 .321.14l1.002 1.002q.14.14.14.321 0 .18-.14.322L5.465 7.083a.44.44 0 0 1-.32.14.44.44 0 0 1-.322-.14zm10.054 7.354 1.43-2.331 2.74.204-1.77-2.102 1.029-2.535-2.535 1.03-2.102-1.754.204 2.723-2.321 1.446 2.654.656zm4.044 6.744-1.002-1.002a.44.44 0 0 1-.14-.321q0-.18.14-.322l1.002-1.001q.14-.14.321-.14.18 0 .321.14l1.002 1.001q.14.14.14.322 0 .18-.14.32l-1.002 1.003a.44.44 0 0 1-.32.14.44.44 0 0 1-.322-.14" }) }));
|
|
819
|
+
var WandIcon = IconWrapper(SvgWandIcon);
|
|
820
|
+
|
|
818
821
|
const SvgWorkflowIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M9 1.999A3 3 0 0 1 12 5v4a3 3 0 0 1-3 3h-.999v3a1 1 0 0 0 .999.999h3V15a3 3 0 0 1 3-3h4.001a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H15a3 3 0 0 1-3-3v-1H9a3 3 0 0 1-3-3v-3H5a3 3 0 0 1-3.001-3V5c0-1.656 1.345-3 3.001-3.001zm6 12.002a1 1 0 0 0-.999.999v4A1 1 0 0 0 15 20.001h4.001c.552 0 1-.449 1-1.001v-4a1 1 0 0 0-1-.999zm-10-10A1 1 0 0 0 4.001 5v4A1 1 0 0 0 5 10.001h1.967L7 9.999l.034.002H9c.552 0 1.001-.449 1.001-1.001V5A1 1 0 0 0 9 4.001z" }) }));
|
|
819
822
|
var WorkflowIcon = IconWrapper(SvgWorkflowIcon);
|
|
820
823
|
|
|
@@ -983,6 +986,7 @@ var Icons = /*#__PURE__*/Object.freeze({
|
|
|
983
986
|
UploadIcon: UploadIcon,
|
|
984
987
|
VaultColoredIcon: VaultColoredIcon,
|
|
985
988
|
VideoIcon: VideoIcon,
|
|
989
|
+
WandIcon: WandIcon,
|
|
986
990
|
WarningIcon: ExclamationMarkIcon,
|
|
987
991
|
WorkflowIcon: WorkflowIcon
|
|
988
992
|
});
|
|
@@ -1509,7 +1513,7 @@ const BaseListItem = React__namespace.default.forwardRef(({ itemId, title, toolt
|
|
|
1509
1513
|
title,
|
|
1510
1514
|
subtitle,
|
|
1511
1515
|
icon
|
|
1512
|
-
}, 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",
|
|
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", _gap: "base", align: "center", className: classNames__default.default({
|
|
1513
1517
|
"ui:opacity-0": onlyShowAccessoriesOnHover,
|
|
1514
1518
|
"ui:group-hover:opacity-100": onlyShowAccessoriesOnHover
|
|
1515
1519
|
}), children: accessories })] }));
|
|
@@ -1635,7 +1639,7 @@ const DefaultList = (_a) => {
|
|
|
1635
1639
|
});
|
|
1636
1640
|
};
|
|
1637
1641
|
const composeIconWithChevron = (parentItem, isExpanded) => {
|
|
1638
|
-
return jsxRuntime.jsxs(Stack, { axis: "x",
|
|
1642
|
+
return jsxRuntime.jsxs(Stack, { axis: "x", _gap: "m", align: "center", children: [jsxRuntime.jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: (e) => {
|
|
1639
1643
|
e.stopPropagation();
|
|
1640
1644
|
toggleExpand(parentItem.itemId);
|
|
1641
1645
|
}, onKeyDown: (e) => {
|
|
@@ -1852,7 +1856,7 @@ const Content$2 = (_a) => {
|
|
|
1852
1856
|
return "ui:fill-secondary-background";
|
|
1853
1857
|
}
|
|
1854
1858
|
};
|
|
1855
|
-
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(),
|
|
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(), _px: "l", _py: "m", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: getArrowBackgroundColor() })] })) });
|
|
1856
1860
|
};
|
|
1857
1861
|
Content$2.displayName = "Tooltip.Content";
|
|
1858
1862
|
const Root$1 = (props) => jsxRuntime.jsx(Tooltip__namespace.Root, Object.assign({}, props));
|
|
@@ -2000,7 +2004,7 @@ const CenteredHero = ({ title, text, image, slots, background = "slate-50", imag
|
|
|
2000
2004
|
}), "data-test-id": dataTestId, children: [image && jsxRuntime.jsx("img", { src: image, className: classNames__default.default("ui:mb-4", {
|
|
2001
2005
|
"ui:max-h-36": imageSize === "small",
|
|
2002
2006
|
"ui:max-h-72": imageSize === "large"
|
|
2003
|
-
}) }), 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, {
|
|
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, { _mt: "l", children: slots === null || slots === void 0 ? void 0 : slots.bottom })] });
|
|
2004
2008
|
};
|
|
2005
2009
|
|
|
2006
2010
|
const AccordionListActions = (props) => {
|
|
@@ -2202,7 +2206,7 @@ function ChatBubble(props) {
|
|
|
2202
2206
|
}, 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", {
|
|
2203
2207
|
"ui:group-hover/chat-bubble:bg-blue-50": isInteractive && color === "blue",
|
|
2204
2208
|
"ui:group-hover/chat-bubble:bg-slate-50": isInteractive && color === "grey"
|
|
2205
|
-
}), 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",
|
|
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", _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] })] }) }));
|
|
2206
2210
|
}
|
|
2207
2211
|
function Meta(props) {
|
|
2208
2212
|
const { sender, timestamp } = props;
|
|
@@ -2331,7 +2335,7 @@ function MoreAvatarsLabel(props) {
|
|
|
2331
2335
|
if (amountOfAvatars <= maxAvatars) {
|
|
2332
2336
|
return null;
|
|
2333
2337
|
}
|
|
2334
|
-
return jsxRuntime.jsx(Box, {
|
|
2338
|
+
return jsxRuntime.jsx(Box, { _ml: "s", children: jsxRuntime.jsx(Text, { variant: "medium", color: "on-surface-variant", children: moreAvatarsLabel(amountOfAvatars - maxAvatars) }) });
|
|
2335
2339
|
}
|
|
2336
2340
|
|
|
2337
2341
|
const Badge = (props) => {
|
|
@@ -2395,7 +2399,7 @@ const DotButton = (_a) => {
|
|
|
2395
2399
|
};
|
|
2396
2400
|
const DotList = ({ activeIndex, amount, onClickIndex, buttonLabel }) => {
|
|
2397
2401
|
const items = Array.from({ length: amount }).map((_, i) => i);
|
|
2398
|
-
return jsxRuntime.jsx(Stack, { as: "ol", role: "tablist", axis: "x",
|
|
2402
|
+
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)) });
|
|
2399
2403
|
};
|
|
2400
2404
|
const Carousel = ({ id, className, slides = [], labels }) => {
|
|
2401
2405
|
const [currentIndex, setCurrentIndex] = React.useState(0);
|
|
@@ -2431,7 +2435,7 @@ const Carousel = ({ id, className, slides = [], labels }) => {
|
|
|
2431
2435
|
const index = Math.round(scrollLeft / scrollWidth);
|
|
2432
2436
|
setCurrentIndexDebounced(index);
|
|
2433
2437
|
}, [setCurrentIndexDebounced]);
|
|
2434
|
-
return jsxRuntime.jsx("div", { ref: slidesContainer, id, className, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch",
|
|
2438
|
+
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 }) })] }) });
|
|
2435
2439
|
};
|
|
2436
2440
|
|
|
2437
2441
|
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}";
|
|
@@ -2562,7 +2566,7 @@ const LabeledCheckboxBase = React__namespace.default.forwardRef((props, ref) =>
|
|
|
2562
2566
|
const { id, disabled } = attributes;
|
|
2563
2567
|
const semanticId = React__namespace.default.useId();
|
|
2564
2568
|
const isCard = variant === "card";
|
|
2565
|
-
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x",
|
|
2569
|
+
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", htmlFor: id, className: classNames__default.default(
|
|
2566
2570
|
"ui:cursor-pointer",
|
|
2567
2571
|
{
|
|
2568
2572
|
"ui:cursor-not-allowed": disabled
|
|
@@ -2609,13 +2613,13 @@ const LabeledCheckboxCard = React__namespace.default.forwardRef((props, ref) =>
|
|
|
2609
2613
|
const LabeledCheckboxGroup = (props) => {
|
|
2610
2614
|
const { children, title, className } = props;
|
|
2611
2615
|
const semanticId = React__namespace.default.useId();
|
|
2612
|
-
return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className),
|
|
2616
|
+
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 })] });
|
|
2613
2617
|
};
|
|
2614
2618
|
|
|
2615
2619
|
const LabeledCheckboxCardGroup = (props) => {
|
|
2616
2620
|
const { children, title, className, columns = 2, helperText, errorText } = props, attributes = __rest(props, ["children", "title", "className", "columns", "helperText", "errorText"]);
|
|
2617
2621
|
const semanticId = React__namespace.default.useId();
|
|
2618
|
-
return jsxRuntime.jsxs(Stack, Object.assign({ as: "fieldset", "aria-describedby": semanticId, className,
|
|
2622
|
+
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", {
|
|
2619
2623
|
"ui:grid-cols-1": columns === 1,
|
|
2620
2624
|
"ui:grid-cols-2": columns === 2,
|
|
2621
2625
|
"ui:grid-cols-3": columns === 3,
|
|
@@ -2729,7 +2733,7 @@ const NotificationBanner = (_a) => {
|
|
|
2729
2733
|
blue: "blue-800"
|
|
2730
2734
|
};
|
|
2731
2735
|
const colour = color ? textColor[color] : "base";
|
|
2732
|
-
return jsxRuntime.jsxs(Stack, Object.assign({
|
|
2736
|
+
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, {
|
|
2733
2737
|
"ui:inline-flex": !stretch
|
|
2734
2738
|
}) }, boxProps, { children: [icon && (typeof icon === "function" ? React__namespace.default.createElement(icon, {
|
|
2735
2739
|
className: "ui:w-6 ui:h-6 ui:mr-3 ui:shrink-0"
|
|
@@ -2748,7 +2752,7 @@ function RadioInner(_a) {
|
|
|
2748
2752
|
const { value, disabled } = otherProps;
|
|
2749
2753
|
const nameHtmlFor = `${name}-field-${value}`;
|
|
2750
2754
|
const semanticId = React__namespace.default.useId();
|
|
2751
|
-
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x",
|
|
2755
|
+
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 })] })] });
|
|
2752
2756
|
}
|
|
2753
2757
|
const RadioV2 = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(RadioInner, Object.assign({}, props, { innerRef: ref })));
|
|
2754
2758
|
|
|
@@ -2909,7 +2913,7 @@ const InfoField = (props) => {
|
|
|
2909
2913
|
};
|
|
2910
2914
|
break;
|
|
2911
2915
|
}
|
|
2912
|
-
return jsxRuntime.jsxs(Stack, { axis: "x", align: "center",
|
|
2916
|
+
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 })] }))] });
|
|
2913
2917
|
};
|
|
2914
2918
|
|
|
2915
2919
|
function cn$1(...inputs) {
|
|
@@ -2998,20 +3002,20 @@ const LabeledDatePicker = (_a) => {
|
|
|
2998
3002
|
"ui:!border-negative-border": isError,
|
|
2999
3003
|
"ui:!focus:outline-negative": isError
|
|
3000
3004
|
}, classNameFromProps);
|
|
3001
|
-
return jsxRuntime.jsxs(Stack, { as: "label",
|
|
3005
|
+
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 })] });
|
|
3002
3006
|
};
|
|
3003
3007
|
|
|
3004
3008
|
const LabeledInput = React__namespace.default.forwardRef((props, ref) => {
|
|
3005
3009
|
const { className, helperText, errorText, label, fullWidth, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "fullWidth", "aria-describedby"]);
|
|
3006
3010
|
const helperErrorTextId = React__namespace.default.useId();
|
|
3007
|
-
return jsxRuntime.jsxs(Stack, { as: "label",
|
|
3011
|
+
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 })] });
|
|
3008
3012
|
});
|
|
3009
3013
|
|
|
3010
3014
|
const LabeledRadio = React__namespace.default.forwardRef((props, ref) => {
|
|
3011
3015
|
const { children, label, helperText, errorText, className, inputClassName } = props, attributes = __rest(props, ["children", "label", "helperText", "errorText", "className", "inputClassName"]);
|
|
3012
3016
|
const { id, disabled } = attributes;
|
|
3013
3017
|
const semanticId = React__namespace.default.useId();
|
|
3014
|
-
return jsxRuntime.jsxs(Stack, { as: "label", axis: "x",
|
|
3018
|
+
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 })] })] });
|
|
3015
3019
|
});
|
|
3016
3020
|
function RadioLabel(props) {
|
|
3017
3021
|
const { children, label, disabled } = props;
|
|
@@ -3034,7 +3038,7 @@ const LabeledRadioGroup = (props) => {
|
|
|
3034
3038
|
axis: "y",
|
|
3035
3039
|
_gap: "base"
|
|
3036
3040
|
};
|
|
3037
|
-
return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className),
|
|
3041
|
+
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 })] });
|
|
3038
3042
|
};
|
|
3039
3043
|
|
|
3040
3044
|
const Actions$1 = (props) => {
|
|
@@ -3056,7 +3060,7 @@ const Padding$1 = (props) => {
|
|
|
3056
3060
|
const { children } = props, rest = __rest(props, ["children"]);
|
|
3057
3061
|
return (
|
|
3058
3062
|
// Using margin here, because adjacent margins collapse.
|
|
3059
|
-
jsxRuntime.jsx(Box, Object.assign({
|
|
3063
|
+
jsxRuntime.jsx(Box, Object.assign({ _m: "xl" }, rest, { children }))
|
|
3060
3064
|
);
|
|
3061
3065
|
};
|
|
3062
3066
|
|
|
@@ -3181,7 +3185,7 @@ const TabsContent = React__namespace.forwardRef((_a, ref) => {
|
|
|
3181
3185
|
});
|
|
3182
3186
|
TabsContent.displayName = "Tabs.Content";
|
|
3183
3187
|
const TabsPadding = (props) => {
|
|
3184
|
-
return jsxRuntime.jsx(Box, Object.assign({
|
|
3188
|
+
return jsxRuntime.jsx(Box, Object.assign({ _py: "xl" }, props));
|
|
3185
3189
|
};
|
|
3186
3190
|
const TabLabelText = (props) => {
|
|
3187
3191
|
return jsxRuntime.jsx(Text, Object.assign({ variant: "strong", color: "current", as: "span" }, props));
|
|
@@ -3401,7 +3405,7 @@ function TableBodyRowDataCell(props) {
|
|
|
3401
3405
|
}
|
|
3402
3406
|
const content = props.fieldConfig.content(props.item);
|
|
3403
3407
|
const isTextCellEmpty = isTableFieldText(content) && !content.text && !content.tag;
|
|
3404
|
-
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",
|
|
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", _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", {
|
|
3405
3409
|
"ui:opacity-0": props.fieldConfig.onlyShowContentOnHovering,
|
|
3406
3410
|
"ui:group-hover:opacity-100": props.fieldConfig.onlyShowContentOnHovering
|
|
3407
3411
|
}), children: content.map((action) => {
|
|
@@ -3418,7 +3422,7 @@ const CellTextContent = (props) => {
|
|
|
3418
3422
|
if (!props.content.description && !props.content.text && !props.emptyFieldContent) {
|
|
3419
3423
|
return null;
|
|
3420
3424
|
}
|
|
3421
|
-
return jsxRuntime.jsxs(Stack, {
|
|
3425
|
+
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", {
|
|
3422
3426
|
"ui:break-all": props.content.breakAllWord,
|
|
3423
3427
|
"ui:break-words": !props.content.breakAllWord
|
|
3424
3428
|
}), children: (_a = props.content.text) !== null && _a !== void 0 ? _a : props.emptyFieldContent }), props.content.description && jsxRuntime.jsx(Text, { className: classNames__default.default({
|
|
@@ -3612,7 +3616,7 @@ const PaginationMenuLarge = (props) => {
|
|
|
3612
3616
|
props.onChange(Number.parseInt(newPage, 10), props.pageSize);
|
|
3613
3617
|
}
|
|
3614
3618
|
};
|
|
3615
|
-
return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "center",
|
|
3619
|
+
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 })] })] });
|
|
3616
3620
|
};
|
|
3617
3621
|
|
|
3618
3622
|
const PaginationMenuCursor = (props) => {
|
|
@@ -3622,7 +3626,7 @@ const PaginationMenuCursor = (props) => {
|
|
|
3622
3626
|
props.onChange(cursor);
|
|
3623
3627
|
}
|
|
3624
3628
|
};
|
|
3625
|
-
return jsxRuntime.jsxs(Stack, { axis: "x",
|
|
3629
|
+
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 })] });
|
|
3626
3630
|
};
|
|
3627
3631
|
|
|
3628
3632
|
const Wrapper = ({ className, children }) => jsxRuntime.jsx(Stack, { axis: "x", align: "center", className: classNames__default.default(className), justify: "between", width: "full", children });
|
|
@@ -3682,7 +3686,7 @@ function Table(_a) {
|
|
|
3682
3686
|
const shouldDisplayHeaderSelectAll = isSelectable && items && items.length > 0;
|
|
3683
3687
|
const shouldDisplaySelectAllControls = shouldDisplayHeaderSelectAll && rowSelectionHeaderAccessories && selectedItems && selectedItems.length > 0;
|
|
3684
3688
|
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 })] });
|
|
3685
|
-
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",
|
|
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", _gap: "m", _my: "base", children: [toggleAllCheckbox, rowSelectionHeaderAccessories] }) : null }) : null, jsxRuntime.jsx(
|
|
3686
3690
|
TableBody,
|
|
3687
3691
|
{
|
|
3688
3692
|
// TODO: early return to remove all the boolean juggling.
|
|
@@ -4079,12 +4083,12 @@ const Step = ({ title, subtitle, state = "completed" }) => {
|
|
|
4079
4083
|
titleColor = "blue-800";
|
|
4080
4084
|
break;
|
|
4081
4085
|
}
|
|
4082
|
-
return jsxRuntime.jsxs(Box, { width: "full", children: [jsxRuntime.jsx(Box, {
|
|
4086
|
+
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 })] });
|
|
4083
4087
|
};
|
|
4084
4088
|
|
|
4085
4089
|
const Steps = (props) => {
|
|
4086
4090
|
const { children, className } = props;
|
|
4087
|
-
return jsxRuntime.jsx(Stack, { axis: "x", justify: "stretch",
|
|
4091
|
+
return jsxRuntime.jsx(Stack, { axis: "x", justify: "stretch", _gap: "xl", className, children: React__namespace.default.Children.map(children, (child) => {
|
|
4088
4092
|
if (!React__namespace.default.isValidElement(child)) {
|
|
4089
4093
|
return null;
|
|
4090
4094
|
}
|
|
@@ -4228,7 +4232,7 @@ const VerticalDivider = (props) => {
|
|
|
4228
4232
|
}, className) }, rest));
|
|
4229
4233
|
};
|
|
4230
4234
|
const VerticalFlowDivider = (props) => {
|
|
4231
|
-
return jsxRuntime.jsx(Stack, Object.assign({ width: "full", align: "center", role: "separator",
|
|
4235
|
+
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" })] }) }));
|
|
4232
4236
|
};
|
|
4233
4237
|
const HorizontalFlowDivider = (props) => {
|
|
4234
4238
|
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" }) }) }));
|
|
@@ -4364,11 +4368,11 @@ const PreviewPhone = ({ className, children }) => {
|
|
|
4364
4368
|
};
|
|
4365
4369
|
|
|
4366
4370
|
const SectionHeader = ({ title, aside, isLoading = false }) => {
|
|
4367
|
-
return jsxRuntime.jsxs(Stack, { axis: "x", as: "header", justify: "between", align: "center", width: "full", "data-test-id": "section-header",
|
|
4371
|
+
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] });
|
|
4368
4372
|
};
|
|
4369
4373
|
|
|
4370
4374
|
const SectionFooter = ({ children }) => {
|
|
4371
|
-
return jsxRuntime.jsx(Stack, { as: "footer", width: "full",
|
|
4375
|
+
return jsxRuntime.jsx(Stack, { as: "footer", width: "full", _p: "l", className: "ui:border-t-slate-200", children });
|
|
4372
4376
|
};
|
|
4373
4377
|
|
|
4374
4378
|
const Section = (_a) => {
|
|
@@ -4635,7 +4639,7 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
|
|
|
4635
4639
|
const LabeledSelect = React__namespace.default.forwardRef((props, ref) => {
|
|
4636
4640
|
const { className, helperText, errorText, label, fullWidth, "aria-describedby": ariaDescribedBy } = props, rest = __rest(props, ["className", "helperText", "errorText", "label", "fullWidth", "aria-describedby"]);
|
|
4637
4641
|
const helperErrorTextId = React__namespace.default.useId();
|
|
4638
|
-
return jsxRuntime.jsxs(Stack, { as: "label",
|
|
4642
|
+
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 })] });
|
|
4639
4643
|
});
|
|
4640
4644
|
|
|
4641
4645
|
const LabeledSelectSearchable = React__namespace.default.forwardRef((props, ref) => {
|
|
@@ -4644,7 +4648,7 @@ const LabeledSelectSearchable = React__namespace.default.forwardRef((props, ref)
|
|
|
4644
4648
|
const helperErrorTextId = React__namespace.default.useId();
|
|
4645
4649
|
const hasError = Boolean(errorText);
|
|
4646
4650
|
const labelledBy = [ariaLabelledBy, label ? labelId : void 0].filter(Boolean).join(" ") || void 0;
|
|
4647
|
-
return jsxRuntime.jsxs(Stack, {
|
|
4651
|
+
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 })] });
|
|
4648
4652
|
});
|
|
4649
4653
|
|
|
4650
4654
|
const useOutsideClick = (ref, callback) => {
|
|
@@ -4857,13 +4861,13 @@ const ModalDialog = (_a) => {
|
|
|
4857
4861
|
const Body = (_a) => {
|
|
4858
4862
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
4859
4863
|
const classes = classNames__default.default(className, "ui:overflow-y-auto ui:flex-1");
|
|
4860
|
-
return jsxRuntime.jsx(Box, Object.assign({ className: classes,
|
|
4864
|
+
return jsxRuntime.jsx(Box, Object.assign({ className: classes, _p: "l" }, rest));
|
|
4861
4865
|
};
|
|
4862
4866
|
const Header$1 = (props) => {
|
|
4863
|
-
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", justify: "between", align: "center",
|
|
4867
|
+
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", justify: "between", align: "center", _gap: "l", _p: "l" }, props));
|
|
4864
4868
|
};
|
|
4865
4869
|
const Footer = (props) => {
|
|
4866
|
-
return jsxRuntime.jsx(Stack, Object.assign({ as: "footer",
|
|
4870
|
+
return jsxRuntime.jsx(Stack, Object.assign({ as: "footer", _p: "l", backgroundColor: "background", className: "ui:rounded-b-[inherit]" }, props));
|
|
4867
4871
|
};
|
|
4868
4872
|
const CloseButton = (props) => {
|
|
4869
4873
|
return jsxRuntime.jsx(TertiaryButton, Object.assign({ leadingIcon: jsxRuntime.jsx(CrossIcon, {}) }, props));
|
|
@@ -4871,7 +4875,7 @@ const CloseButton = (props) => {
|
|
|
4871
4875
|
const Actions = (_a) => {
|
|
4872
4876
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
4873
4877
|
const classes = classNames__default.default(className, "ui:self-end");
|
|
4874
|
-
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x",
|
|
4878
|
+
return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", _gap: "m", className: classes }, rest));
|
|
4875
4879
|
};
|
|
4876
4880
|
ModalDialog.Header = Header$1;
|
|
4877
4881
|
ModalDialog.Title = Card.Title;
|
|
@@ -5017,7 +5021,7 @@ const ImagePickerInner = ({
|
|
|
5017
5021
|
var _a2;
|
|
5018
5022
|
setIsImagesPanelOpen(false);
|
|
5019
5023
|
(_a2 = fileInputRef.current) === null || _a2 === void 0 ? void 0 : _a2.click();
|
|
5020
|
-
}, 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",
|
|
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", _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 })] }) }) })] })] });
|
|
5021
5025
|
};
|
|
5022
5026
|
const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
|
|
5023
5027
|
var _a, _b;
|
|
@@ -5146,7 +5150,7 @@ const LinkTooltip = ({ linkElement, editorInstance, onClose, translations }) =>
|
|
|
5146
5150
|
top: "anchor(bottom)",
|
|
5147
5151
|
left: "anchor(left)",
|
|
5148
5152
|
marginTop: "8px"
|
|
5149
|
-
}, 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, {
|
|
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, { _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" })] })] }) }) });
|
|
5150
5154
|
};
|
|
5151
5155
|
|
|
5152
5156
|
const TextEditorToolbarButton = ({ option, hasTextSelected, editor, translations }) => {
|
|
@@ -5230,7 +5234,7 @@ const getGroupKey = (group) => {
|
|
|
5230
5234
|
}).join("-");
|
|
5231
5235
|
};
|
|
5232
5236
|
const TextEditorToolbar = ({ toolbarId, toolbar, hasTextSelected, editor, translations }) => {
|
|
5233
|
-
return jsxRuntime.jsx(Stack, { axis: "x",
|
|
5237
|
+
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))) });
|
|
5234
5238
|
};
|
|
5235
5239
|
|
|
5236
5240
|
const MentionList = React.forwardRef(({ items, command }, ref) => {
|
|
@@ -5746,7 +5750,7 @@ const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
|
|
|
5746
5750
|
const Summary = (_a) => {
|
|
5747
5751
|
var { children, omitOpenIndicator = false, className } = _a, rest = __rest(_a, ["children", "omitOpenIndicator", "className"]);
|
|
5748
5752
|
const { isOpen } = React.useContext(context$2);
|
|
5749
|
-
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",
|
|
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", _gap: "base", children: [!omitOpenIndicator && jsxRuntime.jsx(DefaultOpenIndicator, { isOpen }), jsxRuntime.jsx(Box, { width: "full", children })] }) }) }));
|
|
5750
5754
|
};
|
|
5751
5755
|
DetailsDisclosure.Summary = Summary;
|
|
5752
5756
|
Summary.OpenIndicator = OpenIndicator;
|
|
@@ -5764,11 +5768,11 @@ const VerticalMenu = (props) => {
|
|
|
5764
5768
|
const shouldShowCollapseButton = localization && Boolean(onCollapseButtonClick);
|
|
5765
5769
|
const hasHeaderContent = title || shouldShowCollapseButton;
|
|
5766
5770
|
const contextValue = React.useMemo(() => ({ variant }), [variant]);
|
|
5767
|
-
return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div",
|
|
5771
|
+
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", {
|
|
5768
5772
|
"ui:max-w-full": !isCollapsed,
|
|
5769
5773
|
[DEFAULT_TEXT_CLASS_NAME]: isCollapsed,
|
|
5770
5774
|
[COLLAPSED_WIDTH_CLASS_NAME]: isCollapsed
|
|
5771
|
-
}, className) }, rest, { children: [jsxRuntime.jsxs(Stack, { width: "full", children: [header && jsxRuntime.jsx(Box, { width: "full", children: header }), jsxRuntime.jsxs(Stack, { axis: "x",
|
|
5775
|
+
}, 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(
|
|
5772
5776
|
Box,
|
|
5773
5777
|
{
|
|
5774
5778
|
/**
|
|
@@ -5793,7 +5797,7 @@ const VerticalMenu = (props) => {
|
|
|
5793
5797
|
children: jsxRuntime.jsx(SidebarIcon, {})
|
|
5794
5798
|
}) })
|
|
5795
5799
|
}
|
|
5796
|
-
)] })] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx(Stack, { width: "full", className: "ui:flex-1 ui:overflow-y-auto",
|
|
5800
|
+
)] })] }), 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 })] })) });
|
|
5797
5801
|
};
|
|
5798
5802
|
VerticalMenu.Divider = MenuDivider;
|
|
5799
5803
|
VerticalMenu.Item = MenuItem;
|
|
@@ -5892,7 +5896,7 @@ function MenuItemLayout(props) {
|
|
|
5892
5896
|
return jsxRuntime.jsx("div", { children });
|
|
5893
5897
|
}
|
|
5894
5898
|
const itemIsTextOrNumber = typeof text === "string" || typeof text === "number";
|
|
5895
|
-
return jsxRuntime.jsxs(Stack, { axis: isCollapsed ? "y" : "x", align: isCollapsed ? "center" : "start",
|
|
5899
|
+
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 && /**
|
|
5896
5900
|
* If the item is a text or number, we can to add an aria-label to the icon
|
|
5897
5901
|
* so that it can be read by screen readers. If the item is not a text or
|
|
5898
5902
|
* number, there's not much we can do and accessibility is up to the consumer.
|
|
@@ -5920,7 +5924,7 @@ function MenuItemNotificationBubble(props) {
|
|
|
5920
5924
|
), children: jsxRuntime.jsx(Text, { color: "white", as: "span", className: "ui:align-text-bottom", children: props.children }) });
|
|
5921
5925
|
}
|
|
5922
5926
|
function MenuDivider(props) {
|
|
5923
|
-
return jsxRuntime.jsx(Box, { width: "full",
|
|
5927
|
+
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)) });
|
|
5924
5928
|
}
|
|
5925
5929
|
function MenuItemGroupOpenIndicator({ isOpen }) {
|
|
5926
5930
|
return jsxRuntime.jsx(Text, { color: "on-surface", as: "span", children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
|
|
@@ -5929,7 +5933,7 @@ function MenuItemGroupOpenIndicator({ isOpen }) {
|
|
|
5929
5933
|
}
|
|
5930
5934
|
function MenuItemGroup(_a) {
|
|
5931
5935
|
var { title, children, className } = _a, rest = __rest(_a, ["title", "children", "className"]);
|
|
5932
|
-
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,
|
|
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, 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 })] }));
|
|
5933
5937
|
}
|
|
5934
5938
|
function SectionTitle(props) {
|
|
5935
5939
|
return jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsx(Text, { variant: "strong", children: props.children }) });
|
|
@@ -5945,7 +5949,7 @@ const ActiveFilters = (props) => {
|
|
|
5945
5949
|
return categorizedFilterOption;
|
|
5946
5950
|
});
|
|
5947
5951
|
}).filter((activeFilter) => activeFilter.isChecked);
|
|
5948
|
-
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",
|
|
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", _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({
|
|
5949
5953
|
changedFilterOption: {
|
|
5950
5954
|
isChecked: false,
|
|
5951
5955
|
id: activeFilter.id,
|
|
@@ -6076,7 +6080,7 @@ const FilterBar = (_a) => {
|
|
|
6076
6080
|
};
|
|
6077
6081
|
const hasFiltersApplied = categorizedFilters.some((categorizedFilter) => categorizedFilter.options.some((option) => option.isChecked));
|
|
6078
6082
|
const shouldShowActiveFilters = hasFiltersApplied ? true : !hideActiveFiltersWhenEmpty;
|
|
6079
|
-
return jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("section", { "aria-labelledby": "filter-heading", children: [jsxRuntime.jsx(Box, { borderRadius: "l",
|
|
6083
|
+
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) => {
|
|
6080
6084
|
const hasPresetMenu = presetFilterOptions && menuOrder.includes("presetFilters");
|
|
6081
6085
|
const hasSortingMenu = sortingOptions && menuOrder.includes("sorting");
|
|
6082
6086
|
const hasMultipleMenus = hasPresetMenu && hasSortingMenu;
|
|
@@ -6306,7 +6310,7 @@ const FileUpload = React.forwardRef((props, ref) => {
|
|
|
6306
6310
|
}, onChange: handleChangeEvent, disabled: isDisabled }, otherProps))] });
|
|
6307
6311
|
});
|
|
6308
6312
|
const UploadedFileSection = ({ file, onRemove }) => {
|
|
6309
|
-
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",
|
|
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", _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 })] }) });
|
|
6310
6314
|
};
|
|
6311
6315
|
|
|
6312
6316
|
const StatusIndicator = (props) => {
|
|
@@ -6330,7 +6334,7 @@ const Skeleton = ({ width, height, variant = "text", children }) => {
|
|
|
6330
6334
|
var templateObject_1;
|
|
6331
6335
|
|
|
6332
6336
|
const LoadingState = () => {
|
|
6333
|
-
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",
|
|
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", _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 })] }) }) });
|
|
6334
6338
|
};
|
|
6335
6339
|
|
|
6336
6340
|
const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, statusText, state = "default", variant, disabled = false, isLoading = false, onClick }) => {
|
|
@@ -6342,7 +6346,7 @@ const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, status
|
|
|
6342
6346
|
"ui:text-start ui:hover:border-slate-200 ui:focus:border-blue-800 ui:focus:outline-primary": onClick
|
|
6343
6347
|
}), padding: false, elevation: presentation === "highlighted" ? "medium" : "surface", onClick, disabled, children: jsxRuntime.jsx(Box, { className: classNames__default.default({
|
|
6344
6348
|
["ui:border-l-8 ui:border-primary"]: presentation === "highlighted"
|
|
6345
|
-
}), children: jsxRuntime.jsxs(Stack, { width: "full",
|
|
6349
|
+
}), 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]", {
|
|
6346
6350
|
["ui:invisible"]: presentation !== "highlighted"
|
|
6347
6351
|
}), children: jsxRuntime.jsx("path", { d: "M0.5 0.5L16 13L0.5 26", stroke: "rgb(226 232 240)", fill: "#fff" }) })] });
|
|
6348
6352
|
};
|
|
@@ -6351,7 +6355,7 @@ const TimelineDot = ({ className }) => jsxRuntime.jsx("svg", { width: "24", heig
|
|
|
6351
6355
|
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]" }) });
|
|
6352
6356
|
const TimelineCardLayout = (_a) => {
|
|
6353
6357
|
var { dotStyle, lineStyle = "solid", children } = _a, stackProps = __rest(_a, ["dotStyle", "lineStyle", "children"]);
|
|
6354
|
-
return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x",
|
|
6358
|
+
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]", {
|
|
6355
6359
|
"ui:timelineCardLayout-line--dashed": lineStyle === "dashed",
|
|
6356
6360
|
"ui:timelineCardLayout-line--solid": lineStyle === "solid"
|
|
6357
6361
|
}), 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 })] }));
|
|
@@ -6693,14 +6697,14 @@ const RangeCoverageComponent = (_a) => {
|
|
|
6693
6697
|
return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
|
|
6694
6698
|
}
|
|
6695
6699
|
const segments = calculateSegments({ sections, start, end });
|
|
6696
|
-
return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, {
|
|
6700
|
+
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) => {
|
|
6697
6701
|
const background = isColorTuple(swatch.color) ? createStripedPattern({
|
|
6698
6702
|
colorA: swatch.color[0],
|
|
6699
6703
|
colorB: swatch.color[1],
|
|
6700
6704
|
startOffset: -6
|
|
6701
6705
|
}) : swatch.color;
|
|
6702
6706
|
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);
|
|
6703
|
-
}) }) })] }), jsxRuntime.jsxs(Stack, {
|
|
6707
|
+
}) }) })] }), 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) => {
|
|
6704
6708
|
var _a2, _b;
|
|
6705
6709
|
const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
|
|
6706
6710
|
const renderedTooltipContent = (_a2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.render) === null || _a2 === void 0 ? void 0 : _a2.call(tooltipContent, sectionDataWithBackground);
|
|
@@ -6797,7 +6801,7 @@ const isSupportedFileType = (fileUrl) => {
|
|
|
6797
6801
|
return isSupportedImage(fileUrl) || isSupportedFile(fileUrl);
|
|
6798
6802
|
};
|
|
6799
6803
|
const ButtonTooltipContent = ({ children }) => {
|
|
6800
|
-
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",
|
|
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", _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" })] });
|
|
6801
6805
|
};
|
|
6802
6806
|
const backdropClassNames = classNames__default.default("ui:backdrop:backdrop-blur-sm", "ui:backdrop:bg-overlay-dark");
|
|
6803
6807
|
const previewClassNames = classNames__default.default(
|
|
@@ -6829,7 +6833,7 @@ const FilePreview = (props) => {
|
|
|
6829
6833
|
const onCloseDialog = (event) => {
|
|
6830
6834
|
onClose(event);
|
|
6831
6835
|
};
|
|
6832
|
-
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",
|
|
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", _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 })] }) });
|
|
6833
6837
|
};
|
|
6834
6838
|
|
|
6835
6839
|
const AlertWidget = (props) => {
|
|
@@ -6861,7 +6865,7 @@ const AlertWidget = (props) => {
|
|
|
6861
6865
|
"ui:bg-warning-background": props.variant === "amber",
|
|
6862
6866
|
"ui:border-on-warning": props.variant === "amber",
|
|
6863
6867
|
"ui:text-on-warning": props.variant === "amber"
|
|
6864
|
-
}), borderRadius: "xxs",
|
|
6868
|
+
}), 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] });
|
|
6865
6869
|
};
|
|
6866
6870
|
|
|
6867
6871
|
const context = React.createContext(false);
|
|
@@ -6941,13 +6945,13 @@ const Header = (props) => {
|
|
|
6941
6945
|
"ui:items-center": slotsAlignment === "center",
|
|
6942
6946
|
"ui:items-start": slotsAlignment === "start"
|
|
6943
6947
|
});
|
|
6944
|
-
return jsxRuntime.jsxs(Stack, Object.assign({ "data-component": "PageWithCenteredContentLayout.Header", as: "header",
|
|
6948
|
+
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 })] }));
|
|
6945
6949
|
};
|
|
6946
6950
|
Header.displayName = "PageWithCenteredContentLayout.Header";
|
|
6947
6951
|
const Main = (props) => {
|
|
6948
6952
|
const { children, className } = props, restProps = __rest(props, ["children", "className"]);
|
|
6949
6953
|
const classes = classNames__default.default(className, "ui:max-w-[100vw] ui:h-full ui:content-center ui:z-10");
|
|
6950
|
-
return jsxRuntime.jsx(Stack, Object.assign({ "data-component": "PageWithCenteredContentLayout.Main", as: "main", width: "full", align: "center",
|
|
6954
|
+
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 }) }));
|
|
6951
6955
|
};
|
|
6952
6956
|
Main.displayName = "PageWithCenteredContentLayout.Main";
|
|
6953
6957
|
const PageWithCenteredContentLayout = (props) => {
|
|
@@ -7067,7 +7071,7 @@ const NaturalLanguageFormInputSelect = Object.assign(NaturalLanguageFormInputSel
|
|
|
7067
7071
|
|
|
7068
7072
|
const NaturalLanguageForm = React__namespace.default.forwardRef((props, ref) => {
|
|
7069
7073
|
const { className, children, height = "md" } = props;
|
|
7070
|
-
return jsxRuntime.jsx(NaturalLanguageFormContext.Provider, { value: { height }, children: jsxRuntime.jsx(Stack, { ref, axis: "x",
|
|
7074
|
+
return jsxRuntime.jsx(NaturalLanguageFormContext.Provider, { value: { height }, children: jsxRuntime.jsx(Stack, { ref, axis: "x", _gap: "m", align: "center", wrap: true, className, children }) });
|
|
7071
7075
|
});
|
|
7072
7076
|
NaturalLanguageForm.displayName = "NaturalLanguageForm";
|
|
7073
7077
|
const NaturalLanguageFormWithSubComponents = Object.assign(NaturalLanguageForm, {
|
|
@@ -7371,6 +7375,7 @@ exports.UploadIcon = UploadIcon;
|
|
|
7371
7375
|
exports.VaultColoredIcon = VaultColoredIcon;
|
|
7372
7376
|
exports.VerticalMenu = VerticalMenu;
|
|
7373
7377
|
exports.VideoIcon = VideoIcon;
|
|
7378
|
+
exports.WandIcon = WandIcon;
|
|
7374
7379
|
exports.WarningIcon = ExclamationMarkIcon;
|
|
7375
7380
|
exports.WeekdaysPicker = WeekdaysPicker;
|
|
7376
7381
|
exports.WorkflowIcon = WorkflowIcon;
|