@payfit/unity-components 1.1.0 → 1.2.0

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

@@ -1,32 +1,32 @@
-import { jsxs as l, Fragment as u, jsx as s } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
-import { useBreakpointListener as t } from "../../../hooks/use-breakpoint-listener.js";
-const b = p({
+import { jsxs as e, Fragment as l, jsx as c } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import { useBreakpointListener as y } from "../../../hooks/use-breakpoint-listener.js";
+const d = m({
   base: "uy:flex uy:flex-col uy:gap-200 uy:md:flex-row uy:md:justify-between"
-}), w = h(
-  ({ renderNext: y, renderPrevious: a, renderOptionalActions: m, ...g }, x) => {
-    const f = t(), c = f === "xs" || f === "sm";
-    return /* @__PURE__ */ l(
+}), f = u(
+  ({ renderNext: a, renderPrevious: n, renderOptionalActions: o, ...t }, r) => {
+    const s = y(), i = s === "xs" || s === "sm";
+    return /* @__PURE__ */ e(
       "div",
       {
-        ref: x,
+        ref: r,
         "data-dd-privacy": "allow",
-        ...g,
-        className: b(),
+        ...t,
+        className: d(),
         role: "group",
         "data-unity-component": "FunnelPageActions",
         children: [
-          c && /* @__PURE__ */ l(u, { children: [
-            y(),
-            a == null ? void 0 : a(),
-            m == null ? void 0 : m()
+          i && /* @__PURE__ */ e(l, { children: [
+            a(),
+            n?.(),
+            o?.()
           ] }),
-          !c && /* @__PURE__ */ l(u, { children: [
-            /* @__PURE__ */ s("div", { className: "uy:flex uy:gap-100", children: m == null ? void 0 : m() }),
-            /* @__PURE__ */ l("div", { className: "uy:flex uy:gap-100", children: [
-              a == null ? void 0 : a(),
-              y()
+          !i && /* @__PURE__ */ e(l, { children: [
+            /* @__PURE__ */ c("div", { className: "uy:flex uy:gap-100", children: o?.() }),
+            /* @__PURE__ */ e("div", { className: "uy:flex uy:gap-100", children: [
+              n?.(),
+              a()
             ] })
           ] })
         ]
@@ -34,8 +34,8 @@ const b = p({
     );
   }
 );
-w.displayName = "FunnelPageActions";
+f.displayName = "FunnelPageActions";
 export {
-  w as FunnelPageActions,
-  b as funnelPageActions
+  f as FunnelPageActions,
+  d as funnelPageActions
 };

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

@@ -1,22 +1,21 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { useFunnelLayoutContext as m } from "../FunnelLayout.context.js";
-const u = d({
+import { uyTv as m } from "@payfit/unity-themes";
+import { useFunnelLayoutContext as u } from "../FunnelLayout.context.js";
+const d = m({
   base: "uy:px-300 uy:md:px-600"
 }), s = n(
   ({ children: o, ...e }, t) => {
-    const { ids: r } = m();
+    const { ids: r } = u();
     return /* @__PURE__ */ a(
       "footer",
       {
         ref: t,
         "data-dd-privacy": "allow",
         ...e,
-        className: u(),
+        className: d(),
         "data-unity-component": "FunnelPageFooter",
         id: r.footerId,
-        tabIndex: -1,
         children: o
       }
     );
@@ -25,5 +24,5 @@ const u = d({
 s.displayName = "FunnelPageFooter";
 export {
   s as FunnelPageFooter,
-  u as funnelPageFooter
+  d as funnelPageFooter
 };

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

@@ -1,5 +1,5 @@
 import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 export declare const funnelPageHeader: import('tailwind-variants').TVReturnType<{
     gradient: {
         default: {
@@ -36,7 +36,7 @@ export declare const funnelPageHeader: import('tailwind-variants').TVReturnType<
 }, undefined, unknown, unknown, undefined>>;
 export interface FunnelPageHeaderProps extends PropsWithChildren<VariantProps<typeof funnelPageHeader>> {
     title: string;
-    subtitle: string;
+    subtitle: ReactNode;
     style?: VariantProps<typeof funnelPageHeader>['gradient'];
     imageSlot?: React.ReactNode;
     imageSlotAltText?: string;

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

@@ -5,7 +5,7 @@ export declare const funnelSidebar: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:top-600 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0", {
+}, undefined, "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0", {
     isSticky: {
         true: string;
         false: string;
@@ -15,7 +15,7 @@ export declare const funnelSidebar: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:top-600 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0", unknown, unknown, undefined>>;
+}, undefined, "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0", unknown, unknown, undefined>>;
 export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeof funnelSidebar>> {
     'aria-label'?: string;
 }

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

@@ -1,13 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { useIntl as o } from "react-intl";
+import { uyTv as o } from "@payfit/unity-themes";
+import { useIntl as d } from "react-intl";
 import { useFunnelLayoutContext as y } from "../FunnelLayout.context.js";
-const m = d({
-  base: "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:top-600 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0",
+const m = o({
+  base: "uy:w-full uy:self-start uy:shrink uy:grow-0 uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0",
   variants: {
     isSticky: {
-      true: "uy:sticky uy:top-0 uy:z-9",
+      true: "uy:sticky uy:top-8 uy:md:top-10 uy:z-9",
       false: "uy:static"
     }
   },
@@ -15,20 +15,19 @@ const m = d({
     isSticky: !0
   }
 }), f = l(
-  ({ children: e, isSticky: t, "aria-label": s, ...i }, r) => {
-    const { ids: a } = y(), u = o();
+  ({ children: e, isSticky: s, "aria-label": t, ...i }, r) => {
+    const { ids: a } = y(), u = d();
     return /* @__PURE__ */ n(
       "aside",
       {
         ref: r,
-        "aria-label": s ?? u.formatMessage({
+        "aria-label": t ?? u.formatMessage({
           id: "unity:layout:funnel:sidebar:aria-label",
           defaultMessage: "Process steps"
         }),
         "aria-describedby": a.funnelTitleId,
-        className: m({ isSticky: t }),
+        className: m({ isSticky: s }),
         id: a.asideId,
-        tabIndex: -1,
         "data-unity-component": "FunnelSidebar",
         "data-dd-privacy": "allow",
         ...i,

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

@@ -55,7 +55,6 @@ const A = N({
         id: n.topbarId,
         className: f(),
         role: "banner",
-        tabIndex: -1,
         "aria-labelledby": n.funnelTitleId,
         "aria-describedby": n.funnelStatusId,
         "data-dd-privacy": "allow",

package/dist/esm/components/input/Input.js

@@ -5,15 +5,15 @@ import { Input as I } from "react-aria-components";
 import { useIntl as N } from "react-intl";
 import { CircularIconButton as W } from "../icon-button/CircularIconButton.js";
 import { Icon as M } from "../icon/Icon.js";
-import { Spinner as O } from "../spinner/Spinner.js";
-const S = h({
+import { Spinner as C } from "../spinner/Spinner.js";
+const O = h({
   slots: {
-    base: "uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
-    prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:active:border-border-form-active",
-    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:max-w-full uy:justify-between",
+    base: "uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+    prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-75 uy:active:border-border-form-active",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:max-w-full uy:justify-between",
     input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
     state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0",
-    suffix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:active:border-border-form-active"
+    suffix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75 uy:active:border-border-form-active"
   },
   variants: {
     isInvalid: {
@@ -60,38 +60,38 @@ const S = h({
       }
     }
   ]
-}), j = v(
+}), S = v(
   ({
     type: s = "text",
-    prefix: l,
-    suffix: i,
-    isInvalid: f,
+    prefix: d,
+    suffix: l,
+    isInvalid: i,
     isLoading: r,
     isDisabled: o,
     isReadOnly: u,
-    onClearButtonPress: t,
-    ...a
+    onClearButtonPress: f,
+    ...t
   }, y) => {
-    const d = N(), {
+    const a = N(), {
       base: b,
       prefix: m,
       inputWrapper: c,
       input: p,
       state: x,
       suffix: g
-    } = S({
-      isInvalid: !!f,
+    } = O({
+      isInvalid: !!i,
       isReadOnly: !!u,
       isDisabled: !!o
-    }), w = a.value && !r && !u && !o;
-    return delete a.isRequired, /* @__PURE__ */ n("div", { className: b(), children: [
-      l ? /* @__PURE__ */ e("span", { className: m(), children: l }) : null,
+    }), w = t.value && !r && !u && !o;
+    return delete t.isRequired, /* @__PURE__ */ n("div", { className: b(), children: [
+      d ? /* @__PURE__ */ e("span", { className: m(), children: d }) : null,
       /* @__PURE__ */ n("div", { className: c(), children: [
         /* @__PURE__ */ e(
           I,
           {
             "data-dd-privacy": "mask",
-            ...a,
+            ...t,
             ref: y,
             type: s,
             className: p(),
@@ -102,22 +102,22 @@ const S = h({
         ),
         /* @__PURE__ */ n("div", { className: x(), children: [
           r && /* @__PURE__ */ e(
-            O,
+            C,
             {
               color: "inherit",
               size: "small",
-              label: d.formatMessage({
+              label: a.formatMessage({
                 id: "unity:component:common:loading:label",
                 defaultMessage: "Loading..."
               })
             }
           ),
-          f && /* @__PURE__ */ e(
+          i && /* @__PURE__ */ e(
             M,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
-              alt: d.formatMessage({
+              alt: a.formatMessage({
                 id: "unity:component:form-field:form-input:error:alt",
                 defaultMessage: "Error"
               })
@@ -126,24 +126,24 @@ const S = h({
           w && /* @__PURE__ */ e(
             W,
             {
-              title: d.formatMessage({
+              title: a.formatMessage({
                 id: "unity:component:common:clear:title",
                 defaultMessage: "Clear"
               }),
               color: "content.neutral.low",
               icon: "CloseOutlined",
               onPress: () => {
-                t == null || t();
+                f?.();
               }
             }
           )
         ] })
       ] }),
-      i ? /* @__PURE__ */ e("span", { className: g(), children: i }) : null
+      l ? /* @__PURE__ */ e("span", { className: g(), children: l }) : null
     ] });
   }
 );
-j.displayName = "Input";
+S.displayName = "Input";
 export {
-  j as Input
+  S as Input
 };

package/dist/esm/components/label/Label.js

@@ -1,10 +1,10 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
 import { uyTv as b } from "@payfit/unity-themes";
 import { mergeProps as f } from "react-aria";
-import { useSlottedContext as g, InputContext as N, Label as h } from "react-aria-components";
-import { useIntl as q } from "react-intl";
-const x = b({
+import { useSlottedContext as g, InputContext as x, Label as N } from "react-aria-components";
+import { useIntl as h } from "react-intl";
+const q = b({
   slots: {
     base: "uy:typography-body-strong uy:text-content-form-enabled uy:flex uy:gap-25",
     asterisk: "uy:text-content-danger",
@@ -23,33 +23,33 @@ const x = b({
   defaultVariants: {
     variant: "strong"
   }
-}), v = u(
-  ({ children: l, ...a }, i) => {
-    const s = q(), e = g(N), d = f(
-      { isRequired: e == null ? void 0 : e["aria-required"] },
+}), v = c(
+  ({ children: n, ...a }, l) => {
+    const e = h(), i = g(x), p = f(
+      { isRequired: i?.["aria-required"] },
       a
     ), {
       isRequired: t = !1,
       requiredVariant: o = "required",
-      ...p
-    } = d, { base: y, asterisk: m, optionalTag: c } = x();
-    return /* @__PURE__ */ r(
-      h,
+      ...d
+    } = p, { base: y, asterisk: m, optionalTag: u } = q();
+    return /* @__PURE__ */ s(
+      N,
       {
         "data-dd-privacy": "allow",
-        ...p,
-        ref: i,
+        ...d,
+        ref: l,
         className: y({ className: a.className }),
         children: [
-          l,
-          o === "required" && t && /* @__PURE__ */ r("span", { className: m(), children: [
+          n,
+          o === "required" && t && /* @__PURE__ */ s("span", { className: m(), children: [
             "*",
-            /* @__PURE__ */ n("span", { className: "uy:sr-only", children: s.formatMessage({
+            /* @__PURE__ */ r("span", { className: "uy:sr-only", children: e.formatMessage({
               id: "unity:component:label:required",
               defaultMessage: "required"
             }) })
           ] }),
-          o === "optional" && !t && /* @__PURE__ */ n("span", { className: c({ className: a.className }), children: s.formatMessage({
+          o === "optional" && !t && /* @__PURE__ */ r("span", { className: u({ className: a.className }), children: e.formatMessage({
             id: "unity:component:label:optional",
             defaultMessage: "(optional)"
           }) })