@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.d.ts

@@ -0,0 +1,69 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Base props for both static and dynamic MultiSelectOptGroup variants
+ */
+type BaseOptGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The label text displayed at the top of the group */
+    label: string;
+    /** Whether to show a separator line after the group */
+    withSeparator?: boolean;
+};
+/**
+ * Props for the dynamic API of MultiSelectOptGroup
+ * @template T - The type of items in the group
+ */
+export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps {
+    /** Array of items to render as options within the group */
+    items: T[];
+    /** Render function that converts each item into a MultiSelectOption */
+    children: (item: T) => React.JSX.Element;
+}
+/**
+ * Props for the static API of MultiSelectOptGroup
+ */
+export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
+    /** Not used in static API */
+    items?: never;
+    /** Static MultiSelectOption components to render within the group */
+    children: ReactNode;
+}
+/**
+ * Combined props type for MultiSelectOptGroup
+ * @template T - The type of items when using dynamic API
+ */
+export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T> | StaticMultiSelectOptGroup;
+/**
+ * Groups related options within a `MultiSelect` component.
+ *
+ * This component provides two APIs for grouping options:
+ * 1. Static API - Directly nest MultiSelectOption components
+ * 2. Dynamic API - Provide an array of items and a render function for dynamic items
+ * @example
+ * ```tsx
+ * // Static API
+ * <MultiSelectOptGroup label="Fruits" withSeparator>
+ *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ *   <MultiSelectOption value="banana">Banana</MultiSelectOption>
+ * </MultiSelectOptGroup>
+ *
+ * // Dynamic API
+ * <MultiSelectOptGroup
+ *   label="Fruits"
+ *   items={fruits}
+ *   withSeparator
+ * >
+ *   {fruit => (
+ *     <MultiSelectOption value={fruit.id}>
+ *       {fruit.name}
+ *     </MultiSelectOption>
+ *   )}
+ * </MultiSelectOptGroup>
+ * ```
+ * @template T - The type of items when using the dynamic API
+ * @see {@link MultiSelectOption} for the child component API
+ */
+declare function MultiSelectOptGroup<T>(props: MultiSelectOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectOptGroup {
+    var displayName: string;
+}
+export { MultiSelectOptGroup };

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.js

@@ -0,0 +1,34 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useContext as h } from "react";
+import { ComboboxGroup as x, ComboboxGroupLabel as C, SelectGroup as G, SelectGroupLabel as S } from "@ariakit/react";
+import { tv as N } from "tailwind-variants";
+import { MultiSelectContext as g } from "../Multiselect.context.js";
+const M = N({
+  slots: {
+    base: "uy-flex uy-flex-col uy-bg-surface-neutral",
+    label: "uy-px-150 uy-py-100 uy-typography-body-strong uy-text-content-neutral",
+    separator: "uy-my-100 uy-border-t uy-border-border-neutral uy-border-solid"
+  }
+});
+function O(e) {
+  return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
+}
+function j(e) {
+  const i = h(g), { base: c, label: r, separator: o } = M(), { label: n, withSeparator: a, className: m, ...y } = e, d = (b, p) => b.map((f) => p(f)), l = O(e) ? d(e.items, e.children) : e.children, s = {
+    className: c({ className: m }),
+    ...y
+  };
+  return i.isSearchable ? /* @__PURE__ */ u(x, { ...s, children: [
+    /* @__PURE__ */ t(C, { className: r(), children: n }),
+    l,
+    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
+  ] }) : /* @__PURE__ */ u(G, { ...s, children: [
+    /* @__PURE__ */ t(S, { className: r(), children: n }),
+    l,
+    a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
+  ] });
+}
+j.displayName = "MultiSelectOptGroup";
+export {
+  j as MultiSelectOptGroup
+};

package/dist/esm/components/multi-select/parts/MultiSelectOption.d.ts

@@ -0,0 +1,20 @@
+import { default as React, ReactNode } from 'react';
+/**
+ * Props for the MultiSelectOption component.
+ * @template T - The type of the value this option represents (string or number)
+ */
+export interface MultiSelectOptionProps<T> {
+    /** The value associated with this option. Must be unique within the MultiSelect */
+    value: T;
+    /** The content to display for this option */
+    children: ReactNode;
+    /** Whether the option is disabled. When true, the option cannot be selected */
+    isDisabled?: boolean;
+    /** Whether the option should receive focus when rendered. Use sparingly */
+    autoFocus?: boolean;
+    /** Additional text displayed below the option to provide more context */
+    helperText?: string;
+}
+export declare const MultiSelectOption: <T>(props: MultiSelectOptionProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/esm/components/multi-select/parts/MultiSelectOption.js

@@ -0,0 +1,87 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as p, useContext as b, createElement as v } from "react";
+import { SelectItem as x, ComboboxItem as h, SelectItemCheck as S } from "@ariakit/react";
+import { tv as g } from "tailwind-variants";
+import C from "../../../hooks/use-id.js";
+import { CheckboxIndicator as k } from "../../checkbox/parts/CheckboxIndicator.js";
+import { MultiSelectContext as I } from "../Multiselect.context.js";
+const O = g({
+  slots: {
+    base: [
+      "uy-flex uy-flex-col uy-transition",
+      "uy-w-full uy-px-150 uy-py-100",
+      "uy-rounded-50 uy-cursor-pointer",
+      "hover:uy-bg-surface-neutral-hover",
+      "active:uy-bg-surface-neutral-pressed",
+      "focus-visible:uy-outline focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2",
+      "data-[active-item=true]:uy-outline data-[active-item=true]:uy-outline-2 data-[active-item=true]:uy-outline-utility-focus-ring data-[active-item=true]:uy-outline-offset-2"
+    ],
+    label: "uy-inline-flex uy-items-center uy-gap-100 uy-text-content-neutral uy-typography-body",
+    helperText: "uy-inline-block uy-typography-body uy-text-content-neutral-low uy-pl-300"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "!uy-cursor-not-allowed",
+        label: "uy-text-content-neutral-disabled"
+      },
+      false: {
+        base: ""
+      }
+    }
+  }
+});
+function w({
+  isDisabled: i
+}) {
+  return /* @__PURE__ */ e(
+    S,
+    {
+      render: (t) => /* @__PURE__ */ e(
+        k,
+        {
+          isSelected: "children" in t && !!t.children,
+          isDisabled: i,
+          "data-dd-privacy": "hidden"
+        }
+      )
+    }
+  );
+}
+function r({
+  value: i,
+  children: t,
+  isDisabled: u,
+  helperText: l,
+  autoFocus: n = !1,
+  ...a
+}, s) {
+  const o = C(), c = b(I), { base: y, label: d, helperText: f } = O({ isDisabled: u });
+  return /* @__PURE__ */ v(
+    x,
+    {
+      "data-dd-privacy": "mask",
+      ...a,
+      ref: s,
+      id: o,
+      key: o,
+      value: String(i),
+      disabled: u,
+      className: y(),
+      autoFocus: n,
+      focusOnHover: !1,
+      "aria-describedby": l ? `${o}-helper-text` : void 0,
+      render: c.isSearchable ? /* @__PURE__ */ e(h, {}) : void 0
+    },
+    /* @__PURE__ */ m("div", { className: d(), children: [
+      /* @__PURE__ */ e(w, { isDisabled: u }),
+      t
+    ] }),
+    l && /* @__PURE__ */ e("span", { id: `${o}-helper-text`, className: f(), children: l })
+  );
+}
+r.displayName = "MultiSelectOption";
+const R = p(r);
+export {
+  R as MultiSelectOption
+};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.d.ts

@@ -0,0 +1,7 @@
+import { SelectPopoverProps } from '@ariakit/react';
+type MultiSelectPopoverProps = SelectPopoverProps & {
+    onBlur?: () => void;
+};
+declare function MultiSelectPopoverComponent({ children, ...props }: MultiSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectPopover: import('react').MemoExoticComponent<typeof MultiSelectPopoverComponent>;
+export {};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.js

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as r, Fragment as m } from "react/jsx-runtime";
+import { memo as b, useContext as f } from "react";
+import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
+import { tv as i } from "tailwind-variants";
+import { Icon as g } from "../../icon/Icon.js";
+import { MultiSelectContext as w } from "../Multiselect.context.js";
+const S = i({
+  slots: {
+    base: "uy-shadow-floating uy-absolute uy-top-full uy-left-0 uy-z-50 uy-w-full uy-rounded-75 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-overflow-auto uy-max-h-[min(var(--popover-available-height,300px),300px)] uy-outline-none",
+    list: "uy-p-100"
+  }
+}), N = i({
+  slots: {
+    wrapper: "uy-sticky uy-top-0 uy-bg-surface-neutral uy-pt-100 uy-px-100",
+    base: "uy-flex uy-w-full uy-gap-100 uy-h-500 uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-border-border-form-enabled uy-bg-surface-form-enabled uy-px-150 uy-typography-body focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",
+    input: "focus-visible:uy-outline-none",
+    divider: "uy-my-100 uy-border-t uy-border-border-neutral"
+  }
+});
+function C({
+  children: t,
+  ...s
+}) {
+  const l = f(w), { base: n, list: u } = S(), { base: a, input: y, wrapper: c, divider: d } = N(), { onBlur: o, ...p } = s;
+  return /* @__PURE__ */ e(
+    h,
+    {
+      portal: !0,
+      sameWidth: !0,
+      unmountOnHide: !0,
+      className: n(),
+      onClose: () => o == null ? void 0 : o(),
+      ...p,
+      children: l.isSearchable ? /* @__PURE__ */ r(m, { children: [
+        /* @__PURE__ */ r("div", { className: c(), children: [
+          /* @__PURE__ */ r("div", { className: a(), children: [
+            /* @__PURE__ */ e(
+              g,
+              {
+                src: "MagnifyingGlassOutlined",
+                color: "content.neutral.lowest",
+                "aria-hidden": !0
+              }
+            ),
+            /* @__PURE__ */ e(
+              v,
+              {
+                autoSelect: !0,
+                placeholder: "Search...",
+                className: y()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("hr", { className: d() })
+        ] }),
+        /* @__PURE__ */ e(x, { className: u(), children: t })
+      ] }) : /* @__PURE__ */ e("div", { className: u(), children: t })
+    }
+  );
+}
+const M = b(C);
+M.displayName = "MultiSelectPopover";
+export {
+  M as MultiSelectPopover
+};

package/dist/esm/components/multi-select-field/MultiSelectField.d.ts

@@ -0,0 +1,59 @@
+import { ForwardedRef, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+import { MultiSelectProps } from '../multi-select/Multiselect.types.js';
+type Key = string | number;
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the multi-select field. */
+    label: string;
+    /** Helper text to display below the multi-select field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the multi-select field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the multi-select field. */
+    contextualLink?: ReactNode;
+}
+type BaseMultiSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> = Omit<MultiSelectProps<TItem, TItemKey, TKeyType>, 'value' | 'defaultValue' | 'onChange' | 'aria-labelledby' | 'aria-label'>;
+export type MultiSelectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TItem = unknown, TItemKey extends keyof TItem = keyof TItem, TKeyType extends TItem[TItemKey] & Key = TItem[TItemKey] & Key> = FieldProps<TFieldValues, TName> & BaseMultiSelectProps<TItem, TItemKey, TKeyType>;
+/**
+ * The `MultiSelectField` component renders a full field that allows selecting multiple items from a dropdown list, and integrates with the `Form` component automatically.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   fruits: z.set(z.string()),
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <MultiSelectField<typeof schema>
+ *         name="fruits"
+ *         label="Select fruits"
+ *       >
+ *         <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ *         <MultiSelectOption value="banana">Banana</MultiSelectOption>
+ *         <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *       </MultiSelectField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-multiselectfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
+ */
+export declare const MultiSelectField: {
+    <TSchema extends Schema, TItem = unknown>(props: MultiSelectFieldProps<ZodInfer<TSchema>, FieldPath<ZodInfer<TSchema>>, TItem, keyof TItem, TItem[keyof TItem] & Key> & {
+        ref?: ForwardedRef<HTMLButtonElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+export {};

package/dist/esm/components/multi-select-field/MultiSelectField.js

@@ -0,0 +1,82 @@
+import { jsxs as M, jsx as t } from "react/jsx-runtime";
+import { forwardRef as P } from "react";
+import { useFormContext as T } from "react-hook-form";
+import { tv as g } from "tailwind-variants";
+import { FormField as L } from "../form-field/FormField.js";
+import { FormControl as R } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as k } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as q } from "../form-field/parts/FormLabel.js";
+import { MultiSelect as u } from "../multi-select/MultiSelect.js";
+const v = g({
+  base: "uy-flex uy-flex-col uy-gap-100"
+});
+function w(e, i) {
+  const { control: l, setValue: f } = T(), {
+    name: o,
+    label: x,
+    helperText: n,
+    feedbackText: F,
+    contextualLink: h,
+    isRequired: p,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s,
+    requiredVariant: S,
+    children: a,
+    onClearButtonPress: r,
+    ...y
+  } = e, I = {
+    isRequired: p,
+    isInvalid: b,
+    isLoading: m,
+    isDisabled: c,
+    isReadOnly: s
+  }, V = "items" in e && "getItemValue" in e, d = {
+    onClearButtonPress: () => {
+      f(o, /* @__PURE__ */ new Set()), r == null || r();
+    },
+    placeholder: e.placeholder,
+    isSearchable: e.isSearchable,
+    maxVisibleItems: e.maxVisibleItems,
+    isDisabled: c,
+    isReadOnly: s,
+    isLoading: m,
+    renderValue: e.renderValue
+  };
+  return /* @__PURE__ */ M(
+    L,
+    {
+      control: l,
+      name: o,
+      className: v(),
+      ...I,
+      children: [
+        /* @__PURE__ */ t(q, { requiredVariant: S, children: x }),
+        n && /* @__PURE__ */ t(k, { children: n }),
+        /* @__PURE__ */ t(R, { children: V ? (
+          // @ts-expect-error - Type system cannot fully express this but it works correctly at runtime
+          /* @__PURE__ */ t(
+            u,
+            {
+              ...y,
+              ...d,
+              ref: i,
+              children: a
+            }
+          )
+        ) : /* @__PURE__ */ t(u, { ...d, ref: i, children: a }) }),
+        /* @__PURE__ */ t(j, { children: F }),
+        h
+      ]
+    }
+  );
+}
+const C = P(function(i, l) {
+  return w(i, l);
+});
+C.displayName = "MultiSelectField";
+export {
+  C as MultiSelectField
+};

package/dist/esm/components/nav/Nav.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type NavProps = PropsWithChildren<Pick<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-describedby' | 'aria-labelledby' | 'aria-hidden' | 'aria-live'> & {
+    /** The title of the navigation menu. */
+    title?: string;
+}>;
+/**
+ * The `Nav` component represents a vertical navigation menu with optional title and navigation items of multiple types.
+ */
+export declare function Nav({ children, title, ...rest }: NavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Nav {
+    var displayName: string;
+}

package/dist/esm/components/nav/Nav.js

@@ -0,0 +1,28 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import n from "../../hooks/use-id.js";
+function o({ children: e, title: y, ...s }) {
+  const l = `nav-title-${n()}`;
+  return /* @__PURE__ */ u(
+    "nav",
+    {
+      ...s,
+      className: "uy-flex uy-flex-col uy-gap-50 uy-min-w-[264px]",
+      "aria-labelledby": l,
+      children: [
+        /* @__PURE__ */ a(
+          "h3",
+          {
+            id: l,
+            className: "uy-typography-body-strong uy-py-100 uy-px-150",
+            children: y
+          }
+        ),
+        /* @__PURE__ */ a("ul", { className: "uy-flex uy-flex-col uy-gap-50 uy-list-none", children: e })
+      ]
+    }
+  );
+}
+o.displayName = "Nav";
+export {
+  o as Nav
+};

package/dist/esm/components/nav/parts/NavGroup.d.ts

@@ -0,0 +1,30 @@
+import { default as React, ReactNode } from 'react';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+import { NavItem, NavItemProps } from './NavItem.js';
+type NavGroupChildren = React.ReactElement<NavItemProps, typeof NavItem>;
+type NavGroupProps = {
+    /** The child elements to be rendered inside the NavGroup. They must be `<NavItem>` components. */
+    children: NavGroupChildren | NavGroupChildren[];
+    /** The label to show for the NavGroup. */
+    label: string;
+    /** The prefix element to be displayed before the label. It can be any valid React element. */
+    prefix?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label.  It can be any valid React element. */
+    suffix?: ReactNode;
+    /** Whether the NavGroup is currently expanded. Use it to switch the component to a controlled mode. */
+    isExpanded?: boolean;
+    /** Whether the NavGroup is expanded by default. It only has effect in uncontrolled mode */
+    defaultExpanded?: boolean;
+    /** Callback function to be called when the NavGroup is expanded or collapsed. */
+    onToggle?: (isExpanded: boolean) => void;
+} & DataAttributes;
+/**
+ * The `NavGroup` component represents a tree of navigation items grouped under a single root element in a `Nav` component. It can be expanded or collapsed to show or hide its children.
+ */
+export declare function NavGroup({ children, label, prefix, suffix, defaultExpanded, isExpanded: controlledIsExpanded, onToggle, ...dataAttributes }: NavGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavGroup {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/nav/parts/NavGroup.js

@@ -0,0 +1,105 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import s, { useState as G, useCallback as j } from "react";
+import { Button as B } from "react-aria-components";
+import { twMerge as D } from "tailwind-merge";
+import { tv as _ } from "tailwind-variants";
+import $ from "../../../hooks/use-id.js";
+import { Icon as k } from "../../icon/Icon.js";
+import { navItemBase as z } from "./NavItem.js";
+const H = _({
+  extend: z,
+  slots: {
+    caret: "uy-transition-transform uy-duration-150 uy-delay-25 uy-ease-linear motion-reduce:transition-none",
+    contentWrapper: "uy-transition-[max-height] uy-duration-200 uy-ease-linear motion-reduce:transition-none",
+    content: "uy-list-none uy-flex uy-flex-col uy-gap-50 uy-transition-opacity uy-duration-150 uy-delay-25 uy-ease-linear"
+  },
+  variants: {
+    expanded: {
+      true: {
+        caret: "uy-rotate-180",
+        contentWrapper: "uy-max-h-[1000px] uy-overflow-visible",
+        label: "uy-typography-body-strong",
+        content: "uy-opacity-100 uy-visible"
+      },
+      false: {
+        caret: "uy-rotate-0",
+        contentWrapper: "uy-max-h-0 uy-overflow-hidden",
+        content: "uy-opacity-0 uy-invisible uy-pointer-events-none",
+        label: "uy-typography-body"
+      }
+    }
+  }
+});
+function M({
+  children: y,
+  label: p,
+  prefix: i,
+  suffix: m,
+  defaultExpanded: f = !1,
+  isExpanded: l,
+  onToggle: n,
+  ...x
+}) {
+  const u = $(), [h, b] = G(f), r = l !== void 0, e = r ? l : h, v = j(() => {
+    r || b((t) => !t), n == null || n(!e);
+  }, [r, e, n]), N = s.Children.map(y, (t) => s.isValidElement(t) ? s.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
+    base: I,
+    prefix: g,
+    label: w,
+    suffix: E,
+    content: S,
+    contentWrapper: C,
+    caret: W
+  } = H({ level: 0, expanded: e });
+  return /* @__PURE__ */ o("li", { className: "uy-flex uy-flex-col uy-gap-50", children: [
+    /* @__PURE__ */ o(
+      B,
+      {
+        id: c,
+        className: D(I(), "uy-w-full"),
+        onPress: v,
+        "aria-expanded": e,
+        "aria-controls": d,
+        ...x,
+        children: [
+          i && /* @__PURE__ */ a("span", { className: g(), children: i({ isExpanded: e }) }),
+          /* @__PURE__ */ a("span", { className: w(), children: p }),
+          /* @__PURE__ */ o("span", { className: E(), role: "presentation", children: [
+            m,
+            /* @__PURE__ */ a(
+              k,
+              {
+                src: "CaretDownOutlined",
+                alt: "expand group",
+                size: 20,
+                className: W(),
+                color: "inherit"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: C(),
+        style: { maxHeight: e ? 1e3 : 0 },
+        children: /* @__PURE__ */ a(
+          "ul",
+          {
+            id: d,
+            className: S(),
+            "aria-labelledby": c,
+            "aria-hidden": !e,
+            children: N
+          }
+        )
+      }
+    )
+  ] });
+}
+M.displayName = "NavGroup";
+export {
+  M as NavGroup
+};