@wireapp/react-ui-kit 9.7.1 → 9.7.3

package/lib/Form/Button.js

@@ -25,7 +25,7 @@ var ButtonVariant;
     ButtonVariant["TERTIARY"] = "tertiary";
     ButtonVariant["QUATERNARY"] = "quaternary";
     ButtonVariant["SEND"] = "send";
-})(ButtonVariant = exports.ButtonVariant || (exports.ButtonVariant = {}));
+})(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
 const buttonStyle = (theme, _a) => {
     var { variant = ButtonVariant.PRIMARY, backgroundColor, block = false, disabled = false, noCapital = false, bold = true, center = true, color = Identity_1.COLOR.WHITE, fontSize = theme.fontSizes.base, noWrap = true, textTransform = 'none', truncate = true } = _a, props = __rest(_a, ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"]);
     return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block,

package/lib/Form/Checkbox.js

@@ -86,21 +86,21 @@ const StyledLabel = (_a) => {
                 })), { borderRadius: '3px', boxSizing: 'border-box', content: '""', display: 'inline-block', minWidth: '22px', height: '22px', lineHeight: '1.4rem', margin: '0 8px 0 0px', color: theme.general.color }) }), (labelBeforeCheckbox && {
             flexDirection: 'row-reverse',
             justifyContent: 'space-between',
-        })), { alignItems: 'center', position: 'relative', margin: '0 0 0 -16px', width: aligncenter ? 'auto' : '100%', lineHeight: '1.4rem', display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, props, { children: [children, (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }) }))] })));
+        })), { alignItems: 'center', position: 'relative', margin: '0 0 0 -16px', width: aligncenter ? 'auto' : '100%', lineHeight: '1.4rem', display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, props, { children: [children, (0, jsx_runtime_1.jsx)("svg", { width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }) })] })));
 };
 exports.Checkbox = React.forwardRef((_a, ref) => {
     var { id, children, style, disabled, wrapperCSS = {}, markInvalid, aligncenter, labelBeforeCheckbox, outlineOffset = '0.4rem' } = _a, props = __rest(_a, ["id", "children", "style", "disabled", "wrapperCSS", "markInvalid", "aligncenter", "labelBeforeCheckbox", "outlineOffset"]);
     const inputId = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', position: 'relative', left: '-0.3rem', [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', position: 'relative', left: '-0.3rem', [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
                 outline: `1px solid ${theme.general.primaryColor}`,
                 outlineOffset: outlineOffset,
-            } }, wrapperCSS)), style: style }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "checkbox", id: id !== null && id !== void 0 ? id : inputId, style: {
+            } }, wrapperCSS)), style: style, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "checkbox", id: id !== null && id !== void 0 ? id : inputId, style: {
                     height: '22px',
                     marginBottom: '0',
                     opacity: 0,
                     width: '22px',
                     cursor: disabled ? 'not-allowed' : 'pointer',
-                }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME }, props)), (0, jsx_runtime_1.jsx)(StyledLabel, Object.assign({ htmlFor: id !== null && id !== void 0 ? id : inputId, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox }, { children: children }))] })));
+                }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME }, props)), (0, jsx_runtime_1.jsx)(StyledLabel, { htmlFor: id !== null && id !== void 0 ? id : inputId, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox, children: children })] }));
 });
 exports.Checkbox.displayName = 'Checkbox';
 const CheckboxLabel = (_a) => {

package/lib/Form/CodeInput.js

@@ -121,10 +121,10 @@ const CodeInput = ({ style, digits = 6, autoFocus = false, markInvalid, onCodeCo
             onCodeComplete(completeCode);
         }
     }, [values]);
-    return ((0, jsx_runtime_1.jsx)(CodeInputWrapper, Object.assign({ style: style }, { children: Array.from({ length: digits }, (_, index) => ((0, jsx_runtime_1.jsx)(DigitInput
+    return ((0, jsx_runtime_1.jsx)(CodeInputWrapper, { style: style, children: Array.from({ length: digits }, (_, index) => ((0, jsx_runtime_1.jsx)(DigitInput
         // eslint-disable-next-line jsx-a11y/no-autofocus
         , { 
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus: index === 0 && autoFocus, onPaste: event => handlePaste(index, event), onFocus: forceSelection, onMouseDown: forceSelectionPreventDefault, onTouchStart: forceSelectionPreventDefault, onKeyDown: event => handleKeyDown(index, event), onKeyUp: forceSelection, markInvalid: markInvalid, ref: node => (inputs[index] = node), value: values[index], onChange: () => { }, disabled: disabled }, index))) })));
+            autoFocus: index === 0 && autoFocus, onPaste: event => handlePaste(index, event), onFocus: forceSelection, onMouseDown: forceSelectionPreventDefault, onTouchStart: forceSelectionPreventDefault, onKeyDown: event => handleKeyDown(index, event), onKeyUp: forceSelection, markInvalid: markInvalid, ref: node => (inputs[index] = node), value: values[index], onChange: () => { }, disabled: disabled }, index))) }));
 };
 exports.CodeInput = CodeInput;

package/lib/Form/DropFileInput.js

@@ -124,6 +124,6 @@ exports.DropFileInput = (0, react_1.forwardRef)((_a, ref) => {
         }
         onFilesUploaded(Array.from(files));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: exports.dropFileWrapperStyle }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => (Object.assign(Object.assign({}, (0, exports.dropFileZoneWrapperStyle)(theme, isDraggedOver)), dropFileZoneWrapperCSS)), "data-testid": "dropzone", onDragOver: handleDragOver, onDragLeave: resetDraggedOver, onDrop: handleDrop }, { children: (0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, Object.assign({ align: "center", justify: "center", flexWrap: "wrap", css: { maxWidth: '280px', margin: '0 auto' } }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.UploadIcon, { css: { margin: '12px 0' } }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { maxWidth: '160px', margin: '0 25px' } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: exports.dropFileZoneHeadingStyle }, { children: headingText })), (0, jsx_runtime_1.jsxs)("label", Object.assign({ "aria-label": `${headingText} ${labelText} (${description})`, css: (theme) => (0, exports.dropFileZoneLabelStyle)(theme) }, { children: [(0, jsx_runtime_1.jsx)("span", { children: labelText }), (0, jsx_runtime_1.jsx)("input", Object.assign({ "data-testid": "file-input", ref: ref, accept: accept, multiple: multiple, css: visuallyHiddenStyles, onChange: handleChange, type: "file" }, inputProps))] }))] }))] })) })), description && (0, jsx_runtime_1.jsx)("p", Object.assign({ css: exports.dropFileZonDescriptionStyle }, { children: description }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: exports.dropFileWrapperStyle, children: [(0, jsx_runtime_1.jsx)("div", { css: (theme) => (Object.assign(Object.assign({}, (0, exports.dropFileZoneWrapperStyle)(theme, isDraggedOver)), dropFileZoneWrapperCSS)), "data-testid": "dropzone", onDragOver: handleDragOver, onDragLeave: resetDraggedOver, onDrop: handleDrop, children: (0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, { align: "center", justify: "center", flexWrap: "wrap", css: { maxWidth: '280px', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsx)(Icon_1.UploadIcon, { css: { margin: '12px 0' } }), (0, jsx_runtime_1.jsxs)("div", { css: { maxWidth: '160px', margin: '0 25px' }, children: [(0, jsx_runtime_1.jsx)("span", { css: exports.dropFileZoneHeadingStyle, children: headingText }), (0, jsx_runtime_1.jsxs)("label", { "aria-label": `${headingText} ${labelText} (${description})`, css: (theme) => (0, exports.dropFileZoneLabelStyle)(theme), children: [(0, jsx_runtime_1.jsx)("span", { children: labelText }), (0, jsx_runtime_1.jsx)("input", Object.assign({ "data-testid": "file-input", ref: ref, accept: accept, multiple: multiple, css: visuallyHiddenStyles, onChange: handleChange, type: "file" }, inputProps))] })] })] }) }), description && (0, jsx_runtime_1.jsx)("p", { css: exports.dropFileZonDescriptionStyle, children: description })] }));
 });
 exports.DropFileInput.displayName = 'DropFileInput';

package/lib/Form/ErrorMessage.js

@@ -28,6 +28,6 @@ const filterErrorMessageProps = (props) => {
 exports.filterErrorMessageProps = filterErrorMessageProps;
 const ErrorMessage = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(Layout_1.FlexBox, Object.assign({ css: (theme) => (0, exports.errorMessageStyle)(theme, props) }, props, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ color: Identity_1.COLOR_V2.RED_LIGHT_500, fontSize: '12px', css: { fontWeight: 400 } }, { children: children })) })));
+    return ((0, jsx_runtime_1.jsx)(Layout_1.FlexBox, Object.assign({ css: (theme) => (0, exports.errorMessageStyle)(theme, props) }, props, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: Identity_1.COLOR_V2.RED_LIGHT_500, fontSize: '12px', css: { fontWeight: 400 }, children: children }) })));
 };
 exports.ErrorMessage = ErrorMessage;

package/lib/Form/IndicatorRangeInput.js

@@ -52,12 +52,12 @@ exports.IndicatorRangeInput = (0, react_1.forwardRef)((_a, ref) => {
     const valueText = ((_b = dataListOptions[valueNum]) === null || _b === void 0 ? void 0 : _b.heading)
         ? `${dataListOptions[valueNum].label} (${dataListOptions[valueNum].heading})`
         : dataListOptions[valueNum].label;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { wrapperCSS, width: '100%' } }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ css: (theme) => ({ fontSize: theme.fontSizes.base }), htmlFor: id }, { children: label }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: IndicatorRangeInput_styles_1.containerStyles }, { children: [isCustomSlider && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { position: 'relative', display: 'flex', marginBottom: '20px' } }, { children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => (0, IndicatorRangeInput_styles_1.headingStyle)(listLength, theme), onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: { wrapperCSS, width: '100%' }, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { css: (theme) => ({ fontSize: theme.fontSizes.base }), htmlFor: id, children: label })), (0, jsx_runtime_1.jsxs)("div", { css: IndicatorRangeInput_styles_1.containerStyles, children: [isCustomSlider && ((0, jsx_runtime_1.jsx)("div", { css: { position: 'relative', display: 'flex', marginBottom: '20px' }, children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => (0, IndicatorRangeInput_styles_1.headingStyle)(listLength, theme), onClick: () => {
                                 if (dataListOption === null || dataListOption === void 0 ? void 0 : dataListOption.heading) {
                                     onOptionClick(index);
                                 }
-                            } }, { children: dataListOption === null || dataListOption === void 0 ? void 0 : dataListOption.heading }), dataListOption.value))) }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, IndicatorRangeInput_styles_1.rangeStyles)(backgroundSize, valueNum, listLength, isCustomSlider, theme), id: id, name: id, min: minNum, max: maxNum, value: value, onChange: onChange, type: "range", list: "tickMarks" }, (isCustomSlider && {
+                            }, children: dataListOption === null || dataListOption === void 0 ? void 0 : dataListOption.heading }, dataListOption.value))) })), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, IndicatorRangeInput_styles_1.rangeStyles)(backgroundSize, valueNum, listLength, isCustomSlider, theme), id: id, name: id, min: minNum, max: maxNum, value: value, onChange: onChange, type: "range", list: "tickMarks" }, (isCustomSlider && {
                         'aria-valuetext': valueText,
-                    }), inputProps)), isCustomSlider && ((0, jsx_runtime_1.jsx)("datalist", Object.assign({ id: "tickMarks", css: (theme) => (0, IndicatorRangeInput_styles_1.dataListOption)(listLength, theme) }, { children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("option", { value: dataListOption.value, label: dataListOption.label, onClick: () => onOptionClick(index) }, index))) })))] }))] })));
+                    }), inputProps)), isCustomSlider && ((0, jsx_runtime_1.jsx)("datalist", { id: "tickMarks", css: (theme) => (0, IndicatorRangeInput_styles_1.dataListOption)(listLength, theme), children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("option", { value: dataListOption.value, label: dataListOption.label, onClick: () => onOptionClick(index) }, index))) }))] })] }));
 });
 exports.IndicatorRangeInput.displayName = 'IndicatorRangeInput';

package/lib/Form/Input.js

@@ -111,13 +111,13 @@ exports.Input = React.forwardRef((_a, ref) => {
     const isPasswordInput = type === 'password';
     const toggledPasswordType = togglePassword ? 'text' : 'password';
     const toggleSetPassword = () => setTogglePassword(prevState => !prevState);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: exports.INPUT_GROUP, css: (theme) => (Object.assign({ marginBottom: hasError ? '2px' : '20px', width: '100%', '&:focus-within label': {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: exports.INPUT_GROUP, css: (theme) => (Object.assign({ marginBottom: hasError ? '2px' : '20px', width: '100%', '&:focus-within label': {
                 color: theme.general.primaryColor,
-            } }, wrapperCSS)) }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid }, { children: label }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { marginBottom: hasError && '8px', position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ className: exports.INPUT_CLASSNAME, css: (theme) => (0, exports.inputStyle)(theme, props, hasError), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required }, filterInputProps(props))), hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: Object.assign(Object.assign({}, centerInputAction), { background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }), onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword }, { children: togglePassword ? (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) })))] })), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({
+            } }, wrapperCSS)), children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid, children: label })), (0, jsx_runtime_1.jsxs)("div", { css: { marginBottom: hasError && '8px', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ className: exports.INPUT_CLASSNAME, css: (theme) => (0, exports.inputStyle)(theme, props, hasError), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required }, filterInputProps(props))), hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: Object.assign(Object.assign({}, centerInputAction), { background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }), onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword, children: togglePassword ? (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) }))] }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
                     fontSize: theme.fontSizes.small,
                     fontWeight: 400,
                     color: theme.Input.placeholderColor,
                     marginTop: 8,
-                }) }, { children: helperText }))), error] })));
+                }), children: helperText })), error] }));
 });
 exports.Input.displayName = 'Input';

package/lib/Form/InputLabel.js

@@ -21,6 +21,6 @@ const InputLabel = (_a) => {
             fontWeight: 400,
             lineHeight: '1rem',
             color: markInvalid ? Identity_1.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,
-        }) }, props, { children: [children, isRequired && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => ({ fontSize: theme.fontSizes.base, marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 }) }, { children: "*" })))] })));
+        }) }, props, { children: [children, isRequired && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => ({ fontSize: theme.fontSizes.base, marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 }), children: "*" }))] })));
 };
 exports.InputLabel = InputLabel;

package/lib/Form/RangeInput.js

@@ -40,6 +40,6 @@ exports.RangeInput = (0, react_1.forwardRef)((_a, ref) => {
     const maxNum = Number(max);
     const valueNum = Number(value);
     const backgroundSize = `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%`;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: wrapperCSS }, { children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: RangeInput_styles_1.rangeInputWrapperStyles }, { children: [minValueLabel && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.LEFT) }, { children: minValueLabel }))), maxValueLabel && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.RIGHT) }, { children: maxValueLabel }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, RangeInput_styles_1.getImageCropZoomInputStyles)(theme, backgroundSize), id: id, name: id, min: min, max: max, value: value, onChange: onChange, type: "range" }, inputProps))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: wrapperCSS, children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, children: label }), (0, jsx_runtime_1.jsxs)("div", { css: RangeInput_styles_1.rangeInputWrapperStyles, children: [minValueLabel && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.LEFT), children: minValueLabel })), maxValueLabel && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => (0, RangeInput_styles_1.getValueLabelStyles)(theme, RangeInput_styles_1.ValueLabelPosition.RIGHT), children: maxValueLabel })), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, RangeInput_styles_1.getImageCropZoomInputStyles)(theme, backgroundSize), id: id, name: id, min: min, max: max, value: value, onChange: onChange, type: "range" }, inputProps))] })] }));
 });
 exports.RangeInput.displayName = 'RangeInput';

package/lib/Form/RangeInput.styles.js

@@ -47,7 +47,7 @@ var ValueLabelPosition;
 (function (ValueLabelPosition) {
     ValueLabelPosition["LEFT"] = "left";
     ValueLabelPosition["RIGHT"] = "right";
-})(ValueLabelPosition = exports.ValueLabelPosition || (exports.ValueLabelPosition = {}));
+})(ValueLabelPosition || (exports.ValueLabelPosition = ValueLabelPosition = {}));
 const getValueLabelStyles = (theme, position) => ({
     pointerEvents: 'none',
     bottom: '100%',

package/lib/Form/Select.js

@@ -26,20 +26,20 @@ const Select = (_a) => {
     var { id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, markInvalid = false, required = false } = _a, props = __rest(_a, ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required"]);
     const theme = (0, react_1.useTheme)();
     const hasError = !!error;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => (Object.assign({ marginBottom: markInvalid ? '2px' : '20px', width: '100%', '&:focus-within label': {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => (Object.assign({ marginBottom: markInvalid ? '2px' : '20px', width: '100%', '&:focus-within label': {
                 color: theme.general.primaryColor,
-            } }, wrapperCSS)), "data-uie-name": dataUieName }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id, markInvalid: markInvalid, isRequired: required }, { children: label }))), (0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ id: id, styles: (0, SelectStyles_1.customStyles)(theme, markInvalid), components: {
+            } }, wrapperCSS)), "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, markInvalid: markInvalid, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ id: id, styles: (0, SelectStyles_1.customStyles)(theme, markInvalid), components: {
                     SelectContainer: SelectComponents_1.SelectContainer,
                     DropdownIndicator: SelectComponents_1.DropdownIndicator,
                     Option: (0, SelectComponents_1.CustomOption)(dataUieName),
                     Menu: (0, SelectComponents_1.Menu)(dataUieName),
                     ValueContainer: SelectComponents_1.ValueContainer,
                     IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
-                }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({
+                }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
                     fontSize: theme.fontSizes.small,
                     fontWeight: 400,
                     color: theme.Input.labelColor,
                     marginTop: 8,
-                }) }, { children: helperText }))), error] })));
+                }), children: helperText })), error] }));
 };
 exports.Select = Select;

package/lib/Form/SelectComponents.js

@@ -36,7 +36,7 @@ const ArrowDown_1 = require("../Icon/ArrowDown");
 const enums_1 = require("../types/enums");
 // SelectContainer
 const SelectContainer = (props) => {
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ tabIndex: enums_1.TabIndex.FOCUSABLE }, { children: props.children })) })));
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) })));
 };
 exports.SelectContainer = SelectContainer;
 const DropdownIndicator = (props) => {
@@ -58,12 +58,12 @@ const CustomOption = (dataUieName) => (props) => {
             'data-uie-name': `option-${dataUieName}`,
             'data-uie-value': (_a = options.find(option => option.label === children)) === null || _a === void 0 ? void 0 : _a.value,
             'data-uie-selected': isSelected,
-        }), { children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' } }, { children: children })), data && data.description && ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => ({
+        }), { children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, jsx_runtime_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' }, children: children }), data && data.description && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
                         marginBottom: 0,
                         fontSize: theme.fontSizes.medium,
                         color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
                         gridArea: 'description',
-                    }) }, { children: data.description })))] })) })));
+                    }), children: data.description }))] })) })));
 };
 exports.CustomOption = CustomOption;
 // eslint-disable-next-line react/display-name
@@ -77,14 +77,14 @@ exports.Menu = Menu;
 const renderValue = value => {
     if (Array.isArray(value)) {
         const currentValue = (i) => value[i].props.children;
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+        return ((0, jsx_runtime_1.jsx)("div", { css: {
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 minWidth: 0,
                 paddingRight: 14,
                 gridArea: '1/1/2/3',
-            } }, { children: currentValue(0) })));
+            }, children: currentValue(0) }));
     }
     return value;
 };
@@ -98,6 +98,6 @@ const IndicatorsContainer = (_a) => {
     var { children } = _a, restProps = __rest(_a, ["children"]);
     const value = restProps.getValue();
     const displaySelectedOptionsCount = Array.isArray(value) && value.length > 1;
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.components.IndicatorsContainer, Object.assign({}, restProps, { children: [displaySelectedOptionsCount && (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { fontWeight: 600 } }, { children: ["(+", value.length - 1, ")"] })), children] })));
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.components.IndicatorsContainer, Object.assign({}, restProps, { children: [displaySelectedOptionsCount && (0, jsx_runtime_1.jsxs)("div", { css: { fontWeight: 600 }, children: ["(+", value.length - 1, ")"] }), children] })));
 };
 exports.IndicatorsContainer = IndicatorsContainer;

package/lib/Form/ShakeBox.js

@@ -74,6 +74,6 @@ exports.ShakeBox = React.forwardRef(({ children, amplitude = 8, damping = 0.75,
         },
     }));
     (0, react_1.useEffect)(() => () => cancelAnimationFrame(requestAnimationId), []);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { transform: `translateX(${offset}px)` } }, { children: children }));
+    return (0, jsx_runtime_1.jsx)("div", { css: { transform: `translateX(${offset}px)` }, children: children });
 });
 exports.ShakeBox.displayName = 'ShakeBox';

package/lib/Form/Switch.js

@@ -23,20 +23,20 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Identity_1 = require("../Identity");
 const Misc_1 = require("../Misc");
-const Switch = ({ id = Math.random().toString(), checked, onToggle = () => { }, showLoading, disabled, loadingColor = Identity_1.COLOR.BLUE, activatedColor = Identity_1.COLOR.BLUE, deactivatedColor = '#d2d2d2', name, dataUieName, }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+const Switch = ({ id = Math.random().toString(), checked, onToggle = () => { }, showLoading, disabled, loadingColor = Identity_1.COLOR.BLUE, activatedColor = Identity_1.COLOR.BLUE, deactivatedColor = '#d2d2d2', name, dataUieName, }) => ((0, jsx_runtime_1.jsx)("div", { css: {
         display: 'inline-block',
         position: 'relative',
         textAlign: 'left',
         userSelect: 'none',
         verticalAlign: 'middle',
         width: '42px',
-    } }, { children: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, checked: checked, disabled: disabled, name: name, onChange: event => onToggle(event.target.checked), type: "checkbox", css: { display: 'none' }, "data-uie-name": dataUieName }), (0, jsx_runtime_1.jsxs)("label", Object.assign({ htmlFor: id, css: {
+    }, children: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, checked: checked, disabled: disabled, name: name, onChange: event => onToggle(event.target.checked), type: "checkbox", css: { display: 'none' }, "data-uie-name": dataUieName }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, css: {
                     borderRadius: '20px',
                     cursor: disabled || showLoading ? '' : 'pointer',
                     display: 'block',
                     margin: 0,
                     overflow: 'hidden',
-                } }, { children: [(0, jsx_runtime_1.jsx)("span", { css: {
+                }, children: [(0, jsx_runtime_1.jsx)("span", { css: {
                             ['&:after']: {
                                 content: '" "',
                                 paddingRight: '10px',
@@ -82,5 +82,5 @@ const Switch = ({ id = Math.random().toString(), checked, onToggle = () => { },
                             top: 0,
                             transition: 'all 0.15s ease-in 0s',
                             width: '23px',
-                        } }))] }))] }) })));
+                        } }))] })] }) }));
 exports.Switch = Switch;

package/lib/Form/Tooltip.js

@@ -111,6 +111,6 @@ const Tooltip = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
     const filteredProps = filterTooltipProps(props);
     const { body, position = 'top' } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => tooltipStyle(theme), "data-position": position }, filteredProps, { "data-testid": "tooltip-wrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "tooltip-content", "data-testid": "tooltip-content" }, { children: [body, (0, jsx_runtime_1.jsx)("div", { className: "tooltip-arrow" })] })), children] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => tooltipStyle(theme), "data-position": position }, filteredProps, { "data-testid": "tooltip-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: [body, (0, jsx_runtime_1.jsx)("div", { className: "tooltip-arrow" })] }), children] })));
 };
 exports.Tooltip = Tooltip;

package/lib/Icon/ErrorIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const ErrorIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 13, realHeight: 12 }, props, { children: (0, jsx_runtime_1.jsxs)("g", Object.assign({ transform: "translate(.5 .333)", fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("circle", { fill: "#E02020", cx: "6", cy: "6", r: "6" }), (0, jsx_runtime_1.jsx)("text", Object.assign({ fontFamily: "SFProText-Heavy, SF Pro Text", fontSize: "9", fontWeight: "600", fill: "#FFF" }, { children: (0, jsx_runtime_1.jsx)("tspan", Object.assign({ x: "4.291", y: "9" }, { children: "!" })) }))] })) })));
+const ErrorIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 13, realHeight: 12 }, props, { children: (0, jsx_runtime_1.jsxs)("g", { transform: "translate(.5 .333)", fill: "none", fillRule: "evenodd", children: [(0, jsx_runtime_1.jsx)("circle", { fill: "#E02020", cx: "6", cy: "6", r: "6" }), (0, jsx_runtime_1.jsx)("text", { fontFamily: "SFProText-Heavy, SF Pro Text", fontSize: "9", fontWeight: "600", fill: "#FFF", children: (0, jsx_runtime_1.jsx)("tspan", { x: "4.291", y: "9", children: "!" }) })] }) })));
 exports.ErrorIcon = ErrorIcon;

package/lib/Icon/RecordIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const RecordIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsxs)("g", Object.assign({ fill: "#FB0807", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("circle", { fillOpacity: ".24", cx: "8", cy: "8", r: "8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "4" })] })) })));
+const RecordIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsxs)("g", { fill: "#FB0807", fillRule: "evenodd", children: [(0, jsx_runtime_1.jsx)("circle", { fillOpacity: ".24", cx: "8", cy: "8", r: "8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "4" })] }) })));
 exports.RecordIcon = RecordIcon;

package/lib/Icon/RecordPendingIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const RecordPendingIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsxs)("g", Object.assign({ fill: "#FB0807" }, { children: [(0, jsx_runtime_1.jsx)("circle", { fillOpacity: ".24", cx: "8", cy: "8", r: "8" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-.5-4.5H10v1H7.5v-1zm0-2h1v3h-1v-3z" })] })) })));
+const RecordPendingIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsxs)("g", { fill: "#FB0807", children: [(0, jsx_runtime_1.jsx)("circle", { fillOpacity: ".24", cx: "8", cy: "8", r: "8" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-.5-4.5H10v1H7.5v-1zm0-2h1v3h-1v-3z" })] }) })));
 exports.RecordPendingIcon = RecordPendingIcon;

package/lib/Icon/SVGIcon.js

@@ -28,6 +28,6 @@ const SVGIcon = (_a) => {
     const newWidth = Math.ceil(realWidth * newScale);
     const newHeight = Math.ceil(realHeight * newScale);
     const shadowId = shadow && Math.random().toString();
-    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ css: (theme) => svgIconStyle(theme, props), viewBox: `0 0 ${realWidth} ${realHeight}`, width: newWidth, height: newHeight }, props, { children: [shadow && ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", Object.assign({ id: shadowId, x: "-50%", y: "-50%", width: "200%", height: "200%" }, { children: [(0, jsx_runtime_1.jsx)("feOffset", { result: "offOut", in: "SourceAlpha", dx: "0", dy: "0" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { result: "blurOut", in: "offOut", stdDeviation: "2.5" }), (0, jsx_runtime_1.jsx)("feBlend", { in: "SourceGraphic", in2: "blurOut", mode: "normal" })] })) })), (0, jsx_runtime_1.jsx)("g", Object.assign({ filter: shadow && `url(#${shadowId})` }, { children: children }))] })));
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ css: (theme) => svgIconStyle(theme, props), viewBox: `0 0 ${realWidth} ${realHeight}`, width: newWidth, height: newHeight }, props, { children: [shadow && ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { id: shadowId, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [(0, jsx_runtime_1.jsx)("feOffset", { result: "offOut", in: "SourceAlpha", dx: "0", dy: "0" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { result: "blurOut", in: "offOut", stdDeviation: "2.5" }), (0, jsx_runtime_1.jsx)("feBlend", { in: "SourceGraphic", in2: "blurOut", mode: "normal" })] }) })), (0, jsx_runtime_1.jsx)("g", { filter: shadow && `url(#${shadowId})`, children: children })] })));
 };
 exports.SVGIcon = SVGIcon;

package/lib/Layout/StyledApp.js

@@ -24,6 +24,6 @@ const filterStyledAppProps = (props) => (0, util_1.filterProps)(props, ['backgro
 const StyledAppContainer = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => styledAppContainerStyle(theme, props) }, filterStyledAppProps(props))));
 const StyledApp = (_a) => {
     var { themeId = Theme_1.THEME_ID.LIGHT, theme, children } = _a, props = __rest(_a, ["themeId", "theme", "children"]);
-    return ((0, jsx_runtime_1.jsx)(Theme_1.ThemeProvider, Object.assign({ theme: theme ? theme : Theme_1.themes[themeId] }, { children: (0, jsx_runtime_1.jsxs)(StyledAppContainer, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle_1.GlobalStyle, {}), children] })) })));
+    return ((0, jsx_runtime_1.jsx)(Theme_1.ThemeProvider, { theme: theme ? theme : Theme_1.themes[themeId], children: (0, jsx_runtime_1.jsxs)(StyledAppContainer, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle_1.GlobalStyle, {}), children] })) }));
 };
 exports.StyledApp = StyledApp;

package/lib/Layout/headerMenu/HeaderMenu.js

@@ -46,6 +46,6 @@ const HeaderMenu = (_a) => {
         }
     };
     const closeMenu = () => setIsOpen(false);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { height: '64px' } }, props, { "data-uie-name": "element-header-menu" }, { children: (0, jsx_runtime_1.jsxs)(MenuContent_1.MenuContent, Object.assign({ open: isOpen }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: { alignSelf: 'center', display: 'flex', zIndex: 2 }, onClick: closeMenu }, { children: logoElement })), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { alignSelf: 'center', display: 'flex' } }, { children: centerElement })), (0, jsx_runtime_1.jsx)(MenuOpenButton_1.MenuOpenButton, { onClick: toggleMenu, open: isOpen, style: { justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px' }, "data-uie-name": "do-toggle-header-menu" }), (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, Object.assign({ onClick: closeMenu, open: isOpen }, { children: (0, jsx_runtime_1.jsx)(MenuScrollableItems_1.MenuScrollableItems, { children: children }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { height: '64px' } }, props, { "data-uie-name": "element-header-menu", children: (0, jsx_runtime_1.jsxs)(MenuContent_1.MenuContent, { open: isOpen, children: [(0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex', zIndex: 2 }, onClick: closeMenu, children: logoElement }), (0, jsx_runtime_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex' }, children: centerElement }), (0, jsx_runtime_1.jsx)(MenuOpenButton_1.MenuOpenButton, { onClick: toggleMenu, open: isOpen, style: { justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px' }, "data-uie-name": "do-toggle-header-menu" }), (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { onClick: closeMenu, open: isOpen, children: (0, jsx_runtime_1.jsx)(MenuScrollableItems_1.MenuScrollableItems, { children: children }) })] }) })));
 };
 exports.HeaderMenu = HeaderMenu;

package/lib/Layout/headerMenu/HeaderSubMenu.js

@@ -65,6 +65,6 @@ exports.MobileStyledHeaderSubMenu = MobileStyledHeaderSubMenu;
 const HeaderSubMenu = (_a) => {
     var { caption, isOpen, children } = _a, props = __rest(_a, ["caption", "isOpen", "children"]);
     const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${mediaQueries_1.QUERY.desktop})`).matches;
-    return ((0, jsx_runtime_1.jsxs)(MenuSubLink_1.MenuSubLink, Object.assign({}, props, { style: { cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center' } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: caption }), (0, jsx_runtime_1.jsx)(Identity_1.Opacity, Object.assign({ in: isOpen && isDesktop, timeout: motions_1.DURATION.DEFAULT, style: { display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1 }, mountOnEnter: false, unmountOnExit: false }, { children: (0, jsx_runtime_1.jsx)(Identity_1.YAxisMovement, Object.assign({ in: isOpen && isDesktop, startValue: '-30px', endValue: '0px', style: { display: 'inline-block' }, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(exports.DesktopStyledHeaderSubMenu, { children: children }) })) })), (0, jsx_runtime_1.jsx)(Identity_1.Opacity, Object.assign({ in: isOpen && !isDesktop, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: false, style: { display: 'block', position: 'relative' } }, { children: (0, jsx_runtime_1.jsx)(Identity_1.Slide, Object.assign({ in: isOpen && !isDesktop, startValue: '-56%', endValue: '0', timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)(exports.MobileStyledHeaderSubMenu, { children: children }) })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(MenuSubLink_1.MenuSubLink, Object.assign({}, props, { style: { cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { children: caption }), (0, jsx_runtime_1.jsx)(Identity_1.Opacity, { in: isOpen && isDesktop, timeout: motions_1.DURATION.DEFAULT, style: { display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1 }, mountOnEnter: false, unmountOnExit: false, children: (0, jsx_runtime_1.jsx)(Identity_1.YAxisMovement, { in: isOpen && isDesktop, startValue: '-30px', endValue: '0px', style: { display: 'inline-block' }, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.DesktopStyledHeaderSubMenu, { children: children }) }) }), (0, jsx_runtime_1.jsx)(Identity_1.Opacity, { in: isOpen && !isDesktop, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: false, style: { display: 'block', position: 'relative' }, children: (0, jsx_runtime_1.jsx)(Identity_1.Slide, { in: isOpen && !isDesktop, startValue: '-56%', endValue: '0', timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.MobileStyledHeaderSubMenu, { children: children }) }) })] })));
 };
 exports.HeaderSubMenu = HeaderSubMenu;

package/lib/Misc/ButtonGroup.js

@@ -46,16 +46,16 @@ const buttonStyle = (_, { disabled = false }) => (Object.assign({ height: '32px'
         },
     },
 })));
-const ButtonGroup = ({ children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => buttonGroupStyle(theme), role: "group", "aria-label": "Button Group" }, { children: children })));
+const ButtonGroup = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => buttonGroupStyle(theme), role: "group", "aria-label": "Button Group", children: children }));
 exports.ButtonGroup = ButtonGroup;
 const Button = (_a) => {
     var { children, icon } = _a, props = __rest(_a, ["children", "icon"]);
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ css: (theme) => buttonStyle(theme, props) }, props, { children: [icon, children && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => ({
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ css: (theme) => buttonStyle(theme, props) }, props, { children: [icon, children && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => ({
                     marginLeft: !!icon && '6px',
                     fontSize: theme.fontSizes.small,
                     fontWeight: 'bold',
                     lineHeight: '0.875rem',
                     letterSpacing: '0.25px',
-                }) }, { children: children })))] })));
+                }), children: children }))] })));
 };
 ButtonGroup.Button = Button;

package/lib/Misc/IconButton.js

@@ -20,7 +20,7 @@ var IconButtonVariant;
 (function (IconButtonVariant) {
     IconButtonVariant["PRIMARY"] = "primary";
     IconButtonVariant["SECONDARY"] = "secondary";
-})(IconButtonVariant = exports.IconButtonVariant || (exports.IconButtonVariant = {}));
+})(IconButtonVariant || (exports.IconButtonVariant = IconButtonVariant = {}));
 const iconButtonStyle = (theme, { variant = IconButtonVariant.PRIMARY, backgroundColor, disabled = false }) => (Object.assign(Object.assign({ border: 0, borderRadius: '12px', cursor: disabled ? 'default' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '16px', padding: 0, outline: 'none', textDecoration: 'none', touchAction: 'manipulation', transition: motions_1.defaultTransition, width: '40px', height: '32px', '&:hover, &:focus': {
         textDecoration: 'none',
     } }, (variant === IconButtonVariant.PRIMARY && Object.assign({ backgroundColor: disabled

package/lib/Misc/Pagination.js

@@ -26,8 +26,8 @@ const Pagination = (_a) => {
         const endLength = 1;
         const skipLength = 1;
         const normalizeCount = endLength + skipLength + spanLength;
-        const dots = (key) => ((0, jsx_runtime_1.jsx)(Text_1.Bold, Object.assign({ fontSize: '11px' }, { children: '…' }), key));
-        const renderPageNumber = pageIndex => currentPage === pageIndex ? ((0, jsx_runtime_1.jsx)(Text_1.Bold, Object.assign({ fontSize: '11px', style: { color: Identity_1.COLOR.BLUE, margin: '0 8px' }, "data-uie-name": "status-active-page" }, { children: pageIndex + 1 }), pageIndex)) : ((0, jsx_runtime_1.jsx)(Text_1.Link, Object.assign({ style: { margin: '0 8px' }, onClick: () => goPage(pageIndex), "data-uie-name": "go-page" }, { children: pageIndex + 1 }), pageIndex));
+        const dots = (key) => ((0, jsx_runtime_1.jsx)(Text_1.Bold, { fontSize: '11px', children: '…' }, key));
+        const renderPageNumber = pageIndex => currentPage === pageIndex ? ((0, jsx_runtime_1.jsx)(Text_1.Bold, { fontSize: '11px', style: { color: Identity_1.COLOR.BLUE, margin: '0 8px' }, "data-uie-name": "status-active-page", children: pageIndex + 1 }, pageIndex)) : ((0, jsx_runtime_1.jsx)(Text_1.Link, { style: { margin: '0 8px' }, onClick: () => goPage(pageIndex), "data-uie-name": "go-page", children: pageIndex + 1 }, pageIndex));
         const normalizedCurrent = Math.min(Math.max(currentPage, normalizeCount), lastPageIndex - normalizeCount);
         const beforeCount = normalizedCurrent - spanLength - endLength;
         const afterCount = lastPageIndex - endLength - normalizedCurrent - spanLength;
@@ -40,6 +40,6 @@ const Pagination = (_a) => {
         }
         return pages;
     };
-    return ((0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, Object.assign({ align: "flex-end", "data-uie-name": "element-pagination" }, props, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: { flexBasis: 100 } }, { children: !isFirstPage && ((0, jsx_runtime_1.jsx)(Text_1.Link, Object.assign({ block: true, onClick: () => goPage(currentPage - 1), "data-uie-name": "go-previous-page" }, { children: (0, jsx_runtime_1.jsx)(PreviousPageComponent, {}) }))) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { alignItems: 'flex-end', display: 'flex', flexDirection: 'row', margin: '0 auto' }, "data-uie-name": "list-pages" }, { children: renderPageList() })), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { display: 'flex', flexBasis: 100, justifyContent: 'flex-end' } }, { children: !isLastPage && ((0, jsx_runtime_1.jsx)(Text_1.Link, Object.assign({ block: true, onClick: () => goPage(currentPage + 1), "data-uie-name": "go-next-page" }, { children: (0, jsx_runtime_1.jsx)(NextPageComponent, {}) }))) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, Object.assign({ align: "flex-end", "data-uie-name": "element-pagination" }, props, { children: [(0, jsx_runtime_1.jsx)("div", { css: { flexBasis: 100 }, children: !isFirstPage && ((0, jsx_runtime_1.jsx)(Text_1.Link, { block: true, onClick: () => goPage(currentPage - 1), "data-uie-name": "go-previous-page", children: (0, jsx_runtime_1.jsx)(PreviousPageComponent, {}) })) }), (0, jsx_runtime_1.jsx)("div", { css: { alignItems: 'flex-end', display: 'flex', flexDirection: 'row', margin: '0 auto' }, "data-uie-name": "list-pages", children: renderPageList() }), (0, jsx_runtime_1.jsx)("div", { css: { display: 'flex', flexBasis: 100, justifyContent: 'flex-end' }, children: !isLastPage && ((0, jsx_runtime_1.jsx)(Text_1.Link, { block: true, onClick: () => goPage(currentPage + 1), "data-uie-name": "go-next-page", children: (0, jsx_runtime_1.jsx)(NextPageComponent, {}) })) })] })));
 };
 exports.Pagination = Pagination;

package/lib/Misc/Pill.js

@@ -11,7 +11,7 @@ var PILL_TYPE;
     PILL_TYPE["error"] = "ERROR";
     PILL_TYPE["success"] = "SUCCESS";
     PILL_TYPE["warning"] = "WARNING";
-})(PILL_TYPE = exports.PILL_TYPE || (exports.PILL_TYPE = {}));
+})(PILL_TYPE || (exports.PILL_TYPE = PILL_TYPE = {}));
 const pillStyle = (theme, { active = false, type = null }) => {
     const backgroundColors = {
         [PILL_TYPE.error]: Identity_1.COLOR.RED_OPAQUE_32,

package/lib/Modal/Modal.js

@@ -95,10 +95,10 @@ const modalActionStyles = ({ bold }) => ({
     justifyContent: 'center',
     padding: '8px 0',
 });
-const ModalActions = ({ actions }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: modalActionsWrapperStyles() }, { children: actions.map(action => ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: action.onClick, css: modalActionStyles({ bold: action.bold }), "data-uie-name": action.dataUieName }, { children: action.title }), action.title))) })));
+const ModalActions = ({ actions }) => ((0, jsx_runtime_1.jsx)("div", { css: modalActionsWrapperStyles(), children: actions.map(action => ((0, jsx_runtime_1.jsx)("div", { onClick: action.onClick, css: modalActionStyles({ bold: action.bold }), "data-uie-name": action.dataUieName, children: action.title }, action.title))) }));
 const Modal = (_a) => {
     var { actions = [], children, bodyStyle, fullscreen, onClose, onBackgroundClick } = _a, props = __rest(_a, ["actions", "children", "bodyStyle", "fullscreen", "onClose", "onBackgroundClick"]);
-    return ((0, jsx_runtime_1.jsxs)(Overlay_1.OverlayWrapper, Object.assign({}, props, { "data-uie-name": "modal" }, { children: [(0, jsx_runtime_1.jsxs)(ModalBody, Object.assign({ fullscreen: fullscreen, style: bodyStyle }, { children: [(0, jsx_runtime_1.jsx)(ModalContent, { children: children }), onClose !== util_1.noop && (0, jsx_runtime_1.jsx)(ModalClose, { onClick: onClose, "data-uie-name": "do-close" }), actions.length > 0 && (0, jsx_runtime_1.jsx)(ModalActions, { actions: actions, "data-uie-name": "modal-actions" })] })), !fullscreen && ((0, jsx_runtime_1.jsx)(ModalBackground, { onClick: onBackgroundClick === util_1.noop ? onClose : onBackgroundClick, "data-uie-name": "modal-background" }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Overlay_1.OverlayWrapper, Object.assign({}, props, { "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsxs)(ModalBody, { fullscreen: fullscreen, style: bodyStyle, children: [(0, jsx_runtime_1.jsx)(ModalContent, { children: children }), onClose !== util_1.noop && (0, jsx_runtime_1.jsx)(ModalClose, { onClick: onClose, "data-uie-name": "do-close" }), actions.length > 0 && (0, jsx_runtime_1.jsx)(ModalActions, { actions: actions, "data-uie-name": "modal-actions" })] }), !fullscreen && ((0, jsx_runtime_1.jsx)(ModalBackground, { onClick: onBackgroundClick === util_1.noop ? onClose : onBackgroundClick, "data-uie-name": "modal-background" }))] })));
 };
 exports.Modal = Modal;
 exports.Modal.defaultProps = {

package/lib/Modal/Overlay.js

@@ -65,6 +65,6 @@ const OverlayBackground = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign
 exports.OverlayBackground = OverlayBackground;
 const Overlay = (_a) => {
     var { onBackgroundClick = util_1.noop, children = null } = _a, props = __rest(_a, ["onBackgroundClick", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(exports.OverlayWrapper, Object.assign({}, props, { "data-uie-name": "modal" }, { children: [(0, jsx_runtime_1.jsx)(exports.OverlayContent, { children: children }), (0, jsx_runtime_1.jsx)(exports.OverlayBackground, { onClick: onBackgroundClick, "data-uie-name": "overlay-background" })] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.OverlayWrapper, Object.assign({}, props, { "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsx)(exports.OverlayContent, { children: children }), (0, jsx_runtime_1.jsx)(exports.OverlayBackground, { onClick: onBackgroundClick, "data-uie-name": "overlay-background" })] })));
 };
 exports.Overlay = Overlay;

package/lib/Text/Link.js

@@ -20,7 +20,7 @@ var LinkVariant;
 (function (LinkVariant) {
     LinkVariant["PRIMARY"] = "primary";
     LinkVariant["SECONDARY"] = "secondary";
-})(LinkVariant = exports.LinkVariant || (exports.LinkVariant = {}));
+})(LinkVariant || (exports.LinkVariant = LinkVariant = {}));
 const linkStyle = (theme, _a) => {
     var { bold = true, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', variant = LinkVariant.SECONDARY, color = theme.general.color } = _a, props = __rest(_a, ["bold", "fontSize", "textTransform", "variant", "color"]);
     return Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ bold, color, fontSize, textTransform }, props))), { color: color, cursor: 'pointer', textDecoration: 'none', '&:visited, &:link, &:active': {

package/lib/Theme/Theme.js

@@ -11,7 +11,7 @@ var THEME_ID;
     THEME_ID["DARK"] = "THEME_DARK";
     THEME_ID["LIGHT"] = "THEME_LIGHT";
     THEME_ID["DEFAULT"] = "THEME_DEFAULT";
-})(THEME_ID = exports.THEME_ID || (exports.THEME_ID = {}));
+})(THEME_ID || (exports.THEME_ID = THEME_ID = {}));
 exports.themes = {
     [THEME_ID.DEFAULT]: {
         fontSizes: Sizes_1.fontSizes,

package/lib/mediaQueries.js

@@ -30,7 +30,7 @@ var QueryKeys;
     QueryKeys["TABLET"] = "tablet";
     QueryKeys["TABLET_DOWN"] = "tabletDown";
     QueryKeys["TABLET_UP"] = "tabletUp";
-})(QueryKeys = exports.QueryKeys || (exports.QueryKeys = {}));
+})(QueryKeys || (exports.QueryKeys = QueryKeys = {}));
 exports.QUERY = {
     [QueryKeys.DESKTOP]: `min-width: ${sizes_1.WIDTH.DESKTOP_MIN}px`,
     [QueryKeys.DESKTOP_XL]: `min-width: ${sizes_1.WIDTH.DESKTOP_XL_MIN}px`,

package/lib/types/enums.js

@@ -23,4 +23,4 @@ var TabIndex;
 (function (TabIndex) {
     TabIndex[TabIndex["FOCUSABLE"] = 0] = "FOCUSABLE";
     TabIndex[TabIndex["UNFOCUSABLE"] = -1] = "UNFOCUSABLE";
-})(TabIndex = exports.TabIndex || (exports.TabIndex = {}));
+})(TabIndex || (exports.TabIndex = TabIndex = {}));

package/package.json

@@ -16,9 +16,9 @@
   },
   "devDependencies": {
     "@babel/cli": "7.21.5",
-    "@babel/core": "7.21.8",
-    "@babel/preset-env": "7.21.5",
-    "@babel/preset-react": "7.18.6",
+    "@babel/core": "7.22.1",
+    "@babel/preset-env": "7.22.4",
+    "@babel/preset-react": "7.22.3",
     "@babel/preset-typescript": "7.21.5",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/jest": "11.11.0",
@@ -34,7 +34,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
     "@types/rimraf": "^3.0.2",
-    "@types/webpack-env": "1.18.0",
+    "@types/webpack-env": "1.18.1",
     "babel-jest": "29.5.0",
     "babel-loader": "9.1.2",
     "jest": "^29.2.1",
@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.7.1",
-  "gitHead": "75969adc7be509de63584a6e283ce33d99ac9077"
+  "version": "9.7.3",
+  "gitHead": "29c5bbbe1cc422950fd1dffe9852ff8e7f950d88"
 }