@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Select/lib.js

@@ -0,0 +1,85 @@
+import * as React from "react";
+export function calcOptionsLength(options) {
+    options = options || [];
+    const head = options[0] || {};
+    const isGrouped = head.options !== undefined;
+    return isGrouped ? options.reduce((result, group) => result + group.options.length, 0) : options.length;
+}
+export function flattenGroupedChildren(children) {
+    return children.reduce((result, child) => {
+        if (child.props.children != null && typeof child.props.children === "string") {
+            return [...result, child];
+        }
+        else {
+            const { props: { children: nestedChildren = [] }, } = child;
+            return [...result, React.cloneElement(child, { type: "group" }, []), ...nestedChildren];
+        }
+    }, []);
+}
+export function isFocused({ props: { isFocused } }) {
+    return isFocused === true;
+}
+export function getCurrentIndex(children) {
+    return Math.max(children.findIndex(isFocused), 0);
+}
+export function createGetHeight({ groupHeadingStyles, noOptionsMsgStyles, optionStyles, loadingMsgStyles }) {
+    return function getHeight(child) {
+        const { props: { type, children, inputValue, selectProps: { noOptionsMessage, loadingMessage }, }, } = child;
+        if (type === "group") {
+            const { height = 25 } = groupHeadingStyles;
+            return height;
+        }
+        else if (type === "option") {
+            const { height = 35 } = optionStyles;
+            return height;
+        }
+        else if (typeof noOptionsMessage === "function" && children === noOptionsMessage({ inputValue })) {
+            const { height = 35 } = noOptionsMsgStyles;
+            return height;
+        }
+        else if (typeof loadingMessage === "function" && children === loadingMessage({ inputValue })) {
+            const { height = 35 } = loadingMsgStyles;
+            return height;
+        }
+        else {
+            return 35;
+        }
+    };
+}
+export function checkOptionsAreValid(options) {
+    if (options && process.env.NODE_ENV === "development") {
+        const uniq = (a) => Array.from(new Set(a));
+        const uniqueValues = uniq(options.map(({ value }) => (value === null ? "_null_" : value)));
+        if (uniqueValues.length < options.length) {
+            console.warn("NDS: The options prop passed to Select must have unique values for each option", 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 value;
+}
+export function getReactSelectValue(options, input) {
+    if (Array.isArray(input)) {
+        return input.map((i) => getOption(options, i));
+    }
+    return getOption(options, input);
+}
+export function extractValue(options, isMulti) {
+    if (options === null) {
+        return null;
+    }
+    if (!Array.isArray(options)) {
+        return options.value;
+    }
+    if (isMulti) {
+        return (options && options.length ? options.map((o) => o.value) : []);
+    }
+    throw new Error("UNEXPECTED ERROR: don't forget to enable isMulti");
+}

package/dist/src/SortingTable/SortingTable.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import type { TableProps } from "../Table";
-type SortingTableProps<ColumnMetadata> = TableProps<ColumnMetadata> & {
-    initialSortColumn: string;
-};
-declare function SortingTable<ColumnMetadata>({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }: SortingTableProps<ColumnMetadata>): React.JSX.Element;
-export default SortingTable;
+import React from "react";
+import type { TableProps } from "../Table";
+type SortingTableProps<ColumnMetadata> = TableProps<ColumnMetadata> & {
+    initialSortColumn: string;
+};
+declare function SortingTable<ColumnMetadata>({ columns: incomingColumns, rows: incomingRows, initialSortColumn, ...props }: SortingTableProps<ColumnMetadata>): React.JSX.Element;
+export default SortingTable;

package/dist/src/SortingTable/SortingTable.js

@@ -0,0 +1,49 @@
+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" });
+function applySort(rows, sortColumn, columns) {
+    return [...rows].sort((a, b) => {
+        const column = columns.find((col) => col.dataKey === sortColumn);
+        const { numeric } = column;
+        return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
+    });
+}
+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"]);
+    const [sortState, setSortState] = useState({
+        ascending: true,
+        sortColumn: initialSortColumn,
+    });
+    const [rows, setRows] = useState(() => sortRows(incomingRows, incomingColumns, sortState));
+    const onSortChange = (dataKey) => {
+        let newSortState;
+        setSortState((previousState) => {
+            const ascending = previousState.sortColumn !== dataKey || !previousState.ascending;
+            newSortState = { ascending, sortColumn: dataKey };
+            return newSortState;
+        });
+        setRows((previousState) => sortRows(previousState, incomingColumns, newSortState));
+    };
+    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 })) });
+    };
+    const columns = incomingColumns.map((column) => transformColumn(column));
+    return React.createElement(Table, Object.assign({ columns: columns, rows: rows }, props));
+}
+export default SortingTable;

package/dist/src/SortingTable/SortingTable.story.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { SortingTable } from ".";
-declare const _default: {
-    title: string;
-    component: typeof SortingTable;
-};
-export default _default;
-export declare const _SortingTable: () => React.JSX.Element;
+import React from "react";
+import { SortingTable } from ".";
+declare const _default: {
+    title: string;
+    component: typeof SortingTable;
+};
+export default _default;
+export declare const _SortingTable: () => React.JSX.Element;

package/dist/src/SortingTable/SortingTable.story.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { SortingTable } from ".";
+const COLUMNS = [
+    { label: "Name", dataKey: "name" },
+    { label: "Population (x 1000)", dataKey: "population", numeric: true },
+];
+const ROWS = [
+    { name: "Antelope", population: "50" },
+    { name: "Dingo", population: "180" },
+    { name: "Chimpanzee", population: "170" },
+    { name: "Iguana", population: "4000" },
+    { name: "Hippopotamus", population: "100" },
+    { name: "Flamingo", population: "200" },
+    { name: "Giraffe", population: "120" },
+    { name: "Black Bear", population: "100" },
+    { name: "Elephant", population: "130" },
+];
+const INITIAL_SORT_COLUMN = "name";
+const KEY_FIELD = "name";
+export default {
+    title: "Components/SortingTable",
+    component: SortingTable,
+};
+export const _SortingTable = () => (React.createElement(SortingTable, { columns: COLUMNS, rows: ROWS, keyField: KEY_FIELD, initialSortColumn: INITIAL_SORT_COLUMN }));

package/dist/src/SortingTable/index.d.ts

@@ -1 +1 @@
-export { default as SortingTable } from "./SortingTable";
+export { default as SortingTable } from "./SortingTable";

package/dist/src/SortingTable/index.js

@@ -0,0 +1 @@
+export { default as SortingTable } from "./SortingTable";

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

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { SpaceProps, TypographyProps, FlexboxProps } from "styled-system";
-export declare const StatusIndicatorValues: {
-    readonly neutral: "neutral";
-    readonly dark: "dark";
-    readonly danger: "danger";
-    readonly informative: "informative";
-    readonly success: "success";
-    readonly warning: "warning";
-    readonly quiet: "quiet";
-};
-export type StatusIndicatorType = (typeof StatusIndicatorValues)[keyof typeof StatusIndicatorValues];
-interface Props extends SpaceProps, TypographyProps, FlexboxProps {
-    type?: StatusIndicatorType;
-}
-declare const StatusIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Props>> & string;
-export default StatusIndicator;
+/// <reference types="react" />
+import { SpaceProps, TypographyProps, FlexboxProps } from "styled-system";
+export declare const StatusIndicatorValues: {
+    readonly neutral: "neutral";
+    readonly dark: "dark";
+    readonly danger: "danger";
+    readonly informative: "informative";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly quiet: "quiet";
+};
+export type StatusIndicatorType = (typeof StatusIndicatorValues)[keyof typeof StatusIndicatorValues];
+interface Props extends SpaceProps, TypographyProps, FlexboxProps {
+    type?: StatusIndicatorType;
+}
+declare const StatusIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Props>> & string;
+export default StatusIndicator;

package/dist/src/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+import { space, typography, flexbox } from "styled-system";
+export const StatusIndicatorValues = {
+    neutral: "neutral",
+    dark: "dark",
+    danger: "danger",
+    informative: "informative",
+    success: "success",
+    warning: "warning",
+    quiet: "quiet",
+};
+const statusIndicatorStyles = (theme) => ({
+    [StatusIndicatorValues.neutral]: {
+        borderColor: theme.colors.lightGrey,
+        backgroundColor: theme.colors.lightGrey,
+        color: theme.colors.darkGrey,
+    },
+    [StatusIndicatorValues.dark]: {
+        borderColor: theme.colors.blackBlue,
+        backgroundColor: theme.colors.blackBlue,
+        color: theme.colors.white,
+    },
+    [StatusIndicatorValues.quiet]: {
+        border: "1px solid",
+        borderColor: theme.colors.grey,
+        backgroundColor: theme.colors.white,
+        color: theme.colors.darkGrey,
+    },
+    [StatusIndicatorValues.danger]: {
+        borderColor: theme.colors.red,
+        backgroundColor: theme.colors.red,
+        color: theme.colors.white,
+    },
+    [StatusIndicatorValues.informative]: {
+        borderColor: theme.colors.blue,
+        backgroundColor: theme.colors.blue,
+        color: theme.colors.white,
+    },
+    [StatusIndicatorValues.success]: {
+        borderColor: theme.colors.green,
+        backgroundColor: theme.colors.green,
+        color: theme.colors.white,
+    },
+    [StatusIndicatorValues.warning]: {
+        borderColor: theme.colors.yellow,
+        backgroundColor: theme.colors.yellow,
+        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);
+export default StatusIndicator;

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

@@ -1,25 +1,25 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const All: () => React.JSX.Element;
-export declare const Neutral: () => React.JSX.Element;
-export declare const Dark: () => React.JSX.Element;
-export declare const Quiet: () => React.JSX.Element;
-export declare const Informative: () => React.JSX.Element;
-export declare const Success: () => React.JSX.Element;
-export declare const Warning: () => React.JSX.Element;
-export declare const Danger: () => React.JSX.Element;
-export declare const FollowingText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const InsideFlex: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const All: () => React.JSX.Element;
+export declare const Neutral: () => React.JSX.Element;
+export declare const Dark: () => React.JSX.Element;
+export declare const Quiet: () => React.JSX.Element;
+export declare const Informative: () => React.JSX.Element;
+export declare const Success: () => React.JSX.Element;
+export declare const Warning: () => React.JSX.Element;
+export declare const Danger: () => React.JSX.Element;
+export declare const FollowingText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const InsideFlex: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/StatusIndicator/StatusIndicator.story.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { Text, Heading2, Heading3 } from "../Type";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { StatusIndicator } from "./";
+export default {
+    title: "Components/StatusIndicator",
+};
+export const All = () => (React.createElement(React.Fragment, null,
+    React.createElement(StatusIndicator, { type: "neutral", mr: "half" }, "Neutral"),
+    React.createElement(StatusIndicator, { type: "dark", mr: "half" }, "Dark"),
+    React.createElement(StatusIndicator, { type: "quiet", mr: "half" }, "Quiet"),
+    React.createElement(StatusIndicator, { type: "informative", mr: "half" }, "Informative"),
+    React.createElement(StatusIndicator, { type: "success", mr: "half" }, "Success"),
+    React.createElement(StatusIndicator, { type: "warning", mr: "half" }, "Warning"),
+    React.createElement(StatusIndicator, { type: "danger", mr: "half" }, "Danger")));
+export const Neutral = () => React.createElement(StatusIndicator, { type: "neutral" }, "Neutral");
+export const Dark = () => React.createElement(StatusIndicator, { type: "dark" }, "Dark");
+export const Quiet = () => React.createElement(StatusIndicator, { type: "quiet" }, "Quiet");
+export const Informative = () => React.createElement(StatusIndicator, { type: "informative" }, "Informative");
+export const Success = () => React.createElement(StatusIndicator, { type: "success" }, "Success");
+export const Warning = () => React.createElement(StatusIndicator, { type: "warning" }, "Warning");
+export const Danger = () => React.createElement(StatusIndicator, { type: "danger" }, "Danger");
+export const FollowingText = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { mb: "x3" },
+        React.createElement(Heading2, { inline: true, mr: "x1" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Box, { mb: "x3" },
+        React.createElement(Heading3, { inline: true, mr: "x1" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Box, { mb: "x3" },
+        React.createElement(Text, { inline: true, mr: "x1" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Box, { mb: "x3" },
+        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Box, { mb: "x3" },
+        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Box, { mb: "x3" },
+        React.createElement(Text, { inline: true, mr: "x1" }, "Long label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend metus, in tempus sapien. Morbi eget felis est. Nunc facilisis vel nisi nec ornare. Ut blandit ullamcorper enim sed fringilla. Quisque malesuada pharetra tincidunt. Mauris mauris tortor, maximus vitae tempor ac, tincidunt pharetra augue. In eget suscipit est. Suspendisse feugiat risus urna"),
+        React.createElement(StatusIndicator, null, "Status"))));
+FollowingText.story = {
+    name: "Following text",
+};
+export const InsideFlex = () => (React.createElement(React.Fragment, null,
+    React.createElement(Flex, { mb: "x3" },
+        React.createElement(Heading2, { inline: true, mr: "x1", mb: "0" }, "Label"),
+        React.createElement(StatusIndicator, { className: "my-test-classname" }, "Status")),
+    React.createElement(Flex, { mb: "x3" },
+        React.createElement(Heading3, { inline: true, mr: "x1", mb: "0" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Flex, { mb: "x3" },
+        React.createElement(Text, { inline: true, mr: "x1", mb: "0" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Flex, { mb: "x3" },
+        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", mb: "0" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status")),
+    React.createElement(Flex, { mb: "x3" },
+        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", mb: "0" }, "Label"),
+        React.createElement(StatusIndicator, null, "Status"))));
+InsideFlex.story = {
+    name: "Inside flex",
+};

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

@@ -1,2 +1,2 @@
-export { default as StatusIndicator, StatusIndicatorValues } from "./StatusIndicator";
-export type { StatusIndicatorType } from "./StatusIndicator";
+export { default as StatusIndicator, StatusIndicatorValues } from "./StatusIndicator";
+export type { StatusIndicatorType } from "./StatusIndicator";

package/dist/src/StatusIndicator/index.js

@@ -0,0 +1 @@
+export { default as StatusIndicator, StatusIndicatorValues } from "./StatusIndicator";

package/dist/src/StyledProps/index.d.ts

@@ -1,39 +1,39 @@
-import { styleFn, variant as styledSystemVariant } from "styled-system";
-import type { SpaceProps, PaddingProps, MarginProps, WidthProps, FontSizeProps, FontFamilyProps, TextAlignProps, LineHeightProps, FontWeightProps, FontStyleProps, LetterSpacingProps, DisplayProps, MaxWidthProps, MinWidthProps, HeightProps, MaxHeightProps, MinHeightProps, SizeProps, VerticalAlignProps, AlignItemsProps, AlignContentProps, JustifyItemsProps, JustifyContentProps, FlexWrapProps, FlexBasisProps, FlexDirectionProps, FlexProps, JustifySelfProps, AlignSelfProps, OrderProps, GridGapProps, GridColumnGapProps, GridRowGapProps, GridColumnProps, GridRowProps, GridAutoFlowProps, GridAutoColumnsProps, GridAutoRowsProps, GridTemplateColumnsProps, GridTemplateRowsProps, GridTemplateAreasProps, GridAreaProps, BorderProps, BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps, BordersProps, BorderColorProps, BorderRadiusProps, BoxShadowProps, OpacityProps, OverflowProps, BackgroundProps, BackgroundImageProps, BackgroundPositionProps, BackgroundRepeatProps, BackgroundSizeProps, PositionProps, ZIndexProps, TopProps, RightProps, BottomProps, LeftProps, TextStyleProps, ColorStyleProps, ButtonStyleProps, FlexboxProps, GridProps, BackgroundColorProps, FlexGrowProps, TypographyProps, LayoutProps } from "styled-system";
-import { CSSProperties } from "react";
-export interface GapProps {
-    gap?: CSSProperties["gap"];
-    rowGap?: CSSProperties["rowGap"];
-    columnGap?: CSSProperties["columnGap"];
-}
-export declare const gap: styleFn;
-export declare function getStyledPropNames(...styleFns: styleFn[]): string[];
-export declare const excludeStyledProps: (...styleFns: styleFn[]) => (prop: string | number) => boolean;
-export declare const variant: typeof styledSystemVariant;
-export declare const addStyledProps: styleFn;
-interface TransitionProps {
-    transition?: CSSProperties["transition"];
-    transitionDelay?: CSSProperties["transitionDelay"];
-    transitionProperty?: CSSProperties["transition"];
-    transitionDuration?: CSSProperties["transitionDuration"];
-    transitionTimingFunction?: CSSProperties["transitionTimingFunction"];
-}
-interface TransformProps {
-    transform?: CSSProperties["transform"];
-    transformOrigin?: CSSProperties["transformOrigin"];
-    transformStyle?: CSSProperties["transformStyle"];
-    transformBox?: CSSProperties["transformBox"];
-}
-export type TextOverflowProps = {
-    whiteSpace?: CSSProperties["whiteSpace"];
-    textOverflow?: CSSProperties["textOverflow"];
-};
-export type VisibilityProps = {
-    visibility?: CSSProperties["visibility"];
-};
-export type CursorProps = {
-    cursor?: CSSProperties["cursor"];
-};
-export interface StyledProps extends SpaceProps, BackgroundColorProps, LayoutProps, FlexGrowProps, TypographyProps, MarginProps, PaddingProps, WidthProps, FontSizeProps, FontFamilyProps, TextAlignProps, LineHeightProps, FontWeightProps, FontStyleProps, LetterSpacingProps, DisplayProps, MaxWidthProps, MinWidthProps, HeightProps, MaxHeightProps, MinHeightProps, SizeProps, VerticalAlignProps, AlignItemsProps, AlignContentProps, JustifyItemsProps, JustifyContentProps, FlexWrapProps, FlexBasisProps, FlexDirectionProps, FlexProps, FlexboxProps, JustifySelfProps, AlignSelfProps, OrderProps, GridProps, GridGapProps, GridColumnGapProps, GridRowGapProps, GridColumnProps, GridRowProps, GridAutoFlowProps, GridAutoColumnsProps, GridAutoRowsProps, GridTemplateColumnsProps, GridTemplateRowsProps, GridTemplateAreasProps, GridAreaProps, BorderProps, BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps, BordersProps, BorderRadiusProps, BoxShadowProps, OpacityProps, OverflowProps, BorderColorProps, BackgroundProps, PositionProps, ZIndexProps, TopProps, RightProps, BottomProps, LeftProps, TextStyleProps, ColorStyleProps, ButtonStyleProps, TransitionProps, TransformProps, BackgroundImageProps, BackgroundPositionProps, BackgroundRepeatProps, BackgroundSizeProps, TextOverflowProps, VisibilityProps, CursorProps, GapProps {
-}
-export {};
+import { styleFn, variant as styledSystemVariant } from "styled-system";
+import type { SpaceProps, PaddingProps, MarginProps, WidthProps, FontSizeProps, FontFamilyProps, TextAlignProps, LineHeightProps, FontWeightProps, FontStyleProps, LetterSpacingProps, DisplayProps, MaxWidthProps, MinWidthProps, HeightProps, MaxHeightProps, MinHeightProps, SizeProps, VerticalAlignProps, AlignItemsProps, AlignContentProps, JustifyItemsProps, JustifyContentProps, FlexWrapProps, FlexBasisProps, FlexDirectionProps, FlexProps, JustifySelfProps, AlignSelfProps, OrderProps, GridGapProps, GridColumnGapProps, GridRowGapProps, GridColumnProps, GridRowProps, GridAutoFlowProps, GridAutoColumnsProps, GridAutoRowsProps, GridTemplateColumnsProps, GridTemplateRowsProps, GridTemplateAreasProps, GridAreaProps, BorderProps, BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps, BordersProps, BorderColorProps, BorderRadiusProps, BoxShadowProps, OpacityProps, OverflowProps, BackgroundProps, BackgroundImageProps, BackgroundPositionProps, BackgroundRepeatProps, BackgroundSizeProps, PositionProps, ZIndexProps, TopProps, RightProps, BottomProps, LeftProps, TextStyleProps, ColorStyleProps, ButtonStyleProps, FlexboxProps, GridProps, BackgroundColorProps, FlexGrowProps, TypographyProps, LayoutProps } from "styled-system";
+import { CSSProperties } from "react";
+export interface GapProps {
+    gap?: CSSProperties["gap"];
+    rowGap?: CSSProperties["rowGap"];
+    columnGap?: CSSProperties["columnGap"];
+}
+export declare const gap: styleFn;
+export declare function getStyledPropNames(...styleFns: styleFn[]): string[];
+export declare const excludeStyledProps: (...styleFns: styleFn[]) => (prop: string | number) => boolean;
+export declare const variant: typeof styledSystemVariant;
+export declare const addStyledProps: styleFn;
+interface TransitionProps {
+    transition?: CSSProperties["transition"];
+    transitionDelay?: CSSProperties["transitionDelay"];
+    transitionProperty?: CSSProperties["transition"];
+    transitionDuration?: CSSProperties["transitionDuration"];
+    transitionTimingFunction?: CSSProperties["transitionTimingFunction"];
+}
+interface TransformProps {
+    transform?: CSSProperties["transform"];
+    transformOrigin?: CSSProperties["transformOrigin"];
+    transformStyle?: CSSProperties["transformStyle"];
+    transformBox?: CSSProperties["transformBox"];
+}
+export type TextOverflowProps = {
+    whiteSpace?: CSSProperties["whiteSpace"];
+    textOverflow?: CSSProperties["textOverflow"];
+};
+export type VisibilityProps = {
+    visibility?: CSSProperties["visibility"];
+};
+export type CursorProps = {
+    cursor?: CSSProperties["cursor"];
+};
+export interface StyledProps extends SpaceProps, BackgroundColorProps, LayoutProps, FlexGrowProps, TypographyProps, MarginProps, PaddingProps, WidthProps, FontSizeProps, FontFamilyProps, TextAlignProps, LineHeightProps, FontWeightProps, FontStyleProps, LetterSpacingProps, DisplayProps, MaxWidthProps, MinWidthProps, HeightProps, MaxHeightProps, MinHeightProps, SizeProps, VerticalAlignProps, AlignItemsProps, AlignContentProps, JustifyItemsProps, JustifyContentProps, FlexWrapProps, FlexBasisProps, FlexDirectionProps, FlexProps, FlexboxProps, JustifySelfProps, AlignSelfProps, OrderProps, GridProps, GridGapProps, GridColumnGapProps, GridRowGapProps, GridColumnProps, GridRowProps, GridAutoFlowProps, GridAutoColumnsProps, GridAutoRowsProps, GridTemplateColumnsProps, GridTemplateRowsProps, GridTemplateAreasProps, GridAreaProps, BorderProps, BorderTopProps, BorderRightProps, BorderBottomProps, BorderLeftProps, BordersProps, BorderRadiusProps, BoxShadowProps, OpacityProps, OverflowProps, BorderColorProps, BackgroundProps, PositionProps, ZIndexProps, TopProps, RightProps, BottomProps, LeftProps, TextStyleProps, ColorStyleProps, ButtonStyleProps, TransitionProps, TransformProps, BackgroundImageProps, BackgroundPositionProps, BackgroundRepeatProps, BackgroundSizeProps, TextOverflowProps, VisibilityProps, CursorProps, GapProps {
+}
+export {};

package/dist/src/StyledProps/index.js

@@ -0,0 +1,36 @@
+import { useTheme } from "styled-components";
+import { space, margin, padding, width, fontSize, color, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, maxWidth, minWidth, height, maxHeight, minHeight, size, verticalAlign, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexDirection, flex, justifySelf, alignSelf, order, gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea, border, borderTop, borderRight, borderBottom, borderLeft, borders, borderColor, borderRadius, boxShadow, opacity, overflow, background, position, zIndex, top, right, bottom, left, textStyle, colorStyle, buttonStyle, compose, layout, flexGrow, system, flexbox, grid, typography, backgroundSize, backgroundRepeat, backgroundPosition, backgroundImage, variant as styledSystemVariant, } from "styled-system";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+export const gap = system({
+    gap: {
+        property: "gap",
+        scale: "space",
+    },
+    rowGap: {
+        property: "rowGap",
+        scale: "space",
+    },
+    columnGap: {
+        property: "columnGap",
+        scale: "space",
+    },
+});
+export function getStyledPropNames(...styleFns) {
+    return styleFns.reduce((acc, fn) => (fn.propNames ? acc.concat(fn.propNames) : acc), []);
+}
+export const excludeStyledProps = (...styleFns) => (prop) => !getStyledPropNames(...styleFns).includes(String(prop));
+export const variant = (variants) => () => {
+    const componentVariant = useComponentVariant();
+    const theme = useTheme();
+    return styledSystemVariant(variants)({ theme, variant: componentVariant });
+};
+export const addStyledProps = compose(
+// After
+space, margin, padding, width, fontSize, color, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, maxWidth, minWidth, height, maxHeight, minHeight, size, verticalAlign, alignItems, alignContent, justifyItems, justifyContent, flexWrap, flexBasis, flexDirection, flex, flexbox, justifySelf, alignSelf, order, grid, gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea, border, borderTop, borderRight, borderBottom, borderLeft, borders, borderColor, borderRadius, boxShadow, opacity, overflow, position, zIndex, top, right, bottom, left, textStyle, colorStyle, buttonStyle, background, backgroundSize, backgroundRepeat, backgroundPosition, backgroundImage, layout, flexGrow, typography, gap, system({
+    visibility: true,
+    transition: true,
+    transform: true,
+    whiteSpace: true,
+    textOverflow: true,
+    cursor: true,
+}));

package/dist/src/Summary/Summary.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import { BoxProps } from "../Box/Box";
-type SummaryProps = Omit<BoxProps, "as"> & {
-    breakpoint?: number | string;
-};
-declare const Summary: React.FC<React.PropsWithChildren<SummaryProps>>;
-export default Summary;
+import React from "react";
+import { BoxProps } from "../Box/Box";
+type SummaryProps = Omit<BoxProps, "as"> & {
+    breakpoint?: number | string;
+};
+declare const Summary: React.FC<React.PropsWithChildren<SummaryProps>>;
+export default Summary;

package/dist/src/Summary/Summary.js

@@ -0,0 +1,43 @@
+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";
+import { Box } from "../Box";
+import { SummaryContextProvider } from "./SummaryContext";
+const SummaryWrapper = styled(Box)(({ theme, breakpoint }) => ({
+    display: "flex",
+    background: theme.colors.white,
+    gap: theme.space.x2,
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+    paddingLeft: theme.space.x2,
+    paddingRight: theme.space.x2,
+    borderRadius: theme.radii.medium,
+    width: "fit-content",
+    [`@media (max-width: ${breakpoint}px)`]: {
+        background: "none",
+        flexFlow: "wrap",
+        padding: 0,
+        paddingTop: theme.space.x2,
+        rowGap: 0,
+    },
+}));
+const Summary = (_a) => {
+    var { breakpoint, children } = _a, rest = __rest(_a, ["breakpoint", "children"]);
+    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)));
+};
+export default Summary;

package/dist/src/Summary/Summary.story.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-export declare function Default(): React.JSX.Element;
-export declare function WithMainInfoOnly(): React.JSX.Element;
-declare const _default: {
-    title: string;
-};
-export default _default;
+import React from "react";
+export declare function Default(): React.JSX.Element;
+export declare function WithMainInfoOnly(): React.JSX.Element;
+declare const _default: {
+    title: string;
+};
+export default _default;

package/dist/src/Summary/Summary.story.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { StatusIndicator } from "../StatusIndicator";
+import { Summary, SummaryDivider, SummaryItem } from "..";
+export function Default() {
+    return (React.createElement(Summary, null,
+        React.createElement(SummaryItem, { value: 2, status: React.createElement(StatusIndicator, { type: "danger" }, "Missed") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "warning" }, "Delayed") }),
+        React.createElement(SummaryItem, { value: 139, status: React.createElement(StatusIndicator, { type: "neutral" }, "On Time") }),
+        React.createElement(SummaryDivider, null),
+        React.createElement(SummaryItem, { value: 12, status: React.createElement(StatusIndicator, { type: "success" }, "Delivered") })));
+}
+export function WithMainInfoOnly() {
+    return (React.createElement(Summary, null,
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
+        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") })));
+}
+export default {
+    title: "Components/Summary",
+};