@ssa-ui-kit/core 3.16.4 → 3.19.0

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),
@@ -7999,8 +8001,8 @@ __webpack_require__.d(__webpack_exports__, {
   DropdownOptions: () => (/* reexport */ DropdownOptions_DropdownOptions),
   DropdownToggle: () => (/* reexport */ DropdownToggle_DropdownToggle),
   Field: () => (/* reexport */ index_parts_namespaceObject),
+  FileAttachment: () => (/* reexport */ FileAttachment_FileAttachment),
   FileUpload: () => (/* reexport */ FileUpload_FileUpload),
-  FileUploadItem: () => (/* reexport */ FileUpload_FileUploadItem),
   Filters: () => (/* reexport */ Filters),
   FiltersMultiSelect: () => (/* reexport */ FiltersMultiSelect),
   FiltersMultiSelectEmpty: () => (/* reexport */ FiltersMultiSelectEmpty),
@@ -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 ? {
@@ -20626,11 +21460,11 @@ const multipleStyles = ({
   isOpen
 }) => {
   const borderColor = isOpen ? theme.palette.primary.main : theme.colors.grey;
-  return /*#__PURE__*/(0,react_namespaceObject.css)("justify-content:space-between;height:40px;padding:11px 15px 9px 10px;font-size:14px;font-weight:500;color:", theme.colors.greyDarker, ";border:1px solid ", borderColor, ";border-radius:12px;background:", theme.colors.white, ";max-width:250px;svg path{stroke:", theme.colors.greyDarker, ";}&:disabled{background:", theme.colors.greyLighter, ";border-color:", theme.colors.grey, ";color:", theme.colors.greyDarker60, ";cursor:default;svg path{stroke:", theme.colors.grey, ";}}&:focus:not(:disabled){border-color:", theme.palette.primary.main, ";}&:hover:not(:disabled){border-color:", isOpen ? theme.palette.primary.main : theme.colors.greyDarker80, ";}" + ( true ? "" : 0),  true ? "" : 0);
+  return /*#__PURE__*/(0,react_namespaceObject.css)("height:40px;padding:11px 15px 9px 10px;font-size:14px;font-weight:500;color:", theme.colors.greyDarker, ";border:1px solid ", borderColor, ";border-radius:12px;background:", theme.colors.white, ";max-width:250px;svg path{stroke:", theme.colors.greyDarker, ";}&:disabled{background:", theme.colors.greyLighter, ";border-color:", theme.colors.grey, ";color:", theme.colors.greyDarker60, ";cursor:default;svg path{stroke:", theme.colors.grey, ";}}&:focus:not(:disabled){border-color:", theme.palette.primary.main, ";}&:hover:not(:disabled){border-color:", isOpen ? theme.palette.primary.main : theme.colors.greyDarker80, ";}" + ( true ? "" : 0),  true ? "" : 0);
 };
 const DropdownToggleBase = /*#__PURE__*/base_default()("button",  true ? {
   target: "er3kf7h0"
-} : 0)("display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:8px;position:relative;width:auto;height:44px;padding:0 14px;font:inherit;font-size:14px;font-weight:500;text-align:left;line-height:18px;cursor:pointer;outline:inherit;border-radius:12px;", ({
+} : 0)("display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:8px;position:relative;width:auto;height:44px;padding:0 14px;font:inherit;font-size:14px;font-weight:500;text-align:left;line-height:18px;cursor:pointer;outline:inherit;border-radius:12px;", ({
   isMultiple,
   isOpen,
   disabled,
@@ -21561,591 +22395,227 @@ const MultipleDropdownNotification = /*#__PURE__*/base_default()(Badge_BadgeBase
 }) => theme.colors.white, ";background-color:", ({
   theme
 }) => theme.colors.blueNotification, ";font-size:10px;border-radius:50%;" + ( true ? "" : 0));
-/* harmony default export */ const MultipleDropdownNotification_MultipleDropdownNotification = (MultipleDropdownNotification);
-;// ./src/components/MultipleDropdown/MultipleDropdown.tsx
-
-function MultipleDropdown_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 DropdownPlaceholderLabel = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ezz35kx0"
-} : 0)( true ? {
-  name: "l8l8b8",
-  styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
-} : 0);
-
-/**
- * MultipleDropdown - Dropdown component for multi-select and single-select
- *
- * A flexible dropdown that lets users select one or more options from a list.
- * In multi-select mode (`isMultiple=true`, default) each option toggles independently;
- * the toggle button shows the first selected value and a `+N` badge for overflow.
- * In single-select mode (`isMultiple=false`) selecting an option closes the menu.
- * Forwards its ref to the root container div.
- *
- * Component structure:
- * - MultipleDropdown (root container with context)
- *   - DropdownToggle (button that opens/closes the menu)
- *   - MultipleDropdownOptions (menu container rendered when open)
- *     - DropdownOption (individual selectable items)
- *
- * @category Form Controls
- * @subcategory Selection
- *
- * @example
- * ```tsx
- * // Basic multi-select
- * <MultipleDropdown
- *   label="Fruits"
- *   selectedItems={[{ value: 'apple' }]}
- *   onChange={(value, isSelected) => handleChange(value, isSelected)}
- * >
- *   <DropdownOption value="apple">Apple</DropdownOption>
- *   <DropdownOption value="banana">Banana</DropdownOption>
- *   <DropdownOption value="cherry">Cherry</DropdownOption>
- * </MultipleDropdown>
- * ```
- *
- * @example
- * ```tsx
- * // Single-select mode (closes on pick)
- * <MultipleDropdown
- *   label="Country"
- *   isMultiple={false}
- *   selectedItems={selected}
- *   onChange={handleChange}
- * >
- *   <DropdownOption value="us">United States</DropdownOption>
- *   <DropdownOption value="uk">United Kingdom</DropdownOption>
- * </MultipleDropdown>
- * ```
- *
- * @example
- * ```tsx
- * // Hide placeholder text, only show badge count
- * <MultipleDropdown
- *   label="Tags"
- *   showPlaceholder={false}
- *   selectedItems={tags}
- *   onChange={handleChange}
- * >
- *   {tags.map(tag => (
- *     <DropdownOption key={tag.value} value={tag.value}>{tag.label}</DropdownOption>
- *   ))}
- * </MultipleDropdown>
- * ```
- *
- * @see {@link DropdownOption} - Child component for individual options
- * @see {@link DropdownToggle} - Toggle button component
- * @see {@link MultipleDropdownOptions} - Options menu container
- *
- * @accessibility
- * - ARIA attributes set according to WAI-ARIA combobox pattern
- * - Keyboard navigation (Arrow keys, Enter, Escape)
- * - Click outside to close
- * - Screen reader friendly with aria-expanded and aria-controls
- *
- * @see https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
- */
-function MultipleDropdownInner({
-  selectedItems = [],
-  isDisabled,
-  isOpen: isInitOpen,
-  isMultiple = true,
-  placeholder = 'Select something',
-  showPlaceholder = true,
-  label,
-  children,
-  onChange: handleChange,
-  className,
-  maxHeight = 200
-}, ref) {
-  const dropdownBaseRef = (0,external_react_namespaceObject.useRef)(null);
-  const dropdownId = (0,external_react_namespaceObject.useId)();
-  const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
-  const [optionsWithKey, setOptionsWithKey] = (0,external_react_namespaceObject.useState)({});
-  const [items, setItems] = (0,external_react_namespaceObject.useState)([]);
-  const [values, setValues] = (0,external_react_namespaceObject.useState)([]);
-  const [valuesWithoutPlaceholder, setValuesWithoutPlaceholder] = (0,external_react_namespaceObject.useState)([]);
-  const memoSelectedItems = external_react_default().useMemo(() => selectedItems, [JSON.stringify(selectedItems)]);
-  const onChange = item => {
-    if (isDisabled || !item) {
-      return;
-    }
-    if (!isMultiple && optionsWithKey[item.value].isSelected) {
-      return;
-    }
-    let newOptionsWithKey = {};
-    let isSelected = true;
-    if (isMultiple) {
-      isSelected = !optionsWithKey[item.value].isSelected;
-      newOptionsWithKey = {
-        ...optionsWithKey,
-        [item.value]: {
-          ...optionsWithKey[item.value],
-          isSelected
-        }
-      };
-      setOptionsWithKey(newOptionsWithKey);
-    } else {
-      newOptionsWithKey = (0,utils_namespaceObject.mapObjIndexed)(option => ({
-        ...option,
-        isSelected: option.value === item.value
-      }), optionsWithKey);
-      setOptionsWithKey(newOptionsWithKey);
-      setIsOpen(false);
-    }
-    if (handleChange) {
-      handleChange(item.value, isSelected);
-    }
-  };
-  (0,hooks_namespaceObject.useClickOutside)(dropdownBaseRef, () => isOpen && setIsOpen(false));
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (isDisabled && isOpen) {
-      setIsOpen(false);
-    }
-  }, [isDisabled]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
-    const newOptions = [];
-    const keyedOptions = {};
-    const childItems = childrenArray.map((child, index) => {
-      const newOption = {
-        ...child.props,
-        isSelected: !!memoSelectedItems.find(selectedItem => selectedItem.value === child.props.value)
-      };
-      newOptions.push(newOption);
-      keyedOptions[newOption.value] = newOption;
-      return /*#__PURE__*/external_react_default().cloneElement(child, {
-        index,
-        onClick: onChange.bind(null),
-        ...child.props
-      });
-    });
-    setOptionsWithKey(keyedOptions);
-    setItems(childItems);
-  }, [memoSelectedItems, children]);
-  const contextValue = external_react_default().useMemo(() => ({
-    onChange,
-    allItems: optionsWithKey,
-    isMultiple,
-    maxHeight
-  }), [onChange, optionsWithKey, isMultiple, maxHeight]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    const newValues = getActiveItems({
-      allItems: optionsWithKey,
-      placeholder
-    });
-    const newValuesWithoutPlaceholder = newValues.filter(item => item !== placeholder);
-    setValues(newValues);
-    setValuesWithoutPlaceholder(newValuesWithoutPlaceholder);
-  }, [optionsWithKey]);
-  return (0,jsx_runtime_namespaceObject.jsx)(MultipleDropdown_context.Provider, {
-    value: contextValue,
-    children: (0,jsx_runtime_namespaceObject.jsxs)(components_DropdownBase_DropdownBase, {
-      ref: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([dropdownBaseRef, ref]),
-      "data-testid": "dropdown",
-      children: [(0,jsx_runtime_namespaceObject.jsxs)(DropdownToggle_DropdownToggle, {
-        className: className,
-        isOpen: isOpen,
-        disabled: isDisabled,
-        onClick: setIsOpen.bind(null, !isOpen),
-        ariaLabelledby: `dropdown-label-${dropdownId}`,
-        ariaControls: `dropdown-popup-${dropdownId}`,
-        isMultiple: isMultiple,
-        selectedCount: valuesWithoutPlaceholder.length,
-        children: [isMultiple ? (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-          children: [(0,jsx_runtime_namespaceObject.jsxs)(DropdownPlaceholderLabel, {
-            children: [label, showPlaceholder ? values.length > 0 && `: ${values[0]}` : valuesWithoutPlaceholder.length > 0 && `: ${valuesWithoutPlaceholder[0]}`]
-          }), values.length > 1 ? (0,jsx_runtime_namespaceObject.jsxs)(MultipleDropdownNotification_MultipleDropdownNotification, {
-            as: 'div',
-            children: ["+", values.length - 1]
-          }) : '']
-        }) : values.join(''), (0,jsx_runtime_namespaceObject.jsx)(DropdownArrow_DropdownArrow, {
-          isUp: isOpen
-        })]
-      }), isOpen ? (0,jsx_runtime_namespaceObject.jsx)(MultipleDropdownOptions_MultipleDropdownOptions, {
-        children: items
-      }) : null]
-    })
-  });
-}
-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)."; }
+/* harmony default export */ const MultipleDropdownNotification_MultipleDropdownNotification = (MultipleDropdownNotification);
+;// ./src/components/MultipleDropdown/MultipleDropdown.tsx
 
+function MultipleDropdown_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;
+
+
+
+
+
+
+
+
+const DropdownPlaceholderLabel = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ezz35kx0"
+} : 0)( true ? {
+  name: "l8l8b8",
+  styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
+} : 0);
+
 /**
- * PopoverContent - Content container for popover
+ * MultipleDropdown - Dropdown component for multi-select and single-select
  *
- * 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.
+ * A flexible dropdown that lets users select one or more options from a list.
+ * In multi-select mode (`isMultiple=true`, default) each option toggles independently;
+ * the toggle button shows the first selected value and a `+N` badge for overflow.
+ * In single-select mode (`isMultiple=false`) selecting an option closes the menu.
+ * Forwards its ref to the root container div.
  *
- * @category Components
- * @subcategory Overlay
+ * Component structure:
+ * - MultipleDropdown (root container with context)
+ *   - DropdownToggle (button that opens/closes the menu)
+ *   - MultipleDropdownOptions (menu container rendered when open)
+ *     - DropdownOption (individual selectable items)
+ *
+ * @category Form Controls
+ * @subcategory Selection
  *
  * @example
  * ```tsx
- * <PopoverContent>
- *   <PopoverHeading variant="h4">Title</PopoverHeading>
- *   <PopoverDescription>Content goes here</PopoverDescription>
- *   <PopoverClose>Close</PopoverClose>
- * </PopoverContent>
+ * // Basic multi-select
+ * <MultipleDropdown
+ *   label="Fruits"
+ *   selectedItems={[{ value: 'apple' }]}
+ *   onChange={(value, isSelected) => handleChange(value, isSelected)}
+ * >
+ *   <DropdownOption value="apple">Apple</DropdownOption>
+ *   <DropdownOption value="banana">Banana</DropdownOption>
+ *   <DropdownOption value="cherry">Cherry</DropdownOption>
+ * </MultipleDropdown>
  * ```
  *
  * @example
  * ```tsx
- * // Keep content mounted when closed
- * <PopoverContent mountMode="keep-mounted">
- *   <div>This stays in DOM when closed</div>
- * </PopoverContent>
+ * // Single-select mode (closes on pick)
+ * <MultipleDropdown
+ *   label="Country"
+ *   isMultiple={false}
+ *   selectedItems={selected}
+ *   onChange={handleChange}
+ * >
+ *   <DropdownOption value="us">United States</DropdownOption>
+ *   <DropdownOption value="uk">United Kingdom</DropdownOption>
+ * </MultipleDropdown>
  * ```
  *
- * @see {@link Popover} - Root component
- * @see {@link PopoverTrigger} - Trigger element component
- * @see {@link PopoverHeading} - Accessible heading component
- * @see {@link PopoverDescription} - Accessible description component
+ * @example
+ * ```tsx
+ * // Hide placeholder text, only show badge count
+ * <MultipleDropdown
+ *   label="Tags"
+ *   showPlaceholder={false}
+ *   selectedItems={tags}
+ *   onChange={handleChange}
+ * >
+ *   {tags.map(tag => (
+ *     <DropdownOption key={tag.value} value={tag.value}>{tag.label}</DropdownOption>
+ *   ))}
+ * </MultipleDropdown>
+ * ```
+ *
+ * @see {@link DropdownOption} - Child component for individual options
+ * @see {@link DropdownToggle} - Toggle button component
+ * @see {@link MultipleDropdownOptions} - Options menu container
+ *
+ * @accessibility
+ * - ARIA attributes set according to WAI-ARIA combobox pattern
+ * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Click outside to close
+ * - Screen reader friendly with aria-expanded and aria-controls
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  */
-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
-      })
+function MultipleDropdownInner({
+  selectedItems = [],
+  isDisabled,
+  isOpen: isInitOpen,
+  isMultiple = true,
+  placeholder = 'Select something',
+  showPlaceholder = true,
+  label,
+  children,
+  onChange: handleChange,
+  className,
+  maxHeight = 200
+}, ref) {
+  const dropdownBaseRef = (0,external_react_namespaceObject.useRef)(null);
+  const dropdownId = (0,external_react_namespaceObject.useId)();
+  const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
+  const [optionsWithKey, setOptionsWithKey] = (0,external_react_namespaceObject.useState)({});
+  const [items, setItems] = (0,external_react_namespaceObject.useState)([]);
+  const [values, setValues] = (0,external_react_namespaceObject.useState)([]);
+  const [valuesWithoutPlaceholder, setValuesWithoutPlaceholder] = (0,external_react_namespaceObject.useState)([]);
+  const memoSelectedItems = external_react_default().useMemo(() => selectedItems, [JSON.stringify(selectedItems)]);
+  const onChange = item => {
+    if (isDisabled || !item) {
+      return;
+    }
+    if (!isMultiple && optionsWithKey[item.value].isSelected) {
+      return;
+    }
+    let newOptionsWithKey = {};
+    let isSelected = true;
+    if (isMultiple) {
+      isSelected = !optionsWithKey[item.value].isSelected;
+      newOptionsWithKey = {
+        ...optionsWithKey,
+        [item.value]: {
+          ...optionsWithKey[item.value],
+          isSelected
+        }
+      };
+      setOptionsWithKey(newOptionsWithKey);
+    } else {
+      newOptionsWithKey = (0,utils_namespaceObject.mapObjIndexed)(option => ({
+        ...option,
+        isSelected: option.value === item.value
+      }), optionsWithKey);
+      setOptionsWithKey(newOptionsWithKey);
+      setIsOpen(false);
+    }
+    if (handleChange) {
+      handleChange(item.value, isSelected);
+    }
+  };
+  (0,hooks_namespaceObject.useClickOutside)(dropdownBaseRef, () => isOpen && setIsOpen(false));
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (isDisabled && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isDisabled]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
+    const newOptions = [];
+    const keyedOptions = {};
+    const childItems = childrenArray.map((child, index) => {
+      const newOption = {
+        ...child.props,
+        isSelected: !!memoSelectedItems.find(selectedItem => selectedItem.value === child.props.value)
+      };
+      newOptions.push(newOption);
+      keyedOptions[newOption.value] = newOption;
+      return /*#__PURE__*/external_react_default().cloneElement(child, {
+        index,
+        onClick: onChange.bind(null),
+        ...child.props
+      });
+    });
+    setOptionsWithKey(keyedOptions);
+    setItems(childItems);
+  }, [memoSelectedItems, children]);
+  const contextValue = external_react_default().useMemo(() => ({
+    onChange,
+    allItems: optionsWithKey,
+    isMultiple,
+    maxHeight
+  }), [onChange, optionsWithKey, isMultiple, maxHeight]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const newValues = getActiveItems({
+      allItems: optionsWithKey,
+      placeholder
+    });
+    const newValuesWithoutPlaceholder = newValues.filter(item => item !== placeholder);
+    setValues(newValues);
+    setValuesWithoutPlaceholder(newValuesWithoutPlaceholder);
+  }, [optionsWithKey]);
+  return (0,jsx_runtime_namespaceObject.jsx)(MultipleDropdown_context.Provider, {
+    value: contextValue,
+    children: (0,jsx_runtime_namespaceObject.jsxs)(components_DropdownBase_DropdownBase, {
+      ref: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([dropdownBaseRef, ref]),
+      "data-testid": "dropdown",
+      children: [(0,jsx_runtime_namespaceObject.jsxs)(DropdownToggle_DropdownToggle, {
+        className: className,
+        isOpen: isOpen,
+        disabled: isDisabled,
+        onClick: setIsOpen.bind(null, !isOpen),
+        ariaLabelledby: `dropdown-label-${dropdownId}`,
+        ariaControls: `dropdown-popup-${dropdownId}`,
+        isMultiple: isMultiple,
+        selectedCount: valuesWithoutPlaceholder.length,
+        children: [isMultiple ? (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+          children: [(0,jsx_runtime_namespaceObject.jsxs)(DropdownPlaceholderLabel, {
+            children: [label, showPlaceholder ? values.length > 0 && `: ${values[0]}` : valuesWithoutPlaceholder.length > 0 && `: ${valuesWithoutPlaceholder[0]}`]
+          }), values.length > 1 ? (0,jsx_runtime_namespaceObject.jsxs)(MultipleDropdownNotification_MultipleDropdownNotification, {
+            as: 'div',
+            children: ["+", values.length - 1]
+          }) : '']
+        }) : values.join(''), (0,jsx_runtime_namespaceObject.jsx)(DropdownArrow_DropdownArrow, {
+          isUp: isOpen
+        })]
+      }), isOpen ? (0,jsx_runtime_namespaceObject.jsx)(MultipleDropdownOptions_MultipleDropdownOptions, {
+        children: items
+      }) : null]
     })
   });
-});
+}
+const MultipleDropdown = /*#__PURE__*/external_react_default().forwardRef(MultipleDropdownInner);
+/* harmony default export */ const MultipleDropdown_MultipleDropdown = (MultipleDropdown);
 ;// ./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)."; }
@@ -28423,6 +28804,207 @@ const SearchBox = ({
 
 
 
+;// ./src/components/FileAttachment/utils.ts
+const formatBytes = bytes => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${Math.round(bytes / (1024 * 1024))} MB`;
+};
+const EXTENSION_ICON_MAP = {
+  pdf: 'file-pdf',
+  doc: 'file-word',
+  docx: 'file-word',
+  xls: 'excel-download',
+  xlsx: 'excel-download'
+};
+
+/** Returns the file-type icon for a known extension, or `null` when the design's grey Placeholder look should be used instead. */
+const getFileTypeIcon = fileName => {
+  const extension = fileName.split('.').pop()?.toLowerCase();
+  return extension && EXTENSION_ICON_MAP[extension] || null;
+};
+const IMAGE_FILE_NAME_REGEX = /\.(png|jpe?g|gif|webp|bmp|avif|svg)$/i;
+
+/** Gates image-preview rendering strictly on the file name's extension, so a pdf/php/etc. is never rendered via `<img>` even if preview data is (incorrectly) supplied for it. */
+const isImageFile = fileName => IMAGE_FILE_NAME_REGEX.test(fileName);
+;// ./src/components/FileAttachment/hooks/useFilePreviewUrl.ts
+
+
+/** Creates an object URL for a local File/Blob and revokes it on unmount or when `content` changes, avoiding a memory leak. */
+const useFilePreviewUrl = content => {
+  const [url, setUrl] = (0,external_react_namespaceObject.useState)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (!content) {
+      setUrl(undefined);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(content);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [content]);
+  return url;
+};
+;// ./src/components/FileAttachment/styles.ts
+function FileAttachment_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 paddingBySize = {
+  large: 16,
+  small: 12
+};
+const iconSizeBySize = {
+  large: 40,
+  small: 24
+};
+/** Placeholder glyph is inset ~20% on each side of its box in the design (40px box -> 24px glyph). */
+const placeholderIconSizeBySize = {
+  large: 24,
+  small: 14
+};
+const container = (theme, size) => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:8px;width:100%;padding:", paddingBySize[size], "px;background:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";border-radius:12px;" + ( true ? "" : 0),  true ? "" : 0);
+const disabledContainer = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.colors.greyLighter, ";" + ( true ? "" : 0),  true ? "" : 0);
+const iconWrapper = size => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;display:flex;align-items:center;justify-content:center;width:", iconSizeBySize[size], "px;height:", iconSizeBySize[size], "px;" + ( true ? "" : 0),  true ? "" : 0);
+const placeholderWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background:", theme.palette.secondary.dark, ";border-radius:4px;" + ( true ? "" : 0),  true ? "" : 0);
+const previewImage =  true ? {
+  name: "rys4i",
+  styles: "width:100%;height:100%;border-radius:4px;object-fit:cover;display:block"
+} : 0;
+const textColumn =  true ? {
+  name: "1vjbjgs",
+  styles: "flex:1;min-width:0;display:flex;flex-direction:column;gap:4px"
+} : 0;
+const title = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:600;color:", theme.colors.greyDarker, ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
+const description = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:6px;font-size:0.875rem;font-weight:500;color:", theme.colors.greyDarker60, ";white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
+const dot = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;width:4px;height:4px;border-radius:50%;background:", theme.colors.greyDarker60, ";" + ( true ? "" : 0),  true ? "" : 0);
+const progressTrack = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;flex-shrink:0;overflow:hidden;width:60px;height:4px;border-radius:4px;background:", theme.palette.secondary.light, ";" + ( true ? "" : 0),  true ? "" : 0);
+const progressFill = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:absolute;top:0;left:0;height:4px;border-radius:4px;background:", theme.palette.primary.main, ";" + ( true ? "" : 0),  true ? "" : 0);
+const deleteButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;cursor:pointer;color:", theme.colors.greyDarker60, ";transition:color 0.15s ease;&:hover{color:", theme.palette.error.main, ";}&:disabled{cursor:default;color:", theme.colors.grey, ";}" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/FileAttachment/FileAttachment.tsx
+
+
+
+
+
+
+/**
+ * FileAttachment - Read-only row displaying a single attached/uploading file
+ *
+ * @example
+ * ```tsx
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Progress bar look instead of the default percentage text
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   progress={50}
+ *   progressDisplay="bar"
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Omitting `progress` entirely shows just the file size, no progress copy —
+ * // e.g. a file that's been selected but whose upload hasn't started yet.
+ * <FileAttachment
+ *   file={{ name: 'Report.pdf', size: 20 * 1024 * 1024 }}
+ *   onRemove={() => handleRemove(file)}
+ * />
+ * ```
+ */
+
+const FileAttachment = ({
+  file,
+  size = 'large',
+  progress,
+  progressDisplay = 'text',
+  uploadingText = 'Uploading',
+  uploadedText = 'Uploaded Successfully',
+  showDescription = true,
+  icon,
+  isDisabled = false,
+  onRemove,
+  className,
+  css: cssProp
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const clampedProgress = progress === undefined ? undefined : Math.min(100, Math.max(0, progress));
+  const isUploaded = clampedProgress !== undefined && clampedProgress >= 100;
+  const iconName = icon ?? getFileTypeIcon(file.name);
+  const canPreviewImage = !icon && isImageFile(file.name);
+  const objectPreviewUrl = useFilePreviewUrl(canPreviewImage ? file.content : undefined);
+  const previewSrc = canPreviewImage ? file.previewUrl ?? objectPreviewUrl : undefined;
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: [container(theme, size), isDisabled && disabledContainer(theme), cssProp,  true ? "" : 0,  true ? "" : 0],
+    className: className,
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: [iconWrapper(size), !iconName && !previewSrc && placeholderWrapper(theme),  true ? "" : 0,  true ? "" : 0],
+      children: previewSrc ? (0,jsx_runtime_namespaceObject.jsx)("img", {
+        src: previewSrc,
+        alt: "",
+        css: previewImage
+      }) : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: iconName ?? 'picture',
+        size: iconName ? iconSizeBySize[size] : placeholderIconSizeBySize[size],
+        color: iconName ? theme.colors.greyDarker60 : theme.colors.white
+      })
+    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: textColumn,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: title(theme),
+        children: file.name
+      }), showDescription && (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: description(theme),
+        children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+          children: formatBytes(file.size)
+        }), clampedProgress !== undefined && (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+            children: "|"
+          }), progressDisplay === 'bar' ? (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+              css: progressTrack(theme),
+              role: "progressbar",
+              children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+                css: progressFill(theme),
+                style: {
+                  width: `${clampedProgress}%`
+                }
+              })
+            }), (0,jsx_runtime_namespaceObject.jsxs)("span", {
+              children: [clampedProgress, "%"]
+            })]
+          }) : (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [(0,jsx_runtime_namespaceObject.jsxs)("span", {
+              children: [clampedProgress, "%"]
+            }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+              css: dot(theme)
+            }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+              children: isUploaded ? uploadedText : uploadingText
+            })]
+          })]
+        })]
+      })]
+    }), onRemove && (0,jsx_runtime_namespaceObject.jsx)("button", {
+      type: "button",
+      css: deleteButton(theme),
+      disabled: isDisabled,
+      onClick: onRemove,
+      "aria-label": `Remove ${file.name}`,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "delete",
+        size: 16,
+        color: "currentColor"
+      })
+    })]
+  });
+};
+/* harmony default export */ const FileAttachment_FileAttachment = (FileAttachment);
 ;// ./src/components/FileUpload/styles.ts
 function FileUpload_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)."; }
 
@@ -28461,71 +29043,6 @@ const filesList =  true ? {
   styles: "display:flex;flex-direction:column;gap:8px;margin-top:12px"
 } : 0;
 const filesListTitle = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:500;color:", theme.colors.greyDarker, ";margin-bottom:4px;" + ( true ? "" : 0),  true ? "" : 0);
-
-// ─── File item ────────────────────────────────────────────────────────────────
-
-const fileItem = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:center;gap:12px;padding:12px 16px;background:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";border-radius:12px;" + ( true ? "" : 0),  true ? "" : 0);
-const fileIconWrapper =  true ? {
-  name: "1xuq60z",
-  styles: "flex-shrink:0;display:flex;align-items:center;justify-content:center"
-} : 0;
-const fileInfo =  true ? {
-  name: "1k33dov",
-  styles: "flex:1;display:flex;flex-direction:column;gap:2px;min-width:0"
-} : 0;
-const fileName = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.875rem;font-weight:600;color:", theme.colors.greyDarker, ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" + ( true ? "" : 0),  true ? "" : 0);
-const fileSize = theme => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:0.75rem;font-weight:400;color:", theme.colors.greyDarker60, ";" + ( true ? "" : 0),  true ? "" : 0);
-const deleteButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:8px;cursor:pointer;color:", theme.colors.greyDarker60, ";transition:color 0.15s ease,background 0.15s ease;&:hover{color:", theme.palette.error.main, ";background:", theme.colors.greyLighter, ";}&:disabled{cursor:not-allowed;opacity:0.5;}" + ( true ? "" : 0),  true ? "" : 0);
-;// ./src/components/FileUpload/FileUploadItem.tsx
-
-
-
-
-const formatFileSize = bytes => {
-  if (bytes === 0) return '0 B';
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-};
-const FileUploadItem = ({
-  file,
-  onRemove,
-  disabled
-}) => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
-    css: fileItem(theme),
-    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
-      css: fileIconWrapper,
-      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-        name: "file-pdf",
-        size: 32,
-        color: theme.colors.greyDarker60
-      })
-    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
-      css: fileInfo,
-      children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
-        css: fileName(theme),
-        children: file.name
-      }), (0,jsx_runtime_namespaceObject.jsx)("span", {
-        css: fileSize(theme),
-        children: formatFileSize(file.size)
-      })]
-    }), (0,jsx_runtime_namespaceObject.jsx)("button", {
-      css: deleteButton(theme),
-      type: "button",
-      disabled: disabled,
-      onClick: () => onRemove(file),
-      "aria-label": `Remove ${file.name}`,
-      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-        name: "bin",
-        size: 16,
-        color: "currentColor"
-      })
-    })]
-  });
-};
-/* harmony default export */ const FileUpload_FileUploadItem = (FileUploadItem);
 ;// ./src/components/FileUpload/FileUpload.tsx
 
 
@@ -28536,14 +29053,23 @@ const FileUploadItem = ({
 
 
 
+
 const normalizeValue = value => {
   if (!value) return [];
   return Array.isArray(value) ? value : [value];
 };
-const formatBytes = bytes => {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
-  return `${Math.round(bytes / (1024 * 1024))} MB`;
+
+/**
+ * Matches by the Nth occurrence of a name rather than the first, so files
+ * that share a name (e.g. two "photo.png" from different folders) each get
+ * their own progress entry instead of colliding on the same one.
+ */
+const getFileProgress = (file, index, files, uploadProgress) => {
+  if (uploadProgress === undefined) return undefined;
+  if (typeof uploadProgress === 'number') return uploadProgress;
+  const occurrence = files.slice(0, index + 1).filter(f => f.name === file.name).length;
+  const matches = uploadProgress.filter(entry => entry.name === file.name);
+  return matches[occurrence - 1]?.progress;
 };
 
 /**
@@ -28551,7 +29077,8 @@ const formatBytes = bytes => {
  *
  * Supports single and multi-file selection with built-in validation for
  * file formats and size. In multi-file mode, selected files are listed
- * below the input with individual remove controls.
+ * below the input with individual remove controls. Single-file mode can opt
+ * into the same list treatment via `showFileAttachment`.
  *
  * @example
  * ```tsx
@@ -28579,6 +29106,36 @@ const formatBytes = bytes => {
  *   onChange={setFiles}
  * />
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-file with per-file upload progress, driven by the consumer's own
+ * // upload requests — FileUpload only handles local selection, so it has no
+ * // progress data of its own.
+ * <FileUpload
+ *   isMultiFile
+ *   value={files}
+ *   onChange={setFiles}
+ *   uploadProgress={[
+ *     { name: 'report.pdf', progress: 50 },
+ *     { name: 'photo.png', progress: 100 },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Single file, shown as a FileAttachment card below the input (icon,
+ * // size, delete button, image preview) instead of inline text next to the
+ * // button. `uploadProgress` here can just be a single number, since there's
+ * // only ever one file.
+ * <FileUpload
+ *   showFileAttachment
+ *   value={file}
+ *   onChange={(files) => setFile(files[0])}
+ *   uploadProgress={70}
+ * />
+ * ```
  */
 const FileUpload = ({
   label,
@@ -28595,6 +29152,8 @@ const FileUpload = ({
   maxFiles,
   withDropArea = false,
   uploadedSectionTitle,
+  uploadProgress,
+  showFileAttachment = false,
   value,
   onChange,
   onFileRejected
@@ -28657,8 +29216,8 @@ const FileUpload = ({
   };
   const acceptAttr = allowedFormats?.map(f => `.${f}`).join(',');
   const hasError = !!error;
-  const inlineFileName = !isMultiFile && files[0]?.name;
-  const showUploadedFiles = isMultiFile && files.length > 0;
+  const inlineFileName = !isMultiFile && !showFileAttachment && files[0]?.name;
+  const attachmentFiles = isMultiFile || showFileAttachment && !withDropArea ? files : [];
   return (0,jsx_runtime_namespaceObject.jsxs)("div", {
     css: [wrapper, css,  true ? "" : 0,  true ? "" : 0],
     className: className,
@@ -28684,7 +29243,7 @@ const FileUpload = ({
       onKeyDown: e => e.key === 'Enter' && !files[0] && handleChooseClick(),
       children: !isMultiFile && files[0] ? (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [(0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-          name: "file-pdf",
+          name: getFileTypeIcon(files[0].name) ?? 'picture',
           size: 36,
           color: theme.colors.greyDarker60
         }), (0,jsx_runtime_namespaceObject.jsx)("span", {
@@ -28741,15 +29300,20 @@ const FileUpload = ({
         marginTop: 12
       } : undefined,
       children: error || helperText
-    }), showUploadedFiles && (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    }), attachmentFiles.length > 0 && (0,jsx_runtime_namespaceObject.jsxs)("div", {
       css: filesList,
       children: [uploadedSectionTitle && (0,jsx_runtime_namespaceObject.jsx)("span", {
         css: filesListTitle(theme),
         children: uploadedSectionTitle
-      }), files.map((file, index) => (0,jsx_runtime_namespaceObject.jsx)(FileUpload_FileUploadItem, {
-        file: file,
-        onRemove: handleRemove,
-        disabled: disabled
+      }), attachmentFiles.map((file, index) => (0,jsx_runtime_namespaceObject.jsx)(FileAttachment_FileAttachment, {
+        file: {
+          name: file.name,
+          size: file.size,
+          content: file
+        },
+        progress: getFileProgress(file, index, files, uploadProgress),
+        onRemove: () => handleRemove(file),
+        isDisabled: disabled
       }, `${file.name}-${index}`))]
     })]
   });
@@ -43141,29 +43705,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
 
 
@@ -53986,7 +54527,7 @@ function History_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have trie
 
 const FIRST_LINE_TOP_PADDING = 2;
 const FIRST_LINE_HEIGHT = 20;
-const container =  true ? {
+const styles_container =  true ? {
   name: "1fttcpj",
   styles: "display:flex;flex-direction:column"
 } : 0;
@@ -54053,7 +54594,7 @@ const History_History = ({
   const circleTopOffset = Math.max(0, FIRST_LINE_TOP_PADDING + (FIRST_LINE_HEIGHT - circleSize) / 2);
   return (0,jsx_runtime_namespaceObject.jsx)("div", {
     "data-testid": "history",
-    css: container,
+    css: styles_container,
     style: sx,
     children: items.map((item, index) => {
       const isLast = index === items.length - 1;
@@ -58502,6 +59043,7 @@ const UserProfile = ({
 
 
 
+
 
 
 // ============================================================================