@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Pagination/PaginationButton.js

@@ -0,0 +1,30 @@
+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 {
+  PaginationButton as default
+};
+//# sourceMappingURL=PaginationButton.js.map

package/dist/esm/Pagination/PaginationButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationButton.js","sources":["../../../src/Pagination/PaginationButton.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { DefaultNDSThemeType } from \"../theme\";\n\nconst getHoverBackground = (currentPage: boolean, disabled: boolean, theme: DefaultNDSThemeType) => {\n  if (currentPage) {\n    return theme.colors.darkBlue;\n  }\n  if (disabled) {\n    return \"initial\";\n  }\n  return theme.colors.lightGrey;\n};\n\nconst PaginationButton = styled.button<{\n  disabled?: boolean;\n  currentPage?: boolean;\n  iconOnly?: boolean;\n}>(({ theme, disabled, currentPage, iconOnly }) => ({\n  fontSize: theme.fontSizes.small,\n  padding: iconOnly ? theme.space.x1 : `${theme.space.x1} ${theme.space.x2}`,\n  lineHeight: theme.lineHeights.smallTextBase,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderRadius: theme.radii.medium,\n  border: `1px solid ${currentPage ? theme.colors.darkBlue : theme.colors.lightGrey}`,\n  color: disabled ? theme.colors.grey : theme.colors.black,\n  minWidth: iconOnly ? theme.space.x4 : \"auto\",\n  cursor: disabled ? \"default\" : \"pointer\",\n  \"&:hover\": {\n    background: getHoverBackground(currentPage, disabled, theme),\n  },\n}));\n\nexport default PaginationButton;\n"],"names":[],"mappings":";AAGA,MAAM,qBAAqB,CAAC,aAAsB,UAAmB,UAA+B;AAClG,MAAI,aAAa;AACf,WAAO,MAAM,OAAO;AAAA,EACtB;AACA,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AACA,SAAO,MAAM,OAAO;AACtB;AAEA,MAAM,mBAAmB,OAAO,OAI7B,CAAC,EAAE,OAAO,UAAU,aAAa,gBAAgB;AAAA,EAClD,UAAU,MAAM,UAAU;AAAA,EAC1B,SAAS,WAAW,MAAM,MAAM,KAAK,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EACxE,YAAY,MAAM,YAAY;AAAA,EAC9B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,cAAc,MAAM,MAAM;AAAA,EAC1B,QAAQ,aAAa,cAAc,MAAM,OAAO,WAAW,MAAM,OAAO,SAAS;AAAA,EACjF,OAAO,WAAW,MAAM,OAAO,OAAO,MAAM,OAAO;AAAA,EACnD,UAAU,WAAW,MAAM,MAAM,KAAK;AAAA,EACtC,QAAQ,WAAW,YAAY;AAAA,EAC/B,WAAW;AAAA,IACT,YAAY,mBAAmB,aAAa,UAAU,KAAK;AAAA,EAAA;AAE/D,EAAE;"}

package/dist/esm/Pagination/PaginationCount.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Text from "../Type/Text.js";
+const PaginationCount = ({ currentPage, totalPages }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", mx: "x2", children: t("current page of total", { currentPage, totalPages }) });
+};
+export {
+  PaginationCount as default
+};
+//# sourceMappingURL=PaginationCount.js.map

package/dist/esm/Pagination/PaginationCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationCount.js","sources":["../../../src/Pagination/PaginationCount.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"../Type\";\n\ntype PaginationCountProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nconst PaginationCount = ({ currentPage, totalPages }: PaginationCountProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Text fontSize=\"small\" lineHeight=\"smallTextBase\" mx=\"x2\">\n      {t(\"current page of total\", { currentPage, totalPages })}\n    </Text>\n  );\n};\n\nexport default PaginationCount;\n"],"names":[],"mappings":";;;AASA,MAAM,kBAAkB,CAAC,EAAE,aAAa,iBAAuC;AAC7E,QAAM,EAAE,EAAA,IAAM,eAAA;AAEd,SACE,oBAAC,MAAA,EAAK,UAAS,SAAQ,YAAW,iBAAgB,IAAG,MAClD,UAAA,EAAE,yBAAyB,EAAE,aAAa,WAAA,CAAY,GACzD;AAEJ;"}

package/dist/esm/Pagination/PreviousButton.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+import PaginationButton from "./PaginationButton.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Icon from "../Icon/Icon.js";
+const PreviousButton = ({ disabled = false, onClick = null, label, ariaLabel, showIconOnly }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    PaginationButton,
+    {
+      disabled,
+      onClick,
+      "aria-label": ariaLabel || t("go to previous results"),
+      iconOnly: showIconOnly,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: "leftArrow", ml: showIconOnly ? "0" : `-${theme.space.x1}` }),
+        !showIconOnly && (label || t("previous"))
+      ]
+    }
+  );
+};
+export {
+  PreviousButton as default
+};
+//# sourceMappingURL=PreviousButton.js.map

package/dist/esm/Pagination/PreviousButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviousButton.js","sources":["../../../src/Pagination/PreviousButton.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTheme } from \"styled-components\";\nimport { Icon } from \"../Icon\";\nimport PaginationButton from \"./PaginationButton\";\n\ntype PreviousButtonProps = {\n  disabled: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  label?: ReactNode;\n  ariaLabel?: string;\n  showIconOnly?: boolean;\n};\n\nconst PreviousButton = ({ disabled = false, onClick = null, label, ariaLabel, showIconOnly }: PreviousButtonProps) => {\n  const { t } = useTranslation();\n  const theme = useTheme();\n\n  return (\n    <PaginationButton\n      disabled={disabled}\n      onClick={onClick}\n      aria-label={ariaLabel || t(\"go to previous results\")}\n      iconOnly={showIconOnly}\n    >\n      <Icon icon=\"leftArrow\" ml={showIconOnly ? \"0\" : `-${theme.space.x1}`} />\n      {!showIconOnly && (label || t(\"previous\"))}\n    </PaginationButton>\n  );\n};\n\nexport default PreviousButton;\n"],"names":[],"mappings":";;;;;AAcA,MAAM,iBAAiB,CAAC,EAAE,WAAW,OAAO,UAAU,MAAM,OAAO,WAAW,mBAAwC;AACpH,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,QAAQ,SAAA;AAEd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAY,aAAa,EAAE,wBAAwB;AAAA,MACnD,UAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAK,aAAY,IAAI,eAAe,MAAM,IAAI,MAAM,MAAM,EAAE,GAAA,CAAI;AAAA,QACrE,CAAC,iBAAiB,SAAS,EAAE,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9C;"}

package/dist/esm/Pagination/lib.js

@@ -0,0 +1,44 @@
+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;
+}
+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);
+  if (left > 2) pages.push("...");
+  for (let i = left; i <= right; i++) pages.push(i);
+  if (right < totalPages - 1) pages.push("...");
+  pages.push(totalPages);
+  return pages;
+}
+export {
+  getPageItemsToDisplay
+};
+//# sourceMappingURL=lib.js.map

package/dist/esm/Pagination/lib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.js","sources":["../../../src/Pagination/lib.ts"],"sourcesContent":["import { SEPARATOR } from \"./Pagination\";\n\ninterface PaginationItemsToDisplay {\n  totalPages: number;\n  currentPage: number;\n  maxVisiblePages?: number;\n}\n\ntype PagesToDisplay = (number | typeof SEPARATOR)[];\n\nfunction validateAndSetMaxVisiblePages(maxVisiblePages: number) {\n  if (maxVisiblePages < 3) {\n    console.error(\"Pagination maxVisiblePages prop must larger than 2. Value changed to 3.\");\n    return 3;\n  }\n\n  if (maxVisiblePages > 12) {\n    console.error(\"Pagination maxVisiblePages prop must smaller than 13. Value changed to 12.\");\n    return 12;\n  }\n\n  return maxVisiblePages;\n}\n\nexport function getPageItemsToDisplay({\n  totalPages,\n  currentPage,\n  maxVisiblePages = 6,\n}: PaginationItemsToDisplay): PagesToDisplay {\n  const pages: PagesToDisplay = [];\n  maxVisiblePages = validateAndSetMaxVisiblePages(maxVisiblePages);\n\n  if (totalPages <= maxVisiblePages) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const remainingPages = maxVisiblePages - 2;\n  const half = Math.floor((remainingPages - 1) / 2);\n\n  let left = currentPage - half;\n  let right = currentPage + Math.ceil((remainingPages - 1) / 2);\n\n  if (left < 2) {\n    left = 2;\n    right = left + remainingPages - 1;\n  }\n\n  if (right > totalPages - 1) {\n    right = totalPages - 1;\n    left = right - remainingPages + 1;\n  }\n\n  pages.push(1); // always include the first page\n\n  if (left > 2) pages.push(\"...\");\n\n  for (let i = left; i <= right; i++) pages.push(i);\n\n  if (right < totalPages - 1) pages.push(\"...\");\n\n  pages.push(totalPages); // always include the last page\n\n  return pages;\n}\n"],"names":[],"mappings":"AAUA,SAAS,8BAA8B,iBAAyB;AAC9D,MAAI,kBAAkB,GAAG;AACvB,YAAQ,MAAM,yEAAyE;AACvF,WAAO;AAAA,EACT;AAEA,MAAI,kBAAkB,IAAI;AACxB,YAAQ,MAAM,4EAA4E;AAC1F,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,GAA6C;AAC3C,QAAM,QAAwB,CAAA;AAC9B,oBAAkB,8BAA8B,eAAe;AAE/D,MAAI,cAAc,iBAAiB;AACjC,WAAO,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,EAC3D;AAEA,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,OAAO,KAAK,OAAO,iBAAiB,KAAK,CAAC;AAEhD,MAAI,OAAO,cAAc;AACzB,MAAI,QAAQ,cAAc,KAAK,MAAM,iBAAiB,KAAK,CAAC;AAE5D,MAAI,OAAO,GAAG;AACZ,WAAO;AACP,YAAQ,OAAO,iBAAiB;AAAA,EAClC;AAEA,MAAI,QAAQ,aAAa,GAAG;AAC1B,YAAQ,aAAa;AACrB,WAAO,QAAQ,iBAAiB;AAAA,EAClC;AAEA,QAAM,KAAK,CAAC;AAEZ,MAAI,OAAO,EAAG,OAAM,KAAK,KAAK;AAE9B,WAAS,IAAI,MAAM,KAAK,OAAO,IAAK,OAAM,KAAK,CAAC;AAEhD,MAAI,QAAQ,aAAa,EAAG,OAAM,KAAK,KAAK;AAE5C,QAAM,KAAK,UAAU;AAErB,SAAO;AACT;"}

package/dist/esm/Popper/Popper.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default, { useRef, useState, useEffect } from "react";
+import Popper$1 from "../node_modules/.pnpm/react-popper@1.3.11_react@18.3.1/node_modules/react-popper/lib/esm/Popper.js";
+import Manager from "../node_modules/.pnpm/react-popper@1.3.11_react@18.3.1/node_modules/react-popper/lib/esm/Manager.js";
+import Reference from "../node_modules/.pnpm/react-popper@1.3.11_react@18.3.1/node_modules/react-popper/lib/esm/Reference.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import PopperArrow from "../utils/PopperArrow.js";
+const makeArray = (children) => {
+  if (!Array.isArray(children)) {
+    return [children];
+  }
+  return children;
+};
+const wrapInFunction = (x) => typeof x === "function" ? x : () => x;
+const Popper = React__default.forwardRef(
+  ({
+    id,
+    trigger,
+    children,
+    backgroundColor,
+    borderColor,
+    openAriaLabel,
+    closeAriaLabel,
+    modifiers,
+    showDelay = "100",
+    hideDelay = "350",
+    defaultOpen = false,
+    popperPlacement = "bottom",
+    openOnClick = false,
+    openOnHover = true,
+    showArrow = true
+  }, popperRef) => {
+    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 = {
+      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__default.cloneElement(transformedElement, {
+        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 /* @__PURE__ */ jsxs(Manager, { ref: popperRef, children: [
+      /* @__PURE__ */ jsx(Reference, { children: ({ ref }) => React__default.cloneElement(trigger, {
+        "aria-haspopup": true,
+        "aria-expanded": isOpen,
+        "aria-describedby": id,
+        "aria-label": isOpen ? closeLabel : openLabel,
+        ...eventHandlers,
+        ref
+      }) }),
+      /* @__PURE__ */ jsx(Popper$1, { placement: popperPlacement, modifiers, children: ({ ref, style, placement, arrowProps }) => /* @__PURE__ */ jsx(Fragment, { children: isOpen && React__default.cloneElement(
+        children,
+        {
+          open: isOpen,
+          ref,
+          id,
+          style: {
+            position: "absolute",
+            ...isOpen ? style : null,
+            top: isOpen ? 0 : "-9999px"
+          },
+          dataPlacement: placement,
+          className: `${children.props.className || ""} nds-popper-pop-up`,
+          ...eventHandlers
+        },
+        [
+          ...renderInnerChildren(),
+          showArrow && /* @__PURE__ */ jsx(
+            PopperArrow,
+            {
+              ...arrowProps,
+              placement,
+              ref: arrowProps.ref,
+              backgroundColor,
+              borderColor
+            },
+            "popper-arrow"
+          )
+        ]
+      ) }) })
+    ] });
+  }
+);
+export {
+  Popper as default
+};
+//# sourceMappingURL=Popper.js.map

package/dist/esm/Popper/Popper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popper.js","sources":["../../../src/Popper/Popper.tsx"],"sourcesContent":["// @ts-nocheck\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { Manager, Reference, Popper as ReactPopperPopUp } from \"react-popper\";\nimport { useTranslation } from \"react-i18next\";\nimport { PopperArrow } from \"../utils\";\n\nconst makeArray = (children) => {\n  if (!Array.isArray(children)) {\n    return [children];\n  }\n  return children;\n};\n\nconst wrapInFunction = (x: unknown) => (typeof x === \"function\" ? x : () => x);\n\ntype PopperProps = {\n  children?: React.ReactNode;\n  popperPlacement?: string;\n  defaultOpen?: boolean;\n  showDelay?: string | number;\n  hideDelay?: string | number;\n  id?: string;\n  trigger: React.ReactNode;\n  openOnClick?: boolean;\n  openOnHover?: boolean;\n  modifiers?: {};\n  backgroundColor?: string;\n  borderColor?: string;\n  showArrow?: boolean;\n  openAriaLabel?: string;\n  closeAriaLabel?: string;\n};\n\nconst Popper = React.forwardRef<React.Ref<unknown>, PopperProps>(\n  (\n    {\n      id,\n      trigger,\n      children,\n      backgroundColor,\n      borderColor,\n      openAriaLabel,\n      closeAriaLabel,\n      modifiers,\n      showDelay = \"100\",\n      hideDelay = \"350\",\n      defaultOpen = false,\n      popperPlacement = \"bottom\",\n      openOnClick = false,\n      openOnHover = true,\n      showArrow = true,\n    },\n    popperRef\n  ) => {\n    // We're going to manage the ID of the timeout in a ref so that we can examine\n    // it without causing a re-render. Note that \"0\" will denote \"no jobs running\",\n    // whereas positive values are the ID of the running job.\n    const timeoutId = useRef(0);\n\n    const resetTimeoutId = () => {\n      clearTimeout(timeoutId.current);\n      timeoutId.current = 0;\n    };\n\n    const [isOpen, setIsOpen] = useState(defaultOpen);\n\n    const conditionallyApplyDelay = (fnc: () => void, delay: number, skipDelay = true) => {\n      if (!skipDelay) {\n        timeoutId.current = setTimeout(fnc, delay);\n      } else {\n        fnc();\n      }\n    };\n\n    const setPopUpState = (nextIsOpenState: boolean, skipDelay: boolean) => {\n      resetTimeoutId();\n      conditionallyApplyDelay(() => setIsOpen(nextIsOpenState), nextIsOpenState ? showDelay : hideDelay, skipDelay);\n    };\n\n    const closePopUp = (skipDelay: boolean) => {\n      setPopUpState(false, skipDelay);\n    };\n\n    useEffect(() => {\n      function handleKeyDown(event: KeyboardEvent) {\n        if (event.code === \"Escape\") {\n          closePopUp();\n        }\n      }\n\n      document.addEventListener(\"keydown\", handleKeyDown);\n\n      const cleanup = () => {\n        document.removeEventListener(\"keydown\", handleKeyDown);\n        resetTimeoutId();\n      };\n\n      return cleanup;\n    }, []);\n\n    const openPopUp = (skipDelay: boolean) => {\n      setPopUpState(true, skipDelay);\n    };\n\n    const onClickEventHandlers = openOnClick\n      ? {\n          onClick: () => {\n            if (isOpen) {\n              closePopUp(false);\n            } else {\n              openPopUp(false);\n            }\n          },\n        }\n      : null;\n\n    const onHoverHandlers = openOnHover\n      ? {\n          onMouseEnter: () => openPopUp(false),\n          onMouseLeave: () => closePopUp(false),\n        }\n      : null;\n\n    const eventHandlers = {\n      onFocus: () => openPopUp(false),\n      onBlur: () => {\n        closePopUp(false);\n      },\n      ...onHoverHandlers,\n      ...onClickEventHandlers,\n    };\n\n    const transformInnerChildren = (elements) =>\n      makeArray(elements).map((element, i) => {\n        const transformedElement = wrapInFunction(element)({\n          closeMenu: (e: React.MouseEvent) => {\n            closePopUp();\n            e.stopPropagation();\n          },\n          openMenu: (e: React.MouseEvent) => {\n            openPopUp();\n            e.stopPropagation();\n          },\n        });\n        return React.cloneElement(transformedElement, {\n          key: i,\n        });\n      });\n\n    const renderInnerChildren = () => {\n      const innerChildren = children.props.children;\n      return typeof innerChildren !== \"string\" ? transformInnerChildren(innerChildren) : innerChildren;\n    };\n\n    const { t } = useTranslation();\n\n    const openLabel = openAriaLabel || t(\"open\");\n\n    const closeLabel = closeAriaLabel || t(\"close\");\n\n    return (\n      <Manager ref={popperRef}>\n        <Reference>\n          {({ ref }) =>\n            React.cloneElement(trigger, {\n              \"aria-haspopup\": true,\n              \"aria-expanded\": isOpen,\n              \"aria-describedby\": id,\n              \"aria-label\": isOpen ? closeLabel : openLabel,\n              ...eventHandlers,\n              ref,\n            })\n          }\n        </Reference>\n        <ReactPopperPopUp placement={popperPlacement} modifiers={modifiers}>\n          {({ ref, style, placement, arrowProps }) => (\n            <>\n              {isOpen &&\n                React.cloneElement(\n                  children,\n                  {\n                    open: isOpen,\n                    ref,\n                    id,\n                    style: {\n                      position: \"absolute\",\n                      ...(isOpen ? style : null),\n                      top: isOpen ? 0 : \"-9999px\",\n                    },\n                    dataPlacement: placement,\n                    className: `${children.props.className || \"\"} nds-popper-pop-up`,\n                    ...eventHandlers,\n                  },\n                  [\n                    ...renderInnerChildren(),\n                    showArrow && (\n                      <PopperArrow\n                        key=\"popper-arrow\"\n                        {...arrowProps}\n                        placement={placement}\n                        ref={arrowProps.ref}\n                        backgroundColor={backgroundColor}\n                        borderColor={borderColor}\n                      />\n                    ),\n                  ]\n                )}\n            </>\n          )}\n        </ReactPopperPopUp>\n      </Manager>\n    );\n  }\n);\n\nexport default Popper;\n"],"names":["React","ReactPopperPopUp"],"mappings":";;;;;;;AAMA,MAAM,YAAY,CAAC,aAAa;AAC9B,MAAI,CAAC,MAAM,QAAQ,QAAQ,GAAG;AAC5B,WAAO,CAAC,QAAQ;AAAA,EAClB;AACA,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,MAAgB,OAAO,MAAM,aAAa,IAAI,MAAM;AAoB5E,MAAM,SAASA,eAAM;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,EAAA,GAEd,cACG;AAIH,UAAM,YAAY,OAAO,CAAC;AAE1B,UAAM,iBAAiB,MAAM;AAC3B,mBAAa,UAAU,OAAO;AAC9B,gBAAU,UAAU;AAAA,IACtB;AAEA,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,WAAW;AAEhD,UAAM,0BAA0B,CAAC,KAAiB,OAAe,YAAY,SAAS;AACpF,UAAI,CAAC,WAAW;AACd,kBAAU,UAAU,WAAW,KAAK,KAAK;AAAA,MAC3C,OAAO;AACL,YAAA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,gBAAgB,CAAC,iBAA0B,cAAuB;AACtE,qBAAA;AACA,8BAAwB,MAAM,UAAU,eAAe,GAAG,kBAAkB,YAAY,WAAW,SAAS;AAAA,IAC9G;AAEA,UAAM,aAAa,CAAC,cAAuB;AACzC,oBAAc,OAAO,SAAS;AAAA,IAChC;AAEA,cAAU,MAAM;AACd,eAAS,cAAc,OAAsB;AAC3C,YAAI,MAAM,SAAS,UAAU;AAC3B,qBAAA;AAAA,QACF;AAAA,MACF;AAEA,eAAS,iBAAiB,WAAW,aAAa;AAElD,YAAM,UAAU,MAAM;AACpB,iBAAS,oBAAoB,WAAW,aAAa;AACrD,uBAAA;AAAA,MACF;AAEA,aAAO;AAAA,IACT,GAAG,CAAA,CAAE;AAEL,UAAM,YAAY,CAAC,cAAuB;AACxC,oBAAc,MAAM,SAAS;AAAA,IAC/B;AAEA,UAAM,uBAAuB,cACzB;AAAA,MACE,SAAS,MAAM;AACb,YAAI,QAAQ;AACV,qBAAW,KAAK;AAAA,QAClB,OAAO;AACL,oBAAU,KAAK;AAAA,QACjB;AAAA,MACF;AAAA,IAAA,IAEF;AAEJ,UAAM,kBAAkB,cACpB;AAAA,MACE,cAAc,MAAM,UAAU,KAAK;AAAA,MACnC,cAAc,MAAM,WAAW,KAAK;AAAA,IAAA,IAEtC;AAEJ,UAAM,gBAAgB;AAAA,MACpB,SAAS,MAAM,UAAU,KAAK;AAAA,MAC9B,QAAQ,MAAM;AACZ,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAGL,UAAM,yBAAyB,CAAC,aAC9B,UAAU,QAAQ,EAAE,IAAI,CAAC,SAAS,MAAM;AACtC,YAAM,qBAAqB,eAAe,OAAO,EAAE;AAAA,QACjD,WAAW,CAAC,MAAwB;AAClC,qBAAA;AACA,YAAE,gBAAA;AAAA,QACJ;AAAA,QACA,UAAU,CAAC,MAAwB;AACjC,oBAAA;AACA,YAAE,gBAAA;AAAA,QACJ;AAAA,MAAA,CACD;AACD,aAAOA,eAAM,aAAa,oBAAoB;AAAA,QAC5C,KAAK;AAAA,MAAA,CACN;AAAA,IACH,CAAC;AAEH,UAAM,sBAAsB,MAAM;AAChC,YAAM,gBAAgB,SAAS,MAAM;AACrC,aAAO,OAAO,kBAAkB,WAAW,uBAAuB,aAAa,IAAI;AAAA,IACrF;AAEA,UAAM,EAAE,EAAA,IAAM,eAAA;AAEd,UAAM,YAAY,iBAAiB,EAAE,MAAM;AAE3C,UAAM,aAAa,kBAAkB,EAAE,OAAO;AAE9C,WACE,qBAAC,SAAA,EAAQ,KAAK,WACZ,UAAA;AAAA,MAAA,oBAAC,aACE,UAAA,CAAC,EAAE,UACFA,eAAM,aAAa,SAAS;AAAA,QAC1B,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,oBAAoB;AAAA,QACpB,cAAc,SAAS,aAAa;AAAA,QACpC,GAAG;AAAA,QACH;AAAA,MAAA,CACD,GAEL;AAAA,MACA,oBAACC,UAAA,EAAiB,WAAW,iBAAiB,WAC3C,UAAA,CAAC,EAAE,KAAK,OAAO,WAAW,WAAA,MACzB,oBAAA,UAAA,EACG,oBACCD,eAAM;AAAA,QACJ;AAAA,QACA;AAAA,UACE,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,UAAU;AAAA,YACV,GAAI,SAAS,QAAQ;AAAA,YACrB,KAAK,SAAS,IAAI;AAAA,UAAA;AAAA,UAEpB,eAAe;AAAA,UACf,WAAW,GAAG,SAAS,MAAM,aAAa,EAAE;AAAA,UAC5C,GAAG;AAAA,QAAA;AAAA,QAEL;AAAA,UACE,GAAG,oBAAA;AAAA,UACH,aACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA,cACJ;AAAA,cACA,KAAK,WAAW;AAAA,cAChB;AAAA,cACA;AAAA,YAAA;AAAA,YALI;AAAA,UAAA;AAAA,QAMN;AAAA,MAEJ,GAEN,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;"}

package/dist/esm/Radio/Radio.js

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { styled } from "styled-components";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import { getSubset, omitSubset } from "../utils/subset.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { variant } from "../StyledProps/index.js";
+import Box from "../Box/Box.js";
+import ClickInputLabel from "../utils/ClickInputLabel.js";
+import Text from "../Type/Text.js";
+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 ? void 0 : "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}`]: {
+    ...getRadioStyle(props, "checked"),
+    "&:before": {
+      display: "block"
+    }
+  },
+  [`&:not(:checked) + ${VisualRadio}`]: {
+    ...getRadioStyle(props, "unchecked")
+  }
+}));
+const Radio = forwardRef(
+  ({ disabled = false, error = false, required = false, className, labelText, checked, variant: variant2, ...props }, ref) => {
+    const componentVariant = useComponentVariant(variant2);
+    const spaceProps = getSubset(props, propTypes.space);
+    const restProps = omitSubset(props, propTypes.space);
+    return /* @__PURE__ */ jsx(Box, { position: "relative", className, px: "0", ...spaceProps, children: /* @__PURE__ */ jsxs(ClickInputLabel, { variant: componentVariant, disabled, children: [
+      /* @__PURE__ */ jsx(
+        RadioInput,
+        {
+          type: "radio",
+          ref,
+          "aria-checked": checked,
+          checked,
+          disabled,
+          error,
+          ...restProps,
+          required,
+          "aria-required": required,
+          "aria-invalid": error
+        }
+      ),
+      /* @__PURE__ */ jsx(VisualRadio, { disabled }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          inline: true,
+          disabled,
+          fontSize: componentVariant === "touch" ? "md" : void 0,
+          lineHeight: componentVariant === "touch" ? "base" : void 0,
+          children: [
+            " ",
+            labelText,
+            " "
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+export {
+  Radio as default
+};
+//# sourceMappingURL=Radio.js.map

package/dist/esm/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from \"react\";\nimport { styled, CSSObject } from \"styled-components\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { SpaceProps } from \"styled-system\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Type\";\nimport { ClickInputLabel } from \"../utils\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { getSubset, omitSubset } from \"../utils/subset\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { variant } from \"../StyledProps\";\n\nconst radioStyle = (theme: DefaultNDSThemeType) => ({\n  checked: {\n    disabled: {\n      borderColor: theme.colors.lightGrey,\n      backgroundColor: theme.colors.lightGrey,\n    },\n    error: {\n      borderColor: theme.colors.red,\n      backgroundColor: theme.colors.red,\n    },\n    default: {\n      borderColor: theme.colors.darkBlue,\n      backgroundColor: theme.colors.darkBlue,\n    },\n  },\n  unchecked: {\n    disabled: {\n      borderColor: theme.colors.lightGrey,\n      backgroundColor: theme.colors.whiteGrey,\n    },\n    error: {\n      borderColor: theme.colors.red,\n      backgroundColor: theme.colors.white,\n    },\n    default: {\n      borderColor: theme.colors.grey,\n      backgroundColor: theme.colors.white,\n    },\n  },\n});\n\nconst getRadioStyle = (props, checked) => {\n  const radioStyleMap = radioStyle(props.theme);\n\n  if (props.disabled) {\n    return radioStyleMap[checked].disabled;\n  }\n  if (props.error) {\n    return radioStyleMap[checked].error;\n  }\n  return radioStyleMap[checked].default;\n};\n\ntype VisualRadioProps = {\n  disabled?: boolean;\n  theme?: DefaultNDSThemeType;\n};\n\nconst VisualRadio = styled.div<VisualRadioProps>(\n  ({ disabled, theme }: VisualRadioProps): CSSObject => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    minWidth: theme.space.x2,\n    height: theme.space.x2,\n    marginRight: theme.space.x1,\n    borderRadius: theme.radii.rounded,\n    marginTop: theme.space.x0_5,\n    border: \"solid 1px\",\n    position: \"relative\",\n    \"&:before\": {\n      cursor: disabled ? undefined : \"pointer\",\n      content: \"''\",\n      display: \"none\",\n      width: `calc(${theme.sizes.x1} - 2px)`,\n      height: `calc(${theme.sizes.x1} - 2px)`,\n      background: theme.colors.white,\n      borderRadius: theme.radii.rounded,\n    },\n  }),\n  ({ theme }) =>\n    variant({\n      variants: {\n        touch: {\n          \"&:before\": {\n            width: `calc(${theme.sizes.x1} - 3px)`,\n            height: `calc(${theme.sizes.x1} - 3px)`,\n          },\n        },\n      },\n    })\n);\n\nconst RadioInput = styled.input<RadioProps>((props) => ({\n  position: \"absolute\",\n  opacity: \"0\",\n  height: \"1px\",\n  width: \"1px\",\n  [`&:focus + ${VisualRadio}`]: {\n    boxShadow: props.theme.shadows.focus,\n  },\n  [`&:checked + ${VisualRadio}`]: {\n    ...getRadioStyle(props, \"checked\"),\n    \"&:before\": {\n      display: \"block\",\n    },\n  },\n  [`&:not(:checked) + ${VisualRadio}`]: {\n    ...getRadioStyle(props, \"unchecked\"),\n  },\n}));\n\ntype NativeInputProps = Omit<React.ComponentPropsWithRef<\"input\">, \"size\">;\n\ntype RadioProps = NativeInputProps &\n  SpaceProps & {\n    htmlSize?: number;\n    variant?: ComponentVariant;\n    labelText?: ReactNode;\n    checked?: boolean;\n    defaultChecked?: boolean;\n    error?: boolean;\n  };\n\ntype Ref = HTMLInputElement;\n\nconst Radio = forwardRef<Ref, RadioProps>(\n  ({ disabled = false, error = false, required = false, className, labelText, checked, variant, ...props }, ref) => {\n    const componentVariant = useComponentVariant(variant);\n    const spaceProps = getSubset(props, propTypes.space);\n    const restProps = omitSubset(props, propTypes.space);\n\n    return (\n      <Box position=\"relative\" className={className} px=\"0\" {...spaceProps}>\n        <ClickInputLabel variant={componentVariant} disabled={disabled}>\n          <RadioInput\n            type=\"radio\"\n            ref={ref}\n            aria-checked={checked}\n            checked={checked}\n            disabled={disabled}\n            error={error}\n            {...restProps}\n            required={required}\n            aria-required={required}\n            aria-invalid={error}\n          />\n          <VisualRadio disabled={disabled} />\n          <Text\n            inline\n            disabled={disabled}\n            fontSize={componentVariant === \"touch\" ? \"md\" : undefined}\n            lineHeight={componentVariant === \"touch\" ? \"base\" : undefined}\n          >\n            {\" \"}\n            {labelText}{\" \"}\n          </Text>\n        </ClickInputLabel>\n      </Box>\n    );\n  }\n);\n\nexport default Radio;\n"],"names":["variant"],"mappings":"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"}

package/dist/esm/Radio/RadioGroup.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { useTheme } from "styled-components";
+import Radio from "./Radio.js";
+import Fieldset from "../Form/Fieldset.js";
+import RequirementText from "../FieldLabel/RequirementText.js";
+import HelpText from "../FieldLabel/HelpText.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+function RadioGroup({
+  className,
+  id,
+  errorMessage,
+  errorList,
+  labelText,
+  helpText,
+  requirementText,
+  ...props
+}) {
+  const otherProps = { ...props, errorMessage, errorList };
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Fieldset, { className, id, children: [
+    /* @__PURE__ */ jsxs("legend", { style: { marginBottom: theme.space.x1 }, children: [
+      /* @__PURE__ */ jsx("span", { style: labelTextStyles(theme), children: labelText }),
+      requirementText && /* @__PURE__ */ jsx(RequirementText, { children: requirementText })
+    ] }),
+    helpText && /* @__PURE__ */ jsx(HelpText, { children: helpText }),
+    getRadioButtons(otherProps),
+    /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+  ] });
+}
+const labelTextStyles = (theme) => ({
+  fontSize: theme.fontSizes.small,
+  fontWeight: Number(theme.fontWeights.bold),
+  lineHeight: theme.lineHeights.smallTextBase
+});
+const getRadioButtons = (props) => {
+  const radioButtons = React__default.Children.map(props.children, (radio) => {
+    const { value, disabled, required, onChange, ...radioProps } = radio.props;
+    return /* @__PURE__ */ jsx(
+      Radio,
+      {
+        ...radioProps,
+        value,
+        disabled: props.disabled || disabled,
+        error: !!(props.errorMessage || props.errorList),
+        required: props.required || required,
+        name: props.name,
+        defaultChecked: value === props.defaultValue ? true : void 0,
+        checked: props.checkedValue && value === props.checkedValue,
+        onChange: props.onChange || onChange
+      }
+    );
+  });
+  return radioButtons;
+};
+export {
+  RadioGroup as default
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/esm/Radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/Radio/RadioGroup.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { HelpText, RequirementText } from \"../FieldLabel\";\nimport { InlineValidation } from \"../Validation\";\nimport { Fieldset } from \"../Form\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport Radio from \"./Radio\";\n\ninterface RadioGroupProps {\n  className?: string;\n  id?: string;\n  errorMessage?: string;\n  errorList?: string[];\n  labelText?: string;\n  helpText?: string;\n  required?: boolean;\n  requirementText?: string;\n  children?: React.ReactNode;\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  checkedValue?: string;\n  default?: boolean;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport default function RadioGroup({\n  className,\n  id,\n  errorMessage,\n  errorList,\n  labelText,\n  helpText,\n  requirementText,\n  ...props\n}: RadioGroupProps) {\n  const otherProps = { ...props, errorMessage, errorList };\n  const theme = useTheme();\n\n  return (\n    <Fieldset className={className} id={id}>\n      <legend style={{ marginBottom: theme.space.x1 }}>\n        <span style={labelTextStyles(theme)}>{labelText}</span>\n        {requirementText && <RequirementText>{requirementText}</RequirementText>}\n      </legend>\n      {helpText && <HelpText>{helpText}</HelpText>}\n      {getRadioButtons(otherProps)}\n      <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n    </Fieldset>\n  );\n}\n\nconst labelTextStyles = (theme: DefaultNDSThemeType): CSSProperties => ({\n  fontSize: theme.fontSizes.small,\n  fontWeight: Number(theme.fontWeights.bold),\n  lineHeight: theme.lineHeights.smallTextBase,\n});\n\nconst getRadioButtons = (props: any) => {\n  const radioButtons = React.Children.map(props.children, (radio) => {\n    const { value, disabled, required, onChange, ...radioProps } = radio.props;\n    return (\n      <Radio\n        {...radioProps}\n        value={value}\n        disabled={props.disabled || disabled}\n        error={!!(props.errorMessage || props.errorList)}\n        required={props.required || required}\n        name={props.name}\n        defaultChecked={value === props.defaultValue ? true : undefined}\n        checked={props.checkedValue && value === props.checkedValue}\n        onChange={props.onChange || onChange}\n      />\n    );\n  });\n\n  return radioButtons;\n};\n"],"names":["React"],"mappings":";;;;;;;;AA0BA,SAAwB,WAAW;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,aAAa,EAAE,GAAG,OAAO,cAAc,UAAA;AAC7C,QAAM,QAAQ,SAAA;AAEd,SACE,qBAAC,UAAA,EAAS,WAAsB,IAC9B,UAAA;AAAA,IAAA,qBAAC,YAAO,OAAO,EAAE,cAAc,MAAM,MAAM,MACzC,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,OAAO,gBAAgB,KAAK,GAAI,UAAA,WAAU;AAAA,MAC/C,mBAAmB,oBAAC,iBAAA,EAAiB,UAAA,gBAAA,CAAgB;AAAA,IAAA,GACxD;AAAA,IACC,YAAY,oBAAC,UAAA,EAAU,UAAA,SAAA,CAAS;AAAA,IAChC,gBAAgB,UAAU;AAAA,IAC3B,oBAAC,kBAAA,EAAiB,IAAG,MAAK,cAA4B,UAAA,CAAsB;AAAA,EAAA,GAC9E;AAEJ;AAEA,MAAM,kBAAkB,CAAC,WAA+C;AAAA,EACtE,UAAU,MAAM,UAAU;AAAA,EAC1B,YAAY,OAAO,MAAM,YAAY,IAAI;AAAA,EACzC,YAAY,MAAM,YAAY;AAChC;AAEA,MAAM,kBAAkB,CAAC,UAAe;AACtC,QAAM,eAAeA,eAAM,SAAS,IAAI,MAAM,UAAU,CAAC,UAAU;AACjE,UAAM,EAAE,OAAO,UAAU,UAAU,UAAU,GAAG,WAAA,IAAe,MAAM;AACrE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,UAAU,MAAM,YAAY;AAAA,QAC5B,OAAO,CAAC,EAAE,MAAM,gBAAgB,MAAM;AAAA,QACtC,UAAU,MAAM,YAAY;AAAA,QAC5B,MAAM,MAAM;AAAA,QACZ,gBAAgB,UAAU,MAAM,eAAe,OAAO;AAAA,QACtD,SAAS,MAAM,gBAAgB,UAAU,MAAM;AAAA,QAC/C,UAAU,MAAM,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlC,CAAC;AAED,SAAO;AACT;"}

package/dist/esm/RangeContainer/RangeContainer.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type.js";
+import { getSubset, omitSubset } from "../utils/subset.js";
+import Flex from "../Flex/Flex.js";
+import FieldLabel from "../FieldLabel/FieldLabel.js";
+import Text from "../Type/Text.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+const RangeContainer = ({
+  startComponent,
+  endComponent,
+  errorMessages = [],
+  labelProps = {
+    ...FieldLabelDefaultProps,
+    labelText: "Range"
+  },
+  variant,
+  ...props
+}) => {
+  const spaceProps = getSubset(props, propTypes.space);
+  const restProps = omitSubset(props, propTypes.space);
+  return /* @__PURE__ */ jsxs(Flex, { ...spaceProps, flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, ...restProps }),
+    /* @__PURE__ */ jsxs(Flex, { flexWrap: "wrap", mt: "x1", mb: errorMessages.length ? "x1" : "x3", children: [
+      /* @__PURE__ */ jsx(Flex, { children: startComponent }),
+      /* @__PURE__ */ jsx(Flex, { px: "half", alignItems: "flex-end", alignSelf: "flex-end", children: /* @__PURE__ */ jsx(Text, { lineHeight: variant === "touch" ? "56px" : "38px", children: "-" }) }),
+      /* @__PURE__ */ jsx(Flex, { children: endComponent })
+    ] }),
+    errorMessages.map((errorMessage, i) => /* @__PURE__ */ jsx(InlineValidation, { errorMessage }, i))
+  ] });
+};
+export {
+  RangeContainer as default
+};
+//# sourceMappingURL=RangeContainer.js.map

package/dist/esm/RangeContainer/RangeContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeContainer.js","sources":["../../../src/RangeContainer/RangeContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { Text } from \"../Type\";\nimport { Flex } from \"../Flex\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport { FieldLabelDefaultProps } from \"../FieldLabel/FieldLabel.type\";\nimport { InlineValidation } from \"../Validation\";\nimport { getSubset, omitSubset } from \"../utils/subset\";\nimport { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\ntype RangeContainerProps = {\n  labelProps?: any;\n  startComponent?: React.ReactNode;\n  endComponent?: React.ReactNode;\n  variant?: ComponentVariant;\n  errorMessages?: (string | undefined)[];\n  children?: React.ReactNode;\n};\n\nconst RangeContainer = ({\n  startComponent,\n  endComponent,\n  errorMessages = [],\n  labelProps = {\n    ...FieldLabelDefaultProps,\n    labelText: \"Range\",\n  },\n  variant,\n  ...props\n}: RangeContainerProps) => {\n  const spaceProps = getSubset(props, propTypes.space);\n  const restProps = omitSubset(props, propTypes.space);\n\n  return (\n    <Flex {...spaceProps} flexDirection=\"column\">\n      <FieldLabel {...labelProps} {...restProps} />\n      <Flex flexWrap=\"wrap\" mt=\"x1\" mb={errorMessages.length ? \"x1\" : \"x3\"}>\n        <Flex>{startComponent}</Flex>\n        <Flex px=\"half\" alignItems=\"flex-end\" alignSelf=\"flex-end\">\n          <Text lineHeight={variant === \"touch\" ? \"56px\" : \"38px\"}>-</Text>\n        </Flex>\n        <Flex>{endComponent}</Flex>\n      </Flex>\n      {errorMessages.map((errorMessage, i) => (\n        <InlineValidation key={i} errorMessage={errorMessage} />\n      ))}\n    </Flex>\n  );\n};\n\nexport default RangeContainer;\n"],"names":[],"mappings":";;;;;;;;AAmBA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,gBAAgB,CAAA;AAAA,EAChB,aAAa;AAAA,IACX,GAAG;AAAA,IACH,WAAW;AAAA,EAAA;AAAA,EAEb;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,aAAa,UAAU,OAAO,UAAU,KAAK;AACnD,QAAM,YAAY,WAAW,OAAO,UAAU,KAAK;AAEnD,SACE,qBAAC,MAAA,EAAM,GAAG,YAAY,eAAc,UAClC,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,UAAA,CAAW;AAAA,IAC3C,qBAAC,MAAA,EAAK,UAAS,QAAO,IAAG,MAAK,IAAI,cAAc,SAAS,OAAO,MAC9D,UAAA;AAAA,MAAA,oBAAC,QAAM,UAAA,eAAA,CAAe;AAAA,0BACrB,MAAA,EAAK,IAAG,QAAO,YAAW,YAAW,WAAU,YAC9C,UAAA,oBAAC,MAAA,EAAK,YAAY,YAAY,UAAU,SAAS,QAAQ,eAAC,GAC5D;AAAA,MACA,oBAAC,QAAM,UAAA,aAAA,CAAa;AAAA,IAAA,GACtB;AAAA,IACC,cAAc,IAAI,CAAC,cAAc,MAChC,oBAAC,kBAAA,EAAyB,aAAA,GAAH,CAA+B,CACvD;AAAA,EAAA,GACH;AAEJ;"}