@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Tooltip/Tooltip.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "../node_modules/.pnpm/@radix-ui_react-tooltip@1.2.8_@types_react-dom@18.3.7_@types_react@18.3.28__@types_reac_a18368212e1009eee1acc445b8edb5ee/node_modules/@radix-ui/react-tooltip/dist/index.js";
+import { TooltipProvider, Tooltip as Tooltip$1, TooltipTrigger, TooltipContent } from "./components/TooltipComponents.js";
+import { getPlacementProps } from "./helpers.js";
+function Tooltip({
+  showDelay = "100",
+  defaultOpen = false,
+  placement = "bottom",
+  maxWidth = "24em",
+  className,
+  tooltip,
+  children
+}) {
+  const delayDuration = typeof showDelay === "string" ? parseInt(showDelay, 10) : showDelay;
+  const { side, align } = getPlacementProps(placement);
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip$1, { defaultOpen, delayDuration, supportMobileTap: true, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "data-testid": "nds-tooltip-trigger", children }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(TooltipContent, { side, align, className, maxWidth, children: tooltip }) })
+  ] }) });
+}
+export {
+  Tooltip as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from \"react\";\nimport { MaxWidthProps } from \"styled-system\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport {\n  Tooltip as BaseTooltip,\n  TooltipContent,\n  TooltipTrigger,\n  TooltipProvider,\n} from \"./components/TooltipComponents\";\nimport { getPlacementProps } from \"./helpers\";\n\nexport interface TooltipProps {\n  /** Delay before showing (in ms) */\n  showDelay?: string | number;\n  /** Whether the tooltip is open by default */\n  defaultOpen?: boolean;\n  /** Tooltip placement relative to the trigger */\n  placement?:\n    | \"top\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"bottom\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"left\"\n    | \"left-start\"\n    | \"left-end\"\n    | \"right\"\n    | \"right-start\"\n    | \"right-end\";\n  /** Maximum width for the tooltip box */\n  maxWidth?: MaxWidthProps[\"maxWidth\"];\n  /** Additional CSS class for styling */\n  className?: string;\n  /** The content to display inside the tooltip */\n  tooltip?: React.ReactNode;\n  /** Child element that triggers the tooltip */\n  children?: React.ReactNode;\n}\n\nexport default function Tooltip({\n  showDelay = \"100\",\n  defaultOpen = false,\n  placement = \"bottom\",\n  maxWidth = \"24em\",\n  className,\n  tooltip,\n  children,\n}: TooltipProps) {\n  const delayDuration = typeof showDelay === \"string\" ? parseInt(showDelay, 10) : showDelay;\n  const { side, align } = getPlacementProps(placement);\n\n  return (\n    <TooltipProvider>\n      <BaseTooltip defaultOpen={defaultOpen} delayDuration={delayDuration} supportMobileTap={true}>\n        <TooltipTrigger asChild data-testid=\"nds-tooltip-trigger\">\n          {children}\n        </TooltipTrigger>\n        <TooltipPrimitive.Portal>\n          <TooltipContent side={side} align={align} className={className} maxWidth={maxWidth}>\n            {tooltip}\n          </TooltipContent>\n        </TooltipPrimitive.Portal>\n      </BaseTooltip>\n    </TooltipProvider>\n  );\n}\n"],"names":["BaseTooltip","TooltipPrimitive.Portal"],"mappings":";;;;AAwCA,SAAwB,QAAQ;AAAA,EAC9B,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,gBAAgB,OAAO,cAAc,WAAW,SAAS,WAAW,EAAE,IAAI;AAChF,QAAM,EAAE,MAAM,UAAU,kBAAkB,SAAS;AAEnD,6BACG,iBAAA,EACC,UAAA,qBAACA,aAAY,aAA0B,eAA8B,kBAAkB,MACrF,UAAA;AAAA,IAAA,oBAAC,gBAAA,EAAe,SAAO,MAAC,eAAY,uBACjC,UACH;AAAA,IACA,oBAACC,QAAA,EACC,UAAA,oBAAC,gBAAA,EAAe,MAAY,OAAc,WAAsB,UAC7D,UAAA,QAAA,CACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/esm/Tooltip/components/TooltipComponents.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Provider, Root as Root3, Trigger, Content as Content2, Arrow as Arrow2 } from "../../node_modules/.pnpm/@radix-ui_react-tooltip@1.2.8_@types_react-dom@18.3.7_@types_react@18.3.28__@types_reac_a18368212e1009eee1acc445b8edb5ee/node_modules/@radix-ui/react-tooltip/dist/index.js";
+import { useTheme, styled, keyframes } from "styled-components";
+import { maxWidth } from "../../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+function useHasHover() {
+  try {
+    return matchMedia("(hover: hover)").matches;
+  } catch {
+    return true;
+  }
+}
+const TooltipTriggerContext = React.createContext({
+  supportMobileTap: false,
+  open: false,
+  setOpen: () => {
+  }
+});
+const TooltipProvider = Provider;
+function Tooltip({ children, ...props }) {
+  const [open, setOpen] = React.useState(props.defaultOpen ?? false);
+  const hasHover = useHasHover();
+  return /* @__PURE__ */ jsx(
+    Root3,
+    {
+      delayDuration: !hasHover && props.supportMobileTap ? 0 : props.delayDuration,
+      onOpenChange: setOpen,
+      open,
+      children: /* @__PURE__ */ jsx(
+        TooltipTriggerContext.Provider,
+        {
+          value: {
+            open,
+            setOpen,
+            supportMobileTap: props.supportMobileTap ?? false
+          },
+          children
+        }
+      )
+    }
+  );
+}
+Tooltip.displayName = Root3.displayName;
+const TooltipTrigger = React.forwardRef(({ children, ...props }, ref) => {
+  const hasHover = useHasHover();
+  const { setOpen, supportMobileTap } = React.useContext(TooltipTriggerContext);
+  const { onClick: onClickProp } = props;
+  const onClick = React.useCallback(
+    (e) => {
+      if (!hasHover && supportMobileTap) {
+        e.preventDefault();
+        setOpen(true);
+      } else {
+        onClickProp?.(e);
+      }
+    },
+    [setOpen, hasHover, supportMobileTap, onClickProp]
+  );
+  return /* @__PURE__ */ jsx(Trigger, { ref, ...props, onClick, children });
+});
+TooltipTrigger.displayName = Trigger.displayName;
+const slideUpAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideRightAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideDownAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideLeftAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const StyledContent = styled(Content2)`
+  font-family: ${({ theme }) => theme.fonts.base};
+  font-size: ${({ theme }) => theme.fontSizes.small};
+  line-height: ${({ theme }) => theme.lineHeights.smallTextBase};
+  border-radius: ${({ theme }) => theme.radii.medium};
+  padding: ${({ theme }) => theme.space.x1};
+  color: ${({ theme }) => theme.colors.black};
+  background-color: ${({ theme }) => theme.colors.white};
+  border: 1px solid ${({ theme }) => theme.colors.grey};
+  box-shadow: ${({ theme }) => theme.shadows.medium};
+  z-index: ${({ theme }) => theme.zIndices.aboveOverlay};
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-state="delayed-open"][data-side="top"] {
+    animation-name: ${slideDownAndFade};
+  }
+  &[data-state="delayed-open"][data-side="right"] {
+    animation-name: ${slideLeftAndFade};
+  }
+  &[data-state="delayed-open"][data-side="bottom"] {
+    animation-name: ${slideUpAndFade};
+  }
+  &[data-state="delayed-open"][data-side="left"] {
+    animation-name: ${slideRightAndFade};
+  }
+  ${maxWidth}
+`;
+const StyledArrow = styled(Arrow2)(({ theme }) => ({
+  fill: theme.colors.white,
+  filter: `drop-shadow(0px 1px 0px ${theme.colors.grey})`
+}));
+const TooltipContent = React.forwardRef(
+  ({ sideOffset = 4, children, ...props }, ref) => {
+    const theme = useTheme();
+    return /* @__PURE__ */ jsxs(StyledContent, { ref, sideOffset, ...props, children: [
+      children,
+      /* @__PURE__ */ jsx(StyledArrow, { width: theme.space.x1_5, height: theme.space.x0_75 })
+    ] });
+  }
+);
+TooltipContent.displayName = Content2.displayName;
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};
+//# sourceMappingURL=TooltipComponents.js.map

package/dist/esm/Tooltip/components/TooltipComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipComponents.js","sources":["../../../../src/Tooltip/components/TooltipComponents.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { styled, keyframes, useTheme } from \"styled-components\";\nimport { maxWidth } from \"styled-system\";\nimport { MaxWidthProps } from \"styled-system\";\n\n// A helper hook to determine if the device supports hover\nfunction useHasHover() {\n  try {\n    return matchMedia(\"(hover: hover)\").matches;\n  } catch {\n    // Assume that if the browser is too old to support matchMedia, it's likely not a touch device\n    return true;\n  }\n}\n\ntype TooltipTriggerContextType = {\n  supportMobileTap: boolean;\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n};\n\nconst TooltipTriggerContext = React.createContext<TooltipTriggerContextType>({\n  supportMobileTap: false,\n  open: false,\n  setOpen: () => {},\n});\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\ntype TooltipProps = TooltipPrimitive.TooltipProps & {\n  supportMobileTap?: boolean;\n};\n\nfunction Tooltip({ children, ...props }: TooltipProps) {\n  const [open, setOpen] = React.useState<boolean>(props.defaultOpen ?? false);\n  const hasHover = useHasHover();\n\n  return (\n    <TooltipPrimitive.Root\n      delayDuration={!hasHover && props.supportMobileTap ? 0 : props.delayDuration}\n      onOpenChange={setOpen}\n      open={open}\n    >\n      <TooltipTriggerContext.Provider\n        value={{\n          open,\n          setOpen,\n          supportMobileTap: props.supportMobileTap ?? false,\n        }}\n      >\n        {children}\n      </TooltipTriggerContext.Provider>\n    </TooltipPrimitive.Root>\n  );\n}\n\nTooltip.displayName = TooltipPrimitive.Root.displayName;\n\nconst TooltipTrigger = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>\n>(({ children, ...props }, ref) => {\n  const hasHover = useHasHover();\n  const { setOpen, supportMobileTap } = React.useContext(TooltipTriggerContext);\n\n  const { onClick: onClickProp } = props;\n\n  const onClick = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (!hasHover && supportMobileTap) {\n        e.preventDefault();\n        setOpen(true);\n      } else {\n        onClickProp?.(e);\n      }\n    },\n    [setOpen, hasHover, supportMobileTap, onClickProp]\n  );\n\n  return (\n    <TooltipPrimitive.Trigger ref={ref} {...props} onClick={onClick}>\n      {children}\n    </TooltipPrimitive.Trigger>\n  );\n});\n\nTooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;\n\nconst slideUpAndFade = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(2px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideRightAndFade = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(-2px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideDownAndFade = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(-2px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideLeftAndFade = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(2px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst StyledContent = styled(TooltipPrimitive.Content)`\n  font-family: ${({ theme }) => theme.fonts.base};\n  font-size: ${({ theme }) => theme.fontSizes.small};\n  line-height: ${({ theme }) => theme.lineHeights.smallTextBase};\n  border-radius: ${({ theme }) => theme.radii.medium};\n  padding: ${({ theme }) => theme.space.x1};\n  color: ${({ theme }) => theme.colors.black};\n  background-color: ${({ theme }) => theme.colors.white};\n  border: 1px solid ${({ theme }) => theme.colors.grey};\n  box-shadow: ${({ theme }) => theme.shadows.medium};\n  z-index: ${({ theme }) => theme.zIndices.aboveOverlay};\n  animation-duration: 400ms;\n  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n\n  &[data-state=\"delayed-open\"][data-side=\"top\"] {\n    animation-name: ${slideDownAndFade};\n  }\n  &[data-state=\"delayed-open\"][data-side=\"right\"] {\n    animation-name: ${slideLeftAndFade};\n  }\n  &[data-state=\"delayed-open\"][data-side=\"bottom\"] {\n    animation-name: ${slideUpAndFade};\n  }\n  &[data-state=\"delayed-open\"][data-side=\"left\"] {\n    animation-name: ${slideRightAndFade};\n  }\n  ${maxWidth}\n`;\n\nconst StyledArrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({\n  fill: theme.colors.white,\n  filter: `drop-shadow(0px 1px 0px ${theme.colors.grey})`,\n}));\n\ninterface StyledTooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, MaxWidthProps {\n  children?: React.ReactNode;\n}\n\nconst TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Content>, StyledTooltipContentProps>(\n  ({ sideOffset = 4, children, ...props }, ref) => {\n    const theme = useTheme();\n    return (\n      <StyledContent ref={ref} sideOffset={sideOffset} {...props}>\n        {children}\n        <StyledArrow width={theme.space.x1_5} height={theme.space.x0_75} />\n      </StyledContent>\n    );\n  }\n);\n\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"],"names":["TooltipPrimitive.Provider","TooltipPrimitive.Root","TooltipPrimitive.Trigger","TooltipPrimitive.Content","TooltipPrimitive.Arrow"],"mappings":"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"}

package/dist/esm/Tooltip/helpers.js

@@ -0,0 +1,8 @@
+function getPlacementProps(placement) {
+  const [side, align = "center"] = placement.split("-");
+  return { side, align };
+}
+export {
+  getPlacementProps
+};
+//# sourceMappingURL=helpers.js.map

package/dist/esm/Tooltip/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/Tooltip/helpers.ts"],"sourcesContent":["type Side = \"top\" | \"bottom\" | \"left\" | \"right\";\ntype Alignment = (\"start\" | \"end\" | \"center\") | undefined;\n\ntype PlacementProps = {\n  side: Side;\n  align: Alignment;\n};\n\nexport function getPlacementProps(placement: string): PlacementProps {\n  const [side, align = \"center\"] = placement.split(\"-\") as [Side, Alignment];\n  return { side, align };\n}\n"],"names":[],"mappings":"AAQO,SAAS,kBAAkB,WAAmC;AACnE,QAAM,CAAC,MAAM,QAAQ,QAAQ,IAAI,UAAU,MAAM,GAAG;AACpD,SAAO,EAAE,MAAM,MAAA;AACjB;"}

package/dist/esm/TopBar/TopBar.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { BackLink } from "./components/BackLink.js";
+import { Menu } from "./components/Menu.js";
+import { MenuItem } from "./components/MenuItem.js";
+import { MenuItemLink } from "./components/MenuItemLink.js";
+import { PageTitle } from "./components/PageTitle.js";
+import { Header, Navigation, NavigationItemsList } from "./TopBar.styled.js";
+function Root({ children }) {
+  return /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Navigation, { children: /* @__PURE__ */ jsx(NavigationItemsList, { children }) }) });
+}
+const TopBar = {
+  Root,
+  PageTitle,
+  BackLink,
+  Menu,
+  MenuItem,
+  MenuItemLink
+};
+export {
+  TopBar
+};
+//# sourceMappingURL=TopBar.js.map

package/dist/esm/TopBar/TopBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.js","sources":["../../../src/TopBar/TopBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { BackLink } from \"./components/BackLink\";\nimport { Menu } from \"./components/Menu\";\nimport { MenuItem } from \"./components/MenuItem\";\nimport { MenuItemLink } from \"./components/MenuItemLink\";\nimport { PageTitle } from \"./components/PageTitle\";\nimport { Header, Navigation, NavigationItemsList } from \"./TopBar.styled\";\n\nexport interface TopBarProps {\n  children?: React.ReactNode;\n}\n\nexport default function Root({ children }: TopBarProps) {\n  return (\n    <Header>\n      <Navigation>\n        <NavigationItemsList>{children}</NavigationItemsList>\n      </Navigation>\n    </Header>\n  );\n}\n\nexport const TopBar = {\n  Root,\n  PageTitle,\n  BackLink,\n  Menu,\n  MenuItem,\n  MenuItemLink,\n};\n"],"names":[],"mappings":";;;;;;;AAYA,SAAwB,KAAK,EAAE,YAAyB;AACtD,SACE,oBAAC,UACC,UAAA,oBAAC,YAAA,EACC,8BAAC,qBAAA,EAAqB,SAAA,CAAS,GACjC,EAAA,CACF;AAEJ;AAEO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/TopBar/TopBar.styled.js

@@ -0,0 +1,156 @@
+import { DialogOverlay } from "../node_modules/.pnpm/@reach_dialog@0.18.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/dialog/dist/reach-dialog.js";
+import { transparentize as curriedTransparentize$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import { styled } from "styled-components";
+import { addStyledProps } from "../StyledProps/index.js";
+import { TOPBAR } from "./constants.js";
+import { motion } 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/render/components/motion/proxy.js";
+const MenuItemList = styled.ul(({ theme }) => ({
+  display: "grid",
+  width: "100%",
+  gap: theme.space.x1,
+  flexWrap: "wrap",
+  listStyle: "none",
+  padding: theme.space.x1_5,
+  margin: 0,
+  maxHeight: `calc(100dvh - ${theme.space[TOPBAR.themedHeight]})`,
+  overflow: "auto",
+  gridTemplateColumns: "1fr",
+  [`@media (min-width: ${theme.breakpoints.medium})`]: {
+    gridTemplateColumns: "repeat(2, 1fr)"
+  },
+  [`@media (min-width: ${theme.breakpoints.large})`]: {
+    gridTemplateColumns: "repeat(3, 1fr)"
+  }
+}));
+const Header = styled.header(({ theme }) => ({
+  userSelect: "none",
+  touchAction: "none",
+  position: "sticky",
+  top: "0",
+  zIndex: theme.zIndices.navBar,
+  borderBottomWidth: "1px",
+  borderBottomStyle: "solid",
+  borderBottomColor: theme.colors.lightGrey,
+  background: curriedTransparentize$1(0.4, theme.colors.white),
+  backdropFilter: "blur(8px)",
+  width: "100dvw"
+}));
+const Navigation = styled.nav(({ theme }) => ({
+  height: theme.space[TOPBAR.themedHeight],
+  display: "flex",
+  alignItems: "center",
+  paddingLeft: theme.space.x2,
+  paddingRight: theme.space.x1
+}));
+const StylelessButton = styled.button(
+  {
+    backgroundColor: "transparent",
+    border: "none",
+    margin: 0,
+    padding: 0,
+    textAlign: "inherit",
+    font: "inherit",
+    borderRadius: 0,
+    appearance: "none"
+  },
+  addStyledProps
+);
+const MenuButton = styled(StylelessButton)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: theme.space.x1,
+  borderRadius: theme.radii.medium,
+  transition: "background-color 0.2s",
+  cursor: "pointer",
+  "&:active, &:hover": {
+    backgroundColor: theme.colors.lightGrey
+  }
+}));
+const NavigationItemsList = styled.ul({
+  padding: 0,
+  margin: 0,
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  listStyle: "none",
+  whiteSpace: "nowrap"
+});
+const StyledBackLink = styled.a(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  color: theme.colors.midGrey,
+  textDecoration: "none",
+  paddingTop: theme.space.x1,
+  paddingBottom: theme.space.x1
+}));
+const StyledPageTitle = styled.li(({ theme }) => ({
+  paddingLeft: theme.space.x1,
+  paddingRight: theme.space.x1,
+  color: theme.colors.darkGrey,
+  textDecoration: "none",
+  fontSize: theme.fontSizes.small,
+  fontWeight: theme.fontWeights.medium,
+  lineHeight: theme.lineHeights.base,
+  whiteSpace: "nowrap",
+  flex: "auto",
+  textAlign: "center",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+}));
+const Overlay = styled(motion(DialogOverlay))(({ theme }) => ({
+  position: "fixed",
+  top: theme.space[TOPBAR.themedHeight],
+  bottom: theme.space.none,
+  left: theme.space.none,
+  right: theme.space.none,
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "flex-end",
+  backgroundColor: curriedTransparentize$1(0.85, theme.colors.white)
+}));
+const TileLink = styled.a(({ theme }) => ({
+  backgroundColor: curriedTransparentize$1(0.15)(theme.colors.blackBlue),
+  borderRadius: theme.radii.large,
+  display: "flex",
+  height: "100%",
+  alignItems: "flex-start",
+  padding: theme.space.x2,
+  textDecoration: "none",
+  color: theme.colors.white,
+  gap: theme.space.x1_5,
+  whiteSpace: "nowrap",
+  outlineOffset: theme.space.x0_25,
+  outlineColor: theme.colors.blue
+}));
+const StyledMenuItem = styled(motion.li)(({ theme }) => ({
+  "&:only-child": {
+    [`@media (min-width: ${theme.breakpoints.medium})`]: {
+      gridColumn: "span 2"
+    },
+    [`@media (min-width: ${theme.breakpoints.large})`]: {
+      gridColumn: "span 3"
+    }
+  },
+  [`@media (min-width: ${theme.breakpoints.large})`]: {
+    "&:first-child:nth-last-child(2), &:last-child:nth-child(2)": {
+      gridColumn: "span 3"
+    }
+  }
+}));
+export {
+  Header,
+  MenuButton,
+  MenuItemList,
+  Navigation,
+  NavigationItemsList,
+  Overlay,
+  StyledBackLink,
+  StyledMenuItem,
+  StyledPageTitle,
+  StylelessButton,
+  TileLink
+};
+//# sourceMappingURL=TopBar.styled.js.map

package/dist/esm/TopBar/TopBar.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBar.styled.js","sources":["../../../src/TopBar/TopBar.styled.tsx"],"sourcesContent":["import { DialogOverlay } from \"@reach/dialog\";\nimport { motion } from \"framer-motion\";\nimport { transparentize } from \"polished\";\nimport { styled } from \"styled-components\";\nimport { addStyledProps, StyledProps } from \"../StyledProps\";\nimport { TOPBAR } from \"./constants\";\n\nconst MenuItemList = styled.ul(({ theme }) => ({\n  display: \"grid\",\n  width: \"100%\",\n  gap: theme.space.x1,\n  flexWrap: \"wrap\",\n  listStyle: \"none\",\n  padding: theme.space.x1_5,\n  margin: 0,\n  maxHeight: `calc(100dvh - ${theme.space[TOPBAR.themedHeight]})`,\n  overflow: \"auto\",\n  gridTemplateColumns: \"1fr\",\n\n  [`@media (min-width: ${theme.breakpoints.medium})`]: {\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n  },\n\n  [`@media (min-width: ${theme.breakpoints.large})`]: {\n    gridTemplateColumns: \"repeat(3, 1fr)\",\n  },\n}));\n\nconst Header = styled.header(({ theme }) => ({\n  userSelect: \"none\",\n  touchAction: \"none\",\n  position: \"sticky\",\n  top: \"0\",\n  zIndex: theme.zIndices.navBar,\n  borderBottomWidth: \"1px\",\n  borderBottomStyle: \"solid\",\n  borderBottomColor: theme.colors.lightGrey,\n  background: transparentize(0.4, theme.colors.white),\n  backdropFilter: \"blur(8px)\",\n  width: \"100dvw\",\n}));\n\nconst Navigation = styled.nav(({ theme }) => ({\n  height: theme.space[TOPBAR.themedHeight],\n  display: \"flex\",\n  alignItems: \"center\",\n  paddingLeft: theme.space.x2,\n  paddingRight: theme.space.x1,\n}));\n\nconst StylelessButton = styled.button<StyledProps>(\n  {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    margin: 0,\n    padding: 0,\n    textAlign: \"inherit\",\n    font: \"inherit\",\n    borderRadius: 0,\n    appearance: \"none\",\n  },\n  addStyledProps\n);\n\nconst MenuButton = styled(StylelessButton)(({ theme }) => ({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  padding: theme.space.x1,\n  borderRadius: theme.radii.medium,\n  transition: \"background-color 0.2s\",\n  cursor: \"pointer\",\n\n  \"&:active, &:hover\": {\n    backgroundColor: theme.colors.lightGrey,\n  },\n}));\n\nconst NavigationItemsList = styled.ul({\n  padding: 0,\n  margin: 0,\n  width: \"100%\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  listStyle: \"none\",\n  whiteSpace: \"nowrap\",\n});\n\nconst StyledBackLink = styled.a(({ theme }) => ({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"flex-start\",\n  color: theme.colors.midGrey,\n  textDecoration: \"none\",\n  paddingTop: theme.space.x1,\n  paddingBottom: theme.space.x1,\n}));\n\nconst StyledPageTitle = styled.li(({ theme }) => ({\n  paddingLeft: theme.space.x1,\n  paddingRight: theme.space.x1,\n  color: theme.colors.darkGrey,\n  textDecoration: \"none\",\n  fontSize: theme.fontSizes.small,\n  fontWeight: theme.fontWeights.medium,\n  lineHeight: theme.lineHeights.base,\n  whiteSpace: \"nowrap\",\n  flex: \"auto\",\n  textAlign: \"center\",\n  textOverflow: \"ellipsis\",\n  overflow: \"hidden\",\n}));\n\nconst Overlay = styled(motion(DialogOverlay))(({ theme }) => ({\n  position: \"fixed\",\n  top: theme.space[TOPBAR.themedHeight],\n  bottom: theme.space.none,\n  left: theme.space.none,\n  right: theme.space.none,\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: \"flex-end\",\n  backgroundColor: transparentize(0.85, theme.colors.white),\n}));\n\nconst TileLink = styled.a(({ theme }) => ({\n  backgroundColor: transparentize(0.15)(theme.colors.blackBlue),\n  borderRadius: theme.radii.large,\n  display: \"flex\",\n  height: \"100%\",\n  alignItems: \"flex-start\",\n  padding: theme.space.x2,\n  textDecoration: \"none\",\n  color: theme.colors.white,\n  gap: theme.space.x1_5,\n  whiteSpace: \"nowrap\",\n  outlineOffset: theme.space.x0_25,\n  outlineColor: theme.colors.blue,\n}));\n\nconst StyledMenuItem = styled(motion.li)(({ theme }) => ({\n  \"&:only-child\": {\n    [`@media (min-width: ${theme.breakpoints.medium})`]: {\n      gridColumn: \"span 2\",\n    },\n    [`@media (min-width: ${theme.breakpoints.large})`]: {\n      gridColumn: \"span 3\",\n    },\n  },\n\n  [`@media (min-width: ${theme.breakpoints.large})`]: {\n    \"&:first-child:nth-last-child(2), &:last-child:nth-child(2)\": {\n      gridColumn: \"span 3\",\n    },\n  },\n}));\n\nexport {\n  Navigation,\n  Header,\n  NavigationItemsList,\n  StyledBackLink,\n  StyledPageTitle,\n  Overlay,\n  TileLink,\n  StylelessButton,\n  MenuItemList,\n  MenuButton,\n  StyledMenuItem,\n};\n"],"names":["transparentize"],"mappings":"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"}

package/dist/esm/TopBar/components/BackLink.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useMediaQuery from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { StyledBackLink } from "../TopBar.styled.js";
+import Box from "../../Box/Box.js";
+import Icon from "../../Icon/Icon.js";
+import Text from "../../Type/Text.js";
+const BACK_LINK_MAX_WIDTH = {
+  phoneLandscape: "20ch",
+  tabletPortrait: "18ch",
+  tabletLandscape: "20ch",
+  laptop: "24ch"
+};
+function BackLink({ children, maxWidth = BACK_LINK_MAX_WIDTH, ...props }) {
+  const md = useMediaQuery("phoneLandscape");
+  return /* @__PURE__ */ jsx(Box, { as: "li", flex: "1 1", children: /* @__PURE__ */ jsxs(StyledBackLink, { ...props, "data-testid": "topbar-back-link", children: [
+    /* @__PURE__ */ jsx(Icon, { icon: "arrowBack" }),
+    md && /* @__PURE__ */ jsx(Text, { maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small", children })
+  ] }) });
+}
+export {
+  BackLink
+};
+//# sourceMappingURL=BackLink.js.map

package/dist/esm/TopBar/components/BackLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackLink.js","sources":["../../../../src/TopBar/components/BackLink.tsx"],"sourcesContent":["import React, { ComponentProps } from \"react\";\nimport { MaxWidthProps } from \"styled-system\";\nimport { Box } from \"../../Box\";\nimport useMediaQuery from \"../../hooks/useMediaQuery\";\nimport { Icon } from \"../../Icon\";\nimport { Text } from \"../../Type\";\nimport { StyledBackLink } from \"../TopBar.styled\";\n\nconst BACK_LINK_MAX_WIDTH: MaxWidthProps[\"maxWidth\"] = {\n  phoneLandscape: \"20ch\",\n  tabletPortrait: \"18ch\",\n  tabletLandscape: \"20ch\",\n  laptop: \"24ch\",\n};\n\ninterface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {\n  as?: React.ElementType;\n  to?: string;\n}\n\nexport function BackLink({ children, maxWidth = BACK_LINK_MAX_WIDTH, ...props }: BackLinkProps) {\n  const md = useMediaQuery(\"phoneLandscape\");\n\n  return (\n    <Box as=\"li\" flex=\"1 1\">\n      <StyledBackLink {...props} data-testid=\"topbar-back-link\">\n        <Icon icon=\"arrowBack\" />\n        {md && (\n          <Text maxWidth={maxWidth} textOverflow=\"ellipsis\" overflow=\"hidden\" fontSize=\"small\">\n            {children}\n          </Text>\n        )}\n      </StyledBackLink>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,sBAAiD;AAAA,EACrD,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,QAAQ;AACV;AAOO,SAAS,SAAS,EAAE,UAAU,WAAW,qBAAqB,GAAG,SAAwB;AAC9F,QAAM,KAAK,cAAc,gBAAgB;AAEzC,SACE,oBAAC,KAAA,EAAI,IAAG,MAAK,MAAK,OAChB,UAAA,qBAAC,gBAAA,EAAgB,GAAG,OAAO,eAAY,oBACrC,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,MAAK,YAAA,CAAY;AAAA,IACtB,MACC,oBAAC,MAAA,EAAK,UAAoB,cAAa,YAAW,UAAS,UAAS,UAAS,SAC1E,SAAA,CACH;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

package/dist/esm/TopBar/components/Menu.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { DialogContent } from "../../node_modules/.pnpm/@reach_dialog@0.18.0_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/dialog/dist/reach-dialog.js";
+import React__default from "react";
+import { MenuButton, Overlay, MenuItemList } from "../TopBar.styled.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 Icon from "../../Icon/Icon.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";
+const blurVariants = {
+  hidden: {
+    backdropFilter: "blur(0px)",
+    WebkitBackdropFilter: "blur(0px)"
+  },
+  visible: {
+    backdropFilter: "blur(8px)",
+    WebkitBackdropFilter: "blur(8px)",
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut"
+    }
+  },
+  exit: {
+    backdropFilter: "blur(0px)",
+    WebkitBackdropFilter: "blur(0px)",
+    transition: {
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }
+};
+function Menu({
+  children,
+  defaultOpened = false,
+  ...props
+}) {
+  const [showMenu, setShowMenu] = React__default.useState(defaultOpened);
+  const [animationComplete, setAnimationComplete] = React__default.useState(false);
+  const { t } = useTranslation();
+  function close() {
+    setShowMenu(false);
+    setAnimationComplete(false);
+  }
+  function toggle() {
+    if (!showMenu) {
+      setAnimationComplete(false);
+    }
+    setShowMenu((s) => !s);
+  }
+  return /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", as: "li", color: "black", flex: "1 1", children: [
+    /* @__PURE__ */ jsx(MenuButton, { onClick: toggle, "data-testid": "topbar-menu-button", children: /* @__PURE__ */ jsx(Icon, { size: "x3", color: "midGrey", icon: showMenu ? "close" : "apps" }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: showMenu && /* @__PURE__ */ jsx(
+      Overlay,
+      {
+        "data-testid": "topbar-menu-overlay",
+        "data-visible": animationComplete ? "true" : void 0,
+        initial: "hidden",
+        animate: "visible",
+        exit: "exit",
+        variants: blurVariants,
+        isOpen: showMenu,
+        onAnimationComplete: () => {
+          if (showMenu) {
+            setAnimationComplete(true);
+          }
+        },
+        onDismiss: close,
+        children: /* @__PURE__ */ jsx(
+          DialogContent,
+          {
+            "data-testid": "topbar-menu",
+            "data-visible": animationComplete ? true : void 0,
+            "aria-label": props["aria-label"] ?? t("menu options"),
+            children: /* @__PURE__ */ jsx(MenuItemList, { children })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  Menu
+};
+//# sourceMappingURL=Menu.js.map

package/dist/esm/TopBar/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../../src/TopBar/components/Menu.tsx"],"sourcesContent":["import { DialogContent } from \"@reach/dialog\";\nimport { AnimatePresence } from \"framer-motion\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Flex } from \"../../Flex\";\nimport { Icon } from \"../../Icon\";\nimport { MenuButton, Overlay, MenuItemList } from \"../TopBar.styled\";\n\nconst blurVariants = {\n  hidden: {\n    backdropFilter: \"blur(0px)\",\n    WebkitBackdropFilter: \"blur(0px)\",\n  },\n  visible: {\n    backdropFilter: \"blur(8px)\",\n    WebkitBackdropFilter: \"blur(8px)\",\n    transition: {\n      duration: 0.5,\n      ease: \"easeInOut\" as const,\n    },\n  },\n  exit: {\n    backdropFilter: \"blur(0px)\",\n    WebkitBackdropFilter: \"blur(0px)\",\n    transition: {\n      duration: 0.5,\n      ease: \"easeOut\" as const,\n    },\n  },\n};\n\nexport function Menu({\n  children,\n  defaultOpened = false,\n  ...props\n}: {\n  defaultOpened?: boolean;\n  children: React.ReactNode;\n  \"aria-label\"?: string;\n}) {\n  const [showMenu, setShowMenu] = React.useState(defaultOpened);\n  const [animationComplete, setAnimationComplete] = React.useState(false);\n  const { t } = useTranslation();\n\n  function close() {\n    setShowMenu(false);\n    setAnimationComplete(false);\n  }\n\n  function toggle() {\n    if (!showMenu) {\n      setAnimationComplete(false);\n    }\n    setShowMenu((s) => !s);\n  }\n\n  return (\n    <Flex justifyContent=\"flex-end\" as=\"li\" color=\"black\" flex=\"1 1\">\n      <MenuButton onClick={toggle} data-testid=\"topbar-menu-button\">\n        <Icon size=\"x3\" color=\"midGrey\" icon={showMenu ? \"close\" : \"apps\"} />\n      </MenuButton>\n      <AnimatePresence>\n        {showMenu && (\n          <Overlay\n            data-testid=\"topbar-menu-overlay\"\n            data-visible={animationComplete ? \"true\" : undefined}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            variants={blurVariants}\n            isOpen={showMenu}\n            onAnimationComplete={() => {\n              if (showMenu) {\n                setAnimationComplete(true);\n              }\n            }}\n            onDismiss={close}\n          >\n            <DialogContent\n              data-testid=\"topbar-menu\"\n              data-visible={animationComplete ? true : undefined}\n              aria-label={props[\"aria-label\"] ?? t(\"menu options\")}\n            >\n              <MenuItemList>{children}</MenuItemList>\n            </DialogContent>\n          </Overlay>\n        )}\n      </AnimatePresence>\n    </Flex>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;AAQA,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,IACN,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,EAAA;AAAA,EAExB,SAAS;AAAA,IACP,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAIG;AACD,QAAM,CAAC,UAAU,WAAW,IAAIA,eAAM,SAAS,aAAa;AAC5D,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,eAAM,SAAS,KAAK;AACtE,QAAM,EAAE,EAAA,IAAM,eAAA;AAEd,WAAS,QAAQ;AACf,gBAAY,KAAK;AACjB,yBAAqB,KAAK;AAAA,EAC5B;AAEA,WAAS,SAAS;AAChB,QAAI,CAAC,UAAU;AACb,2BAAqB,KAAK;AAAA,IAC5B;AACA,gBAAY,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB;AAEA,SACE,qBAAC,QAAK,gBAAe,YAAW,IAAG,MAAK,OAAM,SAAQ,MAAK,OACzD,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,SAAS,QAAQ,eAAY,sBACvC,UAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,OAAM,WAAU,MAAM,WAAW,UAAU,QAAQ,GACrE;AAAA,IACA,oBAAC,mBACE,UAAA,YACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,gBAAc,oBAAoB,SAAS;AAAA,QAC3C,SAAQ;AAAA,QACR,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,qBAAqB,MAAM;AACzB,cAAI,UAAU;AACZ,iCAAqB,IAAI;AAAA,UAC3B;AAAA,QACF;AAAA,QACA,WAAW;AAAA,QAEX,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,gBAAc,oBAAoB,OAAO;AAAA,YACzC,cAAY,MAAM,YAAY,KAAK,EAAE,cAAc;AAAA,YAEnD,UAAA,oBAAC,gBAAc,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,EACF,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/TopBar/components/MenuItem.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { StyledMenuItem } from "../TopBar.styled.js";
+const fadeInVariants = {
+  hidden: {
+    opacity: 0,
+    filter: "blur(8px)",
+    y: -16,
+    scale: 0.95,
+    transition: {
+      ease: "easeOut",
+      duration: 0.25
+    }
+  },
+  visible: {
+    opacity: 1,
+    filter: "blur(0px)",
+    y: 0,
+    scale: 1,
+    transition: {
+      type: "spring",
+      duration: 0.75
+    }
+  }
+};
+function MenuItem({ children }) {
+  return /* @__PURE__ */ jsx(
+    StyledMenuItem,
+    {
+      "data-testid": "topbar-menu-item",
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      variants: fadeInVariants,
+      children
+    }
+  );
+}
+export {
+  MenuItem
+};
+//# sourceMappingURL=MenuItem.js.map

package/dist/esm/TopBar/components/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../../src/TopBar/components/MenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { StyledMenuItem } from \"../TopBar.styled\";\n\nconst fadeInVariants = {\n  hidden: {\n    opacity: 0,\n    filter: \"blur(8px)\",\n    y: -16,\n    scale: 0.95,\n    transition: {\n      ease: \"easeOut\" as const,\n      duration: 0.25,\n    },\n  },\n  visible: {\n    opacity: 1,\n    filter: \"blur(0px)\",\n    y: 0,\n    scale: 1,\n    transition: {\n      type: \"spring\" as const,\n      duration: 0.75,\n    },\n  },\n};\n\nexport function MenuItem({ children }: React.PropsWithChildren<{}>) {\n  return (\n    <StyledMenuItem\n      data-testid=\"topbar-menu-item\"\n      initial=\"hidden\"\n      animate=\"visible\"\n      exit=\"hidden\"\n      variants={fadeInVariants}\n    >\n      {children}\n    </StyledMenuItem>\n  );\n}\n"],"names":[],"mappings":";;AAGA,MAAM,iBAAiB;AAAA,EACrB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;AAEO,SAAS,SAAS,EAAE,YAAyC;AAClE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,UAAU;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/TopBar/components/MenuItemLink.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TileLink } from "../TopBar.styled.js";
+import Icon from "../../Icon/Icon.js";
+import Flex from "../../Flex/Flex.js";
+import { motion } 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/render/components/motion/proxy.js";
+import Text from "../../Type/Text.js";
+const MotionText = motion(Text);
+function MenuItemLink({ description, title, icon, ...props }) {
+  return /* @__PURE__ */ jsxs(TileLink, { ...props, children: [
+    /* @__PURE__ */ jsx(Icon, { icon, size: "x3" }),
+    /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(MotionText, { fontWeight: "medium", fontSize: "md", lineHeight: "base", children: title }),
+      /* @__PURE__ */ jsx(MotionText, { fontSize: "xs", children: description })
+    ] })
+  ] });
+}
+export {
+  MenuItemLink
+};
+//# sourceMappingURL=MenuItemLink.js.map

package/dist/esm/TopBar/components/MenuItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemLink.js","sources":["../../../../src/TopBar/components/MenuItemLink.tsx"],"sourcesContent":["import { IconName } from \"@nulogy/icons\";\nimport { motion } from \"framer-motion\";\nimport React, { ComponentProps } from \"react\";\nimport { Flex } from \"../../Flex\";\nimport { Icon } from \"../../Icon\";\nimport { Text } from \"../../Type\";\nimport { TileLink } from \"../TopBar.styled\";\n\nconst MotionText = motion(Text);\n\nexport interface MenuItemLinkProps extends ComponentProps<typeof TileLink> {\n  as?: React.ElementType;\n  to?: string;\n  title: string;\n  description?: string;\n  icon: IconName;\n}\n\nexport function MenuItemLink({ description, title, icon, ...props }: MenuItemLinkProps) {\n  return (\n    <TileLink {...props}>\n      <Icon icon={icon} size=\"x3\" />\n      <Flex flexDirection=\"column\" justifyContent=\"center\">\n        <MotionText fontWeight=\"medium\" fontSize=\"md\" lineHeight=\"base\">\n          {title}\n        </MotionText>\n        <MotionText fontSize=\"xs\">{description}</MotionText>\n      </Flex>\n    </TileLink>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,aAAa,OAAO,IAAI;AAUvB,SAAS,aAAa,EAAE,aAAa,OAAO,MAAM,GAAG,SAA4B;AACtF,SACE,qBAAC,UAAA,EAAU,GAAG,OACZ,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,MAAY,MAAK,KAAA,CAAK;AAAA,IAC5B,qBAAC,MAAA,EAAK,eAAc,UAAS,gBAAe,UAC1C,UAAA;AAAA,MAAA,oBAAC,cAAW,YAAW,UAAS,UAAS,MAAK,YAAW,QACtD,UAAA,MAAA,CACH;AAAA,MACA,oBAAC,YAAA,EAAW,UAAS,MAAM,UAAA,YAAA,CAAY;AAAA,IAAA,EAAA,CACzC;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/TopBar/components/PageTitle.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { StyledPageTitle } from "../TopBar.styled.js";
+function PageTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsx(StyledPageTitle, { "data-testid": "topbar-page-title", ...props, children });
+}
+export {
+  PageTitle
+};
+//# sourceMappingURL=PageTitle.js.map

package/dist/esm/TopBar/components/PageTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitle.js","sources":["../../../../src/TopBar/components/PageTitle.tsx"],"sourcesContent":["import React, { ComponentProps } from \"react\";\nimport { StyledPageTitle } from \"../TopBar.styled\";\n\nexport function PageTitle({ children, ...props }: ComponentProps<typeof StyledPageTitle>) {\n  return (\n    <StyledPageTitle data-testid=\"topbar-page-title\" {...props}>\n      {children}\n    </StyledPageTitle>\n  );\n}\n"],"names":[],"mappings":";;AAGO,SAAS,UAAU,EAAE,UAAU,GAAG,SAAiD;AACxF,6BACG,iBAAA,EAAgB,eAAY,qBAAqB,GAAG,OAClD,UACH;AAEJ;"}

package/dist/esm/TopBar/constants.js

@@ -0,0 +1,7 @@
+const TOPBAR = {
+  themedHeight: "x6"
+};
+export {
+  TOPBAR
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/TopBar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/TopBar/constants.ts"],"sourcesContent":["export const TOPBAR = {\n  themedHeight: \"x6\",\n};\n"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,cAAc;AAChB;"}