@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/badge/parts/BadgeDot.js

@@ -0,0 +1,84 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+const n = c({
+  slots: {
+    root: "uy:inline-flex uy:shrink-0 uy:items-center uy:justify-center",
+    dot: "uy:size-125 uy:rounded-full"
+  },
+  variants: {
+    color: {
+      primary: {
+        dot: "uy:bg-surface-primary"
+      },
+      "primary.low": {
+        dot: "uy:bg-surface-primary-low"
+      },
+      "neutral.lowest": {
+        dot: "uy:bg-surface-neutral-low"
+      },
+      "neutral.highest": {
+        dot: "uy:bg-surface-neutral-highest"
+      },
+      danger: {
+        dot: "uy:bg-surface-danger"
+      },
+      "danger.low": {
+        dot: "uy:bg-surface-danger-low"
+      },
+      warning: {
+        dot: "uy:bg-surface-warning"
+      },
+      "warning.low": {
+        dot: "uy:bg-surface-warning-low"
+      },
+      success: {
+        dot: "uy:bg-surface-success"
+      },
+      "success.low": {
+        dot: "uy:bg-surface-success-low"
+      },
+      info: {
+        dot: "uy:bg-surface-info"
+      },
+      "info.low": {
+        dot: "uy:bg-surface-info-low"
+      },
+      "decorative-teal": {
+        dot: "uy:bg-surface-decorative-teal"
+      },
+      "decorative-purple": {
+        dot: "uy:bg-surface-decorative-purple"
+      },
+      "decorative-plum": {
+        dot: "uy:bg-surface-decorative-plum"
+      },
+      "decorative-orange": {
+        dot: "uy:bg-surface-decorative-orange"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "decorative-teal"
+  }
+}), i = d(
+  ({ color: r, className: o, ...a }, t) => {
+    const { root: u, dot: s } = n({ color: r });
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        ...a,
+        "aria-hidden": "true",
+        className: u({ className: o }),
+        "data-dd-privacy": "allow",
+        "data-unity-component": "BadgeDot",
+        ref: t,
+        children: /* @__PURE__ */ e("span", { className: s() })
+      }
+    );
+  }
+);
+i.displayName = "BadgeDot";
+export {
+  i as BadgeDot
+};

package/dist/esm/components/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,137 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheet: 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 BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>> {
+    /**
+     * Controls whether the sheet can be dismissed by clicking outside or using escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * When true, pressing the Escape key will not close the sheet.
+     * This is useful when you need to prevent accidental dismissal.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * Controls the open state of the sheet 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 BottomSheet component provides a mobile-optimized interface for displaying content
+ * that slides up from the bottom of the screen. It's ideal for secondary tasks and supplementary
+ * information without leaving the current context.
+ *
+ * This component is specifically designed as a bottom-anchored variant, unlike the SidePanel
+ * which adapts to different viewports.
+ *
+ * Control the sheet using either uncontrolled mode with `defaultOpen` or controlled mode with
+ * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
+ * `isKeyboardDismissDisabled` props.
+ * @param {BottomSheetProps} props - The props for the BottomSheet component
+ * @see {@link BottomSheetProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   BottomSheet,
+ *   BottomSheetHeader,
+ *   BottomSheetContent,
+ *   BottomSheetFooter,
+ *   Button,
+ *   DialogTrigger
+ * } from '@payfit/unity-components'
+ *
+ * // Uncontrolled example
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open bottom sheet</Button>
+ *       <BottomSheet>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button variant="secondary">Cancel</Button>
+ *           <Button variant="primary">Save</Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </DialogTrigger>
+ *   )
+ * }
+ *
+ * // Controlled example
+ * function ControlledExample() {
+ *   const [isOpen, setIsOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => setIsOpen(true)}>Open bottom sheet</Button>
+ *
+ *       <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button
+ *             variant="primary"
+ *             onPress={() => setIsOpen(false)}
+ *           >
+ *             Close
+ *           </Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheet };

package/dist/esm/components/bottom-sheet/BottomSheet.js

@@ -0,0 +1,69 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { Dialog as h } from "react-aria-components/Dialog";
+import { ModalOverlay as p, Modal as x } from "react-aria-components/Modal";
+import { BottomSheetDragIndicator as w } from "./parts/BottomSheetDragIndicator.js";
+const g = c({
+  slots: {
+    overlay: [
+      "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
+      "uy:backdrop-blur-sm uy:bg-utility-backdrop/65",
+      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
+    ],
+    wrapper: [
+      "uy:w-full uy:md:max-w-[50svw]",
+      "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:md:left-0 uy:md:right-0 uy:md:mx-auto uy:z-[100]",
+      "uy:bg-surface-neutral uy:rounded-t-200",
+      "uy:shadow-flying",
+      "uy:flex uy:flex-col uy:max-h-[95svh]",
+      "uy:overflow-hidden",
+      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out"
+    ],
+    content: [
+      "uy:flex uy:flex-col uy:h-full uy:min-h-[40svh] uy:overflow-hidden uy:outline-none"
+    ]
+  }
+}), v = s(
+  ({
+    children: e,
+    isOpen: o,
+    onOpenChange: a,
+    defaultOpen: u,
+    isDismissable: r = !0,
+    isKeyboardDismissDisabled: y = !1,
+    ...i
+  }, l) => {
+    const { overlay: d, wrapper: m, content: n } = g();
+    return /* @__PURE__ */ t(
+      p,
+      {
+        className: d(),
+        isOpen: o,
+        onOpenChange: a,
+        defaultOpen: u,
+        isDismissable: r,
+        isKeyboardDismissDisabled: y,
+        children: /* @__PURE__ */ f(
+          x,
+          {
+            "data-dd-privacy": "allow",
+            ...i,
+            ref: l,
+            className: m(),
+            "data-unity-bottom-sheet": !0,
+            children: [
+              /* @__PURE__ */ t(w, {}),
+              /* @__PURE__ */ t(h, { className: n(), children: e })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+v.displayName = "BottomSheet";
+export {
+  v as BottomSheet,
+  g as bottomSheet
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.d.ts

@@ -0,0 +1,56 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheetContent: 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 BottomSheetContentProps extends PropsWithChildren<VariantProps<typeof bottomSheetContent>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetContent` component renders the main content area of a bottom sheet.
+ * It takes up the majority of the space between the header and footer components
+ * The content is scrollable when it exceeds the available space.
+ * @component
+ * @param {BottomSheetContentProps} props - The props for the `BottomSheetContent` component
+ * @example
+ * ```tsx
+ * import { BottomSheetContent } from '@payfit/unity-components'
+ *
+ * <BottomSheetContent>
+ *   Your panel content here
+ * </BottomSheetContent>
+ * ```
+ * @see {@link BottomSheetContentProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheetContent: import('react').ForwardRefExoticComponent<BottomSheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetContent };

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+const s = n({
+  slots: {
+    base: [
+      "uy:bg-surface-neutral uy:typography-body uy:text-content-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 = y(
+  ({ children: o, ...t }, l) => {
+    const { base: r, scroller: u } = s();
+    return /* @__PURE__ */ e("section", { ref: l, className: r(), ...t, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });
+  }
+);
+f.displayName = "BottomSheetContent";
+export {
+  f as BottomSheetContent,
+  s as bottomSheetContent
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.d.ts

@@ -0,0 +1,40 @@
+export declare const bottomSheetDragIndicator: 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 BottomSheetDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomSheetDragIndicator {
+    var displayName: string;
+}

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.js

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

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.d.ts

@@ -0,0 +1,27 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheetFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface BottomSheetFooterProps extends PropsWithChildren<VariantProps<typeof bottomSheetFooter>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetFooter` component renders the footer section of a bottom sheet.
+ * 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 {BottomSheetFooterProps} props - The props for the `BottomSheetFooter` component
+ * @example
+ * ```tsx
+ * import { BottomSheetFooter, Button } from '@payfit/unity-components'
+ *
+ * <BottomSheetFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </BottomSheetFooter>
+ * ```
+ * @see {@link BottomSheetFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/navigation-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const BottomSheetFooter: import('react').ForwardRefExoticComponent<BottomSheetFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetFooter };

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.js

@@ -0,0 +1,28 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+const s = a({
+  base: [
+    "uy:py-150 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:border-t uy:border-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"
+  ]
+}), m = y(
+  ({ children: o, className: t, ...e }, r) => /* @__PURE__ */ u(
+    "footer",
+    {
+      ref: r,
+      className: s({ class: t }),
+      ...e,
+      children: o
+    }
+  )
+);
+m.displayName = "BottomSheetFooter";
+export {
+  m as BottomSheetFooter,
+  s as bottomSheetFooter
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.d.ts

@@ -0,0 +1,65 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheetHeader: 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;
+            buttonContainer?: 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;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: 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;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface BottomSheetHeaderProps extends PropsWithChildren<VariantProps<typeof bottomSheetHeader>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetHeader` 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 {BottomSheetHeaderProps} props - The props for the `BottomSheetHeader` component
+ * @example
+ * ```tsx
+ * import { BottomSheetHeader } from '@payfit/unity-components'
+ *
+ * <BottomSheetHeader>Title of the panel</BottomSheetHeader>
+ * ```
+ * @see {@link BottomSheetHeaderProps} 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 BottomSheetHeader: import('react').ForwardRefExoticComponent<BottomSheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetHeader };

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { Heading as c } from "react-aria-components/Heading";
+import { CircularIconButton as m } from "../../icon-button/CircularIconButton.js";
+const d = i({
+  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:w-full"],
+    heading: [
+      "uy:typography-h3 uy:text-center uy:text-content-neutral uy:truncate",
+      "uy:flex-1 uy:min-w-0"
+    ],
+    buttonContainer: ["uy:flex-shrink-0 uy:flex-grow-0 uy:w-[28px]"]
+  }
+}), f = y(
+  ({ children: o, ...r }, n) => {
+    const { base: u, content: l, heading: a, buttonContainer: t } = d();
+    return /* @__PURE__ */ e("header", { ref: n, className: u(), ...r, children: /* @__PURE__ */ s("div", { className: l(), children: [
+      /* @__PURE__ */ e("div", { className: t() }),
+      /* @__PURE__ */ e(c, { slot: "title", className: a(), children: o }),
+      /* @__PURE__ */ e("div", { className: t(), children: /* @__PURE__ */ e(
+        m,
+        {
+          asElement: "button",
+          slot: "close",
+          icon: "CloseOutlined",
+          title: "Close",
+          size: "large",
+          color: "content.neutral.low"
+        }
+      ) })
+    ] }) });
+  }
+);
+f.displayName = "BottomSheetHeader";
+export {
+  f as BottomSheetHeader,
+  d as bottomSheetHeader
+};

package/dist/esm/components/breadcrumbs/Breadcrumbs.context.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
+interface BreadcrumbsContextValue {
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+    isMobile: boolean;
+    isStaticApi: boolean;
+}
+export declare const BreadcrumbsContext: import('react').Context<BreadcrumbsContextValue>;
+export declare function BreadcrumbsProvider({ children, wrap, isMobile, isStaticApi, }: PropsWithChildren<BreadcrumbsContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useBreadcrumbsContext(): BreadcrumbsContextValue;
+export {};