@payfit/unity-components 1.1.0 → 1.2.0

package/dist/esm/components/error-state/parts/Collapsible.js

@@ -0,0 +1,67 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useContext as r } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import { Disclosure as c, DisclosurePanel as d, DisclosureStateContext as y, Heading as f, Button as p } from "react-aria-components";
+import { FormattedMessage as m } from "react-intl";
+import { Icon as h } from "../../icon/Icon.js";
+import { Text as b } from "../../text/Text.js";
+const n = u({
+  slots: {
+    base: [
+      "uy:w-full uy:rounded-50",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-2",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-solid",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-offset-2",
+      "uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-utility-focus-ring"
+    ],
+    heading: "uy:w-full",
+    button: [
+      "uy:flex uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer",
+      "uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"
+    ],
+    title: "uy:flex uy:grow uy:text-left uy:items-center uy:justify-center",
+    icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center",
+    content: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top-left uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0"
+  },
+  variants: {
+    isExpanded: {
+      true: {
+        icon: "uy:rotate-180"
+      },
+      false: {
+        icon: "uy:rotate-0"
+      }
+    }
+  }
+}), v = () => {
+  const e = r(y), { button: i, title: o, icon: a, heading: l } = n({
+    isExpanded: e?.isExpanded
+  });
+  return /* @__PURE__ */ t(f, { "data-dd-privacy": "allow", className: l(), children: /* @__PURE__ */ t(p, { className: i(), slot: "trigger", children: /* @__PURE__ */ s(b, { variant: "bodyStrong", className: o(), children: [
+    /* @__PURE__ */ t(
+      h,
+      {
+        src: "CaretDownOutlined",
+        className: a(),
+        role: "presentation"
+      }
+    ),
+    /* @__PURE__ */ t(
+      m,
+      {
+        id: "unity:component:error-state:collapsible:title",
+        defaultMessage: "Show details"
+      }
+    )
+  ] }) }) });
+}, w = ({ children: e, ...i }) => {
+  const { base: o, content: a } = n();
+  return /* @__PURE__ */ s(c, { "data-dd-privacy": "allow", ...i, className: o(), children: [
+    /* @__PURE__ */ t(v, {}),
+    /* @__PURE__ */ t(d, { "data-dd-privacy": "allow", className: a(), children: /* @__PURE__ */ t("div", { className: "uy:ml-400 uy:typography-body", children: e }) })
+  ] });
+};
+w.displayName = "Collapsible";
+export {
+  w as Collapsible
+};

package/dist/esm/components/form/Form.d.ts

@@ -1,25 +1,31 @@
-import { PropsWithChildren } from 'react';
+import { default as React, PropsWithChildren, Ref } from 'react';
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { FormProps as AriaFormProps } from 'react-aria-components';
 import { FieldErrors, UseFormReturn } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema, TFormValues } from '../../hooks/use-form.types.js';
 type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
-export interface FormProps<TSchema extends Schema, TForm extends TFormValues = ZodInfer<TSchema>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
+export interface FormProps<TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown> extends PropsWithChildren<AllowedAriaFormProps> {
     /** The form instance from react-hook-form */
-    form: UseFormReturn<TForm>;
+    form: UseFormReturn<TFormInputValues, any, TFormOutputs>;
     /** The schema to validate the form data */
     schema: TSchema;
     /** The operations to execute when the form is submitted and the input data is valid */
-    action: (values: TForm) => Promise<TActionResult> | TActionResult;
+    action: (values: TFormOutputs) => Promise<TActionResult> | TActionResult;
     /** Handle successful form submission (when the `action` callback resolves its promise or does not throw an error) */
-    onSuccess?: (result: TActionResult, data: TForm) => void;
+    onSuccess?: (result: TActionResult, data: TFormOutputs) => void;
     /** Handle form submission errors (when the `action` callback rejects its promise or throws an error) */
-    onError?: (error: unknown, data: TForm) => void;
+    onError?: (error: unknown, data: TFormOutputs) => void;
     /** Handle form validation errors (when form data is invalid) */
-    onInvalid?: (errors: FieldErrors) => void;
+    onInvalid?: (errors: FieldErrors<TFormInputValues>) => void;
     /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
     debug?: boolean;
 }
+type FormComponent = {
+    <TSchema extends Schema, TFormInputValues extends TFormValues = StandardSchemaV1.InferInput<TSchema>, TFormOutputs extends TFormValues = StandardSchemaV1.InferOutput<TSchema>, TActionResult = unknown>(props: FormProps<TSchema, TFormInputValues, TFormOutputs, TActionResult> & {
+        ref?: Ref<HTMLFormElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
 /**
  * The `Form` component provides full state management for complex forms with validation by following a schema-based approach.
  *
@@ -31,5 +37,5 @@ export interface FormProps<TSchema extends Schema, TForm extends TFormValues = Z
  * $ yarn add zod react-hook-form
  * ```
  */
-declare const Form: import('react').ForwardRefExoticComponent<FormProps<Schema, TFormValues, unknown> & import('react').RefAttributes<HTMLFormElement>>;
+declare const Form: FormComponent;
 export { Form };

package/dist/esm/components/form/Form.js

@@ -1,54 +1,57 @@
-import { jsx as m, jsxs as v, Fragment as x } from "react/jsx-runtime";
-import { forwardRef as F, Suspense as P, lazy as j } from "react";
-import { FormProvider as n } from "react-hook-form";
-import { UnityFormProvider as u } from "./Form.context.js";
-const D = j(
-  () => import("@hookform/devtools").then((e) => ({ default: e.DevTool }))
-), T = F(
-  ({
-    form: e,
-    schema: f,
-    onSuccess: r,
-    onError: i,
-    onInvalid: l,
-    action: p,
-    children: a,
-    className: d,
-    onReset: h,
-    debug: s = !1,
-    ...b
-  }, c) => {
-    const y = e.handleSubmit(
-      (t) => {
-        Promise.resolve().then(() => p(t)).then((o) => {
-          r == null || r(o, t);
-        }).catch((o) => {
-          i == null || i(o, t);
-        });
-      },
-      (t) => {
-        l == null || l(t);
+import { jsx as e, jsxs as v, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as F, Suspense as b, lazy as S } from "react";
+import { FormProvider as x } from "react-hook-form";
+import { UnityFormProvider as P } from "./Form.context.js";
+const j = S(
+  () => import("@hookform/devtools").then((o) => ({ default: o.DevTool }))
+), D = ({
+  form: o,
+  schema: t,
+  onSuccess: m,
+  onError: i,
+  onInvalid: l,
+  action: c,
+  children: s,
+  className: a,
+  onReset: d,
+  debug: f = !1,
+  ...p
+}, u) => {
+  const h = o.handleSubmit(
+    (r) => {
+      Promise.resolve().then(() => c(r)).then((n) => {
+        m?.(n, r);
+      }).catch((n) => {
+        i?.(n, r);
+      });
+    },
+    (r) => {
+      l?.(r);
+    }
+  );
+  return /* @__PURE__ */ e(P, { schema: t, children: /* @__PURE__ */ v(x, { ...o, children: [
+    f && /* @__PURE__ */ e(b, { fallback: /* @__PURE__ */ e(y, {}), children: /* @__PURE__ */ e(j, { control: o.control }) }),
+    /* @__PURE__ */ e(
+      "form",
+      {
+        ...p,
+        ref: u,
+        onSubmit: (r) => {
+          h(r);
+        },
+        className: a,
+        onReset: d,
+        "data-dd-privacy": "mask",
+        children: s
       }
-    );
-    return /* @__PURE__ */ m(u, { schema: f, children: /* @__PURE__ */ v(n, { ...e, children: [
-      s && /* @__PURE__ */ m(P, { fallback: /* @__PURE__ */ m(x, {}), children: /* @__PURE__ */ m(D, { control: e.control }) }),
-      /* @__PURE__ */ m(
-        "form",
-        {
-          ...b,
-          ref: c,
-          onSubmit: (t) => {
-            y(t);
-          },
-          className: d,
-          onReset: h,
-          "data-dd-privacy": "mask",
-          children: a
-        }
-      )
-    ] }) });
-  }
-);
+    )
+  ] }) });
+}, T = F(function(t, m) {
+  return D(
+    t,
+    m
+  );
+});
 T.displayName = "Form";
 export {
   T as Form

package/dist/esm/components/form-field/FormField.js

@@ -1,18 +1,19 @@
 import { jsx as p } from "react/jsx-runtime";
-import a, { forwardRef as H, useMemo as d } from "react";
+import n, { forwardRef as H, useMemo as d } from "react";
 import { uyTv as L } from "@payfit/unity-themes";
-import { useController as P } from "react-hook-form";
-import S from "../../hooks/use-id.js";
-import { useUnityFormProvider as g } from "../form/Form.context.js";
-import { FormFieldProvider as j } from "./FormField.context.js";
-import { FormContextualLink as D } from "./parts/FormContextualLink.js";
-import { FormHelperText as E } from "./parts/FormHelperText.js";
-import { isFieldRequired as I } from "./utils/isFieldRequired.js";
-const N = L({
+import { useController as S } from "react-hook-form";
+import P from "../../hooks/use-id.js";
+import { createSchemaAdapter as g } from "../../utils/createSchemaAdapter.js";
+import { useUnityFormProvider as j } from "../form/Form.context.js";
+import { FormFieldProvider as D } from "./FormField.context.js";
+import { FormContextualLink as E } from "./parts/FormContextualLink.js";
+import { FormHelperText as I } from "./parts/FormHelperText.js";
+import { isFieldRequired as N } from "./utils/isFieldRequired.js";
+const _ = L({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100"
   }
-}), _ = H(
+}), w = H(
   ({
     children: o,
     control: f,
@@ -23,19 +24,19 @@ const N = L({
     isRequired: F,
     isDisabled: h
   }, y) => {
-    const b = S(), { schema: t } = g(), { formState: i } = P({ name: r, control: f }), C = d(
-      () => I(t, r),
+    const b = P(), { schema: t } = j(), { formState: i } = S({ name: r, control: f }), C = d(
+      () => N(g(t), r),
       [t, r]
     ), { hasHelperText: R, hasContextualLink: T } = d(() => {
-      let s = !1, l = !1;
-      const m = (v) => {
-        a.Children.forEach(v, (n) => {
-          if (!a.isValidElement(n)) return;
-          const e = n;
-          e.type === E ? s = !0 : e.type === D && (l = !0), e.props && typeof e.props == "object" && "children" in e.props && m(e.props.children);
+      let s = !1, m = !1;
+      const l = (v) => {
+        n.Children.forEach(v, (a) => {
+          if (!n.isValidElement(a)) return;
+          const e = a;
+          e.type === I ? s = !0 : e.type === E && (m = !0), e.props && typeof e.props == "object" && "children" in e.props && l(e.props.children);
         });
       };
-      return m(o), { hasHelperText: s, hasContextualLink: l };
+      return l(o), { hasHelperText: s, hasContextualLink: m };
     }, [o]), k = {
       name: r,
       isLoading: u,
@@ -45,11 +46,11 @@ const N = L({
       id: b,
       isRequired: F ?? C,
       isDisabled: h ?? (i.isSubmitting || i.disabled)
-    }, { base: q } = N();
-    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(j, { ...k, children: o }) });
+    }, { base: q } = _();
+    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(D, { ...k, children: o }) });
   }
 );
-_.displayName = "FormField";
+w.displayName = "FormField";
 export {
-  _ as FormField
+  w as FormField
 };

package/dist/esm/components/form-field/utils/isFieldRequired.d.ts

@@ -1,8 +1,8 @@
-import { ZodObject, ZodRawShape } from 'zod';
+import { StandardSchema } from '../../../types/schema.js';
 /**
- * Determines if a field is required based on its path in a Zod schema
- * @param schema - The Zod schema object
+ * Determines if a field is required based on its path in a schema
+ * @param schema - The schema adapter object
  * @param fieldPath - The path to the field (e.g., "preferences.marketing")
  * @returns true if the field is required, false if optional or not found
  */
-export declare function isFieldRequired(schema: ZodObject<ZodRawShape> | null | undefined, fieldPath: string): boolean;
+export declare function isFieldRequired(schema: StandardSchema | null | undefined, fieldPath: string): boolean;

package/dist/esm/components/form-field/utils/isFieldRequired.js

@@ -1,23 +1,8 @@
-import { z as f } from "zod";
-function p(r, s) {
-  try {
-    if (!r) return !1;
-    const n = s.split(".");
-    let a = r.shape, e;
-    for (let t = 0; t < n.length; t++) {
-      const l = n[t];
-      if (e = a[l], !e) return !1;
-      if (t < n.length - 1) {
-        const i = e instanceof f.ZodOptional ? e._def.innerType.shape : e.shape;
-        if (!i) return !1;
-        a = i;
-      }
-    }
-    return e ? !(e instanceof f.ZodOptional) : !1;
-  } catch {
-    return !1;
-  }
+function l(e, t) {
+  if (!e) return !1;
+  const i = e.getField(t);
+  return i ? !i.isOptional : !1;
 }
 export {
-  p as isFieldRequired
+  l as isFieldRequired
 };

package/dist/esm/components/funnel-layout/FunnelLayout.d.ts

@@ -1,6 +1,6 @@
 import { default as React, PropsWithChildren } from 'react';
 import { VariantProps } from '@payfit/unity-themes';
-export declare const funnelLayout: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas", unknown, unknown, undefined>>;
+export declare const funnelLayout: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto", unknown, unknown, undefined>>;
 export interface FunnelLayoutProps extends PropsWithChildren<VariantProps<typeof funnelLayout>> {
     /** The header content for the funnel layout, typically a FunnelTopBar component */
     header: React.JSX.Element;

package/dist/esm/components/funnel-layout/FunnelLayout.js

@@ -1,128 +1,79 @@
-import { jsx as n, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as d, useMemo as y } from "react";
-import { uyTv as f } from "@payfit/unity-themes";
-import { useId as c } from "react-aria";
-import { FormattedMessage as a } from "react-intl";
-import { link as p } from "../link/Link.variants.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as s, useMemo as f } from "react";
+import { uyTv as y } from "@payfit/unity-themes";
+import { useId as p } from "react-aria";
+import { FormattedMessage as o } from "react-intl";
+import { SkipLinks as c, SkipLink as a } from "../skip-links/SkipLinks.js";
 import { FunnelLayoutProvider as m } from "./FunnelLayout.context.js";
-const h = f({
-  base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas"
-}), b = d(
-  ({ children: o, header: s, ...u }, r) => {
-    const e = c(), { base: i } = p(), t = y(
+const I = y({
+  base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto"
+}), k = s(
+  ({ children: u, header: l, ...r }, d) => {
+    const n = p(), t = f(
       () => ({
-        mainContentId: `funnel-main-content-${e}`,
-        topbarId: `funnel-top-bar-${e}`,
-        asideId: `funnel-complementary-left-content-${e}`,
-        funnelTitleId: `funnel-title-${e}`,
-        funnelDescriptionId: `funnel-description-${e}`,
-        funnelStatusId: `funnel-status-${e}`,
-        footerId: `funnel-footer-${e}`
+        mainContentId: `funnel-main-content-${n}`,
+        topbarId: `funnel-top-bar-${n}`,
+        asideId: `funnel-complementary-left-content-${n}`,
+        funnelTitleId: `funnel-title-${n}`,
+        funnelDescriptionId: `funnel-description-${n}`,
+        funnelStatusId: `funnel-status-${n}`,
+        footerId: `funnel-footer-${n}`
       }),
-      [e]
+      [n]
     );
-    return /* @__PURE__ */ n(m, { ids: t, children: /* @__PURE__ */ l(
+    return /* @__PURE__ */ e(m, { ids: t, children: /* @__PURE__ */ i(
       "div",
       {
         "data-dd-privacy": "mask-user-input",
-        ...u,
-        ref: r,
-        className: h(),
+        ...r,
+        ref: d,
+        className: I(),
         "data-unity-component": "FunnelLayout",
         children: [
-          /* @__PURE__ */ l(
-            "div",
-            {
-              className: "uy:sr-only uy:focus-within:p-200 uy:focus-within:bg-surface-neutral uy:focus-within:shadow-raising uy:focus-within:rounded-100 uy:focus-within:not-sr-only uy:focus-within:absolute uy:focus-within:top-100 uy:focus-within:left-100 uy:focus-within:z-50",
-              role: "navigation",
-              "aria-labelledby": `skip-links-label-${e}`,
-              children: [
-                /* @__PURE__ */ n("span", { id: `skip-links-label-${e}`, className: "uy:typography-h4", children: /* @__PURE__ */ n(
-                  a,
-                  {
-                    id: "unity:layout:funnel:skip-links:label",
-                    defaultMessage: "Skip to:"
-                  }
-                ) }),
-                /* @__PURE__ */ l("ol", { className: "uy:mt-1 uy:space-y-1 uy:list-none", children: [
-                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-                    "a",
-                    {
-                      href: `#${t.topbarId}`,
-                      tabIndex: 0,
-                      className: i(),
-                      children: /* @__PURE__ */ n(
-                        a,
-                        {
-                          id: "unity:layout:funnel:skip-links:top-bar",
-                          defaultMessage: "Top bar"
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-                    "a",
-                    {
-                      href: `#${t.mainContentId}`,
-                      tabIndex: 0,
-                      className: i(),
-                      children: /* @__PURE__ */ n(
-                        a,
-                        {
-                          id: "unity:layout:funnel:skip-links:main-content",
-                          defaultMessage: "Main content"
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-                    "a",
-                    {
-                      href: `#${t.asideId}`,
-                      tabIndex: 0,
-                      className: i(),
-                      children: /* @__PURE__ */ n(
-                        a,
-                        {
-                          id: "unity:layout:funnel:skip-links:sidebar",
-                          defaultMessage: "Sidebar"
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-                    "a",
-                    {
-                      href: `#${t.footerId}`,
-                      tabIndex: 0,
-                      className: i(),
-                      children: /* @__PURE__ */ n(
-                        a,
-                        {
-                          id: "unity:layout:funnel:skip-links:footer",
-                          defaultMessage: "Footer"
-                        }
-                      )
-                    }
-                  ) })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ i(c, { children: [
+            /* @__PURE__ */ e(a, { targetId: t.topbarId, children: /* @__PURE__ */ e(
+              o,
+              {
+                id: "unity:layout:funnel:skip-links:top-bar",
+                defaultMessage: "Top bar"
+              }
+            ) }),
+            /* @__PURE__ */ e(a, { targetId: t.mainContentId, children: /* @__PURE__ */ e(
+              o,
+              {
+                id: "unity:layout:funnel:skip-links:main-content",
+                defaultMessage: "Main content"
+              }
+            ) }),
+            /* @__PURE__ */ e(a, { targetId: t.asideId, children: /* @__PURE__ */ e(
+              o,
+              {
+                id: "unity:layout:funnel:skip-links:sidebar",
+                defaultMessage: "Sidebar"
+              }
+            ) }),
+            /* @__PURE__ */ e(a, { targetId: t.footerId, children: /* @__PURE__ */ e(
+              o,
+              {
+                id: "unity:layout:funnel:skip-links:footer",
+                defaultMessage: "Footer"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ e(
             "div",
             {
               "data-unity-component": "FunnelTopBar",
               className: "uy:sticky uy:top-0 uy:z-10",
-              children: s
+              children: l
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ e(
             "div",
             {
-              className: "uy:flex-1 uy:flex uy:md:block uy:overflow-auto",
+              className: "uy:flex-1 uy:flex uy:md:block uy:overflow-visible",
               "data-unity-slot": "funnel-layout-content-wrapper",
-              children: o
+              children: u
             }
           )
         ]
@@ -130,8 +81,8 @@ const h = f({
     ) });
   }
 );
-b.displayName = "FunnelLayout";
+k.displayName = "FunnelLayout";
 export {
-  b as FunnelLayout,
-  h as funnelLayout
+  k as FunnelLayout,
+  I as funnelLayout
 };

package/dist/esm/components/funnel-layout/parts/FunnelPage.js

@@ -1,15 +1,15 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { uyTv as o } from "@payfit/unity-themes";
+import { forwardRef as o } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
 import { useFunnelLayoutContext as i } from "../FunnelLayout.context.js";
-const t = o({
+const l = d({
   base: [
     "uy:group/funnelpage uy:bg-surface-neutral uy:p-100 uy:pb-500 uy:md:shadow-raising uy:md:border-border-neutral uy:md:border uy:md:border-solid uy:md:rounded-400",
     "uy:basis-full uy:shrink-0 uy:grow-1 uy:md:shrink",
     "uy:flex uy:flex-col",
     "uy:md:max-w-container-lg uy:lg:max-w-container-xl"
   ]
-}), l = d(
+}), t = o(
   ({ children: n, ...r }, u) => {
     const { ids: e } = i();
     return /* @__PURE__ */ a(
@@ -21,16 +21,15 @@ const t = o({
         id: e.mainContentId,
         "aria-labelledby": e.funnelTitleId,
         "aria-describedby": e.funnelDescriptionId,
-        tabIndex: -1,
-        className: t(),
+        className: l(),
         "data-unity-component": "FunnelPage",
         children: n
       }
     );
   }
 );
-l.displayName = "FunnelPage";
+t.displayName = "FunnelPage";
 export {
-  l as FunnelPage,
-  t as funnelPage
+  t as FunnelPage,
+  l as funnelPage
 };