@payfit/unity-components 1.2.0 → 2.0.0

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

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

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

@@ -1,7 +1,7 @@
 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 { Link as n } from "../link/Link.js";
+import { RawLink as n } from "../link/RawLink.js";
 const c = (e) => /* @__PURE__ */ new Map([
   [
     "known",

package/dist/esm/components/fieldset/Fieldset.d.ts

@@ -13,6 +13,11 @@ export declare const fieldset: import('tailwind-variants').TVReturnType<{
             fieldsContainer: string;
         };
     };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     legend: string;
@@ -31,6 +36,11 @@ export declare const fieldset: import('tailwind-variants').TVReturnType<{
             fieldsContainer: string;
         };
     };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     legend: string;
@@ -49,6 +59,11 @@ export declare const fieldset: import('tailwind-variants').TVReturnType<{
             fieldsContainer: string;
         };
     };
+    disableEndMargin: {
+        true: {
+            base: string;
+        };
+    };
 }, {
     base: string;
     legend: string;
@@ -68,6 +83,10 @@ export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fie
      * Whether to hide the legend of the fieldset.
      */
     isLegendHidden?: boolean;
+    /**
+     * Whether to disable the end margin of the fieldset.
+     */
+    disableEndMargin?: boolean;
 }
 /**
  * The `Fieldset` component groups related form fields together with an accessible structure.

package/dist/esm/components/fieldset/Fieldset.js

@@ -1,8 +1,8 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { useId as b } from "react-aria";
-const x = g({
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { useId as x } from "react-aria";
+const h = b({
   slots: {
     base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
     legend: "uy:typography-h3 uy:text-content-neutral",
@@ -21,46 +21,52 @@ const x = g({
         description: "uy:block",
         fieldsContainer: "uy:mt-300"
       }
+    },
+    disableEndMargin: {
+      true: {
+        base: "uy:[&:last-of-type]:mb-0"
+      }
     }
   },
   defaultVariants: {
-    isLegendHidden: !1
+    isLegendHidden: !1,
+    disableEndMargin: !1
   }
-}), h = m(
-  ({ children: i, ...d }, n) => {
-    const s = b(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
-      base: a,
-      legend: y,
-      description: c,
-      fieldsContainer: u
-    } = x({ isLegendHidden: o }), p = e ? `${s}-fieldset-description` : void 0;
-    return /* @__PURE__ */ f(
+}), v = g(
+  ({ children: t, ...d }, n) => {
+    const i = x(), { legend: l, description: e, isLegendHidden: a, disableEndMargin: r, ...o } = d, {
+      base: y,
+      legend: c,
+      description: u,
+      fieldsContainer: p
+    } = h({ isLegendHidden: a, disableEndMargin: r }), f = e ? `${i}-fieldset-description` : void 0;
+    return /* @__PURE__ */ m(
       "fieldset",
       {
         "data-dd-privacy": "allow",
-        ...r,
+        ...o,
         ref: n,
-        className: a(),
-        "aria-describedby": p,
+        className: y(),
+        "aria-describedby": f,
         children: [
-          /* @__PURE__ */ t("legend", { className: y(), children: l }),
-          e && /* @__PURE__ */ t(
+          /* @__PURE__ */ s("legend", { className: c(), children: l }),
+          e && /* @__PURE__ */ s(
             "span",
             {
-              id: `${s}-fieldset-description`,
+              id: `${i}-fieldset-description`,
               "data-fieldset-slot": "description",
-              className: c(),
+              className: u(),
               children: e
             }
           ),
-          /* @__PURE__ */ t("div", { className: u(), children: i })
+          /* @__PURE__ */ s("div", { className: p(), children: t })
         ]
       }
     );
   }
 );
-h.displayName = "Fieldset";
+v.displayName = "Fieldset";
 export {
-  h as Fieldset,
-  x as fieldset
+  v as Fieldset,
+  h as fieldset
 };

package/dist/esm/components/flex/Flex.js

@@ -1,42 +1,57 @@
-import { jsx as N } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { flex as k } from "./Flex.variants.js";
-const e = j(
+import { jsx as E } from "react/jsx-runtime";
+import { forwardRef as M, useMemo as S } from "react";
+import { flex as b } from "./Flex.variants.js";
+const N = M(
   ({
-    asElement: o = "div",
-    children: r,
-    className: t,
-    inline: s,
-    direction: m,
-    isReversed: a,
-    wrap: l,
-    gap: f,
-    gapX: c,
-    gapY: i,
-    justify: n,
-    align: p,
-    alignContent: x,
-    ...d
-  }, y) => {
-    const F = k({
-      inline: s,
-      direction: m,
-      isReversed: a,
-      wrap: l,
-      gap: f,
-      gapX: c,
-      gapY: i,
-      justify: n,
-      align: p,
-      alignContent: x,
-      className: t
-    });
-    return /* @__PURE__ */ N(o, { ref: y, className: F, ...d, children: r });
+    asElement: a = "div",
+    children: d,
+    className: m,
+    inline: o,
+    direction: r,
+    isReversed: e,
+    wrap: f,
+    gap: s,
+    gapX: t,
+    gapY: x,
+    justify: l,
+    align: c,
+    alignContent: F,
+    ...k
+  }, p) => {
+    const u = S(
+      () => b({
+        inline: o,
+        direction: r,
+        isReversed: e,
+        wrap: f,
+        gap: s,
+        gapX: t,
+        gapY: x,
+        justify: l,
+        align: c,
+        alignContent: F,
+        className: m
+      }),
+      [
+        c,
+        F,
+        m,
+        r,
+        s,
+        t,
+        x,
+        o,
+        e,
+        l,
+        f
+      ]
+    );
+    return /* @__PURE__ */ E(a, { ref: p, className: u, ...k, children: d });
   }
 );
-e.displayName = "Flex";
-const E = e;
+N.displayName = "Flex";
+const v = N;
 export {
-  e as Flex,
-  E as Stack
+  N as Flex,
+  v as Stack
 };

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

@@ -5,15 +5,15 @@ 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({
+import { FormFieldProvider as w } from "./FormField.context.js";
+import { FormHelperText as D } from "./parts/FormHelperText.js";
+import { RawFormContextualLink as E } from "./parts/RawFormContextualLink.js";
+import { isFieldRequired as I } from "./utils/isFieldRequired.js";
+const N = L({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100"
   }
-}), w = H(
+}), _ = H(
   ({
     children: o,
     control: f,
@@ -25,7 +25,7 @@ const _ = L({
     isDisabled: h
   }, y) => {
     const b = P(), { schema: t } = j(), { formState: i } = S({ name: r, control: f }), C = d(
-      () => N(g(t), r),
+      () => I(g(t), r),
       [t, r]
     ), { hasHelperText: R, hasContextualLink: T } = d(() => {
       let s = !1, m = !1;
@@ -33,7 +33,7 @@ const _ = L({
         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);
+          e.type === D ? s = !0 : e.type === E && (m = !0), e.props && typeof e.props == "object" && "children" in e.props && l(e.props.children);
         });
       };
       return l(o), { hasHelperText: s, hasContextualLink: m };
@@ -46,11 +46,11 @@ const _ = L({
       id: b,
       isRequired: F ?? C,
       isDisabled: h ?? (i.isSubmitting || i.disabled)
-    }, { base: q } = _();
-    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(D, { ...k, children: o }) });
+    }, { base: q } = N();
+    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(w, { ...k, children: o }) });
   }
 );
-w.displayName = "FormField";
+_.displayName = "FormField";
 export {
-  w as FormField
+  _ as FormField
 };

package/dist/esm/components/form-field/parts/{FormContextualLink.d.ts → RawFormContextualLink.d.ts}

@@ -16,5 +16,5 @@ interface FormContextualLinkActionProps {
 /**
  * FormContextualLink is a component that displays a contextual link for a form field.
  */
-declare const FormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-export { FormContextualLink };
+declare const RawFormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { RawFormContextualLink };

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

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

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

@@ -32,9 +32,9 @@ export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeo
  *   return (
  *     <FunnelSidebar>
  *       <TaskMenu>
- *         <Task>
+ *         <RawTask>
  *           <TaskTitle>Task 1</TaskTitle>
- *         </Task>
+ *         </RawTask>
  *       </TaskMenu>
  *     </FunnelSidebar>
  *   )