@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/side-panel/SidePanel.d.ts

@@ -1,142 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const sidePanel: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface SidePanelProps extends PropsWithChildren<VariantProps<typeof sidePanel>> {
-    /**
-     * Controls whether the panel can be dismissed by clicking outside or using escape key.
-     * @default true
-     */
-    isDismissable?: boolean;
-    /**
-     * When true, pressing the Escape key will not close the panel.
-     * This is useful when you need to prevent accidental dismissal.
-     * @default false
-     */
-    isKeyboardDismissDisabled?: boolean;
-    /**
-     * Controls the open state of the panel in controlled mode.
-     * Must be used together with `onOpenChange`.
-     */
-    isOpen?: boolean;
-    /**
-     * Sets the initial open state in uncontrolled mode.
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * Callback fired when the open state changes.
-     * Required when using controlled mode with `isOpen`.
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-    /**
-     * If true, scroll locking will be disabled, allowing background scrolling while the panel is open.
-     * **Requires** controlled mode with `isOpen`/`onOpenChange`.
-     * @default false
-     */
-    disableScrollLocking?: boolean;
-}
-/**
- * The SidePanel component provides contextual space for supplementary content without fully
- * interrupting the user's workflow. It slides in from the right on desktop and from the bottom on mobile.
- *
- * You can use SidePanel to display detailed information, forms, or secondary actions while keeping
- * the main interface visible and accessible. It's ideal for multi-step processes, editing items in a list,
- * or displaying contextual details.
- *
- * Control the panel using either uncontrolled mode with `defaultOpen` or controlled mode with
- * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
- * `isKeyboardDismissDisabled` props.
- * @param {SidePanelProps} props - The props for the SidePanel component
- * @see {@link SidePanelProps} for all available props
- * @example
- * ```tsx
- * import {
- *   SidePanel,
- *   SidePanelHeader,
- *   SidePanelContent,
- *   SidePanelFooter,
- *   Button
- * } from '@payfit/unity-components'
- *
- * // Uncontrolled example
- * function BasicExample() {
- *   return (
- *     <DialogTrigger>
- *       <Button>Open panel</Button>
- *       <SidePanel>
- *         <SidePanelHeader>Panel title</SidePanelHeader>
- *         <SidePanelContent>Your content here</SidePanelContent>
- *         <SidePanelFooter>
- *           <Button variant="secondary">Cancel</Button>
- *           <Button variant="primary">Save</Button>
- *         </SidePanelFooter>
- *       </SidePanel>
- *     </DialogTrigger>
- *   )
- * }
- *
- * // Controlled example
- * function ControlledExample() {
- *   const [isOpen, setIsOpen] = useState(false)
- *
- *   return (
- *     <>
- *       <Button onPress={() => setIsOpen(true)}>Open panel</Button>
- *
- *       <SidePanel isOpen={isOpen} onOpenChange={setIsOpen}>
- *         <SidePanelHeader>Panel title</SidePanelHeader>
- *         <SidePanelContent>Your content here</SidePanelContent>
- *         <SidePanelFooter>
- *           <Button
- *             variant="primary"
- *             onPress={() => setIsOpen(false)}
- *           >
- *             Close
- *           </Button>
- *         </SidePanelFooter>
- *       </SidePanel>
- *     </>
- *   )
- * }
- * ```
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
- */
-declare const SidePanel: import('react').ForwardRefExoticComponent<SidePanelProps & import('react').RefAttributes<HTMLDivElement>>;
-export { SidePanel };

package/dist/esm/components/side-panel/SidePanel.js

@@ -1,71 +0,0 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as c, useEffect as g } from "react";
-import { uyTv as x } from "@payfit/unity-themes";
-import { Dialog as h } from "react-aria-components/Dialog";
-import { ModalOverlay as p, Modal as v } from "react-aria-components/Modal";
-import { SidePanelDragIndicator as w } from "./parts/SidePanelDragIndicator.js";
-const N = x({
-  slots: {
-    overlay: [
-      "uy:md:bg-gradient-to-r uy:md:from-grayscale-l12/0 uy:md:to-grayscale-l12/10 uy:md:from-70% uy:md:via-100%",
-      "uy:fixed uy:inset-0 uy:isolate uy:z-30",
-      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
-    ],
-    wrapper: [
-      "uy:w-full uy:md:w-[400px]",
-      "uy:fixed uy:bottom-0 uy:md:inset-y-200 uy:md:right-200",
-      "uy:bg-surface-neutral uy:rounded-t-200 uy:md:rounded-200 uy:shadow-flying",
-      "uy:flex uy:flex-col uy:h-[95svh] uy:md:max-h-[calc(100vh-2rem)]",
-      "uy:overflow-hidden",
-      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out uy:md:data-[entering]:animate-slide-right-fade-in uy:md:data-[exiting]:animate-slide-right-fade-out"
-    ],
-    content: [
-      "uy:flex uy:flex-col uy:h-full uy:overflow-hidden uy:outline-none"
-    ]
-  }
-}), P = c(
-  ({
-    children: o,
-    isOpen: e,
-    onOpenChange: u,
-    defaultOpen: a,
-    isDismissable: i = !0,
-    isKeyboardDismissDisabled: r = !1,
-    disableScrollLocking: d = !1,
-    ...y
-  }, l) => {
-    const { overlay: n, wrapper: m, content: f } = N();
-    return g(() => {
-      d && (e ?? a) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
-    }, [d, e, a]), /* @__PURE__ */ t(
-      p,
-      {
-        className: n(),
-        isOpen: e,
-        onOpenChange: u,
-        defaultOpen: a,
-        isDismissable: i,
-        isKeyboardDismissDisabled: r,
-        children: /* @__PURE__ */ s(
-          v,
-          {
-            "data-dd-privacy": "allow",
-            ...y,
-            ref: l,
-            className: m(),
-            "data-unity-side-panel": !0,
-            children: [
-              /* @__PURE__ */ t(w, {}),
-              /* @__PURE__ */ t(h, { className: f(), children: o })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-P.displayName = "SidePanel";
-export {
-  P as SidePanel,
-  N as sidePanel
-};

package/dist/esm/components/side-panel/parts/SidePanelContent.d.ts

@@ -1,57 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const sidePanelContent: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    scroller: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    scroller: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    scroller: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface SidePanelContentProps extends PropsWithChildren<VariantProps<typeof sidePanelContent>> {
-    className?: string;
-}
-/**
- * The `SidePanelContent` component renders the main content area of a side panel.
- * It takes up the majority of the space between the header and footer components
- * and adjusts for both mobile (bottom sheet) and desktop (side panel) views.
- * The content is scrollable when it exceeds the available space.
- * @component
- * @param {SidePanelContentProps} props - The props for the `SidePanelContent` component
- * @example
- * ```tsx
- * import { SidePanelContent } from '@payfit/unity-components'
- *
- * <SidePanelContent>
- *   Your panel content here
- * </SidePanelContent>
- * ```
- * @see {@link SidePanelContentProps} for all available props
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
- */
-declare const SidePanelContent: import('react').ForwardRefExoticComponent<SidePanelContentProps & import('react').RefAttributes<HTMLDivElement>>;
-export { SidePanelContent };

package/dist/esm/components/side-panel/parts/SidePanelContent.js

@@ -1,26 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-const y = t({
-  slots: {
-    base: [
-      "uy:bg-surface-neutral",
-      "uy:flex uy:flex-col uy:flex-1 uy:min-h-0 uy:overflow-hidden",
-      "uy:w-full"
-    ],
-    scroller: [
-      "uy:flex-1 uy:overflow-y-auto uy:overflow-x-hidden uy:p-300",
-      "uy:h-full uy:min-h-0"
-    ]
-  }
-}), a = s(
-  ({ children: o, ...l }, r) => {
-    const { base: n, scroller: u } = y();
-    return /* @__PURE__ */ e("section", { ref: r, className: n(), ...l, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });
-  }
-);
-a.displayName = "SidePanelContent";
-export {
-  a as SidePanelContent,
-  y as sidePanelContent
-};

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.d.ts

@@ -1,40 +0,0 @@
-export declare const sidePanelDragIndicator: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    indicator: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    indicator: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    indicator: string;
-}, undefined, unknown, unknown, undefined>>;
-/**
- * A drag indicator component that connects to the overlay state context and
- * provides swipe-to-dismiss functionality for the SidePanel.
- * @internal
- */
-export declare function SidePanelDragIndicator(): import("react/jsx-runtime").JSX.Element;
-export declare namespace SidePanelDragIndicator {
-    var displayName: string;
-}

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.js

@@ -1,66 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as g, useContext as x } from "react";
-import { uyTv as D } from "@payfit/unity-themes";
-import { useDrag as b } from "@use-gesture/react";
-import { OverlayTriggerStateContext as h } from "react-aria-components/Dialog";
-import { useBreakpointListener as v } from "../../../hooks/use-breakpoint-listener.js";
-const P = D({
-  slots: {
-    base: [
-      "uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500",
-      "uy:cursor-grab uy:touch-action-none"
-    ],
-    indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
-  }
-}), S = 100;
-function T() {
-  const r = g(null), n = x(h), s = v(), { base: a, indicator: i } = P(), l = s === "xs" || s === "sm", u = b(
-    (c) => {
-      const {
-        movement: [I, e],
-        direction: [N, d],
-        intentional: m,
-        cancel: f,
-        last: y,
-        event: p
-      } = c;
-      if (!l) {
-        f();
-        return;
-      }
-      p.preventDefault();
-      const t = r.current?.closest(
-        "[data-unity-side-panel]"
-      );
-      if (t) {
-        if (e < 0) {
-          t.style.transform = "translate3d(0, 0, 0)";
-          return;
-        }
-        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", y && m && (e > S || d > 0 ? n && setTimeout(() => {
-          n.close();
-        }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
-      }
-    },
-    {
-      axis: "y",
-      filterTaps: !0,
-      threshold: 5
-    }
-  );
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: a(),
-      "aria-hidden": "true",
-      ref: r,
-      ...u(),
-      children: /* @__PURE__ */ o("div", { className: i() })
-    }
-  );
-}
-T.displayName = "SidePanelDragIndicator";
-export {
-  T as SidePanelDragIndicator,
-  P as sidePanelDragIndicator
-};

package/dist/esm/components/side-panel/parts/SidePanelFooter.d.ts

@@ -1,27 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
-export interface SidePanelFooterProps extends PropsWithChildren<VariantProps<typeof sidePanelFooter>> {
-    className?: string;
-}
-/**
- * The `SidePanelFooter` component renders the footer section of a side panel.
- * It provides a space for action buttons and stays fixed at the bottom of the panel.
- * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
- * @component
- * @param {SidePanelFooterProps} props - The props for the `SidePanelFooter` component
- * @example
- * ```tsx
- * import { SidePanelFooter, Button } from '@payfit/unity-components'
- *
- * <SidePanelFooter>
- *   <Button variant="secondary">Cancel</Button>
- *   <Button>Save</Button>
- * </SidePanelFooter>
- * ```
- * @see {@link SidePanelFooterProps} for all available props
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
- */
-declare const SidePanelFooter: import('react').ForwardRefExoticComponent<SidePanelFooterProps & import('react').RefAttributes<HTMLDivElement>>;
-export { SidePanelFooter };

package/dist/esm/components/side-panel/parts/SidePanelFooter.js

@@ -1,29 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as i, Children as a, isValidElement as m, cloneElement as l } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
-import { useBreakpointListener as f } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as d } from "../../button/Button.js";
-import { DialogButton as b } from "../../dialog/parts/DialogActions/DialogButton.js";
-const c = p({
-  base: [
-    "uy:py-200 uy:px-300 uy:w-full",
-    "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0 uy:flex-col uy:md:flex-row",
-    "uy:bg-surface-neutral uy:rounded-bl-200 uy:rounded-br-200 uy:border-t uy:border-solid uy:border-t-solid uy:border-border-neutral",
-    "uy:sticky uy:bottom-0 uy:z-10",
-    "uy:mt-auto",
-    "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
-  ]
-}), x = i(
-  ({ children: r, ...t }, u) => {
-    const o = f(), n = o === "xs" || o === "sm", y = a.map(r, (e) => m(e) && (e.type === d || e.type === b) ? l(e, {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      size: n ? "full" : e.props.size
-    }) : e);
-    return /* @__PURE__ */ s("footer", { ref: u, className: c(), ...t, children: y });
-  }
-);
-x.displayName = "SidePanelFooter";
-export {
-  x as SidePanelFooter,
-  c as sidePanelFooter
-};

package/dist/esm/components/side-panel/parts/SidePanelHeader.d.ts

@@ -1,59 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface SidePanelHeaderProps extends PropsWithChildren<VariantProps<typeof sidePanelHeader>> {
-    className?: string;
-}
-/**
- * The `SidePanelHeader` component renders the header section of a side panel.
- * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
- * @component
- * @param {SidePanelHeaderProps} props - The props for the `SidePanelHeader` component
- * @example
- * ```tsx
- * import { SidePanelHeader } from '@payfit/unity-components'
- *
- * <SidePanelHeader>Title of the panel</SidePanelHeader>
- * ```
- * @see {@link SidePanelHeaderProps} for all available props
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
- */
-declare const SidePanelHeader: import('react').ForwardRefExoticComponent<SidePanelHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
-export { SidePanelHeader };

package/dist/esm/components/side-panel/parts/SidePanelHeader.js

@@ -1,43 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { uyTv as y } from "@payfit/unity-themes";
-import { Heading as i } from "react-aria-components/Heading";
-import { CircularIconButton as c } from "../../icon-button/CircularIconButton.js";
-const d = y({
-  // add the component styles
-  slots: {
-    base: [
-      "uy:py-200 uy:px-300 uy:w-full",
-      "uy:flex uy:flex-col uy:shrink-0",
-      "uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
-      "uy:sticky uy:top-0 uy:z-10"
-    ],
-    content: ["uy:flex uy:items-center uy:justify-between uy:w-full"],
-    heading: [
-      "uy:typography-h2 uy:md:typography-h3 uy:text-content-neutral uy:truncate"
-    ]
-  }
-}), m = s(
-  ({ children: t, ...o }, r) => {
-    const { base: u, content: n, heading: l } = d();
-    return /* @__PURE__ */ e("header", { ref: r, className: u(), ...o, children: /* @__PURE__ */ a("div", { className: n(), children: [
-      /* @__PURE__ */ e(i, { slot: "title", className: l(), children: t }),
-      /* @__PURE__ */ e(
-        c,
-        {
-          asElement: "button",
-          slot: "close",
-          icon: "CloseOutlined",
-          title: "Close",
-          size: "large",
-          color: "content.neutral.low"
-        }
-      )
-    ] }) });
-  }
-);
-m.displayName = "SidePanelHeader";
-export {
-  m as SidePanelHeader,
-  d as sidePanelHeader
-};

package/dist/esm/components/skip-links/SkipLinks.d.ts

@@ -1,79 +0,0 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export interface SkipLinksProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-    /** Optional label for the skip links navigation. Defaults to "Skip to:" */
-    label?: string;
-}
-export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> {
-    /** The target element ID to skip to */
-    targetId: string;
-}
-/**
- * SkipLinks component provides keyboard navigation shortcuts to important sections of the page
- *
- * The SkipLinks component creates accessible navigation shortcuts that appear when focused,
- * allowing keyboard users to quickly jump to important sections like main content, toolbars,
- * or action areas. It follows WCAG guidelines for skip navigation.
- * @param props - The props for the SkipLinks component
- * @param props.label - Optional label for the skip links navigation section
- * @param props.children - SkipLink components
- * @example
- * ```tsx
- * import { SkipLinks, SkipLink } from '@payfit/unity-components'
- *
- * function TableWithActions() {
- *   return (
- *     <div>
- *       <SkipLinks label="Quick navigation:">
- *         <SkipLink targetId="main-content">
- *           Skip to main content
- *         </SkipLink>
- *         <SkipLink targetId="table-actions-toolbar">
- *           Skip to actions
- *         </SkipLink>
- *       </SkipLinks>
- *       <div id="main-content" tabIndex={-1}>
- *         Main content
- *       </div>
- *       <div id="table-actions-toolbar" tabIndex={-1}>
- *         Action bar content
- *       </div>
- *     </div>
- *   )
- * }
- * ```
- * @remarks
- * - Skip links are visually hidden by default and become visible when focused
- * - Each link should target an element with a valid ID and tabIndex={-1}
- * - The component follows WCAG 2.1 guidelines for skip navigation
- * @see {@link SkipLinksProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/skip-links GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
- */
-declare const SkipLinks: import('react').ForwardRefExoticComponent<SkipLinksProps & import('react').RefAttributes<HTMLElement>>;
-/**
- * SkipLink component represents a single skip navigation link
- *
- * The SkipLink component should be used as a child of SkipLinks to create individual
- * navigation shortcuts. It automatically handles focus management and accessibility.
- * @param props - The props for the SkipLink component
- * @param props.targetId - The ID of the target element to skip to
- * @param props.children - The link text content
- * @example
- * ```tsx
- * import { SkipLink } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <SkipLink targetId="main-content">
- *       Skip to main content
- *     </SkipLink>
- *   )
- * }
- * ```
- * @remarks
- * - Should only be used as a child of SkipLinks component
- * - Automatically focuses the target element when activated
- * @see {@link SkipLinkProps} for all available props
- */
-declare const SkipLink: import('react').ForwardRefExoticComponent<SkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
-export { SkipLinks, SkipLink };