@wireapp/react-ui-kit 9.18.0 → 9.19.0

package/lib/Form/SelectComponents.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -37,7 +26,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", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) })));
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, { ...props, children: (0, jsx_runtime_1.jsx)("div", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) }));
 };
 exports.SelectContainer = SelectContainer;
 const isGroup = (options) => {
@@ -46,39 +35,40 @@ const isGroup = (options) => {
 exports.isGroup = isGroup;
 const DropdownIndicator = (props) => {
     const { menuIsOpen } = props.selectProps;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(ArrowDown_1.ArrowDown, { css: Object.assign({}, (menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 })) }) })));
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)(ArrowDown_1.ArrowDown, { css: { ...(menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 }) } }) }));
 };
 exports.DropdownIndicator = DropdownIndicator;
 // eslint-disable-next-line react/display-name
 const CustomOption = (dataUieName) => (props) => {
-    var _a;
     const { children, data, isMulti, isSelected, options } = props;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, Object.assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Object.assign({}, ((isMulti || exports.isGroup) && {
-                display: 'grid',
-                gridTemplateAreas: `"checkbox label"
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)("div", { css: {
+                ...((isMulti || exports.isGroup) && {
+                    display: 'grid',
+                    gridTemplateAreas: `"checkbox label"
                                 ". description"`,
-                gridTemplateColumns: '22px 1fr',
-                columnGap: exports.isGroup ? '5px' : '10px',
-            })) }, (dataUieName && {
-            '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, exports.isGroup)(options) && (
+                    gridTemplateColumns: '22px 1fr',
+                    columnGap: exports.isGroup ? '5px' : '10px',
+                }),
+            }, ...(dataUieName && {
+                'data-uie-name': `option-${dataUieName}`,
+                'data-uie-value': options.find(option => option.label === children)?.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, exports.isGroup)(options) && (
                 //includes a checkmark character if it is selected and a group
                 (0, jsx_runtime_1.jsx)("div", { css: { width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' }, children: isSelected ? (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) : null })), (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
 const Menu = (dataUieName) => (props) => {
     const { children } = props;
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, (dataUieName && {
-            'data-uie-name': `dropdown-${dataUieName}`,
-        }), { children: children })) })));
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, { ...props, children: (0, jsx_runtime_1.jsx)("div", { ...(dataUieName && {
+                'data-uie-name': `dropdown-${dataUieName}`,
+            }), children: children }) }));
 };
 exports.Menu = Menu;
 const renderValue = value => {
@@ -96,15 +86,11 @@ const renderValue = value => {
     return value;
 };
 exports.renderValue = renderValue;
-const ValueContainer = (_a) => {
-    var { children } = _a, restProps = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.components.ValueContainer, Object.assign({}, restProps, { children: [(0, exports.renderValue)(children[0]), " ", children[1]] })));
-};
+const ValueContainer = ({ children, ...restProps }) => ((0, jsx_runtime_1.jsxs)(react_select_1.components.ValueContainer, { ...restProps, children: [(0, exports.renderValue)(children[0]), " ", children[1]] }));
 exports.ValueContainer = ValueContainer;
-const IndicatorsContainer = (_a) => {
-    var { children } = _a, restProps = __rest(_a, ["children"]);
+const IndicatorsContainer = ({ children, ...restProps }) => {
     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", { css: { fontWeight: 600 }, children: ["(+", value.length - 1, ")"] }), children] })));
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.components.IndicatorsContainer, { ...restProps, children: [displaySelectedOptionsCount && (0, jsx_runtime_1.jsxs)("div", { css: { fontWeight: 600 }, children: ["(+", value.length - 1, ")"] }), children] }));
 };
 exports.IndicatorsContainer = IndicatorsContainer;

package/lib/Form/SelectStyles.js

@@ -25,25 +25,36 @@ const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute' })
     indicatorSeparator: () => ({
         display: 'none',
     }),
-    indicatorsContainer: provided => (Object.assign({}, provided)),
+    indicatorsContainer: provided => ({
+        ...provided,
+    }),
     container: (_, { isDisabled, selectProps, options }) => {
         const { menuIsOpen } = selectProps;
         const isSelectDisabled = selectProps.isDisabled;
         return {
-            '& > div > div[class$="-Control"]': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, { disabled: isSelectDisabled, markInvalid })), { borderRadius: 12, minHeight: 48 }), (isDisabled && {
-                backgroundColor: theme.Input.backgroundColorDisabled,
-                color: theme.Select.disabledColor,
-                cursor: 'default',
-            })), (markInvalid && {
-                boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
-            })), (menuIsOpen && {
-                boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
-                '&:hover': {
+            '& > div > div[class$="-Control"]': {
+                ...(0, Input_1.inputStyle)(theme, { disabled: isSelectDisabled, markInvalid }),
+                borderRadius: 12,
+                minHeight: 48,
+                ...(isDisabled && {
+                    backgroundColor: theme.Input.backgroundColorDisabled,
+                    color: theme.Select.disabledColor,
+                    cursor: 'default',
+                }),
+                ...(markInvalid && {
+                    boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
+                }),
+                ...(menuIsOpen && {
                     boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
-                },
-            })), { cursor: !isSelectDisabled && 'pointer', '&:focus:visible, active': {
+                    '&:hover': {
+                        boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
+                    },
+                }),
+                cursor: !isSelectDisabled && 'pointer',
+                '&:focus:visible, active': {
                     boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
-                } }),
+                },
+            },
             '& > div': (0, SelectComponents_1.isGroup)(options)
                 ? {
                     display: 'inline',
@@ -62,86 +73,157 @@ const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute' })
                 },
         };
     },
-    control: (_provided, { options }) => (Object.assign({ display: 'flex', alignItems: 'center', appearance: 'none', padding: '0 8px 0 16px', height: 'auto', minHeight: '48px' }, ((0, SelectComponents_1.isGroup)(options) && {
-        position: 'absolute',
-        zIndex: -9999,
-    }))),
+    control: (_provided, { options }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        appearance: 'none',
+        padding: '0 8px 0 16px',
+        height: 'auto',
+        minHeight: '48px',
+        ...((0, SelectComponents_1.isGroup)(options) && {
+            position: 'absolute',
+            zIndex: -9999,
+        }),
+    }),
     dropdownIndicator: (provided, selectProps) => {
         const isSelectDisabled = selectProps.isDisabled;
-        return Object.assign(Object.assign({}, provided), { '& > svg': {
+        return {
+            ...provided,
+            '& > svg': {
                 fill: isSelectDisabled && theme.Input.placeholderColor,
-            } });
+            },
+        };
     },
-    group: provided => (Object.assign(Object.assign({}, provided), { padding: 0, backgroundColor: theme.Input.backgroundColor })),
-    groupHeading: provided => (Object.assign(Object.assign({}, provided), { display: 'flex', fontSize: theme.fontSizes.small, lineHeight: '14px', color: theme.Select.disabledColor, padding: '8px 16px 6px 16px' })),
-    menu: (provided, { options }) => (Object.assign(Object.assign(Object.assign({}, provided), { boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`, borderRadius: 12, marginBottom: 0, marginTop: 4, overflowY: 'overlay', position: menuPosition }), ((0, SelectComponents_1.isGroup)(options) && {
-        minWidth: '400px',
-    }))),
-    menuList: provided => (Object.assign(Object.assign({}, provided), { borderRadius: 0, paddingBottom: 0, paddingTop: 0, maxHeight: 400 })),
-    option: (provided, { isMulti, isDisabled, isFocused, isSelected, options, data }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), { backgroundColor: theme.Input.backgroundColor, color: theme.general.color, padding: (0, SelectComponents_1.isGroup)(options) ? '6px 16px' : '10px 18px', cursor: isDisabled ? 'not-allowed' : 'pointer', fontSize: theme.fontSizes.base, fontWeight: isSelected && (0, SelectComponents_1.isGroup)(options) ? 600 : 400, lineHeight: '1.5rem' }), (isSelected &&
-        !isDisabled &&
-        !isMulti && {
-        background: theme.general.primaryColor,
-        borderColor: theme.general.primaryColor,
-        color: theme.Select.contrastTextColor,
-        '&:hover': {
-            backgroundColor: theme.Select.selectedActiveBg,
-        },
-        '&:active': {
-            backgroundColor: theme.general.primaryColor,
-            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
-            color: theme.general.contrastColor,
-        },
-    })), (isFocused &&
-        !isDisabled &&
-        !isSelected && {
-        backgroundColor: theme.Select.optionHoverBg,
-        borderColor: theme.Select.optionHoverBg,
-        color: theme.general.color,
-        '&:active': {
-            background: theme.Select.optionHoverBg,
-            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
-            color: theme.general.color,
-        },
-    })), (isMulti &&
-        isSelected && {
+    group: provided => ({
+        ...provided,
+        padding: 0,
         backgroundColor: theme.Input.backgroundColor,
-        '&:hover': {
+    }),
+    groupHeading: provided => ({
+        ...provided,
+        display: 'flex',
+        fontSize: theme.fontSizes.small,
+        lineHeight: '14px',
+        color: theme.Select.disabledColor,
+        padding: '8px 16px 6px 16px',
+    }),
+    menu: (provided, { options }) => ({
+        ...provided,
+        boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`,
+        borderRadius: 12,
+        marginBottom: 0,
+        marginTop: 4,
+        overflowY: 'overlay',
+        position: menuPosition,
+        ...((0, SelectComponents_1.isGroup)(options) && {
+            minWidth: '400px',
+        }),
+    }),
+    menuList: provided => ({
+        ...provided,
+        borderRadius: 0,
+        paddingBottom: 0,
+        paddingTop: 0,
+        maxHeight: 400,
+    }),
+    option: (provided, { isMulti, isDisabled, isFocused, isSelected, options, data }) => ({
+        ...provided,
+        backgroundColor: theme.Input.backgroundColor,
+        color: theme.general.color,
+        padding: (0, SelectComponents_1.isGroup)(options) ? '6px 16px' : '10px 18px',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        fontSize: theme.fontSizes.base,
+        fontWeight: isSelected && (0, SelectComponents_1.isGroup)(options) ? 600 : 400,
+        lineHeight: '1.5rem',
+        ...(isSelected &&
+            !isDisabled &&
+            !isMulti && {
+            background: theme.general.primaryColor,
+            borderColor: theme.general.primaryColor,
+            color: theme.Select.contrastTextColor,
+            '&:hover': {
+                backgroundColor: theme.Select.selectedActiveBg,
+            },
+            '&:active': {
+                backgroundColor: theme.general.primaryColor,
+                boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+                color: theme.general.contrastColor,
+            },
+        }),
+        ...(isFocused &&
+            !isDisabled &&
+            !isSelected && {
             backgroundColor: theme.Select.optionHoverBg,
-        },
-        '&:active': {
-            background: theme.Select.optionHoverBg,
-            boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+            borderColor: theme.Select.optionHoverBg,
             color: theme.general.color,
-        },
-    })), (isDisabled && Object.assign({ backgroundColor: theme.Input.backgroundColorDisabled, color: theme.Select.disabledColor, '&:hover, &:active, &:focus': {
-            backgroundColor: theme.Select.borderColor,
+            '&:active': {
+                background: theme.Select.optionHoverBg,
+                boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+                color: theme.general.color,
+            },
+        }),
+        ...(isMulti &&
+            isSelected && {
+            backgroundColor: theme.Input.backgroundColor,
+            '&:hover': {
+                backgroundColor: theme.Select.optionHoverBg,
+            },
+            '&:active': {
+                background: theme.Select.optionHoverBg,
+                boxShadow: `inset 0 0 0 1px ${theme.Select.selectedActiveBg}`,
+                color: theme.general.color,
+            },
+        }),
+        ...(isDisabled && {
+            backgroundColor: theme.Input.backgroundColorDisabled,
             color: theme.Select.disabledColor,
-        } }, (isFocused && {
-        backgroundColor: theme.Select.borderColor,
-        color: theme.Select.disabledColor,
-    })))), ((0, SelectComponents_1.isGroup)(options) && {
-        'div > svg': {
-            fill: theme.general.contrastColor,
-        },
-    })), (!(0, SelectComponents_1.isGroup)(options) && {
-        '&:not(:last-of-type)': {
-            borderBottom: `1px solid ${theme.Select.borderColor}`,
-        },
-    })), (!(0, SelectComponents_1.isGroup)(options) && {
-        '&:first-of-type': {
-            borderRadius: '0',
+            '&:hover, &:active, &:focus': {
+                backgroundColor: theme.Select.borderColor,
+                color: theme.Select.disabledColor,
+            },
+            ...(isFocused && {
+                backgroundColor: theme.Select.borderColor,
+                color: theme.Select.disabledColor,
+            }),
+        }),
+        ...((0, SelectComponents_1.isGroup)(options) && {
+            'div > svg': {
+                fill: theme.general.contrastColor,
+            },
+        }),
+        ...(!(0, SelectComponents_1.isGroup)(options) && {
+            '&:not(:last-of-type)': {
+                borderBottom: `1px solid ${theme.Select.borderColor}`,
+            },
+        }),
+        ...(!(0, SelectComponents_1.isGroup)(options) && {
+            '&:first-of-type': {
+                borderRadius: '0',
+            },
+        }),
+        ...((0, SelectComponents_1.isGroup)(options) && {
+            textAlign: 'left',
+        }),
+        '&:last-of-type': {
+            ...(!(0, SelectComponents_1.isGroup)(options) && { borderRadius: '0' }),
+            ...((0, SelectComponents_1.isGroup)(options) &&
+                !options[options.length - 1].options.includes(data) && {
+                borderBottom: `1px solid ${theme.Select.borderColor}`,
+            }),
         },
-    })), ((0, SelectComponents_1.isGroup)(options) && {
-        textAlign: 'left',
-    })), { '&:last-of-type': Object.assign(Object.assign({}, (!(0, SelectComponents_1.isGroup)(options) && { borderRadius: '0' })), ((0, SelectComponents_1.isGroup)(options) &&
-            !options[options.length - 1].options.includes(data) && {
-            borderBottom: `1px solid ${theme.Select.borderColor}`,
-        })) })),
-    valueContainer: provided => (Object.assign(Object.assign({}, provided), { padding: 0, width: '100%', display: 'grid' })),
+    }),
+    valueContainer: provided => ({
+        ...provided,
+        padding: 0,
+        width: '100%',
+        display: 'grid',
+    }),
     singleValue: (provided, selectProps) => {
         const isSelectDisabled = selectProps.isDisabled;
-        return Object.assign(Object.assign({}, provided), { color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color });
+        return {
+            ...provided,
+            color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color,
+        };
     },
 });
 exports.customStyles = customStyles;

package/lib/Form/TextArea.js

@@ -53,9 +53,16 @@ const textAreaStyle = (theme, { markInvalid = false, placeholderTextTransform =
         textTransform: placeholderTextTransform,
     };
     return {
-        '&::-moz-placeholder': Object.assign(Object.assign({}, placeholderStyle), { opacity: 1 }),
-        '&::-ms-input-placeholder': Object.assign({}, placeholderStyle),
-        '&::-webkit-input-placeholder': Object.assign({}, placeholderStyle),
+        '&::-moz-placeholder': {
+            ...placeholderStyle,
+            opacity: 1,
+        },
+        '&::-ms-input-placeholder': {
+            ...placeholderStyle,
+        },
+        '&::-webkit-input-placeholder': {
+            ...placeholderStyle,
+        },
         '&:focus': {
             boxShadow: `0 0 0 1px ${Identity_1.COLOR.BLUE}`,
         },
@@ -82,5 +89,5 @@ const textAreaStyle = (theme, { markInvalid = false, placeholderTextTransform =
 exports.textAreaStyle = textAreaStyle;
 exports.TEXTAREA_CLASSNAME = 'textarea';
 const filterTextAreaProps = (props) => (0, util_1.filterProps)(props, ['markInvalid', 'placeholderTextTransform']);
-exports.TextArea = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ className: exports.TEXTAREA_CLASSNAME, css: (theme) => (0, exports.textAreaStyle)(theme, props), ref: ref }, filterTextAreaProps(props)))));
+exports.TextArea = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("textarea", { className: exports.TEXTAREA_CLASSNAME, css: (theme) => (0, exports.textAreaStyle)(theme, props), ref: ref, ...filterTextAreaProps(props) })));
 exports.TextArea.displayName = 'TextArea';

package/lib/Form/Tooltip.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -108,8 +97,7 @@ const PortalComponent = ({ children, bounding, selector = '#wire-app' }) => {
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: tooltipRef, className: "tooltip", css: (theme) => tooltipStyle(theme), "data-position": isTouchingTop ? 'bottom' : 'top', children: [(0, jsx_runtime_1.jsx)("div", { ref: tooltipArrowRef, className: "tooltip-arrow" }), (0, jsx_runtime_1.jsx)("div", { className: "tooltip-content", "data-testid": "tooltip-content", children: children })] }), targetElement);
 };
 const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['body']);
-const Tooltip = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+const Tooltip = ({ children, ...props }) => {
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const boundingRectRef = (0, react_1.useRef)();
     const filteredProps = filterTooltipProps(props);
@@ -120,6 +108,6 @@ const Tooltip = (_a) => {
         boundingRectRef.current = boundingRect;
     };
     const onElementLeave = () => setIsHovered(false);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "presentation" }, filteredProps, { "data-testid": "tooltip-wrapper", onMouseEnter: onElementEnter, onMouseLeave: onElementLeave, onFocus: onElementEnter, onBlur: onElementLeave }, props, { children: [children, isHovered && ((0, jsx_runtime_1.jsx)(PortalComponent, { bounding: boundingRectRef.current, selector: selector, children: body }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "presentation", ...filteredProps, "data-testid": "tooltip-wrapper", onMouseEnter: onElementEnter, onMouseLeave: onElementLeave, onFocus: onElementEnter, onBlur: onElementLeave, ...props, children: [children, isHovered && ((0, jsx_runtime_1.jsx)(PortalComponent, { bounding: boundingRectRef.current, selector: selector, children: body }))] }));
 };
 exports.Tooltip = Tooltip;

package/lib/GlobalStyle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Theme } from './Layout';
 export declare const GlobalStyle: import("react").FC<Pick<{
     theme: Theme;

package/lib/GlobalStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../src/GlobalStyle.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AA8C/B,eAAO,MAAM,WAAW;WAA+B,KAAK;;;EAU1D,CAAC"}
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../src/GlobalStyle.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AA8C/B,eAAO,MAAM,WAAW;WAA+B,KAAK;;;EAU1D,CAAC"}

package/lib/GlobalStyle.js

@@ -33,9 +33,23 @@ const getGlobalStyles = (theme) => ({
     'b, strong': {
         fontWeight: 600,
     },
-    body: Object.assign(Object.assign({}, GlobalCssVariables_1.GlobalCssVariables.accentColors()), { MozOsxFontSmoothing: 'grayscale', WebkitFontSmoothing: 'antialiased', background: theme.general.backgroundColor, color: theme.general.color, display: 'flex', flexDirection: 'column', minHeight: '100vh', transition: 'background 0.15s' }),
-    'body, body.theme-default': Object.assign({}, GlobalCssVariables_1.GlobalCssVariables.light()),
-    'body.theme-dark': Object.assign({}, GlobalCssVariables_1.GlobalCssVariables.dark()),
+    body: {
+        ...GlobalCssVariables_1.GlobalCssVariables.accentColors(),
+        MozOsxFontSmoothing: 'grayscale',
+        WebkitFontSmoothing: 'antialiased',
+        background: theme.general.backgroundColor,
+        color: theme.general.color,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh',
+        transition: 'background 0.15s',
+    },
+    'body, body.theme-default': {
+        ...GlobalCssVariables_1.GlobalCssVariables.light(),
+    },
+    'body.theme-dark': {
+        ...GlobalCssVariables_1.GlobalCssVariables.dark(),
+    },
     html: {
         background: theme.general.backgroundColor,
         transition: 'background 0.15s',

package/lib/Icon/AddPeopleIcon.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddPeopleIcon = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -32,8 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const AddPeopleIcon = (_a) => {
-    var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2V0h2v2h2v2h-2v2h-2V4h-2V2h2zm-2.6 8.6c1.4 0 2.6 1.1 2.6 2.5v1.1a12.8 12.8 0 0 1-12 0v-1c0-1.5 1.2-2.6 2.6-2.6h.3a6 6 0 0 0 6.2 0h.3zM6 8.9A3.4 3.4 0 1 1 6 2a3.4 3.4 0 0 1 0 6.9z" }) })));
-};
+const AddPeopleIcon = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 16, realHeight: 16, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2V0h2v2h2v2h-2v2h-2V4h-2V2h2zm-2.6 8.6c1.4 0 2.6 1.1 2.6 2.5v1.1a12.8 12.8 0 0 1-12 0v-1c0-1.5 1.2-2.6 2.6-2.6h.3a6 6 0 0 0 6.2 0h.3zM6 8.9A3.4 3.4 0 1 1 6 2a3.4 3.4 0 0 1 0 6.9z" }) }));
 exports.AddPeopleIcon = AddPeopleIcon;

package/lib/Icon/ArchiveIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const ArchiveIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1 7h14v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7zm6 2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2H7zM2.5 0h11c.8 0 1.2 0 1.5.3.3.1.6.4.7.7.2.3.3.7.3 1.5V4c0 .6-.4 1-1 1H1a1 1 0 0 1-1-1V2.5C0 1.7 0 1.3.3 1 .4.7.7.4 1 .3c.3-.2.7-.3 1.5-.3z" }) })));
+const ArchiveIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 16, realHeight: 16, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M1 7h14v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7zm6 2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2H7zM2.5 0h11c.8 0 1.2 0 1.5.3.3.1.6.4.7.7.2.3.3.7.3 1.5V4c0 .6-.4 1-1 1H1a1 1 0 0 1-1-1V2.5C0 1.7 0 1.3.3 1 .4.7.7.4 1 .3c.3-.2.7-.3 1.5-.3z" }) }));
 exports.ArchiveIcon = ArchiveIcon;

package/lib/Icon/ArrowDown.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowDown = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -32,8 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const ArrowDown = (_a) => {
-    var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z" }) })));
-};
+const ArrowDown = ({ ...props }) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 16, realHeight: 16, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M7.99963 12.5711L15.6565 4.91421L14.2423 3.5L7.99963 9.74264L1.75699 3.5L0.342773 4.91421L7.99963 12.5711Z" }) }));
 exports.ArrowDown = ArrowDown;

package/lib/Icon/ArrowIcon.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrowIcon = exports.rotation = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -38,8 +27,5 @@ exports.rotation = {
     left: 180,
     up: 270,
 };
-const ArrowIcon = (_a) => {
-    var { direction = 'right' } = _a, props = __rest(_a, ["direction"]);
-    return ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsx)("path", { transform: `rotate(${exports.rotation[direction]} 8 8)`, d: "M5.8 1.5L7.3 0l8 8-8 8-1.5-1.5L11.3 9H.7V7h10.6" }) })));
-};
+const ArrowIcon = ({ direction = 'right', ...props }) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 16, realHeight: 16, ...props, children: (0, jsx_runtime_1.jsx)("path", { transform: `rotate(${exports.rotation[direction]} 8 8)`, d: "M5.8 1.5L7.3 0l8 8-8 8-1.5-1.5L11.3 9H.7V7h10.6" }) }));
 exports.ArrowIcon = ArrowIcon;

package/lib/Icon/AttachmentIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const AttachmentIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 14, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1.6 7.7l4.8-4.8A3.3 3.3 0 0 1 11 3a3.4 3.4 0 0 1 0 4.8L9.8 9.1l-4.4 4.4a2 2 0 0 1-2.8 0 2 2 0 0 1 0-2.7L4 9.4 8.4 5c.2-.2.5-.2.7 0 .2.2.2.5 0 .6l-4.8 4.8a1 1 0 0 0 0 1.4c.4.4 1 .4 1.4 0L10.4 7c1-1 1-2.5 0-3.4-1-1-2.4-1-3.3 0L2.6 8 1.3 9.4a3.9 3.9 0 0 0 0 5.5c1.5 1.5 4 1.5 5.4 0l4.4-4.5 1.4-1.3c2-2.1 2-5.5 0-7.5a5.3 5.3 0 0 0-7.5 0L.3 6.3a1 1 0 0 0 0 1.4c.4.4 1 .4 1.3 0z" }) })));
+const AttachmentIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 14, realHeight: 16, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M1.6 7.7l4.8-4.8A3.3 3.3 0 0 1 11 3a3.4 3.4 0 0 1 0 4.8L9.8 9.1l-4.4 4.4a2 2 0 0 1-2.8 0 2 2 0 0 1 0-2.7L4 9.4 8.4 5c.2-.2.5-.2.7 0 .2.2.2.5 0 .6l-4.8 4.8a1 1 0 0 0 0 1.4c.4.4 1 .4 1.4 0L10.4 7c1-1 1-2.5 0-3.4-1-1-2.4-1-3.3 0L2.6 8 1.3 9.4a3.9 3.9 0 0 0 0 5.5c1.5 1.5 4 1.5 5.4 0l4.4-4.5 1.4-1.3c2-2.1 2-5.5 0-7.5a5.3 5.3 0 0 0-7.5 0L.3 6.3a1 1 0 0 0 0 1.4c.4.4 1 .4 1.3 0z" }) }));
 exports.AttachmentIcon = AttachmentIcon;

package/lib/Icon/AudioVideoIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const AudioVideoIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0 1c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v11c0 .6-.4 1-1 1H1a1 1 0 0 1-1-1V1zm5 13h6v2H5v-2zm-3-4v1h3v-1H2zm0-2v1h3V8H2zm0-2v1h3V6H2zm0-2v1h3V4H2zm4.5 6v1h3v-1h-3zm0-2v1h3V8h-3zm4.5 2v1h3v-1h-3zm0-2v1h3V8h-3zm0-2v1h3V6h-3z" }) })));
+const AudioVideoIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 16, realHeight: 16, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M0 1c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v11c0 .6-.4 1-1 1H1a1 1 0 0 1-1-1V1zm5 13h6v2H5v-2zm-3-4v1h3v-1H2zm0-2v1h3V8H2zm0-2v1h3V6H2zm0-2v1h3V4H2zm4.5 6v1h3v-1h-3zm0-2v1h3V8h-3zm4.5 2v1h3v-1h-3zm0-2v1h3V8h-3zm0-2v1h3V6h-3z" }) }));
 exports.AudioVideoIcon = AudioVideoIcon;

package/lib/Icon/BlockIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("./SVGIcon");
-const BlockIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 16, realHeight: 16 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm4.9-11.48l-.2.19-8.18 8.18a6 6 0 0 0 8.37-8.37zm-1.42-1.41a6 6 0 0 0-8.37 8.37l8.18-8.19.19-.18z" }) })));
+const BlockIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 16, realHeight: 16, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm4.9-11.48l-.2.19-8.18 8.18a6 6 0 0 0 8.37-8.37zm-1.42-1.41a6 6 0 0 0-8.37 8.37l8.18-8.19.19-.18z" }) }));
 exports.BlockIcon = BlockIcon;

package/lib/Icon/Brand/AndroidIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("../SVGIcon");
-const AndroidIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 32, realHeight: 32 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M4.04 10.35c-1.133 0-2.04.886-2.04 1.971v8.268c0 1.094.916 1.971 2.04 1.971 1.131 0 2.038-.886 2.038-1.971V12.32c0-1.085-.916-1.971-2.039-1.971zm16.465-7.425L21.933.406a.276.276 0 0 0-.108-.373c-.134-.07-.314-.026-.386.112L20.002 2.69a10.133 10.133 0 0 0-4.006-.816 10.04 10.04 0 0 0-3.989.807L10.57.145a.297.297 0 0 0-.386-.112.277.277 0 0 0-.117.373l1.428 2.519C8.692 4.323 6.797 6.98 6.797 10.037h18.397c0-3.057-1.886-5.714-4.689-7.112zm-8.696 3.89a.76.76 0 0 1-.772-.747.76.76 0 0 1 .772-.747c.423 0 .773.34.773.747a.754.754 0 0 1-.773.747zm8.382 0a.76.76 0 0 1-.773-.747.76.76 0 0 1 .773-.747c.422 0 .772.34.772.747a.772.772 0 0 1-.772.747zM6.869 10.723v12.818c0 1.164.97 2.11 2.183 2.11h1.482v4.378c0 1.085.916 1.971 2.039 1.971 1.132 0 2.04-.886 2.04-1.98v-4.377h2.757v4.377c0 1.086.916 1.971 2.039 1.971 1.132 0 2.04-.885 2.04-1.971v-4.377h1.49c1.204 0 2.183-.938 2.183-2.11V10.714l-18.253.01zM30 12.321c0-1.094-.916-1.971-2.04-1.971-1.131 0-2.038.886-2.038 1.971v8.268c0 1.094.916 1.971 2.039 1.971 1.132 0 2.039-.886 2.039-1.971V12.32z", fillRule: "evenodd" }) })));
+const AndroidIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 32, realHeight: 32, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M4.04 10.35c-1.133 0-2.04.886-2.04 1.971v8.268c0 1.094.916 1.971 2.04 1.971 1.131 0 2.038-.886 2.038-1.971V12.32c0-1.085-.916-1.971-2.039-1.971zm16.465-7.425L21.933.406a.276.276 0 0 0-.108-.373c-.134-.07-.314-.026-.386.112L20.002 2.69a10.133 10.133 0 0 0-4.006-.816 10.04 10.04 0 0 0-3.989.807L10.57.145a.297.297 0 0 0-.386-.112.277.277 0 0 0-.117.373l1.428 2.519C8.692 4.323 6.797 6.98 6.797 10.037h18.397c0-3.057-1.886-5.714-4.689-7.112zm-8.696 3.89a.76.76 0 0 1-.772-.747.76.76 0 0 1 .772-.747c.423 0 .773.34.773.747a.754.754 0 0 1-.773.747zm8.382 0a.76.76 0 0 1-.773-.747.76.76 0 0 1 .773-.747c.422 0 .772.34.772.747a.772.772 0 0 1-.772.747zM6.869 10.723v12.818c0 1.164.97 2.11 2.183 2.11h1.482v4.378c0 1.085.916 1.971 2.039 1.971 1.132 0 2.04-.886 2.04-1.98v-4.377h2.757v4.377c0 1.086.916 1.971 2.039 1.971 1.132 0 2.04-.885 2.04-1.971v-4.377h1.49c1.204 0 2.183-.938 2.183-2.11V10.714l-18.253.01zM30 12.321c0-1.094-.916-1.971-2.04-1.971-1.131 0-2.038.886-2.038 1.971v8.268c0 1.094.916 1.971 2.039 1.971 1.132 0 2.039-.886 2.039-1.971V12.32z", fillRule: "evenodd" }) }));
 exports.AndroidIcon = AndroidIcon;

package/lib/Icon/Brand/AppleIcon.js

@@ -21,5 +21,5 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const SVGIcon_1 = require("../SVGIcon");
-const AppleIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 32, realHeight: 32 }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M24.716 17.018c.041 4.845 4.233 6.447 4.284 6.464-.025.113-.656 2.312-2.228 4.545-1.313 1.965-2.689 3.887-4.873 3.922-2.122.049-2.836-1.25-5.27-1.25-2.457 0-3.217 1.215-5.252 1.299-2.081.077-3.67-2.098-5.031-4.046-2.72-3.978-4.837-11.21-1.998-16.13 1.375-2.413 3.883-3.967 6.564-4.009 2.083-.042 4.016 1.409 5.296 1.409 1.255 0 3.645-1.736 6.11-1.476 1.03.03 3.964.407 5.857 3.17-.153.092-3.495 2.059-3.459 6.102zM20.707 5.129c-1.142 1.35-2.97 2.382-4.75 2.249-.233-1.821.67-3.758 1.679-4.94C18.777 1.098 20.759.07 22.343 0c.208 1.893-.54 3.758-1.636 5.129z", fillRule: "evenodd" }) })));
+const AppleIcon = (props) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 32, realHeight: 32, ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M24.716 17.018c.041 4.845 4.233 6.447 4.284 6.464-.025.113-.656 2.312-2.228 4.545-1.313 1.965-2.689 3.887-4.873 3.922-2.122.049-2.836-1.25-5.27-1.25-2.457 0-3.217 1.215-5.252 1.299-2.081.077-3.67-2.098-5.031-4.046-2.72-3.978-4.837-11.21-1.998-16.13 1.375-2.413 3.883-3.967 6.564-4.009 2.083-.042 4.016 1.409 5.296 1.409 1.255 0 3.645-1.736 6.11-1.476 1.03.03 3.964.407 5.857 3.17-.153.092-3.495 2.059-3.459 6.102zM20.707 5.129c-1.142 1.35-2.97 2.382-4.75 2.249-.233-1.821.67-3.758 1.679-4.94C18.777 1.098 20.759.07 22.343 0c.208 1.893-.54 3.758-1.636 5.129z", fillRule: "evenodd" }) }));
 exports.AppleIcon = AppleIcon;