@nulogy/components 14.8.2 → 15.0.1

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

@@ -1,41 +1,41 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const BasicIcon: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const _InlineIcon: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAColor: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithASize: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAddedMargin: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAccessibilityTitle: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const BasicIcon: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const _InlineIcon: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAColor: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithASize: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAddedMargin: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAccessibilityTitle: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Icon/Icon.story.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { useTheme } from "styled-components";
+import icons from "@nulogy/icons";
+import { Box, Flex, Icon, InlineIcon } from "../index";
+const iconNames = [...Object.keys(icons), "loading"];
+const iconSubset = [...iconNames.slice(0, 5), "loading"];
+const IconCode = ({ icon }) => (React.createElement("code", null,
+    "<Icon icon=\"",
+    React.createElement("b", null, icon),
+    "\">"));
+export default {
+    title: "Components/Icon",
+};
+export const BasicIcon = () => (React.createElement(React.Fragment, null, iconNames.map((iconName) => (React.createElement(Flex, { my: "x2", key: iconName },
+    React.createElement(Icon, { mr: "20px", icon: iconName }),
+    React.createElement(IconCode, { icon: iconName }))))));
+BasicIcon.story = {
+    name: "Icon",
+};
+export const _InlineIcon = () => (React.createElement(React.Fragment, null, [1, 2, 3, 4].map((size) => (React.createElement("p", { style: { fontSize: `${size}em` }, key: size },
+    "@",
+    size,
+    "em: \u00A0",
+    iconSubset.map((iconName) => (React.createElement(InlineIcon, { icon: iconName, key: iconName }))))))));
+_InlineIcon.story = {
+    name: "InlineIcon",
+};
+export const WithAColor = () => (React.createElement(React.Fragment, null, ["red", "yellow", "green", "blue", "blackBlue"].map((color) => (React.createElement(Box, { key: color }, iconSubset.map((iconName) => (React.createElement(Icon, { icon: iconName, color: color, key: iconName }))))))));
+WithAColor.story = {
+    name: "With a color",
+};
+export const WithASize = () => {
+    const theme = useTheme();
+    return (React.createElement(React.Fragment, null, [theme.space.x1, theme.space.x2, theme.space.x3].map((size) => (React.createElement(Box, { key: size }, iconSubset.map((iconName) => (React.createElement(Icon, { icon: iconName, size: size, key: iconName }))))))));
+};
+WithASize.story = {
+    name: "With a size",
+};
+export const WithAddedMargin = () => (React.createElement(Box, { m: "x3" },
+    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
+        React.createElement(Icon, { m: "x2", icon: "delete" })),
+    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
+        React.createElement(Icon, { mt: "x2", icon: "delete" })),
+    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
+        React.createElement(Icon, { mr: "x2", icon: "delete" })),
+    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
+        React.createElement(Icon, { mb: "x2", icon: "delete" })),
+    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
+        React.createElement(Icon, { ml: "x2", icon: "delete" })),
+    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
+        React.createElement(Icon, { mx: "x2", icon: "delete" })),
+    React.createElement(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey" },
+        React.createElement(Icon, { my: "x2", icon: "delete" }))));
+WithAddedMargin.story = {
+    name: "With added margin",
+};
+export const WithAccessibilityTitle = () => (React.createElement(React.Fragment, null,
+    React.createElement(Flex, { p: "x2" },
+        React.createElement(Icon, { icon: "user", title: "User account" }),
+        " This has a title attribute so it will be read by assistive devices."),
+    React.createElement(Flex, { p: "x2" },
+        React.createElement(Icon, { icon: "user" }),
+        " This doesn't have a title attribute, so it has aria-hidden set true instead.")));
+WithAccessibilityTitle.story = {
+    name: "With accessibility title",
+};

package/dist/src/Icon/LoadingIcon.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-interface LoadingIconProps extends React.ComponentPropsWithRef<"svg"> {
-    size?: string;
-}
-declare const LoadingIcon: React.ForwardRefExoticComponent<Omit<LoadingIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default LoadingIcon;
+import React from "react";
+interface LoadingIconProps extends React.ComponentPropsWithRef<"svg"> {
+    size?: string;
+}
+declare const LoadingIcon: React.ForwardRefExoticComponent<Omit<LoadingIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default LoadingIcon;

package/dist/src/Icon/LoadingIcon.js

@@ -0,0 +1,30 @@
+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 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),
+        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" }),
+                React.createElement("animate", { id: "first", attributeName: "fill", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", 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" })),
+            React.createElement("circle", { cx: "12", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "12 3.5" },
+                React.createElement("animate", { attributeName: "r", begin: "0.2s; first.begin", 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" }),
+                React.createElement("animate", { id: "second", attributeName: "fill", begin: "0.2s; first.begin", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", 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" })),
+            React.createElement("circle", { cx: "20.5", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "20.5 3.5" },
+                React.createElement("animate", { attributeName: "r", begin: "0.3s; first.begin", 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" }),
+                React.createElement("animate", { id: "third", attributeName: "fill", begin: "0.3s; first.begin", values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1", keySplines: "\n                .24 .1 .35 .8;\n                .24 .1 .35 .8;\n                0.1 0.8 0.2 1", keyTimes: "0; 0.25;0.4; 1", calcMode: "spline", dur: "0.8s", repeatCount: "indefinite" })))));
+});
+export default LoadingIcon;

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

@@ -1,2 +1,2 @@
-export { default as Icon } from "./Icon";
-export { InlineIcon } from "./Icon";
+export { default as Icon } from "./Icon";
+export { InlineIcon } from "./Icon";

package/dist/src/Icon/index.js

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

package/dist/src/Input/Input.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { LayoutProps, SpaceProps } from "styled-system";
-import { InputFieldProps } from "./InputField";
-interface InputProps extends InputFieldProps, SpaceProps, LayoutProps {
-    errorMessage?: string;
-    errorList?: string[];
-    className?: string;
-}
-declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default Input;
+import React from "react";
+import { LayoutProps, SpaceProps } from "styled-system";
+import { InputFieldProps } from "./InputField";
+interface InputProps extends InputFieldProps, SpaceProps, LayoutProps {
+    errorMessage?: string;
+    errorList?: string[];
+    className?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/src/Input/Input.js

@@ -0,0 +1,27 @@
+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 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 })),
+        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+});
+export default Input;

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

@@ -1,56 +1,56 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Input: () => React.JSX.Element;
-export declare const WithAllProps: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithErrorMessage: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithErrorList: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomId: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToRequired: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAAffixPrefixAndSuffix: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAnIcon: () => React.JSX.Element;
-export declare const WithIconTooltips: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Input: () => React.JSX.Element;
+export declare const WithAllProps: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithErrorMessage: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithErrorList: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomId: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToRequired: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAAffixPrefixAndSuffix: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAnIcon: () => React.JSX.Element;
+export declare const WithIconTooltips: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Input/Input.story.js

@@ -0,0 +1,91 @@
+import React, { useRef } from "react";
+import { action } from "@storybook/addon-actions";
+import { Input, Form, FormSection, PrimaryButton, Button, Flex, Heading4 } from "../index";
+const errorList = ["Error message 1", "Error message 2"];
+export default {
+    title: "Components/Input",
+};
+export const _Input = () => React.createElement(Input, { labelText: "Input", onChange: action("value changed"), onBlur: action("blurred") });
+export const WithAllProps = () => (React.createElement(Input, { placeholder: "Placeholder", p: "x3", labelText: "Input", helpText: "Additional help text", requirementText: "Required", onChange: action("value changed"), onBlur: action("blurred"), required: true }));
+WithAllProps.story = {
+    name: "with all props",
+};
+export const SetToDisabled = () => (React.createElement(Input, { labelText: "Set to disabled", disabled: true, onBlur: action("blurred"), value: "Disabled" }));
+SetToDisabled.story = {
+    name: "set to disabled",
+};
+export const WithErrorMessage = () => (React.createElement(Input, { labelText: "Label", errorMessage: "Error message", onChange: action("value changed"), onBlur: action("blurred") }));
+WithErrorMessage.story = {
+    name: "with error message",
+};
+export const WithErrorList = () => (React.createElement(Input, { labelText: "Label", errorMessage: "Error message", errorList: errorList, onChange: action("value changed"), onBlur: action("blurred") }));
+WithErrorList.story = {
+    name: "with error list ",
+};
+export const WithCustomId = () => (React.createElement(Input, { id: "my-own-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
+WithCustomId.story = {
+    name: "with custom ID",
+};
+export const SetToRequired = () => (React.createElement(React.Fragment, null,
+    React.createElement(Form, { title: "Required field example" },
+        React.createElement(Input, { required: true, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }),
+        React.createElement(PrimaryButton, null, "Send"))));
+SetToRequired.story = {
+    name: "set to required",
+};
+export const WithAAffixPrefixAndSuffix = () => (React.createElement(React.Fragment, null,
+    React.createElement(Form, { title: "Suffix", mb: "x6" },
+        React.createElement(FormSection, null,
+            React.createElement(Input, { suffix: "Eaches" }),
+            React.createElement(Input, { suffix: "Pallets and boxes" })),
+        React.createElement(FormSection, { title: "With Custom Width" },
+            React.createElement(Input, { suffix: "Eaches", suffixWidth: "360px", prefixAlignment: "right" }),
+            React.createElement(Input, { suffix: "Pallets and boxes", suffixWidth: "360px" }))),
+    React.createElement(Form, { title: "Prefix", mb: "x6" },
+        React.createElement(FormSection, null,
+            React.createElement(Input, { prefix: "Eaches" }),
+            React.createElement(Input, { prefix: "Pallets and boxes" })),
+        React.createElement(FormSection, { title: "With Custom Width" },
+            React.createElement(Input, { prefix: "Eaches", prefixWidth: "360px" }),
+            React.createElement(Input, { prefix: "Pallets and boxes", prefixWidth: "360px" })),
+        React.createElement(FormSection, { title: "With right alignment" },
+            React.createElement(Input, { prefix: "Eaches", prefixWidth: "360px", prefixAlignment: "right" }),
+            React.createElement(Input, { prefix: "Pallets and boxes", prefixWidth: "360px", prefixAlignment: "right" }))),
+    React.createElement(Form, { title: "Prefix and Suffix", mb: "x6" },
+        React.createElement(Input, { prefix: "Quantity", suffix: "Eaches" }))));
+WithAAffixPrefixAndSuffix.story = {
+    name: "with a affix (prefix and suffix)",
+};
+export const WithAnIcon = () => (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left Icon" }),
+    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", placeholder: "Search by SKU", labelText: "Right Icon" }),
+    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left and right icons" }),
+    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", iconLeftSize: "x2", placeholder: "Search by SKU", labelText: "Custom icon size" })));
+export const WithIconTooltips = () => (React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+    React.createElement(Heading4, null, "You can use tooltips to provide additional information about the icon. Tooltips can be customized with the same props as the Tooltip component."),
+    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", iconLeftTooltip: "Search products", iconLeftTooltipProps: {
+            placement: "right",
+            showDelay: "500",
+        }, placeholder: "Search by SKU", labelText: "Hover over the search icon (right placement, 500ms delay)" }),
+    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", iconRightTooltip: "Scan barcode", iconRightTooltipProps: {
+            placement: "left",
+        }, placeholder: "Scan product", labelText: "Hover over the barcode icon (left placement, 1s hide delay)" }),
+    React.createElement(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "info", iconRightTooltip: "Your access number can be found on your access card", iconLeft: "lock", iconLeftTooltip: "Your information is secure", iconRightTooltipProps: {
+            placement: "bottom",
+            maxWidth: "150px",
+        }, iconLeftTooltipProps: {
+            placement: "top",
+            maxWidth: "150px",
+        }, placeholder: "Enter your access number", labelText: "Different placements (top and bottom)" })));
+export const UsingRefToControlFocus = () => {
+    const ref = useRef(null);
+    const handleClick = () => {
+        ref.current.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { id: "my-own-id", ref: ref, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }),
+        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+};
+UsingRefToControlFocus.story = {
+    name: "using ref to control focus",
+};

package/dist/src/Input/InputField.d.ts

@@ -1,31 +1,31 @@
-import { IconName } from "@nulogy/icons";
-import React from "react";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { TooltipProps } from "../Tooltip/Tooltip";
-type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size" | "height" | "width">;
-export interface InputFieldProps extends NativeInputProps {
-    htmlSize?: number;
-    variant?: ComponentVariant;
-    iconRight?: IconName | "loading";
-    iconLeft?: IconName | "loading";
-    iconRightSize?: string;
-    iconLeftSize?: string;
-    iconLeftTooltip?: React.ReactNode;
-    iconRightTooltip?: React.ReactNode;
-    iconLeftTooltipProps?: Omit<TooltipProps, "tooltip">;
-    iconRightTooltipProps?: Omit<TooltipProps, "tooltip">;
-    error?: boolean;
-    labelText?: string;
-    requirementText?: string;
-    helpText?: React.ReactNode;
-    suffix?: string;
-    prefix?: string;
-    suffixWidth?: string;
-    prefixWidth?: string;
-    suffixAlignment?: "left" | "right";
-    prefixAlignment?: "left" | "right";
-    inputWidth?: string;
-}
-export declare const InputField: React.ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export declare const InputFieldDefaultProps: InputFieldProps;
-export {};
+import { IconName } from "@nulogy/icons";
+import React from "react";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { TooltipProps } from "../Tooltip/Tooltip";
+type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size" | "height" | "width">;
+export interface InputFieldProps extends NativeInputProps {
+    htmlSize?: number;
+    variant?: ComponentVariant;
+    iconRight?: IconName | "loading";
+    iconLeft?: IconName | "loading";
+    iconRightSize?: string;
+    iconLeftSize?: string;
+    iconLeftTooltip?: React.ReactNode;
+    iconRightTooltip?: React.ReactNode;
+    iconLeftTooltipProps?: Omit<TooltipProps, "tooltip">;
+    iconRightTooltipProps?: Omit<TooltipProps, "tooltip">;
+    error?: boolean;
+    labelText?: string;
+    requirementText?: string;
+    helpText?: React.ReactNode;
+    suffix?: string;
+    prefix?: string;
+    suffixWidth?: string;
+    prefixWidth?: string;
+    suffixAlignment?: "left" | "right";
+    prefixAlignment?: "left" | "right";
+    inputWidth?: string;
+}
+export declare const InputField: React.ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const InputFieldDefaultProps: InputFieldProps;
+export {};

package/dist/src/Input/InputField.js

@@ -0,0 +1,107 @@
+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";
+import { Box } from "../Box";
+import { MaybeFieldLabel } from "../FieldLabel";
+import { Flex } from "../Flex";
+import { InputIcon } from "../Icon/Icon";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+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"]);
+    const componentVariant = useComponentVariant(variant);
+    const theme = useTheme();
+    return (React.createElement(MaybeFieldLabel, { labelText: labelText, requirementText: requirementText, helpText: helpText },
+        React.createElement(Flex, { alignItems: "flex-start" },
+            React.createElement(Prefix, { prefix: prefix, prefixWidth: prefixWidth, textAlign: prefixAlignment }),
+            React.createElement(InputWrapper, { maxWidth: inputWidth },
+                iconLeft &&
+                    (iconLeftTooltip ? (React.createElement(Tooltip, Object.assign({ 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)),
+                iconRight &&
+                    (iconRightTooltip ? (React.createElement(Tooltip, Object.assign({ 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 }))));
+});
+const InputWrapper = styled(Box)(({ theme }) => ({
+    position: "relative",
+    display: "flex",
+    flexGrow: 1,
+    "&:focus-within": {
+        svg: {
+            color: theme.colors.darkBlue,
+        },
+    },
+}));
+const StyledInput = styled.input(({ theme, inputWidth }) => ({
+    display: "block",
+    flexGrow: 1,
+    border: "1px solid",
+    borderRadius: theme.radii.medium,
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    margin: theme.space.none,
+    minHeight: theme.space.x5,
+    maxWidth: inputWidth,
+    width: inputWidth,
+    "&:focus": {
+        outline: "none",
+        color: theme.colors.black,
+        borderColor: theme.colors.blue,
+        boxShadow: theme.shadows.focus,
+        "& svg": {
+            color: theme.colors.darkBlue,
+        },
+    },
+    "::placeholder": {
+        color: theme.colors.midGrey,
+    },
+    paddingTop: `${subPx(theme.space.x1)}`,
+    paddingBottom: `${subPx(theme.space.x1)}`,
+}), variant({
+    variants: {
+        touch: {
+            fontSize: "md",
+            lineHeight: "base",
+        },
+    },
+}), ({ disabled, error, theme }) => cssForState({ disabled, error, theme }), space);
+const cssForState = ({ disabled, error, theme, }) => {
+    if (disabled)
+        return {
+            color: theme.colors.midGrey,
+            borderColor: theme.colors.lightGrey,
+            backgroundColor: theme.colors.whiteGrey,
+        };
+    if (error)
+        return {
+            color: theme.colors.red,
+            borderColor: theme.colors.red,
+        };
+    return {
+        color: theme.colors.black,
+        borderColor: theme.colors.grey,
+    };
+};
+export const InputFieldDefaultProps = {
+    disabled: false,
+    required: false,
+    error: false,
+    suffixAlignment: "left",
+    prefixAlignment: "left",
+};

package/dist/src/Input/Prefix.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { TextProps } from "../Type/Text";
-type PrefixProps = TextProps & {
-    prefix?: string;
-    prefixWidth?: string;
-};
-declare const Prefix: ({ prefix, prefixWidth, ...props }: PrefixProps) => React.JSX.Element;
-export default Prefix;
+import React from "react";
+import { TextProps } from "../Type/Text";
+type PrefixProps = TextProps & {
+    prefix?: string;
+    prefixWidth?: string;
+};
+declare const Prefix: ({ prefix, prefixWidth, ...props }: PrefixProps) => React.JSX.Element;
+export default Prefix;