@btdigital/loop-components - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { forwardRef, createContext, useContext, useState, useEffect } from 'react';
 
@@ -177,26 +177,24 @@ /**
  */
-var Button = function (_a) {
+var Button = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.elementType, ElementType = _c === void 0 ? "button" : _c, href = _a.href, isDisabled = _a.isDisabled, isDisplayBlock = _a.isDisplayBlock, isFullWidth = _a.isFullWidth, onClick = _a.onClick, rel = _a.rel, target = _a.target, testId = _a.testId, type = _a.type;
-    var linkProps;
+    var buttonClasses = classnames((_b = {
+            "loop-Button": true,
+            "loop-Button--displayBlock": isDisplayBlock,
+            "loop-Button--fullWidth": isFullWidth
+        },
+        _b["" + className] = className,
+        _b));
+    var commonProps = {
+        "data-testid": testId,
+        disabled: isDisabled,
+        onClick: onClick,
+        type: type,
+        ref: ref
+    };
     if (ElementType === "a" || href) {
-        linkProps = {
-            "aria-disabled": !isDisabled ? undefined : isDisabled,
-            disabled: undefined,
-            href: isDisabled ? undefined : href,
-            rel: rel,
-            role: "button",
-            tabIndex: isDisabled ? undefined : 0,
-            target: target,
-            type: undefined
-        };
+        return (React.createElement("a", __assign({}, commonProps, { "aria-disabled": !isDisabled ? undefined : isDisabled, href: isDisabled ? undefined : href, rel: rel, role: "button", tabIndex: isDisabled ? undefined : 0, target: target, className: buttonClasses }), children));
     }
-    return (React.createElement(ElementType, __assign({ className: classnames((_b = {
-                "loop-Button": true,
-                "loop-Button--displayBlock": isDisplayBlock,
-                "loop-Button--fullWidth": isFullWidth
-            },
-            _b["" + className] = className,
-            _b)), "data-testid": testId, disabled: isDisabled, onClick: onClick, type: type }, linkProps), children));
-};
+    return (React.createElement("button", __assign({}, commonProps, { className: buttonClasses, disabled: isDisabled }), children));
+});
 
@@ -210,3 +208,3 @@ var Context = createContext({ surfaceBackground: "" });
     var _b;
-    var _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, className = _a.className;
+    var _c = _a.background, background = _c === void 0 ? "white" : _c, children = _a.children, className = _a.className;
     return (React.createElement(Provider, { value: { surfaceBackground: background } },
@@ -225,3 +223,3 @@ React.createElement("div", { className: classnames((_b = {
     var background = _a.background, children = _a.children;
-    return (React.createElement(Surface, { background: background === "black" ? "dark" : "light", className: classnames({
+    return (React.createElement(Surface, { background: background, className: classnames({
             "loop-SurfaceBT": true,
@@ -238,5 +236,3 @@ "loop-SurfaceBT--blackBackground": background === "black",
     var background = _a.background, children = _a.children;
-    return (React.createElement(Surface, { background: background && ["coal", "slate", "teal"].includes(background)
-            ? "dark"
-            : "light", className: classnames({
+    return (React.createElement(Surface, { background: background, className: classnames({
             "loop-SurfaceEE": true,
@@ -257,3 +253,3 @@ "loop-SurfaceEE--coalBackground": background === "coal",
     var background = _a.background, children = _a.children;
-    return (React.createElement(Surface, { background: background === "black-60" ? "dark" : "light", className: classnames({
+    return (React.createElement(Surface, { background: background, className: classnames({
             "loop-SurfacePlusnet": true,
@@ -268,12 +264,13 @@ "loop-SurfacePlusnet--black60Background": background === "black-60",
  */
-var ButtonBT = function (_a) {
+var ButtonBT = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.colorVariant, colorVariant = _b === void 0 ? "core" : _b, _c = _a.styleVariant, styleVariant = _c === void 0 ? "primary" : _c, props = __rest(_a, ["children", "colorVariant", "styleVariant"]);
     var surfaceBackground = useContext(Context).surfaceBackground;
-    return (React.createElement(Button, __assign({ className: classnames({
-            "loop-ButtonBT": true,
-            "loop-ButtonBT--colorPurchase": colorVariant === "purchase" && styleVariant !== "secondary",
-            "loop-ButtonBT--onDarkBackground": surfaceBackground === "dark",
-            "loop-ButtonBT--styleSecondary": styleVariant === "secondary"
-        }) }, props), children));
-};
+    var btButtonClasses = classnames({
+        "loop-ButtonBT": true,
+        "loop-ButtonBT--colorPurchase": colorVariant === "purchase" && styleVariant !== "secondary",
+        "loop-ButtonBT--onDarkBackground": surfaceBackground === "black",
+        "loop-ButtonBT--styleSecondary": styleVariant === "secondary"
+    });
+    return (React.createElement(Button, __assign({ className: btButtonClasses, ref: ref }, props), children));
+});
 
@@ -283,14 +280,15 @@ /**
  */
-var ButtonEE = function (_a) {
+var ButtonEE = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.styleVariant, styleVariant = _b === void 0 ? "primary" : _b, props = __rest(_a, ["children", "styleVariant"]);
     var surfaceBackground = useContext(Context).surfaceBackground;
-    return (React.createElement(Button, __assign({ className: classnames({
-            "loop-ButtonEE": true,
-            "loop-ButtonEE--onDarkBackground": surfaceBackground === "dark",
-            "loop-ButtonEE--styleSecondary": styleVariant === "secondary",
-            "loop-ButtonEE--styleTertiary": styleVariant === "tertiary"
-        }) }, props),
+    var eeButtonClasses = classnames({
+        "loop-ButtonEE": true,
+        "loop-ButtonEE--onDarkBackground": ["coal", "slate", "teal"].includes(surfaceBackground),
+        "loop-ButtonEE--styleSecondary": styleVariant === "secondary",
+        "loop-ButtonEE--styleTertiary": styleVariant === "tertiary"
+    });
+    return (React.createElement(Button, __assign({ className: eeButtonClasses, ref: ref }, props),
         styleVariant === "tertiary" && (React.createElement("span", { className: "loop-ButtonEE-chevron" }, ">")),
         children));
-};
+});
 
@@ -300,17 +298,121 @@ /**
  */
-var ButtonPlusnet = function (_a) {
+var ButtonPlusnet = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.colorVariant, colorVariant = _b === void 0 ? "core" : _b, _c = _a.sizeVariant, sizeVariant = _c === void 0 ? "medium" : _c, _d = _a.styleVariant, styleVariant = _d === void 0 ? "primary" : _d, props = __rest(_a, ["children", "colorVariant", "sizeVariant", "styleVariant"]);
     var surfaceBackground = useContext(Context).surfaceBackground;
-    return (React.createElement(Button, __assign({ className: classnames({
-            "loop-ButtonPlusnet": true,
-            "loop-ButtonPlusnet--colorDiscover": colorVariant === "discover",
-            "loop-ButtonPlusnet--colorNeutral": colorVariant === "neutral",
-            "loop-ButtonPlusnet--onDarkBackground": surfaceBackground === "dark",
-            "loop-ButtonPlusnet--sizeSmall": sizeVariant === "small",
-            "loop-ButtonPlusnet--styleSecondary": styleVariant === "secondary",
-            "loop-ButtonPlusnet--styleTertiary": styleVariant === "tertiary"
-        }) }, props), children));
+    var plusnetButtonClasses = classnames({
+        "loop-ButtonPlusnet": true,
+        "loop-ButtonPlusnet--colorDiscover": colorVariant === "discover",
+        "loop-ButtonPlusnet--colorNeutral": colorVariant === "neutral",
+        "loop-ButtonPlusnet--onDarkBackground": surfaceBackground === "black-60",
+        "loop-ButtonPlusnet--sizeSmall": sizeVariant === "small",
+        "loop-ButtonPlusnet--styleSecondary": styleVariant === "secondary",
+        "loop-ButtonPlusnet--styleTertiary": styleVariant === "tertiary"
+    });
+    return (React.createElement(Button, __assign({ className: plusnetButtonClasses, ref: ref }, props), children));
+});
+
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, errorMessage = _a.errorMessage, helper = _a.helper;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined
+        };
+    }
+    var idHelper = id + "-helper";
+    var idError = id + "-error";
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
 };
 
 /**
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
+ */
+var useNumericInput = function (props) {
+    var type = props.type === "number" ? "text" : props.type;
+    var inputMode = props.inputMode;
+    if (!props.inputMode) {
+        if (props.type === "email") {
+            inputMode = "email";
+        }
+        else if (props.type === "number") {
+            inputMode = "numeric";
+        }
+        else if (props.type === "tel") {
+            inputMode = "tel";
+        }
+        else if (props.type === "url") {
+            inputMode = "url";
+        }
+    }
+    var pattern = props.pattern;
+    if (!props.pattern && props.type === "number") {
+        pattern = "[0-9]*";
+    }
+    return { inputMode: inputMode, pattern: pattern, type: type };
+};
+
+var Checkbox = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isChecked, isChecked = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value;
+    var idLabel = id + "-label";
+    var _f = useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage,
+        helper: helper
+    }), ariaDescribedby = _f.ariaDescribedby, idHelper = _f.idHelper, idError = _f.idError;
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = isChecked;
+    }
+    else if (isChecked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    return (React.createElement("div", { className: classnames((_b = {
+                "loop-Checkbox": true,
+                "loop-Checkbox--disabled": isDisabled,
+                "loop-Checkbox--invalid": errorMessage
+            },
+            _b["" + className] = className,
+            _b)) },
+        React.createElement("label", { id: idLabel, htmlFor: id, className: "loop-Checkbox-label" },
+            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-disabled": isDisabled, "aria-invalid": errorMessage ? "true" : "false", "aria-required": isRequired ? "true" : undefined, className: "loop-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value })),
+            React.createElement("span", { className: "loop-Checkbox-box" }),
+            label,
+            !isRequired && " (Optional)"),
+        helper && (React.createElement("div", { id: idHelper, className: "loop-Checkbox-helper" }, helper)),
+        errorMessage && (React.createElement("div", { id: idError, className: "loop-Checkbox-error" }, errorMessage))));
+});
+
+var CheckboxBT = forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    return React.createElement(Checkbox, __assign({}, props, { className: "loop-CheckboxBT", ref: ref }));
+});
+
+var CheckboxEE = forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    var surfaceBackground = useContext(Context).surfaceBackground;
+    return (React.createElement(Checkbox, __assign({}, props, { className: classnames({
+            "loop-CheckboxEE": true,
+            "loop-CheckboxEE--onFogBackground": surfaceBackground === "fog"
+        }), ref: ref })));
+});
+
+var CheckboxPlusnet = forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    return React.createElement(Checkbox, __assign({}, props, { className: "loop-CheckboxPlusnet", ref: ref }));
+});
+
+/**
  * `Clock` is a demo component that shows the current time.
@@ -345,3 +447,255 @@ */
 
-export { Base, BaseBT, BaseEE, BasePlusnet, Button, ButtonBT, ButtonEE, ButtonPlusnet, Clock, Clock_rehydrator as ClockRehydrator, Surface, SurfaceBT, Context as SurfaceContext, SurfaceEE, SurfacePlusnet };
+/**
+ * Use `Heading` to display heading text.
+ */
+var Heading = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className, level = _a.level;
+    var Element = "span";
+    if (level) {
+        Element = "h" + level;
+    }
+    return (React.createElement(Element, { className: classnames((_b = {
+                "loop-Heading": true
+            },
+            _b["" + className] = className,
+            _b)) }, children));
+};
+
+/**
+ * Use `HeadingBT` to display heading text.
+ */
+var HeadingBT = function (_a) {
+    var _b;
+    var children = _a.children, isBold = _a.isBold, size = _a.size, props = __rest(_a, ["children", "isBold", "size"]);
+    return (React.createElement(Heading, __assign({ className: classnames((_b = {
+                "loop-HeadingBT": true
+            },
+            _b["loop-HeadingBT--size" + (size && size.toUpperCase())] = size,
+            _b["loop-HeadingBT--bold"] = isBold && size && ["xs", "s", "m"].includes(size),
+            _b)) }, props), children));
+};
+
+/**
+ * Use `HeadingEE` to display heading text.
+ */
+var HeadingEE = function (_a) {
+    var _b;
+    var children = _a.children, isBold = _a.isBold, isNotUppercase = _a.isNotUppercase, size = _a.size, props = __rest(_a, ["children", "isBold", "isNotUppercase", "size"]);
+    return (React.createElement(Heading, __assign({ className: classnames((_b = {
+                "loop-HeadingEE": true
+            },
+            _b["loop-HeadingEE--size" + (size && size.toUpperCase())] = size,
+            _b["loop-HeadingEE--notUppercase"] = isNotUppercase && size === "xxxl",
+            _b["loop-HeadingEE--bold"] = isBold && size !== "xxxl",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `HeadingPlusnet` to display heading text.
+ */
+var HeadingPlusnet = function (_a) {
+    var _b;
+    var children = _a.children, size = _a.size, isRegularWeight = _a.isRegularWeight, props = __rest(_a, ["children", "size", "isRegularWeight"]);
+    return (React.createElement(Heading, __assign({ className: classnames((_b = {
+                "loop-HeadingPlusnet": true
+            },
+            _b["loop-HeadingPlusnet--size" + (size && size.toUpperCase())] = size,
+            _b["loop-HeadingPlusnet--regularWeight"] = isRegularWeight,
+            _b)) }, props), children));
+};
+
+/**
+ * Use `Paragraph` to typeset text in paragraphs.
+ */
+var Paragraph = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className, isMeasured = _a.isMeasured;
+    return (React.createElement("p", { className: classnames((_b = {
+                "loop-Paragraph": true,
+                "loop-Paragraph--measured": isMeasured
+            },
+            _b["" + className] = className,
+            _b)) }, children));
+};
+
+/**
+ * Use `ParagraphBT` to typeset text in paragraphs.
+ */
+var ParagraphBT = function (_a) {
+    var _b;
+    var children = _a.children, isCondensed = _a.isCondensed, size = _a.size, props = __rest(_a, ["children", "isCondensed", "size"]);
+    return (React.createElement(Paragraph, __assign({ className: classnames((_b = {
+                "loop-ParagraphBT": true
+            },
+            _b["loop-ParagraphBT--size" + (size && size.toUpperCase())] = size && size !== "m",
+            _b["loop-ParagraphBT--condensed"] = isCondensed && size === "s",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `ParagraphEE` to typeset text in paragraphs.
+ */
+var ParagraphEE = function (_a) {
+    var _b;
+    var children = _a.children, size = _a.size, props = __rest(_a, ["children", "size"]);
+    return (React.createElement(Paragraph, __assign({ className: classnames((_b = {
+                "loop-ParagraphEE": true
+            },
+            _b["loop-ParagraphEE--size" + (size && size.toUpperCase())] = size && size !== "m",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `ParagraphPlusnet` to display heading text.
+ */
+var ParagraphPlusnet = function (_a) {
+    var _b;
+    var children = _a.children, size = _a.size, props = __rest(_a, ["children", "size"]);
+    return (React.createElement(Paragraph, __assign({ className: classnames((_b = {
+                "loop-ParagraphPlusnet": true
+            },
+            _b["loop-ParagraphPlusnet--size" + (size && size.toUpperCase())] = size && size !== "m",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+var FormControl = function (_a) {
+    var _b;
+    var className = _a.className, children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label;
+    var _e = useAriaDescribedby({
+        errorMessage: errorMessage,
+        helper: helper,
+        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
+    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
+    var LabelType = ElementType === "div" ? "label" : "legend";
+    var elementProps = {};
+    var labelProps = {};
+    if (LabelType === "label") {
+        labelProps["htmlFor"] = htmlFor;
+        if (htmlFor) {
+            labelProps["id"] = htmlFor + "-label";
+        }
+        else if (id) {
+            labelProps["id"] = id + "-label";
+        }
+    }
+    else {
+        elementProps["aria-describedby"] = ariaDescribedby;
+    }
+    return (React.createElement(ElementType, __assign({ className: classnames((_b = {
+                "loop-FormControl": true
+            },
+            _b["" + className] = className,
+            _b)), id: id }, elementProps),
+        React.createElement(LabelType, __assign({ className: "loop-FormControl-label" }, labelProps),
+            label,
+            " ",
+            !isRequired && (React.createElement("span", { className: "loop-FormControl-labelOptional" }, "(Optional)"))),
+        helper && (React.createElement("div", { className: "loop-FormControl-helper", id: idHelper }, helper)),
+        children,
+        errorMessage && (React.createElement("div", { className: "loop-FormControl-error", id: idError }, errorMessage))));
+};
+
+/**
+ * Use `TextInput` to allow custom user text entry with a keyboard.
+ */
+var TextInput = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onChange = _a.onChange, pattern = _a.pattern, _g = _a.renderFormControl, renderFormControl = _g === void 0 ? FormControl : _g, _h = _a.type, type = _h === void 0 ? "text" : _h, value = _a.value;
+    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    var FormControlWrapper = renderFormControl;
+    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
+    var ariaDescribedby = useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper
+    }).ariaDescribedby;
+    return (React.createElement("div", { className: classnames((_b = {
+                "loop-TextInput": true,
+                "loop-TextInput--invalid": errorMessage
+            },
+            _b["" + className] = className,
+            _b)) },
+        React.createElement(FormControlWrapper, { errorMessage: errorMessage, helper: helper, htmlFor: id, isRequired: isRequired, label: label },
+            React.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-required": isRequired ? "true" : undefined, className: "loop-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+});
+
+/**
+ * Use `FormControlBT` to provide inputs with labels, helper text and error messages
+ */
+var FormControlBT = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, props = __rest(_a, ["className", "labelSize"]);
+    return (React.createElement(FormControl, __assign({ className: classnames((_b = {
+                "loop-FormControlBT": true,
+                "loop-FormControlBT--smallLabel": labelSize === "s"
+            },
+            _b["" + className] = className,
+            _b)) }, props)));
+};
+
+/**
+ * Use `FormControlEE` to provide inputs with labels, helper text and error messages
+ */
+var FormControlEE = function (_a) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var surfaceBackground = useContext(Context).surfaceBackground;
+    return (React.createElement(FormControl, __assign({ className: classnames((_b = {
+                "loop-FormControlEE": true,
+                "loop-FormControlEE--onFogBackground": surfaceBackground === "fog"
+            },
+            _b["" + className] = className,
+            _b)) }, props)));
+};
+
+/**
+ * Use `FormControlPlusnet` to provide inputs with labels, helper text and error messages
+ */
+var FormControlPlusnet = function (_a) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement(FormControl, __assign({ className: classnames((_b = {
+                "loop-FormControlPlusnet": true
+            },
+            _b["" + className] = className,
+            _b)) }, props)));
+};
+
+/**
+ * Use `TextInputBT` to allow custom user text entry with a keyboard.
+ */
+var TextInputBT = forwardRef(function (_a, ref) {
+    var _b = _a.labelSize, labelSize = _b === void 0 ? "l" : _b, props = __rest(_a, ["labelSize"]);
+    return (React.createElement(TextInput, __assign({ className: classnames({
+            "loop-TextInputBT": true
+        }), ref: ref, renderFormControl: function (controlProps) { return (React.createElement(FormControlBT, __assign({}, controlProps, { labelSize: labelSize }))); } }, props)));
+});
+
+/**
+ * Use `TextInputEE` to allow custom user text entry with a keyboard.
+ */
+var TextInputEE = forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    var surfaceBackground = useContext(Context).surfaceBackground;
+    return (React.createElement(TextInput, __assign({ className: classnames({
+            "loop-TextInputEE": true,
+            "loop-TextInputEE--onFogBackground": surfaceBackground === "fog"
+        }), ref: ref, renderFormControl: FormControlEE }, props)));
+});
+
+/**
+ * Use `TextInputPlusnet` to allow custom user text entry with a keyboard.
+ */
+var TextInputPlusnet = forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    return (React.createElement(TextInput, __assign({ className: classnames({
+            "loop-TextInputPlusnet": true
+        }), ref: ref, renderFormControl: FormControlPlusnet }, props)));
+});
+
+export { Base, BaseBT, BaseEE, BasePlusnet, Button, ButtonBT, ButtonEE, ButtonPlusnet, Checkbox, CheckboxBT, CheckboxEE, CheckboxPlusnet, Clock, Clock_rehydrator as ClockRehydrator, Heading, HeadingBT, HeadingEE, HeadingPlusnet, Paragraph, ParagraphBT, ParagraphEE, ParagraphPlusnet, Surface, SurfaceBT, Context as SurfaceContext, SurfaceEE, SurfacePlusnet, TextInput, TextInputBT, TextInputEE, TextInputPlusnet };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -185,26 +185,24 @@ 'use strict';
  */
-var Button = function (_a) {
+var Button = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.elementType, ElementType = _c === void 0 ? "button" : _c, href = _a.href, isDisabled = _a.isDisabled, isDisplayBlock = _a.isDisplayBlock, isFullWidth = _a.isFullWidth, onClick = _a.onClick, rel = _a.rel, target = _a.target, testId = _a.testId, type = _a.type;
-    var linkProps;
+    var buttonClasses = classnames((_b = {
+            "loop-Button": true,
+            "loop-Button--displayBlock": isDisplayBlock,
+            "loop-Button--fullWidth": isFullWidth
+        },
+        _b["" + className] = className,
+        _b));
+    var commonProps = {
+        "data-testid": testId,
+        disabled: isDisabled,
+        onClick: onClick,
+        type: type,
+        ref: ref
+    };
     if (ElementType === "a" || href) {
-        linkProps = {
-            "aria-disabled": !isDisabled ? undefined : isDisabled,
-            disabled: undefined,
-            href: isDisabled ? undefined : href,
-            rel: rel,
-            role: "button",
-            tabIndex: isDisabled ? undefined : 0,
-            target: target,
-            type: undefined
-        };
+        return (React__default['default'].createElement("a", __assign({}, commonProps, { "aria-disabled": !isDisabled ? undefined : isDisabled, href: isDisabled ? undefined : href, rel: rel, role: "button", tabIndex: isDisabled ? undefined : 0, target: target, className: buttonClasses }), children));
     }
-    return (React__default['default'].createElement(ElementType, __assign({ className: classnames((_b = {
-                "loop-Button": true,
-                "loop-Button--displayBlock": isDisplayBlock,
-                "loop-Button--fullWidth": isFullWidth
-            },
-            _b["" + className] = className,
-            _b)), "data-testid": testId, disabled: isDisabled, onClick: onClick, type: type }, linkProps), children));
-};
+    return (React__default['default'].createElement("button", __assign({}, commonProps, { className: buttonClasses, disabled: isDisabled }), children));
+});
 
@@ -218,3 +216,3 @@ var Context = React.createContext({ surfaceBackground: "" });
     var _b;
-    var _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, className = _a.className;
+    var _c = _a.background, background = _c === void 0 ? "white" : _c, children = _a.children, className = _a.className;
     return (React__default['default'].createElement(Provider, { value: { surfaceBackground: background } },
@@ -233,3 +231,3 @@ React__default['default'].createElement("div", { className: classnames((_b = {
     var background = _a.background, children = _a.children;
-    return (React__default['default'].createElement(Surface, { background: background === "black" ? "dark" : "light", className: classnames({
+    return (React__default['default'].createElement(Surface, { background: background, className: classnames({
             "loop-SurfaceBT": true,
@@ -246,5 +244,3 @@ "loop-SurfaceBT--blackBackground": background === "black",
     var background = _a.background, children = _a.children;
-    return (React__default['default'].createElement(Surface, { background: background && ["coal", "slate", "teal"].includes(background)
-            ? "dark"
-            : "light", className: classnames({
+    return (React__default['default'].createElement(Surface, { background: background, className: classnames({
             "loop-SurfaceEE": true,
@@ -265,3 +261,3 @@ "loop-SurfaceEE--coalBackground": background === "coal",
     var background = _a.background, children = _a.children;
-    return (React__default['default'].createElement(Surface, { background: background === "black-60" ? "dark" : "light", className: classnames({
+    return (React__default['default'].createElement(Surface, { background: background, className: classnames({
             "loop-SurfacePlusnet": true,
@@ -276,12 +272,13 @@ "loop-SurfacePlusnet--black60Background": background === "black-60",
  */
-var ButtonBT = function (_a) {
+var ButtonBT = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.colorVariant, colorVariant = _b === void 0 ? "core" : _b, _c = _a.styleVariant, styleVariant = _c === void 0 ? "primary" : _c, props = __rest(_a, ["children", "colorVariant", "styleVariant"]);
     var surfaceBackground = React.useContext(Context).surfaceBackground;
-    return (React__default['default'].createElement(Button, __assign({ className: classnames({
-            "loop-ButtonBT": true,
-            "loop-ButtonBT--colorPurchase": colorVariant === "purchase" && styleVariant !== "secondary",
-            "loop-ButtonBT--onDarkBackground": surfaceBackground === "dark",
-            "loop-ButtonBT--styleSecondary": styleVariant === "secondary"
-        }) }, props), children));
-};
+    var btButtonClasses = classnames({
+        "loop-ButtonBT": true,
+        "loop-ButtonBT--colorPurchase": colorVariant === "purchase" && styleVariant !== "secondary",
+        "loop-ButtonBT--onDarkBackground": surfaceBackground === "black",
+        "loop-ButtonBT--styleSecondary": styleVariant === "secondary"
+    });
+    return (React__default['default'].createElement(Button, __assign({ className: btButtonClasses, ref: ref }, props), children));
+});
 
@@ -291,14 +288,15 @@ /**
  */
-var ButtonEE = function (_a) {
+var ButtonEE = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.styleVariant, styleVariant = _b === void 0 ? "primary" : _b, props = __rest(_a, ["children", "styleVariant"]);
     var surfaceBackground = React.useContext(Context).surfaceBackground;
-    return (React__default['default'].createElement(Button, __assign({ className: classnames({
-            "loop-ButtonEE": true,
-            "loop-ButtonEE--onDarkBackground": surfaceBackground === "dark",
-            "loop-ButtonEE--styleSecondary": styleVariant === "secondary",
-            "loop-ButtonEE--styleTertiary": styleVariant === "tertiary"
-        }) }, props),
+    var eeButtonClasses = classnames({
+        "loop-ButtonEE": true,
+        "loop-ButtonEE--onDarkBackground": ["coal", "slate", "teal"].includes(surfaceBackground),
+        "loop-ButtonEE--styleSecondary": styleVariant === "secondary",
+        "loop-ButtonEE--styleTertiary": styleVariant === "tertiary"
+    });
+    return (React__default['default'].createElement(Button, __assign({ className: eeButtonClasses, ref: ref }, props),
         styleVariant === "tertiary" && (React__default['default'].createElement("span", { className: "loop-ButtonEE-chevron" }, ">")),
         children));
-};
+});
 
@@ -308,17 +306,121 @@ /**
  */
-var ButtonPlusnet = function (_a) {
+var ButtonPlusnet = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.colorVariant, colorVariant = _b === void 0 ? "core" : _b, _c = _a.sizeVariant, sizeVariant = _c === void 0 ? "medium" : _c, _d = _a.styleVariant, styleVariant = _d === void 0 ? "primary" : _d, props = __rest(_a, ["children", "colorVariant", "sizeVariant", "styleVariant"]);
     var surfaceBackground = React.useContext(Context).surfaceBackground;
-    return (React__default['default'].createElement(Button, __assign({ className: classnames({
-            "loop-ButtonPlusnet": true,
-            "loop-ButtonPlusnet--colorDiscover": colorVariant === "discover",
-            "loop-ButtonPlusnet--colorNeutral": colorVariant === "neutral",
-            "loop-ButtonPlusnet--onDarkBackground": surfaceBackground === "dark",
-            "loop-ButtonPlusnet--sizeSmall": sizeVariant === "small",
-            "loop-ButtonPlusnet--styleSecondary": styleVariant === "secondary",
-            "loop-ButtonPlusnet--styleTertiary": styleVariant === "tertiary"
-        }) }, props), children));
+    var plusnetButtonClasses = classnames({
+        "loop-ButtonPlusnet": true,
+        "loop-ButtonPlusnet--colorDiscover": colorVariant === "discover",
+        "loop-ButtonPlusnet--colorNeutral": colorVariant === "neutral",
+        "loop-ButtonPlusnet--onDarkBackground": surfaceBackground === "black-60",
+        "loop-ButtonPlusnet--sizeSmall": sizeVariant === "small",
+        "loop-ButtonPlusnet--styleSecondary": styleVariant === "secondary",
+        "loop-ButtonPlusnet--styleTertiary": styleVariant === "tertiary"
+    });
+    return (React__default['default'].createElement(Button, __assign({ className: plusnetButtonClasses, ref: ref }, props), children));
+});
+
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, errorMessage = _a.errorMessage, helper = _a.helper;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined
+        };
+    }
+    var idHelper = id + "-helper";
+    var idError = id + "-error";
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
 };
 
 /**
+ * Infer the correct inputMode, pattern and type if specifying a `number` type.
+ */
+var useNumericInput = function (props) {
+    var type = props.type === "number" ? "text" : props.type;
+    var inputMode = props.inputMode;
+    if (!props.inputMode) {
+        if (props.type === "email") {
+            inputMode = "email";
+        }
+        else if (props.type === "number") {
+            inputMode = "numeric";
+        }
+        else if (props.type === "tel") {
+            inputMode = "tel";
+        }
+        else if (props.type === "url") {
+            inputMode = "url";
+        }
+    }
+    var pattern = props.pattern;
+    if (!props.pattern && props.type === "number") {
+        pattern = "[0-9]*";
+    }
+    return { inputMode: inputMode, pattern: pattern, type: type };
+};
+
+var Checkbox = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, _c = _a.isChecked, isChecked = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value;
+    var idLabel = id + "-label";
+    var _f = useAriaDescribedby({
+        id: id,
+        errorMessage: errorMessage,
+        helper: helper
+    }), ariaDescribedby = _f.ariaDescribedby, idHelper = _f.idHelper, idError = _f.idError;
+    var checkedProps = {};
+    if (typeof onChange === "function") {
+        checkedProps.checked = isChecked;
+    }
+    else if (isChecked && !onChange) {
+        checkedProps.defaultChecked = true;
+    }
+    return (React__default['default'].createElement("div", { className: classnames((_b = {
+                "loop-Checkbox": true,
+                "loop-Checkbox--disabled": isDisabled,
+                "loop-Checkbox--invalid": errorMessage
+            },
+            _b["" + className] = className,
+            _b)) },
+        React__default['default'].createElement("label", { id: idLabel, htmlFor: id, className: "loop-Checkbox-label" },
+            React__default['default'].createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-disabled": isDisabled, "aria-invalid": errorMessage ? "true" : "false", "aria-required": isRequired ? "true" : undefined, className: "loop-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value })),
+            React__default['default'].createElement("span", { className: "loop-Checkbox-box" }),
+            label,
+            !isRequired && " (Optional)"),
+        helper && (React__default['default'].createElement("div", { id: idHelper, className: "loop-Checkbox-helper" }, helper)),
+        errorMessage && (React__default['default'].createElement("div", { id: idError, className: "loop-Checkbox-error" }, errorMessage))));
+});
+
+var CheckboxBT = React.forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    return React__default['default'].createElement(Checkbox, __assign({}, props, { className: "loop-CheckboxBT", ref: ref }));
+});
+
+var CheckboxEE = React.forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    var surfaceBackground = React.useContext(Context).surfaceBackground;
+    return (React__default['default'].createElement(Checkbox, __assign({}, props, { className: classnames({
+            "loop-CheckboxEE": true,
+            "loop-CheckboxEE--onFogBackground": surfaceBackground === "fog"
+        }), ref: ref })));
+});
+
+var CheckboxPlusnet = React.forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    return React__default['default'].createElement(Checkbox, __assign({}, props, { className: "loop-CheckboxPlusnet", ref: ref }));
+});
+
+/**
  * `Clock` is a demo component that shows the current time.
@@ -353,2 +455,254 @@ */
 
+/**
+ * Use `Heading` to display heading text.
+ */
+var Heading = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className, level = _a.level;
+    var Element = "span";
+    if (level) {
+        Element = "h" + level;
+    }
+    return (React__default['default'].createElement(Element, { className: classnames((_b = {
+                "loop-Heading": true
+            },
+            _b["" + className] = className,
+            _b)) }, children));
+};
+
+/**
+ * Use `HeadingBT` to display heading text.
+ */
+var HeadingBT = function (_a) {
+    var _b;
+    var children = _a.children, isBold = _a.isBold, size = _a.size, props = __rest(_a, ["children", "isBold", "size"]);
+    return (React__default['default'].createElement(Heading, __assign({ className: classnames((_b = {
+                "loop-HeadingBT": true
+            },
+            _b["loop-HeadingBT--size" + (size && size.toUpperCase())] = size,
+            _b["loop-HeadingBT--bold"] = isBold && size && ["xs", "s", "m"].includes(size),
+            _b)) }, props), children));
+};
+
+/**
+ * Use `HeadingEE` to display heading text.
+ */
+var HeadingEE = function (_a) {
+    var _b;
+    var children = _a.children, isBold = _a.isBold, isNotUppercase = _a.isNotUppercase, size = _a.size, props = __rest(_a, ["children", "isBold", "isNotUppercase", "size"]);
+    return (React__default['default'].createElement(Heading, __assign({ className: classnames((_b = {
+                "loop-HeadingEE": true
+            },
+            _b["loop-HeadingEE--size" + (size && size.toUpperCase())] = size,
+            _b["loop-HeadingEE--notUppercase"] = isNotUppercase && size === "xxxl",
+            _b["loop-HeadingEE--bold"] = isBold && size !== "xxxl",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `HeadingPlusnet` to display heading text.
+ */
+var HeadingPlusnet = function (_a) {
+    var _b;
+    var children = _a.children, size = _a.size, isRegularWeight = _a.isRegularWeight, props = __rest(_a, ["children", "size", "isRegularWeight"]);
+    return (React__default['default'].createElement(Heading, __assign({ className: classnames((_b = {
+                "loop-HeadingPlusnet": true
+            },
+            _b["loop-HeadingPlusnet--size" + (size && size.toUpperCase())] = size,
+            _b["loop-HeadingPlusnet--regularWeight"] = isRegularWeight,
+            _b)) }, props), children));
+};
+
+/**
+ * Use `Paragraph` to typeset text in paragraphs.
+ */
+var Paragraph = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className, isMeasured = _a.isMeasured;
+    return (React__default['default'].createElement("p", { className: classnames((_b = {
+                "loop-Paragraph": true,
+                "loop-Paragraph--measured": isMeasured
+            },
+            _b["" + className] = className,
+            _b)) }, children));
+};
+
+/**
+ * Use `ParagraphBT` to typeset text in paragraphs.
+ */
+var ParagraphBT = function (_a) {
+    var _b;
+    var children = _a.children, isCondensed = _a.isCondensed, size = _a.size, props = __rest(_a, ["children", "isCondensed", "size"]);
+    return (React__default['default'].createElement(Paragraph, __assign({ className: classnames((_b = {
+                "loop-ParagraphBT": true
+            },
+            _b["loop-ParagraphBT--size" + (size && size.toUpperCase())] = size && size !== "m",
+            _b["loop-ParagraphBT--condensed"] = isCondensed && size === "s",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `ParagraphEE` to typeset text in paragraphs.
+ */
+var ParagraphEE = function (_a) {
+    var _b;
+    var children = _a.children, size = _a.size, props = __rest(_a, ["children", "size"]);
+    return (React__default['default'].createElement(Paragraph, __assign({ className: classnames((_b = {
+                "loop-ParagraphEE": true
+            },
+            _b["loop-ParagraphEE--size" + (size && size.toUpperCase())] = size && size !== "m",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `ParagraphPlusnet` to display heading text.
+ */
+var ParagraphPlusnet = function (_a) {
+    var _b;
+    var children = _a.children, size = _a.size, props = __rest(_a, ["children", "size"]);
+    return (React__default['default'].createElement(Paragraph, __assign({ className: classnames((_b = {
+                "loop-ParagraphPlusnet": true
+            },
+            _b["loop-ParagraphPlusnet--size" + (size && size.toUpperCase())] = size && size !== "m",
+            _b)) }, props), children));
+};
+
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+var FormControl = function (_a) {
+    var _b;
+    var className = _a.className, children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, label = _a.label;
+    var _e = useAriaDescribedby({
+        errorMessage: errorMessage,
+        helper: helper,
+        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
+    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
+    var LabelType = ElementType === "div" ? "label" : "legend";
+    var elementProps = {};
+    var labelProps = {};
+    if (LabelType === "label") {
+        labelProps["htmlFor"] = htmlFor;
+        if (htmlFor) {
+            labelProps["id"] = htmlFor + "-label";
+        }
+        else if (id) {
+            labelProps["id"] = id + "-label";
+        }
+    }
+    else {
+        elementProps["aria-describedby"] = ariaDescribedby;
+    }
+    return (React__default['default'].createElement(ElementType, __assign({ className: classnames((_b = {
+                "loop-FormControl": true
+            },
+            _b["" + className] = className,
+            _b)), id: id }, elementProps),
+        React__default['default'].createElement(LabelType, __assign({ className: "loop-FormControl-label" }, labelProps),
+            label,
+            " ",
+            !isRequired && (React__default['default'].createElement("span", { className: "loop-FormControl-labelOptional" }, "(Optional)"))),
+        helper && (React__default['default'].createElement("div", { className: "loop-FormControl-helper", id: idHelper }, helper)),
+        children,
+        errorMessage && (React__default['default'].createElement("div", { className: "loop-FormControl-error", id: idError }, errorMessage))));
+};
+
+/**
+ * Use `TextInput` to allow custom user text entry with a keyboard.
+ */
+var TextInput = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, inputMode = _a.inputMode, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, label = _a.label, maxLength = _a.maxLength, minLength = _a.minLength, name = _a.name, onChange = _a.onChange, pattern = _a.pattern, _g = _a.renderFormControl, renderFormControl = _g === void 0 ? FormControl : _g, _h = _a.type, type = _h === void 0 ? "text" : _h, value = _a.value;
+    var inferredInputProps = useNumericInput({ inputMode: inputMode, pattern: pattern, type: type });
+    var FormControlWrapper = renderFormControl;
+    // Although this is used within FormControlWrapper, it's deterministic so we can call it here too
+    var ariaDescribedby = useAriaDescribedby({
+        errorMessage: errorMessage,
+        id: id,
+        helper: helper
+    }).ariaDescribedby;
+    return (React__default['default'].createElement("div", { className: classnames((_b = {
+                "loop-TextInput": true,
+                "loop-TextInput--invalid": errorMessage
+            },
+            _b["" + className] = className,
+            _b)) },
+        React__default['default'].createElement(FormControlWrapper, { errorMessage: errorMessage, helper: helper, htmlFor: id, isRequired: isRequired, label: label },
+            React__default['default'].createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-required": isRequired ? "true" : undefined, className: "loop-TextInput-input", defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, id: id, maxLength: maxLength, minLength: minLength, name: name, onChange: onChange, readOnly: isReadOnly, ref: ref, required: isRequired, value: typeof value !== "undefined" ? value : undefined }, inferredInputProps)))));
+});
+
+/**
+ * Use `FormControlBT` to provide inputs with labels, helper text and error messages
+ */
+var FormControlBT = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, props = __rest(_a, ["className", "labelSize"]);
+    return (React__default['default'].createElement(FormControl, __assign({ className: classnames((_b = {
+                "loop-FormControlBT": true,
+                "loop-FormControlBT--smallLabel": labelSize === "s"
+            },
+            _b["" + className] = className,
+            _b)) }, props)));
+};
+
+/**
+ * Use `FormControlEE` to provide inputs with labels, helper text and error messages
+ */
+var FormControlEE = function (_a) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var surfaceBackground = React.useContext(Context).surfaceBackground;
+    return (React__default['default'].createElement(FormControl, __assign({ className: classnames((_b = {
+                "loop-FormControlEE": true,
+                "loop-FormControlEE--onFogBackground": surfaceBackground === "fog"
+            },
+            _b["" + className] = className,
+            _b)) }, props)));
+};
+
+/**
+ * Use `FormControlPlusnet` to provide inputs with labels, helper text and error messages
+ */
+var FormControlPlusnet = function (_a) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React__default['default'].createElement(FormControl, __assign({ className: classnames((_b = {
+                "loop-FormControlPlusnet": true
+            },
+            _b["" + className] = className,
+            _b)) }, props)));
+};
+
+/**
+ * Use `TextInputBT` to allow custom user text entry with a keyboard.
+ */
+var TextInputBT = React.forwardRef(function (_a, ref) {
+    var _b = _a.labelSize, labelSize = _b === void 0 ? "l" : _b, props = __rest(_a, ["labelSize"]);
+    return (React__default['default'].createElement(TextInput, __assign({ className: classnames({
+            "loop-TextInputBT": true
+        }), ref: ref, renderFormControl: function (controlProps) { return (React__default['default'].createElement(FormControlBT, __assign({}, controlProps, { labelSize: labelSize }))); } }, props)));
+});
+
+/**
+ * Use `TextInputEE` to allow custom user text entry with a keyboard.
+ */
+var TextInputEE = React.forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    var surfaceBackground = React.useContext(Context).surfaceBackground;
+    return (React__default['default'].createElement(TextInput, __assign({ className: classnames({
+            "loop-TextInputEE": true,
+            "loop-TextInputEE--onFogBackground": surfaceBackground === "fog"
+        }), ref: ref, renderFormControl: FormControlEE }, props)));
+});
+
+/**
+ * Use `TextInputPlusnet` to allow custom user text entry with a keyboard.
+ */
+var TextInputPlusnet = React.forwardRef(function (_a, ref) {
+    var props = __rest(_a, []);
+    return (React__default['default'].createElement(TextInput, __assign({ className: classnames({
+            "loop-TextInputPlusnet": true
+        }), ref: ref, renderFormControl: FormControlPlusnet }, props)));
+});
+
 exports.Base = Base;
@@ -362,4 +716,16 @@ exports.BaseBT = BaseBT;
 exports.ButtonPlusnet = ButtonPlusnet;
+exports.Checkbox = Checkbox;
+exports.CheckboxBT = CheckboxBT;
+exports.CheckboxEE = CheckboxEE;
+exports.CheckboxPlusnet = CheckboxPlusnet;
 exports.Clock = Clock;
 exports.ClockRehydrator = Clock_rehydrator;
+exports.Heading = Heading;
+exports.HeadingBT = HeadingBT;
+exports.HeadingEE = HeadingEE;
+exports.HeadingPlusnet = HeadingPlusnet;
+exports.Paragraph = Paragraph;
+exports.ParagraphBT = ParagraphBT;
+exports.ParagraphEE = ParagraphEE;
+exports.ParagraphPlusnet = ParagraphPlusnet;
 exports.Surface = Surface;
@@ -370,2 +736,6 @@ exports.SurfaceBT = SurfaceBT;
 exports.SurfacePlusnet = SurfacePlusnet;
+exports.TextInput = TextInput;
+exports.TextInputBT = TextInputBT;
+exports.TextInputEE = TextInputEE;
+exports.TextInputPlusnet = TextInputPlusnet;
 //# sourceMappingURL=index.js.map

dist/types/components/Button/Button.d.ts

@@ -1,3 +0,5 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import "./Button.css";
+export declare type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+export declare type Ref = React.Ref<ElementUnion> | null;
 /**
@@ -64,2 +66,6 @@ * Use `Button` to allow users to take actions with clicks and taps.
     /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
      * Optional string to render in a `data-testid` attribute to allow the Button
@@ -66,0 +72,0 @@ * to be found in tests.

dist/types/components/index.d.ts

@@ -9,3 +9,15 @@ export { default as Base } from "./Base";
 export { default as ButtonPlusnet } from "./Button/ButtonPlusnet";
+export { default as Checkbox } from "./Checkbox";
+export { default as CheckboxBT } from "./Checkbox/CheckboxBT";
+export { default as CheckboxEE } from "./Checkbox/CheckboxEE";
+export { default as CheckboxPlusnet } from "./Checkbox/CheckboxPlusnet";
 export { default as Clock, ClockRehydrator } from "./Clock";
+export { default as Heading } from "./Heading";
+export { default as HeadingBT } from "./Heading/HeadingBT";
+export { default as HeadingEE } from "./Heading/HeadingEE";
+export { default as HeadingPlusnet } from "./Heading/HeadingPlusnet";
+export { default as Paragraph } from "./Paragraph";
+export { default as ParagraphBT } from "./Paragraph/ParagraphBT";
+export { default as ParagraphEE } from "./Paragraph/ParagraphEE";
+export { default as ParagraphPlusnet } from "./Paragraph/ParagraphPlusnet";
 export { default as Surface, SurfaceContext } from "./Surface";
@@ -15,1 +27,5 @@ export { default as SurfaceBT } from "./Surface/SurfaceBT";
 export { default as SurfacePlusnet } from "./Surface/SurfacePlusnet";
+export { default as TextInput } from "./TextInput";
+export { default as TextInputBT } from "./TextInput/TextInputBT";
+export { default as TextInputEE } from "./TextInput/TextInputEE";
+export { default as TextInputPlusnet } from "./TextInput/TextInputPlusnet";

package.json

 {
   "name": "@btdigital/loop-components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "homepage": "https://design.bt.com",
@@ -13,3 +13,2 @@ "main": "dist/index.js",
     "storybook:quiet": "yarn storybook --quiet",
-    "lint": "eslint ./{src,.storybook}",
     "test:unit": "jest"
@@ -28,4 +27,4 @@ },
     "@babel/core": "^7.11.5",
-    "@btdigital/loop-fonts": "^0.6.0",
-    "@btdigital/loop-tokens": "^0.6.0",
+    "@btdigital/loop-fonts": "^0.7.0",
+    "@btdigital/loop-tokens": "^0.7.0",
     "@rollup/plugin-commonjs": "^15.0.0",
@@ -47,4 +46,2 @@ "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/testing-library__react": "^10.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
     "@whitespace/storybook-addon-html": "^2.0.1",
@@ -55,10 +52,4 @@ "babel-eslint": "^10.0.0",
     "classnames": "^2.2.6",
-    "eslint": "^7.5.0",
-    "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^24.0.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
     "jest": "^26.4.2",
+    "postcss-custom-media": "^7.0.8",
     "postcss-import": "^12.0.1",
@@ -65,0 +56,0 @@ "postcss-preset-env": "^6.7.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

236928

increased by86.16%

Dev dependency count

39

decreased by-17.02%

Number of package files

98

increased by164.86%

Lines of code

2281

increased by146.33%

No dependency changes