@wireapp/react-ui-kit 9.17.9 → 9.18.1

package/lib/Identity/AvatarGrid.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.AvatarGrid = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -35,18 +24,17 @@ const avatarGridStyle = ({ borderWidth, size, backgroundColor = colors_1.COLOR.G
     };
 };
 const filteredAvatarGridProps = (props) => (0, util_1.filterProps)(props, ['backgroundColor', 'borderColor', 'items', 'size', 'borderWidth']);
-const AvatarGrid = (_a) => {
-    var { borderWidth = 1, size = Avatar_1.DEFAULT_AVATAR_SIZE, items, fetchImages } = _a, props = __rest(_a, ["borderWidth", "size", "items", "fetchImages"]);
-    const allProps = Object.assign({ borderWidth, items, size }, props);
+const AvatarGrid = ({ borderWidth = 1, size = Avatar_1.DEFAULT_AVATAR_SIZE, items, fetchImages, ...props }) => {
+    const allProps = { borderWidth, items, size, ...props };
     const slicedItems = items.slice(0, 4);
     const missing = 4 - slicedItems.length;
     for (let index = 0; index < missing; index++) {
         slicedItems.push(null);
     }
-    return ((0, jsx_runtime_1.jsx)(Misc_1.IsInViewport, Object.assign({ checkViewportOnce: true, onEnterViewport: fetchImages, css: avatarGridStyle(allProps) }, filteredAvatarGridProps(allProps), { children: slicedItems.map(item => item ? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { backgroundColor: item.backgroundColor || colors_1.COLOR.GRAY_DARKEN_80, url: item.url, color: item.color, forceInitials: item.forceInitials, isAvatarGridItem: true, name: item.name, size: size / 2 - borderWidth, style: { height: '100%', width: '100%' } }, Math.random().toString())) : ((0, jsx_runtime_1.jsx)("div", { css: {
+    return ((0, jsx_runtime_1.jsx)(Misc_1.IsInViewport, { checkViewportOnce: true, onEnterViewport: fetchImages, css: avatarGridStyle(allProps), ...filteredAvatarGridProps(allProps), children: slicedItems.map(item => item ? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { backgroundColor: item.backgroundColor || colors_1.COLOR.GRAY_DARKEN_80, url: item.url, color: item.color, forceInitials: item.forceInitials, isAvatarGridItem: true, name: item.name, size: size / 2 - borderWidth, style: { height: '100%', width: '100%' } }, Math.random().toString())) : ((0, jsx_runtime_1.jsx)("div", { css: {
                 backgroundColor: colors_1.COLOR.GRAY_DARKEN_80,
                 height: '100%',
                 width: '100%',
-            } }, Math.random().toString()))) })));
+            } }, Math.random().toString()))) }));
 };
 exports.AvatarGrid = AvatarGrid;

package/lib/Identity/Logo.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.Logo = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -25,8 +14,5 @@ const logoStyle = (theme, { hover, color = theme.general.color }) => ({
         transition: motions_1.defaultTransition,
     },
 });
-const Logo = (_a) => {
-    var { hover } = _a, props = __rest(_a, ["hover"]);
-    return ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, Object.assign({ realWidth: 57, realHeight: 18, css: (theme) => logoStyle(theme, Object.assign({ hover }, props)) }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z" }) })));
-};
+const Logo = ({ hover, ...props }) => ((0, jsx_runtime_1.jsx)(SVGIcon_1.SVGIcon, { realWidth: 57, realHeight: 18, css: (theme) => logoStyle(theme, { hover, ...props }), ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M10.857 14.767a5.45 5.45 0 0 1-1.277-3.51l.002-8.688c0-.708.573-1.284 1.277-1.284s1.277.576 1.277 1.284l-.002 8.687a5.45 5.45 0 0 1-1.277 3.51zm9.58-3.51c0 3.01-2.409 5.458-5.402 5.458a5.413 5.413 0 0 1-3.233-1.073 6.72 6.72 0 0 0 1.61-4.386l.002-8.687A2.565 2.565 0 0 0 10.859 0a2.565 2.565 0 0 0-2.555 2.569l-.002 8.687c0 1.675.64 3.206 1.65 4.386a5.413 5.413 0 0 1-3.233 1.073c-2.993 0-5.442-2.449-5.442-5.459V.66H0v10.597C0 14.975 3.035 18 6.733 18a6.681 6.681 0 0 0 4.164-1.458A6.587 6.587 0 0 0 15.028 18c3.698 0 6.686-3.025 6.686-6.744V.66h-1.278v10.597zm5.11 6.403h1.278V.624h-1.277V17.66zM38.008.327a7.337 7.337 0 0 0-6.073 3.233V.624h-1.278V17.66h1.278V7.72c0-3.367 2.725-6.106 6.073-6.106V.327zm2.394 13.705c-2.485-2.965-2.342-7.416.432-10.208a7.478 7.478 0 0 1 10.141-.436L40.401 14.032zM52.784 3.386a8.75 8.75 0 0 0-12.854-.471c-3.424 3.446-3.424 9.054 0 12.5a8.75 8.75 0 0 0 12.417.002l-.903-.91a7.478 7.478 0 0 1-10.14.434l5.285-5.32 6.195-6.235zM53.964.77h.447v1.16h.136V.77h.45V.643h-1.033V.77zM56.34.643l-.445 1.116L55.45.643h-.21v1.286h.131V.779l.457 1.15h.124l.455-1.145v1.145h.132V.643h-.201z" }) }));
 exports.Logo = Logo;

package/lib/Identity/colors-v2.js

@@ -179,8 +179,22 @@ const DARK_AMBER = {
     AMBER_DARK_800: '#66550f',
     AMBER_DARK_900: '#4d400b',
 };
-const DARK = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, DARK_BLUE), DARK_GREEN), DARK_TURQUOISE), DARK_PURPLE), DARK_RED), DARK_AMBER);
-const LIGHT = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, LIGHT_BLUE), LIGHT_GREEN), LIGHT_TURQUOISE), LIGHT_PURPLE), LIGHT_RED), LIGHT_AMBER);
+const DARK = {
+    ...DARK_BLUE,
+    ...DARK_GREEN,
+    ...DARK_TURQUOISE,
+    ...DARK_PURPLE,
+    ...DARK_RED,
+    ...DARK_AMBER,
+};
+const LIGHT = {
+    ...LIGHT_BLUE,
+    ...LIGHT_GREEN,
+    ...LIGHT_TURQUOISE,
+    ...LIGHT_PURPLE,
+    ...LIGHT_RED,
+    ...LIGHT_AMBER,
+};
 const GRAYS = {
     GRAY_10: '#fafafa',
     GRAY_20: '#edeff0',
@@ -194,4 +208,12 @@ const GRAYS = {
     GRAY_95: '#26272c',
     GRAY_100: '#17181a',
 };
-exports.COLOR_V2 = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, exports.BASE_DARK_COLOR), exports.BASE_LIGHT_COLOR), DARK), LIGHT), GRAYS), { BLACK: '#000', WHITE: '#fff' });
+exports.COLOR_V2 = {
+    ...exports.BASE_DARK_COLOR,
+    ...exports.BASE_LIGHT_COLOR,
+    ...DARK,
+    ...LIGHT,
+    ...GRAYS,
+    BLACK: '#000',
+    WHITE: '#fff',
+};

package/lib/Identity/colors.js

@@ -75,6 +75,15 @@ const COMPONENT_COLOR = {
     LINK: DARK_COLOR.GRAY_DARKEN_72,
     TEXT: DARK_COLOR.GRAY_DARKEN_72,
 };
-exports.COLOR = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BASE_COLOR), DARK_COLOR), LIGHT_COLOR), OPAQUE_COLOR), COMPONENT_COLOR), { BLACK: BASE_COLOR.BLACK, WHITE: BASE_COLOR.WHITE, opaque,
+exports.COLOR = {
+    ...BASE_COLOR,
+    ...DARK_COLOR,
+    ...LIGHT_COLOR,
+    ...OPAQUE_COLOR,
+    ...COMPONENT_COLOR,
+    BLACK: BASE_COLOR.BLACK,
+    WHITE: BASE_COLOR.WHITE,
+    opaque,
     shade,
-    tint });
+    tint,
+};

package/lib/Layout/Box.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { CSSObject } from '@emotion/react';
 export type BoxProps<T = HTMLDivElement> = React.HTMLProps<T>;
 export declare const boxStyle: <T>(props: BoxProps<T>) => CSSObject;
-export declare const Box: (props: BoxProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Box: (props: BoxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Box.d.ts.map

package/lib/Layout/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Layout/Box.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,SAIhD,CAAC;AAEH,eAAO,MAAM,GAAG,uFAAgE,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/Layout/Box.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,SAIhD,CAAC;AAEH,eAAO,MAAM,GAAG,UAAW,QAAQ,qDAA6C,CAAC"}

package/lib/Layout/Box.js

@@ -9,5 +9,5 @@ const boxStyle = _ => ({
     padding: '16px 32px',
 });
 exports.boxStyle = boxStyle;
-const Box = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: (0, exports.boxStyle)(props) }, props));
+const Box = (props) => (0, jsx_runtime_1.jsx)("div", { css: (0, exports.boxStyle)(props), ...props });
 exports.Box = Box;

package/lib/Layout/Column.d.ts

@@ -6,5 +6,5 @@ export interface ColumnsProps<T = HTMLDivElement> extends React.HTMLProps<T> {
 export declare const filterColumnsProps: (props: ColumnsProps) => Object;
 export declare const Columns: (props: ColumnsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export type ColumnProps<T = HTMLDivElement> = React.HTMLProps<T>;
-export declare const Column: (props: ColumnProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Column: (props: ColumnProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Column.d.ts.map

package/lib/Layout/Column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../src/Layout/Column.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,SAAS,EAAQ,MAAM,iBAAiB,CAAC;AAGjD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,UAAW,YAAY,WAErD,CAAC;AAQF,eAAO,MAAM,OAAO,UAAW,YAAY,qDAAqE,CAAC;AAEjH,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAUjE,eAAO,MAAM,MAAM,0FAAsE,CAAC"}
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../src/Layout/Column.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAC,SAAS,EAAQ,MAAM,iBAAiB,CAAC;AAGjD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,UAAW,YAAY,WAErD,CAAC;AAQF,eAAO,MAAM,OAAO,UAAW,YAAY,qDAAqE,CAAC;AAEjH,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAUjE,eAAO,MAAM,MAAM,UAAW,WAAW,qDAAgD,CAAC"}

package/lib/Layout/Column.js

@@ -14,7 +14,7 @@ const columnsStyle = ({ query = mediaQueries_1.QueryKeys.MOBILE }) => ({
     marginLeft: `-${sizes_1.GUTTER}px`,
     [mediaQueries_1.media[query]]: { flexDirection: 'column' },
 });
-const Columns = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: columnsStyle(props) }, (0, exports.filterColumnsProps)(props)));
+const Columns = (props) => (0, jsx_runtime_1.jsx)("div", { css: columnsStyle(props), ...(0, exports.filterColumnsProps)(props) });
 exports.Columns = Columns;
 const columnStyle = _ => ({
     display: 'block',
@@ -23,5 +23,5 @@ const columnStyle = _ => ({
     flexShrink: 1,
     marginLeft: `${sizes_1.GUTTER}px`,
 });
-const Column = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: columnStyle(props) }, props));
+const Column = (props) => (0, jsx_runtime_1.jsx)("div", { css: columnStyle(props), ...props });
 exports.Column = Column;

package/lib/Layout/Container.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.ContainerXXS = exports.ContainerXS = exports.ContainerSM = exports.ContainerMD = exports.ContainerLG = exports.Container = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -54,18 +43,15 @@ const containerStyle = ({ centerText = false, level = undefined, verticalCenter
             width: `${sizes_1.WIDTH.DESKTOP_MIN - sizes_1.GUTTER * 2}px`,
         },
 });
-exports.Container = (0, react_1.forwardRef)((_a, ref) => {
-    var { centerText, level, verticalCenter } = _a, props = __rest(_a, ["centerText", "level", "verticalCenter"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: containerStyle({ centerText, level, verticalCenter }) }, props)));
-});
+exports.Container = (0, react_1.forwardRef)(({ centerText, level, verticalCenter, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, css: containerStyle({ centerText, level, verticalCenter }), ...props })));
 exports.Container.displayName = 'Container';
-exports.ContainerLG = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'lg' }, props))));
+exports.ContainerLG = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'lg', ...props })));
 exports.ContainerLG.displayName = 'ContainerLG';
-exports.ContainerMD = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'md' }, props))));
+exports.ContainerMD = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'md', ...props })));
 exports.ContainerMD.displayName = 'ContainerMD';
-exports.ContainerSM = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'sm' }, props))));
+exports.ContainerSM = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'sm', ...props })));
 exports.ContainerSM.displayName = 'ContainerSM';
-exports.ContainerXS = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'xs' }, props))));
+exports.ContainerXS = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'xs', ...props })));
 exports.ContainerXS.displayName = 'ContainerXS';
-exports.ContainerXXS = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'xxs' }, props))));
+exports.ContainerXXS = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, { ref: ref, level: 'xxs', ...props })));
 exports.ContainerXXS.displayName = 'ContainerXXS';

package/lib/Layout/Content.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { CSSObject } from '@emotion/react';
 export type ContentProps<T = HTMLDivElement> = React.HTMLProps<T>;
 export declare const contentStyle: <T>(props: ContentProps<T>) => CSSObject;
-export declare const Content: (props: ContentProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Content: (props: ContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Content.d.ts.map

package/lib/Layout/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/Layout/Content.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAKxD,CAAC;AAEH,eAAO,MAAM,OAAO,2FAAwE,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/Layout/Content.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAKxD,CAAC;AAEH,eAAO,MAAM,OAAO,UAAW,YAAY,qDAAiD,CAAC"}

package/lib/Layout/Content.js

@@ -10,5 +10,5 @@ const contentStyle = _ => ({
     padding: `0 ${sizes_1.GUTTER}px`,
 });
 exports.contentStyle = contentStyle;
-const Content = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: (0, exports.contentStyle)(props) }, props));
+const Content = (props) => (0, jsx_runtime_1.jsx)("div", { css: (0, exports.contentStyle)(props), ...props });
 exports.Content = Content;

package/lib/Layout/FlexBox.js

@@ -55,5 +55,5 @@ const flexBoxStyle = ({ align = 'flex-start', column = false, justify = 'flex-st
 exports.flexBoxStyle = flexBoxStyle;
 const filterFlexBoxProps = (props) => (0, util_1.filterProps)(props, ['align', 'column', 'justify', 'flexWrap']);
 exports.filterFlexBoxProps = filterFlexBoxProps;
-exports.FlexBox = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: (0, exports.flexBoxStyle)(props) }, (0, exports.filterFlexBoxProps)(props)))));
+exports.FlexBox = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, css: (0, exports.flexBoxStyle)(props), ...(0, exports.filterFlexBoxProps)(props) })));
 exports.FlexBox.displayName = 'FlexBox';

package/lib/Layout/Footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/Layout/Footer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;AAEhD,eAAO,MAAM,MAAM,0EAAgD,CAAC"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/Layout/Footer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;AAEhD,eAAO,MAAM,MAAM,UAAW,WAAW,qDAA0B,CAAC"}

package/lib/Layout/Footer.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const Footer = (props) => (0, jsx_runtime_1.jsx)("footer", Object.assign({}, props));
+const Footer = (props) => (0, jsx_runtime_1.jsx)("footer", { ...props });
 exports.Footer = Footer;

package/lib/Layout/Header.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { CSSObject } from '@emotion/react';
 export type HeaderProps<T = HTMLHeadingElement> = React.HTMLProps<T>;
 export declare const headerStyle: <T>(props: HeaderProps<T>) => CSSObject;
-export declare const Header: (props: HeaderProps<HTMLHeadingElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Header: (props: HeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Header.d.ts.map

package/lib/Layout/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Layout/Header.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,kBAAkB,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAKtD,CAAC;AAEH,eAAO,MAAM,MAAM,8FAAyE,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Layout/Header.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,kBAAkB,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAErE,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAKtD,CAAC;AAEH,eAAO,MAAM,MAAM,UAAW,WAAW,qDAAmD,CAAC"}

package/lib/Layout/Header.js

@@ -9,5 +9,5 @@ const headerStyle = _ => ({
     justifyContent: 'space-between',
 });
 exports.headerStyle = headerStyle;
-const Header = (props) => (0, jsx_runtime_1.jsx)("header", Object.assign({ css: (0, exports.headerStyle)(props) }, props));
+const Header = (props) => (0, jsx_runtime_1.jsx)("header", { css: (0, exports.headerStyle)(props), ...props });
 exports.Header = Header;

package/lib/Layout/MatchMedia.js

@@ -41,19 +41,19 @@ const MatchMedia = ({ query, children, not }) => {
     return isMatching ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : null;
 };
 exports.MatchMedia = MatchMedia;
-const IsDesktop = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.DESKTOP }, props));
+const IsDesktop = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.DESKTOP, ...props });
 exports.IsDesktop = IsDesktop;
-const IsDesktopXL = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.DESKTOP_XL }, props));
+const IsDesktopXL = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.DESKTOP_XL, ...props });
 exports.IsDesktopXL = IsDesktopXL;
-const IsMobile = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE }, props));
+const IsMobile = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.MOBILE, ...props });
 exports.IsMobile = IsMobile;
-const IsMobileDown = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE_DOWN }, props));
+const IsMobileDown = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.MOBILE_DOWN, ...props });
 exports.IsMobileDown = IsMobileDown;
-const IsMobileUp = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.MOBILE_UP }, props));
+const IsMobileUp = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.MOBILE_UP, ...props });
 exports.IsMobileUp = IsMobileUp;
-const IsTablet = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET }, props));
+const IsTablet = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.TABLET, ...props });
 exports.IsTablet = IsTablet;
-const IsTabletDown = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET_DOWN }, props));
+const IsTabletDown = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.TABLET_DOWN, ...props });
 exports.IsTabletDown = IsTabletDown;
-const IsTabletUp = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, Object.assign({ query: mediaQueries_1.QueryKeys.TABLET_UP }, props));
+const IsTabletUp = (props) => (0, jsx_runtime_1.jsx)(exports.MatchMedia, { query: mediaQueries_1.QueryKeys.TABLET_UP, ...props });
 exports.IsTabletUp = IsTabletUp;

package/lib/Layout/Spacer.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacer = void 0;
+exports.Spacer = Spacer;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 function Spacer({ size = 8, vertical = false }) {
     return (0, jsx_runtime_1.jsx)("div", { style: vertical ? { display: 'inline-block', width: size } : { height: size } });
 }
-exports.Spacer = Spacer;

package/lib/Layout/StyledApp.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.StyledApp = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -21,9 +10,6 @@ const styledAppContainerStyle = (theme, { backgroundColor = theme.general.backgr
     transition: 'background 0.15s',
 });
 const filterStyledAppProps = (props) => (0, util_1.filterProps)(props, ['backgroundColor', 'themeId', 'theme']);
-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, { 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] })) }));
-};
+const StyledAppContainer = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => styledAppContainerStyle(theme, props), ...filterStyledAppProps(props) }));
+const StyledApp = ({ themeId = Theme_1.THEME_ID.LIGHT, theme, children, ...props }) => ((0, jsx_runtime_1.jsx)(Theme_1.ThemeProvider, { theme: theme ? theme : Theme_1.themes[themeId], children: (0, jsx_runtime_1.jsxs)(StyledAppContainer, { ...props, children: [(0, jsx_runtime_1.jsx)(GlobalStyle_1.GlobalStyle, {}), children] }) }));
 exports.StyledApp = StyledApp;

package/lib/Layout/headerMenu/HeaderMenu.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.HeaderMenu = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -36,8 +25,7 @@ const MenuContent_1 = require("./MenuContent");
 const MenuItems_1 = require("./MenuItems");
 const MenuOpenButton_1 = require("./MenuOpenButton");
 const MenuScrollableItems_1 = require("./MenuScrollableItems");
-const HeaderMenu = (_a) => {
-    var { children, logoElement = null, centerElement = null } = _a, props = __rest(_a, ["children", "logoElement", "centerElement"]);
+const HeaderMenu = ({ children, logoElement = null, centerElement = null, ...props }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const toggleMenu = () => {
         if (typeof window !== 'undefined') {
@@ -46,6 +34,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, { 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 }) })] }) })));
+    return ((0, jsx_runtime_1.jsx)("div", { 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.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;
 export declare const DESKTOP_HEADER_SUB_MENU_CLASSNAME = "desktopStyledHeaderSubMenu";
-export declare const DesktopStyledHeaderSubMenu: (props: DesktopStyledHeaderSubMenuProps<HTMLDivElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DesktopStyledHeaderSubMenu: (props: DesktopStyledHeaderSubMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {
     open?: boolean;
 }

package/lib/Layout/headerMenu/HeaderSubMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderSubMenu.d.ts","sourceRoot":"","sources":["../../../src/Layout/headerMenu/HeaderSubMenu.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,MAAM,+BAA+B,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AA8BrF,eAAO,MAAM,iCAAiC,+BAA+B,CAAC;AAE9E,eAAO,MAAM,0BAA0B,8GAMtC,CAAC;AAEF,MAAM,WAAW,8BAA8B,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAeD,eAAO,MAAM,yBAAyB,UAAW,8BAA8B,qDAE9E,CAAC;AAEF,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,oBAAoB,CAAE,SAAQ,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC1G,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}
+{"version":3,"file":"HeaderSubMenu.d.ts","sourceRoot":"","sources":["../../../src/Layout/headerMenu/HeaderSubMenu.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,MAAM,+BAA+B,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AA8BrF,eAAO,MAAM,iCAAiC,+BAA+B,CAAC;AAE9E,eAAO,MAAM,0BAA0B,UAAW,+BAA+B,qDAMhF,CAAC;AAEF,MAAM,WAAW,8BAA8B,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAeD,eAAO,MAAM,yBAAyB,UAAW,8BAA8B,qDAE9E,CAAC;AAEF,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,oBAAoB,CAAE,SAAQ,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC1G,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}

package/lib/Layout/headerMenu/HeaderSubMenu.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.HeaderSubMenu = exports.MobileStyledHeaderSubMenu = exports.DesktopStyledHeaderSubMenu = exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -46,7 +35,7 @@ const desktopStyledHeaderSubMenuStyle = theme => ({
     },
 });
 exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';
-const DesktopStyledHeaderSubMenu = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME, css: (theme) => desktopStyledHeaderSubMenuStyle(theme, props) }, props)));
+const DesktopStyledHeaderSubMenu = (props) => ((0, jsx_runtime_1.jsx)("div", { className: exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME, css: (theme) => desktopStyledHeaderSubMenuStyle(theme, props), ...props }));
 exports.DesktopStyledHeaderSubMenu = DesktopStyledHeaderSubMenu;
 const mobileStyledHeaderSubMenuStyle = _ => ({
     '*': {
@@ -60,11 +49,10 @@ const mobileStyledHeaderSubMenuStyle = _ => ({
     marginTop: '16px',
     paddingTop: '8px',
 });
-const MobileStyledHeaderSubMenu = (props) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: mobileStyledHeaderSubMenuStyle(props) }, props)));
+const MobileStyledHeaderSubMenu = (props) => ((0, jsx_runtime_1.jsx)("span", { css: mobileStyledHeaderSubMenuStyle(props), ...props }));
 exports.MobileStyledHeaderSubMenu = MobileStyledHeaderSubMenu;
-const HeaderSubMenu = (_a) => {
-    var { caption, isOpen, children } = _a, props = __rest(_a, ["caption", "isOpen", "children"]);
+const HeaderSubMenu = ({ caption, isOpen, children, ...props }) => {
     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, { 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 }) }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(MenuSubLink_1.MenuSubLink, { ...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/Layout/headerMenu/MenuContent.js

@@ -4,8 +4,20 @@ exports.MenuContent = exports.menuContentStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const util_1 = require("../../util");
 const Content_1 = require("../Content");
-const menuContentStyle = props => (Object.assign(Object.assign({}, (0, Content_1.contentStyle)(props)), { alignItems: 'center', display: 'grid', gridColumnGap: '8px', gridTemplateColumns: '1fr auto 1fr', height: '64px', justifyContent: 'space-between', left: props.open ? 0 : undefined, position: props.open ? 'fixed' : undefined, width: props.open ? '100%' : undefined, zIndex: props.open ? 10000 : undefined }));
+const menuContentStyle = props => ({
+    ...(0, Content_1.contentStyle)(props),
+    alignItems: 'center',
+    display: 'grid',
+    gridColumnGap: '8px',
+    gridTemplateColumns: '1fr auto 1fr',
+    height: '64px',
+    justifyContent: 'space-between',
+    left: props.open ? 0 : undefined,
+    position: props.open ? 'fixed' : undefined,
+    width: props.open ? '100%' : undefined,
+    zIndex: props.open ? 10000 : undefined,
+});
 exports.menuContentStyle = menuContentStyle;
 const filterMenuContentProps = (props) => (0, util_1.filterProps)(props, ['open']);
-const MenuContent = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (0, exports.menuContentStyle)(props) }, filterMenuContentProps(props))));
+const MenuContent = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (0, exports.menuContentStyle)(props), ...filterMenuContentProps(props) }));
 exports.MenuContent = MenuContent;

package/lib/Layout/headerMenu/MenuItems.js

@@ -23,5 +23,5 @@ const menuItemsStyle = (theme, props) => ({
 });
 exports.menuItemsStyle = menuItemsStyle;
 const filterMenuItemProps = (props) => (0, util_1.filterProps)(props, ['open']);
-const MenuItems = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => (0, exports.menuItemsStyle)(theme, props) }, filterMenuItemProps(props))));
+const MenuItems = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => (0, exports.menuItemsStyle)(theme, props), ...filterMenuItemProps(props) }));
 exports.MenuItems = MenuItems;

package/lib/Layout/headerMenu/MenuLink.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.MenuLink = exports.filterMenuLinkProps = exports.MENU_LINK_CLASSNAME = exports.menuLinkStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -17,36 +6,40 @@ const HeaderSubMenu_1 = require("./HeaderSubMenu");
 const mediaQueries_1 = require("../../mediaQueries");
 const Text_1 = require("../../Text");
 const util_1 = require("../../util");
-const menuLinkStyle = (theme, _a) => {
-    var { bold = true, color = theme.general.color, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', button = false } = _a, props = __rest(_a, ["bold", "color", "fontSize", "textTransform", "button"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.linkStyle)(theme, Object.assign({ bold, color, fontSize, textTransform }, props))), { [mediaQueries_1.media[mediaQueries_1.QueryKeys.DESKTOP]]: {
+const menuLinkStyle = (theme, { bold = true, color = theme.general.color, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', button = false, ...props }) => ({
+    ...(0, Text_1.linkStyle)(theme, { bold, color, fontSize, textTransform, ...props }),
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.DESKTOP]]: {
+        '&:first-of-type': {
+            marginLeft: 0,
+        },
+        '&:last-of-type': {
+            marginRight: 0,
+        },
+        margin: '0 26px 0 10px',
+        [`.${HeaderSubMenu_1.DESKTOP_HEADER_SUB_MENU_CLASSNAME} &`]: {
             '&:first-of-type': {
-                marginLeft: 0,
+                marginLeft: '10px',
             },
             '&:last-of-type': {
-                marginRight: 0,
+                marginRight: '26px',
             },
-            margin: '0 26px 0 10px',
-            [`.${HeaderSubMenu_1.DESKTOP_HEADER_SUB_MENU_CLASSNAME} &`]: {
-                '&:first-of-type': {
-                    marginLeft: '10px',
-                },
-                '&:last-of-type': {
-                    marginRight: '26px',
-                },
-            },
-        }, [mediaQueries_1.media[mediaQueries_1.QueryKeys.TABLET_DOWN]]: {
-            border: 'none',
-            fontSize: '2rem !important',
-            fontWeight: 400,
-            maxWidth: '480px',
-            padding: '8px 24px',
-            textTransform: 'none !important',
-        }, border: button ? '1px solid rgb(219, 226, 231)' : undefined, borderRadius: button ? '4px' : undefined, padding: button ? '10px 16px' : undefined }));
-};
+        },
+    },
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.TABLET_DOWN]]: {
+        border: 'none',
+        fontSize: '2rem !important',
+        fontWeight: 400,
+        maxWidth: '480px',
+        padding: '8px 24px',
+        textTransform: 'none !important',
+    },
+    border: button ? '1px solid rgb(219, 226, 231)' : undefined,
+    borderRadius: button ? '4px' : undefined,
+    padding: button ? '10px 16px' : undefined,
+});
 exports.menuLinkStyle = menuLinkStyle;
 exports.MENU_LINK_CLASSNAME = 'menu-link';
 const filterMenuLinkProps = (props) => (0, util_1.filterProps)((0, Text_1.filterLinkProps)(props), ['button']);
 exports.filterMenuLinkProps = filterMenuLinkProps;
-const MenuLink = (props) => ((0, jsx_runtime_1.jsx)("a", Object.assign({ className: exports.MENU_LINK_CLASSNAME, css: (theme) => (0, exports.menuLinkStyle)(theme, props) }, (0, exports.filterMenuLinkProps)(props))));
+const MenuLink = (props) => ((0, jsx_runtime_1.jsx)("a", { className: exports.MENU_LINK_CLASSNAME, css: (theme) => (0, exports.menuLinkStyle)(theme, props), ...(0, exports.filterMenuLinkProps)(props) }));
 exports.MenuLink = MenuLink;

package/lib/Layout/headerMenu/MenuOpenButton.js

@@ -30,5 +30,5 @@ const menuOpenButtonStyle = (theme, { open }) => ({
 });
 exports.menuOpenButtonStyle = menuOpenButtonStyle;
 const filterMenuOpenButtonProps = (props) => (0, util_1.filterProps)(props, ['open']);
-const MenuOpenButton = (props) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => (0, exports.menuOpenButtonStyle)(theme, props) }, filterMenuOpenButtonProps(props), { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] })));
+const MenuOpenButton = (props) => ((0, jsx_runtime_1.jsxs)("div", { css: (theme) => (0, exports.menuOpenButtonStyle)(theme, props), ...filterMenuOpenButtonProps(props), children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
 exports.MenuOpenButton = MenuOpenButton;

package/lib/Layout/headerMenu/MenuScrollableItems.js

@@ -14,5 +14,5 @@ const menuScrollableItemsStyle = _ => ({
     },
 });
 exports.menuScrollableItemsStyle = menuScrollableItemsStyle;
-const MenuScrollableItems = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (0, exports.menuScrollableItemsStyle)(props) }, props)));
+const MenuScrollableItems = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (0, exports.menuScrollableItemsStyle)(props), ...props }));
 exports.MenuScrollableItems = MenuScrollableItems;