@nulogy/components 15.2.1 → 15.2.3

package/dist/src/FieldLabel/HelpText.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
     disabled?: boolean;
-    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
     fontSize?: string;
 } & import("..").StyledProps, "ref"> & {
     ref?: import("react").Ref<HTMLParagraphElement>;

package/dist/src/FieldLabel/LabelText.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const LabelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export default LabelText;

package/dist/src/FieldLabel/MaybeFieldLabel.js

@@ -1,18 +1,4 @@
-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 FieldLabel from "./FieldLabel";
-const MaybeFieldLabel = (_a) => {
-    var { labelText, children } = _a, props = __rest(_a, ["labelText", "children"]);
-    return labelText ? (React.createElement(FieldLabel, Object.assign({ labelText: labelText }, props), children)) : (React.createElement(React.Fragment, null, children));
-};
+const MaybeFieldLabel = ({ labelText, children, ...props }) => labelText ? (React.createElement(FieldLabel, { labelText: labelText, ...props }, children)) : (React.createElement(React.Fragment, null, children));
 export default MaybeFieldLabel;

package/dist/src/FieldLabel/RequirementText.js

@@ -1,4 +1,4 @@
 import React from "react";
 import { Text } from "../Type";
-const RequirementText = (props) => React.createElement(Text, Object.assign({ inline: true, ml: "x1", fontSize: "smaller", color: "darkGrey" }, props));
+const RequirementText = (props) => React.createElement(Text, { inline: true, ml: "x1", fontSize: "smaller", color: "darkGrey", ...props });
 export default RequirementText;

package/dist/src/Flex/Flex.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from "../Box/Box";
 import type { GapProps } from "../StyledProps";
 export interface FlexProps extends BoxProps, GapProps {

package/dist/src/Flex/Flex.story.js

@@ -1,23 +1,9 @@
-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, Flex as NDSFlex } from "../index";
 import styled from "styled-components";
-const Flex = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(NDSFlex, Object.assign({ padding: "x3", bg: "whiteGrey", minHeight: "400px", style: {
-            boxSizing: "content-box",
-        } }, props), children));
-};
+const Flex = ({ children, ...props }) => (React.createElement(NDSFlex, { padding: "x3", bg: "whiteGrey", minHeight: "400px", style: {
+        boxSizing: "content-box",
+    }, ...props }, children));
 const StyledBox = styled(Box)(({ theme }) => ({
     padding: theme.space.x6,
     background: theme.colors.grey,

package/dist/src/Form/Field.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from "../Box/Box";
 export type FieldProps = BoxProps;
 declare const Field: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, never>> & string;

package/dist/src/Form/Fieldset.d.ts

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

package/dist/src/Form/Form.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 * as React from "react";
 import styled from "styled-components";
 import { space } from "styled-system";
@@ -38,10 +27,7 @@ const FormStyles = ({ title, theme }) => ({
         },
     },
 });
-const Form = styled((_a) => {
-    var { title, children } = _a, props = __rest(_a, ["title", "children"]);
-    return (React.createElement("form", Object.assign({}, props),
-        title && React.createElement(Heading2, null, title),
-        children));
-})(space, FormStyles);
+const Form = styled(({ title, children, ...props }) => (React.createElement("form", { ...props },
+    title && React.createElement(Heading2, null, title),
+    children)))(space, FormStyles);
 export default Form;

package/dist/src/Form/FormSection.js

@@ -1,25 +1,11 @@
-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 { Heading3 } from "../Type";
 import Field from "./Field";
 import Fieldset from "./Fieldset";
-const BaseFormSection = (_a) => {
-    var { title, children } = _a, props = __rest(_a, ["title", "children"]);
-    return (React.createElement("fieldset", Object.assign({}, props),
-        title != null && React.createElement(FormSectionTitle, null, title),
-        children));
-};
+const BaseFormSection = ({ title, children, ...props }) => (React.createElement("fieldset", { ...props },
+    title != null && React.createElement(FormSectionTitle, null, title),
+    children));
 const FormSectionTitle = styled(Heading3).attrs({
     as: "legend",
 })({});

package/dist/src/Icon/Icon.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 { position, space } from "styled-system";
@@ -16,22 +5,18 @@ import icons from "@nulogy/icons";
 import LoadingIcon from "./LoadingIcon";
 const getPathElements = (icon) => (React.createElement(React.Fragment, null, icon.path.map((path, index) => (React.createElement("path", { key: index, d: path })))));
 const ICON_SIZE_RATIO = 1.25;
-const Svg = React.forwardRef((_a, ref) => {
-    var { color: fillColor = "currentColor", className = undefined, title = undefined, size, focusable = false, icon } = _a, props = __rest(_a, ["color", "className", "title", "size", "focusable", "icon"]);
+const Svg = React.forwardRef(({ color: fillColor = "currentColor", className = undefined, title = undefined, size, focusable = false, icon, ...props }, ref) => {
     const theme = useTheme();
     size || (size = theme.sizes.x3);
     if (icon === "loading") {
-        return (React.createElement(LoadingIcon, Object.assign({ ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, focusable: focusable, className: `${className} nds-icon--${icon}` }, props)));
+        return (React.createElement(LoadingIcon, { ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, focusable: focusable, className: `${className} nds-icon--${icon}`, ...props }));
     }
-    return (icons[icon] && (React.createElement("svg", Object.assign({ ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, viewBox: icons[icon].viewBox, focusable: focusable, className: `${className} nds-icon--${icon}` }, props), getPathElements(icons[icon]))));
-});
-const Icon = styled(Svg)(space, ({ theme, color = "currentColor", size }) => {
-    var _a, _b;
-    return ({
-        minWidth: (_b = (_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : size) !== null && _b !== void 0 ? _b : theme.sizes.x3,
-        color: color,
-    });
+    return (icons[icon] && (React.createElement("svg", { ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, viewBox: icons[icon].viewBox, focusable: focusable, className: `${className} nds-icon--${icon}`, ...props }, getPathElements(icons[icon]))));
 });
+const Icon = styled(Svg)(space, ({ theme, color = "currentColor", size }) => ({
+    minWidth: theme.sizes[size] ?? size ?? theme.sizes.x3,
+    color: color,
+}));
 const CenteredIcon = styled(Svg)({
     position: "absolute",
     inset: 0,
@@ -45,8 +30,8 @@ const IconContainer = styled.span(space, {
     width: `${ICON_SIZE_RATIO}em`,
 });
 export const InlineIcon = React.forwardRef((props, ref) => {
-    return (React.createElement(IconContainer, Object.assign({ ref: ref }, props),
-        React.createElement(CenteredIcon, Object.assign({ size: `${ICON_SIZE_RATIO}em` }, props))));
+    return (React.createElement(IconContainer, { ref: ref, ...props },
+        React.createElement(CenteredIcon, { size: `${ICON_SIZE_RATIO}em`, ...props })));
 });
 export const InputIcon = styled(Icon)(({ theme }) => ({
     position: "absolute",

package/dist/src/Icon/LoadingIcon.js

@@ -1,21 +1,9 @@
-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 { useTheme } from "styled-components";
-const LoadingIcon = React.forwardRef((_a, ref) => {
-    var { size } = _a, props = __rest(_a, ["size"]);
+const LoadingIcon = React.forwardRef(({ size, ...props }, ref) => {
     const theme = useTheme();
     size || (size = theme.sizes.x3);
-    return (React.createElement("svg", Object.assign({ ref: ref, viewBox: "0 0 24 24", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" }, props),
+    return (React.createElement("svg", { ref: ref, viewBox: "0 0 24 24", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid", ...props },
         React.createElement("g", null,
             React.createElement("circle", { cx: "3.5", cy: "12", fill: "#C0C8D1", "transform-origin": "3.5 3.5" },
                 React.createElement("animate", { attributeName: "r", values: "3;3;3.5;3", keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" }),

package/dist/src/Input/Input.js

@@ -1,27 +1,15 @@
-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, { forwardRef } from "react";
 import propTypes from "@styled-system/prop-types";
 import { getSubset, omitSubset } from "../utils/subset";
 import { Field } from "../Form";
 import { InlineValidation } from "../Validation";
 import { InputField } from "./InputField";
-const Input = forwardRef((_a, ref) => {
-    var { errorMessage, errorList, className } = _a, props = __rest(_a, ["errorMessage", "errorList", "className"]);
+const Input = forwardRef(({ errorMessage, errorList, className, ...props }, ref) => {
     const spaceProps = getSubset(props, propTypes.space);
     const layoutProps = getSubset(props, propTypes.space);
     const restProps = omitSubset(props, propTypes.space);
-    return (React.createElement(Field, Object.assign({ className: className }, spaceProps, layoutProps),
-        React.createElement(InputField, Object.assign({}, restProps, { error: !!(errorMessage || errorList), ref: ref })),
+    return (React.createElement(Field, { className: className, ...spaceProps, ...layoutProps },
+        React.createElement(InputField, { ...restProps, error: !!(errorMessage || errorList), ref: ref }),
         React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
 });
 export default Input;

package/dist/src/Input/InputField.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, { forwardRef } from "react";
 import styled, { useTheme } from "styled-components";
 import { space, variant } from "styled-system";
@@ -21,8 +10,7 @@ import { Tooltip } from "../Tooltip";
 import { subPx } from "../utils";
 import Prefix from "./Prefix";
 import Suffix from "./Suffix";
-export const InputField = forwardRef((_a, ref) => {
-    var { iconRight, iconLeft, iconRightSize = "x3", iconLeftSize = "x3", iconLeftTooltip, iconRightTooltip, iconLeftTooltipProps, iconRightTooltipProps, error, required, labelText, requirementText, helpText, prefix, prefixWidth, prefixAlignment, suffix, suffixAlignment, suffixWidth, inputWidth, variant, htmlSize } = _a, props = __rest(_a, ["iconRight", "iconLeft", "iconRightSize", "iconLeftSize", "iconLeftTooltip", "iconRightTooltip", "iconLeftTooltipProps", "iconRightTooltipProps", "error", "required", "labelText", "requirementText", "helpText", "prefix", "prefixWidth", "prefixAlignment", "suffix", "suffixAlignment", "suffixWidth", "inputWidth", "variant", "htmlSize"]);
+export const InputField = forwardRef(({ iconRight, iconLeft, iconRightSize = "x3", iconLeftSize = "x3", iconLeftTooltip, iconRightTooltip, iconLeftTooltipProps, iconRightTooltipProps, error, required, labelText, requirementText, helpText, prefix, prefixWidth, prefixAlignment, suffix, suffixAlignment, suffixWidth, inputWidth, variant, htmlSize, ...props }, ref) => {
     const componentVariant = useComponentVariant(variant);
     const theme = useTheme();
     return (React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
@@ -30,11 +18,11 @@ export const InputField = forwardRef((_a, ref) => {
             React.createElement(Prefix, { prefix: prefix, prefixWidth: prefixWidth, textAlign: prefixAlignment }),
             React.createElement(InputWrapper, { maxWidth: inputWidth },
                 iconLeft &&
-                    (iconLeftTooltip ? (React.createElement(Tooltip, Object.assign({ tooltip: iconLeftTooltip }, iconLeftTooltipProps),
+                    (iconLeftTooltip ? (React.createElement(Tooltip, { tooltip: iconLeftTooltip, ...iconLeftTooltipProps },
                         React.createElement(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize }))) : (React.createElement(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize }))),
-                React.createElement(StyledInput, Object.assign({ paddingLeft: iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1, paddingRight: iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1, "aria-invalid": error, "aria-required": required, required: required, error: error, ref: ref, size: htmlSize, variant: componentVariant, inputWidth: inputWidth }, props)),
+                React.createElement(StyledInput, { paddingLeft: iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1, paddingRight: iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1, "aria-invalid": error, "aria-required": required, required: required, error: error, ref: ref, size: htmlSize, variant: componentVariant, inputWidth: inputWidth, ...props }),
                 iconRight &&
-                    (iconRightTooltip ? (React.createElement(Tooltip, Object.assign({ tooltip: iconRightTooltip }, iconRightTooltipProps),
+                    (iconRightTooltip ? (React.createElement(Tooltip, { tooltip: iconRightTooltip, ...iconRightTooltipProps },
                         React.createElement(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize }))) : (React.createElement(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize })))),
             React.createElement(Suffix, { suffix: suffix, suffixWidth: suffixWidth, textAlign: suffixAlignment }))));
 });

package/dist/src/Input/Prefix.js

@@ -1,20 +1,6 @@
-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 { Text } from "../Type";
-const Prefix = (_a) => {
-    var { prefix, prefixWidth } = _a, props = __rest(_a, ["prefix", "prefixWidth"]);
-    return prefix ? (React.createElement(Box, { width: prefixWidth, pt: "x1", pr: "x1", pb: "x1" },
-        React.createElement(Text, Object.assign({}, props), prefix))) : null;
-};
+const Prefix = ({ prefix, prefixWidth, ...props }) => prefix ? (React.createElement(Box, { width: prefixWidth, pt: "x1", pr: "x1", pb: "x1" },
+    React.createElement(Text, { ...props }, prefix))) : null;
 export default Prefix;

package/dist/src/Input/Suffix.js

@@ -1,19 +1,7 @@
-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 { Text } from "../Type";
-export default function Suffix(_a) {
-    var { suffix, suffixWidth } = _a, props = __rest(_a, ["suffix", "suffixWidth"]);
+export default function Suffix({ suffix, suffixWidth, ...props }) {
     return suffix ? (React.createElement(Box, { width: suffixWidth, pt: "x1", pb: "x1", pl: "x1" },
-        React.createElement(Text, Object.assign({}, props), suffix))) : null;
+        React.createElement(Text, { ...props }, suffix))) : null;
 }

package/dist/src/Layout/ApplicationFrame.js

@@ -1,21 +1,9 @@
-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/Box";
 import Flex from "../Flex/Flex";
 import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner";
-const ApplicationFrame = (_a) => {
-    var { navBar, children, environment } = _a, props = __rest(_a, ["navBar", "children", "environment"]);
-    return (React.createElement(Flex, Object.assign({ flexDirection: "column", minHeight: "100vh" }, props),
+const ApplicationFrame = ({ navBar, children, environment, ...props }) => {
+    return (React.createElement(Flex, { flexDirection: "column", minHeight: "100vh", ...props },
         React.createElement(Box, { position: "sticky", top: "0", zIndex: "navBar" },
             environment && React.createElement(EnvironmentBanner, null, environment),
             navBar),

package/dist/src/Layout/Header.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { BoxProps } from "../Box";
 type Breakpoint = string | number;
-interface HeaderProps extends Omit<BoxProps, "title"> {
+export interface HeaderProps extends Omit<BoxProps, "title"> {
     renderBreadcrumbs?: () => ReactNode;
     title?: ReactNode;
     subtitle?: string;

package/dist/src/Layout/Header.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 { useTheme } from "styled-components";
 import { Flex } from "../Flex";
@@ -16,16 +5,14 @@ import { Heading1, Text } from "../Type";
 import useMediaQuery from "../hooks/useMediaQuery";
 import numberFromDimension from "../utils/numberFromDimension";
 import BackgroundTriangles from "../Decorations";
-const Header = (_a) => {
-    var _b, _c;
-    var { background, renderBreadcrumbs, title, undecorated = false, children, subtitle, breakpoints, renderActions, renderSummary } = _a, rest = __rest(_a, ["background", "renderBreadcrumbs", "title", "undecorated", "children", "subtitle", "breakpoints", "renderActions", "renderSummary"]);
+const Header = ({ background, renderBreadcrumbs, title, undecorated = false, children, subtitle, breakpoints, renderActions, renderSummary, ...rest }) => {
     const theme = useTheme();
-    const smallBreakpoint = numberFromDimension((_b = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.small) !== null && _b !== void 0 ? _b : theme.breakpoints.small);
-    const mediumBreakpoint = numberFromDimension((_c = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.medium) !== null && _c !== void 0 ? _c : theme.breakpoints.medium);
+    const smallBreakpoint = numberFromDimension(breakpoints?.small ?? theme.breakpoints.small);
+    const mediumBreakpoint = numberFromDimension(breakpoints?.medium ?? theme.breakpoints.medium);
     const m = useMediaQuery(`(max-width: ${mediumBreakpoint}px)`);
     const sm = useMediaQuery(`(max-width: ${smallBreakpoint}px)`);
     const bg = background ? background : undecorated ? "transparent" : "whiteGrey";
-    return (React.createElement(Flex, Object.assign({ py: "x1", px: "x3", gap: "x2", position: "relative", bg: bg }, rest),
+    return (React.createElement(Flex, { py: "x1", px: "x3", gap: "x2", position: "relative", bg: bg, ...rest },
         React.createElement(Flex, { flexGrow: 3, justifyContent: "space-between", flexDirection: m || sm ? "column" : "row", zIndex: "content" },
             React.createElement(Flex, { flexDirection: "column" },
                 renderBreadcrumbs && renderBreadcrumbs(),

package/dist/src/Layout/Header.story.d.ts

@@ -1,15 +1,7 @@
 import React from "react";
-export declare const Default: () => React.JSX.Element;
-export declare const TitleAsReactElement: () => React.JSX.Element;
-export declare const WithActions: () => React.JSX.Element;
-export declare const WithSubTitle: () => React.JSX.Element;
-export declare const WithContent: () => React.JSX.Element;
-export declare const WithSummary: () => React.JSX.Element;
-export declare const WithAnUndecoratedBackground: () => React.JSX.Element;
-export declare const WithCustomBackground: () => React.JSX.Element;
-export declare const WithEverything: () => React.JSX.Element;
 declare const _default: {
     title: string;
+    component: ({ background, renderBreadcrumbs, title, undecorated, children, subtitle, breakpoints, renderActions, renderSummary, ...rest }: import("./Header").HeaderProps) => React.JSX.Element;
     parameters: {
         layout: string;
         chromatic: {
@@ -18,3 +10,12 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const TitleAsReactElement: () => React.JSX.Element;
+export declare const WithActions: () => React.JSX.Element;
+export declare const WithSubTitle: () => React.JSX.Element;
+export declare const WithContent: () => React.JSX.Element;
+export declare const WithSummary: () => React.JSX.Element;
+export declare const WithAnUndecoratedBackground: () => React.JSX.Element;
+export declare const WithCustomBackground: () => React.JSX.Element;
+export declare const WithEverything: () => React.JSX.Element;

package/dist/src/Layout/Header.story.js

@@ -6,6 +6,15 @@ import SummaryDivider from "../Summary/SummaryDivider";
 import DropdownMenu from "../DropdownMenu/DropdownMenu";
 import numberFromDimension from "../utils/numberFromDimension";
 import { legacy as theme } from "../theme/theme";
+const viewports = [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension);
+export default {
+    title: "Components/Header",
+    component: Header,
+    parameters: {
+        layout: "fullscreen",
+        chromatic: { viewports },
+    },
+};
 export const Default = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
         React.createElement(Link, { href: "/" }, "Home"),
         React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
@@ -60,11 +69,3 @@ export const WithEverything = () => (React.createElement(Header, { breakpoints:
         React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
         React.createElement(DropdownButton, null, "Dropdown Button"))) },
     React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
-const viewports = [theme.breakpoints.small, theme.breakpoints.medium, theme.breakpoints.large].map(numberFromDimension);
-export default {
-    title: "Components/Header",
-    parameters: {
-        layout: "fullscreen",
-        chromatic: { viewports },
-    },
-};

package/dist/src/Layout/Page.js

@@ -1,24 +1,10 @@
-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 { Flex } from "../Flex";
 import Header from "./Header";
-export const Page = (_a) => {
-    var { breadcrumbs, title, children, headerContent, fullHeight, renderHeader } = _a, rest = __rest(_a, ["breadcrumbs", "title", "children", "headerContent", "fullHeight", "renderHeader"]);
-    return (React.createElement(Flex, Object.assign({ flexDirection: "column", flexGrow: fullHeight ? 1 : 0 }, rest),
-        renderHeader
-            ? renderHeader()
-            : (breadcrumbs || title || headerContent) && (React.createElement(Header, { renderBreadcrumbs: () => breadcrumbs, title: title }, headerContent)),
-        React.createElement(Box, { p: "x3" }, children)));
-};
+export const Page = ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }) => (React.createElement(Flex, { flexDirection: "column", flexGrow: fullHeight ? 1 : 0, ...rest },
+    renderHeader
+        ? renderHeader()
+        : (breadcrumbs || title || headerContent) && (React.createElement(Header, { renderBreadcrumbs: () => breadcrumbs, title: title }, headerContent)),
+    React.createElement(Box, { p: "x3" }, children)));
 export default Page;

package/dist/src/Layout/Sidebar.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, { useEffect, useState, useRef } from "react";
 import { AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
@@ -37,15 +26,13 @@ const focusFirstElement = () => {
     }
 };
 const SidebarOverlay = ({ transitionDuration, top, transparent, zIndex = 799, onClick }) => (React.createElement(AnimatedBox, { position: "fixed", top: top, bottom: "0", left: "0", right: "0", zIndex: zIndex, bg: !transparent && "rgba(18, 43, 71, 0.5)", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: transitionDuration }, "data-testid": "sidebar-overlay", onMouseDown: onClick }));
-function Sidebar(_a) {
-    var _b;
-    var { p = "x2", width = "xs", children, onClose, title, isOpen, footer, closeButtonTestId = "sidebar-close-button", closeButtonAriaLabel, offset = "0px", triggerRef, duration = 0.25, top, closeOnOutsideClick = true, overlay = "show", disableScroll = true, hideCloseButton = false, zIndex = "sidebar", helpText, renderHelpText } = _a, props = __rest(_a, ["p", "width", "children", "onClose", "title", "isOpen", "footer", "closeButtonTestId", "closeButtonAriaLabel", "offset", "triggerRef", "duration", "top", "closeOnOutsideClick", "overlay", "disableScroll", "hideCloseButton", "zIndex", "helpText", "renderHelpText"]);
+function Sidebar({ p = "x2", width = "xs", children, onClose, title, isOpen, footer, closeButtonTestId = "sidebar-close-button", closeButtonAriaLabel, offset = "0px", triggerRef, duration = 0.25, top, closeOnOutsideClick = true, overlay = "show", disableScroll = true, hideCloseButton = false, zIndex = "sidebar", helpText, renderHelpText, ...props }) {
     const closeButton = useRef(null);
     const [shouldUpdateFocus, setShouldUpdateFocus] = useState(false);
     const { t } = useTranslation();
     const sideBarRef = useRef(null);
     const contentRef = useRef(null);
-    const selectedWidth = (_b = sidebarWidths[width]) !== null && _b !== void 0 ? _b : width;
+    const selectedWidth = sidebarWidths[width] ?? width;
     const { navigationV3 } = useFeatureFlags();
     const theme = useTheme();
     top || (top = navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT);
@@ -53,7 +40,6 @@ function Sidebar(_a) {
         autoLock: overlay && disableScroll && isOpen,
     });
     useEffect(() => {
-        var _a;
         if (closeButton.current && isOpen) {
             if (closeButton && closeButton.current) {
                 closeButton.current.focus();
@@ -63,7 +49,7 @@ function Sidebar(_a) {
         }
         else if (shouldUpdateFocus) {
             if (triggerRef) {
-                (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                triggerRef?.current?.focus();
             }
             else {
                 focusFirstElement();
@@ -105,7 +91,7 @@ function Sidebar(_a) {
     };
     return (React.createElement(React.Fragment, null,
         closeOnOutsideClick && (React.createElement(AnimatePresence, null, isOpen && overlay !== "hide" && (React.createElement(SidebarOverlay, { top: top, transparent: overlay === "transparent" || overlay === false, transitionDuration: duration, zIndex: zIndex, onClick: closeOnOutsideClick && isOpen && onClose })))),
-        React.createElement(AnimatedBox, Object.assign({ role: "dialog", paddingX: "x1", bg: "white", display: "flex", flexDirection: "column", height: `calc(100% - ${navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT})`, borderLeftWidth: "1px", borderLeftStyle: "solid", borderLeftColor: "lightGrey", animate: isOpen ? "open" : "closed", variants: variants, initial: isOpen ? "open" : "closed", position: "fixed", top: top, right: offset, width: typeof selectedWidth === "string" ? { default: "100%", small: selectedWidth } : selectedWidth, zIndex: zIndex, ref: sideBarRef }, props),
+        React.createElement(AnimatedBox, { role: "dialog", paddingX: "x1", bg: "white", display: "flex", flexDirection: "column", height: `calc(100% - ${navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT})`, borderLeftWidth: "1px", borderLeftStyle: "solid", borderLeftColor: "lightGrey", animate: isOpen ? "open" : "closed", variants: variants, initial: isOpen ? "open" : "closed", position: "fixed", top: top, right: offset, width: typeof selectedWidth === "string" ? { default: "100%", small: selectedWidth } : selectedWidth, zIndex: zIndex, ref: sideBarRef, ...props },
             React.createElement(Flex, { flexDirection: "column", p: "x2", borderBottomWidth: "1px", borderBottomStyle: "solid", borderBottomColor: "lightGrey" },
                 React.createElement(Flex, { flexDirection: "column", gap: "x1" },
                     React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start" },

package/dist/src/Layout/Sidebar.story.d.ts

@@ -1,4 +1,6 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
+import { Sidebar } from "..";
 declare const _default: {
     title: string;
     parameters: {
@@ -9,10 +11,11 @@ declare const _default: {
     };
 };
 export default _default;
+type Story = StoryObj<typeof Sidebar>;
 export declare const _Sidebar: () => React.JSX.Element;
 export declare const WithoutOverlay: () => React.JSX.Element;
 export declare const OpenByDefault: () => React.JSX.Element;
-export declare const WithCustomOffset: () => React.JSX.Element;
+export declare const WithCustomOffset: Story;
 export declare const DontCloseOnOutsideClick: () => React.JSX.Element;
 export declare const WithoutCloseButton: () => React.JSX.Element;
 export declare const WithALongTitle: () => React.JSX.Element;