@nulogy/components 15.2.1 → 15.2.3

package/dist/src/BrandedNavBar/SubMenuTriggerButton.js

@@ -1,14 +1,3 @@
-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;
-};
 import styled from "styled-components";
 import React from "react";
 import { DropdownButton } from "../DropdownMenu";
@@ -19,9 +8,8 @@ const StyledButton = styled(DropdownButton)(({ isOpen, theme }) => ({
     backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
     color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey,
 }));
-const SubMenuTriggerButton = React.forwardRef((_a, ref) => {
-    var { name, isOpen } = _a, props = __rest(_a, ["name", "isOpen"]);
-    return (React.createElement(StyledButton, Object.assign({ isOpen: isOpen, ref: ref }, props),
+const SubMenuTriggerButton = React.forwardRef(({ name, isOpen, ...props }, ref) => {
+    return (React.createElement(StyledButton, { isOpen: isOpen, ref: ref, ...props },
         React.createElement(Flex, { gap: "half", justifyContent: "space-between", alignItems: "center" },
             name,
             React.createElement(Icon, { icon: "rightArrow", size: "20px" }))));

package/dist/src/BrandedNavBar/renderSubMenuItems.js

@@ -2,13 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { DropdownText, DropdownLink } from "../DropdownMenu";
 import { Icon } from "../Icon";
-const renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => {
-    var _a;
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
-        React.createElement(SubMenuTrigger, { onItemClick: onItemClick, name: subMenuItem.name, menuData: subMenuItem.items, trigger: subMenuItem.trigger, layer: layer, menuType: menuType })));
-};
+const renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name },
+    React.createElement(SubMenuTrigger, { onItemClick: onItemClick, name: subMenuItem.name, menuData: subMenuItem.items, trigger: subMenuItem.trigger, layer: layer, menuType: menuType })));
 const renderSubMenuLink = (subMenuItem, onItemClick) => {
-    var _a;
     const linkProps = {
         onClick: onItemClick,
         href: subMenuItem.href,
@@ -16,20 +12,14 @@ const renderSubMenuLink = (subMenuItem, onItemClick) => {
         as: subMenuItem.as,
         target: subMenuItem.openInNew ? "_blank" : undefined,
     };
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
-        React.createElement(DropdownLink, Object.assign({}, linkProps),
+    return (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name },
+        React.createElement(DropdownLink, { ...linkProps },
             subMenuItem.name,
             subMenuItem.openInNew && React.createElement(Icon, { size: "x2", icon: "openInNew" }))));
 };
-const renderCustom = (subMenuItem, onItemClick, _SubMenuTrigger, layer) => {
-    var _a;
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name }, subMenuItem.render({ size: "medium", onItemClick, layer })));
-};
-const renderText = (subMenuItem) => {
-    var _a;
-    return (React.createElement(NoWrapLi, { key: (_a = subMenuItem.key) !== null && _a !== void 0 ? _a : subMenuItem.name },
-        React.createElement(DropdownText, null, subMenuItem.name)));
-};
+const renderCustom = (subMenuItem, onItemClick, _SubMenuTrigger, layer) => (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name }, subMenuItem.render({ size: "medium", onItemClick, layer })));
+const renderText = (subMenuItem) => (React.createElement(NoWrapLi, { key: subMenuItem.key ?? subMenuItem.name },
+    React.createElement(DropdownText, null, subMenuItem.name)));
 const getRenderFunction = (subMenuItem) => {
     if (subMenuItem.items) {
         return renderSubMenuTrigger;

package/dist/src/Branding/Branding.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from "react";
 import styled, { useTheme } from "styled-components";
 import { Flex } from "../Flex";
@@ -65,10 +54,9 @@ const BrandingBoxPaddings = {
     medium: "2px",
     large: "6px",
 };
-const Branding = (_a) => {
-    var { logoType = "wordmark", subtext, size = "medium", alignment = "left", withLine, logoColor = "blue", className } = _a, props = __rest(_a, ["logoType", "subtext", "size", "alignment", "withLine", "logoColor", "className"]);
+const Branding = ({ logoType = "wordmark", subtext, size = "medium", alignment = "left", withLine, logoColor = "blue", className, ...props }) => {
     const theme = useTheme();
-    return (React.createElement(BrandingWrap, Object.assign({ size: size, alignment: alignment, className: className }, props),
+    return (React.createElement(BrandingWrap, { size: size, alignment: alignment, className: className, ...props },
         logoType === "lettermark" ? (React.createElement(LettermarkLogo, { size: size, letterFill: getLogoColor(logoColor, theme).letter })) : (React.createElement(WordmarkLogo, { size: size, letterFill: getLogoColor(logoColor, theme).letter, logoFill: getLogoColor(logoColor, theme).logo })),
         subtext && (React.createElement(Flex, { justifyContent: getAlignment(alignment), width: "100%", py: BrandingBoxPaddings[size] },
             alignment !== "left" && withLine && React.createElement(Line, { logoColor: logoColor }),

package/dist/src/Branding/BrandingText.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type BrandingTextProps = {
     logoColor?: "blue" | "white";
     size?: "small" | "medium" | "large";

package/dist/src/Branding/LettermarkLogo.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from "react";
 const sizes = {
     small: {
@@ -25,8 +14,7 @@ const sizes = {
     },
 };
 const getSize = (size) => sizes[size] || sizes.medium;
-export default function LettermarkLogo(_a) {
-    var { size, letterFill } = _a, props = __rest(_a, ["size", "letterFill"]);
-    return (React.createElement("svg", Object.assign({}, getSize(size), props, { viewBox: "0 0 37 32", style: { display: "block", margin: size === "large" ? null : "2px 0" } }),
+export default function LettermarkLogo({ size, letterFill, ...props }) {
+    return (React.createElement("svg", { ...getSize(size), ...props, viewBox: "0 0 37 32", style: { display: "block", margin: size === "large" ? null : "2px 0" } },
         React.createElement("path", { fill: letterFill, d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z" })));
 }

package/dist/src/Branding/WordmarkLogo.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from "react";
 const sizes = {
     small: {
@@ -25,9 +14,8 @@ const sizes = {
     },
 };
 const getSize = (size) => sizes[size] || sizes.medium;
-export default function WordmarkLogo(_a) {
-    var { size, logoFill, letterFill } = _a, props = __rest(_a, ["size", "logoFill", "letterFill"]);
-    return (React.createElement("svg", Object.assign({}, getSize(size), props, { viewBox: "0 0 133 32", style: { display: "block", margin: size === "medium" ? "2px 0" : null } }),
+export default function WordmarkLogo({ size, logoFill, letterFill, ...props }) {
+    return (React.createElement("svg", { ...getSize(size), ...props, viewBox: "0 0 133 32", style: { display: "block", margin: size === "medium" ? "2px 0" : null } },
         React.createElement("path", { fill: letterFill, d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z" }),
         React.createElement("g", { transform: "translate(43.000000, 0.000000)", fill: logoFill },
             React.createElement("path", { d: "M5.14521212,24.2224981 L1.33226763e-14,24.2224981 L1.33226763e-14,9.41134654 L4.75151515,9.41134654 L4.75151515,11.8937708 C5.43733518,11.0060378 6.29475204,10.2653615 7.27272727,9.71583139 C8.16188898,9.23817548 9.15699751,8.9920662 10.166303,9.00019502 C11.7333333,9.00019502 12.9221818,9.44948795 13.7328485,10.3480738 C14.5435152,11.2466597 14.9488485,12.5615688 14.9488485,14.2928011 L14.9488485,24.2224981 L9.83078788,24.2224981 L9.83078788,15.7376496 C9.83078788,14.961892 9.67175758,14.3755486 9.35369697,13.9786193 C9.03563636,13.58169 8.56436364,13.3877506 7.93987879,13.3968011 C7.04258586,13.3968011 6.35216162,13.6980536 5.86860606,14.3005587 C5.38505051,14.9030637 5.14391919,15.7803162 5.14521212,16.9323162 L5.14521212,24.2224981 Z" }),

package/dist/src/Breadcrumbs/Breadcrumbs.js

@@ -1,14 +1,3 @@
-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;
-};
 import React, { isValidElement } from "react";
 import { Flex } from "../Flex";
 import { Icon } from "../Icon";
@@ -21,15 +10,14 @@ const insertSeparators = (items) => {
             React.createElement(Icon, { icon: "rightArrow" })));
     }, []);
 };
-const Breadcrumbs = (_a) => {
-    var { variant, as = "nav", children } = _a, props = __rest(_a, ["variant", "as", "children"]);
+const Breadcrumbs = ({ variant, as = "nav", children, ...props }) => {
     const componentVariant = useComponentVariant(variant);
     const allItems = React.Children.map(children, (child, index) => {
         if (!isValidElement(child))
             return null;
         return (React.createElement(BreadcrumbsListItem, { variant: componentVariant, key: `child-${index}` }, child));
     }).filter(Boolean);
-    return (React.createElement(Flex, Object.assign({ as: as }, props),
+    return (React.createElement(Flex, { as: as, ...props },
         React.createElement(BreadcrumbsList, null, insertSeparators(allItems))));
 };
 export default Breadcrumbs;

package/dist/src/Breadcrumbs/BreadcrumbsList.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const BreadcrumbsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
 export default BreadcrumbsList;

package/dist/src/Breadcrumbs/BreadcrumbsListItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 export declare const BreadcrumbsListSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const BreadcrumbsListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {

package/dist/src/Button/Button.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from "react";
 import styled, { useTheme } from "styled-components";
 import { space, variant } from "styled-system";
@@ -75,11 +64,10 @@ const WrapperButton = styled.button(({ fullWidth }) => ({
         },
     },
 }), space);
-const Button = React.forwardRef((_a, ref) => {
-    var { children, iconSide = "right", icon, className, asLink, variant, size } = _a, props = __rest(_a, ["children", "iconSide", "icon", "className", "asLink", "variant", "size"]);
+const Button = React.forwardRef(({ children, iconSide = "right", icon, className, asLink, variant, size, ...props }, ref) => {
     const { lineHeights: { smallTextCompressed }, } = useTheme();
     const componentVariant = useComponentVariant(variant);
-    return (React.createElement(WrapperButton, Object.assign({ as: asLink ? "a" : "button", ref: ref, className: className, variant: componentVariant, size: size }, props),
+    return (React.createElement(WrapperButton, { as: asLink ? "a" : "button", ref: ref, className: className, variant: componentVariant, size: size, ...props },
         icon && iconSide === "left" && React.createElement(Icon, { size: `${smallTextCompressed}em`, mr: "half", icon: icon }),
         children,
         icon && iconSide === "right" && React.createElement(Icon, { size: `${smallTextCompressed}em`, ml: "half", icon: icon })));

package/dist/src/Button/CloseButton.js

@@ -45,7 +45,7 @@ const WrapperButton = styled.button(({ disabled, theme }) => ({
 const CloseButton = React.forwardRef((props, ref) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (React.createElement(WrapperButton, Object.assign({ "aria-label": t("close"), ref: ref }, props),
+    return (React.createElement(WrapperButton, { "aria-label": t("close"), ref: ref, ...props },
         React.createElement(Icon, { size: theme.space.x4, icon: "close", p: "half" })));
 });
 export default CloseButton;

package/dist/src/Button/ControlIcon.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from "react";
 import styled from "styled-components";
 import { layout, space } from "styled-system";
@@ -38,9 +27,6 @@ const StyledButton = styled.button(({ toggled, disabled, theme }) => ({
         backgroundColor: theme.colors.lightGrey,
     },
 }), space, layout);
-const ControlIcon = React.forwardRef((_a, ref) => {
-    var { icon, toggled, disabled, label, size = "x4", type = "button" } = _a, props = __rest(_a, ["icon", "toggled", "disabled", "label", "size", "type"]);
-    return (React.createElement(StyledButton, Object.assign({ "aria-label": label, ref: ref, disabled: disabled, toggled: toggled, type: type }, props),
-        React.createElement(Icon, { size: size, icon: icon })));
-});
+const ControlIcon = React.forwardRef(({ icon, toggled, disabled, label, size = "x4", type = "button", ...props }, ref) => (React.createElement(StyledButton, { "aria-label": label, ref: ref, disabled: disabled, toggled: toggled, type: type, ...props },
+    React.createElement(Icon, { size: size, icon: icon }))));
 export default ControlIcon;

package/dist/src/Button/DangerButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "./Button";
 declare const DangerButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default DangerButton;

package/dist/src/Button/IconicButton.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from "react";
 import styled from "styled-components";
 import { space, variant } from "styled-system";
@@ -18,19 +7,16 @@ import icons from "@nulogy/icons";
 import { Icon } from "../Icon";
 import { Text } from "../Type";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-const IconWrapper = styled.span(({ theme, size }) => {
-    var _a, _b;
-    return ({
-        display: "inline-flex",
-        flexShrink: 0,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: theme.radii.rounded,
-        height: `calc(${(_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : size} + ${theme.sizes.x1})`,
-        width: `calc(${(_b = theme.sizes[size]) !== null && _b !== void 0 ? _b : size} + ${theme.sizes.x1})`,
-        transition: ".2s",
-    });
-});
+const IconWrapper = styled.span(({ theme, size }) => ({
+    display: "inline-flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.rounded,
+    height: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,
+    width: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,
+    transition: ".2s",
+}));
 const HoverText = styled.div(({ theme }) => ({
     whiteSpace: "nowrap",
     ontSize: theme.fontSizes.small,
@@ -42,61 +28,58 @@ const HoverText = styled.div(({ theme }) => ({
     padding: `${theme.space.half} ${theme.space.x1}`,
     pointerEvents: "none",
 }));
-const WrapperButton = styled.button(({ disabled, hoverBackgroundColor, theme }) => {
-    var _a;
-    return ({
-        background: "transparent",
-        border: "none",
-        position: "relative",
-        display: "inline-flex",
-        alignItems: "center",
-        cursor: disabled ? "default" : "pointer",
-        [`${Text}`]: {
-            display: "block",
-            fontWeight: theme.fontWeights.medium,
-            textAlign: "left",
+const WrapperButton = styled.button(({ disabled, hoverBackgroundColor, theme }) => ({
+    background: "transparent",
+    border: "none",
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: disabled ? "default" : "pointer",
+    [`${Text}`]: {
+        display: "block",
+        fontWeight: theme.fontWeights.medium,
+        textAlign: "left",
+    },
+    [`${HoverText}`]: {
+        opacity: "0",
+    },
+    "&:hover": {
+        [`${IconWrapper}`]: {
+            backgroundColor: theme.colors[hoverBackgroundColor] ?? hoverBackgroundColor,
         },
         [`${HoverText}`]: {
-            opacity: "0",
+            opacity: "1",
         },
-        "&:hover": {
-            [`${IconWrapper}`]: {
-                backgroundColor: (_a = theme.colors[hoverBackgroundColor]) !== null && _a !== void 0 ? _a : hoverBackgroundColor,
-            },
-            [`${HoverText}`]: {
-                opacity: "1",
-            },
+    },
+    "&:active": {
+        [`${IconWrapper}`]: {
+            transform: "scale(0.875)",
+            transition: ".2s ease-in",
         },
-        "&:active": {
+    },
+    "&:disabled": {
+        opacity: ".5",
+        "&:hover, &:active": {
             [`${IconWrapper}`]: {
-                transform: "scale(0.875)",
-                transition: ".2s ease-in",
+                background: "none",
+                transform: "none",
             },
         },
-        "&:disabled": {
-            opacity: ".5",
-            "&:hover, &:active": {
-                [`${IconWrapper}`]: {
-                    background: "none",
-                    transform: "none",
-                },
-            },
+    },
+    "&:focus": {
+        outline: "none",
+        [`${IconWrapper}`]: {
+            boxShadow: theme.shadows.focus,
         },
-        "&:focus": {
-            outline: "none",
-            [`${IconWrapper}`]: {
-                boxShadow: theme.shadows.focus,
-            },
-            [`${HoverText}`]: {
-                opacity: "1",
-            },
+        [`${HoverText}`]: {
+            opacity: "1",
         },
-        paddingTop: theme.space.half,
-        paddingBottom: theme.space.half,
-        paddingLeft: theme.space.none,
-        paddingRight: theme.space.none,
-    });
-}, variant({
+    },
+    paddingTop: theme.space.half,
+    paddingBottom: theme.space.half,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none,
+}), variant({
     variants: {
         touch: {
             fontSize: "md",
@@ -104,10 +87,9 @@ const WrapperButton = styled.button(({ disabled, hoverBackgroundColor, theme })
         },
     },
 }), space);
-const IconicButton = React.forwardRef((_a, forwardedRef) => {
-    var { children, color = "darkBlue", hoverBackgroundColor = "lightBlue", icon, labelHidden, className, iconSize = "x3", fontSize, tooltip, variant } = _a, props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip", "variant"]);
+const IconicButton = React.forwardRef(({ children, color = "darkBlue", hoverBackgroundColor = "lightBlue", icon, labelHidden, className, iconSize = "x3", fontSize, tooltip, variant, ...props }, forwardedRef) => {
     const componentVariant = useComponentVariant(variant);
-    return (React.createElement(WrapperButton, Object.assign({ ref: forwardedRef, "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined, className: className, hoverBackgroundColor: hoverBackgroundColor, variant: componentVariant }, props),
+    return (React.createElement(WrapperButton, { ref: forwardedRef, "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined, className: className, hoverBackgroundColor: hoverBackgroundColor, variant: componentVariant, ...props },
         React.createElement(Manager, null,
             React.createElement(Reference, null, ({ ref }) => (React.createElement(IconWrapper, { ref: ref, size: iconSize },
                 React.createElement(Icon, { size: iconSize, icon: icon, color: color })))),

package/dist/src/Button/PrimaryButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "./Button";
 declare const PrimaryButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default PrimaryButton;

package/dist/src/Button/QuietButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "./Button";
 declare const QuietButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default QuietButton;

package/dist/src/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FlexProps } from "../Flex/Flex";
 type ButtonGroupProps = FlexProps & {
     children?: React.ReactNode;

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -24,7 +24,13 @@ const buttonSpacings = (theme) => ({
 });
 const getAlignment = (alignment) => alignments[alignment] || alignments.left;
 const getButtonSpacing = (alignment, theme) => buttonSpacings(theme)[alignment] || buttonSpacings(theme).left;
-const ButtonGroup = styled(Flex)(({ alignment = "left", theme }) => (Object.assign({ flexWrap: "wrap", marginBottom: `-${theme.space.x1}`, justifyContent: getAlignment(alignment), button: {
+const ButtonGroup = styled(Flex)(({ alignment = "left", theme }) => ({
+    flexWrap: "wrap",
+    marginBottom: `-${theme.space.x1}`,
+    justifyContent: getAlignment(alignment),
+    button: {
         marginBottom: theme.space.x1,
-    } }, getButtonSpacing(alignment, theme))));
+    },
+    ...getButtonSpacing(alignment, theme),
+}));
 export default ButtonGroup;

package/dist/src/Card/Card.js

@@ -1,17 +1,5 @@
-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;
-};
 import React from "react";
 import { Box } from "../Box";
-export default function Card(_a) {
-    var { borderRadius = "medium", boxShadow = "small", py = "x2", px = "x2", position = "relative", children } = _a, props = __rest(_a, ["borderRadius", "boxShadow", "py", "px", "position", "children"]);
-    return (React.createElement(Box, Object.assign({ border: "1px solid", borderColor: "lightGrey", borderRadius: borderRadius, boxShadow: boxShadow, py: py, px: px, position: position }, props), children));
+export default function Card({ borderRadius = "medium", boxShadow = "small", py = "x2", px = "x2", position = "relative", children, ...props }) {
+    return (React.createElement(Box, { border: "1px solid", borderColor: "lightGrey", borderRadius: borderRadius, boxShadow: boxShadow, py: py, px: px, position: position, ...props }, children));
 }

package/dist/src/Card/Card.story.js

@@ -47,7 +47,7 @@ export const AdvancedUsage = () => {
             React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Cycle counts"),
             React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
             React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-                React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))) },
+                React.createElement(TopBar.MenuItemLink, { ...props })))))) },
         React.createElement(Page, { fullHeight: true },
             React.createElement(CardSet, null, [...Array(10)].map((_, i) => (React.createElement(AdvancedCard, { key: i })))))));
 };

package/dist/src/Card/CardSet.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const CardSet: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, keyof import("../Flex/Flex").FlexProps> & import("../Flex/Flex").FlexProps, never>> & string;
 export default CardSet;

package/dist/src/Checkbox/Checkbox.js

@@ -68,7 +68,16 @@ const VisualCheckbox = styled.div(({ indeterminate, theme }) => ({
         marginBottom: theme.space.x0_5,
     },
     // checkmark
-    "&:before": Object.assign({ content: "''", display: "none", position: "relative", left: theme.space.half, width: theme.sizes.half, height: theme.sizes.x1, border: `solid ${theme.colors.white}` }, (indeterminate ? indeterminateStyles : checkedStyles)),
+    "&:before": {
+        content: "''",
+        display: "none",
+        position: "relative",
+        left: theme.space.half,
+        width: theme.sizes.half,
+        height: theme.sizes.x1,
+        border: `solid ${theme.colors.white}`,
+        ...(indeterminate ? indeterminateStyles : checkedStyles),
+    },
 }), addStyledProps);
 const CheckboxInput = styled.input((props) => ({
     position: "absolute",
@@ -78,19 +87,24 @@ const CheckboxInput = styled.input((props) => ({
     [`&:focus + ${VisualCheckbox}`]: {
         boxShadow: props.theme.shadows.focus,
     },
-    [`&:checked + ${VisualCheckbox}`]: Object.assign(Object.assign({}, getCheckboxStyle(props, "checked")), { "&:before": {
+    [`&:checked + ${VisualCheckbox}`]: {
+        ...getCheckboxStyle(props, "checked"),
+        "&:before": {
             display: "block",
-        } }),
-    [`&:not(:checked) + ${VisualCheckbox}`]: Object.assign({}, getCheckboxStyle(props, "unchecked")),
+        },
+    },
+    [`&:not(:checked) + ${VisualCheckbox}`]: {
+        ...getCheckboxStyle(props, "unchecked"),
+    },
 }));
 const Checkbox = forwardRef((props, ref) => {
     const { variant, className, labelText, disabled, checked, required, error, indeterminate } = props;
     const componentVariant = useComponentVariant(variant);
     const spaceProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Box, Object.assign({ className: className, px: "0" }, spaceProps),
+    return (React.createElement(Box, { className: className, px: "0", ...spaceProps },
         React.createElement(ClickInputLabel, { variant: componentVariant, disabled: disabled },
-            React.createElement(CheckboxInput, Object.assign({ type: "checkbox", required: required, "aria-required": required, "aria-invalid": error, indeterminate: indeterminate, ref: ref }, restProps)),
+            React.createElement(CheckboxInput, { type: "checkbox", required: required, "aria-required": required, "aria-invalid": error, indeterminate: indeterminate, ref: ref, ...restProps }),
             React.createElement(VisualCheckbox, { disabled: disabled, checked: checked, indeterminate: indeterminate, "data-testid": "visual-checkbox" }),
             labelText && (React.createElement(Text, { fontSize: componentVariant === "touch" ? "md" : undefined, lineHeight: componentVariant === "touch" ? "base" : undefined, disabled: disabled, ml: "x1" }, labelText)))));
 });

package/dist/src/Checkbox/Checkbox.story.js

@@ -4,7 +4,10 @@ class CheckboxWithState extends React.Component {
     constructor(props) {
         super(props);
         this.handleChange = (key) => {
-            this.setState((state) => (Object.assign(Object.assign({}, state), { [key]: !state[key] })));
+            this.setState((state) => ({
+                ...state,
+                [key]: !state[key],
+            }));
         };
         this.state = { checkbox1: false, checkbox2: false };
     }

package/dist/src/Checkbox/CheckboxGroup.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from "react";
 import styled from "styled-components";
 import { HelpText, RequirementText } from "../FieldLabel";
@@ -18,9 +7,8 @@ import { InlineIcon } from "../Icon";
 import { Tooltip } from "../Tooltip";
 import LabelText, { LabelContent } from "../FieldLabel/LabelText";
 import Checkbox from "./Checkbox";
-export default function CheckboxGroup(_a) {
-    var { className, id, errorMessage, errorList, labelText, helpText, requirementText, hint } = _a, props = __rest(_a, ["className", "id", "errorMessage", "errorList", "labelText", "helpText", "requirementText", "hint"]);
-    const otherProps = Object.assign(Object.assign({}, props), { errorMessage, errorList });
+export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }) {
+    const otherProps = { ...props, errorMessage, errorList };
     return (React.createElement(Fieldset, { className: className, id: id },
         React.createElement(Legend, null,
             React.createElement(LabelContent, { "data-testid": "label-content" },
@@ -34,8 +22,8 @@ export default function CheckboxGroup(_a) {
 }
 const getCheckboxButtons = (props) => {
     const checkboxButtons = React.Children.map(props.children, (checkbox) => {
-        const _a = checkbox.props, { value, disabled, required, onChange } = _a, checkboxProps = __rest(_a, ["value", "disabled", "required", "onChange"]);
-        return (React.createElement(Checkbox, Object.assign({}, checkboxProps, { value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: props.defaultValue ? props.defaultValue.includes(value) : undefined, checked: props.checkedValue ? props.checkedValue.includes(value) : undefined, onChange: props.onChange || onChange })));
+        const { value, disabled, required, onChange, ...checkboxProps } = checkbox.props;
+        return (React.createElement(Checkbox, { ...checkboxProps, value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: props.defaultValue ? props.defaultValue.includes(value) : undefined, checked: props.checkedValue ? props.checkedValue.includes(value) : undefined, onChange: props.onChange || onChange }));
     });
     return checkboxButtons;
 };