@indico-data/design-system 2.34.3 → 2.35.0

package/lib/index.esm.js

@@ -20448,6 +20448,7 @@ const indicons = {
     form: (jsx("svg", { viewBox: "0 0 100 100", fill: "currentColor", children: jsx("path", { d: "M81,0H19c-5,0-9,4-9,9v82c0,5,4,9,9,9h62c5,0,9-4,9-9V9C90,4,86,0,81,0z M80,90H20V10h60V90z M74,26H26v-6h48V26z M74,38H26v-6h48V38z M74,49.7H26v-6h48V49.7z M74,79.8H56v-6h18V79.8z M74,67.8H56v-6h18V67.8z M34.2,80l14.1-14.1L44,61.8l-9.9,10L30,67.7l-4,4.1L34.2,80z" }) })),
     gallery: (jsx("svg", { viewBox: "0 0 102 102", fill: "currentColor", children: jsx("path", { d: "M5.9 46H40c3.3 0 6-2.7 6-6V5.9c0-2.5-2.3-4.4-4.8-3.9C21.5 5.9 5.9 21.5 1.9 41.2c-.5 2.5 1.4 4.8 4 4.8zM36 13.9V36H13.9C18 26 26 18 36 13.9zM62 56c-3.3 0-6 2.7-6 6v34.2c0 2.5 2.3 4.4 4.8 3.9 19.8-4 35.4-19.6 39.3-39.3.5-2.5-1.4-4.8-3.9-4.8H62zm4 32.1V66h22.1C84 76 76 84 66 88.1zM40 56H5.9c-2.5 0-4.4 2.3-3.9 4.8 4 19.8 19.6 35.4 39.3 39.3 2.5.5 4.8-1.4 4.8-3.9V62c-.1-3.3-2.8-6-6.1-6zM13.9 66H36v22.1C26 84 18 76 13.9 66zM62 46h34.2c2.5 0 4.4-2.3 3.9-4.8-4-19.8-19.6-35.4-39.3-39.3-2.5-.5-4.8 1.4-4.8 4V40c0 3.3 2.7 6 6 6zm26.1-10H66V13.9C76 18 84 26 88.1 36z" }) })),
     'find-documents': (jsxs("svg", { viewBox: "0 0 100 100", children: [jsx("path", { fill: "#efeaf5", d: "M46.4 .8c-.8-.6-1.8-.8-2.6-.8H12.4C10 0 8 2.6 8 5v60c0 2.4 2 5 4.4 5h46.9c2.4 0 4.4-2.6 4.4-5V19.8c0-.8-.2-1.8-.8-2.4zM58.4 64.3H13.5V5.5H43v12c0 2 1.4 3.4 3.4 3.4h12" }), jsx("path", { fill: "#c1afd5", d: "M91.3 95.6 74.6 78.9C78 74.7 80 69.4 80 63.8 80.2 50.7 69.5 40 56.3 40c-13.1.2-23.8 10.9-23.8 24s10.7 23.8 23.8 23.8c5.7 0 10.7-2 14.9-5.2l16.7 16.7c.4.4 1.2.8 1.8.8.8 0 1.2-.2 1.8-.8.8-1.3.8-2.7-.2-3.7m-35-12.9c-10.4 0-18.9-8.4-18.9-18.6s8.4-18.9 18.9-18.9 18.9 8.4 18.9 18.9-8.5 18.6-18.9 18.6" })] })),
+    'gen-ai': (jsx("svg", { viewBox: "0 0 20 23", fill: "currentColor", children: jsx("path", { d: "M9.304 4.9c.124 0 .186-.07.218-.18.32-1.685.3-1.725 2.103-2.058.124-.02.197-.09.197-.212 0-.12-.073-.191-.197-.211-1.793-.353-1.74-.394-2.103-2.057C9.49.07 9.428 0 9.304 0s-.187.07-.218.182c-.362 1.663-.3 1.704-2.103 2.057-.114.02-.197.09-.197.211s.083.192.197.212c1.803.353 1.782.373 2.103 2.057.031.111.094.182.218.182M4.29 11.839c.196 0 .331-.121.352-.303.373-2.692.466-2.692 3.325-3.226.187-.03.322-.151.322-.343 0-.182-.135-.313-.322-.343-2.859-.383-2.963-.474-3.325-3.216a.34.34 0 0 0-.352-.313c-.187 0-.322.131-.342.323C3.606 7.119 3.46 7.109.622 7.623c-.187.04-.321.161-.321.343 0 .202.134.312.362.343 2.818.443 2.943.514 3.285 3.206.02.202.155.323.342.323M11.314 23c.27 0 .466-.192.518-.464.735-5.525 1.533-6.362 7.148-6.967.29-.03.487-.242.487-.504 0-.263-.196-.464-.486-.505-5.616-.605-6.414-1.442-7.15-6.967-.05-.272-.248-.454-.517-.454-.27 0-.466.182-.508.454-.735 5.525-1.543 6.362-7.148 6.967-.3.04-.498.242-.498.505 0 .262.197.474.498.504 5.594.716 6.371 1.452 7.148 6.967.042.272.239.464.508.464" }) })),
     graphiql: (jsx("svg", { viewBox: "0 0 102 102", fill: "currentColor", children: jsx("path", { d: "M90,62.8c-0.8-0.4-1.5-0.7-2.3-0.9V38.1c0.8-0.2,1.6-0.5,2.4-0.9c4.3-2.5,5.7-7.9,3.3-12.2c-2.5-4.3-7.9-5.7-12.2-3.3  c-0.8,0.4-1.4,1-2,1.6L58.5,11.5c0.2-0.8,0.4-1.7,0.4-2.5C58.9,4,54.9,0,50,0s-8.9,4-8.9,8.9c0,0.9,0.1,1.7,0.4,2.5L20.9,23.3  c-0.6-0.6-1.2-1.1-2-1.6c-4.3-2.5-9.7-1-12.2,3.3c-2.5,4.3-1,9.7,3.3,12.2c0.8,0.4,1.6,0.7,2.4,0.9v23.8c-0.8,0.2-1.6,0.5-2.3,0.9  C5.7,65.3,4.3,70.7,6.7,75s7.9,5.7,12.2,3.3c0.8-0.4,1.4-1,2-1.6l20.6,11.9c-0.2,0.8-0.4,1.6-0.4,2.5c0,4.9,4,8.9,8.9,8.9  s8.9-4,8.9-8.9c0-1-0.2-1.9-0.5-2.8l20.4-11.8c0.6,0.7,1.4,1.3,2.2,1.8c4.3,2.5,9.7,1,12.2-3.3C95.8,70.7,94.3,65.3,90,62.8z   M23.1,68.4c-0.2-0.8-0.5-1.6-0.9-2.3c-0.4-0.8-1-1.4-1.6-2l26.9-46.6c0.8,0.2,1.6,0.4,2.5,0.4c0.9,0,1.7-0.1,2.5-0.4l26.9,46.6  c-0.6,0.6-1.1,1.2-1.6,2c-0.4,0.8-0.7,1.5-0.9,2.3H23.1z M77,27c-0.6,2.2-0.4,4.7,0.8,6.9c1.3,2.2,3.3,3.6,5.6,4.2v23.8  c-0.1,0-0.2,0.1-0.3,0.1L56.2,15.4c0.1-0.1,0.2-0.2,0.2-0.2L77,27z M43.6,15.1c0.1,0.1,0.2,0.2,0.3,0.3L16.9,62  c-0.1,0-0.2-0.1-0.3-0.1V38.1c2.3-0.6,4.3-2,5.6-4.2c1.3-2.2,1.5-4.7,0.8-6.9L43.6,15.1z M56.6,85.1c-1.6-1.8-4-2.9-6.6-2.9  c-2.5,0-4.8,1-6.4,2.7L23,73c0-0.1,0.1-0.2,0.1-0.3h53.8c0,0.2,0.1,0.4,0.2,0.6L56.6,85.1z" }) })),
     'grid-view': (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M8.9 2.4v6.5H2.4V2.4zM9.4 0H1.9C.9 0 0 .9 0 1.9v7.4c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9V1.9c.1-1-.8-1.9-1.8-1.9m12.2 2.4v6.5h-6.5V2.4zm.5-2.4h-7.4c-1.1 0-1.9.9-1.9 1.9v7.4c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9V1.9c0-1-.9-1.9-1.9-1.9M8.9 15.1v6.5H2.4v-6.5zm.5-2.4H1.9c-1.1 0-1.9.9-1.9 1.9V22c0 1.1.9 2 1.9 2h7.4c1.1 0 1.9-.9 1.9-1.9v-7.4c.1-1.1-.8-2-1.8-2m12.2 2.4v6.5h-6.5v-6.5zm.5-2.4h-7.4c-1.1 0-1.9.9-1.9 1.9V22c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9v-7.4c0-1-.9-1.9-1.9-1.9" }) })),
     happy: (jsx("svg", { viewBox: "0 0 100 100", fill: "currentColor", children: jsx("path", { d: "M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zm-78.6-7.4c-.1-3.1 2.5-5.7 5.7-5.7 3.1 0 5.7 2.6 5.7 5.7 0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5C37.7 36.7 32.8 32 27 32s-10.6 4.8-10.6 10.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5zM73 32c-5.9 0-10.6 4.8-10.6 10.6 0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5c0-3.1 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5C83.7 36.7 78.9 32 73 32zm4.8 24.6c-1.4-.6-3 0-3.5 1.4-4.2 9.7-13.7 16-24.3 16-10.6 0-20.1-6.3-24.3-16.1-.6-1.4-2.1-2-3.5-1.4-1.4.6-2 2.1-1.4 3.5 5.1 11.7 16.5 19.3 29.3 19.3 12.7 0 24.2-7.5 29.1-19.3.6-1.2-.1-2.8-1.4-3.4z" }) })),
@@ -20964,7 +20965,7 @@ const DisplayFormError = ({ message }) => {
 };
 
 const Input = React__default.forwardRef((_a, ref) => {
-    var { name, placeholder, onChange, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "className"]);
+    var { name, placeholder, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
         onChange({ target: { value: '' } });
@@ -20973,7 +20974,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);
 
@@ -21001,7 +21002,7 @@ const Textarea = React__default.forwardRef((_a, ref) => {
 const LabeledTextarea = withLabel(Textarea);
 
 const PasswordInput = React__default.forwardRef((_a, ref) => {
-    var { name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
+    var { name, placeholder, onChange, onBlur, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "onBlur", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const [showPassword, setShowPassword] = useState(false);
     const handleShowPassword = () => {
@@ -21010,7 +21011,7 @@ const PasswordInput = React__default.forwardRef((_a, ref) => {
     const inputClasses = classNames('password-input', {
         error: hasErrors,
     }, 'password-input--has-icon');
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledPasswordInput = withLabel(PasswordInput);