@nulogy/components 15.2.2 → 15.3.0

package/dist/src/Select/Select.story.js

@@ -1,23 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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, { useEffect, useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
 import { Box } from "../Box";
@@ -25,17 +5,16 @@ import { Flex } from "../Flex";
 import { Button } from "../index";
 import Select from "./Select";
 import { CustomOption, getPhotos, options, partnerCompanyName, wrappingOptions, PCNList, errorList, CustomFieldsOption, } from "./Select.story.fixture";
-const SelectWithManyOptions = (_a) => {
-    var { multiselect, labelText } = _a, props = __rest(_a, ["multiselect", "labelText"]);
+const SelectWithManyOptions = ({ multiselect, labelText, ...props }) => {
     const [photoList, setPhotoList] = useState([]);
-    const setOptions = () => __awaiter(void 0, void 0, void 0, function* () {
-        const result = yield getPhotos();
+    const setOptions = async () => {
+        const result = await getPhotos();
         setPhotoList(result);
-    });
+    };
     useEffect(() => {
         setOptions();
     }, []);
-    return React.createElement(Select, Object.assign({ multiselect: multiselect, options: photoList, labelText: labelText }, props));
+    return React.createElement(Select, { multiselect: multiselect, options: photoList, labelText: labelText, ...props });
 };
 class SelectWithState extends React.Component {
     constructor(props) {
@@ -53,7 +32,7 @@ class SelectWithState extends React.Component {
     render() {
         const { selectedValue } = this.state;
         return (React.createElement(Flex, { flexDirection: "column", gap: "x2", alignItems: "flex-start" },
-            React.createElement(Select, Object.assign({ className: "Select", classNamePrefix: "SelectTest", onChange: this.handleChange, value: selectedValue, options: options }, this.props)),
+            React.createElement(Select, { className: "Select", classNamePrefix: "SelectTest", onChange: this.handleChange, value: selectedValue, options: options, ...this.props }),
             React.createElement(Button, { onClick: this.clearSelection }, "Clear selection")));
     }
 }
@@ -214,7 +193,7 @@ WithWrappingText.story = {
     name: "With wrapping text",
 };
 export const WithMultiselect = (props) => {
-    return (React.createElement(Select, Object.assign({ defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "Nothing to see here", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true }, props)));
+    return (React.createElement(Select, { defaultValue: [partnerCompanyName[0].value, partnerCompanyName[2].value], noOptionsMessage: () => "Nothing to see here", placeholder: "Please select inventory status", options: PCNList, labelText: "Select PCN", className: "Select", multiselect: true, ...props }));
 };
 WithMultiselect.story = {
     name: "with multiselect",
@@ -272,7 +251,13 @@ export const WithTopMenuPlacement = () => {
 };
 export const WithCustomStyles = () => {
     return (React.createElement(Select, { options: options, menuPlacement: "top", styles: (styles) => {
-            return Object.assign(Object.assign({}, styles), { control: (provided, props) => (Object.assign(Object.assign({}, styles.control(provided, props)), { border: "2px solid lightblue" })) });
+            return {
+                ...styles,
+                control: (provided, props) => ({
+                    ...styles.control(provided, props),
+                    border: "2px solid lightblue",
+                }),
+            };
         } }));
 };
 export const WithCustomOptionFields = () => {

package/dist/src/Select/SelectComponents.js

@@ -3,29 +3,29 @@ import { components, } from "react-select";
 export function SelectControl(props) {
     const { isFocused } = props;
     return (React.createElement("div", { "data-testid": "select-control" },
-        React.createElement(components.Control, Object.assign({ className: isFocused ? "nds-select--is-focused" : null, isFocused: isFocused }, props), props.children)));
+        React.createElement(components.Control, { className: isFocused ? "nds-select--is-focused" : null, isFocused: isFocused, ...props }, props.children)));
 }
 export function SelectMultiValue(props) {
     return (React.createElement("div", { "data-testid": "select-multivalue" },
-        React.createElement(components.MultiValue, Object.assign({}, props), props.children)));
+        React.createElement(components.MultiValue, { ...props }, props.children)));
 }
 export function SelectClearIndicator(props) {
     return (React.createElement("div", { "data-testid": "select-clear" },
-        React.createElement(components.ClearIndicator, Object.assign({}, props))));
+        React.createElement(components.ClearIndicator, { ...props })));
 }
 export function SelectDropdownIndicator(props) {
     return (React.createElement("div", { "data-testid": "select-arrow" },
-        React.createElement(components.DropdownIndicator, Object.assign({}, props))));
+        React.createElement(components.DropdownIndicator, { ...props })));
 }
 export function SelectMenu(props) {
     return (React.createElement("div", { "data-testid": "select-dropdown" },
-        React.createElement(components.Menu, Object.assign({}, props), props.children)));
+        React.createElement(components.Menu, { ...props }, props.children)));
 }
 export function SelectContainer(props) {
     return (React.createElement("div", { "data-testid": "select-container" },
-        React.createElement(components.SelectContainer, Object.assign({}, props), props.children)));
+        React.createElement(components.SelectContainer, { ...props }, props.children)));
 }
 export function SelectInput(props) {
     return (React.createElement("div", { "data-testid": "select-input" },
-        React.createElement(components.Input, Object.assign({}, props), props.children)));
+        React.createElement(components.Input, { ...props }, props.children)));
 }

package/dist/src/Select/SelectOption.js

@@ -38,5 +38,5 @@ export const StyledOption = styled.div(typography, ({ isSelected, isFocused, the
 }));
 export function SelectOption(props) {
     return (React.createElement(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option" },
-        React.createElement(components.Option, Object.assign({}, props), props.children)));
+        React.createElement(components.Option, { ...props }, props.children)));
 }

package/dist/src/Select/customReactSelectStyles.js

@@ -41,42 +41,64 @@ const customStyles = ({ theme, error, maxHeight, windowed, hasIcon, variant, has
         option: () => ({
             height: 38,
         }),
-        clearIndicator: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.midGrey })),
-        control: (provided, state) => (Object.assign(Object.assign(Object.assign({}, provided), { display: "flex", minHeight: theme.space.x5, paddingLeft: theme.space.x1, position: "relative", width: "100%", fontSize: theme.fontSizes.base, lineHeight: theme.lineHeights.base, color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : theme.colors.black, background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white, borderColor: getBorderColor({
+        clearIndicator: (provided) => ({
+            ...provided,
+            color: theme.colors.midGrey,
+        }),
+        control: (provided, state) => ({
+            ...provided,
+            display: "flex",
+            minHeight: theme.space.x5,
+            paddingLeft: theme.space.x1,
+            position: "relative",
+            width: "100%",
+            fontSize: theme.fontSizes.base,
+            lineHeight: theme.lineHeights.base,
+            color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : theme.colors.black,
+            background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white,
+            borderColor: getBorderColor({
                 errored: error,
                 disabled: state.isDisabled,
                 isOpen: state.selectProps.menuIsOpen,
                 isFocused: state.isFocused,
                 theme,
-            }), boxSizing: "border-box", boxShadow: getShadow({
+            }),
+            boxSizing: "border-box",
+            boxShadow: getShadow({
                 errored: error,
                 isOpen: state.selectProps.menuIsOpen,
                 theme,
-            }), borderRadius: theme.radii.medium, borderBottomLeftRadius: getControlBorderRadius({
+            }),
+            borderRadius: theme.radii.medium,
+            borderBottomLeftRadius: getControlBorderRadius({
                 border: "bottom",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), borderBottomRightRadius: getControlBorderRadius({
+            }),
+            borderBottomRightRadius: getControlBorderRadius({
                 border: "bottom",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), borderTopRightRadius: getControlBorderRadius({
+            }),
+            borderTopRightRadius: getControlBorderRadius({
                 border: "top",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), borderTopLeftRadius: getControlBorderRadius({
+            }),
+            borderTopLeftRadius: getControlBorderRadius({
                 border: "top",
                 isMenuOpen: state.selectProps.menuIsOpen,
                 menuLength: state.selectProps.options.length,
                 menuPlacement: state.selectProps.menuPlacement,
                 theme: theme,
-            }), "&:hover, &:focus": {
+            }),
+            "&:hover, &:focus": {
                 borderColor: getBorderColor({
                     errored: error,
                     disabled: state.isDisabled,
@@ -84,68 +106,154 @@ const customStyles = ({ theme, error, maxHeight, windowed, hasIcon, variant, has
                     isFocused: true,
                     theme,
                 }),
-            } }), (hasIcon && {
-            paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`,
-        }))),
-        dropdownIndicator: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), (!hasDefaultOptions && { display: "none" })), { color: theme.colors.midGrey })),
-        indicatorsContainer: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.midGrey })),
-        singleValue: (provided) => (Object.assign(Object.assign({}, provided), { marginLeft: 2, marginRight: 2, position: "absolute", top: "50%", transform: "translateY(-50%)" })),
-        valueContainer: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), { padding: 0, display: "flex", overflow: "auto", maxHeight: "150px", gap: theme.space.half, paddingTop: theme.space.none, paddingBottom: theme.space.none }), stylesForVariant({
-            touch: {
-                fontSize: "md",
-                lineHeight: "base",
             },
-        }, variant))),
-        menu: (provided, state) => (Object.assign(Object.assign({}, provided), { marginTop: 0, marginBottom: 0, position: "absolute", overflowX: "auto", zIndex: 100, width: "100%", background: theme.colors.white, borderWidth: "1px", borderColor: getBorderColor({
+            ...(hasIcon && {
+                paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`,
+            }),
+        }),
+        dropdownIndicator: (provided) => ({
+            ...provided,
+            ...(!hasDefaultOptions && { display: "none" }),
+            color: theme.colors.midGrey,
+        }),
+        indicatorsContainer: (provided) => ({
+            ...provided,
+            color: theme.colors.midGrey,
+        }),
+        singleValue: (provided) => ({
+            ...provided,
+            marginLeft: 2,
+            marginRight: 2,
+            position: "absolute",
+            top: "50%",
+            transform: "translateY(-50%)",
+        }),
+        valueContainer: (provided) => ({
+            ...provided,
+            padding: 0,
+            display: "flex",
+            overflow: "auto",
+            maxHeight: "150px",
+            gap: theme.space.half,
+            paddingTop: theme.space.none,
+            paddingBottom: theme.space.none,
+            ...stylesForVariant({
+                touch: {
+                    fontSize: "md",
+                    lineHeight: "base",
+                },
+            }, variant),
+        }),
+        menu: (provided, state) => ({
+            ...provided,
+            marginTop: 0,
+            marginBottom: 0,
+            position: "absolute",
+            overflowX: "auto",
+            zIndex: 100,
+            width: "100%",
+            background: theme.colors.white,
+            borderWidth: "1px",
+            borderColor: getBorderColor({
                 errored: error,
                 isOpen: true,
                 isFocused: false,
                 theme,
-            }), borderLeftStyle: "solid", borderRightStyle: "solid", borderBottomStyle: getMenuBorderRadius({
+            }),
+            borderLeftStyle: "solid",
+            borderRightStyle: "solid",
+            borderBottomStyle: getMenuBorderRadius({
                 border: "bottom",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).style, borderTopStyle: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
-                .style, borderBottomLeftRadius: getMenuBorderRadius({
+            }).style,
+            borderTopStyle: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
+                .style,
+            borderBottomLeftRadius: getMenuBorderRadius({
                 border: "bottom",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).radius, borderBottomRightRadius: getMenuBorderRadius({
+            }).radius,
+            borderBottomRightRadius: getMenuBorderRadius({
                 border: "bottom",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).radius, borderTopLeftRadius: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
-                .radius, borderTopRightRadius: getMenuBorderRadius({
+            }).radius,
+            borderTopLeftRadius: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme })
+                .radius,
+            borderTopRightRadius: getMenuBorderRadius({
                 border: "top",
                 menuPlacement: state.selectProps.menuPlacement,
                 theme,
-            }).radius, boxShadow: getShadow({ errored: error, isOpen: true, theme }) })),
-        menuList: (provided) => (Object.assign(Object.assign({}, provided), { minWidth: "fit-content", padding: 0, maxHeight: numberFromDimension(maxHeight), borderRadius: theme.radii.medium, marginTop: windowed ? "-4px" : 0, marginBottom: windowed ? "-4px" : 0 })),
-        multiValue: (provided) => (Object.assign(Object.assign({}, provided), { background: theme.colors.lightGrey, color: theme.colors.black, margin: 0 })),
-        multiValueLabel: () => (Object.assign({ textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", color: theme.colors.black, borderRadius: theme.radii.small, fontSize: theme.fontSizes.small, padding: theme.space.half, paddingLeft: theme.space.x1 }, stylesForVariant({
-            touch: {
-                fontSize: "md",
-                lineHeight: "base",
-            },
-        }, variant))),
-        multiValueRemove: (provided) => (Object.assign(Object.assign(Object.assign({}, provided), { svg: { fill: theme.colors.black, height: theme.sizes.x2, width: theme.sizes.x2 }, borderBottomLeftRadius: 0, borderTopLeftRadius: 0, padding: theme.space.half, paddingLeft: theme.space.x1, "&:hover": {
+            }).radius,
+            boxShadow: getShadow({ errored: error, isOpen: true, theme }),
+        }),
+        menuList: (provided) => ({
+            ...provided,
+            minWidth: "fit-content",
+            padding: 0,
+            maxHeight: numberFromDimension(maxHeight),
+            borderRadius: theme.radii.medium,
+            marginTop: windowed ? "-4px" : 0,
+            marginBottom: windowed ? "-4px" : 0,
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            background: theme.colors.lightGrey,
+            color: theme.colors.black,
+            margin: 0,
+        }),
+        multiValueLabel: () => ({
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            color: theme.colors.black,
+            borderRadius: theme.radii.small,
+            fontSize: theme.fontSizes.small,
+            padding: theme.space.half,
+            paddingLeft: theme.space.x1,
+            ...stylesForVariant({
+                touch: {
+                    fontSize: "md",
+                    lineHeight: "base",
+                },
+            }, variant),
+        }),
+        multiValueRemove: (provided) => ({
+            ...provided,
+            svg: { fill: theme.colors.black, height: theme.sizes.x2, width: theme.sizes.x2 },
+            borderBottomLeftRadius: 0,
+            borderTopLeftRadius: 0,
+            padding: theme.space.half,
+            paddingLeft: theme.space.x1,
+            "&:hover": {
                 background: theme.colors.darkGrey,
                 cursor: "pointer",
                 svg: { fill: theme.colors.white },
-            } }), stylesForVariant({
-            touch: {
-                fontSize: "md",
-                lineHeight: "base",
             },
-        }, variant))),
-        noOptionsMessage: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.black, fontSize: theme.fontSizes.small })),
-        indicatorSeparator: (provided, state) => (Object.assign(Object.assign({}, provided), { display: showIndicatorSeparator({
+            ...stylesForVariant({
+                touch: {
+                    fontSize: "md",
+                    lineHeight: "base",
+                },
+            }, variant),
+        }),
+        noOptionsMessage: (provided) => ({
+            ...provided,
+            color: theme.colors.black,
+            fontSize: theme.fontSizes.small,
+        }),
+        indicatorSeparator: (provided, state) => ({
+            ...provided,
+            display: showIndicatorSeparator({
                 hasValue: state.hasValue,
                 isClearable: state.selectProps.isClearable,
                 isMulti: state.isMulti,
             })
                 ? "block"
-                : "none", borderLeft: `1px solid ${theme.colors.grey}` })),
+                : "none",
+            borderLeft: `1px solid ${theme.colors.grey}`,
+        }),
         placeholder: (state) => {
             return {
                 label: "placeholder",

package/dist/src/Select/lib.js

@@ -56,12 +56,11 @@ export function checkOptionsAreValid(options) {
     }
 }
 export function getOption(options, value) {
-    var _a;
     if (Array.isArray(value)) {
         return value.map((o) => getOption(options, o));
     }
     if (options.length > 0 && value !== undefined) {
-        return (_a = options.find((o) => o.value === value)) !== null && _a !== void 0 ? _a : null;
+        return options.find((o) => o.value === value) ?? null;
     }
     return value;
 }

package/dist/src/SortingTable/SortingTable.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, { useState } from "react";
 import { Table } from "../Table";
 const numericAlphabeticalSort = (a, b, numeric) => String(a).localeCompare(b, undefined, { numeric, sensitivity: "base" });
@@ -23,8 +12,7 @@ function sortRows(rows, columns, sortState) {
     const sortedRows = applySort(rows, sortState.sortColumn, columns);
     return sortState.ascending ? sortedRows : sortedRows.reverse();
 }
-function SortingTable(_a) {
-    var { columns: incomingColumns, rows: incomingRows, initialSortColumn } = _a, props = __rest(_a, ["columns", "rows", "initialSortColumn"]);
+function SortingTable({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }) {
     const [sortState, setSortState] = useState({
         ascending: true,
         sortColumn: initialSortColumn,
@@ -41,9 +29,12 @@ function SortingTable(_a) {
     };
     const transformColumn = (column) => {
         const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
-        return Object.assign(Object.assign({}, column), { headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })) });
+        return {
+            ...column,
+            headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })),
+        };
     };
     const columns = incomingColumns.map((column) => transformColumn(column));
-    return React.createElement(Table, Object.assign({ columns: columns, rows: rows }, props));
+    return React.createElement(Table, { columns: columns, rows: rows, ...props });
 }
 export default SortingTable;

package/dist/src/StatusIndicator/StatusIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpaceProps, TypographyProps, FlexboxProps } from "styled-system";
 export declare const StatusIndicatorValues: {
     readonly neutral: "neutral";

package/dist/src/StatusIndicator/StatusIndicator.js

@@ -47,5 +47,20 @@ const statusIndicatorStyles = (theme) => ({
         color: theme.colors.darkGrey,
     },
 });
-const StatusIndicator = styled.span(({ theme, type = StatusIndicatorValues.neutral }) => (Object.assign({ margin: theme.space.none, paddingTop: theme.space.none, paddingRight: theme.space.x1, paddingBottom: theme.space.none, paddingLeft: theme.space.x1, fontSize: theme.fontSizes.smaller, lineHeight: theme.lineHeights.smallerText, alignSelf: "center", display: "inline-block", fontWeight: theme.fontWeights.bold, textTransform: "uppercase", letterSpacing: ".05em", borderRadius: theme.space.x1 }, statusIndicatorStyles(theme)[type])), space, typography, flexbox);
+const StatusIndicator = styled.span(({ theme, type = StatusIndicatorValues.neutral }) => ({
+    margin: theme.space.none,
+    paddingTop: theme.space.none,
+    paddingRight: theme.space.x1,
+    paddingBottom: theme.space.none,
+    paddingLeft: theme.space.x1,
+    fontSize: theme.fontSizes.smaller,
+    lineHeight: theme.lineHeights.smallerText,
+    alignSelf: "center",
+    display: "inline-block",
+    fontWeight: theme.fontWeights.bold,
+    textTransform: "uppercase",
+    letterSpacing: ".05em",
+    borderRadius: theme.space.x1,
+    ...statusIndicatorStyles(theme)[type],
+}), space, typography, flexbox);
 export default StatusIndicator;

package/dist/src/Summary/Summary.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 numberFromDimension from "../utils/numberFromDimension";
@@ -32,12 +21,11 @@ const SummaryWrapper = styled(Box)(({ theme, breakpoint }) => ({
         rowGap: 0,
     },
 }));
-const Summary = (_a) => {
-    var { breakpoint, children } = _a, rest = __rest(_a, ["breakpoint", "children"]);
+const Summary = ({ breakpoint, children, ...rest }) => {
     const theme = useTheme();
     breakpoint || (breakpoint = theme.breakpoints.medium);
     const breakpointPx = numberFromDimension(breakpoint);
     return (React.createElement(SummaryContextProvider, { breakpoint: breakpointPx },
-        React.createElement(SummaryWrapper, Object.assign({ breakpoint: breakpointPx }, rest), children)));
+        React.createElement(SummaryWrapper, { breakpoint: breakpointPx, ...rest }, children)));
 };
 export default Summary;

package/dist/src/Summary/SummaryDivider.js

@@ -16,6 +16,6 @@ const Divider = styled(Box)(({ theme, breakpoint }) => ({
 }));
 const SummaryDivider = (props) => {
     const { breakpoint } = useSummaryContext();
-    return React.createElement(Divider, Object.assign({ breakpoint: numberFromDimension(breakpoint) }, props));
+    return React.createElement(Divider, { breakpoint: numberFromDimension(breakpoint), ...props });
 };
 export default SummaryDivider;

package/dist/src/Summary/SummaryItem.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 { Flex } from "../Flex";
@@ -22,12 +11,11 @@ const SummaryItemWrapper = styled(Flex)(({ theme, breakpoint }) => ({
         flexDirection: "row",
     },
 }));
-const SummaryItem = (_a) => {
-    var { value, status } = _a, rest = __rest(_a, ["value", "status"]);
+const SummaryItem = ({ value, status, ...rest }) => {
     const { breakpoint } = useSummaryContext();
     const matches = useMediaQuery(`(max-width: ${breakpoint}px)`);
     delete rest["children"];
-    return (React.createElement(SummaryItemWrapper, Object.assign({ breakpoint: breakpoint }, rest),
+    return (React.createElement(SummaryItemWrapper, { breakpoint: breakpoint, ...rest },
         React.createElement(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined }, value),
         status));
 };

package/dist/src/Switcher/Switch.js

@@ -1,30 +1,34 @@
-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 { variant } from "styled-system";
 import numberFromDimension from "../utils/numberFromDimension";
-const Switch = React.forwardRef((_a, ref) => {
-    var { children } = _a, rest = __rest(_a, ["children"]);
-    return (React.createElement(SwitchButton, Object.assign({}, rest, { ref: ref }), children));
+const Switch = React.forwardRef(({ children, ...rest }, ref) => {
+    return (React.createElement(SwitchButton, { ...rest, ref: ref }, children));
 });
-const SwitchButton = styled.button(({ selected, theme }) => (Object.assign(Object.assign(Object.assign({ margin: 1, background: selected ? theme.colors.white : "none", color: selected ? theme.colors.darkBlue : theme.colors.darkGrey, cursor: "pointer", border: "none", borderRadius: theme.radii.rounded, fontSize: theme.fontSizes.base, fontWeight: theme.fontWeights.medium, lineHeight: theme.lineHeights.base, textDecoration: "none", whiteSpace: "nowrap", padding: `${numberFromDimension(theme.space.half) - 1}px ${theme.space.x2}` }, (selected && { boxShadow: theme.shadows.small })), { "&:focus": {
+const SwitchButton = styled.button(({ selected, theme }) => ({
+    margin: 1,
+    background: selected ? theme.colors.white : "none",
+    color: selected ? theme.colors.darkBlue : theme.colors.darkGrey,
+    cursor: "pointer",
+    border: "none",
+    borderRadius: theme.radii.rounded,
+    fontSize: theme.fontSizes.base,
+    fontWeight: theme.fontWeights.medium,
+    lineHeight: theme.lineHeights.base,
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+    padding: `${numberFromDimension(theme.space.half) - 1}px ${theme.space.x2}`,
+    ...(selected && { boxShadow: theme.shadows.small }),
+    "&:focus": {
         outline: "none",
         boxShadow: theme.shadows.focus,
-    } }), (!selected && {
-    "&:hover": {
-        backgroundColor: theme.colors.lightGrey,
     },
-}))), variant({
+    ...(!selected && {
+        "&:hover": {
+            backgroundColor: theme.colors.lightGrey,
+        },
+    }),
+}), variant({
     variants: {
         touch: {
             fontSize: "md",

package/dist/src/Switcher/Switcher.js

@@ -1,20 +1,8 @@
-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";
 import FocusManager from "../utils/ts/FocusManager";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-const Switcher = (_a) => {
-    var { variant, selected, onChange } = _a, rest = __rest(_a, ["variant", "selected", "onChange"]);
+const Switcher = ({ variant, selected, onChange, ...rest }) => {
     const componentVariant = useComponentVariant(variant);
     const optionRefs = [];
     const isSelected = (value, index) => {
@@ -23,7 +11,7 @@ const Switcher = (_a) => {
         return value === selected;
     };
     const getSelectedIndex = () => {
-        return React.Children.toArray(rest.children).findIndex((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value) === selected; });
+        return React.Children.toArray(rest.children).findIndex((child) => child?.props?.value === selected);
     };
     const options = (focusedIndex, setFocusedIndex, handleArrowNavigation) => {
         return React.Children.map(rest.children, (child, index) => {
@@ -42,12 +30,12 @@ const Switcher = (_a) => {
                 onClick: (e) => {
                     setFocusedIndex(index);
                     if (onChange)
-                        onChange(e.target.value);
+                        onChange(e.currentTarget.value);
                 },
             });
         });
     };
-    return (React.createElement(Box, Object.assign({ display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px" }, rest),
+    return (React.createElement(Box, { display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px", ...rest },
         React.createElement(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation))));
 };
 export default Switcher;