@ssa-ui-kit/core 3.17.0 → 3.19.1

package/dist/index.js

@@ -7964,6 +7964,8 @@ __webpack_require__.d(__webpack_exports__, {
   BarLineComplexChart: () => (/* reexport */ BarLineComplexChart),
   BigNumberChart: () => (/* reexport */ BigNumberChart),
   BigNumberChartComponent: () => (/* reexport */ BigNumberChartComponent),
+  BreadcrumbMenu: () => (/* reexport */ BreadcrumbMenu),
+  Breadcrumbs: () => (/* reexport */ Breadcrumbs),
   Button: () => (/* reexport */ Button_Button),
   ButtonGroup: () => (/* reexport */ ButtonGroup),
   CandlestickChart: () => (/* reexport */ CandlestickChart),
@@ -8164,6 +8166,7 @@ __webpack_require__.d(__webpack_exports__, {
   cancelButtonStyles: () => (/* reexport */ cancelButtonStyles),
   checkboxStyles: () => (/* reexport */ checkboxStyles),
   clearButtonStyles: () => (/* reexport */ clearButtonStyles),
+  deriveBreadcrumbs: () => (/* reexport */ deriveBreadcrumbs),
   filterButtonStyles: () => (/* reexport */ filterButtonStyles),
   globalStyles: () => (/* reexport */ global_namespaceObject),
   highlightInputMatch: () => (/* reexport */ highlightInputMatch),
@@ -8177,6 +8180,7 @@ __webpack_require__.d(__webpack_exports__, {
   styleUtils: () => (/* reexport */ safari_focus_outline_namespaceObject),
   styles: () => (/* reexport */ Tooltip_styles_namespaceObject),
   useAccordionGroupContext: () => (/* reexport */ useAccordionGroupContext),
+  useBreadcrumbs: () => (/* reexport */ useBreadcrumbs),
   useCollapsibleNavBarContext: () => (/* reexport */ useCollapsibleNavBarContext),
   useCollapsibleNavBarItemContext: () => (/* reexport */ useCollapsibleNavBarItemContext),
   useDrawer: () => (/* reexport */ useDrawer),
@@ -18243,6 +18247,836 @@ const IconButton = ({
 };
 ;// ./src/components/IconButton/index.ts
 
+;// external "react-router-dom"
+const external_react_router_dom_namespaceObject = require("react-router-dom");
+;// ./src/components/WithLink.tsx
+function WithLink_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+var WithLink_ref =  true ? {
+  name: "me5k4h",
+  styles: "text-decoration:none;div{cursor:pointer;}"
+} : 0;
+const WithLink = ({
+  link,
+  onClick,
+  children,
+  className
+}) => link ? (0,jsx_runtime_namespaceObject.jsx)(external_react_router_dom_namespaceObject.Link, {
+  to: link,
+  onClick: onClick,
+  className: className,
+  css: WithLink_ref,
+  children: children
+}) : children;
+;// ./src/components/Popover/hooks/usePopover.tsx
+
+
+
+/**
+ * usePopover - Hook for popover functionality
+ *
+ * Custom hook that provides popover state management, positioning, and interactions.
+ * Handles both controlled and uncontrolled modes, supports multiple interaction types
+ * (click, hover, both), and integrates with Floating UI for positioning and focus management.
+ *
+ * @param options - Popover configuration options
+ * @returns Popover context value with state, positioning, and interaction handlers
+ *
+ * @example
+ * ```tsx
+ * const popover = usePopover({
+ *   placement: 'top',
+ *   interactionsEnabled: 'click',
+ *   modal: false,
+ * });
+ * ```
+ *
+ * @see {@link Popover} - Component that uses this hook
+ */
+const usePopover = ({
+  initialOpen = false,
+  placement = 'bottom',
+  modal,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  keyboardHandlers = true,
+  floatingOptions = {},
+  interactionsEnabled = 'click'
+} = {}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = external_react_namespaceObject.useState(initialOpen);
+  const [labelId, setLabelId] = external_react_namespaceObject.useState();
+  const [descriptionId, setDescriptionId] = external_react_namespaceObject.useState();
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+  const data = (0,external_floating_ui_react_namespaceObject.useFloating)({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: external_floating_ui_react_namespaceObject.autoUpdate,
+    middleware: [(0,external_floating_ui_react_namespaceObject.offset)(5), (0,external_floating_ui_react_namespaceObject.flip)({
+      crossAxis: placement.includes('-'),
+      padding: 5
+    }), (0,external_floating_ui_react_namespaceObject.shift)({
+      padding: 5
+    })],
+    ...floatingOptions
+  });
+  const context = data.context;
+  const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
+    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['click', 'both'].includes(interactionsEnabled),
+    keyboardHandlers
+  });
+  const isControlled = controlledOpen !== undefined;
+  const dismiss = (0,external_floating_ui_react_namespaceObject.useDismiss)(context, {
+    // When controlled, disable referencePress (parent handles toggle) but keep outsidePress
+    referencePress: !isControlled,
+    // Keep outsidePress enabled even in controlled mode
+    outsidePress: true,
+    escapeKey: true,
+    ancestorScroll: !isControlled
+  });
+  const role = (0,external_floating_ui_react_namespaceObject.useRole)(context);
+  const hover = (0,external_floating_ui_react_namespaceObject.useHover)(context, {
+    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['hover', 'both'].includes(interactionsEnabled),
+    handleClose: (0,external_floating_ui_react_namespaceObject.safePolygon)()
+  });
+  const interactionsHooks = [dismiss, role];
+  switch (interactionsEnabled) {
+    case 'click':
+      {
+        interactionsHooks.push(click);
+        break;
+      }
+    case 'hover':
+      {
+        interactionsHooks.push(hover);
+        break;
+      }
+    default:
+      {
+        interactionsHooks.push(click, hover);
+      }
+  }
+  const interactions = (0,external_floating_ui_react_namespaceObject.useInteractions)(interactionsHooks);
+  const result = external_react_namespaceObject.useMemo(() => ({
+    open,
+    setOpen,
+    ...interactions,
+    ...data,
+    modal,
+    labelId,
+    descriptionId,
+    floatingOptions,
+    setLabelId,
+    setDescriptionId
+  }), [open, setOpen, interactions, data, modal, labelId, descriptionId, floatingOptions]);
+  return result;
+};
+;// ./src/components/Popover/hooks/usePopoverContext.tsx
+
+
+/**
+ * Context for popover components
+ *
+ * Provides popover state and functionality to child components. Created by
+ * Popover component and consumed by PopoverTrigger, PopoverContent, and other
+ * popover sub-components.
+ */
+const PopoverContext = /*#__PURE__*/external_react_namespaceObject.createContext({});
+
+/**
+ * usePopoverContext - Hook to access popover context
+ *
+ * Returns the popover context value. Throws an error if used outside of a
+ * Popover component.
+ *
+ * @returns Popover context value with state, positioning, and interaction handlers
+ * @throws Error if used outside of Popover component
+ *
+ * @example
+ * ```tsx
+ * const { open, setOpen, refs } = usePopoverContext();
+ * ```
+ *
+ * @see {@link Popover} - Component that provides this context
+ */
+const usePopoverContext = () => {
+  const context = external_react_namespaceObject.useContext(PopoverContext);
+  if ((0,utils_namespaceObject.isNill)(context)) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+  return context;
+};
+;// ./src/components/Popover/Popover.tsx
+
+
+
+
+/**
+ * Popover - Floating content container component
+ *
+ * A flexible popover system built on Floating UI that provides floating content
+ * containers relative to trigger elements. Uses a compound component pattern with
+ * Popover (root), PopoverTrigger (activator), PopoverContent (display),
+ * PopoverHeading, PopoverDescription, and PopoverClose (content helpers).
+ *
+ * Supports multiple interaction modes (click, hover, both), flexible positioning
+ * with auto-adjustment via Floating UI middleware, modal and non-modal modes,
+ * and comprehensive accessibility features including ARIA attributes and focus
+ * management.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * // Basic popover on click
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button>Open Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeading variant="h4">Popover Title</PopoverHeading>
+ *     <PopoverDescription>
+ *       This is the popover content with helpful information.
+ *     </PopoverDescription>
+ *     <PopoverClose>Close</PopoverClose>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Popover with hover interaction
+ * <Popover interactionsEnabled="hover">
+ *   <PopoverTrigger>
+ *     <Icon name="info" />
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeading variant="h4">Information</PopoverHeading>
+ *     <PopoverDescription>
+ *       This popover appears on hover.
+ *     </PopoverDescription>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Popover with custom placement
+ * <Popover placement="top">
+ *   <PopoverTrigger>
+ *     <Button>Show Above</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverDescription>
+ *       This popover appears above the trigger element.
+ *     </PopoverDescription>
+ *     <PopoverClose>Close</PopoverClose>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Advanced positioning with Floating UI middleware
+ * <Popover
+ *   placement="top"
+ *   floatingOptions={{
+ *     middleware: [
+ *       offset(10),
+ *       flip(),
+ *       shift({ padding: 8 }),
+ *     ],
+ *   }}>
+ *   <PopoverTrigger>
+ *     <Button>Smart Positioning</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeading variant="h4">Smart Positioning</PopoverHeading>
+ *     <PopoverDescription>
+ *       This popover automatically adjusts its position to stay in view.
+ *     </PopoverDescription>
+ *     <PopoverClose>Close</PopoverClose>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Modal popover with controlled state
+ * <Popover modal open={isOpen} onOpenChange={setIsOpen}>
+ *   <PopoverTrigger>
+ *     <Button>Open Modal Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <PopoverHeading variant="h4">Modal Popover</PopoverHeading>
+ *     <PopoverDescription>
+ *       This is a modal popover that traps focus.
+ *     </PopoverDescription>
+ *     <PopoverClose>Close</PopoverClose>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @see {@link PopoverTrigger} - Trigger element component
+ * @see {@link PopoverContent} - Content display component
+ * @see {@link PopoverHeading} - Accessible heading component
+ * @see {@link PopoverDescription} - Accessible description component
+ * @see {@link PopoverClose} - Close button component
+ *
+ * @accessibility
+ * - Keyboard accessible (ESC to close, Enter/Space to activate)
+ * - Focus management with FloatingFocusManager for modal popovers
+ * - ARIA attributes automatically applied (role, aria-labelledby, aria-describedby)
+ * - Screen reader friendly with semantic heading and description components
+ * - Focus trap for modal popovers
+ */
+
+const Popover = ({
+  children,
+  modal = false,
+  ...restOptions
+}) => {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const popover = usePopover({
+    modal,
+    ...restOptions
+  });
+  return (0,jsx_runtime_namespaceObject.jsx)(PopoverContext.Provider, {
+    value: popover,
+    children: children
+  });
+};
+;// ./src/components/Popover/PopoverTrigger.tsx
+
+
+
+
+
+/**
+ * PopoverTrigger - Trigger element for popover
+ *
+ * Activates the popover when interacted with. By default renders as a Button,
+ * but can be customized using the `asChild` prop to render as any React element.
+ * Automatically receives Floating UI reference props for positioning and state
+ * management.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * // Default Button trigger
+ * <PopoverTrigger>
+ *   Open Popover
+ * </PopoverTrigger>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom element trigger
+ * <PopoverTrigger asChild>
+ *   <Icon name="info" />
+ * </PopoverTrigger>
+ * ```
+ *
+ * @see {@link Popover} - Root component
+ * @see {@link PopoverContent} - Content display component
+ */
+const PopoverTrigger = /*#__PURE__*/external_react_namespaceObject.forwardRef(function PopoverTrigger({
+  children,
+  asChild = false,
+  dataTestId = 'trigger-button',
+  variant = 'primary',
+  ...props
+}, propRef) {
+  const context = usePopoverContext();
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && /*#__PURE__*/external_react_namespaceObject.isValidElement(children)) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childrenElement = children;
+
+    // Extract ref from children props BEFORE calling getReferenceProps to avoid conflicts
+    // In React 19, refs are regular props, but forwardRef components may not expose them in children.props.ref
+    // We extract it here for backward compatibility
+    const {
+      ref: existingChildrenRef,
+      ...childrenPropsWithoutRef
+    } = childrenElement.props || {};
+
+    // Merge all refs: floating-ui's setReference, children's ref, and propRef
+    // This ensures positioning works while preserving any refs passed to the child component
+    const mergedRef = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([context?.refs.setReference, existingChildrenRef, propRef]);
+
+    // Get reference props from floating-ui - pass the merged ref to it
+    // This ensures floating-ui gets the correct element for positioning
+    const referenceProps = context?.getReferenceProps({
+      ref: mergedRef,
+      ...props,
+      ...childrenPropsWithoutRef,
+      'data-state': context.open ? 'open' : 'closed'
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return /*#__PURE__*/external_react_namespaceObject.cloneElement(children, referenceProps);
+  }
+
+  // For non-asChild case, merge refs normally
+  const childrenRef = /*#__PURE__*/external_react_namespaceObject.isValidElement(children) ? children.props?.ref : undefined;
+  const ref = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([context?.refs.setReference, propRef, childrenRef]);
+  return (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+    "data-testid": dataTestId,
+    ref: ref
+    // The user can style the trigger based on the state
+    ,
+    "data-state": context?.open ? 'open' : 'closed',
+    variant: variant,
+    ...context?.getReferenceProps(props),
+    children: children
+  });
+});
+;// ./src/components/Popover/PopoverContent.tsx
+function PopoverContent_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+var PopoverContent_ref =  true ? {
+  name: "3abrc0",
+  styles: "width:auto"
+} : 0;
+/**
+ * PopoverContent - Content container for popover
+ *
+ * Renders the actual popover content that appears when the trigger is activated.
+ * Automatically positioned using Floating UI, supports portal rendering, and
+ * includes focus management for modal popovers. Can be configured to unmount
+ * or keep mounted when closed.
+ *
+ * @category Components
+ * @subcategory Overlay
+ *
+ * @example
+ * ```tsx
+ * <PopoverContent>
+ *   <PopoverHeading variant="h4">Title</PopoverHeading>
+ *   <PopoverDescription>Content goes here</PopoverDescription>
+ *   <PopoverClose>Close</PopoverClose>
+ * </PopoverContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Keep content mounted when closed
+ * <PopoverContent mountMode="keep-mounted">
+ *   <div>This stays in DOM when closed</div>
+ * </PopoverContent>
+ * ```
+ *
+ * @see {@link Popover} - Root component
+ * @see {@link PopoverTrigger} - Trigger element component
+ * @see {@link PopoverHeading} - Accessible heading component
+ * @see {@link PopoverDescription} - Accessible description component
+ */
+const PopoverContent = /*#__PURE__*/external_react_namespaceObject.forwardRef(function PopoverContent({
+  style,
+  isFocusManagerDisabled = false,
+  mountMode = 'unmount',
+  ...props
+}, propRef) {
+  const {
+    context: floatingContext,
+    ...context
+  } = usePopoverContext();
+  const ref = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([context.refs.setFloating, propRef]);
+  const keepMounted = mountMode === 'keep-mounted';
+  if (!keepMounted && !floatingContext.open) return null;
+  const hidden = keepMounted && !floatingContext.open;
+  return (0,jsx_runtime_namespaceObject.jsx)(external_floating_ui_react_namespaceObject.FloatingPortal, {
+    children: (0,jsx_runtime_namespaceObject.jsx)(external_floating_ui_react_namespaceObject.FloatingFocusManager, {
+      context: floatingContext,
+      modal: context.modal,
+      disabled: isFocusManagerDisabled,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+        ref: ref,
+        css: PopoverContent_ref,
+        style: {
+          ...context.floatingStyles,
+          ...(hidden ? {
+            display: 'none',
+            pointerEvents: 'none'
+          } : null),
+          ...style
+        },
+        "aria-labelledby": context.labelId,
+        "aria-describedby": context.descriptionId,
+        direction: "column",
+        ...context.getFloatingProps(props),
+        children: props.children
+      })
+    })
+  });
+});
+;// ./src/components/Breadcrumbs/styles.ts
+function Breadcrumbs_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+const fontBase =  true ? {
+  name: "1206kx8",
+  styles: "font-family:'Manrope',sans-serif;font-size:14px;line-height:18px;letter-spacing:0"
+} : 0;
+const nav =  true ? {
+  name: "4zleql",
+  styles: "display:block"
+} : 0;
+const list =  true ? {
+  name: "szqxm1",
+  styles: "display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none"
+} : 0;
+const styles_item =  true ? {
+  name: "8irbms",
+  styles: "display:inline-flex;align-items:center"
+} : 0;
+const styles_separator = /*#__PURE__*/(0,react_namespaceObject.css)("display:inline-flex;align-items:center;justify-content:center;color:", themes_main.colors.greyDarker80, ";pointer-events:none;user-select:none;" + ( true ? "" : 0),  true ? "" : 0);
+const crumbLink = /*#__PURE__*/(0,react_namespaceObject.css)(fontBase, ";font-weight:500;color:", themes_main.colors.greyDarker80, ";text-decoration:none;background:none;border:none;padding:0;cursor:pointer;transition:color 0.15s ease;&:hover,&:focus-visible{color:", themes_main.colors.greyDarker, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const crumbText = /*#__PURE__*/(0,react_namespaceObject.css)(fontBase, ";font-weight:500;color:", themes_main.colors.greyDarker80, ";" + ( true ? "" : 0),  true ? "" : 0);
+const crumbCurrent = /*#__PURE__*/(0,react_namespaceObject.css)(fontBase, ";font-weight:600;color:", themes_main.palette.primary.dark, ";" + ( true ? "" : 0),  true ? "" : 0);
+const menu = /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;flex-direction:column;gap:2px;min-width:140px;margin:0;padding:6px;list-style:none;background:", themes_main.colors.white, ";border:1px solid ", themes_main.colors.grey20, ";border-radius:8px;box-shadow:0 8px 24px ", themes_main.colors.greyDarker14, ";" + ( true ? "" : 0),  true ? "" : 0);
+const menuItem = /*#__PURE__*/(0,react_namespaceObject.css)(fontBase, ";font-weight:500;display:block;padding:6px 10px;border-radius:6px;color:", themes_main.colors.greyDarker80, ";text-decoration:none;cursor:pointer;transition:color 0.15s ease,background-color 0.15s ease;&:hover,&:focus-visible{color:", themes_main.colors.greyDarker, ";background-color:", themes_main.colors.blue6, ";}" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/Breadcrumbs/BreadcrumbMenu.tsx
+
+
+
+
+
+
+/**
+ * A hover/click popover listing navigable routes. Shared by the collapsed `…`
+ * crumb and, in the route-aware mode, by crumbs that expose sibling routes.
+ */
+const BreadcrumbMenu = ({
+  trigger,
+  items
+}) => (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+  placement: "bottom-start",
+  interactionsEnabled: "both",
+  children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+    asChild: true,
+    children: trigger
+  }), (0,jsx_runtime_namespaceObject.jsx)(PopoverContent, {
+    children: (0,jsx_runtime_namespaceObject.jsx)("ul", {
+      css: menu,
+      children: items.map((sibling, index) => (0,jsx_runtime_namespaceObject.jsx)("li", {
+        children: (0,jsx_runtime_namespaceObject.jsx)(WithLink, {
+          link: sibling.to,
+          className: "breadcrumb-menu-item",
+          children: (0,jsx_runtime_namespaceObject.jsx)("span", {
+            css: menuItem,
+            children: sibling.label
+          })
+        })
+      }, index))
+    })
+  })]
+});
+;// ./src/components/Breadcrumbs/utils.ts
+/** A rendered slot in the trail: either a real crumb or the collapsed `…`. */
+
+/**
+ * Collapse the trail to `first … last` when it exceeds `maxItems`, per design.
+ * The hidden middle crumbs are returned on the ellipsis entry so they can be
+ * offered from its menu. When `maxItems` is falsy or not exceeded, every item
+ * is returned as-is.
+ */
+const collapseItems = (items, maxItems) => {
+  if (!maxItems || items.length <= maxItems || items.length <= 2) {
+    return items.map((item, index) => ({
+      type: 'item',
+      item,
+      index
+    }));
+  }
+  const lastIndex = items.length - 1;
+  return [{
+    type: 'item',
+    item: items[0],
+    index: 0
+  }, {
+    type: 'ellipsis',
+    items: items.slice(1, lastIndex)
+  }, {
+    type: 'item',
+    item: items[lastIndex],
+    index: lastIndex
+  }];
+};
+;// ./src/components/Breadcrumbs/Breadcrumbs.tsx
+
+
+
+
+
+
+
+
+const DefaultSeparator = (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+  name: "carrot-right",
+  size: 14,
+  color: themes_main.colors.greyDarker80
+});
+
+/**
+ * Breadcrumbs — navigational trail of the current page's location.
+ *
+ * Accepts a list of `{ label, to }` items and renders them as react-router
+ * links separated by a chevron, with the current (last) crumb shown as a
+ * non-navigable, emphasised label. When the trail is longer than `maxItems`
+ * it collapses to `first … last`, with the hidden crumbs available from the
+ * `…` menu.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   maxItems={4}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'People', to: '/people' },
+ *     { label: 'Jane Doe' },
+ *   ]}
+ * />
+ * ```
+ */
+const Breadcrumbs = ({
+  items,
+  maxItems,
+  separator = DefaultSeparator,
+  ariaLabel = 'Breadcrumb',
+  className,
+  css
+}) => {
+  if (!items.length) {
+    return null;
+  }
+  const lastIndex = items.length - 1;
+  const entries = collapseItems(items, maxItems);
+  const isCurrent = (item, index) => item.isCurrent ?? index === lastIndex;
+  const renderCrumb = (item, index) => {
+    if (isCurrent(item, index)) {
+      return (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: crumbCurrent,
+        "aria-current": "page",
+        children: item.label
+      });
+    }
+    const inner = item.to ? (0,jsx_runtime_namespaceObject.jsx)(WithLink, {
+      link: item.to,
+      onClick: item.onClick,
+      children: (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: crumbLink,
+        children: item.label
+      })
+    }) : item.onClick ? (0,jsx_runtime_namespaceObject.jsx)("button", {
+      type: "button",
+      css: crumbLink,
+      onClick: item.onClick,
+      children: item.label
+    }) : (0,jsx_runtime_namespaceObject.jsx)("span", {
+      css: crumbText,
+      children: item.label
+    });
+    if (item.siblings?.length) {
+      return (0,jsx_runtime_namespaceObject.jsx)(BreadcrumbMenu, {
+        trigger: (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: styles_item,
+          children: inner
+        }),
+        items: item.siblings
+      });
+    }
+    return inner;
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)("nav", {
+    "aria-label": ariaLabel,
+    css: [nav, css,  true ? "" : 0,  true ? "" : 0],
+    className: className,
+    children: (0,jsx_runtime_namespaceObject.jsx)("ol", {
+      css: list,
+      children: entries.map((entry, position) => {
+        const isLastEntry = position === entries.length - 1;
+        return (0,jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)("li", {
+            css: styles_item,
+            children: entry.type === 'item' ? renderCrumb(entry.item, entry.index) : (0,jsx_runtime_namespaceObject.jsx)(BreadcrumbMenu, {
+              trigger: (0,jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                css: crumbLink,
+                "aria-label": "Show hidden breadcrumbs",
+                children: "..."
+              }),
+              items: entry.items.filter(item => item.to).map(item => ({
+                label: item.label,
+                to: item.to
+              }))
+            })
+          }), !isLastEntry && (0,jsx_runtime_namespaceObject.jsx)("li", {
+            css: styles_separator,
+            "aria-hidden": "true",
+            children: separator
+          })]
+        }, entry.type === 'item' ? `item-${entry.index}` : 'ellipsis');
+      })
+    })
+  });
+};
+;// ./src/components/Breadcrumbs/useBreadcrumbs.ts
+
+
+
+/** Context passed to a route's `crumb` resolver function. */
+
+/**
+ * Shape read from a route's `handle` to build its crumb. Attach this to routes
+ * in your `createBrowserRouter` config:
+ *
+ * ```ts
+ * { path: 'people', handle: { crumb: 'People' } as BreadcrumbRouteHandle }
+ * ```
+ */
+
+const getHandle = route => route.handle;
+const joinPaths = (base, path) => `/${`${base}/${path}`.split('/').filter(Boolean).join('/')}`;
+const resolveLabel = (route, ctx, getLabel) => {
+  const handle = getHandle(route);
+  if (handle?.hideCrumb) {
+    return undefined;
+  }
+  if (handle?.crumb !== undefined) {
+    return typeof handle.crumb === 'function' ? handle.crumb(ctx) : handle.crumb;
+  }
+  if (handle?.title !== undefined) {
+    return handle.title;
+  }
+  return getLabel?.(route, ctx);
+};
+const hasContent = label => label !== undefined && label !== null && label !== false;
+
+/**
+ * Resolve a sibling route's pattern to a concrete path using the current
+ * params. Returns `null` when the sibling needs params we don't have (it can't
+ * be navigated to from here) so the caller can drop it.
+ */
+const resolveSiblingPath = (pattern, params) => {
+  try {
+    return (0,external_react_router_dom_namespaceObject.generatePath)(pattern, params);
+  } catch {
+    return null;
+  }
+};
+const getSiblings = (siblingRoutes, currentRoute, parentBase, params, getLabel) => siblingRoutes.reduce((acc, route) => {
+  if (route === currentRoute || route.index || !route.path) {
+    return acc;
+  }
+  const pattern = route.path.startsWith('/') ? route.path : joinPaths(parentBase, route.path);
+  const to = resolveSiblingPath(pattern, params);
+  if (to === null) {
+    return acc;
+  }
+  const label = resolveLabel(route, {
+    params,
+    pathname: to
+  }, getLabel);
+  if (!hasContent(label)) {
+    return acc;
+  }
+  acc.push({
+    label,
+    to
+  });
+  return acc;
+}, []);
+
+/**
+ * Pure derivation of breadcrumb items from a route tree and a pathname.
+ * Extracted from the hook so it can be unit-tested without a router.
+ */
+const deriveBreadcrumbs = (routes, pathname, {
+  includeSiblings = true,
+  getLabel
+} = {}) => {
+  const matches = (0,external_react_router_dom_namespaceObject.matchRoutes)(routes, pathname);
+  if (!matches) {
+    return [];
+  }
+  const items = [];
+  matches.forEach((match, index) => {
+    const ctx = {
+      params: match.params,
+      pathname: match.pathname
+    };
+    const label = resolveLabel(match.route, ctx, getLabel);
+    if (!hasContent(label)) {
+      return;
+    }
+    const item = {
+      label,
+      to: match.pathname
+    };
+    if (includeSiblings) {
+      const parentChildren = index === 0 ? routes : matches[index - 1].route.children ?? [];
+      const parentBase = index === 0 ? '/' : matches[index - 1].pathnameBase;
+      const siblings = getSiblings(parentChildren, match.route, parentBase, match.params, getLabel);
+      if (siblings.length) {
+        item.siblings = siblings;
+      }
+    }
+    items.push(item);
+  });
+
+  // The deepest crumb is the current page.
+  if (items.length) {
+    const last = items[items.length - 1];
+    last.isCurrent = true;
+    delete last.to;
+    delete last.siblings;
+  }
+  return items;
+};
+
+/**
+ * Route-aware breadcrumb builder. Reads the current location, matches it
+ * against your route tree, and returns `BreadcrumbItem[]` ready for
+ * `<Breadcrumbs>`. Labels come from each route's `handle.crumb`/`handle.title`;
+ * sibling routes (other children of a crumb's parent) power the hover menu.
+ *
+ * @example
+ * ```tsx
+ * const items = useBreadcrumbs({ routes });
+ * return <Breadcrumbs items={items} maxItems={4} />;
+ * ```
+ */
+const useBreadcrumbs = ({
+  routes,
+  pathname,
+  includeSiblings = true,
+  getLabel
+}) => {
+  const location = (0,external_react_router_dom_namespaceObject.useLocation)();
+  const activePathname = pathname ?? location.pathname;
+  return (0,external_react_namespaceObject.useMemo)(() => deriveBreadcrumbs(routes, activePathname, {
+    includeSiblings,
+    getLabel
+  }), [routes, activePathname, includeSiblings, getLabel]);
+};
+;// ./src/components/Breadcrumbs/index.ts
+
+
+
 ;// ./src/components/Label/LabelBase.tsx
 
 const LabelBase = /*#__PURE__*/base_default()("label",  true ? {
@@ -21782,370 +22616,6 @@ function MultipleDropdownInner({
 }
 const MultipleDropdown = /*#__PURE__*/external_react_default().forwardRef(MultipleDropdownInner);
 /* harmony default export */ const MultipleDropdown_MultipleDropdown = (MultipleDropdown);
-;// ./src/components/Popover/hooks/usePopover.tsx
-
-
-
-/**
- * usePopover - Hook for popover functionality
- *
- * Custom hook that provides popover state management, positioning, and interactions.
- * Handles both controlled and uncontrolled modes, supports multiple interaction types
- * (click, hover, both), and integrates with Floating UI for positioning and focus management.
- *
- * @param options - Popover configuration options
- * @returns Popover context value with state, positioning, and interaction handlers
- *
- * @example
- * ```tsx
- * const popover = usePopover({
- *   placement: 'top',
- *   interactionsEnabled: 'click',
- *   modal: false,
- * });
- * ```
- *
- * @see {@link Popover} - Component that uses this hook
- */
-const usePopover = ({
-  initialOpen = false,
-  placement = 'bottom',
-  modal,
-  open: controlledOpen,
-  onOpenChange: setControlledOpen,
-  keyboardHandlers = true,
-  floatingOptions = {},
-  interactionsEnabled = 'click'
-} = {}) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = external_react_namespaceObject.useState(initialOpen);
-  const [labelId, setLabelId] = external_react_namespaceObject.useState();
-  const [descriptionId, setDescriptionId] = external_react_namespaceObject.useState();
-  const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = setControlledOpen ?? setUncontrolledOpen;
-  const data = (0,external_floating_ui_react_namespaceObject.useFloating)({
-    placement,
-    open,
-    onOpenChange: setOpen,
-    whileElementsMounted: external_floating_ui_react_namespaceObject.autoUpdate,
-    middleware: [(0,external_floating_ui_react_namespaceObject.offset)(5), (0,external_floating_ui_react_namespaceObject.flip)({
-      crossAxis: placement.includes('-'),
-      padding: 5
-    }), (0,external_floating_ui_react_namespaceObject.shift)({
-      padding: 5
-    })],
-    ...floatingOptions
-  });
-  const context = data.context;
-  const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
-    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['click', 'both'].includes(interactionsEnabled),
-    keyboardHandlers
-  });
-  const isControlled = controlledOpen !== undefined;
-  const dismiss = (0,external_floating_ui_react_namespaceObject.useDismiss)(context, {
-    // When controlled, disable referencePress (parent handles toggle) but keep outsidePress
-    referencePress: !isControlled,
-    // Keep outsidePress enabled even in controlled mode
-    outsidePress: true,
-    escapeKey: true,
-    ancestorScroll: !isControlled
-  });
-  const role = (0,external_floating_ui_react_namespaceObject.useRole)(context);
-  const hover = (0,external_floating_ui_react_namespaceObject.useHover)(context, {
-    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['hover', 'both'].includes(interactionsEnabled),
-    handleClose: (0,external_floating_ui_react_namespaceObject.safePolygon)()
-  });
-  const interactionsHooks = [dismiss, role];
-  switch (interactionsEnabled) {
-    case 'click':
-      {
-        interactionsHooks.push(click);
-        break;
-      }
-    case 'hover':
-      {
-        interactionsHooks.push(hover);
-        break;
-      }
-    default:
-      {
-        interactionsHooks.push(click, hover);
-      }
-  }
-  const interactions = (0,external_floating_ui_react_namespaceObject.useInteractions)(interactionsHooks);
-  const result = external_react_namespaceObject.useMemo(() => ({
-    open,
-    setOpen,
-    ...interactions,
-    ...data,
-    modal,
-    labelId,
-    descriptionId,
-    floatingOptions,
-    setLabelId,
-    setDescriptionId
-  }), [open, setOpen, interactions, data, modal, labelId, descriptionId, floatingOptions]);
-  return result;
-};
-;// ./src/components/Popover/hooks/usePopoverContext.tsx
-
-
-/**
- * Context for popover components
- *
- * Provides popover state and functionality to child components. Created by
- * Popover component and consumed by PopoverTrigger, PopoverContent, and other
- * popover sub-components.
- */
-const PopoverContext = /*#__PURE__*/external_react_namespaceObject.createContext({});
-
-/**
- * usePopoverContext - Hook to access popover context
- *
- * Returns the popover context value. Throws an error if used outside of a
- * Popover component.
- *
- * @returns Popover context value with state, positioning, and interaction handlers
- * @throws Error if used outside of Popover component
- *
- * @example
- * ```tsx
- * const { open, setOpen, refs } = usePopoverContext();
- * ```
- *
- * @see {@link Popover} - Component that provides this context
- */
-const usePopoverContext = () => {
-  const context = external_react_namespaceObject.useContext(PopoverContext);
-  if ((0,utils_namespaceObject.isNill)(context)) {
-    throw new Error('Popover components must be wrapped in <Popover />');
-  }
-  return context;
-};
-;// ./src/components/Popover/Popover.tsx
-
-
-
-
-/**
- * Popover - Floating content container component
- *
- * A flexible popover system built on Floating UI that provides floating content
- * containers relative to trigger elements. Uses a compound component pattern with
- * Popover (root), PopoverTrigger (activator), PopoverContent (display),
- * PopoverHeading, PopoverDescription, and PopoverClose (content helpers).
- *
- * Supports multiple interaction modes (click, hover, both), flexible positioning
- * with auto-adjustment via Floating UI middleware, modal and non-modal modes,
- * and comprehensive accessibility features including ARIA attributes and focus
- * management.
- *
- * @category Components
- * @subcategory Overlay
- *
- * @example
- * ```tsx
- * // Basic popover on click
- * <Popover>
- *   <PopoverTrigger>
- *     <Button>Open Popover</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeading variant="h4">Popover Title</PopoverHeading>
- *     <PopoverDescription>
- *       This is the popover content with helpful information.
- *     </PopoverDescription>
- *     <PopoverClose>Close</PopoverClose>
- *   </PopoverContent>
- * </Popover>
- * ```
- *
- * @example
- * ```tsx
- * // Popover with hover interaction
- * <Popover interactionsEnabled="hover">
- *   <PopoverTrigger>
- *     <Icon name="info" />
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeading variant="h4">Information</PopoverHeading>
- *     <PopoverDescription>
- *       This popover appears on hover.
- *     </PopoverDescription>
- *   </PopoverContent>
- * </Popover>
- * ```
- *
- * @example
- * ```tsx
- * // Popover with custom placement
- * <Popover placement="top">
- *   <PopoverTrigger>
- *     <Button>Show Above</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverDescription>
- *       This popover appears above the trigger element.
- *     </PopoverDescription>
- *     <PopoverClose>Close</PopoverClose>
- *   </PopoverContent>
- * </Popover>
- * ```
- *
- * @example
- * ```tsx
- * // Advanced positioning with Floating UI middleware
- * <Popover
- *   placement="top"
- *   floatingOptions={{
- *     middleware: [
- *       offset(10),
- *       flip(),
- *       shift({ padding: 8 }),
- *     ],
- *   }}>
- *   <PopoverTrigger>
- *     <Button>Smart Positioning</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeading variant="h4">Smart Positioning</PopoverHeading>
- *     <PopoverDescription>
- *       This popover automatically adjusts its position to stay in view.
- *     </PopoverDescription>
- *     <PopoverClose>Close</PopoverClose>
- *   </PopoverContent>
- * </Popover>
- * ```
- *
- * @example
- * ```tsx
- * // Modal popover with controlled state
- * <Popover modal open={isOpen} onOpenChange={setIsOpen}>
- *   <PopoverTrigger>
- *     <Button>Open Modal Popover</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <PopoverHeading variant="h4">Modal Popover</PopoverHeading>
- *     <PopoverDescription>
- *       This is a modal popover that traps focus.
- *     </PopoverDescription>
- *     <PopoverClose>Close</PopoverClose>
- *   </PopoverContent>
- * </Popover>
- * ```
- *
- * @see {@link PopoverTrigger} - Trigger element component
- * @see {@link PopoverContent} - Content display component
- * @see {@link PopoverHeading} - Accessible heading component
- * @see {@link PopoverDescription} - Accessible description component
- * @see {@link PopoverClose} - Close button component
- *
- * @accessibility
- * - Keyboard accessible (ESC to close, Enter/Space to activate)
- * - Focus management with FloatingFocusManager for modal popovers
- * - ARIA attributes automatically applied (role, aria-labelledby, aria-describedby)
- * - Screen reader friendly with semantic heading and description components
- * - Focus trap for modal popovers
- */
-
-const Popover = ({
-  children,
-  modal = false,
-  ...restOptions
-}) => {
-  // This can accept any props as options, e.g. `placement`,
-  // or other positioning options.
-  const popover = usePopover({
-    modal,
-    ...restOptions
-  });
-  return (0,jsx_runtime_namespaceObject.jsx)(PopoverContext.Provider, {
-    value: popover,
-    children: children
-  });
-};
-;// ./src/components/Popover/PopoverContent.tsx
-function PopoverContent_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-
-
-
-
-var PopoverContent_ref =  true ? {
-  name: "3abrc0",
-  styles: "width:auto"
-} : 0;
-/**
- * PopoverContent - Content container for popover
- *
- * Renders the actual popover content that appears when the trigger is activated.
- * Automatically positioned using Floating UI, supports portal rendering, and
- * includes focus management for modal popovers. Can be configured to unmount
- * or keep mounted when closed.
- *
- * @category Components
- * @subcategory Overlay
- *
- * @example
- * ```tsx
- * <PopoverContent>
- *   <PopoverHeading variant="h4">Title</PopoverHeading>
- *   <PopoverDescription>Content goes here</PopoverDescription>
- *   <PopoverClose>Close</PopoverClose>
- * </PopoverContent>
- * ```
- *
- * @example
- * ```tsx
- * // Keep content mounted when closed
- * <PopoverContent mountMode="keep-mounted">
- *   <div>This stays in DOM when closed</div>
- * </PopoverContent>
- * ```
- *
- * @see {@link Popover} - Root component
- * @see {@link PopoverTrigger} - Trigger element component
- * @see {@link PopoverHeading} - Accessible heading component
- * @see {@link PopoverDescription} - Accessible description component
- */
-const PopoverContent = /*#__PURE__*/external_react_namespaceObject.forwardRef(function PopoverContent({
-  style,
-  isFocusManagerDisabled = false,
-  mountMode = 'unmount',
-  ...props
-}, propRef) {
-  const {
-    context: floatingContext,
-    ...context
-  } = usePopoverContext();
-  const ref = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([context.refs.setFloating, propRef]);
-  const keepMounted = mountMode === 'keep-mounted';
-  if (!keepMounted && !floatingContext.open) return null;
-  const hidden = keepMounted && !floatingContext.open;
-  return (0,jsx_runtime_namespaceObject.jsx)(external_floating_ui_react_namespaceObject.FloatingPortal, {
-    children: (0,jsx_runtime_namespaceObject.jsx)(external_floating_ui_react_namespaceObject.FloatingFocusManager, {
-      context: floatingContext,
-      modal: context.modal,
-      disabled: isFocusManagerDisabled,
-      children: (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
-        ref: ref,
-        css: PopoverContent_ref,
-        style: {
-          ...context.floatingStyles,
-          ...(hidden ? {
-            display: 'none',
-            pointerEvents: 'none'
-          } : null),
-          ...style
-        },
-        "aria-labelledby": context.labelId,
-        "aria-describedby": context.descriptionId,
-        direction: "column",
-        ...context.getFloatingProps(props),
-        children: props.children
-      })
-    })
-  });
-});
 ;// ./src/components/Popover/PopoverDescription.tsx
 
 
@@ -22625,95 +23095,6 @@ const TypeaheadFocusTrap = ({
 };
 ;// external "@emotion/css"
 const css_namespaceObject = require("@emotion/css");
-;// ./src/components/Popover/PopoverTrigger.tsx
-
-
-
-
-
-/**
- * PopoverTrigger - Trigger element for popover
- *
- * Activates the popover when interacted with. By default renders as a Button,
- * but can be customized using the `asChild` prop to render as any React element.
- * Automatically receives Floating UI reference props for positioning and state
- * management.
- *
- * @category Components
- * @subcategory Overlay
- *
- * @example
- * ```tsx
- * // Default Button trigger
- * <PopoverTrigger>
- *   Open Popover
- * </PopoverTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // Custom element trigger
- * <PopoverTrigger asChild>
- *   <Icon name="info" />
- * </PopoverTrigger>
- * ```
- *
- * @see {@link Popover} - Root component
- * @see {@link PopoverContent} - Content display component
- */
-const PopoverTrigger = /*#__PURE__*/external_react_namespaceObject.forwardRef(function PopoverTrigger({
-  children,
-  asChild = false,
-  dataTestId = 'trigger-button',
-  variant = 'primary',
-  ...props
-}, propRef) {
-  const context = usePopoverContext();
-
-  // `asChild` allows the user to pass any element as the anchor
-  if (asChild && /*#__PURE__*/external_react_namespaceObject.isValidElement(children)) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const childrenElement = children;
-
-    // Extract ref from children props BEFORE calling getReferenceProps to avoid conflicts
-    // In React 19, refs are regular props, but forwardRef components may not expose them in children.props.ref
-    // We extract it here for backward compatibility
-    const {
-      ref: existingChildrenRef,
-      ...childrenPropsWithoutRef
-    } = childrenElement.props || {};
-
-    // Merge all refs: floating-ui's setReference, children's ref, and propRef
-    // This ensures positioning works while preserving any refs passed to the child component
-    const mergedRef = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([context?.refs.setReference, existingChildrenRef, propRef]);
-
-    // Get reference props from floating-ui - pass the merged ref to it
-    // This ensures floating-ui gets the correct element for positioning
-    const referenceProps = context?.getReferenceProps({
-      ref: mergedRef,
-      ...props,
-      ...childrenPropsWithoutRef,
-      'data-state': context.open ? 'open' : 'closed'
-    });
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return /*#__PURE__*/external_react_namespaceObject.cloneElement(children, referenceProps);
-  }
-
-  // For non-asChild case, merge refs normally
-  const childrenRef = /*#__PURE__*/external_react_namespaceObject.isValidElement(children) ? children.props?.ref : undefined;
-  const ref = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([context?.refs.setReference, propRef, childrenRef]);
-  return (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
-    "data-testid": dataTestId,
-    ref: ref
-    // The user can style the trigger based on the state
-    ,
-    "data-state": context?.open ? 'open' : 'closed',
-    variant: variant,
-    ...context?.getReferenceProps(props),
-    children: children
-  });
-});
 ;// ./src/components/Typeahead/styles.ts
 
 function Typeahead_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -23535,8 +23916,12 @@ const DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   isCalendarDateNow
 }) => isCalendarDateNow ? `1px solid ${theme.colors.grey}` : 'none', ";color:", ({
   theme,
-  isCalendarDateSelected
-}) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
+  isCalendarDateSelected,
+  isOutOfMonth
+}) => {
+  if (isCalendarDateSelected) return theme.colors.white;
+  return isOutOfMonth ? theme.colors.grey : theme.colors.greyDarker;
+}, ";background:", ({
   theme,
   isCalendarDateSelected
 }) => isCalendarDateSelected && theme.palette.primary.main, ";cursor:pointer;user-select:none;&[aria-disabled='true']{color:", ({
@@ -24275,11 +24660,20 @@ const DaysView = () => {
     const {
       target
     } = event;
-    const selectedDay = Number(target.innerHTML);
+    const selectedDay = target.getAttribute('data-day');
     const isEnabled = target.getAttribute('aria-disabled') === 'false';
-    if (isEnabled) {
+    if (isEnabled && selectedDay) {
+      // The clicked cell may belong to the previous/next month (leading or
+      // trailing padding), so its year/month/day must come from data-day
+      // rather than being applied to the currently displayed month —
+      // otherwise e.g. clicking "30 Jul" while viewing August would
+      // silently resolve to 30 Aug. Any time-of-day already chosen via the
+      // time panel is preserved from calendarViewDateTime.
+      const parsedDay = external_luxon_namespaceObject.DateTime.fromFormat(selectedDay, 'D');
       const newDate = calendarViewDateTime?.set({
-        day: selectedDay
+        year: parsedDay.year,
+        month: parsedDay.month,
+        day: parsedDay.day
       });
       setCalendarViewDateTime(newDate);
       setDateTime(newDate);
@@ -24326,28 +24720,31 @@ const DaysView = () => {
         if (isHighlightEnabled && lastChangedDate && otherDateDT && dateTime) {
           isHighlightDate = highlightDates.mode === 'dateTo' ? otherDateDT < currentDT && currentDT < dateTime : dateTime < currentDT && currentDT < otherDateDT;
         }
+
+        // Leading/trailing days from adjacent months are only muted, not
+        // disabled — they're real, selectable dates.
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
-          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
-        } else {
-          if (dateMinDT) {
-            isAriaDisabled = currentDT < dateMinDT || !isCalendarMonth;
-          }
-          if (dateMaxDT) {
-            isAriaDisabled = currentDT > dateMaxDT || !isCalendarMonth;
-          }
+          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT;
+        } else if (dateMinDT) {
+          isAriaDisabled = currentDT < dateMinDT;
+        } else if (dateMaxDT) {
+          isAriaDisabled = currentDT > dateMaxDT;
         }
+        const isRangeActive = isHighlightEnabled && !!otherDateDT && !!dateTime;
         const rangeEdge = getRangeEdge({
           isFirstSelected: isCalendarFirstDateSelected,
           isSecondSelected: isCalendarSecondDateSelected,
-          isRangeActive: isHighlightEnabled && !!otherDateDT && !!dateTime,
+          isRangeActive,
           mode: highlightDates?.mode
         });
         return (0,jsx_runtime_namespaceObject.jsx)(DaysViewCell, {
           "aria-disabled": isAriaDisabled,
           "aria-label": ariaLabel,
+          "data-day": calendarDate,
           isCalendarDateNow: isCalendarDateNow,
           isCalendarDateSelected: isCalendarDateSelected,
+          isOutOfMonth: !isCalendarMonth,
           rangeEdge: rangeEdge,
           isHighlighted: isHighlightDate,
           children: calendarDay
@@ -25660,18 +26057,21 @@ const DaysView_DaysView = () => {
     getDateSelectionState,
     isRangeActive
   } = useRangeSelection({
-    createNewDate: selectedDay => currentCalendarViewDT.set({
-      day: Number(selectedDay)
-    }),
+    // The clicked cell may belong to the previous/next month (leading or
+    // trailing padding), so its date must be parsed from data-day rather
+    // than reconstructed from the day-of-month + currently displayed
+    // month — otherwise e.g. clicking "30 Jul" while viewing August would
+    // silently resolve to 30 Aug.
+    createNewDate: selectedDay => external_luxon_namespaceObject.DateTime.fromFormat(String(selectedDay), 'D'),
     getComparisonFormat: () => 'D'
   });
   const handleDaySelect = event => {
     const {
       target
     } = event;
-    const selectedDay = target.innerHTML;
+    const selectedDay = target.getAttribute('data-day');
     const isEnabled = target.getAttribute('aria-disabled') === 'false';
-    if (isEnabled) {
+    if (isEnabled && selectedDay) {
       handleRangeSelect(selectedDay);
     }
   };
@@ -25706,16 +26106,17 @@ const DaysView_DaysView = () => {
           isCalendarSecondDateSelected,
           isCalendarDateSelected
         } = getDateSelectionState(currentDT);
+
+        // Leading/trailing days from adjacent months are only muted, not
+        // disabled — they're real, selectable dates (e.g. picking 30/31
+        // Jul as the range end while the calendar is showing August).
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
-          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
-        } else {
-          if (dateMinDT) {
-            isAriaDisabled = currentDT < dateMinDT || !isCalendarMonth;
-          }
-          if (dateMaxDT) {
-            isAriaDisabled = currentDT > dateMaxDT || !isCalendarMonth;
-          }
+          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT;
+        } else if (dateMinDT) {
+          isAriaDisabled = currentDT < dateMinDT;
+        } else if (dateMaxDT) {
+          isAriaDisabled = currentDT > dateMaxDT;
         }
         const classNames = getClassNames(currentDT, {
           isCalendarFirstDateSelected,
@@ -25727,6 +26128,7 @@ const DaysView_DaysView = () => {
           "data-day": calendarDate,
           isCalendarDateNow: isCalendarDateNow,
           isCalendarDateSelected: isCalendarDateSelected,
+          isOutOfMonth: !isCalendarMonth,
           rangeEdge: getRangeEdge({
             isFirstSelected: isCalendarFirstDateSelected,
             isSecondSelected: isCalendarSecondDateSelected,
@@ -43324,29 +43726,6 @@ var nivo_legends_v=function(e){var i=e.x,n=e.y,o=e.size,r=e.fill,l=e.opacity,a=v
 function nivo_pie_E(){return nivo_pie_E=Object.assign?Object.assign.bind():function(e){for(var i=1;i<arguments.length;i++){var t=arguments[i];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},nivo_pie_E.apply(null,arguments)}function nivo_pie_F(e,i){if(null==e)return{};var t={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(-1!==i.indexOf(a))continue;t[a]=e[a]}return t}var nivo_pie_X,nivo_pie_Y=function(e){var i=e.width,t=e.height,a=e.legends,n=e.data,r=e.toggleSerie;return (0,external_react_jsx_runtime_namespaceObject.jsx)(external_react_jsx_runtime_namespaceObject.Fragment,{children:a.map((function(e,a){var o;return (0,external_react_jsx_runtime_namespaceObject.jsx)(nivo_legends_E,nivo_pie_E({},e,{containerWidth:i,containerHeight:t,data:null!=(o=e.data)?o:n,toggleSerie:e.toggleSerie?r:void 0}),a)}))})},nivo_pie_P={id:"id",value:"value",sortByValue:!1,innerRadius:0,padAngle:0,cornerRadius:0,layers:["arcs","arcLinkLabels","arcLabels","legends"],startAngle:0,endAngle:360,fit:!0,activeInnerRadiusOffset:0,activeOuterRadiusOffset:0,borderWidth:0,borderColor:{from:"color",modifiers:[["darker",1]]},enableArcLabels:!0,arcLabel:"formattedValue",arcLabelsSkipAngle:0,arcLabelsSkipRadius:0,arcLabelsRadiusOffset:.5,arcLabelsTextColor:{theme:"labels.text.fill"},enableArcLinkLabels:!0,arcLinkLabel:"id",arcLinkLabelsSkipAngle:0,arcLinkLabelsOffset:0,arcLinkLabelsDiagonalLength:16,arcLinkLabelsStraightLength:24,arcLinkLabelsThickness:1,arcLinkLabelsTextOffset:6,arcLinkLabelsTextColor:{theme:"labels.text.fill"},arcLinkLabelsColor:{theme:"axis.ticks.line.stroke"},colors:{scheme:"nivo"},defs:[],fill:[],isInteractive:!0,animate:!0,motionConfig:"gentle",transitionMode:"innerRadius",tooltip:function(e){var i=e.datum;return (0,external_react_jsx_runtime_namespaceObject.jsx)(T,{id:i.id,value:i.formattedValue,enableChip:!0,color:i.color})},legends:[],role:"img",pixelRatio:"undefined"!=typeof window&&null!=(nivo_pie_X=window.devicePixelRatio)?nivo_pie_X:1},nivo_pie_j=["points"],nivo_pie_q=function(i){var t=i.data,a=i.id,n=void 0===a?nivo_pie_P.id:a,r=i.value,o=void 0===r?nivo_pie_P.value:r,d=i.valueFormat,c=i.colors,u=void 0===c?nivo_pie_P.colors:c,f=bn(n),v=bn(o),g=hn(d),h=hr(u,"id");return (0,external_react_namespaceObject.useMemo)((function(){return t.map((function(e){var i,t=f(e),a=v(e),n={id:t,label:null!=(i=e.label)?i:t,hidden:!1,value:a,formattedValue:g(a),data:e};return nivo_pie_E({},n,{color:h(n)})}))}),[t,f,v,g,h])},nivo_pie_J=function(a){var n=a.data,r=a.startAngle,o=a.endAngle,d=a.innerRadius,l=a.outerRadius,s=a.padAngle,f=a.sortByValue,v=a.activeId,g=a.activeInnerRadiusOffset,h=a.activeOuterRadiusOffset,L=a.hiddenIds,b=a.forwardLegendData,A=(0,external_react_namespaceObject.useMemo)((function(){var e=pie().value((function(e){return e.value})).startAngle(ut(r)).endAngle(ut(o)).padAngle(ut(s));return f||e.sortValues(null),e}),[r,o,s,f]),p=(0,external_react_namespaceObject.useMemo)((function(){var e=n.filter((function(e){return!L.includes(e.id)}));return{dataWithArc:A(e).map((function(e){var i=Math.abs(e.endAngle-e.startAngle);return nivo_pie_E({},e.data,{arc:{index:e.index,startAngle:e.startAngle,endAngle:e.endAngle,innerRadius:v===e.data.id?d-g:d,outerRadius:v===e.data.id?l+h:l,thickness:l-d,padAngle:e.padAngle,angle:i,angleDeg:ct(i)}})})),legendData:n.map((function(e){return{id:e.id,label:e.label,color:e.color,hidden:L.includes(e.id),data:e}}))}}),[A,n,L,v,d,g,l,h]),R=p.legendData,k=(0,external_react_namespaceObject.useRef)(b);return (0,external_react_namespaceObject.useEffect)((function(){"function"==typeof k.current&&k.current(R)}),[k,R]),p},nivo_pie_K=function(e){var i=e.activeId,t=e.onActiveIdChange,r=e.defaultActiveId,o=void 0!==i,d=(0,external_react_namespaceObject.useState)(o?null:void 0===r?null:r),l=d[0],s=d[1];return{activeId:o?i:l,setActiveId:(0,external_react_namespaceObject.useCallback)((function(e){t&&t(e),o||s(e)}),[o,t,s])}},nivo_pie_N=function(e){var i=e.data,t=e.radius,r=e.innerRadius,o=e.startAngle,d=void 0===o?nivo_pie_P.startAngle:o,l=e.endAngle,s=void 0===l?nivo_pie_P.endAngle:l,u=e.padAngle,f=void 0===u?nivo_pie_P.padAngle:u,v=e.sortByValue,g=void 0===v?nivo_pie_P.sortByValue:v,h=e.cornerRadius,L=void 0===h?nivo_pie_P.cornerRadius:h,b=e.activeInnerRadiusOffset,A=void 0===b?nivo_pie_P.activeInnerRadiusOffset:b,R=e.activeOuterRadiusOffset,k=void 0===R?nivo_pie_P.activeOuterRadiusOffset:R,m=e.activeId,I=e.onActiveIdChange,O=e.defaultActiveId,C=e.forwardLegendData,w=nivo_pie_K({activeId:m,onActiveIdChange:I,defaultActiveId:O}),x=w.activeId,W=w.setActiveId,M=a([]),y=M[0],S=M[1],T=nivo_pie_J({data:i,startAngle:d,endAngle:s,innerRadius:r,outerRadius:t,padAngle:f,sortByValue:g,activeId:x,activeInnerRadiusOffset:A,activeOuterRadiusOffset:k,hiddenIds:y,forwardLegendData:C}),D=n((function(e){S((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return nivo_pie_E({},T,{arcGenerator:p({cornerRadius:L,padAngle:c(f)}),setActiveId:W,toggleSerie:D})},nivo_pie_Q=function(i){var t=i.data,r=i.width,o=i.height,d=i.innerRadius,l=void 0===d?nivo_pie_P.innerRadius:d,s=i.startAngle,u=void 0===s?nivo_pie_P.startAngle:s,f=i.endAngle,v=void 0===f?nivo_pie_P.endAngle:f,g=i.padAngle,h=void 0===g?nivo_pie_P.padAngle:g,L=i.sortByValue,b=void 0===L?nivo_pie_P.sortByValue:L,A=i.cornerRadius,k=void 0===A?nivo_pie_P.cornerRadius:A,m=i.fit,I=void 0===m?nivo_pie_P.fit:m,O=i.activeInnerRadiusOffset,C=void 0===O?nivo_pie_P.activeInnerRadiusOffset:O,w=i.activeOuterRadiusOffset,x=void 0===w?nivo_pie_P.activeOuterRadiusOffset:w,W=i.activeId,M=i.onActiveIdChange,y=i.defaultActiveId,S=i.forwardLegendData,T=nivo_pie_K({activeId:W,onActiveIdChange:M,defaultActiveId:y}),D=T.activeId,V=T.setActiveId,B=(0,external_react_namespaceObject.useState)([]),z=B[0],H=B[1],G=(0,external_react_namespaceObject.useMemo)((function(){var e,i=Math.min(r,o)/2,t=i*Math.min(l,1),a=r/2,n=o/2;if(I){var d=nivo_arcs_sn(a,n,i,u-90,v-90),s=d.points,c=nivo_pie_F(d,nivo_pie_j),f=Math.min(r/c.width,o/c.height),g={width:c.width*f,height:c.height*f};g.x=(r-g.width)/2,g.y=(o-g.height)/2,a=(a-c.x)/c.width*c.width*f+g.x,n=(n-c.y)/c.height*c.height*f+g.y,e={box:c,ratio:f,points:s},i*=f,t*=f}return{centerX:a,centerY:n,radius:i,innerRadius:t,debug:e}}),[r,o,l,u,v,I]),X=nivo_pie_J({data:t,startAngle:u,endAngle:v,innerRadius:G.innerRadius,outerRadius:G.radius,padAngle:h,sortByValue:b,activeId:D,activeInnerRadiusOffset:C,activeOuterRadiusOffset:x,hiddenIds:z,forwardLegendData:S}),Y=(0,external_react_namespaceObject.useCallback)((function(e){H((function(i){return i.indexOf(e)>-1?i.filter((function(i){return i!==e})):[].concat(i,[e])}))}),[]);return nivo_pie_E({arcGenerator:nivo_arcs_fn({cornerRadius:k,padAngle:ut(h)}),activeId:D,setActiveId:V,toggleSerie:Y},X,G)},nivo_pie_U=function(i){var t=i.dataWithArc,a=i.arcGenerator,n=i.centerX,r=i.centerY,o=i.radius,d=i.innerRadius;return (0,external_react_namespaceObject.useMemo)((function(){return{dataWithArc:t,arcGenerator:a,centerX:n,centerY:r,radius:o,innerRadius:d}}),[t,a,n,r,o,d])},Z=function(i){var t=i.center,a=i.data,n=i.arcGenerator,o=i.borderWidth,d=i.borderColor,l=i.isInteractive,s=i.onClick,c=i.onMouseEnter,u=i.onMouseMove,f=i.onMouseLeave,v=i.setActiveId,g=i.tooltip,h=i.transitionMode,L=nivo_tooltip_z(),b=L.showTooltipFromEvent,A=L.hideTooltip,p=(0,external_react_namespaceObject.useMemo)((function(){if(l)return function(e,i){null==s||s(e,i)}}),[l,s]),R=(0,external_react_namespaceObject.useMemo)((function(){if(l)return function(e,i){b((0,external_react_namespaceObject.createElement)(g,{datum:e}),i),v(e.id),null==c||c(e,i)}}),[l,b,v,c,g]),m=(0,external_react_namespaceObject.useMemo)((function(){if(l)return function(e,i){b((0,external_react_namespaceObject.createElement)(g,{datum:e}),i),null==u||u(e,i)}}),[l,b,u,g]),I=(0,external_react_namespaceObject.useMemo)((function(){if(l)return function(e,i){A(),v(null),null==f||f(e,i)}}),[l,A,v,f]);return (0,external_react_jsx_runtime_namespaceObject.jsx)(nivo_arcs_un,{center:t,data:a,arcGenerator:n,borderWidth:o,borderColor:d,transitionMode:h,onClick:p,onMouseEnter:R,onMouseMove:m,onMouseLeave:I})},nivo_pie_$=["isInteractive","animate","motionConfig","theme","renderWrapper"],nivo_pie_=function(e){var i=e.data,t=e.id,a=void 0===t?nivo_pie_P.id:t,n=e.value,o=void 0===n?nivo_pie_P.value:n,l=e.valueFormat,s=e.sortByValue,c=void 0===s?nivo_pie_P.sortByValue:s,u=e.layers,f=void 0===u?nivo_pie_P.layers:u,L=e.startAngle,b=void 0===L?nivo_pie_P.startAngle:L,A=e.endAngle,p=void 0===A?nivo_pie_P.endAngle:A,R=e.padAngle,k=void 0===R?nivo_pie_P.padAngle:R,O=e.fit,C=void 0===O?nivo_pie_P.fit:O,w=e.innerRadius,x=void 0===w?nivo_pie_P.innerRadius:w,W=e.cornerRadius,M=void 0===W?nivo_pie_P.cornerRadius:W,y=e.activeInnerRadiusOffset,T=void 0===y?nivo_pie_P.activeInnerRadiusOffset:y,D=e.activeOuterRadiusOffset,V=void 0===D?nivo_pie_P.activeOuterRadiusOffset:D,B=e.width,z=e.height,H=e.margin,G=e.colors,E=void 0===G?nivo_pie_P.colors:G,F=e.borderWidth,X=void 0===F?nivo_pie_P.borderWidth:F,j=e.borderColor,J=void 0===j?nivo_pie_P.borderColor:j,K=e.enableArcLabels,N=void 0===K?nivo_pie_P.enableArcLabels:K,$=e.arcLabel,_=void 0===$?nivo_pie_P.arcLabel:$,ee=e.arcLabelsSkipAngle,ie=void 0===ee?nivo_pie_P.arcLabelsSkipAngle:ee,te=e.arcLabelsSkipRadius,ae=void 0===te?nivo_pie_P.arcLabelsSkipRadius:te,ne=e.arcLabelsTextColor,re=void 0===ne?nivo_pie_P.arcLabelsTextColor:ne,oe=e.arcLabelsRadiusOffset,de=void 0===oe?nivo_pie_P.arcLabelsRadiusOffset:oe,le=e.arcLabelsComponent,se=e.enableArcLinkLabels,ce=void 0===se?nivo_pie_P.enableArcLinkLabels:se,ue=e.arcLinkLabel,fe=void 0===ue?nivo_pie_P.arcLinkLabel:ue,ve=e.arcLinkLabelsSkipAngle,ge=void 0===ve?nivo_pie_P.arcLinkLabelsSkipAngle:ve,he=e.arcLinkLabelsOffset,Le=void 0===he?nivo_pie_P.arcLinkLabelsOffset:he,be=e.arcLinkLabelsDiagonalLength,Ae=void 0===be?nivo_pie_P.arcLinkLabelsDiagonalLength:be,pe=e.arcLinkLabelsStraightLength,Re=void 0===pe?nivo_pie_P.arcLinkLabelsStraightLength:pe,ke=e.arcLinkLabelsThickness,me=void 0===ke?nivo_pie_P.arcLinkLabelsThickness:ke,Ie=e.arcLinkLabelsTextOffset,Oe=void 0===Ie?nivo_pie_P.arcLinkLabelsTextOffset:Ie,Ce=e.arcLinkLabelsTextColor,we=void 0===Ce?nivo_pie_P.arcLinkLabelsTextColor:Ce,xe=e.arcLinkLabelsColor,We=void 0===xe?nivo_pie_P.arcLinkLabelsColor:xe,Me=e.arcLinkLabelComponent,ye=e.defs,Se=void 0===ye?nivo_pie_P.defs:ye,Te=e.fill,De=void 0===Te?nivo_pie_P.fill:Te,Ve=e.isInteractive,Be=void 0===Ve?nivo_pie_P.isInteractive:Ve,ze=e.onClick,He=e.onMouseEnter,Ge=e.onMouseMove,Ee=e.onMouseLeave,Fe=e.tooltip,Xe=void 0===Fe?nivo_pie_P.tooltip:Fe,Ye=e.activeId,Pe=e.onActiveIdChange,je=e.defaultActiveId,qe=e.transitionMode,Je=void 0===qe?nivo_pie_P.transitionMode:qe,Ke=e.legends,Ne=void 0===Ke?nivo_pie_P.legends:Ke,Qe=e.forwardLegendData,Ue=e.role,Ze=void 0===Ue?nivo_pie_P.role:Ue,$e=e.forwardedRef,_e=cn(B,z,H),ei=_e.outerWidth,ii=_e.outerHeight,ti=_e.margin,ai=_e.innerWidth,ni=_e.innerHeight,ri=nivo_pie_q({data:i,id:a,value:o,valueFormat:l,colors:E}),oi=nivo_pie_Q({data:ri,width:ai,height:ni,fit:C,innerRadius:x,startAngle:b,endAngle:p,padAngle:k,sortByValue:c,cornerRadius:M,activeInnerRadiusOffset:T,activeOuterRadiusOffset:V,activeId:Ye,onActiveIdChange:Pe,defaultActiveId:je,forwardLegendData:Qe}),di=oi.dataWithArc,li=oi.legendData,si=oi.arcGenerator,ci=oi.centerX,ui=oi.centerY,fi=oi.radius,vi=oi.innerRadius,gi=oi.setActiveId,hi=oi.toggleSerie,Li=Mn(Se,di,De),bi={arcs:null,arcLinkLabels:null,arcLabels:null,legends:null};f.includes("arcs")&&(bi.arcs=(0,external_react_jsx_runtime_namespaceObject.jsx)(Z,{center:[ci,ui],data:di,arcGenerator:si,borderWidth:X,borderColor:J,isInteractive:Be,onClick:ze,onMouseEnter:He,onMouseMove:Ge,onMouseLeave:Ee,setActiveId:gi,tooltip:Xe,transitionMode:Je},"arcs")),ce&&f.includes("arcLinkLabels")&&(bi.arcLinkLabels=(0,external_react_jsx_runtime_namespaceObject.jsx)(Y,{center:[ci,ui],data:di,label:fe,skipAngle:ge,offset:Le,diagonalLength:Ae,straightLength:Re,strokeWidth:me,textOffset:Oe,textColor:we,linkColor:We,component:Me},"arcLinkLabels")),N&&f.includes("arcLabels")&&(bi.arcLabels=(0,external_react_jsx_runtime_namespaceObject.jsx)(q,{center:[ci,ui],data:di,label:_,radiusOffset:de,skipAngle:ie,skipRadius:ae,textColor:re,transitionMode:Je,component:le},"arcLabels")),Ne.length>0&&f.includes("legends")&&(bi.legends=(0,external_react_jsx_runtime_namespaceObject.jsx)(nivo_pie_Y,{width:ai,height:ni,data:li,legends:Ne,toggleSerie:hi},"legends"));var Ai=nivo_pie_U({dataWithArc:di,arcGenerator:si,centerX:ci,centerY:ui,radius:fi,innerRadius:vi});return (0,external_react_jsx_runtime_namespaceObject.jsx)(Rt,{width:ei,height:ii,margin:ti,defs:Li,role:Ze,ref:$e,children:f.map((function(e,i){return void 0!==bi[e]?bi[e]:"function"==typeof e?(0,external_react_jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment,{children:(0,external_react_namespaceObject.createElement)(e,Ai)},i):null}))})},ee=(0,external_react_namespaceObject.forwardRef)((function(e,i){var t=e.isInteractive,a=void 0===t?nivo_pie_P.isInteractive:t,n=e.animate,r=void 0===n?nivo_pie_P.animate:n,o=e.motionConfig,d=void 0===o?nivo_pie_P.motionConfig:o,l=e.theme,s=e.renderWrapper,c=nivo_pie_F(e,nivo_pie_$);return (0,external_react_jsx_runtime_namespaceObject.jsx)(Fr,{animate:r,isInteractive:a,motionConfig:d,renderWrapper:s,theme:l,children:(0,external_react_jsx_runtime_namespaceObject.jsx)(nivo_pie_,nivo_pie_E({isInteractive:a},c,{forwardedRef:i}))})})),ie=["defaultWidth","defaultHeight","onResize","debounceResize"],te=(0,external_react_namespaceObject.forwardRef)((function(e,i){var t=e.defaultWidth,a=e.defaultHeight,n=e.onResize,r=e.debounceResize,o=nivo_pie_F(e,ie);return (0,external_react_jsx_runtime_namespaceObject.jsx)($r,{defaultWidth:t,defaultHeight:a,onResize:n,debounceResize:r,children:function(e){var t=e.width,a=e.height;return (0,external_react_jsx_runtime_namespaceObject.jsx)(ee,nivo_pie_E({width:t,height:a},o,{ref:i}))}})})),nivo_pie_ae=["isInteractive","theme","renderWrapper"],ne=function(a){var n=a.data,o=a.id,d=void 0===o?nivo_pie_P.id:o,l=a.value,s=void 0===l?nivo_pie_P.value:l,c=a.valueFormat,u=a.sortByValue,f=void 0===u?nivo_pie_P.sortByValue:u,g=a.startAngle,h=void 0===g?nivo_pie_P.startAngle:g,L=a.endAngle,p=void 0===L?nivo_pie_P.endAngle:L,R=a.padAngle,k=void 0===R?nivo_pie_P.padAngle:R,m=a.fit,I=void 0===m?nivo_pie_P.fit:m,M=a.innerRadius,T=void 0===M?nivo_pie_P.innerRadius:M,D=a.cornerRadius,V=void 0===D?nivo_pie_P.cornerRadius:D,z=a.activeInnerRadiusOffset,F=void 0===z?nivo_pie_P.activeInnerRadiusOffset:z,X=a.activeOuterRadiusOffset,Y=void 0===X?nivo_pie_P.activeOuterRadiusOffset:X,j=a.width,J=a.height,K=a.margin,N=a.pixelRatio,U=void 0===N?nivo_pie_P.pixelRatio:N,Z=a.colors,$=void 0===Z?nivo_pie_P.colors:Z,_=a.borderWidth,ee=void 0===_?nivo_pie_P.borderWidth:_,ie=a.borderColor,te=void 0===ie?nivo_pie_P.borderColor:ie,ae=a.enableArcLabels,ne=void 0===ae?nivo_pie_P.enableArcLabels:ae,re=a.arcLabel,oe=void 0===re?nivo_pie_P.arcLabel:re,de=a.arcLabelsSkipAngle,le=void 0===de?nivo_pie_P.arcLabelsSkipAngle:de,se=a.arcLabelsTextColor,ce=void 0===se?nivo_pie_P.arcLabelsTextColor:se,ue=a.arcLabelsRadiusOffset,fe=void 0===ue?nivo_pie_P.arcLabelsRadiusOffset:ue,ve=a.enableArcLinkLabels,ge=void 0===ve?nivo_pie_P.enableArcLinkLabels:ve,he=a.arcLinkLabel,Le=void 0===he?nivo_pie_P.arcLinkLabel:he,be=a.arcLinkLabelsSkipAngle,Ae=void 0===be?nivo_pie_P.arcLinkLabelsSkipAngle:be,pe=a.arcLinkLabelsOffset,Re=void 0===pe?nivo_pie_P.arcLinkLabelsOffset:pe,ke=a.arcLinkLabelsDiagonalLength,me=void 0===ke?nivo_pie_P.arcLinkLabelsDiagonalLength:ke,Ie=a.arcLinkLabelsStraightLength,Oe=void 0===Ie?nivo_pie_P.arcLinkLabelsStraightLength:Ie,Ce=a.arcLinkLabelsThickness,we=void 0===Ce?nivo_pie_P.arcLinkLabelsThickness:Ce,xe=a.arcLinkLabelsTextOffset,We=void 0===xe?nivo_pie_P.arcLinkLabelsTextOffset:xe,Me=a.arcLinkLabelsTextColor,ye=void 0===Me?nivo_pie_P.arcLinkLabelsTextColor:Me,Se=a.arcLinkLabelsColor,Te=void 0===Se?nivo_pie_P.arcLinkLabelsColor:Se,De=a.isInteractive,Ve=void 0===De?nivo_pie_P.isInteractive:De,Be=a.onClick,ze=a.onMouseMove,He=a.tooltip,Ge=void 0===He?nivo_pie_P.tooltip:He,Ee=a.activeId,Fe=a.onActiveIdChange,Xe=a.defaultActiveId,Ye=a.legends,Pe=void 0===Ye?nivo_pie_P.legends:Ye,je=a.forwardLegendData,qe=a.role,Je=a.forwardedRef,Ke=(0,external_react_namespaceObject.useRef)(null),Ne=nivo_theming_M(),Qe=cn(j,J,K),Ue=Qe.margin,Ze=Qe.innerWidth,$e=Qe.innerHeight,_e=Qe.outerWidth,ei=Qe.outerHeight,ii=nivo_pie_q({data:n,id:d,value:s,valueFormat:c,colors:$}),ti=nivo_pie_Q({data:ii,width:Ze,height:$e,fit:I,innerRadius:T,startAngle:h,endAngle:p,padAngle:k,sortByValue:f,cornerRadius:V,activeInnerRadiusOffset:F,activeOuterRadiusOffset:Y,activeId:Ee,onActiveIdChange:Fe,defaultActiveId:Xe,forwardLegendData:je}),ai=ti.dataWithArc,ni=ti.arcGenerator,ri=ti.centerX,oi=ti.centerY,di=ti.radius,li=ti.innerRadius,si=ti.setActiveId,ci=nivo_colors_Ye(te,Ne),ui=nivo_arcs_D({data:ai,label:oe,skipAngle:le,offset:fe,textColor:ce}),fi=nivo_arcs_({data:ai,skipAngle:Ae,offset:Re,diagonalLength:me,straightLength:Oe,label:Le,linkColor:Te,textOffset:We,textColor:ye});(0,external_react_namespaceObject.useEffect)((function(){if(Ke.current){Ke.current.width=_e*U,Ke.current.height=ei*U;var e=Ke.current.getContext("2d");e.scale(U,U),e.fillStyle=Ne.background,e.fillRect(0,0,_e,ei),e.save(),e.translate(Ue.left,Ue.top),ni.context(e),e.save(),e.translate(ri,oi),ai.forEach((function(i){e.beginPath(),e.fillStyle=i.color,e.strokeStyle=ci(i),e.lineWidth=ee,ni(i.arc),e.fill(),ee>0&&e.stroke()})),!0===ge&&nivo_arcs_Z(e,fi,Ne,we),!0===ne&&nivo_arcs_z(e,ui,Ne),e.restore(),Pe.forEach((function(i){nivo_legends_L(e,nivo_pie_E({},i,{data:ai,containerWidth:Ze,containerHeight:$e,theme:Ne}))}))}}),[Ke,Ze,$e,_e,ei,Ue.top,Ue.left,U,ri,oi,ni,ai,ee,ci,ne,ui,ge,fi,we,Pe,Ne]);var vi=(0,external_react_namespaceObject.useMemo)((function(){return ai.map((function(e){return nivo_pie_E({id:e.id},e.arc)}))}),[ai]),gi=function(e){if(!Ke.current)return null;var i=kn(Ke.current,e),t=i[0],a=i[1],n=nivo_arcs_dn(Ue.left+ri,Ue.top+oi,di,li,vi,t,a);return n?ai.find((function(e){return e.id===n.id})):null},hi=nivo_tooltip_z(),Li=hi.showTooltipFromEvent,bi=hi.hideTooltip,Ai=function(e){var i=gi(e);i?(null==ze||ze(i,e),si(i.id),Li((0,external_react_namespaceObject.createElement)(Ge,{datum:i}),e)):(si(null),bi())};return (0,external_react_jsx_runtime_namespaceObject.jsx)("canvas",{ref:Rn(Ke,Je),width:_e*U,height:ei*U,style:{width:_e,height:ei,cursor:Ve?"auto":"normal"},onMouseEnter:Ve?Ai:void 0,onMouseMove:Ve?Ai:void 0,onMouseLeave:Ve?function(){bi()}:void 0,onClick:Ve?function(e){if(Be){var i=gi(e);i&&Be(i,e)}}:void 0,role:qe})},nivo_pie_re=(0,external_react_namespaceObject.forwardRef)((function(e,i){var t=e.isInteractive,a=void 0===t?nivo_pie_P.isInteractive:t,n=e.theme,r=e.renderWrapper,o=nivo_pie_F(e,nivo_pie_ae);return (0,external_react_jsx_runtime_namespaceObject.jsx)(Fr,{isInteractive:a,renderWrapper:r,theme:n,children:(0,external_react_jsx_runtime_namespaceObject.jsx)(ne,nivo_pie_E({isInteractive:a},o,{forwardedRef:i}))})})),oe=["defaultWidth","defaultHeight","onResize","debounceResize"],nivo_pie_de=(0,external_react_namespaceObject.forwardRef)((function(e,i){var t=e.defaultWidth,a=e.defaultHeight,n=e.onResize,r=e.debounceResize,o=nivo_pie_F(e,oe);return (0,external_react_jsx_runtime_namespaceObject.jsx)($r,{defaultWidth:t,defaultHeight:a,onResize:n,debounceResize:r,children:function(e){var t=e.width,a=e.height;return (0,external_react_jsx_runtime_namespaceObject.jsx)(nivo_pie_re,nivo_pie_E({width:t,height:a},o,{ref:i}))}})}));
 //# sourceMappingURL=nivo-pie.mjs.map
 
-;// external "react-router-dom"
-const external_react_router_dom_namespaceObject = require("react-router-dom");
-;// ./src/components/WithLink.tsx
-function WithLink_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-
-
-var WithLink_ref =  true ? {
-  name: "me5k4h",
-  styles: "text-decoration:none;div{cursor:pointer;}"
-} : 0;
-const WithLink = ({
-  link,
-  onClick,
-  children,
-  className
-}) => link ? (0,jsx_runtime_namespaceObject.jsx)(external_react_router_dom_namespaceObject.Link, {
-  to: link,
-  onClick: onClick,
-  className: className,
-  css: WithLink_ref,
-  children: children
-}) : children;
 ;// ./src/components/WidgetCard/WidgetCardBase.tsx
 
 
@@ -58685,6 +59064,7 @@ const UserProfile = ({
 
 
 
+
 
 
 // ============================================================================