@payfit/unity-components 1.0.0 → 1.1.0

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

@@ -1,53 +1,47 @@
-import { jsx as F } from "react/jsx-runtime";
-import { createContext as x, useContext as p } from "react";
-import { useFormContext as I, useFormState as v } from "react-hook-form";
-const u = x({
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as l, useContext as u } from "react";
+import { useFormState as c } from "react-hook-form";
+const s = l({
   id: "",
   name: ""
 });
-function $({
+function C({
   children: o,
   id: i,
-  name: t,
-  isRequired: s,
-  isInvalid: r,
-  isLoading: e,
-  isReadOnly: n,
-  isDisabled: d,
-  hasHelperText: m,
-  hasContextualLink: a
+  name: e,
+  isRequired: n,
+  isLoading: d,
+  isReadOnly: m,
+  isDisabled: f,
+  hasHelperText: r,
+  hasContextualLink: t
 }) {
-  return /* @__PURE__ */ F(
-    u.Provider,
+  return /* @__PURE__ */ a(
+    s.Provider,
     {
       value: {
         id: i,
-        name: t,
-        isRequired: s,
-        isInvalid: r,
-        isLoading: e,
-        isReadOnly: n,
-        isDisabled: d,
-        hasHelperText: m,
-        hasContextualLink: a
+        name: e,
+        isRequired: n,
+        isLoading: d,
+        isReadOnly: m,
+        isDisabled: f,
+        hasHelperText: r,
+        hasContextualLink: t
       },
       children: o
     }
   );
 }
-function k() {
-  const o = p(u), { getFieldState: i } = I(), t = v({ name: o.name }), { invalid: s, ...r } = i(
-    o.name,
-    t
-  ), {
+function b() {
+  const o = u(s), i = c({ name: o.name }), {
     id: e,
     isRequired: n,
-    isInvalid: d,
-    isLoading: m,
-    isReadOnly: a,
-    isDisabled: c,
-    hasHelperText: l,
-    hasContextualLink: f
+    isLoading: d,
+    isReadOnly: m,
+    isDisabled: f,
+    hasHelperText: r,
+    hasContextualLink: t
   } = o;
   if (!o)
     throw new Error("useFormField should be used within <FormField> component");
@@ -55,27 +49,25 @@ function k() {
     ...{
       id: e,
       name: o.name,
-      hasHelperText: l,
-      hasContextualLink: f,
+      hasHelperText: r,
+      hasContextualLink: t,
       formLabelId: `${e}-form-field-label`,
       formItemId: `${e}-form-item`,
-      formDescriptionId: l ? `${e}-form-field-description` : void 0,
+      formDescriptionId: r ? `${e}-form-field-description` : void 0,
       formMessageId: `${e}-form-field-feedback-text`,
-      formContextualLinkId: f ? `${e}-form-field-contextual-link` : void 0
+      formContextualLinkId: t ? `${e}-form-field-contextual-link` : void 0
     },
     fieldState: {
-      ...r,
       isRequired: n,
-      isInvalid: d,
-      isLoading: m,
-      isReadOnly: a,
-      isDisabled: c
+      isLoading: d,
+      isReadOnly: m,
+      isDisabled: f
     },
-    formState: t
+    formState: i
   };
 }
 export {
-  u as FormFieldContext,
-  $ as FormFieldProvider,
-  k as useFormField
+  s as FormFieldContext,
+  C as FormFieldProvider,
+  b as useFormField
 };

package/dist/esm/components/form-field/FormField.d.ts

@@ -7,8 +7,6 @@ export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues,
     name: TName;
     /** Whether the field is required */
     isRequired?: boolean;
-    /** Whether the field is in an invalid state */
-    isInvalid?: boolean;
     /** Whether the field is in a loading state */
     isLoading?: boolean;
     /** Whether the field is disabled */

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

@@ -1,60 +1,55 @@
-import { jsx as a } from "react/jsx-runtime";
-import d, { forwardRef as T, useMemo as p } from "react";
-import { useController as I } from "react-hook-form";
-import { tv as P } from "tailwind-variants";
-import g from "../../hooks/use-id.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 N } from "./parts/FormHelperText.js";
-import { isFieldRequired as _ } from "./utils/isFieldRequired.js";
-const w = P({
+import { jsx as p } from "react/jsx-runtime";
+import a, { 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({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100"
   }
-}), M = T(
+}), _ = H(
   ({
     children: o,
     control: f,
     name: r,
-    isInvalid: u,
-    isLoading: c,
-    isReadOnly: x,
-    className: F,
-    isRequired: h,
-    isDisabled: y
-  }, b) => {
-    const C = g(), { schema: t } = j(), {
-      fieldState: { invalid: v },
-      formState: i
-    } = I({ name: r, control: f }), R = p(
-      () => _(t, r),
+    isLoading: u,
+    isReadOnly: c,
+    className: x,
+    isRequired: F,
+    isDisabled: h
+  }, y) => {
+    const b = S(), { schema: t } = g(), { formState: i } = P({ name: r, control: f }), C = d(
+      () => I(t, r),
       [t, r]
-    ), { hasHelperText: k, hasContextualLink: q } = p(() => {
+    ), { hasHelperText: R, hasContextualLink: T } = d(() => {
       let s = !1, l = !1;
-      const m = (S) => {
-        d.Children.forEach(S, (n) => {
-          if (!d.isValidElement(n)) return;
+      const m = (v) => {
+        a.Children.forEach(v, (n) => {
+          if (!a.isValidElement(n)) return;
           const e = n;
-          e.type === N ? s = !0 : e.type === E && (l = !0), e.props && typeof e.props == "object" && "children" in e.props && m(e.props.children);
+          e.type === E ? s = !0 : e.type === D && (l = !0), e.props && typeof e.props == "object" && "children" in e.props && m(e.props.children);
         });
       };
       return m(o), { hasHelperText: s, hasContextualLink: l };
-    }, [o]), H = {
+    }, [o]), k = {
       name: r,
-      isLoading: c,
-      isReadOnly: x,
-      hasHelperText: k,
-      hasContextualLink: q,
-      id: C,
-      isRequired: h ?? R,
-      isInvalid: u ?? v,
-      isDisabled: y ?? (i.isSubmitting || i.disabled)
-    }, { base: L } = w();
-    return /* @__PURE__ */ a("div", { ref: b, className: L({ className: F }), children: /* @__PURE__ */ a(D, { ...H, children: o }) });
+      isLoading: u,
+      isReadOnly: c,
+      hasHelperText: R,
+      hasContextualLink: T,
+      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 }) });
   }
 );
-M.displayName = "FormField";
+_.displayName = "FormField";
 export {
-  M as FormField
+  _ as FormField
 };

package/dist/esm/components/form-field/parts/FormContextualLink.js

@@ -1,37 +1,37 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
 import { Button as m } from "react-aria-components";
 import { Link as d } from "../../link/Link.js";
-import { Text as e } from "../../text/Text.js";
-import { useFormField as u } from "../FormField.context.js";
-const p = l(({ children: o, href: a, onPress: n }, r) => {
-  const { formContextualLinkId: i } = u();
-  return a ? /* @__PURE__ */ t(
+import { useFormField as s } from "../FormField.context.js";
+const e = n(({ children: o, href: t, onPress: l }, a) => {
+  const { formContextualLinkId: r } = s();
+  return t ? /* @__PURE__ */ i(
     d,
     {
-      id: i,
+      id: r,
+      size: "small",
       color: "secondary",
       variant: "standalone",
       "data-unity-slot": "contextual-link",
-      href: a,
-      ref: r,
+      href: t,
+      ref: a,
       "data-dd-privacy": "allow",
-      children: /* @__PURE__ */ t(e, { variant: "actionSmall", children: o })
+      children: o
     }
-  ) : /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ i(
     m,
     {
-      id: i,
-      onPress: n,
+      id: r,
+      onPress: l,
       "data-unity-slot": "contextual-link",
       className: "uy:typography-body-small uy:w-fit",
-      ref: r,
+      ref: a,
       "data-dd-privacy": "allow",
       children: o
     }
   );
 });
-p.displayName = "FormContextualLink";
+e.displayName = "FormContextualLink";
 export {
-  p as FormContextualLink
+  e as FormContextualLink
 };

package/dist/esm/components/form-field/parts/FormControl.js

@@ -1,50 +1,54 @@
-import { jsx as v } from "react/jsx-runtime";
-import { useMemo as y } from "react";
-import { Slot as g } from "@radix-ui/react-slot";
-import { mergeProps as x } from "react-aria";
-import { useFormContext as C, useController as L } from "react-hook-form";
-import { useFormField as D } from "../FormField.context.js";
-function F({ ...t }) {
+import { jsx as I } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { Slot as x } from "@radix-ui/react-slot";
+import { mergeProps as C } from "react-aria";
+import { useFormContext as D, useController as F } from "react-hook-form";
+import { useFormField as L } from "../FormField.context.js";
+function R({ ...s }) {
   const {
-    name: d,
+    name: t,
     hasHelperText: r,
-    hasContextualLink: n,
-    fieldState: i,
-    formLabelId: l,
+    hasContextualLink: l,
+    fieldState: o,
+    formLabelId: n,
     formItemId: m,
     formDescriptionId: e,
-    formMessageId: s,
+    formMessageId: a,
     formContextualLinkId: f
-  } = D(), { control: c } = C(), {
-    field: { ref: p, ...u }
-  } = L({ name: d, control: c }), { error: a } = i, b = y(() => [
-    a ? s : void 0,
+  } = L(), { control: p } = D(), {
+    field: { ref: c, ...b },
+    fieldState: { invalid: u, error: d }
+  } = F({ name: t, control: p }), y = g(() => [
+    d ? a : void 0,
     r ? e : void 0
-  ].filter(Boolean).join(" "), [a, r, e, s]), o = {
-    isDisabled: i.isDisabled,
-    isInvalid: i.isInvalid,
-    isLoading: i.isLoading,
-    isReadOnly: i.isReadOnly,
-    isRequired: i.isRequired
-  }, I = x(t, o, u);
-  return /* @__PURE__ */ v(
-    g,
+  ].filter(Boolean).join(" "), [d, r, e, a]), i = {
+    isInvalid: u,
+    isDisabled: o.isDisabled,
+    isLoading: o.isLoading,
+    isReadOnly: o.isReadOnly
+  }, v = C(s, i, b);
+  return /* @__PURE__ */ I(
+    x,
     {
-      ...I,
-      ref: p,
+      ...v,
+      ref: c,
       "data-slot": "form-control",
       id: m,
-      "aria-labelledby": l,
-      "aria-describedby": b,
-      "aria-details": n ? f : void 0,
-      "aria-invalid": o.isInvalid,
-      "aria-disabled": o.isDisabled,
+      "aria-labelledby": n,
+      "aria-describedby": y,
+      "aria-details": l ? f : void 0,
+      "aria-invalid": i.isInvalid,
+      "data-invalid": i.isInvalid,
+      "aria-disabled": i.isDisabled,
+      "data-disabled": i.isDisabled,
+      "aria-readonly": i.isReadOnly,
+      "data-readonly": i.isReadOnly,
       "aria-required": o.isRequired,
-      "aria-busy": o.isLoading
+      "aria-busy": i.isLoading
     }
   );
 }
-F.displayName = "FormControl";
+R.displayName = "FormControl";
 export {
-  F as FormControl
+  R as FormControl
 };

package/dist/esm/components/form-field/parts/FormFeedbackText.js

@@ -1,28 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { Text as l } from "../../text/Text.js";
-import { useFormField as n } from "../FormField.context.js";
-const f = s(
-  ({ children: t, ...o }, a) => {
-    const {
-      fieldState: { error: r, isInvalid: d },
-      formMessageId: m
-    } = n(), e = r ? String(r.message) : t;
-    return !d || !e ? null : /* @__PURE__ */ i(
-      l,
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { useFormContext as f, useController as p } from "react-hook-form";
+import { Text as u } from "../../text/Text.js";
+import { useFormField as y } from "../FormField.context.js";
+const x = c(
+  ({ children: e, ...n }, a) => {
+    const { name: m, formMessageId: s } = y(), d = f(), o = p({ name: m, control: d.control }), t = o.fieldState.error, i = o.fieldState.invalid, r = t ? String(t.message) : e;
+    return !i || !r ? null : /* @__PURE__ */ l(
+      u,
       {
-        ...o,
-        id: m,
+        ...n,
+        id: s,
         ref: a,
         "data-unity-slot": "form-feedback-text",
         className: "uy:typography-body-small-strong uy:text-content-form-invalid",
         "data-dd-privacy": "allow",
-        children: e
+        children: r
       }
     );
   }
 );
-f.displayName = "FormFeedbackText";
+x.displayName = "FormFeedbackText";
 export {
-  f as FormFeedbackText
+  x as FormFeedbackText
 };

package/dist/esm/components/full-page-loader/FullPageLoader.js

@@ -1,13 +1,13 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { useId as o } from "react-aria";
+import { uyTv as o } from "@payfit/unity-themes";
+import { useId as s } from "react-aria";
 import { FormattedMessage as t } from "react-intl";
-import { tv as s } from "tailwind-variants";
 import { Spinner as i } from "../spinner/Spinner.js";
-const n = s({
+const n = o({
   // add the component styles
   base: "uy:w-full uy:h-screen uy:flex uy:place-items-center uy:justify-center"
-}), m = ({ label: a }) => {
-  const r = o();
+}), u = ({ label: a }) => {
+  const r = s();
   return /* @__PURE__ */ l(
     "main",
     {
@@ -28,8 +28,8 @@ const n = s({
     }
   );
 };
-m.displayName = "FullPageLoader";
+u.displayName = "FullPageLoader";
 export {
-  m as FullPageLoader,
+  u as FullPageLoader,
   n as fullPageLoader
 };

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

@@ -1,5 +1,5 @@
 import { default as React, PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
+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 interface FunnelLayoutProps extends PropsWithChildren<VariantProps<typeof funnelLayout>> {
     /** The header content for the funnel layout, typically a FunnelTopBar component */
@@ -31,7 +31,7 @@ export interface FunnelLayoutProps extends PropsWithChildren<VariantProps<typeof
  * - Creates a full viewport height layout with sticky top bar
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="mask-user-input"`
  * @see {@link FunnelLayoutProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout--docs unity-components.payfit.io}

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

@@ -1,15 +1,15 @@
 import { jsx as n, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as d, useMemo as f } from "react";
-import { useId as y } from "react-aria";
-import { FormattedMessage as i } from "react-intl";
-import { tv as c } from "tailwind-variants";
-import { link as a } from "../link/Link.variants.js";
-import { FunnelLayoutProvider as p } from "./FunnelLayout.context.js";
-const m = c({
+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 { FunnelLayoutProvider as m } from "./FunnelLayout.context.js";
+const h = f({
   base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas"
-}), h = d(
-  ({ children: o, header: u, ...s }, r) => {
-    const e = y(), t = f(
+}), b = d(
+  ({ children: o, header: s, ...u }, r) => {
+    const e = c(), { base: i } = p(), t = y(
       () => ({
         mainContentId: `funnel-main-content-${e}`,
         topbarId: `funnel-top-bar-${e}`,
@@ -21,13 +21,13 @@ const m = c({
       }),
       [e]
     );
-    return /* @__PURE__ */ n(p, { ids: t, children: /* @__PURE__ */ l(
+    return /* @__PURE__ */ n(m, { ids: t, children: /* @__PURE__ */ l(
       "div",
       {
         "data-dd-privacy": "mask-user-input",
-        ...s,
+        ...u,
         ref: r,
-        className: m(),
+        className: h(),
         "data-unity-component": "FunnelLayout",
         children: [
           /* @__PURE__ */ l(
@@ -38,7 +38,7 @@ const m = c({
               "aria-labelledby": `skip-links-label-${e}`,
               children: [
                 /* @__PURE__ */ n("span", { id: `skip-links-label-${e}`, className: "uy:typography-h4", children: /* @__PURE__ */ n(
-                  i,
+                  a,
                   {
                     id: "unity:layout:funnel:skip-links:label",
                     defaultMessage: "Skip to:"
@@ -50,9 +50,9 @@ const m = c({
                     {
                       href: `#${t.topbarId}`,
                       tabIndex: 0,
-                      className: a(),
+                      className: i(),
                       children: /* @__PURE__ */ n(
-                        i,
+                        a,
                         {
                           id: "unity:layout:funnel:skip-links:top-bar",
                           defaultMessage: "Top bar"
@@ -65,9 +65,9 @@ const m = c({
                     {
                       href: `#${t.mainContentId}`,
                       tabIndex: 0,
-                      className: a(),
+                      className: i(),
                       children: /* @__PURE__ */ n(
-                        i,
+                        a,
                         {
                           id: "unity:layout:funnel:skip-links:main-content",
                           defaultMessage: "Main content"
@@ -80,9 +80,9 @@ const m = c({
                     {
                       href: `#${t.asideId}`,
                       tabIndex: 0,
-                      className: a(),
+                      className: i(),
                       children: /* @__PURE__ */ n(
-                        i,
+                        a,
                         {
                           id: "unity:layout:funnel:skip-links:sidebar",
                           defaultMessage: "Sidebar"
@@ -95,9 +95,9 @@ const m = c({
                     {
                       href: `#${t.footerId}`,
                       tabIndex: 0,
-                      className: a(),
+                      className: i(),
                       children: /* @__PURE__ */ n(
-                        i,
+                        a,
                         {
                           id: "unity:layout:funnel:skip-links:footer",
                           defaultMessage: "Footer"
@@ -114,7 +114,7 @@ const m = c({
             {
               "data-unity-component": "FunnelTopBar",
               className: "uy:sticky uy:top-0 uy:z-10",
-              children: u
+              children: s
             }
           ),
           /* @__PURE__ */ n(
@@ -130,8 +130,8 @@ const m = c({
     ) });
   }
 );
-h.displayName = "FunnelLayout";
+b.displayName = "FunnelLayout";
 export {
-  h as FunnelLayout,
-  m as funnelLayout
+  b as FunnelLayout,
+  h as funnelLayout
 };

package/dist/esm/components/funnel-layout/parts/FunnelBody.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const funnelBody: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600", unknown, unknown, undefined>>;
 export type FunnelBodyProps = PropsWithChildren<VariantProps<typeof funnelBody>>;
 /**
@@ -25,7 +25,7 @@ export type FunnelBodyProps = PropsWithChildren<VariantProps<typeof funnelBody>>
  * - Provides responsive breakpoints for mobile and desktop layouts
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelBodyProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelbody--docs unity-components.payfit.io}

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

@@ -1,15 +1,15 @@
 import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { tv as a } from "tailwind-variants";
+import { uyTv as a } from "@payfit/unity-themes";
 const e = a({
   base: "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600"
 }), m = n(
-  ({ children: u, ...o }, y) => /* @__PURE__ */ l(
+  ({ children: u, ...y }, o) => /* @__PURE__ */ l(
     "div",
     {
-      ref: y,
+      ref: o,
       "data-dd-privacy": "allow",
-      ...o,
+      ...y,
       className: e(),
       "data-unity-component": "FunnelBody",
       children: u

package/dist/esm/components/funnel-layout/parts/FunnelPage.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const funnelPage: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export type FunnelPageProps = PropsWithChildren<VariantProps<typeof funnelPage>>;
 /**
@@ -25,7 +25,7 @@ export type FunnelPageProps = PropsWithChildren<VariantProps<typeof funnelPage>>
  * - Provides proper semantic structure with main element
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="mask-user-input"`
  * @see {@link FunnelPageProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/packages/unity/components/src/components/funnel-layout/parts GitHub}
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelpage--docs unity-components.payfit.io}