@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Pagination/Pagination.story.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from "react";
+import { styled } from "styled-components";
+import { action } from "@storybook/addon-actions";
+import { Switch, Switcher } from "../Switcher";
+import { Flex } from "../Flex";
+import { Heading1, Text } from "../Type";
+import { Box } from "../Box";
+import { Pagination } from ".";
+export default {
+    title: "Components/Pagination",
+};
+export const _Pagination = () => (React.createElement(Flex, { gap: "x2", flexDirection: "column" },
+    React.createElement(Pagination, { currentPage: 1, totalPages: 7, onNext: action("next"), onPrevious: action("previous"), onSelectPage: action("selected") }),
+    React.createElement(Pagination, { currentPage: 2, totalPages: 7 }),
+    React.createElement(Pagination, { currentPage: 3, totalPages: 7 }),
+    React.createElement(Pagination, { currentPage: 4, totalPages: 7 }),
+    React.createElement(Pagination, { currentPage: 5, totalPages: 7 }),
+    React.createElement(Pagination, { currentPage: 6, totalPages: 7 }),
+    React.createElement(Pagination, { currentPage: 7, totalPages: 7 })));
+export const OnTheFirstPage = () => React.createElement(Pagination, { currentPage: 1, totalPages: 10 });
+OnTheFirstPage.story = {
+    name: "on the first page",
+};
+export const OnTheLastPage = () => React.createElement(Pagination, { currentPage: 10, totalPages: 10 });
+OnTheLastPage.story = {
+    name: "on the last page",
+};
+export const WithLessThan5Pages = () => React.createElement(Pagination, { currentPage: 3, totalPages: 4 });
+const AccentedRange = styled.input.attrs({ type: "range" }) `
+  accent-color: ${({ theme }) => theme.colors.darkBlue};
+`;
+export const CustomMaxVisiblePages = () => {
+    const [maxVisiblePages, setMaxVisiblePages] = useState(5);
+    const [currentPage, setCurrentPage] = useState(3);
+    const [totalPages, setTotalPages] = useState(12);
+    useEffect(function () {
+        setCurrentPage((page) => Math.min(page, totalPages));
+    }, [totalPages]);
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x3" },
+        React.createElement("label", { htmlFor: "totalPages" },
+            "Total pages: ",
+            totalPages),
+        React.createElement(AccentedRange, { name: "totalPages", min: "1", max: "100", value: totalPages, onChange: (e) => setTotalPages(Number(e.target.value)) }),
+        React.createElement("label", { htmlFor: "currentPage" },
+            "Current page: ",
+            currentPage),
+        React.createElement(AccentedRange, { name: "currentPage", min: "1", max: totalPages, value: currentPage, onChange: (e) => setCurrentPage(Number(e.target.value)) }),
+        React.createElement("label", { htmlFor: "maxVisible" },
+            React.createElement(Text, null,
+                "Max visible pages ",
+                maxVisiblePages),
+            React.createElement(Text, { fontSize: "smaller" }, "Value can be between 3 and 12. Values higher or lower will be clamped.")),
+        React.createElement(AccentedRange, { name: "maxVisible", min: "3", max: "12", value: maxVisiblePages, onChange: (e) => setMaxVisiblePages(Number(e.target.value)) }),
+        React.createElement(Pagination, { maxVisiblePages: maxVisiblePages, currentPage: currentPage, totalPages: totalPages, onNext: () => setCurrentPage((p) => p + 1), onPrevious: () => setCurrentPage((p) => p - 1), onSelectPage: (page) => {
+                setCurrentPage(Number(page));
+            } })));
+};
+WithLessThan5Pages.story = {
+    name: "with less than 5 pages",
+};
+export function ScrollAfterPagination() {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [scrollTarget, setScrollTarget] = useState("none");
+    const ref = useRef(null);
+    const messages = {
+        none: {
+            page: "The page should not scroll after pagination.",
+            section: "",
+        },
+        topOfPage: {
+            page: "The page should scroll to the top after pagination.",
+            section: "",
+        },
+        topOfSection: {
+            page: "This part of the page should not be in the viewport after pagination.",
+            section: "The page should scroll to the top of this section after pagination.",
+        },
+    };
+    return (React.createElement(Flex, { gap: "x2", flexDirection: "column", alignItems: "flex-end" },
+        React.createElement(Flex, { flexDirection: "column", gap: "x1", alignSelf: "flex-start", mb: "x2" },
+            React.createElement(Text, { fontSize: "small", fontWeight: "bold" }, "Scroll target after pagination"),
+            React.createElement(Switcher, { selected: scrollTarget, onChange: setScrollTarget, "aria-label": "scroll target" },
+                React.createElement(Switch, { value: "none" }, "None"),
+                React.createElement(Switch, { value: "topOfPage" }, "Top of page"),
+                React.createElement(Switch, { value: "topOfSection" }, "Top of section"))),
+        React.createElement(Box, { height: "180px", width: "100%" },
+            React.createElement(Heading1, { "data-testid": "page-heading" }, messages[scrollTarget].page)),
+        React.createElement(Box, { ref: ref, p: "x4", height: "1400px", width: "100%", bg: "lightBlue" },
+            React.createElement(Heading1, { "data-testid": "section-heading" }, messages[scrollTarget].section)),
+        React.createElement(Pagination, { scrollToTopAfterPagination: scrollTarget !== "none", scrollTargetRef: scrollTarget === "topOfSection" ? ref : undefined, currentPage: currentPage, totalPages: 7, onNext: () => setCurrentPage((p) => p + 1), onPrevious: () => setCurrentPage((p) => p - 1), onSelectPage: (page) => {
+                setCurrentPage(Number(page));
+            } })));
+}

package/dist/src/Pagination/PaginationButton.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-declare const PaginationButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    disabled?: boolean;
-    currentPage?: boolean;
-    iconOnly?: boolean;
-}>> & string;
-export default PaginationButton;
+/// <reference types="react" />
+declare const PaginationButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    disabled?: boolean;
+    currentPage?: boolean;
+    iconOnly?: boolean;
+}>> & string;
+export default PaginationButton;

package/dist/src/Pagination/PaginationButton.js

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+const getHoverBackground = (currentPage, disabled, theme) => {
+    if (currentPage) {
+        return theme.colors.darkBlue;
+    }
+    if (disabled) {
+        return "initial";
+    }
+    return theme.colors.lightGrey;
+};
+const PaginationButton = styled.button(({ theme, disabled, currentPage, iconOnly }) => ({
+    fontSize: theme.fontSizes.small,
+    padding: iconOnly ? theme.space.x1 : `${theme.space.x1} ${theme.space.x2}`,
+    lineHeight: theme.lineHeights.smallTextBase,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.medium,
+    border: `1px solid ${currentPage ? theme.colors.darkBlue : theme.colors.lightGrey}`,
+    color: disabled ? theme.colors.grey : theme.colors.black,
+    minWidth: iconOnly ? theme.space.x4 : "auto",
+    cursor: disabled ? "default" : "pointer",
+    "&:hover": {
+        background: getHoverBackground(currentPage, disabled, theme),
+    },
+}));
+export default PaginationButton;

package/dist/src/Pagination/PaginationCount.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-type PaginationCountProps = {
-    currentPage: number;
-    totalPages: number;
-};
-declare const PaginationCount: ({ currentPage, totalPages }: PaginationCountProps) => React.JSX.Element;
-export default PaginationCount;
+import React from "react";
+type PaginationCountProps = {
+    currentPage: number;
+    totalPages: number;
+};
+declare const PaginationCount: ({ currentPage, totalPages }: PaginationCountProps) => React.JSX.Element;
+export default PaginationCount;

package/dist/src/Pagination/PaginationCount.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Text } from "../Type";
+const PaginationCount = ({ currentPage, totalPages }) => {
+    const { t } = useTranslation();
+    return (React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase", mx: "x2" }, t("current page of total", { currentPage, totalPages })));
+};
+export default PaginationCount;

package/dist/src/Pagination/PreviousButton.d.ts

@@ -1,10 +1,10 @@
-import React, { ReactNode } from "react";
-type PreviousButtonProps = {
-    disabled: boolean;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    label?: ReactNode;
-    ariaLabel?: string;
-    showIconOnly?: boolean;
-};
-declare const PreviousButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: PreviousButtonProps) => React.JSX.Element;
-export default PreviousButton;
+import React, { ReactNode } from "react";
+type PreviousButtonProps = {
+    disabled: boolean;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    label?: ReactNode;
+    ariaLabel?: string;
+    showIconOnly?: boolean;
+};
+declare const PreviousButton: ({ disabled, onClick, label, ariaLabel, showIconOnly }: PreviousButtonProps) => React.JSX.Element;
+export default PreviousButton;

package/dist/src/Pagination/PreviousButton.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
+import { Icon } from "../Icon";
+import PaginationButton from "./PaginationButton";
+const PreviousButton = ({ disabled = false, onClick = null, label, ariaLabel, showIconOnly }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    return (React.createElement(PaginationButton, { disabled: disabled, onClick: onClick, "aria-label": ariaLabel || t("go to previous results"), iconOnly: showIconOnly },
+        React.createElement(Icon, { icon: "leftArrow", ml: showIconOnly ? "0" : `-${theme.space.x1}` }),
+        !showIconOnly && (label || t("previous"))));
+};
+export default PreviousButton;

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

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

package/dist/src/Pagination/index.js

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

package/dist/src/Pagination/lib.d.ts

@@ -1,9 +1,9 @@
-import { SEPARATOR } from "./Pagination";
-interface PaginationItemsToDisplay {
-    totalPages: number;
-    currentPage: number;
-    maxVisiblePages?: number;
-}
-type PagesToDisplay = (number | typeof SEPARATOR)[];
-export declare function getPageItemsToDisplay({ totalPages, currentPage, maxVisiblePages, }: PaginationItemsToDisplay): PagesToDisplay;
-export {};
+import { SEPARATOR } from "./Pagination";
+interface PaginationItemsToDisplay {
+    totalPages: number;
+    currentPage: number;
+    maxVisiblePages?: number;
+}
+type PagesToDisplay = (number | typeof SEPARATOR)[];
+export declare function getPageItemsToDisplay({ totalPages, currentPage, maxVisiblePages, }: PaginationItemsToDisplay): PagesToDisplay;
+export {};

package/dist/src/Pagination/lib.js

@@ -0,0 +1,39 @@
+function validateAndSetMaxVisiblePages(maxVisiblePages) {
+    if (maxVisiblePages < 3) {
+        console.error("Pagination maxVisiblePages prop must larger than 2. Value changed to 3.");
+        return 3;
+    }
+    if (maxVisiblePages > 12) {
+        console.error("Pagination maxVisiblePages prop must smaller than 13. Value changed to 12.");
+        return 12;
+    }
+    return maxVisiblePages;
+}
+export function getPageItemsToDisplay({ totalPages, currentPage, maxVisiblePages = 6, }) {
+    const pages = [];
+    maxVisiblePages = validateAndSetMaxVisiblePages(maxVisiblePages);
+    if (totalPages <= maxVisiblePages) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const remainingPages = maxVisiblePages - 2;
+    const half = Math.floor((remainingPages - 1) / 2);
+    let left = currentPage - half;
+    let right = currentPage + Math.ceil((remainingPages - 1) / 2);
+    if (left < 2) {
+        left = 2;
+        right = left + remainingPages - 1;
+    }
+    if (right > totalPages - 1) {
+        right = totalPages - 1;
+        left = right - remainingPages + 1;
+    }
+    pages.push(1); // always include the first page
+    if (left > 2)
+        pages.push("...");
+    for (let i = left; i <= right; i++)
+        pages.push(i);
+    if (right < totalPages - 1)
+        pages.push("...");
+    pages.push(totalPages); // always include the last page
+    return pages;
+}

package/dist/src/Popper/Popper.d.ts

@@ -1,20 +1,20 @@
-import React from "react";
-type PopperProps = {
-    children?: React.ReactNode;
-    popperPlacement?: string;
-    defaultOpen?: boolean;
-    showDelay?: string | number;
-    hideDelay?: string | number;
-    id?: string;
-    trigger: React.ReactNode;
-    openOnClick?: boolean;
-    openOnHover?: boolean;
-    modifiers?: {};
-    backgroundColor?: string;
-    borderColor?: string;
-    showArrow?: boolean;
-    openAriaLabel?: string;
-    closeAriaLabel?: string;
-};
-declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<React.Ref<unknown>>>;
-export default Popper;
+import React from "react";
+type PopperProps = {
+    children?: React.ReactNode;
+    popperPlacement?: string;
+    defaultOpen?: boolean;
+    showDelay?: string | number;
+    hideDelay?: string | number;
+    id?: string;
+    trigger: React.ReactNode;
+    openOnClick?: boolean;
+    openOnHover?: boolean;
+    modifiers?: {};
+    backgroundColor?: string;
+    borderColor?: string;
+    showArrow?: boolean;
+    openAriaLabel?: string;
+    closeAriaLabel?: string;
+};
+declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<React.Ref<unknown>>>;
+export default Popper;

package/dist/src/Popper/Popper.js

@@ -0,0 +1,107 @@
+// @ts-nocheck
+import React, { useState, useEffect, useRef } from "react";
+import { Manager, Reference, Popper as ReactPopperPopUp } from "react-popper";
+import { useTranslation } from "react-i18next";
+import { PopperArrow } from "../utils";
+const makeArray = (children) => {
+    if (!Array.isArray(children)) {
+        return [children];
+    }
+    return children;
+};
+const wrapInFunction = (x) => (typeof x === "function" ? x : () => x);
+const Popper = React.forwardRef(({ id, trigger, children, backgroundColor, borderColor, openAriaLabel, closeAriaLabel, modifiers, showDelay = "100", hideDelay = "350", defaultOpen = false, popperPlacement = "bottom", openOnClick = false, openOnHover = true, showArrow = true, }, popperRef) => {
+    // We're going to manage the ID of the timeout in a ref so that we can examine
+    // it without causing a re-render. Note that "0" will denote "no jobs running",
+    // whereas positive values are the ID of the running job.
+    const timeoutId = useRef(0);
+    const resetTimeoutId = () => {
+        clearTimeout(timeoutId.current);
+        timeoutId.current = 0;
+    };
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const conditionallyApplyDelay = (fnc, delay, skipDelay = true) => {
+        if (!skipDelay) {
+            timeoutId.current = setTimeout(fnc, delay);
+        }
+        else {
+            fnc();
+        }
+    };
+    const setPopUpState = (nextIsOpenState, skipDelay) => {
+        resetTimeoutId();
+        conditionallyApplyDelay(() => setIsOpen(nextIsOpenState), nextIsOpenState ? showDelay : hideDelay, skipDelay);
+    };
+    const closePopUp = (skipDelay) => {
+        setPopUpState(false, skipDelay);
+    };
+    useEffect(() => {
+        function handleKeyDown(event) {
+            if (event.code === "Escape") {
+                closePopUp();
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        const cleanup = () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            resetTimeoutId();
+        };
+        return cleanup;
+    }, []);
+    const openPopUp = (skipDelay) => {
+        setPopUpState(true, skipDelay);
+    };
+    const onClickEventHandlers = openOnClick
+        ? {
+            onClick: () => {
+                if (isOpen) {
+                    closePopUp(false);
+                }
+                else {
+                    openPopUp(false);
+                }
+            },
+        }
+        : null;
+    const onHoverHandlers = openOnHover
+        ? {
+            onMouseEnter: () => openPopUp(false),
+            onMouseLeave: () => closePopUp(false),
+        }
+        : null;
+    const eventHandlers = Object.assign(Object.assign({ onFocus: () => openPopUp(false), onBlur: () => {
+            closePopUp(false);
+        } }, onHoverHandlers), onClickEventHandlers);
+    const transformInnerChildren = (elements) => makeArray(elements).map((element, i) => {
+        const transformedElement = wrapInFunction(element)({
+            closeMenu: (e) => {
+                closePopUp();
+                e.stopPropagation();
+            },
+            openMenu: (e) => {
+                openPopUp();
+                e.stopPropagation();
+            },
+        });
+        return React.cloneElement(transformedElement, {
+            // eslint-disable-next-line react/no-array-index-key
+            key: i,
+        });
+    });
+    const renderInnerChildren = () => {
+        const innerChildren = children.props.children;
+        return typeof innerChildren !== "string" ? transformInnerChildren(innerChildren) : innerChildren;
+    };
+    const { t } = useTranslation();
+    const openLabel = openAriaLabel || t("open");
+    const closeLabel = closeAriaLabel || t("close");
+    return (React.createElement(Manager, { ref: popperRef },
+        React.createElement(Reference, null, ({ ref }) => React.cloneElement(trigger, Object.assign(Object.assign({ "aria-haspopup": true, "aria-expanded": isOpen, "aria-describedby": id, "aria-label": isOpen ? closeLabel : openLabel }, eventHandlers), { ref }))),
+        React.createElement(ReactPopperPopUp, { placement: popperPlacement, modifiers: modifiers }, ({ ref, style, placement, arrowProps }) => (React.createElement(React.Fragment, null, isOpen &&
+            React.cloneElement(children, Object.assign({ open: isOpen, ref,
+                id, style: Object.assign(Object.assign({ position: "absolute" }, (isOpen ? style : null)), { top: isOpen ? 0 : "-9999px" }), dataPlacement: placement, className: `${children.props.className || ""} nds-popper-pop-up` }, eventHandlers), [
+                ...renderInnerChildren(),
+                showArrow && (React.createElement(PopperArrow, Object.assign({ key: "popper-arrow" }, arrowProps, { placement: placement, ref: arrowProps.ref, backgroundColor: backgroundColor, borderColor: borderColor }))),
+            ]))))));
+});
+export default Popper;

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

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

package/dist/src/Popper/index.js

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

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { StyledProps } from "../StyledProps";
-declare const Ul: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, StyledProps>> & string;
-declare const Li: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledProps>> & string;
-export { Ul, Li };
+/// <reference types="react" />
+import { StyledProps } from "../StyledProps";
+declare const Ul: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, StyledProps>> & string;
+declare const Li: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledProps>> & string;
+export { Ul, Li };

package/dist/src/Primitives/index.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+import { addStyledProps } from "../StyledProps";
+const Ul = styled.ul(addStyledProps);
+const Li = styled.li(addStyledProps);
+export { Ul, Li };

package/dist/src/Radio/Radio.d.ts

@@ -1,14 +1,14 @@
-import React, { ReactNode } from "react";
-import { SpaceProps } from "styled-system";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
-type RadioProps = NativeInputProps & SpaceProps & {
-    htmlSize?: number;
-    variant?: ComponentVariant;
-    labelText?: ReactNode;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    error?: boolean;
-};
-declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default Radio;
+import React, { ReactNode } from "react";
+import { SpaceProps } from "styled-system";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
+type RadioProps = NativeInputProps & SpaceProps & {
+    htmlSize?: number;
+    variant?: ComponentVariant;
+    labelText?: ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    error?: boolean;
+};
+declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/dist/src/Radio/Radio.js

@@ -0,0 +1,118 @@
+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 from "styled-components";
+import propTypes from "@styled-system/prop-types";
+import { Box } from "../Box";
+import { Text } from "../Type";
+import { ClickInputLabel } from "../utils";
+import { getSubset, omitSubset } from "../utils/subset";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { variant } from "../StyledProps";
+const radioStyle = (theme) => ({
+    checked: {
+        disabled: {
+            borderColor: theme.colors.lightGrey,
+            backgroundColor: theme.colors.lightGrey,
+        },
+        error: {
+            borderColor: theme.colors.red,
+            backgroundColor: theme.colors.red,
+        },
+        default: {
+            borderColor: theme.colors.darkBlue,
+            backgroundColor: theme.colors.darkBlue,
+        },
+    },
+    unchecked: {
+        disabled: {
+            borderColor: theme.colors.lightGrey,
+            backgroundColor: theme.colors.whiteGrey,
+        },
+        error: {
+            borderColor: theme.colors.red,
+            backgroundColor: theme.colors.white,
+        },
+        default: {
+            borderColor: theme.colors.grey,
+            backgroundColor: theme.colors.white,
+        },
+    },
+});
+const getRadioStyle = (props, checked) => {
+    const radioStyleMap = radioStyle(props.theme);
+    if (props.disabled) {
+        return radioStyleMap[checked].disabled;
+    }
+    if (props.error) {
+        return radioStyleMap[checked].error;
+    }
+    return radioStyleMap[checked].default;
+};
+const VisualRadio = styled.div(({ disabled, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: theme.space.x2,
+    height: theme.space.x2,
+    marginRight: theme.space.x1,
+    borderRadius: theme.radii.rounded,
+    marginTop: theme.space.x0_5,
+    border: "solid 1px",
+    position: "relative",
+    "&:before": {
+        cursor: disabled ? undefined : "pointer",
+        content: "''",
+        display: "none",
+        width: `calc(${theme.sizes.x1} - 2px)`,
+        height: `calc(${theme.sizes.x1} - 2px)`,
+        background: theme.colors.white,
+        borderRadius: theme.radii.rounded,
+    },
+}), ({ theme }) => variant({
+    variants: {
+        touch: {
+            "&:before": {
+                width: `calc(${theme.sizes.x1} - 3px)`,
+                height: `calc(${theme.sizes.x1} - 3px)`,
+            },
+        },
+    },
+}));
+const RadioInput = styled.input((props) => ({
+    position: "absolute",
+    opacity: "0",
+    height: "1px",
+    width: "1px",
+    [`&:focus + ${VisualRadio}`]: {
+        boxShadow: props.theme.shadows.focus,
+    },
+    [`&:checked + ${VisualRadio}`]: Object.assign(Object.assign({}, getRadioStyle(props, "checked")), { "&:before": {
+            display: "block",
+        } }),
+    [`&:not(:checked) + ${VisualRadio}`]: Object.assign({}, getRadioStyle(props, "unchecked")),
+}));
+const Radio = forwardRef((_a, ref) => {
+    var { disabled = false, error = false, required = false, className, labelText, checked, variant } = _a, props = __rest(_a, ["disabled", "error", "required", "className", "labelText", "checked", "variant"]);
+    const componentVariant = useComponentVariant(variant);
+    const spaceProps = getSubset(props, propTypes.space);
+    const restProps = omitSubset(props, propTypes.space);
+    return (React.createElement(Box, Object.assign({ position: "relative", className: className, px: "0" }, spaceProps),
+        React.createElement(ClickInputLabel, { variant: componentVariant, disabled: disabled },
+            React.createElement(RadioInput, Object.assign({ type: "radio", ref: ref, "aria-checked": checked, checked: checked, disabled: disabled, error: error }, restProps, { required: required, "aria-required": required, "aria-invalid": error })),
+            React.createElement(VisualRadio, { disabled: disabled }),
+            React.createElement(Text, { inline: true, disabled: disabled, fontSize: componentVariant === "touch" ? "md" : undefined, lineHeight: componentVariant === "touch" ? "base" : undefined },
+                " ",
+                labelText,
+                " "))));
+});
+export default Radio;