@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/error-state/ErrorState.d.ts

@@ -1,208 +0,0 @@
-import { UnityIcon } from '@payfit/unity-icons';
-import { UnityIllustrationAsset } from '@payfit/unity-illustrations';
-import { ReactNode } from 'react';
-export declare const errorState: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            h1?: import('tailwind-merge').ClassNameValue;
-            h2?: import('tailwind-merge').ClassNameValue;
-            h3?: import('tailwind-merge').ClassNameValue;
-            h4?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            icon?: import('tailwind-merge').ClassNameValue;
-            description?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-            illustration?: import('tailwind-merge').ClassNameValue;
-            informationContainer?: import('tailwind-merge').ClassNameValue;
-            information?: import('tailwind-merge').ClassNameValue;
-            informationComponent?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            h1?: import('tailwind-merge').ClassNameValue;
-            h2?: import('tailwind-merge').ClassNameValue;
-            h3?: import('tailwind-merge').ClassNameValue;
-            h4?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            icon?: import('tailwind-merge').ClassNameValue;
-            description?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-            illustration?: import('tailwind-merge').ClassNameValue;
-            informationContainer?: import('tailwind-merge').ClassNameValue;
-            information?: import('tailwind-merge').ClassNameValue;
-            informationComponent?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    container: string[];
-    wrapper: string[];
-    base: string[];
-    illustration: string[];
-    icon: string[];
-    informationContainer: string[];
-    information: string[];
-    informationComponent: string[];
-    h1: string[];
-    h2: string[];
-    h3: string[];
-    h4: string[];
-    description: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            h1?: import('tailwind-merge').ClassNameValue;
-            h2?: import('tailwind-merge').ClassNameValue;
-            h3?: import('tailwind-merge').ClassNameValue;
-            h4?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            icon?: import('tailwind-merge').ClassNameValue;
-            description?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-            illustration?: import('tailwind-merge').ClassNameValue;
-            informationContainer?: import('tailwind-merge').ClassNameValue;
-            information?: import('tailwind-merge').ClassNameValue;
-            informationComponent?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    container: string[];
-    wrapper: string[];
-    base: string[];
-    illustration: string[];
-    icon: string[];
-    informationContainer: string[];
-    information: string[];
-    informationComponent: string[];
-    h1: string[];
-    h2: string[];
-    h3: string[];
-    h4: string[];
-    description: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    container: string[];
-    wrapper: string[];
-    base: string[];
-    illustration: string[];
-    icon: string[];
-    informationContainer: string[];
-    information: string[];
-    informationComponent: string[];
-    h1: string[];
-    h2: string[];
-    h3: string[];
-    h4: string[];
-    description: string[];
-}, undefined, unknown, unknown, undefined>>;
-interface ErrorStateBaseProps {
-    /**
-     * Callback function triggered when the main action button is pressed.
-     */
-    onButtonPress: () => void;
-    /**
-     * Custom label for the main action button. If not provided, uses default label from configuration.
-     * @default: Go to dashboard
-     */
-    buttonLabel?: string;
-    /**
-     * Custom main title for the error state. If not provided, uses default title from configuration.
-     * @default: Something went wrong
-     */
-    mainTitle?: ReactNode;
-    /**
-     * Custom main description for the error state. If not provided, uses default description from configuration.
-     */
-    mainDescription?: ReactNode;
-    /**
-     * Custom main description specifically for component-level display. If not provided, uses default from configuration.
-     * @default: Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible.
-     */
-    mainDescriptionComponent?: ReactNode;
-    /**
-     * Custom illustration to display. If not provided, uses default illustration from configuration.
-     * @default: Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible.
-     */
-    illustration?: UnityIllustrationAsset;
-    /**
-     * Custom icon to display. If not provided, uses default icon from configuration.
-     */
-    icon?: UnityIcon;
-    /**
-     * ARIA role for the error state container.
-     * @default "status"
-     */
-    role?: string;
-}
-interface KnownErrorStateProps extends ErrorStateBaseProps {
-    /**
-     * The error object containing the error message to display.
-     */
-    error: Error;
-    /**
-     * Additional description text to display alongside the error details.
-     * @default: Here's the technical error detail. If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:
-     */
-    detailDescription?: ReactNode;
-    /**
-     * Type identifier for known errors.
-     */
-    type: 'generic';
-}
-interface UnknownErrorStateProps extends ErrorStateBaseProps {
-    /**
-     * Custom label for the back button. If not provided, uses default label from configuration.
-     * @default: Back to dashboard
-     */
-    backButtonLabel?: ReactNode;
-    /**
-     * Must be undefined for unknown error states.
-     */
-    error: undefined;
-    /**
-     * Type identifier for unknown errors.
-     */
-    type: 'generic';
-}
-interface _404ErrorStateProps extends ErrorStateBaseProps {
-    /**
-     * Type identifier for 404 errors.
-     */
-    type: '404';
-    /**
-     * No error object needed for 404 states.
-     */
-    error?: never;
-}
-export type ErrorStateProps = KnownErrorStateProps | UnknownErrorStateProps | _404ErrorStateProps;
-/**
- * The `ErrorState` component displays error information with contextual messaging and actions.
- * It provides a consistent way to handle different types of errors (generic, 404) with appropriate visual feedback and user actions.
- * The component adapts its layout based on container size and error type, supporting multiple breakpoints for optimal user experience.
- * @param {ErrorStateProps} props - The props for the `ErrorState` component
- * @see {@link ErrorStateProps} for all available props
- * @example
- * ```tsx
- * import { ErrorState } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <ErrorState
- *       type="generic"
- *       error={new Error('Something went wrong')}
- *       onButtonPress={() => window.location.reload()}
- *       buttonLabel="Retry"
- *       mainTitle="Oops! Something went wrong"
- *       mainDescription="We encountered an unexpected error. Please try again."
- *     />
- *   )
- * }
- * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/feedback-errorstate--docs) • [Design docs](https://www.payfit.design/)
- */
-declare const ErrorState: import('react').ForwardRefExoticComponent<ErrorStateProps & import('react').RefAttributes<HTMLDivElement>>;
-export { ErrorState };

package/dist/esm/components/error-state/ErrorState.js

@@ -1,240 +0,0 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { forwardRef as J, useRef as K, useCallback as O } from "react";
-import { Illustration as U } from "@payfit/unity-illustrations";
-import { useIntl as V } from "react-intl";
-import { tv as W } from "tailwind-variants";
-import { useContainerQueryLevel as X } from "../../hooks/use-container-query-level.js";
-import { Button as h } from "../button/Button.js";
-import { Code as Y } from "../code/Code.js";
-import { Icon as Z } from "../icon/Icon.js";
-import { Text as r } from "../text/Text.js";
-import { initConfig as _ } from "./initConfig.js";
-import { Collapsible as $ } from "./parts/Collapsible.js";
-const ee = W({
-  slots: {
-    container: [
-      "uy:@container uy:w-full uy:h-full uy:content-center uy:flex-1"
-    ],
-    wrapper: [
-      "uy:border-solid uy:border-border-neutral uy:border uy:rounded-200 uy:p-300",
-      "uy:@section:py-600 uy:@section:px-auto",
-      "uy:@page:border-0 uy:@page:py-auto uy:@page:px-auto",
-      "uy:@app:border-0 uy:@app:py-auto uy:@app:px-auto"
-    ],
-    base: [
-      "uy:max-w-[704px] uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-250 uy:w-full uy:justify-self-center"
-    ],
-    illustration: [
-      "uy:@section:block",
-      //common but start from section level
-      "uy:hidden",
-      //component
-      "uy:@page:w-[200px]",
-      // page
-      "uy:@section:w-[200px]",
-      //section
-      "uy:@app:w-[240px]"
-      //app
-    ],
-    icon: [
-      "uy:bg-surface-neutral-lowest uy:rounded-125 uy:p-100",
-      //component
-      "uy:@section:hidden"
-      // others
-    ],
-    informationContainer: [
-      "uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-150 uy:text-center uy"
-    ],
-    information: [
-      "uy:hidden",
-      //component
-      "",
-      //page
-      "uy:@section:block"
-      //section
-    ],
-    informationComponent: [
-      "uy:block",
-      //component
-      "uy:@section:hidden"
-      // others
-    ],
-    h1: ["uy:hidden uy:@app:block"],
-    // only on app
-    h2: ["uy:hidden uy:@page:@max-app:block"],
-    // only on page
-    h3: ["uy:hidden uy:@section:@max-page:block"],
-    // only on section
-    h4: ["uy:block uy:@section:hidden"],
-    // only on component
-    description: ["uy:hidden uy:@section:block uy:@section:w-full"]
-  }
-}), ne = (t, n) => {
-  const a = t.detailDescription ?? n?.detailDescription;
-  return /* @__PURE__ */ u($, { children: [
-    /* @__PURE__ */ e("div", { className: "uy:mb-200", children: a }),
-    /* @__PURE__ */ e(Y, { children: t.error.message })
-  ] });
-}, te = (t, n) => {
-  const a = t.backButtonLabel ?? n?.backButtonLabel;
-  return /* @__PURE__ */ e("div", { className: "uy:mt-200 uy:@section:block uy:hidden", children: /* @__PURE__ */ e(
-    h,
-    {
-      onClick: () => {
-        window.history.go(-1);
-      },
-      color: "primary",
-      variant: "ghost",
-      children: a
-    }
-  ) });
-}, oe = J((t, n) => {
-  const {
-    icon: a,
-    illustration: b,
-    onButtonPress: v,
-    buttonLabel: g,
-    mainTitle: x,
-    mainDescription: k,
-    mainDescriptionComponent: w,
-    type: m,
-    error: C,
-    role: N = "status"
-  } = t, {
-    base: D,
-    container: E,
-    wrapper: B,
-    illustration: L,
-    icon: M,
-    informationContainer: j,
-    information: I,
-    informationComponent: T,
-    description: R,
-    h1: S,
-    h2: P,
-    h3: z,
-    h4: Q
-  } = ee(), c = V(), q = _(c), y = K(null), { level: d } = X({ ref: y }), A = O(
-    (s) => {
-      y.current = s, n && (typeof n == "function" ? n(s) : n.current = s);
-    },
-    [n]
-  );
-  let i = m === "404" ? "404" : "unknown";
-  m === "generic" && C && (i = "known");
-  const o = q.get(i), p = b ?? o?.illustration, f = a ?? o?.icon, F = g ?? o?.buttonLabel, l = x ?? o?.mainTitle, G = k ?? o?.mainDescription, H = w ?? o?.mainDescriptionComponent;
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      role: N,
-      className: E(),
-      ref: A,
-      "data-container-level": d,
-      children: /* @__PURE__ */ e("div", { className: B(), children: /* @__PURE__ */ u("div", { className: D(), children: [
-        p && /* @__PURE__ */ e(
-          U,
-          {
-            src: p,
-            variant: "picture",
-            alt: c.formatMessage({
-              id: "unity:component:error-state:common:illustration:alt",
-              defaultMessage: "Error states"
-            }),
-            className: L(),
-            isDecorative: !0
-          }
-        ),
-        f && /* @__PURE__ */ e(
-          Z,
-          {
-            src: f,
-            size: 24,
-            color: "content.neutral.low",
-            alt: c.formatMessage({
-              id: "unity:component:error-state:common:icon:alt",
-              defaultMessage: "Error states"
-            }),
-            className: M()
-          }
-        ),
-        /* @__PURE__ */ u("div", { className: j(), children: [
-          /* @__PURE__ */ e(
-            r,
-            {
-              asElement: "h1",
-              variant: "h1",
-              color: "content.neutral",
-              className: S(),
-              children: l
-            }
-          ),
-          /* @__PURE__ */ e(
-            r,
-            {
-              asElement: "h2",
-              variant: "h2",
-              color: "content.neutral",
-              className: P(),
-              children: l
-            }
-          ),
-          /* @__PURE__ */ e(
-            r,
-            {
-              asElement: "h3",
-              variant: "h3",
-              color: "content.neutral",
-              className: z(),
-              children: l
-            }
-          ),
-          /* @__PURE__ */ e(
-            r,
-            {
-              asElement: "h4",
-              variant: "h4",
-              color: "content.neutral",
-              className: Q(),
-              children: l
-            }
-          ),
-          /* @__PURE__ */ e(
-            r,
-            {
-              asElement: "p",
-              variant: "body",
-              color: "content.neutral.low",
-              className: I(),
-              children: G
-            }
-          ),
-          /* @__PURE__ */ e(
-            r,
-            {
-              asElement: "p",
-              variant: "body",
-              color: "content.neutral.low",
-              className: T(),
-              children: H
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          h,
-          {
-            variant: d === "component" ? "ghost" : "primary",
-            onPress: v,
-            children: F
-          }
-        ),
-        i === "unknown" && te(t, o),
-        i === "known" && /* @__PURE__ */ e("div", { className: R(), children: ne(t, o) })
-      ] }) })
-    }
-  );
-});
-oe.displayName = "ErrorState";
-export {
-  oe as ErrorState,
-  ee as errorState
-};

package/dist/esm/components/error-state/initConfig.d.ts

@@ -1,16 +0,0 @@
-import { UnityIcon } from '@payfit/unity-icons';
-import { UnityIllustrationAsset } from '@payfit/unity-illustrations';
-import { ReactNode } from 'react';
-import { IntlShape } from 'react-intl';
-export type ErrorStateVariant = 'known' | 'unknown' | '404';
-export interface ErrorStateConfig {
-    illustration: UnityIllustrationAsset;
-    icon: UnityIcon;
-    mainTitle: ReactNode;
-    mainDescription: ReactNode;
-    mainDescriptionComponent?: ReactNode;
-    buttonLabel: ReactNode;
-    detailDescription?: ReactNode;
-    backButtonLabel?: ReactNode;
-}
-export declare const initConfig: (intl: IntlShape) => Map<ErrorStateVariant, ErrorStateConfig>;

package/dist/esm/components/error-state/initConfig.js

@@ -1,149 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import t from "@payfit/unity-illustrations/assets/EmptyStateIncidentPanel";
-import a from "@payfit/unity-illustrations/assets/EmptyStateResearch";
-import { RawLink as n } from "../link/RawLink.js";
-const c = (e) => /* @__PURE__ */ new Map([
-  [
-    "known",
-    {
-      illustration: t,
-      icon: "WarningCircleOutlined",
-      mainTitle: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-title",
-          defaultMessage: "Something went wrong"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:known:main-description",
-          defaultMessage: "Please refresh the page or check your connection.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescriptionComponent: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-description-component",
-          defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      buttonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:button:label",
-          defaultMessage: "Go to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      detailDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:detail-description",
-          defaultMessage: "Here's the technical error detail.<br></br> <br></br>If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:"
-        },
-        {
-          br: () => /* @__PURE__ */ r("br", {}),
-          Link: (o) => /* @__PURE__ */ r(
-            n,
-            {
-              variant: "inline",
-              isExternal: !0,
-              color: "primary",
-              href: e.formatMessage({
-                id: "unity:component:common:customer-support:url"
-              }),
-              children: o
-            }
-          )
-        }
-      )
-    }
-  ],
-  [
-    "unknown",
-    {
-      illustration: t,
-      icon: "WarningCircleOutlined",
-      mainTitle: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-title",
-          defaultMessage: "Something went wrong"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:unknown:main-description",
-          defaultMessage: "Please refresh the page or try signing in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.<br></br>If the problem continues, please contact <Link>our customer support</Link>."
-        },
-        {
-          br: () => /* @__PURE__ */ r("br", {}),
-          Link: (o) => /* @__PURE__ */ r(
-            n,
-            {
-              variant: "inline",
-              isExternal: !0,
-              color: "primary",
-              href: e.formatMessage({
-                id: "unity:component:common:customer-support:url"
-              }),
-              children: o
-            }
-          )
-        }
-      ),
-      mainDescriptionComponent: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-description-component",
-          defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      buttonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:button:label",
-          defaultMessage: "Go to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      backButtonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:unknown:back-link:label",
-          defaultMessage: "Back to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      )
-    }
-  ],
-  [
-    "404",
-    {
-      illustration: a,
-      icon: "WarningCircleOutlined",
-      mainTitle: e.formatMessage(
-        {
-          id: "unity:component:error-state:404:main-title",
-          defaultMessage: "Sorry, we couldn’t find what you’re looking for"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:404:main-description",
-          defaultMessage: "This item may have been moved or deleted.<br></br>You can try searching for it manually or start again from your dashboard."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      buttonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:button:label",
-          defaultMessage: "Go to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      )
-    }
-  ]
-]);
-export {
-  c as initConfig
-};

package/dist/esm/components/error-state/parts/Collapsible.d.ts

@@ -1,59 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
-declare const collapsible: import('tailwind-variants').TVReturnType<{
-    isExpanded: {
-        true: {
-            icon: string;
-        };
-        false: {
-            icon: string;
-        };
-    };
-}, {
-    base: string[];
-    heading: string;
-    button: string[];
-    title: string;
-    icon: string;
-    content: string;
-}, undefined, {
-    isExpanded: {
-        true: {
-            icon: string;
-        };
-        false: {
-            icon: string;
-        };
-    };
-}, {
-    base: string[];
-    heading: string;
-    button: string[];
-    title: string;
-    icon: string;
-    content: string;
-}, import('tailwind-variants').TVReturnType<{
-    isExpanded: {
-        true: {
-            icon: string;
-        };
-        false: {
-            icon: string;
-        };
-    };
-}, {
-    base: string[];
-    heading: string;
-    button: string[];
-    title: string;
-    icon: string;
-    content: string;
-}, undefined, unknown, unknown, undefined>>;
-export interface CollapsibleProps extends PropsWithChildren<VariantProps<typeof collapsible>> {
-    children: ReactNode;
-}
-declare const Collapsible: {
-    ({ children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Collapsible };