@wireapp/react-ui-kit 9.18.0 → 9.18.1

package/lib/Menu/MenuModal.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.MenuItem = exports.MenuModal = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -18,9 +7,16 @@ const motions_1 = require("../Identity/motions");
 const mediaQueries_1 = require("../mediaQueries");
 const Overlay_1 = require("../Modal/Overlay");
 const util_1 = require("../util");
-const menuModalWrapperStyle = props => (Object.assign(Object.assign({}, (0, Overlay_1.overlayBackgroundStyle)(props)), { alignItems: 'flex-end', alignSelf: 'flex-end', display: 'flex', overflowY: 'hidden', padding: 0 }));
-const MenuModalWrapper = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: menuModalWrapperStyle }, props));
-const MenuModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => ({
+const menuModalWrapperStyle = props => ({
+    ...(0, Overlay_1.overlayBackgroundStyle)(props),
+    alignItems: 'flex-end',
+    alignSelf: 'flex-end',
+    display: 'flex',
+    overflowY: 'hidden',
+    padding: 0,
+});
+const MenuModalWrapper = (props) => (0, jsx_runtime_1.jsx)("div", { css: menuModalWrapperStyle, ...props });
+const MenuModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => ({
         animation: `${motions_1.ANIMATION.bottomUpMovement} ${motions_1.DURATION.DEFAULT}ms ${motions_1.EASE.EXPONENTIAL}`,
         backgroundColor: Identity_1.COLOR.tint(theme.general.backgroundColor, 0.16),
         boxShadow: '0 16px 64px 0 rgba(0, 0, 0, 0.16)',
@@ -36,8 +32,8 @@ const MenuModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({
         [mediaQueries_1.media[mediaQueries_1.QueryKeys.TABLET_DOWN]]: {
             width: '100%',
         },
-    }) }, props)));
-const MenuModalContent = (props) => ((0, jsx_runtime_1.jsx)("ul", Object.assign({ css: {
+    }), ...props }));
+const MenuModalContent = (props) => ((0, jsx_runtime_1.jsx)("ul", { css: {
         li: {
             borderBottom: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
         },
@@ -48,24 +44,21 @@ const MenuModalContent = (props) => ((0, jsx_runtime_1.jsx)("ul", Object.assign(
         maxWidth: '100%',
         minWidth: '100%',
         padding: 0,
-    } }, props)));
-const modalBackgroundStyle = props => (Object.assign(Object.assign({}, (0, Overlay_1.overlayBackgroundStyle)(props)), { background: 'rgba(50, 54, 57, 0.4)' }));
-const MenuModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: modalBackgroundStyle }, props));
-const MenuModal = (_a) => {
-    var { children = null, onBackgroundClick = util_1.noop } = _a, props = __rest(_a, ["children", "onBackgroundClick"]);
-    return ((0, jsx_runtime_1.jsxs)(MenuModalWrapper, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(MenuModalBody, { children: (0, jsx_runtime_1.jsx)(MenuModalContent, { children: children }) }), (0, jsx_runtime_1.jsx)(MenuModalBackground, { onClick: onBackgroundClick, "data-uie-name": "menu-background" })] })));
-};
+    }, ...props }));
+const modalBackgroundStyle = props => ({
+    ...(0, Overlay_1.overlayBackgroundStyle)(props),
+    background: 'rgba(50, 54, 57, 0.4)',
+});
+const MenuModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: modalBackgroundStyle, ...props });
+const MenuModal = ({ children = null, onBackgroundClick = util_1.noop, ...props }) => ((0, jsx_runtime_1.jsxs)(MenuModalWrapper, { ...props, children: [(0, jsx_runtime_1.jsx)(MenuModalBody, { children: (0, jsx_runtime_1.jsx)(MenuModalContent, { children: children }) }), (0, jsx_runtime_1.jsx)(MenuModalBackground, { onClick: onBackgroundClick, "data-uie-name": "menu-background" })] }));
 exports.MenuModal = MenuModal;
-const MenuItem = (_a) => {
-    var { children = null } = _a, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: (theme) => ({
-            alignItems: 'center',
-            color: theme.general.color,
-            cursor: 'pointer',
-            display: 'flex',
-            height: '56px',
-            listStyleType: 'none',
-            maxWidth: '100%',
-        }) }, props, { children: children })));
-};
+const MenuItem = ({ children = null, ...props }) => ((0, jsx_runtime_1.jsx)("li", { css: (theme) => ({
+        alignItems: 'center',
+        color: theme.general.color,
+        cursor: 'pointer',
+        display: 'flex',
+        height: '56px',
+        listStyleType: 'none',
+        maxWidth: '100%',
+    }), ...props, children: children }));
 exports.MenuItem = MenuItem;

package/lib/Menu/TabBar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextProps } from '../Text';
 export type TabBarProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const TabBar: ({ children, ...props }: TabBarProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TabBar: ({ children, ...props }: TabBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export interface TabBarItemProps<T = HTMLSpanElement> extends TextProps<T> {
     active: boolean;
 }

package/lib/Menu/TabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/Menu/TabBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,SAAS,EAAY,MAAM,SAAS,CAAC;AAG7C,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAWjE,eAAO,MAAM,MAAM,2GAIlB,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,MAAM,EAAE,OAAO,CAAC;CACjB;AA2BD,eAAO,MAAM,UAAU,2BAAiC,eAAe,qDAItE,CAAC"}
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/Menu/TabBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,SAAS,EAAY,MAAM,SAAS,CAAC;AAG7C,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAWjE,eAAO,MAAM,MAAM,2BAAiC,WAAW,qDAI9D,CAAC;AAEF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACxE,MAAM,EAAE,OAAO,CAAC;CACjB;AA2BD,eAAO,MAAM,UAAU,2BAAiC,eAAe,qDAItE,CAAC"}

package/lib/Menu/TabBar.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.TabBarItem = exports.TabBar = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -23,17 +12,19 @@ const tabBarStyle = ({}) => {
     };
 };
 const filteredTabBarProps = (props) => (0, util_1.filterProps)(props, []);
-const TabBar = (_a) => {
-    var { children = null } = _a, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: tabBarStyle(props) }, filteredTabBarProps(props), { children: children })));
-};
+const TabBar = ({ children = null, ...props }) => ((0, jsx_runtime_1.jsx)("div", { css: tabBarStyle(props), ...filteredTabBarProps(props), children: children }));
 exports.TabBar = TabBar;
-const tabBarItemStyle = (theme, _a) => {
-    var { block = true, center = true, color = theme.general.color, bold = true, active = false, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase' } = _a, props = __rest(_a, ["block", "center", "color", "bold", "active", "fontSize", "textTransform"]);
-    return Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block, bold, center, color, fontSize, textTransform }, props))), { borderBottom: active ? `1px solid ${Identity_1.COLOR.GRAY_DARKEN_48}` : `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_40}`, cursor: 'pointer', display: 'flex', flexGrow: 1, justifyContent: 'center', opacity: active ? 1 : 0.56, padding: '8px 0' });
-};
-const TabBarItem = (_a) => {
-    var { children = null } = _a, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => tabBarItemStyle(theme, props) }, props, { children: children })));
+const tabBarItemStyle = (theme, { block = true, center = true, color = theme.general.color, bold = true, active = false, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', ...props }) => {
+    return {
+        ...(0, Text_1.textStyle)(theme, { block, bold, center, color, fontSize, textTransform, ...props }),
+        borderBottom: active ? `1px solid ${Identity_1.COLOR.GRAY_DARKEN_48}` : `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_40}`,
+        cursor: 'pointer',
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'center',
+        opacity: active ? 1 : 0.56,
+        padding: '8px 0',
+    };
 };
+const TabBarItem = ({ children = null, ...props }) => ((0, jsx_runtime_1.jsx)("span", { css: (theme) => tabBarItemStyle(theme, props), ...props, children: children }));
 exports.TabBarItem = TabBarItem;

package/lib/Misc/ButtonGroup.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.ButtonGroup = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -18,44 +7,58 @@ const buttonGroupStyle = () => ({
     display: 'flex',
     alignItems: 'center',
 });
-const buttonStyle = (_, { disabled = false }) => (Object.assign({ height: '32px', borderRadius: '12px', padding: '0 12px', background: Identity_1.COLOR_V2.WHITE, border: `1px solid ${Identity_1.COLOR_V2.GRAY_40}`, cursor: 'pointer', display: 'flex', alignItems: 'center', backgroundColor: disabled ? Identity_1.COLOR_V2.GRAY_20 : Identity_1.COLOR_V2.WHITE, svg: {
+const buttonStyle = (_, { disabled = false }) => ({
+    height: '32px',
+    borderRadius: '12px',
+    padding: '0 12px',
+    background: Identity_1.COLOR_V2.WHITE,
+    border: `1px solid ${Identity_1.COLOR_V2.GRAY_40}`,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: disabled ? Identity_1.COLOR_V2.GRAY_20 : Identity_1.COLOR_V2.WHITE,
+    svg: {
         fill: disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLACK,
-    }, '&:not(:last-child)': {
+    },
+    '&:not(:last-child)': {
         borderTopRightRadius: '0',
         borderBottomRightRadius: '0',
-    }, '&:not(:first-child)': {
+    },
+    '&:not(:first-child)': {
         borderTopLeftRadius: '0',
         borderBottomLeftRadius: '0',
-    }, '&:first-child:last-child': {
-        borderRadius: '0',
-    } }, (!disabled && {
-    '&:hover, &:focus': {
-        backgroundColor: Identity_1.COLOR_V2.GRAY_20,
-    },
-    '&:hover': {
-        borderColor: Identity_1.COLOR_V2.GRAY_50,
     },
-    '&:focus': {
-        borderColor: Identity_1.COLOR_V2.GRAY_60,
+    '&:first-child:last-child': {
+        borderRadius: '0',
     },
-    '&:active': {
-        backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_50,
-        borderColor: Identity_1.COLOR_V2.BLUE_LIGHT_300,
-        svg: {
-            fill: Identity_1.COLOR_V2.BLUE,
+    ...(!disabled && {
+        '&:hover, &:focus': {
+            backgroundColor: Identity_1.COLOR_V2.GRAY_20,
         },
-    },
-})));
+        '&:hover': {
+            borderColor: Identity_1.COLOR_V2.GRAY_50,
+        },
+        '&:focus': {
+            borderColor: Identity_1.COLOR_V2.GRAY_60,
+        },
+        '&:active': {
+            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_50,
+            borderColor: Identity_1.COLOR_V2.BLUE_LIGHT_300,
+            svg: {
+                fill: Identity_1.COLOR_V2.BLUE,
+            },
+        },
+    }),
+});
 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", { css: (theme) => ({
+const Button = ({ children, icon, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("button", { 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

@@ -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.IconButton = exports.iconButtonStyle = exports.IconButtonVariant = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -21,52 +10,76 @@ var IconButtonVariant;
     IconButtonVariant["PRIMARY"] = "primary";
     IconButtonVariant["SECONDARY"] = "secondary";
 })(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
-        ? theme.IconButton.primaryDisabledBgColor
-        : backgroundColor || theme.IconButton.primaryBgColor, border: disabled
-        ? `1px solid ${theme.IconButton.primaryDisabledBorderColor}`
-        : `1px solid ${theme.IconButton.primaryBorderColor}`, svg: {
-        fill: disabled ? theme.Input.placeholderColor : theme.general.color,
-    } }, (!disabled && {
+const iconButtonStyle = (theme, { variant = IconButtonVariant.PRIMARY, backgroundColor, disabled = false }) => ({
+    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': {
-        backgroundColor: theme.IconButton.hoverPrimaryBgColor,
-    },
-    '&:hover': {
-        borderColor: theme.IconButton.primaryHoverBorderColor,
-    },
-    '&:focus': {
-        borderColor: theme.IconButton.focusBorderColor,
+        textDecoration: 'none',
     },
-    '&:active': {
-        backgroundColor: theme.IconButton.activePrimaryBgColor,
-        borderColor: theme.IconButton.focusBorderColor,
+    ...(variant === IconButtonVariant.PRIMARY && {
+        backgroundColor: disabled
+            ? theme.IconButton.primaryDisabledBgColor
+            : backgroundColor || theme.IconButton.primaryBgColor,
+        border: disabled
+            ? `1px solid ${theme.IconButton.primaryDisabledBorderColor}`
+            : `1px solid ${theme.IconButton.primaryBorderColor}`,
         svg: {
-            fill: theme.general.primaryColor,
+            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
         },
-    },
-})))), (variant === IconButtonVariant.SECONDARY && Object.assign({ backgroundColor: 'inherit', svg: {
-        fill: disabled ? theme.Input.placeholderColor : theme.general.color,
-    } }, (!disabled && {
-    '&:hover, &:focus, &:active': {
+        ...(!disabled && {
+            '&:hover, &:focus': {
+                backgroundColor: theme.IconButton.hoverPrimaryBgColor,
+            },
+            '&:hover': {
+                borderColor: theme.IconButton.primaryHoverBorderColor,
+            },
+            '&:focus': {
+                borderColor: theme.IconButton.focusBorderColor,
+            },
+            '&:active': {
+                backgroundColor: theme.IconButton.activePrimaryBgColor,
+                borderColor: theme.IconButton.focusBorderColor,
+                svg: {
+                    fill: theme.general.primaryColor,
+                },
+            },
+        }),
+    }),
+    ...(variant === IconButtonVariant.SECONDARY && {
+        backgroundColor: 'inherit',
         svg: {
-            fill: theme.general.primaryColor,
+            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
         },
-    },
-    '&:focus': {
-        border: `1px solid ${theme.IconButton.focusBorderColor}`,
-    },
-    '&:active': {
-        border: `1px solid ${theme.IconButton.secondaryActiveBorderColor}`,
-        backgroundColor: theme.Input.backgroundColor,
-    },
-})))));
+        ...(!disabled && {
+            '&:hover, &:focus, &:active': {
+                svg: {
+                    fill: theme.general.primaryColor,
+                },
+            },
+            '&:focus': {
+                border: `1px solid ${theme.IconButton.focusBorderColor}`,
+            },
+            '&:active': {
+                border: `1px solid ${theme.IconButton.secondaryActiveBorderColor}`,
+                backgroundColor: theme.Input.backgroundColor,
+            },
+        }),
+    }),
+});
 exports.iconButtonStyle = iconButtonStyle;
-const IconButton = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ css: (theme) => (0, exports.iconButtonStyle)(theme, props) }, filterButtonProps(props), { children: children })));
-};
+const IconButton = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("button", { css: (theme) => (0, exports.iconButtonStyle)(theme, props), ...filterButtonProps(props), children: children }));
 exports.IconButton = IconButton;
 const filterButtonProps = (props) => {
     return (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), ['backgroundColor']);

package/lib/Misc/IsInViewport.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.IsInViewport = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -32,8 +21,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const react_1 = require("react");
-const IsInViewport = (_a) => {
-    var { onEnterViewport, disabled = false, checkViewportOnce = false } = _a, props = __rest(_a, ["onEnterViewport", "disabled", "checkViewportOnce"]);
+const IsInViewport = ({ onEnterViewport, disabled = false, checkViewportOnce = false, ...props }) => {
     const element = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         let observer = undefined;
@@ -56,6 +44,6 @@ const IsInViewport = (_a) => {
             }
         };
     }, [onEnterViewport]);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: element }, props));
+    return (0, jsx_runtime_1.jsx)("div", { ref: element, ...props });
 };
 exports.IsInViewport = IsInViewport;

package/lib/Misc/Loading.js

@@ -1,23 +1,11 @@
 "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.Loading = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const Identity_1 = require("../Identity");
 const motions_1 = require("../Identity/motions");
-const Loading = (_a) => {
-    var { progress = undefined, size = 43, color = '#218fd1' } = _a, props = __rest(_a, ["progress", "size", "color"]);
+const Loading = ({ progress = undefined, size = 43, color = '#218fd1', ...props }) => {
     const pathLength = 125.68;
     const rotationOffset = -0.75;
     const rotationDelay = motions_1.DURATION.EXTRA_LONG * rotationOffset;
@@ -29,12 +17,12 @@ const Loading = (_a) => {
       stroke-dashoffset: 0;
     }
   `;
-    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: size, height: size, viewBox: "0 0 43 43", strokeWidth: "3", fill: "none" }, props, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "21.5", cy: "21.5", r: "20", stroke: Identity_1.COLOR.opaque(color, 0.08) }), (0, jsx_runtime_1.jsx)("circle", { css: !progress && {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 43 43", strokeWidth: "3", fill: "none", ...props, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "21.5", cy: "21.5", r: "20", stroke: Identity_1.COLOR.opaque(color, 0.08) }), (0, jsx_runtime_1.jsx)("circle", { css: !progress && {
                     animation: `${fillAnimation} ${motions_1.DURATION.EXTRA_LONG}ms ease-in-out infinite,
               ${motions_1.ANIMATION.rotate} ${motions_1.DURATION.EXTRA_LONG}ms linear ${rotationDelay}ms infinite`,
                     strokeDasharray: pathLength,
                     transformOrigin: '50% 50%',
-                }, cx: "21.5", cy: "21.5", r: "20", stroke: color, strokeLinecap: "round", strokeDasharray: pathLength, strokeDashoffset: progress && `${pathLength - pathLength * progress}` })] })));
+                }, cx: "21.5", cy: "21.5", r: "20", stroke: color, strokeLinecap: "round", strokeDasharray: pathLength, strokeDashoffset: progress && `${pathLength - pathLength * progress}` })] }));
 };
 exports.Loading = Loading;
 exports.Loading.defaultProps = {

package/lib/Misc/Pagination.js

@@ -1,23 +1,11 @@
 "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.Pagination = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Identity_1 = require("../Identity");
 const Layout_1 = require("../Layout");
 const Text_1 = require("../Text");
-const Pagination = (_a) => {
-    var { currentPage = 0, numberOfPages = 1, goPage, previousPageComponent: PreviousPageComponent = () => '<', nextPageComponent: NextPageComponent = () => '>' } = _a, props = __rest(_a, ["currentPage", "numberOfPages", "goPage", "previousPageComponent", "nextPageComponent"]);
+const Pagination = ({ currentPage = 0, numberOfPages = 1, goPage, previousPageComponent: PreviousPageComponent = () => '<', nextPageComponent: NextPageComponent = () => '>', ...props }) => {
     const isLastPage = currentPage === numberOfPages - 1;
     const isFirstPage = currentPage === 0;
     const renderPageList = () => {
@@ -40,6 +28,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", { 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, {}) })) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.FlexBox, { 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

@@ -52,5 +52,5 @@ const pillStyle = (theme, { active = false, type = null }) => {
 exports.pillStyle = pillStyle;
 const filterPillProps = (props) => (0, util_1.filterProps)(props, ['active']);
 exports.filterPillProps = filterPillProps;
-const Pill = (props) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: (theme) => (0, exports.pillStyle)(theme, props), "data-uie-name": "element-pill", "data-uie-status": props.type }, (0, exports.filterPillProps)(props))));
+const Pill = (props) => ((0, jsx_runtime_1.jsx)("span", { css: (theme) => (0, exports.pillStyle)(theme, props), "data-uie-name": "element-pill", "data-uie-status": props.type, ...(0, exports.filterPillProps)(props) }));
 exports.Pill = Pill;

package/lib/Misc/childrenWithDefaultProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"childrenWithDefaultProps.d.ts","sourceRoot":"","sources":["../../src/Misc/childrenWithDefaultProps.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,OAAO,EAAE,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,CAAC,CAAC;CACjB;AAED,eAAO,MAAM,wBAAwB,gDAA6C,cAAc,CAAC,EAAE,CAAC,CAAC,6IAYjG,CAAC"}
+{"version":3,"file":"childrenWithDefaultProps.d.ts","sourceRoot":"","sources":["../../src/Misc/childrenWithDefaultProps.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,OAAO,EAAE,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,CAAC,CAAC;CACjB;AAED,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,OAAO,EAAE,CAAC,yBAAqB,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,6IAYjG,CAAC"}

package/lib/Misc/childrenWithDefaultProps.js

@@ -52,6 +52,6 @@ const childrenWithDefaultProps = (props) => React.Children.map(props.children, n
         return node;
     }
     const elementChild = node;
-    return React.cloneElement(elementChild, Object.assign(Object.assign({}, props.defaultProps), elementChild.props));
+    return React.cloneElement(elementChild, { ...props.defaultProps, ...elementChild.props });
 });
 exports.childrenWithDefaultProps = childrenWithDefaultProps;

package/lib/Modal/Modal.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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -43,8 +32,8 @@ const modalBodyStyle = (theme, { fullscreen = false }) => ({
     },
 });
 const filterModalBodyProps = (props) => (0, util_1.filterProps)(props, ['fullscreen']);
-const ModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => modalBodyStyle(theme, props) }, filterModalBodyProps(props))));
-const ModalClose = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, Object.assign({ width: 16, height: 16, css: {
+const ModalBody = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => modalBodyStyle(theme, props), ...filterModalBodyProps(props) }));
+const ModalClose = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, { width: 16, height: 16, css: {
         alignItems: 'center',
         cursor: 'pointer',
         display: 'flex',
@@ -52,14 +41,17 @@ const ModalClose = (props) => ((0, jsx_runtime_1.jsx)(Icon_1.CloseIcon, Object.a
         position: 'absolute',
         right: 16,
         top: 16,
-    } }, props)));
-const ModalContent = props => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    }, ...props }));
+const ModalContent = props => ((0, jsx_runtime_1.jsx)("div", { css: {
         maxWidth: '100%',
         overflowY: 'auto',
         padding: '40px',
-    } }, props)));
-const modalBackgroundStyle = props => (Object.assign(Object.assign({}, (0, Overlay_1.overlayBackgroundStyle)(props)), { backgroundColor: 'rgba(50, 54, 57, 0.4)' }));
-const ModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: modalBackgroundStyle(props) }, props));
+    }, ...props }));
+const modalBackgroundStyle = props => ({
+    ...(0, Overlay_1.overlayBackgroundStyle)(props),
+    backgroundColor: 'rgba(50, 54, 57, 0.4)',
+});
+const ModalBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: modalBackgroundStyle(props), ...props });
 const modalActionsWrapperStyles = () => ({
     borderTop: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
     bottom: 0,
@@ -96,10 +88,7 @@ const modalActionStyles = ({ bold }) => ({
     padding: '8px 0',
 });
 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, { 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" }))] })));
-};
+const Modal = ({ actions = [], children, bodyStyle, fullscreen, onClose, onBackgroundClick, ...props }) => ((0, jsx_runtime_1.jsxs)(Overlay_1.OverlayWrapper, { ...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 = {
     actions: [],

package/lib/Modal/Overlay.d.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { CSSObject } from '@emotion/react';
 export type OverlayWrapperProps<T = HTMLDivElement> = React.HTMLProps<T>;
 export declare const overlayWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject;
-export declare const OverlayWrapper: (props: OverlayWrapperProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OverlayWrapper: (props: OverlayWrapperProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const OverlayContent: (props: React.HTMLProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export type OverlayBackgroundProps<T = HTMLDivElement> = React.HTMLProps<T>;
 export declare const overlayBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject;
-export declare const OverlayBackground: (props: OverlayBackgroundProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OverlayBackground: (props: OverlayBackgroundProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export interface OverlayProps<T = HTMLDivElement> extends React.HTMLProps<T> {
     onBackgroundClick?: () => void;
 }

package/lib/Modal/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Modal/Overlay.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAEzE,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAUtE,CAAC;AAEH,eAAO,MAAM,cAAc,kGAA+E,CAAC;AAE3G,eAAO,MAAM,cAAc,UAAW,MAAM,SAAS,CAAC,cAAc,CAAC,qDAsBpE,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,sBAAsB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAS5E,CAAC;AAEH,eAAO,MAAM,iBAAiB,qGAAqF,CAAC;AAEpH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,OAAO,8CAA2D,YAAY,qDAK1F,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Modal/Overlay.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAEzE,eAAO,MAAM,mBAAmB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAUtE,CAAC;AAEH,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAAiD,CAAC;AAE3G,eAAO,MAAM,cAAc,UAAW,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,qDAsBpE,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,sBAAsB,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,SAS5E,CAAC;AAEH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAAoD,CAAC;AAEpH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,OAAO,8CAA2D,YAAY,qDAK1F,CAAC"}