@wireapp/react-ui-kit 9.17.9 → 9.18.1

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"}

package/lib/Modal/Overlay.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.Overlay = exports.OverlayBackground = exports.overlayBackgroundStyle = exports.OverlayContent = exports.OverlayWrapper = exports.overlayWrapperStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -29,9 +18,9 @@ const overlayWrapperStyle = () => ({
     zIndex: 9997,
 });
 exports.overlayWrapperStyle = overlayWrapperStyle;
-const OverlayWrapper = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: exports.overlayWrapperStyle }, props));
+const OverlayWrapper = (props) => (0, jsx_runtime_1.jsx)("div", { css: exports.overlayWrapperStyle, ...props });
 exports.OverlayWrapper = OverlayWrapper;
-const OverlayContent = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+const OverlayContent = (props) => ((0, jsx_runtime_1.jsx)("div", { css: {
         '*': {
             color: Identity_1.COLOR.WHITE,
         },
@@ -48,7 +37,7 @@ const OverlayContent = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({
         [mediaQueries_1.media[mediaQueries_1.QueryKeys.TABLET_DOWN]]: {
             width: '100%',
         },
-    } }, props)));
+    }, ...props }));
 exports.OverlayContent = OverlayContent;
 const overlayBackgroundStyle = () => ({
     animation: `${motions_1.ANIMATION.fadeIn} ${motions_1.DURATION.PROACTIVE_SLOW}ms ${motions_1.EASE.QUART}`,
@@ -61,10 +50,7 @@ const overlayBackgroundStyle = () => ({
     zIndex: 9998,
 });
 exports.overlayBackgroundStyle = overlayBackgroundStyle;
-const OverlayBackground = (props) => (0, jsx_runtime_1.jsx)("div", Object.assign({ css: exports.overlayBackgroundStyle }, props));
+const OverlayBackground = (props) => (0, jsx_runtime_1.jsx)("div", { css: exports.overlayBackgroundStyle, ...props });
 exports.OverlayBackground = OverlayBackground;
-const Overlay = (_a) => {
-    var { onBackgroundClick = util_1.noop, children = null } = _a, props = __rest(_a, ["onBackgroundClick", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(exports.OverlayWrapper, Object.assign({}, props, { "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsx)(exports.OverlayContent, { children: children }), (0, jsx_runtime_1.jsx)(exports.OverlayBackground, { onClick: onBackgroundClick, "data-uie-name": "overlay-background" })] })));
-};
+const Overlay = ({ onBackgroundClick = util_1.noop, children = null, ...props }) => ((0, jsx_runtime_1.jsxs)(exports.OverlayWrapper, { ...props, "data-uie-name": "modal", children: [(0, jsx_runtime_1.jsx)(exports.OverlayContent, { children: children }), (0, jsx_runtime_1.jsx)(exports.OverlayBackground, { onClick: onBackgroundClick, "data-uie-name": "overlay-background" })] }));
 exports.Overlay = Overlay;

package/lib/Text/Heading.js

@@ -1,68 +1,72 @@
 "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.H4 = exports.h4Style = exports.H3 = exports.h3Style = exports.H2 = exports.h2Style = exports.H1 = exports.h1Style = exports.Heading = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Text_1 = require("./Text");
 const mediaQueries_1 = require("../mediaQueries");
-const Heading = (_a) => {
-    var { level } = _a, props = __rest(_a, ["level"]);
+const Heading = ({ level, ...props }) => {
     switch (level) {
         case '2':
-            return (0, jsx_runtime_1.jsx)(exports.H2, Object.assign({}, props));
+            return (0, jsx_runtime_1.jsx)(exports.H2, { ...props });
         case '3':
-            return (0, jsx_runtime_1.jsx)(exports.H3, Object.assign({}, props));
+            return (0, jsx_runtime_1.jsx)(exports.H3, { ...props });
         case '4':
-            return (0, jsx_runtime_1.jsx)(exports.H4, Object.assign({}, props));
+            return (0, jsx_runtime_1.jsx)(exports.H4, { ...props });
         case '1':
         default:
-            return (0, jsx_runtime_1.jsx)(exports.H1, Object.assign({}, props));
+            return (0, jsx_runtime_1.jsx)(exports.H1, { ...props });
     }
 };
 exports.Heading = Heading;
-const h1Style = (theme, _a) => {
-    var { block = true, color = theme.general.color, level = '1', noWrap = false, textTransform = 'none' } = _a, props = __rest(_a, ["block", "color", "level", "noWrap", "textTransform"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block, color, noWrap, textTransform }, props))), { fontSize: '3rem', fontWeight: 400, lineHeight: '3.5rem', marginBottom: '64px', marginTop: 0, minHeight: '3rem', [mediaQueries_1.media[mediaQueries_1.QueryKeys.MOBILE]]: {
-            fontSize: '2.5rem',
-            lineHeight: '3rem',
-        } }));
-};
+const h1Style = (theme, { block = true, color = theme.general.color, level = '1', noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: '3rem',
+    fontWeight: 400,
+    lineHeight: '3.5rem',
+    marginBottom: '64px',
+    marginTop: 0,
+    minHeight: '3rem',
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.MOBILE]]: {
+        fontSize: '2.5rem',
+        lineHeight: '3rem',
+    },
+});
 exports.h1Style = h1Style;
-const H1 = (props) => ((0, jsx_runtime_1.jsx)("h1", Object.assign({ css: (theme) => (0, exports.h1Style)(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const H1 = (props) => ((0, jsx_runtime_1.jsx)("h1", { css: (theme) => (0, exports.h1Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.H1 = H1;
-const h2Style = (theme, _a) => {
-    var { block = true, color = theme.general.color, noWrap = false, textTransform = 'none' } = _a, props = __rest(_a, ["block", "color", "noWrap", "textTransform"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block, color, noWrap, textTransform }, props))), { fontSize: '1.25rem', fontWeight: 700, lineHeight: '1.75rem', marginBottom: '24px', marginTop: '32px', [mediaQueries_1.media[mediaQueries_1.QueryKeys.MOBILE]]: {
-            fontSize: '1.125rem',
-            lineHeight: '1.625rem',
-            marginBottom: '20px',
-            marginTop: '26px',
-        } }));
-};
+const h2Style = (theme, { block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: '1.25rem',
+    fontWeight: 700,
+    lineHeight: '1.75rem',
+    marginBottom: '24px',
+    marginTop: '32px',
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.MOBILE]]: {
+        fontSize: '1.125rem',
+        lineHeight: '1.625rem',
+        marginBottom: '20px',
+        marginTop: '26px',
+    },
+});
 exports.h2Style = h2Style;
-const H2 = (props) => ((0, jsx_runtime_1.jsx)("h2", Object.assign({ css: (theme) => (0, exports.h2Style)(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const H2 = (props) => ((0, jsx_runtime_1.jsx)("h2", { css: (theme) => (0, exports.h2Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.H2 = H2;
-const h3Style = (theme, _a) => {
-    var { block = true, color = theme.general.color, noWrap = false, textTransform = 'none' } = _a, props = __rest(_a, ["block", "color", "noWrap", "textTransform"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block, color, noWrap, textTransform }, props))), { fontSize: theme.fontSizes.base, fontWeight: 600, marginBottom: '16px' }));
-};
+const h3Style = (theme, { block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: theme.fontSizes.base,
+    fontWeight: 600,
+    marginBottom: '16px',
+});
 exports.h3Style = h3Style;
-const H3 = (props) => ((0, jsx_runtime_1.jsx)("h3", Object.assign({ css: (theme) => (0, exports.h3Style)(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const H3 = (props) => ((0, jsx_runtime_1.jsx)("h3", { css: (theme) => (0, exports.h3Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.H3 = H3;
-const h4Style = (theme, _a) => {
-    var { block = true, color = theme.general.color, noWrap = false, textTransform = 'none' } = _a, props = __rest(_a, ["block", "color", "noWrap", "textTransform"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block, color, noWrap, textTransform }, props))), { fontSize: theme.fontSizes.extraSmall, fontWeight: 400, marginBottom: '5px', marginTop: '20px' }));
-};
+const h4Style = (theme, { block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, color, noWrap, textTransform, ...props }),
+    fontSize: theme.fontSizes.extraSmall,
+    fontWeight: 400,
+    marginBottom: '5px',
+    marginTop: '20px',
+});
 exports.h4Style = h4Style;
-const H4 = (props) => ((0, jsx_runtime_1.jsx)("h3", Object.assign({ css: (theme) => (0, exports.h4Style)(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const H4 = (props) => ((0, jsx_runtime_1.jsx)("h3", { css: (theme) => (0, exports.h4Style)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.H4 = H4;

package/lib/Text/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Text/Label.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,SAAS,EAAY,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,SAAS,EAA6B,MAAM,QAAQ,CAAC;AAK7D,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAcD,eAAO,MAAM,KAAK,UAAW,UAAU,qDAEtC,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,iBAAiB,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AASjE,eAAO,MAAM,SAAS,UAAW,WAAW,iBAAiB,CAAC,qDAE7D,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Text/Label.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,SAAS,EAAY,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,SAAS,EAA6B,MAAM,QAAQ,CAAC;AAK7D,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,eAAe,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAcD,eAAO,MAAM,KAAK,UAAW,UAAU,qDAEtC,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,iBAAiB,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AASjE,eAAO,MAAM,SAAS,UAAW,UAAU,CAAC,iBAAiB,CAAC,qDAE7D,CAAC"}

package/lib/Text/Label.js

@@ -1,32 +1,22 @@
 "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.LabelLink = exports.Label = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Link_1 = require("./Link");
 const Text_1 = require("./Text");
 const Identity_1 = require("../Identity");
-const labelStyle = (theme, _a) => {
-    var { markInvalid, bold = false, color = theme.general.color, fontSize = theme.fontSizes.small } = _a, props = __rest(_a, ["markInvalid", "bold", "color", "fontSize"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ bold, color, fontSize }, props))), { '&:focus-within': {
-            color: Identity_1.COLOR.BLUE,
-        }, color: markInvalid ? Identity_1.COLOR.RED : 'initial', width: '100%' }));
-};
-const Label = (props) => ((0, jsx_runtime_1.jsx)("label", Object.assign({ css: (theme) => labelStyle(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const labelStyle = (theme, { markInvalid, bold = false, color = theme.general.color, fontSize = theme.fontSizes.small, ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { bold, color, fontSize, ...props }),
+    '&:focus-within': {
+        color: Identity_1.COLOR.BLUE,
+    },
+    color: markInvalid ? Identity_1.COLOR.RED : 'initial',
+    width: '100%',
+});
+const Label = (props) => ((0, jsx_runtime_1.jsx)("label", { css: (theme) => labelStyle(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.Label = Label;
-const labelLinkStyle = (theme, _a) => {
-    var { fontSize = theme.fontSizes.small } = _a, props = __rest(_a, ["fontSize"]);
-    return (Object.assign({}, (0, Link_1.linkStyle)(theme, Object.assign({ fontSize }, props))));
-};
-const LabelLink = (props) => ((0, jsx_runtime_1.jsx)("a", Object.assign({ css: (theme) => labelLinkStyle(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const labelLinkStyle = (theme, { fontSize = theme.fontSizes.small, ...props }) => ({
+    ...(0, Link_1.linkStyle)(theme, { fontSize, ...props }),
+});
+const LabelLink = (props) => ((0, jsx_runtime_1.jsx)("a", { css: (theme) => labelLinkStyle(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.LabelLink = LabelLink;

package/lib/Text/Line.js

@@ -11,5 +11,5 @@ const lineStyle = ({ color = Identity_1.COLOR.GRAY_LIGHTEN_72 }) => ({
     marginTop: `${sizes_1.GUTTER}px`,
 });
 exports.lineStyle = lineStyle;
-const Line = (props) => (0, jsx_runtime_1.jsx)("hr", Object.assign({ css: (0, exports.lineStyle)(props) }, props));
+const Line = (props) => (0, jsx_runtime_1.jsx)("hr", { css: (0, exports.lineStyle)(props), ...props });
 exports.Line = Line;

package/lib/Text/Link.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.Link = exports.filterLinkProps = exports.linkStyle = exports.LinkVariant = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -21,31 +10,37 @@ var LinkVariant;
     LinkVariant["PRIMARY"] = "primary";
     LinkVariant["SECONDARY"] = "secondary";
 })(LinkVariant || (exports.LinkVariant = LinkVariant = {}));
-const linkStyle = (theme, _a) => {
-    var { bold = true, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', variant = LinkVariant.SECONDARY, color = theme.general.color } = _a, props = __rest(_a, ["bold", "fontSize", "textTransform", "variant", "color"]);
-    return Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ bold, color, fontSize, textTransform }, props))), { color: color, cursor: 'pointer', textDecoration: 'none', '&:visited, &:link, &:active': {
+const linkStyle = (theme, { bold = true, fontSize = theme.fontSizes.extraSmall, textTransform = 'uppercase', variant = LinkVariant.SECONDARY, color = theme.general.color, ...props }) => {
+    return {
+        ...(0, Text_1.textStyle)(theme, { bold, color, fontSize, textTransform, ...props }),
+        color: color,
+        cursor: 'pointer',
+        textDecoration: 'none',
+        '&:visited, &:link, &:active': {
             color: color,
-        } }), (variant === LinkVariant.PRIMARY && {
-        '&:hover, &:visited:hover, &:focus-visible': {
-            color: theme.general.primaryColor,
-        },
-        fontSize: theme.fontSizes.base,
-        fontWeight: 400,
-        textTransform: 'none',
-        textDecoration: 'underline',
-        textUnderlineOffset: '2px',
-    })), (variant === LinkVariant.SECONDARY && {
-        transition: motions_1.defaultTransition,
-        '&:hover': {
-            filter: 'brightness(70%)',
         },
-    }));
+        ...(variant === LinkVariant.PRIMARY && {
+            '&:hover, &:visited:hover, &:focus-visible': {
+                color: theme.general.primaryColor,
+            },
+            fontSize: theme.fontSizes.base,
+            fontWeight: 400,
+            textTransform: 'none',
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        }),
+        ...(variant === LinkVariant.SECONDARY && {
+            transition: motions_1.defaultTransition,
+            '&:hover': {
+                filter: 'brightness(70%)',
+            },
+        }),
+    };
 };
 exports.linkStyle = linkStyle;
 const filterLinkProps = (props) => (0, util_1.filterProps)((0, Text_1.filterTextProps)(props), []);
 exports.filterLinkProps = filterLinkProps;
-const Link = (_a) => {
-    var { targetBlank } = _a, props = __rest(_a, ["targetBlank"]);
-    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ css: (theme) => (0, exports.linkStyle)(theme, props), target: targetBlank && '_blank', rel: "noopener noreferrer" }, (0, exports.filterLinkProps)(props), { children: props.children })));
+const Link = ({ targetBlank, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("a", { css: (theme) => (0, exports.linkStyle)(theme, props), target: targetBlank && '_blank', rel: "noopener noreferrer", ...(0, exports.filterLinkProps)(props), children: props.children }));
 };
 exports.Link = Link;

package/lib/Text/Paragraph.js

@@ -1,33 +1,25 @@
 "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.Lead = exports.leadStyle = exports.Paragraph = exports.paragraphStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Text_1 = require("./Text");
 const mediaQueries_1 = require("../mediaQueries");
-const paragraphStyle = (theme, _a) => {
-    var { block = true } = _a, props = __rest(_a, ["block"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block }, props))), { marginBottom: '16px', marginTop: 0 }));
-};
+const paragraphStyle = (theme, { block = true, ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, ...props }),
+    marginBottom: '16px',
+    marginTop: 0,
+});
 exports.paragraphStyle = paragraphStyle;
-const Paragraph = (props) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => (0, exports.paragraphStyle)(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const Paragraph = (props) => ((0, jsx_runtime_1.jsx)("p", { css: (theme) => (0, exports.paragraphStyle)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.Paragraph = Paragraph;
-const leadStyle = (theme, _a) => {
-    var { block = true, center = true, fontSize = theme.fontSizes.extraLarge } = _a, props = __rest(_a, ["block", "center", "fontSize"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block, center, fontSize }, props))), { marginBottom: '56px', marginTop: 0, [mediaQueries_1.media[mediaQueries_1.QueryKeys.MOBILE]]: {
-            fontSize: '1.125rem',
-        } }));
-};
+const leadStyle = (theme, { block = true, center = true, fontSize = theme.fontSizes.extraLarge, ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, center, fontSize, ...props }),
+    marginBottom: '56px',
+    marginTop: 0,
+    [mediaQueries_1.media[mediaQueries_1.QueryKeys.MOBILE]]: {
+        fontSize: '1.125rem',
+    },
+});
 exports.leadStyle = leadStyle;
-const Lead = (props) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: (theme) => (0, exports.leadStyle)(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const Lead = (props) => ((0, jsx_runtime_1.jsx)("p", { css: (theme) => (0, exports.leadStyle)(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.Lead = Lead;

package/lib/Text/Text.js

@@ -73,15 +73,15 @@ const textStyle = (theme, { block = false, bold = false, center = false, color =
     whiteSpace: noWrap ? 'nowrap' : undefined,
 });
 exports.textStyle = textStyle;
-exports.Text = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ ref: ref, css: (theme) => (0, exports.textStyle)(theme, props) }, (0, exports.filterTextProps)(props)))));
+exports.Text = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("span", { ref: ref, css: (theme) => (0, exports.textStyle)(theme, props), ...(0, exports.filterTextProps)(props) })));
 exports.Text.displayName = 'Text';
-exports.Bold = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, Object.assign({ ref: ref, bold: true }, props))));
+exports.Bold = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, bold: true, ...props })));
 exports.Bold.displayName = 'Bold';
-exports.Small = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, Object.assign({ ref: ref, fontSize: '12px' }, props))));
+exports.Small = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, fontSize: '12px', ...props })));
 exports.Small.displayName = 'Small';
-exports.Muted = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, Object.assign({ ref: ref, muted: true }, props))));
+exports.Muted = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, muted: true, ...props })));
 exports.Muted.displayName = 'Muted';
-exports.Uppercase = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, Object.assign({ ref: ref, textTransform: 'uppercase' }, props))));
+exports.Uppercase = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, textTransform: 'uppercase', ...props })));
 exports.Uppercase.displayName = 'Uppercase';
-exports.Large = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, Object.assign({ ref: ref, fontSize: '48px', light: true }, props))));
+exports.Large = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, fontSize: '48px', light: true, ...props })));
 exports.Large.displayName = 'Large';

package/lib/Text/TextLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../src/Text/TextLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,SAAS,EAA6B,MAAM,QAAQ,CAAC;AAG7D,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAEhC,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,iBAAiB,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEhE,eAAO,MAAM,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,SAKxE,CAAC;AAEH,eAAO,MAAM,QAAQ,UAAW,cAAc,iBAAiB,CAAC,qDAE/D,CAAC"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../src/Text/TextLink.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAC,SAAS,EAA6B,MAAM,QAAQ,CAAC;AAG7D,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAEhC,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,iBAAiB,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEhE,eAAO,MAAM,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,SAKxE,CAAC;AAEH,eAAO,MAAM,QAAQ,UAAW,aAAa,CAAC,iBAAiB,CAAC,qDAE/D,CAAC"}

package/lib/Text/TextLink.js

@@ -1,24 +1,12 @@
 "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.TextLink = exports.textLinkStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Link_1 = require("./Link");
 const colors_v2_1 = require("../Identity/colors-v2");
-const textLinkStyle = (theme, _a) => {
-    var { color = colors_v2_1.COLOR_V2.BLUE, fontSize = theme.fontSizes.base, bold = false, textTransform = 'none' } = _a, props = __rest(_a, ["color", "fontSize", "bold", "textTransform"]);
-    return (Object.assign({}, (0, Link_1.linkStyle)(theme, Object.assign({ bold, color, fontSize, textTransform }, props))));
-};
+const textLinkStyle = (theme, { color = colors_v2_1.COLOR_V2.BLUE, fontSize = theme.fontSizes.base, bold = false, textTransform = 'none', ...props }) => ({
+    ...(0, Link_1.linkStyle)(theme, { bold, color, fontSize, textTransform, ...props }),
+});
 exports.textLinkStyle = textLinkStyle;
-const TextLink = (props) => ((0, jsx_runtime_1.jsx)("a", Object.assign({ css: (theme) => (0, exports.textLinkStyle)(theme, props), rel: "noopener noreferrer" }, (0, Link_1.filterLinkProps)(props))));
+const TextLink = (props) => ((0, jsx_runtime_1.jsx)("a", { css: (theme) => (0, exports.textLinkStyle)(theme, props), rel: "noopener noreferrer", ...(0, Link_1.filterLinkProps)(props) }));
 exports.TextLink = TextLink;

package/lib/Text/Title.js

@@ -1,23 +1,12 @@
 "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.Title = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Text_1 = require("./Text");
 const Identity_1 = require("../Identity");
-const titleStyle = (theme, _a) => {
-    var { block = true, center = true, fontSize = ' 2rem', color = Identity_1.COLOR.GRAY, bold = true } = _a, props = __rest(_a, ["block", "center", "fontSize", "color", "bold"]);
-    return (Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block, bold, center, color, fontSize }, props))), { marginBottom: '8px' }));
-};
-const Title = (props) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => titleStyle(theme, props) }, (0, Text_1.filterTextProps)(props))));
+const titleStyle = (theme, { block = true, center = true, fontSize = ' 2rem', color = Identity_1.COLOR.GRAY, bold = true, ...props }) => ({
+    ...(0, Text_1.textStyle)(theme, { block, bold, center, color, fontSize, ...props }),
+    marginBottom: '8px',
+});
+const Title = (props) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => titleStyle(theme, props), ...(0, Text_1.filterTextProps)(props) }));
 exports.Title = Title;

package/lib/Theme/Theme.js

@@ -239,5 +239,5 @@ exports.themes = {
         },
     },
 };
-const ThemeProvider = (props) => (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, Object.assign({}, props, { theme: props.theme }));
+const ThemeProvider = (props) => (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { ...props, theme: props.theme });
 exports.ThemeProvider = ThemeProvider;

package/lib/mediaQueries.js

@@ -41,4 +41,4 @@ exports.QUERY = {
     [QueryKeys.TABLET_DOWN]: `max-width: ${sizes_1.WIDTH.TABLET_MAX}px`,
     [QueryKeys.TABLET_UP]: `min-width: ${sizes_1.WIDTH.TABLET_MIN}px`,
 };
-exports.media = Object.entries(exports.QUERY).reduce((accumulator, [key, value]) => (Object.assign(Object.assign({}, accumulator), { [key]: `@media (${value})` })), {});
+exports.media = Object.entries(exports.QUERY).reduce((accumulator, [key, value]) => ({ ...accumulator, [key]: `@media (${value})` }), {});

package/lib/util.js

@@ -24,7 +24,7 @@ exports.noop = noop;
 const inlineSVG = (svg) => `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 exports.inlineSVG = inlineSVG;
 const filterProps = (props, propsToFilter) => {
-    return Object.entries(props).reduce((accumulator, [key, value]) => (!propsToFilter.includes(key) ? Object.assign(Object.assign({}, accumulator), { [key]: value }) : accumulator), {});
+    return Object.entries(props).reduce((accumulator, [key, value]) => (!propsToFilter.includes(key) ? { ...accumulator, [key]: value } : accumulator), {});
 };
 exports.filterProps = filterProps;
 const manySelectors = (selectors, css) => selectors.reduce((acc, selector) => {

package/package.json

@@ -42,7 +42,7 @@
     "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-hot-loader": "4.13.1",
-    "react-styleguidist": "13.1.2",
+    "react-styleguidist": "13.1.3",
     "react-test-renderer": "18.3.1",
     "rimraf": "5.0.7",
     "typescript": "^5.0.4",
@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.17.9",
-  "gitHead": "0337d8fc17a5a20352faaa2d3dccfa2fc9c8e627"
+  "version": "9.18.1",
+  "gitHead": "66832e5bcf50be7819022bfdd5e608204c6e7f06"
 }