@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Navigation/components/shared/NavigationMenuContent.js

@@ -0,0 +1,29 @@
+import { styled } from "styled-components";
+import { Content } from "../../../node_modules/.pnpm/@radix-ui_react-navigation-menu@1.2.14_@types_react-dom@18.3.7_@types_react@18.3.28__@t_78af1a43306362c6a93ef2ea5b017181/node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+import { addStyledProps } from "../../../StyledProps/index.js";
+import { NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX, NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "./constants.js";
+import { disableHoverEvents } from "./disableHoverEvents.js";
+const NavigationMenuContent = styled(Content).attrs(disableHoverEvents)(
+  ({ theme }) => ({
+    position: "absolute",
+    top: `calc(100% + ${theme.space.x1})`,
+    maxHeight: `calc(100dvh - ${theme.space.x2} - ${theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS]})`,
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: theme.radii.large,
+    background: theme.colors.white,
+    boxShadow: theme.shadows.large,
+    width: `calc(100vw - (${theme.space.x4}))`,
+    maxWidth: NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX,
+    paddingTop: theme.space.x2,
+    paddingBottom: theme.space.x2,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none
+  }),
+  addStyledProps
+);
+export {
+  NavigationMenuContent as default
+};
+//# sourceMappingURL=NavigationMenuContent.js.map

package/dist/esm/Navigation/components/shared/NavigationMenuContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenuContent.js","sources":["../../../../../src/Navigation/components/shared/NavigationMenuContent.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport * as RadixNavigationMenu from \"@radix-ui/react-navigation-menu\";\nimport { addStyledProps, StyledProps } from \"../../../StyledProps\";\nimport { NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX, NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from \"./constants\";\nimport { disableHoverEvents } from \"./disableHoverEvents\";\n\nexport interface NavigationMenuContentProps extends RadixNavigationMenu.NavigationMenuContentProps, StyledProps {}\n\nconst NavigationMenuContent = styled(RadixNavigationMenu.Content).attrs(disableHoverEvents)<NavigationMenuContentProps>(\n  ({ theme }) => ({\n    position: \"absolute\",\n    top: `calc(100% + ${theme.space.x1})`,\n    maxHeight: `calc(100dvh - ${theme.space.x2} - ${theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS]})`,\n    overflowY: \"auto\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    borderRadius: theme.radii.large,\n    background: theme.colors.white,\n    boxShadow: theme.shadows.large,\n    width: `calc(100vw - (${theme.space.x4}))`,\n    maxWidth: NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX,\n    paddingTop: theme.space.x2,\n    paddingBottom: theme.space.x2,\n    paddingLeft: theme.space.none,\n    paddingRight: theme.space.none,\n  }),\n  addStyledProps\n);\n\nexport default NavigationMenuContent;\n"],"names":["RadixNavigationMenu.Content"],"mappings":";;;;;AAQA,MAAM,wBAAwB,OAAOA,OAA2B,EAAE,MAAM,kBAAkB;AAAA,EACxF,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,UAAU;AAAA,IACV,KAAK,eAAe,MAAM,MAAM,EAAE;AAAA,IAClC,WAAW,iBAAiB,MAAM,MAAM,EAAE,MAAM,MAAM,MAAM,mCAAmC,CAAC;AAAA,IAChG,WAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY,MAAM,OAAO;AAAA,IACzB,WAAW,MAAM,QAAQ;AAAA,IACzB,OAAO,iBAAiB,MAAM,MAAM,EAAE;AAAA,IACtC,UAAU;AAAA,IACV,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,IAC3B,aAAa,MAAM,MAAM;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAAA;AAAA,EAE5B;AACF;"}

package/dist/esm/Navigation/components/shared/NavigationMenuItem.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import { Sub, List } from "../../../node_modules/.pnpm/@radix-ui_react-navigation-menu@1.2.14_@types_react-dom@18.3.7_@types_react@18.3.28__@t_78af1a43306362c6a93ef2ea5b017181/node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+import { styled } from "styled-components";
+import { MiniTooltip } from "../../../MiniTooltip/index.js";
+import { MenuSubItem } from "../MenuSubItem/MenuSubItem.js";
+import { SubMenuContent } from "../MenuSubItem/parts/styled.js";
+import { RadixNavigationMenuItem, CaretDown, NavigationMenuLink, NavigationMenuTrigger } from "./components.js";
+import VerticalDivider from "../../../VerticalDivider/VerticalDivider.js";
+import Icon from "../../../Icon/Icon.js";
+import Text from "../../../Type/Text.js";
+import Divider from "../../../Divider/Divider.js";
+const NavigationMenuItem = React__default.forwardRef(
+  ({ item, level = 0, ...props }, forwardedRef) => {
+    if (item.type === "separator") {
+      return /* @__PURE__ */ jsx(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: /* @__PURE__ */ jsx(VerticalDivider, { mx: "x1" }) });
+    }
+    if (item.type === "custom") {
+      return /* @__PURE__ */ jsx(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: item.render({ withinSubMenu: level > 0, level, withinMobileNav: false }) });
+    }
+    const hasIcon = "icon" in item;
+    const isLink = item.type === "link";
+    const hasSubMenu = item.type === "button" && !!item.items && item.items.length > 0;
+    const hasLabel = "label" in item && item.label;
+    const hasIconOnly = hasIcon && !hasLabel;
+    const hasTooltip = hasIconOnly && Boolean(item.tooltip);
+    const Content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasIcon && /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "x3", "aria-hidden": true }),
+      "label" in item && item.label && /* @__PURE__ */ jsx(Text, { fontSize: "small", lineHeight: "smallTextCompressed", children: item.label }),
+      hasSubMenu && /* @__PURE__ */ jsx(CaretDown, { "aria-hidden": true, size: "x2" })
+    ] });
+    if (isLink) {
+      const Item2 = /* @__PURE__ */ jsx(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: /* @__PURE__ */ jsx(
+        NavigationMenuLink,
+        {
+          asChild: true,
+          "aria-label": hasIconOnly && item.tooltip ? item.tooltip : item.label,
+          borderRadius: hasIconOnly ? "rounded" : void 0,
+          p: hasIcon ? "x1" : void 0,
+          children: item.element ? React__default.cloneElement(item.element, { ...item.props, children: Content }) : /* @__PURE__ */ jsx("a", { ...item.props, children: Content })
+        }
+      ) });
+      return hasTooltip ? /* @__PURE__ */ jsx(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip, children: Item2 }) : Item2;
+    }
+    const Item = /* @__PURE__ */ jsxs(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: [
+      /* @__PURE__ */ jsx(
+        NavigationMenuTrigger,
+        {
+          asChild: true,
+          position: "relative",
+          "aria-label": hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : void 0,
+          borderRadius: hasIconOnly ? "rounded" : void 0,
+          p: hasIcon ? "x1" : void 0,
+          children: /* @__PURE__ */ jsx(Button, { ...item.props, children: Content })
+        }
+      ),
+      hasSubMenu && /* @__PURE__ */ jsx(SubMenuContent, { children: /* @__PURE__ */ jsx(Sub, { orientation: "vertical", children: /* @__PURE__ */ jsx(NavigationMenuSubList, { children: item.items?.map((sub) => /* @__PURE__ */ jsx(MenuSubItem, { item: sub, level: level + 1 }, sub.key)) }) }) })
+    ] });
+    return hasTooltip ? /* @__PURE__ */ jsx(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip, children: Item }) : Item;
+  }
+);
+NavigationMenuItem.displayName = "NavigationMenuItem";
+const NavigationMenuSubList = styled(List)`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  & > ${Divider}:first-child {
+    display: none;
+  }
+`;
+const Button = React__default.forwardRef(
+  ({ onPointerEnter, onPointerLeave, onPointerMove, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("button", { ...props, ref: forwardedRef });
+  }
+);
+Button.displayName = "Button";
+export {
+  NavigationMenuItem,
+  NavigationMenuSubList
+};
+//# sourceMappingURL=NavigationMenuItem.js.map

package/dist/esm/Navigation/components/shared/NavigationMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenuItem.js","sources":["../../../../../src/Navigation/components/shared/NavigationMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport * as RadixNavigationMenu from \"@radix-ui/react-navigation-menu\";\nimport { styled } from \"styled-components\";\nimport { Text } from \"../../../Type\";\nimport type { MenuItem } from \"../../types\";\nimport { Icon } from \"../../../Icon\";\nimport { VerticalDivider } from \"../../../VerticalDivider\";\nimport { Divider } from \"../../../Divider\";\nimport { MiniTooltip } from \"../../../MiniTooltip\";\nimport { MenuSubItem } from \"../MenuSubItem/MenuSubItem\";\nimport { SubMenuContent } from \"../MenuSubItem/parts/styled\";\nimport { CaretDown, NavigationMenuLink, NavigationMenuTrigger, RadixNavigationMenuItem } from \"./components\";\n\nexport interface NavigationMenuItemProps extends RadixNavigationMenu.NavigationMenuItemProps {\n  item: MenuItem;\n  level?: number;\n}\n\n/**\n * A single Radix <NavigationMenu.Item> that can represent any MenuItem variant.\n */\nexport const NavigationMenuItem = React.forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n  ({ item, level = 0, ...props }, forwardedRef) => {\n    if (item.type === \"separator\") {\n      return (\n        <RadixNavigationMenuItem ref={forwardedRef} {...props}>\n          <VerticalDivider mx=\"x1\" />\n        </RadixNavigationMenuItem>\n      );\n    }\n\n    /* ---------------------------------------------------------------------\n     * Handle \"custom” items\n     * -------------------------------------------------------------------*/\n    if (item.type === \"custom\") {\n      return (\n        <RadixNavigationMenuItem ref={forwardedRef} {...props}>\n          {item.render({ withinSubMenu: level > 0, level, withinMobileNav: false })}\n        </RadixNavigationMenuItem>\n      );\n    }\n\n    const hasIcon = \"icon\" in item;\n    const isLink = item.type === \"link\";\n    const hasSubMenu = item.type === \"button\" && !!item.items && item.items.length > 0;\n    const hasLabel = \"label\" in item && item.label;\n\n    const hasIconOnly = hasIcon && !hasLabel;\n    const hasTooltip = hasIconOnly && Boolean(item.tooltip);\n\n    const Content = (\n      <>\n        {hasIcon && <Icon icon={item.icon} size=\"x3\" aria-hidden />}\n        {\"label\" in item && item.label && (\n          <Text fontSize=\"small\" lineHeight=\"smallTextCompressed\">\n            {item.label}\n          </Text>\n        )}\n        {hasSubMenu && <CaretDown aria-hidden size=\"x2\" />}\n      </>\n    );\n\n    if (isLink) {\n      const Item = (\n        <RadixNavigationMenuItem ref={forwardedRef} {...props}>\n          <NavigationMenuLink\n            asChild\n            aria-label={hasIconOnly && item.tooltip ? item.tooltip : item.label}\n            borderRadius={hasIconOnly ? \"rounded\" : undefined}\n            p={hasIcon ? \"x1\" : undefined}\n          >\n            {item.element ? (\n              React.cloneElement(item.element, { ...item.props, children: Content })\n            ) : (\n              <a {...item.props}>{Content}</a>\n            )}\n          </NavigationMenuLink>\n        </RadixNavigationMenuItem>\n      );\n\n      return hasTooltip ? (\n        <MiniTooltip delayDuration={0} sideOffset={0} content={item.tooltip}>\n          {Item}\n        </MiniTooltip>\n      ) : (\n        Item\n      );\n    }\n\n    const Item = (\n      <RadixNavigationMenuItem ref={forwardedRef} {...props}>\n        <NavigationMenuTrigger\n          asChild\n          position=\"relative\"\n          aria-label={hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : undefined}\n          borderRadius={hasIconOnly ? \"rounded\" : undefined}\n          p={hasIcon ? \"x1\" : undefined}\n        >\n          <Button {...item.props}>{Content}</Button>\n        </NavigationMenuTrigger>\n\n        {hasSubMenu && (\n          <SubMenuContent>\n            <RadixNavigationMenu.Sub orientation=\"vertical\">\n              <NavigationMenuSubList>\n                {item.items?.map((sub) => (\n                  <MenuSubItem key={sub.key} item={sub} level={level + 1} />\n                ))}\n              </NavigationMenuSubList>\n            </RadixNavigationMenu.Sub>\n          </SubMenuContent>\n        )}\n      </RadixNavigationMenuItem>\n    );\n\n    return hasTooltip ? (\n      <MiniTooltip delayDuration={0} sideOffset={0} content={item.tooltip}>\n        {Item}\n      </MiniTooltip>\n    ) : (\n      Item\n    );\n  }\n);\n\nNavigationMenuItem.displayName = \"NavigationMenuItem\";\n\nexport const NavigationMenuSubList = styled(RadixNavigationMenu.List)`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  & > ${Divider}:first-child {\n    display: none;\n  }\n`;\n\nconst Button = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<\"button\">>(\n  ({ onPointerEnter, onPointerLeave, onPointerMove, ...props }, forwardedRef) => {\n    // These props are intentionally ignored to prevent pointer events from interfering with keyboard navigation\n    void onPointerEnter;\n    void onPointerLeave;\n    void onPointerMove;\n    return <button {...props} ref={forwardedRef} />;\n  }\n);\n\nButton.displayName = \"Button\";\n"],"names":["React","Item","RadixNavigationMenu.Sub","RadixNavigationMenu.List"],"mappings":"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"}

package/dist/esm/Navigation/components/shared/components.js

@@ -0,0 +1,136 @@
+import { Root as Root2, List, Item, Trigger, Link } from "../../../node_modules/.pnpm/@radix-ui_react-navigation-menu@1.2.14_@types_react-dom@18.3.7_@types_react@18.3.28__@t_78af1a43306362c6a93ef2ea5b017181/node_modules/@radix-ui/react-navigation-menu/dist/index.js";
+import { styled } from "styled-components";
+import { addStyledProps } from "../../../StyledProps/index.js";
+import { NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from "./constants.js";
+import { disableHoverEvents } from "./disableHoverEvents.js";
+import Icon from "../../../Icon/Icon.js";
+function itemStyles(theme) {
+  return {
+    paddingLeft: theme.space.x2,
+    paddingRight: theme.space.x2,
+    paddingTop: theme.space.x1_5,
+    paddingBottom: theme.space.x1_5,
+    outline: "none",
+    userSelect: "none",
+    fontWeight: theme.fontWeights.medium,
+    fontSize: theme.fontSizes.small,
+    lineHeight: theme.lineHeights.smallTextCompressed,
+    borderRadius: theme.radii.large,
+    color: theme.colors.darkGrey,
+    transition: "background-color 250ms ease",
+    whiteSpace: "nowrap"
+  };
+}
+const NavigationMenuRoot = styled(Root2)(
+  ({ theme }) => ({
+    height: theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS],
+    display: "flex",
+    width: "100%",
+    justifyContent: "space-between",
+    padding: "0px 16px",
+    backgroundColor: "white",
+    borderBottom: "1px solid #E4E7EB",
+    "& > div": {
+      display: "flex"
+    }
+  }),
+  addStyledProps
+);
+const NavigationMenuList = styled(List)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  padding: theme.space.none,
+  listStyle: "none",
+  gap: theme.space.x1,
+  margin: theme.space.none
+}));
+const NavigationMenuTrigger = styled(Trigger).attrs(
+  ({ disableMenuToggleOnHover = true }) => {
+    if (disableMenuToggleOnHover) {
+      return {
+        ...disableHoverEvents
+      };
+    }
+  }
+)(
+  ({ theme }) => ({
+    all: "unset",
+    ...itemStyles(theme),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.half,
+    "&:focus": { boxShadow: theme.shadows.focus },
+    "&:hover": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue },
+    "&:disabled": {
+      cursor: "default",
+      "&:hover": {
+        backgroundColor: "transparent",
+        color: theme.colors.darkGrey
+      }
+    }
+  }),
+  addStyledProps
+);
+const NavigationMenuLink = styled(Link)(
+  ({ theme }) => ({
+    ...itemStyles(theme),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.half,
+    textDecoration: "none",
+    fontSize: theme.fontSizes.small,
+    lineHeight: theme.lineHeights.smallTextCompressed,
+    "&:focus": { boxShadow: theme.shadows.focus },
+    "&:hover": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue },
+    "&:disabled": {
+      cursor: "default",
+      "&:hover": {
+        backgroundColor: "transparent",
+        color: theme.colors.darkGrey
+      }
+    }
+  }),
+  addStyledProps
+);
+styled(NavigationMenuLink)(({ theme }) => ({
+  paddingRight: theme.space.x1,
+  borderRadius: theme.radii.rounded
+}));
+const NavigationMenuIconTrigger = styled(NavigationMenuTrigger)(({ theme }) => ({
+  padding: theme.space.x1,
+  borderRadius: theme.radii.rounded
+}));
+const CaretDown = styled(Icon).attrs({
+  icon: "downArrow"
+})({
+  position: "relative",
+  color: "currentColor",
+  transition: "transform 250ms ease",
+  "[data-state=open] &": { transform: "rotate(-180deg)" }
+});
+const CaretRight = styled(Icon).attrs({
+  icon: "rightArrow"
+})({
+  position: "relative",
+  color: "currentColor"
+});
+const RadixNavigationMenuItem = styled(Item)(
+  {
+    position: "relative"
+  },
+  addStyledProps
+);
+export {
+  CaretDown,
+  CaretRight,
+  NavigationMenuIconTrigger,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  RadixNavigationMenuItem
+};
+//# sourceMappingURL=components.js.map

package/dist/esm/Navigation/components/shared/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":["../../../../../src/Navigation/components/shared/components.tsx"],"sourcesContent":["import * as RadixNavigationMenu from \"@radix-ui/react-navigation-menu\";\nimport { styled, CSSProperties } from \"styled-components\";\nimport { Icon } from \"../../../Icon\";\nimport { DefaultNDSThemeType } from \"../../../theme\";\nimport { IconProps } from \"../../../Icon/Icon\";\nimport { addStyledProps, StyledProps } from \"../../../StyledProps\";\nimport { NAVIGATION_MENU_HEIGHT_STYLED_UNITS } from \"./constants\";\nimport { disableHoverEvents } from \"./disableHoverEvents\";\n\nfunction itemStyles(theme: DefaultNDSThemeType): CSSProperties {\n  return {\n    paddingLeft: theme.space.x2,\n    paddingRight: theme.space.x2,\n    paddingTop: theme.space.x1_5,\n    paddingBottom: theme.space.x1_5,\n    outline: \"none\",\n    userSelect: \"none\",\n    fontWeight: theme.fontWeights.medium,\n    fontSize: theme.fontSizes.small,\n    lineHeight: theme.lineHeights.smallTextCompressed,\n    borderRadius: theme.radii.large,\n    color: theme.colors.darkGrey,\n    transition: \"background-color 250ms ease\",\n    whiteSpace: \"nowrap\",\n  };\n}\n\nexport const NavigationMenuRoot = styled(RadixNavigationMenu.Root)<StyledProps>(\n  ({ theme }) => ({\n    height: theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS],\n    display: \"flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    padding: \"0px 16px\",\n    backgroundColor: \"white\",\n    borderBottom: \"1px solid #E4E7EB\",\n\n    \"& > div\": {\n      display: \"flex\",\n    },\n  }),\n  addStyledProps\n);\n\nexport const NavigationMenuList = styled(RadixNavigationMenu.List)(({ theme }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  width: \"100%\",\n  padding: theme.space.none,\n  listStyle: \"none\",\n  gap: theme.space.x1,\n  margin: theme.space.none,\n}));\n\ninterface NavigationMenuTriggerProps extends RadixNavigationMenu.NavigationMenuTriggerProps, StyledProps {\n  disableMenuToggleOnHover?: boolean;\n}\n\nexport const NavigationMenuTrigger = styled(RadixNavigationMenu.Trigger).attrs<NavigationMenuTriggerProps>(\n  ({ disableMenuToggleOnHover = true }) => {\n    if (disableMenuToggleOnHover) {\n      return {\n        ...disableHoverEvents,\n      };\n    }\n  }\n)(\n  ({ theme }) => ({\n    all: \"unset\",\n    ...itemStyles(theme),\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.space.half,\n    \"&:focus\": { boxShadow: theme.shadows.focus },\n    \"&:hover\": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue },\n    \"&:disabled\": {\n      cursor: \"default\",\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n        color: theme.colors.darkGrey,\n      },\n    },\n  }),\n  addStyledProps\n);\n\nexport const NavigationMenuLink = styled(RadixNavigationMenu.Link)<StyledProps>(\n  ({ theme }) => ({\n    ...itemStyles(theme),\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.space.half,\n    textDecoration: \"none\",\n    fontSize: theme.fontSizes.small,\n    lineHeight: theme.lineHeights.smallTextCompressed,\n    \"&:focus\": { boxShadow: theme.shadows.focus },\n    \"&:hover\": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue },\n    \"&:disabled\": {\n      cursor: \"default\",\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n        color: theme.colors.darkGrey,\n      },\n    },\n  }),\n  addStyledProps\n);\n\nexport const NavigationMenuIconLink = styled(NavigationMenuLink)(({ theme }) => ({\n  paddingRight: theme.space.x1,\n  borderRadius: theme.radii.rounded,\n}));\n\nexport const NavigationMenuIconTrigger = styled(NavigationMenuTrigger)(({ theme }) => ({\n  padding: theme.space.x1,\n  borderRadius: theme.radii.rounded,\n}));\n\nexport const CaretDown = styled(Icon).attrs({\n  icon: \"downArrow\",\n})<Partial<IconProps>>({\n  position: \"relative\",\n  color: \"currentColor\",\n  transition: \"transform 250ms ease\",\n  \"[data-state=open] &\": { transform: \"rotate(-180deg)\" },\n});\n\nexport const CaretRight = styled(Icon).attrs({\n  icon: \"rightArrow\",\n})<Partial<IconProps>>({\n  position: \"relative\",\n  color: \"currentColor\",\n});\n\nexport const RadixNavigationMenuItem = styled(RadixNavigationMenu.Item)<StyledProps>(\n  {\n    position: \"relative\",\n  },\n  addStyledProps\n);\n"],"names":["RadixNavigationMenu.Root","RadixNavigationMenu.List","RadixNavigationMenu.Trigger","RadixNavigationMenu.Link","RadixNavigationMenu.Item"],"mappings":"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"}

package/dist/esm/Navigation/components/shared/constants.js

@@ -0,0 +1,13 @@
+const NAVIGATION_MENU_HEIGHT_STYLED_UNITS = "x8";
+const NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;
+const NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY = "medium";
+const NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;
+const MIN_DISTANCE_BETWEEN_MENUS_PX = 64;
+export {
+  MIN_DISTANCE_BETWEEN_MENUS_PX,
+  NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY,
+  NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX,
+  NAVIGATION_MENU_HEIGHT_STYLED_UNITS,
+  NAVIGATION_SUB_MENU_MIN_WIDTH_PX
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/Navigation/components/shared/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/Navigation/components/shared/constants.ts"],"sourcesContent":["import { Breakpoints } from \"../../../theme/theme.type\";\n\nexport const NAVIGATION_MENU_HEIGHT_STYLED_UNITS = \"x8\";\nexport const NAVIGATION_MENU_CONTENT_WIDTH_MAX_WIDTH_PX = 400;\nexport const NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY: keyof Breakpoints = \"medium\";\nexport const NAVIGATION_SUB_MENU_MIN_WIDTH_PX = 180;\nexport const MIN_DISTANCE_BETWEEN_MENUS_PX = 64;\n"],"names":[],"mappings":"AAEO,MAAM,sCAAsC;AAC5C,MAAM,6CAA6C;AACnD,MAAM,0CAA6D;AACnE,MAAM,mCAAmC;AACzC,MAAM,gCAAgC;"}

package/dist/esm/Navigation/components/shared/disableHoverEvents.js

@@ -0,0 +1,9 @@
+const disableHoverEvents = {
+  onPointerMove: (e) => e.preventDefault(),
+  onPointerEnter: (e) => e.preventDefault(),
+  onPointerLeave: (e) => e.preventDefault()
+};
+export {
+  disableHoverEvents
+};
+//# sourceMappingURL=disableHoverEvents.js.map

package/dist/esm/Navigation/components/shared/disableHoverEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disableHoverEvents.js","sources":["../../../../../src/Navigation/components/shared/disableHoverEvents.ts"],"sourcesContent":["import { PointerEvent } from \"react\";\n\nexport const disableHoverEvents = {\n  onPointerMove: (e: PointerEvent<Element>): void => e.preventDefault(),\n  onPointerEnter: (e: PointerEvent<Element>): void => e.preventDefault(),\n  onPointerLeave: (e: PointerEvent<Element>): void => e.preventDefault(),\n};\n"],"names":[],"mappings":"AAEO,MAAM,qBAAqB;AAAA,EAChC,eAAe,CAAC,MAAmC,EAAE,eAAA;AAAA,EACrD,gBAAgB,CAAC,MAAmC,EAAE,eAAA;AAAA,EACtD,gBAAgB,CAAC,MAAmC,EAAE,eAAA;AACxD;"}

package/dist/esm/Navigation/components/utils/getNavigationBarItems.js

@@ -0,0 +1,19 @@
+function getNavigationBarItems(items) {
+  const navigationBarItems = [];
+  function findNavigationBarItems(menuItems) {
+    for (const item of menuItems) {
+      if (item.mobileVisibility === "navigationBar") {
+        navigationBarItems.push(item);
+      }
+      if (item.type === "button" && item.items) {
+        findNavigationBarItems(item.items);
+      }
+    }
+  }
+  findNavigationBarItems(items);
+  return navigationBarItems;
+}
+export {
+  getNavigationBarItems
+};
+//# sourceMappingURL=getNavigationBarItems.js.map

package/dist/esm/Navigation/components/utils/getNavigationBarItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNavigationBarItems.js","sources":["../../../../../src/Navigation/components/utils/getNavigationBarItems.ts"],"sourcesContent":["import { MenuItem } from \"../../types\";\n\nexport function getNavigationBarItems(items: MenuItem[]): MenuItem[] {\n  const navigationBarItems: MenuItem[] = [];\n\n  function findNavigationBarItems(menuItems: MenuItem[]) {\n    for (const item of menuItems) {\n      if (item.mobileVisibility === \"navigationBar\") {\n        navigationBarItems.push(item);\n      }\n      if (item.type === \"button\" && item.items) {\n        findNavigationBarItems(item.items);\n      }\n    }\n  }\n\n  findNavigationBarItems(items);\n  return navigationBarItems;\n}\n"],"names":[],"mappings":"AAEO,SAAS,sBAAsB,OAA+B;AACnE,QAAM,qBAAiC,CAAA;AAEvC,WAAS,uBAAuB,WAAuB;AACrD,eAAW,QAAQ,WAAW;AAC5B,UAAI,KAAK,qBAAqB,iBAAiB;AAC7C,2BAAmB,KAAK,IAAI;AAAA,MAC9B;AACA,UAAI,KAAK,SAAS,YAAY,KAAK,OAAO;AACxC,+BAAuB,KAAK,KAAK;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAEA,yBAAuB,KAAK;AAC5B,SAAO;AACT;"}

package/dist/esm/Navigation/hooks/useResponsiveMenu.js

@@ -0,0 +1,68 @@
+import { useState, useRef, useCallback, useLayoutEffect } from "react";
+import equal from "deep-equal";
+import { MIN_DISTANCE_BETWEEN_MENUS_PX } from "../components/shared/constants.js";
+const useResponsiveMenu = (initialMenuItems) => {
+  const [menuState, setMenuState] = useState({
+    menuItems: initialMenuItems,
+    moreMenu: [],
+    hiddenMenuItem: {
+      key: "hidden-menu-item",
+      label: "",
+      type: "button"
+    }
+  });
+  const primaryMenuRef = useRef(null);
+  const secondaryMenuRef = useRef(null);
+  const hiddenButtonRef = useRef(null);
+  const calculateDistance = useCallback(() => {
+    if (!primaryMenuRef.current || !secondaryMenuRef.current || !hiddenButtonRef.current) {
+      return false;
+    }
+    const primaryRect = primaryMenuRef.current.getBoundingClientRect();
+    const secondaryRect = secondaryMenuRef.current.getBoundingClientRect();
+    const hiddenButtonWidth = hiddenButtonRef.current.getBoundingClientRect().width;
+    const distance = secondaryRect.left - primaryRect.right;
+    if (distance < MIN_DISTANCE_BETWEEN_MENUS_PX && menuState.menuItems.length > 0) {
+      const lastItem = menuState.menuItems[menuState.menuItems.length - 1];
+      const newMenuItems = menuState.menuItems.slice(0, -1);
+      const newHiddenMenu = [lastItem, ...menuState.moreMenu];
+      if (!equal(newMenuItems, menuState.menuItems) || !equal(newHiddenMenu, menuState.moreMenu)) {
+        setMenuState({
+          menuItems: newMenuItems,
+          moreMenu: newHiddenMenu,
+          hiddenMenuItem: lastItem
+        });
+      }
+    } else if (Math.floor(distance - hiddenButtonWidth - 8) > MIN_DISTANCE_BETWEEN_MENUS_PX && menuState.moreMenu.length > 0) {
+      const firstHiddenItem = menuState.moreMenu[0];
+      const newHiddenMenu = menuState.moreMenu.slice(1);
+      const newMenuItems = [...menuState.menuItems, firstHiddenItem];
+      if (!equal(newHiddenMenu, menuState.moreMenu) || !equal(newMenuItems, menuState.menuItems)) {
+        setMenuState({
+          menuItems: newMenuItems,
+          moreMenu: newHiddenMenu,
+          hiddenMenuItem: firstHiddenItem
+        });
+      }
+    }
+  }, [menuState]);
+  useLayoutEffect(() => {
+    calculateDistance();
+    window.addEventListener("resize", calculateDistance);
+    return () => {
+      window.removeEventListener("resize", calculateDistance);
+    };
+  }, [calculateDistance]);
+  return {
+    menuItems: menuState.menuItems,
+    moreMenu: menuState.moreMenu,
+    hiddenMenuItem: menuState.hiddenMenuItem,
+    primaryMenuRef,
+    secondaryMenuRef,
+    hiddenButtonRef
+  };
+};
+export {
+  useResponsiveMenu
+};
+//# sourceMappingURL=useResponsiveMenu.js.map

package/dist/esm/Navigation/hooks/useResponsiveMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveMenu.js","sources":["../../../../src/Navigation/hooks/useResponsiveMenu.ts"],"sourcesContent":["import { useState, useCallback, useLayoutEffect, useRef } from \"react\";\nimport equal from \"deep-equal\";\nimport { MenuItems, MenuItem } from \"../types\";\nimport { MIN_DISTANCE_BETWEEN_MENUS_PX } from \"../components/shared/constants\";\n\ntype MenuState = {\n  menuItems: MenuItems;\n  moreMenu: MenuItems;\n  hiddenMenuItem: MenuItem | null;\n};\n\ntype UseResponsiveMenu = (initialMenuItems: MenuItems) => {\n  menuItems: MenuItems;\n  moreMenu: MenuItems;\n  hiddenMenuItem: MenuItem | null;\n  primaryMenuRef: React.RefObject<HTMLUListElement>;\n  secondaryMenuRef: React.RefObject<HTMLUListElement>;\n  hiddenButtonRef: React.RefObject<HTMLLIElement>;\n};\n\nexport const useResponsiveMenu: UseResponsiveMenu = (initialMenuItems: MenuItems) => {\n  const [menuState, setMenuState] = useState<MenuState>({\n    menuItems: initialMenuItems,\n    moreMenu: [],\n    hiddenMenuItem: {\n      key: \"hidden-menu-item\",\n      label: \"\",\n      type: \"button\",\n    },\n  });\n\n  const primaryMenuRef = useRef<HTMLUListElement>(null);\n  const secondaryMenuRef = useRef<HTMLUListElement>(null);\n  const hiddenButtonRef = useRef<HTMLLIElement>(null);\n\n  const calculateDistance = useCallback(() => {\n    if (!primaryMenuRef.current || !secondaryMenuRef.current || !hiddenButtonRef.current) {\n      return false;\n    }\n\n    const primaryRect = primaryMenuRef.current.getBoundingClientRect();\n    const secondaryRect = secondaryMenuRef.current.getBoundingClientRect();\n    const hiddenButtonWidth = hiddenButtonRef.current.getBoundingClientRect().width;\n    const distance = secondaryRect.left - primaryRect.right;\n\n    if (distance < MIN_DISTANCE_BETWEEN_MENUS_PX && menuState.menuItems.length > 0) {\n      const lastItem = menuState.menuItems[menuState.menuItems.length - 1];\n      const newMenuItems = menuState.menuItems.slice(0, -1);\n      const newHiddenMenu = [lastItem, ...menuState.moreMenu];\n\n      if (!equal(newMenuItems, menuState.menuItems) || !equal(newHiddenMenu, menuState.moreMenu)) {\n        setMenuState({\n          menuItems: newMenuItems,\n          moreMenu: newHiddenMenu,\n          hiddenMenuItem: lastItem,\n        });\n      }\n    } else if (\n      Math.floor(distance - hiddenButtonWidth - 8) > MIN_DISTANCE_BETWEEN_MENUS_PX &&\n      menuState.moreMenu.length > 0\n    ) {\n      const firstHiddenItem = menuState.moreMenu[0];\n      const newHiddenMenu = menuState.moreMenu.slice(1);\n      const newMenuItems = [...menuState.menuItems, firstHiddenItem];\n\n      if (!equal(newHiddenMenu, menuState.moreMenu) || !equal(newMenuItems, menuState.menuItems)) {\n        setMenuState({\n          menuItems: newMenuItems,\n          moreMenu: newHiddenMenu,\n          hiddenMenuItem: firstHiddenItem,\n        });\n      }\n    }\n  }, [menuState]);\n\n  useLayoutEffect(() => {\n    calculateDistance();\n\n    window.addEventListener(\"resize\", calculateDistance);\n    return () => {\n      window.removeEventListener(\"resize\", calculateDistance);\n    };\n  }, [calculateDistance]);\n\n  return {\n    menuItems: menuState.menuItems,\n    moreMenu: menuState.moreMenu,\n    hiddenMenuItem: menuState.hiddenMenuItem,\n    primaryMenuRef,\n    secondaryMenuRef,\n    hiddenButtonRef,\n  };\n};\n"],"names":[],"mappings":";;;AAoBO,MAAM,oBAAuC,CAAC,qBAAgC;AACnF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB;AAAA,IACpD,WAAW;AAAA,IACX,UAAU,CAAA;AAAA,IACV,gBAAgB;AAAA,MACd,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR,CACD;AAED,QAAM,iBAAiB,OAAyB,IAAI;AACpD,QAAM,mBAAmB,OAAyB,IAAI;AACtD,QAAM,kBAAkB,OAAsB,IAAI;AAElD,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,CAAC,eAAe,WAAW,CAAC,iBAAiB,WAAW,CAAC,gBAAgB,SAAS;AACpF,aAAO;AAAA,IACT;AAEA,UAAM,cAAc,eAAe,QAAQ,sBAAA;AAC3C,UAAM,gBAAgB,iBAAiB,QAAQ,sBAAA;AAC/C,UAAM,oBAAoB,gBAAgB,QAAQ,sBAAA,EAAwB;AAC1E,UAAM,WAAW,cAAc,OAAO,YAAY;AAElD,QAAI,WAAW,iCAAiC,UAAU,UAAU,SAAS,GAAG;AAC9E,YAAM,WAAW,UAAU,UAAU,UAAU,UAAU,SAAS,CAAC;AACnE,YAAM,eAAe,UAAU,UAAU,MAAM,GAAG,EAAE;AACpD,YAAM,gBAAgB,CAAC,UAAU,GAAG,UAAU,QAAQ;AAEtD,UAAI,CAAC,MAAM,cAAc,UAAU,SAAS,KAAK,CAAC,MAAM,eAAe,UAAU,QAAQ,GAAG;AAC1F,qBAAa;AAAA,UACX,WAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAgB;AAAA,QAAA,CACjB;AAAA,MACH;AAAA,IACF,WACE,KAAK,MAAM,WAAW,oBAAoB,CAAC,IAAI,iCAC/C,UAAU,SAAS,SAAS,GAC5B;AACA,YAAM,kBAAkB,UAAU,SAAS,CAAC;AAC5C,YAAM,gBAAgB,UAAU,SAAS,MAAM,CAAC;AAChD,YAAM,eAAe,CAAC,GAAG,UAAU,WAAW,eAAe;AAE7D,UAAI,CAAC,MAAM,eAAe,UAAU,QAAQ,KAAK,CAAC,MAAM,cAAc,UAAU,SAAS,GAAG;AAC1F,qBAAa;AAAA,UACX,WAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAgB;AAAA,QAAA,CACjB;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,kBAAgB,MAAM;AACpB,sBAAA;AAEA,WAAO,iBAAiB,UAAU,iBAAiB;AACnD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,iBAAiB;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AAEtB,SAAO;AAAA,IACL,WAAW,UAAU;AAAA,IACrB,UAAU,UAAU;AAAA,IACpB,gBAAgB,UAAU;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/Overlay/Overlay.js

@@ -0,0 +1,18 @@
+import { styled } from "styled-components";
+import { transparentize as curriedTransparentize$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import Flex from "../Flex/Flex.js";
+const Overlay = styled(Flex)(({ dark = false, theme }) => ({
+  position: "fixed",
+  justifyContent: "center",
+  alignItems: "center",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: theme.zIndices.overlay,
+  backgroundColor: dark ? curriedTransparentize$1(0.5, theme.colors.blackBlue) : curriedTransparentize$1(0.05, theme.colors.white)
+}));
+export {
+  Overlay as default
+};
+//# sourceMappingURL=Overlay.js.map

package/dist/esm/Overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sources":["../../../src/Overlay/Overlay.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { transparentize } from \"polished\";\nimport { Flex } from \"../Flex\";\nimport { FlexProps } from \"../Flex/Flex\";\n\ninterface Props extends FlexProps {\n  dark?: boolean;\n}\n\nconst Overlay = styled(Flex)<Props>(({ dark = false, theme }) => ({\n  position: \"fixed\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  zIndex: theme.zIndices.overlay,\n  backgroundColor: dark ? transparentize(0.5, theme.colors.blackBlue) : transparentize(0.05, theme.colors.white),\n}));\n\nexport default Overlay;\n"],"names":["transparentize"],"mappings":";;;AASA,MAAM,UAAU,OAAO,IAAI,EAAS,CAAC,EAAE,OAAO,OAAO,aAAa;AAAA,EAChE,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ,MAAM,SAAS;AAAA,EACvB,iBAAiB,OAAOA,wBAAe,KAAK,MAAM,OAAO,SAAS,IAAIA,wBAAe,MAAM,MAAM,OAAO,KAAK;AAC/G,EAAE;"}

package/dist/esm/Pagination/NextButton.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 NextButton = ({ disabled, onClick, label, ariaLabel, showIconOnly }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    PaginationButton,
+    {
+      disabled,
+      onClick,
+      "aria-label": ariaLabel || t("go to next results"),
+      iconOnly: showIconOnly,
+      children: [
+        !showIconOnly && (label || t("next")),
+        /* @__PURE__ */ jsx(Icon, { icon: "rightArrow", mr: showIconOnly ? "0" : `-${theme.space.x1}` })
+      ]
+    }
+  );
+};
+export {
+  NextButton as default
+};
+//# sourceMappingURL=NextButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NextButton.js","sources":["../../../src/Pagination/NextButton.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 NextButtonProps = {\n  disabled: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  label?: ReactNode;\n  ariaLabel?: string;\n  showIconOnly?: boolean;\n};\n\nconst NextButton = ({ disabled, onClick, label, ariaLabel, showIconOnly }: NextButtonProps) => {\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 next results\")}\n      iconOnly={showIconOnly}\n    >\n      {!showIconOnly && (label || t(\"next\"))}\n      <Icon icon=\"rightArrow\" mr={showIconOnly ? \"0\" : `-${theme.space.x1}`} />\n    </PaginationButton>\n  );\n};\n\nexport default NextButton;\n"],"names":[],"mappings":";;;;;AAcA,MAAM,aAAa,CAAC,EAAE,UAAU,SAAS,OAAO,WAAW,mBAAoC;AAC7F,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,QAAQ,SAAA;AAEd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAY,aAAa,EAAE,oBAAoB;AAAA,MAC/C,UAAU;AAAA,MAET,UAAA;AAAA,QAAA,CAAC,iBAAiB,SAAS,EAAE,MAAM;AAAA,QACpC,oBAAC,MAAA,EAAK,MAAK,cAAa,IAAI,eAAe,MAAM,IAAI,MAAM,MAAM,EAAE,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E;"}

package/dist/esm/Pagination/PageNumber.js

@@ -0,0 +1,10 @@
+import { styled } from "styled-components";
+import PaginationButton from "./PaginationButton.js";
+const PageNumber = styled(PaginationButton)(({ theme, currentPage }) => ({
+  background: currentPage ? theme.colors.darkBlue : "transparent",
+  color: currentPage ? theme.colors.whiteGrey : theme.colors.black
+}));
+export {
+  PageNumber as default
+};
+//# sourceMappingURL=PageNumber.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageNumber.js","sources":["../../../src/Pagination/PageNumber.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport PaginationButton from \"./PaginationButton\";\n\ntype PageNumberProps = {\n  currentPage: boolean;\n};\n\nconst PageNumber = styled(PaginationButton)<PageNumberProps>(({ theme, currentPage }) => ({\n  background: currentPage ? theme.colors.darkBlue : \"transparent\",\n  color: currentPage ? theme.colors.whiteGrey : theme.colors.black,\n}));\n\nexport default PageNumber;\n"],"names":[],"mappings":";;AAOA,MAAM,aAAa,OAAO,gBAAgB,EAAmB,CAAC,EAAE,OAAO,mBAAmB;AAAA,EACxF,YAAY,cAAc,MAAM,OAAO,WAAW;AAAA,EAClD,OAAO,cAAc,MAAM,OAAO,YAAY,MAAM,OAAO;AAC7D,EAAE;"}

package/dist/esm/Pagination/Pagination.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
+import useMediaQuery from "../hooks/useMediaQuery/useMediaQuery.js";
+import { noop } from "../utils/noop.js";
+import PageNumber from "./PageNumber.js";
+import PreviousButton from "./PreviousButton.js";
+import NextButton from "./NextButton.js";
+import PaginationCount from "./PaginationCount.js";
+import { getPageItemsToDisplay } from "./lib.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 Flex from "../Flex/Flex.js";
+import Text from "../Type/Text.js";
+const SEPARATOR = "...";
+function Pagination({
+  onNext = noop,
+  onPrevious = noop,
+  onSelectPage = noop,
+  currentPage,
+  totalPages,
+  maxVisiblePages = 6,
+  nextAriaLabel,
+  nextLabel,
+  previousAriaLabel,
+  previousLabel,
+  scrollToTopAfterPagination,
+  scrollTargetRef,
+  "aria-label": ariaLabel,
+  ...restProps
+}) {
+  const { t } = useTranslation();
+  const phone = !useMediaQuery("phoneLandscape");
+  const largerThanPhone = useMediaQuery("tabletPortrait");
+  const scrollToTop = () => {
+    if (scrollToTopAfterPagination) {
+      const top = scrollTargetRef?.current ? window.scrollY + scrollTargetRef.current?.getBoundingClientRect()?.top : 0;
+      window.scrollTo({
+        top,
+        behavior: "smooth"
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Flex, { as: "nav", gap: "x2", "aria-label": ariaLabel || t("pagination navigation"), alignItems: "center", ...restProps, children: [
+    /* @__PURE__ */ jsx(
+      PreviousButton,
+      {
+        disabled: currentPage === 1,
+        onClick: () => {
+          flushSync(() => {
+            onPrevious();
+          });
+          scrollToTop();
+        },
+        ariaLabel: previousAriaLabel,
+        label: phone ? null : previousLabel,
+        showIconOnly: phone
+      }
+    ),
+    largerThanPhone ? getPageItemsToDisplay({ totalPages, currentPage, maxVisiblePages }).map((page, index) => {
+      const isCurrentPage = currentPage === page;
+      if (page === SEPARATOR)
+        return /* @__PURE__ */ jsx(Text, { py: "x1", fontSize: "small", lineHeight: "smallTextBase", children: SEPARATOR }, `sep${index}`);
+      else
+        return /* @__PURE__ */ jsx(
+          PageNumber,
+          {
+            "aria-current": isCurrentPage,
+            currentPage: isCurrentPage,
+            disabled: isCurrentPage,
+            "aria-label": isCurrentPage ? null : t("go to page", { count: Number(page) }),
+            onClick: () => {
+              flushSync(() => {
+                onSelectPage(page);
+              });
+              scrollToTop();
+            },
+            children: page
+          },
+          page
+        );
+    }) : /* @__PURE__ */ jsx(PaginationCount, { currentPage, totalPages }),
+    /* @__PURE__ */ jsx(
+      NextButton,
+      {
+        disabled: currentPage === totalPages,
+        onClick: () => {
+          flushSync(() => {
+            onNext();
+          });
+          scrollToTop();
+        },
+        ariaLabel: nextAriaLabel,
+        label: phone ? null : nextLabel,
+        showIconOnly: phone
+      }
+    )
+  ] });
+}
+export {
+  SEPARATOR,
+  Pagination as default
+};
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, { ReactNode, RefObject } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { flushSync } from \"react-dom\";\nimport useMediaQuery from \"../hooks/useMediaQuery\";\nimport { noop } from \"../utils/noop\";\nimport { Flex } from \"../Flex\";\nimport { Text } from \"../Type\";\nimport { FlexProps } from \"../Flex/Flex\";\nimport PageNumber from \"./PageNumber\";\nimport PreviousButton from \"./PreviousButton\";\nimport NextButton from \"./NextButton\";\nimport PaginationCount from \"./PaginationCount\";\nimport { getPageItemsToDisplay } from \"./lib\";\n\nexport const SEPARATOR = \"...\" as const;\n\ninterface PaginationProps extends FlexProps {\n  onNext?: () => void;\n  onPrevious?: () => void;\n  onSelectPage?: (page: number) => void;\n  currentPage: number;\n  totalPages: number;\n  maxVisiblePages?: number;\n  nextLabel?: ReactNode;\n  nextAriaLabel?: string;\n  previousLabel?: ReactNode;\n  previousAriaLabel?: string;\n  scrollToTopAfterPagination?: boolean;\n  scrollTargetRef?: RefObject<HTMLElement>;\n}\n\nfunction Pagination({\n  onNext = noop,\n  onPrevious = noop,\n  onSelectPage = noop,\n  currentPage,\n  totalPages,\n  maxVisiblePages = 6,\n  nextAriaLabel,\n  nextLabel,\n  previousAriaLabel,\n  previousLabel,\n  scrollToTopAfterPagination,\n  scrollTargetRef,\n  \"aria-label\": ariaLabel,\n  ...restProps\n}: PaginationProps) {\n  const { t } = useTranslation();\n  const phone = !useMediaQuery(\"phoneLandscape\");\n  const largerThanPhone = useMediaQuery(\"tabletPortrait\");\n\n  const scrollToTop = () => {\n    if (scrollToTopAfterPagination) {\n      const top = scrollTargetRef?.current ? window.scrollY + scrollTargetRef.current?.getBoundingClientRect()?.top : 0;\n\n      window.scrollTo({\n        top,\n        behavior: \"smooth\",\n      });\n    }\n  };\n\n  return (\n    <Flex as=\"nav\" gap=\"x2\" aria-label={ariaLabel || t(\"pagination navigation\")} alignItems=\"center\" {...restProps}>\n      <PreviousButton\n        disabled={currentPage === 1}\n        onClick={() => {\n          flushSync(() => {\n            onPrevious();\n          });\n          scrollToTop();\n        }}\n        ariaLabel={previousAriaLabel}\n        label={phone ? null : previousLabel}\n        showIconOnly={phone}\n      />\n\n      {largerThanPhone ? (\n        getPageItemsToDisplay({ totalPages, currentPage, maxVisiblePages }).map((page, index) => {\n          const isCurrentPage = currentPage === page;\n\n          if (page === SEPARATOR)\n            return (\n              <Text key={`sep${index}`} py=\"x1\" fontSize=\"small\" lineHeight=\"smallTextBase\">\n                {SEPARATOR}\n              </Text>\n            );\n          else\n            return (\n              <PageNumber\n                aria-current={isCurrentPage}\n                currentPage={isCurrentPage}\n                disabled={isCurrentPage}\n                aria-label={isCurrentPage ? null : t(\"go to page\", { count: Number(page) })}\n                key={page}\n                onClick={() => {\n                  flushSync(() => {\n                    onSelectPage(page);\n                  });\n                  scrollToTop();\n                }}\n              >\n                {page}\n              </PageNumber>\n            );\n        })\n      ) : (\n        <PaginationCount currentPage={currentPage} totalPages={totalPages} />\n      )}\n\n      <NextButton\n        disabled={currentPage === totalPages}\n        onClick={() => {\n          flushSync(() => {\n            onNext();\n          });\n          scrollToTop();\n        }}\n        ariaLabel={nextAriaLabel}\n        label={phone ? null : nextLabel}\n        showIconOnly={phone}\n      />\n    </Flex>\n  );\n}\n\nexport default Pagination;\n"],"names":[],"mappings":";;;;;;;;;;;;AAcO,MAAM,YAAY;AAiBzB,SAAS,WAAW;AAAA,EAClB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAoB;AAClB,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,QAAQ,CAAC,cAAc,gBAAgB;AAC7C,QAAM,kBAAkB,cAAc,gBAAgB;AAEtD,QAAM,cAAc,MAAM;AACxB,QAAI,4BAA4B;AAC9B,YAAM,MAAM,iBAAiB,UAAU,OAAO,UAAU,gBAAgB,SAAS,yBAAyB,MAAM;AAEhH,aAAO,SAAS;AAAA,QACd;AAAA,QACA,UAAU;AAAA,MAAA,CACX;AAAA,IACH;AAAA,EACF;AAEA,SACE,qBAAC,MAAA,EAAK,IAAG,OAAM,KAAI,MAAK,cAAY,aAAa,EAAE,uBAAuB,GAAG,YAAW,UAAU,GAAG,WACnG,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,gBAAgB;AAAA,QAC1B,SAAS,MAAM;AACb,oBAAU,MAAM;AACd,uBAAA;AAAA,UACF,CAAC;AACD,sBAAA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,QACX,OAAO,QAAQ,OAAO;AAAA,QACtB,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAGf,kBACC,sBAAsB,EAAE,YAAY,aAAa,gBAAA,CAAiB,EAAE,IAAI,CAAC,MAAM,UAAU;AACvF,YAAM,gBAAgB,gBAAgB;AAEtC,UAAI,SAAS;AACX,eACE,oBAAC,MAAA,EAAyB,IAAG,MAAK,UAAS,SAAQ,YAAW,iBAC3D,UAAA,UAAA,GADQ,MAAM,KAAK,EAEtB;AAAA;AAGF,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,aAAa;AAAA,YACb,UAAU;AAAA,YACV,cAAY,gBAAgB,OAAO,EAAE,cAAc,EAAE,OAAO,OAAO,IAAI,GAAG;AAAA,YAE1E,SAAS,MAAM;AACb,wBAAU,MAAM;AACd,6BAAa,IAAI;AAAA,cACnB,CAAC;AACD,0BAAA;AAAA,YACF;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,UARI;AAAA,QAAA;AAAA,IAWb,CAAC,IAED,oBAAC,iBAAA,EAAgB,aAA0B,WAAA,CAAwB;AAAA,IAGrE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,gBAAgB;AAAA,QAC1B,SAAS,MAAM;AACb,oBAAU,MAAM;AACd,mBAAA;AAAA,UACF,CAAC;AACD,sBAAA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,QACX,OAAO,QAAQ,OAAO;AAAA,QACtB,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACF;AAEJ;"}