@payfit/unity-components 0.0.0-alpha.9 → 1.0.0

package/dist/esm/components/selectable-button-group/parts/SelectableButton.mjs

@@ -1,99 +0,0 @@
-import { jsxs as i, jsx as o, Fragment as g } from "react/jsx-runtime";
-import { forwardRef as v, useRef as h, useContext as x } from "react";
-import { useToggleButtonGroupItem as w, mergeProps as B } from "react-aria";
-import { tv as I } from "tailwind-variants";
-import { Icon as S } from "../../icon/Icon.mjs";
-import { Spinner as N } from "../../spinner/Spinner.mjs";
-import { SelectableButtonGroupContext as G } from "../SelectableButtonGroup.context.mjs";
-const P = I({
-  // add the component styles
-  slots: {
-    base: [
-      "uy-group uy-border uy-border-solid uy-rounded-75 uy-py-100 uy-flex uy-gap-50 uy-items-center",
-      // default background and border
-      "uy-border-border-form-enabled uy-bg-surface-form-enabled",
-      // pseudo-states
-      "hover:uy-bg-surface-form-hover hover:uy-border-border-form-hover",
-      "active:uy-bg-surface-form-pressed active:uy-border-border-form-pressed",
-      "focus-visible:uy-bg-surface-form-focus focus-visible:uy-border-border-form-focus",
-      "focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",
-      // Pressed
-      "data-[pressed=true]:uy-bg-surface-form-pressed data-[pressed=true]:uy-border-border-form-pressed data-[pressed=true]:uy-text-content-form-pressed",
-      // selected
-      "data-[selected=true]:uy-bg-surface-form-selected data-[selected=true]:uy-border-border-form-selected data-[selected=true]:uy-text-content-form-selected",
-      // Disabled
-      "disabled:uy-bg-surface-form-disabled disabled:uy-border-border-form-disabled disabled:uy-text-content-form-disabled disabled:uy-cursor-not-allowed",
-      // Loading
-      "data-[loading=true]:uy-bg-surface-form-disabled data-[loading=true]:uy-border-border-form-disabled data-[loading=true]:uy-text-content-form-disabled data-[loading=true]:uy-cursor-wait"
-    ],
-    icon: ["uy-p-25", "data-[loading=true]:uy-hidden"],
-    label: ["uy-typography-action"]
-  },
-  variants: {
-    hasIcon: {
-      true: {
-        base: "uy-pl-100 uy-pr-200"
-      },
-      false: {
-        base: "uy-px-200"
-      }
-    }
-  },
-  defaultVariants: {
-    hasIcon: !1
-  }
-}), R = v(
-  (t, n) => {
-    const s = h(null), a = x(G);
-    if (!a)
-      throw new Error(
-        "SelectableButton must be used within a ToggleButtonGroup component"
-      );
-    const { buttonProps: d, isPressed: c, isSelected: u } = w(
-      { id: t.value, ...t },
-      a,
-      s
-    ), { ref: b } = B({ ref: s }, { ref: n }), {
-      isDisabled: f = !1,
-      isLoading: e = !1,
-      prefixIcon: r,
-      children: l
-    } = t, { base: y, icon: m, label: p } = P({
-      hasIcon: !!r && !e
-    });
-    return /* @__PURE__ */ i(
-      "button",
-      {
-        "data-dd-privacy": "allow",
-        ...d,
-        ref: b,
-        className: y(),
-        disabled: d.disabled || f || e,
-        "data-loading": e ? !0 : void 0,
-        "data-pressed": c,
-        "data-selected": u,
-        "aria-busy": e,
-        children: [
-          r && !e && /* @__PURE__ */ o(
-            S,
-            {
-              src: u ? `${r}Filled` : `${r}Outlined`,
-              role: "presentation",
-              className: m(),
-              size: 20
-            }
-          ),
-          e ? /* @__PURE__ */ i(g, { children: [
-            /* @__PURE__ */ o(N, { label: "Loading", size: "small", color: "inherit" }),
-            /* @__PURE__ */ o("span", { className: "uy-sr-only", children: l })
-          ] }) : /* @__PURE__ */ o("span", { className: p(), children: l })
-        ]
-      }
-    );
-  }
-);
-R.displayName = "SelectableButton";
-export {
-  R as SelectableButton,
-  P as selectableButton
-};

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

@@ -1,152 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-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, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, {
-    [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, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, 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;
-}
-/**
- * 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.mjs

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

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

@@ -1,71 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-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, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, {
-    [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, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            scroller?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, 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.mjs

@@ -1,26 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { tv as s } from "tailwind-variants";
-const a = s({
-  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"
-    ]
-  }
-}), f = u(
-  ({ children: o, ...l }, r) => {
-    const { base: n, scroller: t } = a();
-    return /* @__PURE__ */ e("section", { ref: r, className: n(), ...l, children: /* @__PURE__ */ e("div", { className: t(), children: o }) });
-  }
-);
-f.displayName = "SidePanelContent";
-export {
-  f as SidePanelContent,
-  a as sidePanelContent
-};

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

@@ -1,54 +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, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, {
-    [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, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            indicator?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, 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.mjs

@@ -1,67 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useRef as x, useContext as D } from "react";
-import { useDrag as b } from "@use-gesture/react";
-import { OverlayTriggerStateContext as h } from "react-aria-components";
-import { tv as v } from "tailwind-variants";
-import { useBreakpointListener as P } from "../../../hooks/use-breakpoint-listener.mjs";
-const S = v({
-  slots: {
-    base: [
-      "md:uy-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"
-  }
-}), I = 100;
-function N() {
-  const r = x(null), n = D(h), s = P(), { base: i, indicator: l } = S(), u = s === "xs" || s === "sm", c = b(
-    (d) => {
-      var o;
-      const {
-        movement: [T, e],
-        direction: [E, m],
-        intentional: f,
-        cancel: y,
-        last: p,
-        event: g
-      } = d;
-      if (!u) {
-        y();
-        return;
-      }
-      g.preventDefault();
-      const t = (o = r.current) == null ? void 0 : o.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", p && f && (e > I || m > 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__ */ a(
-    "div",
-    {
-      className: i(),
-      "aria-hidden": "true",
-      ref: r,
-      ...c(),
-      children: /* @__PURE__ */ a("div", { className: l() })
-    }
-  );
-}
-N.displayName = "SidePanelDragIndicator";
-export {
-  N as SidePanelDragIndicator,
-  S as sidePanelDragIndicator
-};

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

@@ -1,27 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, 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.mjs

@@ -1,20 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { tv as y } from "tailwind-variants";
-const a = y({
-  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-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))] md:uy-pb-200"
-  ]
-}), d = t(
-  ({ children: e, ...r }, o) => /* @__PURE__ */ u("footer", { ref: o, className: a(), ...r, children: e })
-);
-d.displayName = "SidePanelFooter";
-export {
-  d as SidePanelFooter,
-  a as sidePanelFooter
-};

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

@@ -1,75 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    content: string[];
-    heading: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            heading?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, 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 };