@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Layout/Header.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+import useMediaQuery from "../hooks/useMediaQuery/useMediaQuery.js";
+import numberFromDimension from "../utils/numberFromDimension/index.js";
+import BackgroundTriangles from "../Decorations/index.js";
+import Flex from "../Flex/Flex.js";
+import { Heading1 } from "../Type/Headings.js";
+import Text from "../Type/Text.js";
+const Header = ({
+  background,
+  renderBreadcrumbs,
+  title,
+  undecorated = false,
+  children,
+  subtitle,
+  breakpoints,
+  renderActions,
+  renderSummary,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const smallBreakpoint = numberFromDimension(breakpoints?.small ?? theme.breakpoints.small);
+  const mediumBreakpoint = numberFromDimension(breakpoints?.medium ?? theme.breakpoints.medium);
+  const m = useMediaQuery(`(max-width: ${mediumBreakpoint}px)`);
+  const sm = useMediaQuery(`(max-width: ${smallBreakpoint}px)`);
+  const bg = background ? background : undecorated ? "transparent" : "whiteGrey";
+  return /* @__PURE__ */ jsxs(Flex, { py: "x1", px: "x3", gap: "x2", position: "relative", bg, ...rest, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        flexGrow: 3,
+        justifyContent: "space-between",
+        flexDirection: m || sm ? "column" : "row",
+        zIndex: "content",
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", children: [
+            renderBreadcrumbs && renderBreadcrumbs(),
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                gap: !sm ? "x2" : void 0,
+                flexDirection: !sm ? "row" : "column",
+                alignItems: !sm ? "center" : void 0,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      alignItems: !sm ? "flex-end" : void 0,
+                      gap: !sm ? "x2" : void 0,
+                      flexDirection: !sm ? "row" : "column",
+                      children: [
+                        title && typeof title === "string" ? /* @__PURE__ */ jsx(Heading1, { mb: "0", children: title }) : title,
+                        subtitle && /* @__PURE__ */ jsx(Text, { pl: !sm ? "x2" : void 0, borderLeft: !sm ? "1px solid" : "none", my: "half", borderColor: "grey", children: subtitle })
+                      ]
+                    }
+                  ),
+                  children && children
+                ]
+              }
+            )
+          ] }),
+          renderSummary && renderSummary()
+        ]
+      }
+    ),
+    renderActions && /* @__PURE__ */ jsx(Flex, { display: "flex", flexGrow: 0, alignItems: "flex-start", zIndex: "content", children: renderActions() }),
+    !undecorated && /* @__PURE__ */ jsx(BackgroundTriangles, { zIndex: 1 })
+  ] });
+};
+export {
+  Header as default
+};
+//# sourceMappingURL=Header.js.map

package/dist/esm/Layout/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../src/Layout/Header.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { Flex } from \"../Flex\";\nimport { Heading1, Text } from \"../Type\";\nimport useMediaQuery from \"../hooks/useMediaQuery\";\nimport numberFromDimension from \"../utils/numberFromDimension\";\nimport BackgroundTriangles from \"../Decorations\";\nimport { BoxProps } from \"../Box\";\n\ntype Breakpoint = string | number;\n\nexport interface HeaderProps extends Omit<BoxProps, \"title\"> {\n  renderBreadcrumbs?: () => ReactNode;\n  title?: ReactNode;\n  subtitle?: string;\n  undecorated?: boolean;\n  renderActions?: () => ReactNode;\n  renderSummary?: () => ReactNode;\n  breakpoints?: {\n    small?: Breakpoint;\n    medium?: Breakpoint;\n  };\n  children?: ReactNode;\n}\n\nconst Header = ({\n  background,\n  renderBreadcrumbs,\n  title,\n  undecorated = false,\n  children,\n  subtitle,\n  breakpoints,\n  renderActions,\n  renderSummary,\n  ...rest\n}: HeaderProps) => {\n  const theme = useTheme();\n\n  const smallBreakpoint = numberFromDimension(breakpoints?.small ?? theme.breakpoints.small);\n  const mediumBreakpoint = numberFromDimension(breakpoints?.medium ?? theme.breakpoints.medium);\n\n  const m = useMediaQuery(`(max-width: ${mediumBreakpoint}px)`);\n  const sm = useMediaQuery(`(max-width: ${smallBreakpoint}px)`);\n\n  const bg = background ? background : undecorated ? \"transparent\" : \"whiteGrey\";\n\n  return (\n    <Flex py=\"x1\" px=\"x3\" gap=\"x2\" position=\"relative\" bg={bg} {...rest}>\n      <Flex\n        flexGrow={3}\n        justifyContent=\"space-between\"\n        flexDirection={m || sm ? \"column\" : \"row\"}\n        zIndex={\"content\" as any}\n      >\n        <Flex flexDirection=\"column\">\n          {renderBreadcrumbs && renderBreadcrumbs()}\n          <Flex\n            gap={!sm ? \"x2\" : undefined}\n            flexDirection={!sm ? \"row\" : \"column\"}\n            alignItems={!sm ? \"center\" : undefined}\n          >\n            <Flex\n              alignItems={!sm ? \"flex-end\" : undefined}\n              gap={!sm ? \"x2\" : undefined}\n              flexDirection={!sm ? \"row\" : \"column\"}\n            >\n              {title && typeof title === \"string\" ? <Heading1 mb=\"0\">{title}</Heading1> : title}\n              {subtitle && (\n                <Text pl={!sm ? \"x2\" : undefined} borderLeft={!sm ? \"1px solid\" : \"none\"} my=\"half\" borderColor=\"grey\">\n                  {subtitle}\n                </Text>\n              )}\n            </Flex>\n\n            {children && children}\n          </Flex>\n        </Flex>\n        {renderSummary && renderSummary()}\n      </Flex>\n\n      {renderActions && (\n        <Flex display=\"flex\" flexGrow={0} alignItems=\"flex-start\" zIndex={\"content\" as any}>\n          {renderActions()}\n        </Flex>\n      )}\n\n      {!undecorated && <BackgroundTriangles zIndex={1} />}\n    </Flex>\n  );\n};\n\nexport default Header;\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,QAAQ,SAAA;AAEd,QAAM,kBAAkB,oBAAoB,aAAa,SAAS,MAAM,YAAY,KAAK;AACzF,QAAM,mBAAmB,oBAAoB,aAAa,UAAU,MAAM,YAAY,MAAM;AAE5F,QAAM,IAAI,cAAc,eAAe,gBAAgB,KAAK;AAC5D,QAAM,KAAK,cAAc,eAAe,eAAe,KAAK;AAE5D,QAAM,KAAK,aAAa,aAAa,cAAc,gBAAgB;AAEnE,SACE,qBAAC,MAAA,EAAK,IAAG,MAAK,IAAG,MAAK,KAAI,MAAK,UAAS,YAAW,IAAS,GAAG,MAC7D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,eAAe,KAAK,KAAK,WAAW;AAAA,QACpC,QAAQ;AAAA,QAER,UAAA;AAAA,UAAA,qBAAC,MAAA,EAAK,eAAc,UACjB,UAAA;AAAA,YAAA,qBAAqB,kBAAA;AAAA,YACtB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,CAAC,KAAK,OAAO;AAAA,gBAClB,eAAe,CAAC,KAAK,QAAQ;AAAA,gBAC7B,YAAY,CAAC,KAAK,WAAW;AAAA,gBAE7B,UAAA;AAAA,kBAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,YAAY,CAAC,KAAK,aAAa;AAAA,sBAC/B,KAAK,CAAC,KAAK,OAAO;AAAA,sBAClB,eAAe,CAAC,KAAK,QAAQ;AAAA,sBAE5B,UAAA;AAAA,wBAAA,SAAS,OAAO,UAAU,WAAW,oBAAC,YAAS,IAAG,KAAK,iBAAM,IAAc;AAAA,wBAC3E,YACC,oBAAC,MAAA,EAAK,IAAI,CAAC,KAAK,OAAO,QAAW,YAAY,CAAC,KAAK,cAAc,QAAQ,IAAG,QAAO,aAAY,QAC7F,UAAA,SAAA,CACH;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAIH,YAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACf,GACF;AAAA,UACC,iBAAiB,cAAA;AAAA,QAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAGjC,iBACC,oBAAC,MAAA,EAAK,SAAQ,QAAO,UAAU,GAAG,YAAW,cAAa,QAAQ,WAC/D,UAAA,cAAA,EAAc,CACjB;AAAA,IAGD,CAAC,eAAe,oBAAC,qBAAA,EAAoB,QAAQ,EAAA,CAAG;AAAA,EAAA,GACnD;AAEJ;"}

package/dist/esm/Layout/Page.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Header from "./Header.js";
+import Flex from "../Flex/Flex.js";
+import Box from "../Box/Box.js";
+const Page = ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }) => /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", flexGrow: fullHeight ? 1 : 0, ...rest, children: [
+  renderHeader ? renderHeader() : (breadcrumbs || title || headerContent) && /* @__PURE__ */ jsx(Header, { renderBreadcrumbs: () => breadcrumbs, title, children: headerContent }),
+  /* @__PURE__ */ jsx(Box, { p: "x3", children })
+] });
+export {
+  Page,
+  Page as default
+};
+//# sourceMappingURL=Page.js.map

package/dist/esm/Layout/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sources":["../../../src/Layout/Page.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { Box } from \"../Box\";\nimport { Flex } from \"../Flex\";\nimport { FlexProps } from \"../Flex/Flex\";\nimport Header from \"./Header\";\n\nexport interface PageProps extends Omit<FlexProps, \"title\"> {\n  breadcrumbs?: ReactNode;\n  title?: ReactNode;\n  children?: ReactNode;\n  headerContent?: ReactNode;\n  fullHeight?: boolean;\n  renderHeader?: () => ReactNode;\n}\n\nexport const Page = ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: PageProps) => (\n  <Flex flexDirection=\"column\" flexGrow={fullHeight ? 1 : 0} {...rest}>\n    {renderHeader\n      ? renderHeader()\n      : (breadcrumbs || title || headerContent) && (\n          <Header renderBreadcrumbs={() => breadcrumbs} title={title}>\n            {headerContent}\n          </Header>\n        )}\n    <Box p=\"x3\">{children}</Box>\n  </Flex>\n);\n\nexport default Page;\n"],"names":[],"mappings":";;;;AAeO,MAAM,OAAO,CAAC,EAAE,aAAa,OAAO,UAAU,eAAe,YAAY,cAAc,GAAG,WAC/F,qBAAC,QAAK,eAAc,UAAS,UAAU,aAAa,IAAI,GAAI,GAAG,MAC5D,UAAA;AAAA,EAAA,eACG,aAAA,KACC,eAAe,SAAS,kBACvB,oBAAC,QAAA,EAAO,mBAAmB,MAAM,aAAa,OAC3C,UAAA,cAAA,CACH;AAAA,EAEN,oBAAC,KAAA,EAAI,GAAE,MAAM,SAAA,CAAS;AAAA,EAAA,CACxB;"}

package/dist/esm/Layout/Sidebar.js

@@ -0,0 +1,226 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { useTheme } from "styled-components";
+import Box, { AnimatedBox } from "../Box/Box.js";
+import { NAVBAR_HEIGHT } from "../BrandedNavBar/NavBar.js";
+import { useScrollLock } from "../utils/useScrollLock.js";
+import { useFeatureFlags } from "../NDSProvider/FeatureFlagsContext.js";
+import { NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "../Navigation/components/shared/constants.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 { AnimatePresence } from "../node_modules/.pnpm/framer-motion@12.35.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import Flex from "../Flex/Flex.js";
+import IconicButton from "../Button/IconicButton.js";
+import Text from "../Type/Text.js";
+import { Heading2 } from "../Type/Headings.js";
+const sidebarWidths = {
+  xs: "400px",
+  s: "520px",
+  m: "640px",
+  l: "768px",
+  xl: "1024px"
+};
+const focusFirstElement = () => {
+  const FOCUSABLE_EL_SELECTOR = "button, a[href], select, textarea, input, [tabindex]:not([tabindex='-1'])";
+  const focusable = document.querySelectorAll(FOCUSABLE_EL_SELECTOR);
+  if (focusable && focusable[0]) {
+    focusable[0].focus();
+  }
+};
+const SidebarOverlay = ({ transitionDuration, top, transparent, zIndex = 799, onClick }) => /* @__PURE__ */ jsx(
+  AnimatedBox,
+  {
+    position: "fixed",
+    top,
+    bottom: "0",
+    left: "0",
+    right: "0",
+    zIndex,
+    bg: !transparent && "rgba(18, 43, 71, 0.5)",
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: transitionDuration },
+    "data-testid": "sidebar-overlay",
+    onMouseDown: onClick
+  }
+);
+function Sidebar({
+  p = "x2",
+  width = "xs",
+  children,
+  onClose,
+  title,
+  isOpen,
+  footer,
+  closeButtonTestId = "sidebar-close-button",
+  closeButtonAriaLabel,
+  offset = "0px",
+  triggerRef,
+  duration = 0.25,
+  top,
+  closeOnOutsideClick = true,
+  overlay = "show",
+  disableScroll = true,
+  hideCloseButton = false,
+  zIndex = "sidebar",
+  helpText,
+  renderHelpText,
+  ...props
+}) {
+  const closeButton = useRef(null);
+  const [shouldUpdateFocus, setShouldUpdateFocus] = useState(false);
+  const { t } = useTranslation();
+  const sideBarRef = useRef(null);
+  const contentRef = useRef(null);
+  const selectedWidth = sidebarWidths[width] ?? width;
+  const { navigationV3 } = useFeatureFlags();
+  const theme = useTheme();
+  top || (top = navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT);
+  useScrollLock({
+    autoLock: overlay && disableScroll && isOpen
+  });
+  useEffect(() => {
+    if (closeButton.current && isOpen) {
+      if (closeButton && closeButton.current) {
+        closeButton.current.focus();
+        setShouldUpdateFocus(true);
+        return;
+      }
+    } else if (shouldUpdateFocus) {
+      if (triggerRef) {
+        triggerRef?.current?.focus();
+      } else {
+        focusFirstElement();
+      }
+    }
+  }, [isOpen, setShouldUpdateFocus]);
+  const variants = {
+    open: {
+      x: 0,
+      right: offset,
+      visiblility: "visible",
+      transition: {
+        duration,
+        when: "beforeChildren"
+      }
+    },
+    closed: {
+      x: "100%",
+      right: "0px",
+      visiblility: "hidden",
+      transition: {
+        duration
+      }
+    }
+  };
+  const childVariants = {
+    open: {
+      opacity: 1,
+      transition: {
+        duration: 0.2
+      }
+    },
+    closed: {
+      opacity: 0,
+      transition: {
+        duration: 0.2
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    closeOnOutsideClick && /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && overlay !== "hide" && /* @__PURE__ */ jsx(
+      SidebarOverlay,
+      {
+        top,
+        transparent: overlay === "transparent" || overlay === false,
+        transitionDuration: duration,
+        zIndex,
+        onClick: closeOnOutsideClick && isOpen && onClose
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      AnimatedBox,
+      {
+        role: "dialog",
+        paddingX: "x1",
+        bg: "white",
+        display: "flex",
+        flexDirection: "column",
+        height: `calc(100% - ${navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT})`,
+        borderLeftWidth: "1px",
+        borderLeftStyle: "solid",
+        borderLeftColor: "lightGrey",
+        animate: isOpen ? "open" : "closed",
+        variants,
+        initial: isOpen ? "open" : "closed",
+        position: "fixed",
+        top,
+        right: offset,
+        width: typeof selectedWidth === "string" ? { default: "100%", small: selectedWidth } : selectedWidth,
+        zIndex,
+        ref: sideBarRef,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              flexDirection: "column",
+              p: "x2",
+              borderBottomWidth: "1px",
+              borderBottomStyle: "solid",
+              borderBottomColor: "lightGrey",
+              children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "x1", children: [
+                /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+                  title && /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", children: /* @__PURE__ */ jsx(Heading2, { mb: 0, children: title }) }),
+                  !hideCloseButton && /* @__PURE__ */ jsx(Box, { marginLeft: "x2", children: /* @__PURE__ */ jsx(
+                    IconicButton,
+                    {
+                      type: "button",
+                      ref: closeButton,
+                      icon: "close",
+                      onClick: onClose,
+                      "data-testid": closeButtonTestId,
+                      "aria-label": closeButtonAriaLabel || t("close")
+                    }
+                  ) })
+                ] }),
+                renderHelpText ? renderHelpText() : helpText && /* @__PURE__ */ jsx(Text, { color: "midGrey", children: helpText })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              p,
+              maxHeight: "100%",
+              overflow: "auto",
+              flexGrow: 1,
+              flexDirection: "column",
+              style: { overflowBehaviour: "contain" },
+              children: /* @__PURE__ */ jsx(AnimatedBox, { variants: childVariants, animate: isOpen ? "open" : "closed", flexGrow: 1, ref: contentRef, children })
+            }
+          ),
+          footer && /* @__PURE__ */ jsx(
+            Box,
+            {
+              position: "sticky",
+              backgroundColor: "white",
+              borderTopWidth: "1px",
+              borderTopStyle: "solid",
+              borderTopColor: "lightGrey",
+              alignSelf: "flex-end",
+              width: "100%",
+              p,
+              pt: "x2",
+              children: footer
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Sidebar as default
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/esm/Layout/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/Layout/Sidebar.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef, RefObject, CSSProperties } from \"react\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTheme } from \"styled-components\";\nimport { ZIndexProps } from \"styled-system\";\nimport { Box } from \"../Box\";\nimport { Flex } from \"../Flex\";\nimport { IconicButton } from \"../Button\";\nimport { Heading2, Text } from \"../Type\";\nimport { AnimatedBoxProps, AnimatedBox } from \"../Box/Box\";\nimport { NAVBAR_HEIGHT } from \"../BrandedNavBar/NavBar\";\nimport { useScrollLock } from \"../utils/useScrollLock\";\nimport { useFeatureFlags } from \"../NDSProvider/FeatureFlagsContext\";\nimport { NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from \"../Navigation/components/shared/constants\";\n\ntype PredefinedSidebarWidth = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\n// We need (string & {}) to allow passing\n// custom values in addition to the predefined width\n// https://twitter.com/mattpocockuk/status/1671908303918473217\ntype SidebarWidth = PredefinedSidebarWidth | (string & {});\n\nconst sidebarWidths: Record<PredefinedSidebarWidth, CSSProperties[\"width\"]> = {\n  xs: \"400px\",\n  s: \"520px\",\n  m: \"640px\",\n  l: \"768px\",\n  xl: \"1024px\",\n} as const;\n\nexport type SidebarProps = Omit<AnimatedBoxProps, \"width\"> & {\n  children?: React.ReactNode;\n  onClose?: () => void;\n  title?: string;\n  isOpen?: boolean;\n  footer?: React.ReactNode;\n  closeButtonTestId?: string;\n  closeButtonAriaLabel?: string;\n  offset?: string;\n  triggerRef?: RefObject<HTMLInputElement | HTMLButtonElement>;\n  duration?: number;\n  closeOnOutsideClick?: boolean;\n  overlay?: boolean | \"show\" | \"hide\" | \"transparent\";\n  disableScroll?: boolean;\n  hideCloseButton?: boolean;\n  width?: SidebarWidth;\n  helpText?: React.ReactNode;\n  renderHelpText?: () => React.ReactNode;\n};\n\nconst focusFirstElement = () => {\n  const FOCUSABLE_EL_SELECTOR = \"button, a[href], select, textarea, input, [tabindex]:not([tabindex='-1'])\";\n  const focusable = document.querySelectorAll(FOCUSABLE_EL_SELECTOR);\n  if (focusable && focusable[0]) {\n    (focusable[0] as HTMLElement).focus();\n  }\n};\n\nconst SidebarOverlay = ({ transitionDuration, top, transparent, zIndex = 799 as any, onClick }) => (\n  <AnimatedBox\n    position=\"fixed\"\n    top={top}\n    bottom=\"0\"\n    left=\"0\"\n    right=\"0\"\n    zIndex={zIndex}\n    bg={!transparent && \"rgba(18, 43, 71, 0.5)\"}\n    initial={{ opacity: 0 }}\n    animate={{ opacity: 1 }}\n    exit={{ opacity: 0 }}\n    transition={{ duration: transitionDuration }}\n    data-testid=\"sidebar-overlay\"\n    onMouseDown={onClick}\n  />\n);\nfunction Sidebar({\n  p = \"x2\",\n  width = \"xs\",\n  children,\n  onClose,\n  title,\n  isOpen,\n  footer,\n  closeButtonTestId = \"sidebar-close-button\",\n  closeButtonAriaLabel,\n  offset = \"0px\",\n  triggerRef,\n  duration = 0.25,\n  top,\n  closeOnOutsideClick = true,\n  overlay = \"show\",\n  disableScroll = true,\n  hideCloseButton = false,\n  zIndex = \"sidebar\" as ZIndexProps[\"zIndex\"],\n  helpText,\n  renderHelpText,\n  ...props\n}: SidebarProps) {\n  const closeButton = useRef(null);\n  const [shouldUpdateFocus, setShouldUpdateFocus] = useState(false);\n  const { t } = useTranslation();\n  const sideBarRef = useRef(null);\n  const contentRef = useRef(null);\n  const selectedWidth = sidebarWidths[width] ?? width;\n\n  const { navigationV3 } = useFeatureFlags();\n  const theme = useTheme();\n\n  top ||= navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT;\n\n  useScrollLock({\n    autoLock: overlay && disableScroll && isOpen,\n  });\n\n  useEffect(() => {\n    if (closeButton.current && isOpen) {\n      if (closeButton && closeButton.current) {\n        closeButton.current.focus();\n        setShouldUpdateFocus(true);\n        return;\n      }\n    } else if (shouldUpdateFocus) {\n      if (triggerRef) {\n        triggerRef?.current?.focus();\n      } else {\n        focusFirstElement();\n      }\n    }\n  }, [isOpen, setShouldUpdateFocus]);\n\n  const variants = {\n    open: {\n      x: 0,\n      right: offset,\n      visiblility: \"visible\",\n      transition: {\n        duration: duration,\n        when: \"beforeChildren\",\n      },\n    },\n    closed: {\n      x: \"100%\",\n      right: \"0px\",\n      visiblility: \"hidden\",\n      transition: {\n        duration: duration,\n      },\n    },\n  };\n\n  const childVariants = {\n    open: {\n      opacity: 1,\n      transition: {\n        duration: 0.2,\n      },\n    },\n    closed: {\n      opacity: 0,\n      transition: {\n        duration: 0.2,\n      },\n    },\n  };\n\n  return (\n    <>\n      {closeOnOutsideClick && (\n        <AnimatePresence>\n          {isOpen && overlay !== \"hide\" && (\n            <SidebarOverlay\n              top={top}\n              transparent={overlay === \"transparent\" || overlay === false}\n              transitionDuration={duration}\n              zIndex={zIndex}\n              onClick={closeOnOutsideClick && isOpen && onClose}\n            />\n          )}\n        </AnimatePresence>\n      )}\n      <AnimatedBox\n        role=\"dialog\"\n        paddingX=\"x1\"\n        bg=\"white\"\n        display=\"flex\"\n        flexDirection=\"column\"\n        height={`calc(100% - ${navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT})`}\n        borderLeftWidth=\"1px\"\n        borderLeftStyle=\"solid\"\n        borderLeftColor=\"lightGrey\"\n        animate={isOpen ? \"open\" : \"closed\"}\n        variants={variants}\n        initial={isOpen ? \"open\" : \"closed\"}\n        position=\"fixed\"\n        top={top}\n        right={offset}\n        width={typeof selectedWidth === \"string\" ? { default: \"100%\", small: selectedWidth } : selectedWidth}\n        zIndex={zIndex}\n        ref={sideBarRef as any}\n        {...props}\n      >\n        <Flex\n          flexDirection=\"column\"\n          p=\"x2\"\n          borderBottomWidth=\"1px\"\n          borderBottomStyle=\"solid\"\n          borderBottomColor=\"lightGrey\"\n        >\n          <Flex flexDirection=\"column\" gap=\"x1\">\n            <Flex justifyContent=\"space-between\" alignItems=\"flex-start\">\n              {title && (\n                <Flex alignItems=\"center\" height=\"100%\">\n                  <Heading2 mb={0}>{title}</Heading2>\n                </Flex>\n              )}\n              {!hideCloseButton && (\n                <Box marginLeft=\"x2\">\n                  <IconicButton\n                    type=\"button\"\n                    ref={closeButton}\n                    icon=\"close\"\n                    onClick={onClose}\n                    data-testid={closeButtonTestId}\n                    aria-label={closeButtonAriaLabel || t(\"close\")}\n                  />\n                </Box>\n              )}\n            </Flex>\n            {renderHelpText ? renderHelpText() : helpText && <Text color=\"midGrey\">{helpText}</Text>}\n          </Flex>\n        </Flex>\n        <Flex\n          p={p}\n          maxHeight=\"100%\"\n          overflow=\"auto\"\n          flexGrow={1}\n          flexDirection=\"column\"\n          style={{ overflowBehaviour: \"contain\" } as CSSProperties}\n        >\n          <AnimatedBox variants={childVariants} animate={isOpen ? \"open\" : \"closed\"} flexGrow={1} ref={contentRef}>\n            {children}\n          </AnimatedBox>\n        </Flex>\n        {footer && (\n          <Box\n            position=\"sticky\"\n            backgroundColor=\"white\"\n            borderTopWidth=\"1px\"\n            borderTopStyle=\"solid\"\n            borderTopColor=\"lightGrey\"\n            alignSelf=\"flex-end\"\n            width=\"100%\"\n            p={p}\n            pt=\"x2\"\n          >\n            {footer}\n          </Box>\n        )}\n      </AnimatedBox>\n    </>\n  );\n}\n\nexport default Sidebar;\n"],"names":[],"mappings":"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"}

package/dist/esm/Link/Link.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { darken as curriedDarken$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import { themeGet } from "../node_modules/.pnpm/@styled-system_theme-get@5.1.2/node_modules/@styled-system/theme-get/dist/index.esm.js";
+import { addStyledProps } from "../StyledProps/index.js";
+import { InlineFlex } from "../Flex/Flex.js";
+import AppTag from "../AppTag/AppTag.js";
+import Icon from "../Icon/Icon.js";
+function Link({ children, forApp, openInNewTab, ...props }) {
+  const openInNewTabProps = openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  const renderContent = () => {
+    if (forApp || openInNewTab) {
+      return /* @__PURE__ */ jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [
+        /* @__PURE__ */ jsx(LinkWrapper, { underline: props.underline, children }),
+        forApp && /* @__PURE__ */ jsx(AppTag, { app: forApp, type: "interactive" }),
+        openInNewTab && /* @__PURE__ */ jsx(Icon, { icon: "openInNew", size: "x2", color: "midGrey" })
+      ] });
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsx(Anchor, { ...openInNewTabProps, ...props, children: renderContent() });
+}
+const LinkWrapper = styled.span(({ underline = true }) => ({
+  textDecoration: underline ? "underline" : "none"
+}));
+const resetButtonStyles = {
+  background: "none",
+  border: "none"
+};
+function getColorFromProps(props) {
+  return themeGet(`colors.${props.color}`, props.color)(props);
+}
+function getColor(props) {
+  return getColorFromProps(props) || props.theme.colors.blue;
+}
+const getHoverColor = (props) => props.hover ? getColor(props) : curriedDarken$1("0.1", getColor(props));
+const Anchor = styled.a(
+  ({ underline = true, as, ...props }) => ({
+    ...resetButtonStyles,
+    padding: as === "button" ? "0" : void 0,
+    textDecoration: underline ? "underline" : "none",
+    fontSize: props.theme.fontSizes.base,
+    color: getColor(props),
+    "&:hover": {
+      cursor: "pointer",
+      color: getHoverColor(props)
+    }
+  }),
+  addStyledProps
+);
+export {
+  Link as default
+};
+//# sourceMappingURL=Link.js.map

package/dist/esm/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../src/Link/Link.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { darken } from \"polished\";\nimport { themeGet } from \"@styled-system/theme-get\";\nimport React from \"react\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { addStyledProps, StyledProps } from \"../StyledProps\";\nimport { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { AppTag } from \"../AppTag\";\nimport { InlineFlex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\nimport { NulogyAppName } from \"../types/NulogyApp\";\n\nexport interface LinkProps extends React.ComponentPropsWithRef<\"a\">, Partial<StyledProps> {\n  underline?: boolean;\n  hover?: string;\n  variant?: ComponentVariant;\n  to?: string;\n  as?: React.ElementType | string;\n  forApp?: NulogyAppName;\n  openInNewTab?: boolean;\n}\n\nexport default function Link({ children, forApp, openInNewTab, ...props }: LinkProps) {\n  const openInNewTabProps = openInNewTab ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {};\n\n  const renderContent = () => {\n    if (forApp || openInNewTab) {\n      return (\n        <InlineFlex alignItems=\"center\" gap=\"half\">\n          <LinkWrapper underline={props.underline}>{children}</LinkWrapper>\n          {forApp && <AppTag app={forApp} type=\"interactive\" />}\n          {openInNewTab && <Icon icon=\"openInNew\" size=\"x2\" color=\"midGrey\" />}\n        </InlineFlex>\n      );\n    }\n\n    return children;\n  };\n\n  return (\n    <Anchor {...openInNewTabProps} {...props}>\n      {renderContent()}\n    </Anchor>\n  );\n}\n\nconst LinkWrapper = styled.span<Pick<LinkProps, \"underline\">>(({ underline = true }) => ({\n  textDecoration: underline ? \"underline\" : \"none\",\n}));\n\nconst resetButtonStyles = {\n  background: \"none\",\n  border: \"none\",\n};\n\ntype StyledLinkProps = LinkProps & {\n  theme: DefaultNDSThemeType;\n};\n\nfunction getColorFromProps(props: StyledLinkProps) {\n  return themeGet(`colors.${props.color}`, props.color)(props);\n}\n\nfunction getColor(props: StyledLinkProps) {\n  return getColorFromProps(props) || props.theme.colors.blue;\n}\n\nconst getHoverColor = (props: StyledLinkProps) => (props.hover ? getColor(props) : darken(\"0.1\", getColor(props)));\n\nconst Anchor = styled.a<LinkProps>(\n  ({ underline = true, as, ...props }) => ({\n    ...resetButtonStyles,\n    padding: as === \"button\" ? \"0\" : undefined,\n    textDecoration: underline ? \"underline\" : \"none\",\n    fontSize: props.theme.fontSizes.base,\n    color: getColor(props),\n    \"&:hover\": {\n      cursor: \"pointer\",\n      color: getHoverColor(props),\n    },\n  }),\n  addStyledProps\n);\n"],"names":["darken"],"mappings":";;;;;;;;AAsBA,SAAwB,KAAK,EAAE,UAAU,QAAQ,cAAc,GAAG,SAAoB;AACpF,QAAM,oBAAoB,eAAe,EAAE,QAAQ,UAAU,KAAK,sBAAA,IAA0B,CAAA;AAE5F,QAAM,gBAAgB,MAAM;AAC1B,QAAI,UAAU,cAAc;AAC1B,aACE,qBAAC,YAAA,EAAW,YAAW,UAAS,KAAI,QAClC,UAAA;AAAA,QAAA,oBAAC,aAAA,EAAY,WAAW,MAAM,WAAY,UAAS;AAAA,QAClD,UAAU,oBAAC,QAAA,EAAO,KAAK,QAAQ,MAAK,eAAc;AAAA,QAClD,oCAAiB,MAAA,EAAK,MAAK,aAAY,MAAK,MAAK,OAAM,UAAA,CAAU;AAAA,MAAA,GACpE;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,6BACG,QAAA,EAAQ,GAAG,mBAAoB,GAAG,OAChC,2BACH;AAEJ;AAEA,MAAM,cAAc,OAAO,KAAmC,CAAC,EAAE,YAAY,YAAY;AAAA,EACvF,gBAAgB,YAAY,cAAc;AAC5C,EAAE;AAEF,MAAM,oBAAoB;AAAA,EACxB,YAAY;AAAA,EACZ,QAAQ;AACV;AAMA,SAAS,kBAAkB,OAAwB;AACjD,SAAO,SAAS,UAAU,MAAM,KAAK,IAAI,MAAM,KAAK,EAAE,KAAK;AAC7D;AAEA,SAAS,SAAS,OAAwB;AACxC,SAAO,kBAAkB,KAAK,KAAK,MAAM,MAAM,OAAO;AACxD;AAEA,MAAM,gBAAgB,CAAC,UAA4B,MAAM,QAAQ,SAAS,KAAK,IAAIA,gBAAO,OAAO,SAAS,KAAK,CAAC;AAEhH,MAAM,SAAS,OAAO;AAAA,EACpB,CAAC,EAAE,YAAY,MAAM,IAAI,GAAG,aAAa;AAAA,IACvC,GAAG;AAAA,IACH,SAAS,OAAO,WAAW,MAAM;AAAA,IACjC,gBAAgB,YAAY,cAAc;AAAA,IAC1C,UAAU,MAAM,MAAM,UAAU;AAAA,IAChC,OAAO,SAAS,KAAK;AAAA,IACrB,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,OAAO,cAAc,KAAK;AAAA,IAAA;AAAA,EAC5B;AAAA,EAEF;AACF;"}

package/dist/esm/List/List.js

@@ -0,0 +1,19 @@
+import { styled } from "styled-components";
+import { addStyledProps } from "../StyledProps/index.js";
+import ListItem from "./ListItem.js";
+const List = styled.ul(
+  ({ compact = false, leftAlign = false, color = "currentColor", theme, listStyle }) => ({
+    margin: 0,
+    color,
+    paddingLeft: leftAlign ? "18px" : void 0,
+    listStyle,
+    [`${ListItem}`]: {
+      marginBottom: compact ? 0 : theme.space.x1
+    }
+  }),
+  addStyledProps
+);
+export {
+  List as default
+};
+//# sourceMappingURL=List.js.map

package/dist/esm/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { addStyledProps, StyledProps } from \"../StyledProps\";\nimport ListItem from \"./ListItem\";\n\ninterface Props extends React.ComponentPropsWithRef<\"ul\">, StyledProps {\n  className?: string;\n  compact?: boolean;\n  leftAlign?: boolean;\n  listStyle?: string;\n}\n\nconst List = styled.ul<Props>(\n  ({ compact = false, leftAlign = false, color = \"currentColor\", theme, listStyle }) => ({\n    margin: 0,\n    color: color,\n    paddingLeft: leftAlign ? \"18px\" : undefined,\n    listStyle,\n    [`${ListItem}`]: {\n      marginBottom: compact ? 0 : theme.space.x1,\n    },\n  }),\n  addStyledProps\n);\n\nexport default List;\n"],"names":[],"mappings":";;;AAWA,MAAM,OAAO,OAAO;AAAA,EAClB,CAAC,EAAE,UAAU,OAAO,YAAY,OAAO,QAAQ,gBAAgB,OAAO,iBAAiB;AAAA,IACrF,QAAQ;AAAA,IACR;AAAA,IACA,aAAa,YAAY,SAAS;AAAA,IAClC;AAAA,IACA,CAAC,GAAG,QAAQ,EAAE,GAAG;AAAA,MACf,cAAc,UAAU,IAAI,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1C;AAAA,EAEF;AACF;"}

package/dist/esm/List/ListItem.js

@@ -0,0 +1,21 @@
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+import { color } from "../node_modules/.pnpm/@styled-system_color@5.1.2/node_modules/@styled-system/color/dist/index.esm.js";
+import typography from "../node_modules/.pnpm/@styled-system_typography@5.1.2/node_modules/@styled-system/typography/dist/index.esm.js";
+const ListItem = styled.li(
+  ({ theme }) => ({
+    color: "currentcolor",
+    marginBottom: theme.space.x1,
+    "&:last-child": {
+      marginBottom: 0
+    }
+  }),
+  space,
+  color,
+  typography
+);
+export {
+  ListItem as default
+};
+//# sourceMappingURL=ListItem.js.map

package/dist/esm/List/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../../src/List/ListItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { space, color, typography, SpaceProps, ColorProps, TypographyProps } from \"styled-system\";\n\ntype Props = React.ComponentPropsWithRef<\"li\"> & SpaceProps & ColorProps & TypographyProps;\n\nconst ListItem = styled.li<Props>(\n  ({ theme }) => ({\n    color: \"currentcolor\",\n    marginBottom: theme.space.x1,\n    \"&:last-child\": {\n      marginBottom: 0,\n    },\n  }),\n  space,\n  color,\n  typography\n);\n\nexport default ListItem;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,WAAW,OAAO;AAAA,EACtB,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAC1B,gBAAgB;AAAA,MACd,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/LoadingAnimation/LoadingAnimation.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+function LoadingAnimation({ inactive = false }) {
+  const { colors } = useTheme();
+  const color1 = inactive ? colors.grey : colors.blue;
+  const color2 = inactive ? colors.lightGrey : colors.yellow;
+  return (
+    // Modified svg By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "240px",
+        height: "24px",
+        viewBox: "0 0 100 10",
+        preserveAspectRatio: "xMidYMid",
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsx("title", { children: "Loading animation" }),
+          /* @__PURE__ */ jsx("g", { transform: "translate(4 5)", children: /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.275039 0.275039)", children: /* @__PURE__ */ jsx(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "scale",
+              begin: "-0.4734848484848484s",
+              calcMode: "spline",
+              keySplines: "0.3 0 0.7 1;0.3 0 0.7 1",
+              values: "0;1;0",
+              keyTimes: "0;0.5;1",
+              dur: "1.1363636363636362s",
+              repeatCount: "indefinite"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("g", { transform: "translate(22.4 5)", children: /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0862935 0.0862935)", children: /* @__PURE__ */ jsx(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "scale",
+              begin: "-0.37878787878787873s",
+              calcMode: "spline",
+              keySplines: "0.3 0 0.7 1;0.3 0 0.7 1",
+              values: "0;1;0",
+              keyTimes: "0;0.5;1",
+              dur: "1.1363636363636362s",
+              repeatCount: "indefinite"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("g", { transform: "translate(40.0 5)", children: /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.0000823166 0.0000823166)", children: /* @__PURE__ */ jsx(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "scale",
+              begin: "-0.284090909090909s",
+              calcMode: "spline",
+              keySplines: "0.3 0 0.7 1;0.3 0 0.7 1",
+              values: "0;1;0",
+              keyTimes: "0;0.5;1",
+              dur: "1.1363636363636362s",
+              repeatCount: "indefinite"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("g", { transform: "translate(59.2 5)", children: /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.0779504 0.0779504)", children: /* @__PURE__ */ jsx(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "scale",
+              begin: "-0.18939393939393936s",
+              calcMode: "spline",
+              keySplines: "0.3 0 0.7 1;0.3 0 0.7 1",
+              values: "0;1;0",
+              keyTimes: "0;0.5;1",
+              dur: "1.1363636363636362s",
+              repeatCount: "indefinite"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("g", { transform: "translate(77.6 5)", children: /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "4", fill: color1, transform: "scale(0.262719 0.262719)", children: /* @__PURE__ */ jsx(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "scale",
+              begin: "-0.09469696969696968s",
+              calcMode: "spline",
+              keySplines: "0.3 0 0.7 1;0.3 0 0.7 1",
+              values: "0;1;0",
+              keyTimes: "0;0.5;1",
+              dur: "1.1363636363636362s",
+              repeatCount: "indefinite"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("g", { transform: "translate(96 5)", children: /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "4", fill: color2, transform: "scale(0.49324 0.49324)", children: /* @__PURE__ */ jsx(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "scale",
+              begin: "0s",
+              calcMode: "spline",
+              keySplines: "0.3 0 0.7 1;0.3 0 0.7 1",
+              values: "0;1;0",
+              keyTimes: "0;0.5;1",
+              dur: "1.1363636363636362s",
+              repeatCount: "indefinite"
+            }
+          ) }) })
+        ]
+      }
+    )
+  );
+}
+export {
+  LoadingAnimation as default
+};
+//# sourceMappingURL=LoadingAnimation.js.map

package/dist/esm/LoadingAnimation/LoadingAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingAnimation.js","sources":["../../../src/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\n\ninterface Props extends React.ComponentPropsWithRef<\"svg\"> {\n  inactive?: boolean;\n}\n\nexport default function LoadingAnimation({ inactive = false }: Props) {\n  const { colors } = useTheme();\n\n  const color1 = inactive ? colors.grey : colors.blue;\n  const color2 = inactive ? colors.lightGrey : colors.yellow;\n\n  return (\n    // Modified svg By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"240px\"\n      height=\"24px\"\n      viewBox=\"0 0 100 10\"\n      preserveAspectRatio=\"xMidYMid\"\n      role=\"img\"\n    >\n      <title>Loading animation</title>\n      <g transform=\"translate(4 5)\">\n        <circle cx=\"0\" cy=\"0\" r=\"4\" fill={color1} transform=\"scale(0.275039 0.275039)\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"scale\"\n            begin=\"-0.4734848484848484s\"\n            calcMode=\"spline\"\n            keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n            values=\"0;1;0\"\n            keyTimes=\"0;0.5;1\"\n            dur=\"1.1363636363636362s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n      <g transform=\"translate(22.4 5)\">\n        <circle cx=\"0\" cy=\"0\" r=\"4\" fill={color2} transform=\"scale(0.0862935 0.0862935)\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"scale\"\n            begin=\"-0.37878787878787873s\"\n            calcMode=\"spline\"\n            keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n            values=\"0;1;0\"\n            keyTimes=\"0;0.5;1\"\n            dur=\"1.1363636363636362s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n      <g transform=\"translate(40.0 5)\">\n        <circle cx=\"0\" cy=\"0\" r=\"4\" fill={color1} transform=\"scale(0.0000823166 0.0000823166)\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"scale\"\n            begin=\"-0.284090909090909s\"\n            calcMode=\"spline\"\n            keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n            values=\"0;1;0\"\n            keyTimes=\"0;0.5;1\"\n            dur=\"1.1363636363636362s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n      <g transform=\"translate(59.2 5)\">\n        <circle cx=\"0\" cy=\"0\" r=\"4\" fill={color2} transform=\"scale(0.0779504 0.0779504)\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"scale\"\n            begin=\"-0.18939393939393936s\"\n            calcMode=\"spline\"\n            keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n            values=\"0;1;0\"\n            keyTimes=\"0;0.5;1\"\n            dur=\"1.1363636363636362s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n      <g transform=\"translate(77.6 5)\">\n        <circle cx=\"0\" cy=\"0\" r=\"4\" fill={color1} transform=\"scale(0.262719 0.262719)\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"scale\"\n            begin=\"-0.09469696969696968s\"\n            calcMode=\"spline\"\n            keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n            values=\"0;1;0\"\n            keyTimes=\"0;0.5;1\"\n            dur=\"1.1363636363636362s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n      <g transform=\"translate(96 5)\">\n        <circle cx=\"0\" cy=\"0\" r=\"4\" fill={color2} transform=\"scale(0.49324 0.49324)\">\n          <animateTransform\n            attributeName=\"transform\"\n            type=\"scale\"\n            begin=\"0s\"\n            calcMode=\"spline\"\n            keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n            values=\"0;1;0\"\n            keyTimes=\"0;0.5;1\"\n            dur=\"1.1363636363636362s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/MaybeTooltip/MaybeTooltip.js

@@ -0,0 +1,34 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import Tooltip from "../Tooltip/Tooltip.js";
+function MaybeTooltip({
+  tooltip,
+  showTooltip = true,
+  placement = "bottom",
+  defaultOpen = false,
+  showDelay = 100,
+  maxWidth = "24em",
+  supportMobileTap: _supportMobileTap = true,
+  // Note: supportMobileTap is handled internally by the new Tooltip
+  className,
+  children
+}) {
+  if (!showTooltip) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      tooltip,
+      placement,
+      defaultOpen,
+      showDelay,
+      maxWidth,
+      className,
+      children
+    }
+  );
+}
+export {
+  MaybeTooltip as default
+};
+//# sourceMappingURL=MaybeTooltip.js.map