@payfit/unity-components 1.1.0 → 1.2.0

package/dist/esm/components/pagination/Pagination.js

@@ -1,170 +1,166 @@
-import { jsxs as T, jsx as o } from "react/jsx-runtime";
-import { forwardRef as q, useRef as E, useMemo as N } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { useId as W } from "react-aria";
-import { useIntl as $ } from "react-intl";
-import { useOverlayTriggerState as j } from "react-stately";
-import { usePagination as J } from "./hooks/use-pagination.js";
-import { PaginationEllipsis as K } from "./parts/PaginationEllipsis.js";
-import { PaginationJumpDialog as O } from "./parts/PaginationJumpDialog.js";
-import { PaginationLink as S } from "./parts/PaginationLink.js";
-import { PaginationNavButton as D } from "./parts/PaginationNavButton.js";
-import { generatePaginationWithWindow as x } from "./utils/pagination-window.js";
-const _ = R({
+import { jsxs as I, jsx as n } from "react/jsx-runtime";
+import { forwardRef as x, useRef as M, useMemo as T } from "react";
+import { uyTv as q } from "@payfit/unity-themes";
+import { useId as E } from "react-aria";
+import { useIntl as R } from "react-intl";
+import { useOverlayTriggerState as W } from "react-stately";
+import { usePagination as $ } from "./hooks/use-pagination.js";
+import { PaginationEllipsis as j } from "./parts/PaginationEllipsis.js";
+import { PaginationJumpDialog as J } from "./parts/PaginationJumpDialog.js";
+import { PaginationLink as K } from "./parts/PaginationLink.js";
+import { PaginationNavButton as y } from "./parts/PaginationNavButton.js";
+import { generatePaginationWithWindow as O } from "./utils/pagination-window.js";
+const S = q({
   slots: {
     base: "uy:flex uy:gap-100 uy:relative",
     pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
   }
-}), z = 7, B = q(
+}), H = 7, _ = x(
   ({
-    pageCount: i,
-    defaultPage: p,
-    currentPage: d,
-    onPageHover: l,
-    onPageChange: g,
-    onNextPress: m,
-    onPreviousPress: c,
-    ...A
-  }, L) => {
-    const v = W(), u = $(), y = d !== void 0 && g !== void 0 && p === void 0, { currentPage: s, goToPage: n } = J({
-      pageCount: i,
-      initialPage: y ? d : p,
-      onPageChange: g,
-      isControlled: y
-    }), f = j({}), r = E(/* @__PURE__ */ new Map()), h = N(
-      () => x(
-        i,
+    pageCount: t,
+    defaultPage: c,
+    currentPage: u,
+    onPageHover: b,
+    onPageChange: f,
+    onNextPress: P,
+    onPreviousPress: w,
+    ...D
+  }, A) => {
+    const p = E(), l = R(), v = u !== void 0 && f !== void 0 && c === void 0, { currentPage: s, goToPage: i } = $({
+      pageCount: t,
+      initialPage: v ? u : c,
+      onPageChange: f,
+      isControlled: v
+    }), m = W({}), r = M(/* @__PURE__ */ new Map()), L = T(
+      () => O(
+        t,
         s,
-        z
+        H
       ),
-      [i, s]
-    ), k = new Intl.NumberFormat(u.locale, {
+      [t, s]
+    ), h = new Intl.NumberFormat(l.locale, {
       notation: "standard"
-    }), F = (a) => {
-      n(a), f.close(), requestAnimationFrame(() => {
-        const e = r.current.get(a);
-        e && e.focus();
+    }), k = (e) => {
+      i(e), m.close(), requestAnimationFrame(() => {
+        const a = r.current.get(e);
+        a && a.focus();
       });
-    }, b = (a, e) => {
-      switch (a.key) {
+    }, d = (e, a) => {
+      switch (e.key) {
         case "ArrowLeft":
         case "ArrowUp":
-          a.preventDefault(), e > 1 && (n(e - 1), requestAnimationFrame(() => {
-            var t;
-            (t = r.current.get(e - 1)) == null || t.focus();
+          e.preventDefault(), a > 1 && (i(a - 1), requestAnimationFrame(() => {
+            r.current.get(a - 1)?.focus();
           }));
           break;
         case "ArrowRight":
         case "ArrowDown":
-          a.preventDefault(), e < i && (n(e + 1), requestAnimationFrame(() => {
-            var t;
-            (t = r.current.get(e + 1)) == null || t.focus();
+          e.preventDefault(), a < t && (i(a + 1), requestAnimationFrame(() => {
+            r.current.get(a + 1)?.focus();
           }));
           break;
         case "Home":
-          a.preventDefault(), n(1), requestAnimationFrame(() => {
-            var t;
-            (t = r.current.get(1)) == null || t.focus();
+          e.preventDefault(), i(1), requestAnimationFrame(() => {
+            r.current.get(1)?.focus();
           });
           break;
         case "End":
-          a.preventDefault(), n(i), requestAnimationFrame(() => {
-            var t;
-            (t = r.current.get(i)) == null || t.focus();
+          e.preventDefault(), i(t), requestAnimationFrame(() => {
+            r.current.get(t)?.focus();
           });
           break;
       }
-    }, w = {
-      paginationLabel: u.formatMessage({
+    }, g = {
+      paginationLabel: l.formatMessage({
         id: "unity:component:pagination:label",
         defaultMessage: "Pagination"
       }),
-      pageListLabel: u.formatMessage(
+      pageListLabel: l.formatMessage(
         {
           id: "unity:component:pagination:page-list:label",
           defaultMessage: "Page {current} of {total}"
         },
         {
           current: s,
-          total: i
+          total: t
         }
       )
-    }, { base: I, pagesList: M } = _();
-    return /* @__PURE__ */ T(
+    }, { base: N, pagesList: F } = S();
+    return /* @__PURE__ */ I(
       "nav",
       {
         "data-dd-privacy": "allow",
-        ...A,
-        ref: L,
-        className: I(),
-        "aria-labelledby": w.paginationLabel,
+        ...D,
+        ref: A,
+        className: N(),
+        "aria-labelledby": g.paginationLabel,
         children: [
-          /* @__PURE__ */ o(
-            O,
+          /* @__PURE__ */ n(
+            J,
             {
-              pageCount: i,
-              onJumpToPage: F,
-              state: f
+              pageCount: t,
+              onJumpToPage: k,
+              state: m
             }
           ),
-          /* @__PURE__ */ o(
-            D,
+          /* @__PURE__ */ n(
+            y,
             {
               variant: "previous",
               isDisabled: s === 1,
               onClick: () => {
-                n("previous"), c == null || c();
+                i("previous"), w?.();
               }
             }
           ),
-          /* @__PURE__ */ o("ul", { className: M(), "aria-label": w.pageListLabel, children: h.map(
-            (a, e) => a.type === "page" ? /* @__PURE__ */ o(
+          /* @__PURE__ */ n("ul", { className: F(), "aria-label": g.pageListLabel, children: L.map(
+            (e, a) => e.type === "page" ? /* @__PURE__ */ n(
               "li",
               {
-                "aria-setsize": i,
-                "aria-posinset": a.value,
-                children: /* @__PURE__ */ o(
-                  S,
+                "aria-setsize": t,
+                "aria-posinset": e.value,
+                children: /* @__PURE__ */ n(
+                  K,
                   {
-                    ref: (t) => {
-                      t ? r.current.set(a.value, t) : r.current.delete(a.value);
+                    ref: (o) => {
+                      o ? r.current.set(e.value, o) : r.current.delete(e.value);
                     },
                     onPress: () => {
-                      n(a.value);
+                      i(e.value);
                     },
-                    onHoverChange: (t) => {
-                      t && (l == null || l(a.value));
+                    onHoverChange: (o) => {
+                      o && b?.(e.value);
                     },
-                    onKeyDown: (t) => {
-                      b(t, a.value);
+                    onKeyDown: (o) => {
+                      d(o, e.value);
                     },
-                    isActive: a.value === s,
-                    value: a.value,
-                    children: k.format(a.value)
+                    isActive: e.value === s,
+                    value: e.value,
+                    children: h.format(e.value)
                   }
                 )
               },
-              `pagination-${v}-item-${e}`
-            ) : /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
-              K,
+              `pagination-${p}-item-${a}`
+            ) : /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+              j,
               {
-                value: a.value,
-                onKeyDown: (t) => {
-                  b(t, -1);
+                value: e.value,
+                onKeyDown: (o) => {
+                  d(o, -1);
                 },
                 onPress: () => {
-                  f.open();
+                  m.open();
                 }
               }
-            ) }, `pagination-${v}-item-${e}`)
+            ) }, `pagination-${p}-item-${a}`)
           ) }),
-          /* @__PURE__ */ o(
-            D,
+          /* @__PURE__ */ n(
+            y,
             {
               variant: "next",
-              isDisabled: s === i,
+              isDisabled: s === t,
               onClick: () => {
-                n("next"), m == null || m();
+                i("next"), P?.();
               }
             }
           )
@@ -173,8 +169,8 @@ const _ = R({
     );
   }
 );
-B.displayName = "Pagination";
+_.displayName = "Pagination";
 export {
-  B as Pagination,
-  _ as pagination
+  _ as Pagination,
+  S as pagination
 };

package/dist/esm/components/pagination/parts/PaginationJumpDialog.js

@@ -1,12 +1,12 @@
-import { jsxs as n, Fragment as N, jsx as o } from "react/jsx-runtime";
+import { jsxs as n, Fragment as F, jsx as o } from "react/jsx-runtime";
 import { useRef as l } from "react";
-import { uyTv as O } from "@payfit/unity-themes";
-import { useOverlayTrigger as P, useButton as D, useOverlay as B } from "react-aria";
-import { useIntl as I } from "react-intl";
-import { Button as c } from "../../button/Button.js";
-import { Icon as J } from "../../icon/Icon.js";
-import { Label as R } from "../../label/Label.js";
-const k = O({
+import { uyTv as N } from "@payfit/unity-themes";
+import { useOverlayTrigger as O, useButton as P, useOverlay as D } from "react-aria";
+import { useIntl as B } from "react-intl";
+import { Button as y } from "../../button/Button.js";
+import { Icon as I } from "../../icon/Icon.js";
+import { Label as J } from "../../label/Label.js";
+const R = N({
   slots: {
     jumpButton: "uy:sr-only uy:outline-none uy:focus:not-sr-only uy:focus:absolute uy:focus:bottom-full uy:focus:z-10 uy:focus:m-100 uy:focus:rounded-50 uy:focus:underline uy:focus:bg-transparent uy:focus:text-content-primary uy:focus:typography-action uy:focus:ring-2 uy:focus:ring-offset-2 uy:focus:ring-utility-focus-ring",
     jumpPopover: "uy:fixed uy:top-1/2 uy:left-1/2 uy:z-20 uy:transform uy:-translate-x-1/2 uy:-translate-y-1/2 uy:bg-surface-neutral uy:p-200 uy:rounded-200 uy:shadow-floating",
@@ -17,25 +17,25 @@ const k = O({
     jumpActions: "uy:flex uy:gap-150 uy:justify-end uy:mt-100"
   }
 });
-function $({
+function W({
   pageCount: t,
-  onJumpToPage: f,
+  onJumpToPage: c,
   state: e
 }) {
-  const u = I(), i = l(null), p = l(null), m = l(null), { triggerProps: d } = P(
+  const u = B(), i = l(null), p = l(null), m = l(null), { triggerProps: f } = O(
     { type: "dialog" },
     e,
     i
-  ), { buttonProps: g } = D(
+  ), { buttonProps: d } = P(
     {
-      ...d,
+      ...f,
       "aria-label": u.formatMessage({
         id: "unity:component:pagination:jump-dialog:button:text",
         defaultMessage: "Jump to page"
       })
     },
     i
-  ), { overlayProps: a } = B(
+  ), { overlayProps: a } = D(
     {
       isOpen: e.isOpen,
       onClose: e.close.bind(e),
@@ -43,27 +43,26 @@ function $({
       isDismissable: !0
     },
     p
-  ), b = (r) => {
-    var y;
+  ), g = (r) => {
     r.preventDefault();
-    const s = parseInt(((y = m.current) == null ? void 0 : y.value) || "", 10);
-    s >= 1 && s <= t && (f(s), e.close());
+    const s = parseInt(m.current?.value || "", 10);
+    s >= 1 && s <= t && (c(s), e.close());
   }, {
-    jumpButton: j,
-    jumpPopover: h,
-    jumpForm: v,
-    jumpFieldLabel: x,
-    jumpFieldWrapper: w,
-    jumpInput: M,
-    jumpActions: F
-  } = k();
-  return /* @__PURE__ */ n(N, { children: [
+    jumpButton: b,
+    jumpPopover: j,
+    jumpForm: h,
+    jumpFieldLabel: v,
+    jumpFieldWrapper: x,
+    jumpInput: w,
+    jumpActions: M
+  } = R();
+  return /* @__PURE__ */ n(F, { children: [
     /* @__PURE__ */ o(
       "button",
       {
-        ...g,
+        ...d,
         ref: i,
-        className: j(),
+        className: b(),
         "aria-expanded": e.isOpen ? "true" : "false",
         children: u.formatMessage({
           id: "unity:component:pagination:jump-dialog:button:text",
@@ -76,16 +75,16 @@ function $({
       {
         ...a,
         ref: p,
-        className: h(),
+        className: j(),
         "aria-label": u.formatMessage({
           id: "unity:component:pagination:jump-dialog:overlay:label",
           defaultMessage: "Jump to page"
         }),
-        children: /* @__PURE__ */ n("form", { onSubmit: b, className: v(), children: [
+        children: /* @__PURE__ */ n("form", { onSubmit: g, className: h(), children: [
           /* @__PURE__ */ o(
-            R,
+            J,
             {
-              className: x(),
+              className: v(),
               htmlFor: `jump-to-page-${a.id}-input`,
               children: u.formatMessage(
                 {
@@ -96,7 +95,7 @@ function $({
               )
             }
           ),
-          /* @__PURE__ */ n("div", { className: w(), children: [
+          /* @__PURE__ */ n("div", { className: x(), children: [
             /* @__PURE__ */ o(
               "input",
               {
@@ -104,7 +103,7 @@ function $({
                 type: "number",
                 min: 1,
                 max: t,
-                className: M(),
+                className: w(),
                 id: `jump-to-page-${a.id}-input`,
                 autoFocus: !0,
                 onKeyDown: (r) => {
@@ -113,7 +112,7 @@ function $({
               }
             ),
             /* @__PURE__ */ o(
-              J,
+              I,
               {
                 src: "CaretUpDownOutlined",
                 role: "presentation",
@@ -123,12 +122,12 @@ function $({
               }
             )
           ] }),
-          /* @__PURE__ */ n("div", { className: F(), children: [
-            /* @__PURE__ */ o(c, { variant: "ghost", onPress: e.close.bind(e), children: u.formatMessage({
+          /* @__PURE__ */ n("div", { className: M(), children: [
+            /* @__PURE__ */ o(y, { variant: "ghost", onPress: e.close.bind(e), children: u.formatMessage({
               id: "unity:component:pagination:jump-dialog:action:cancel",
               defaultMessage: "Cancel"
             }) }),
-            /* @__PURE__ */ o(c, { type: "submit", variant: "primary", children: u.formatMessage({
+            /* @__PURE__ */ o(y, { type: "submit", variant: "primary", children: u.formatMessage({
               id: "unity:component:pagination:jump-dialog:action:go",
               defaultMessage: "Go"
             }) })
@@ -139,5 +138,5 @@ function $({
   ] });
 }
 export {
-  $ as PaginationJumpDialog
+  W as PaginationJumpDialog
 };

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { forwardRef as u, useContext as y } from "react";
 import { uyTv as d } from "@payfit/unity-themes";
 import { OverlayTriggerStateContext as p, Heading as f } from "react-aria-components";
@@ -22,20 +22,20 @@ const v = d({
     }
   }
 }), b = u(
-  ({ title: t, isTitleSrOnly: n, displayCloseButton: a }, r) => {
-    const e = y(p), s = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: n });
+  ({ title: o, isTitleSrOnly: t, displayCloseButton: n }, a) => {
+    const r = y(p), s = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: t });
     return /* @__PURE__ */ m("div", { className: l(), children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ e(
         f,
         {
-          ref: r,
+          ref: a,
           slot: "title",
           className: i(),
           "data-dd-privacy": "allow",
-          children: t
+          children: o
         }
       ),
-      a && /* @__PURE__ */ o(
+      n && /* @__PURE__ */ e(
         h,
         {
           variant: "ghost",
@@ -46,7 +46,7 @@ const v = d({
             defaultMessage: "Close"
           }),
           icon: "CloseOutlined",
-          onClick: () => e == null ? void 0 : e.close()
+          onClick: () => r?.close()
         }
       )
     ] });

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as o, Fragment as m } from "react/jsx-runtime";
+import { jsxs as a, jsx as r, Fragment as m } from "react/jsx-runtime";
 import { forwardRef as b, useContext as f, useMemo as p } from "react";
 import { uyTv as g } from "@payfit/unity-themes";
 import { RadioGroupStateContext as v, Radio as x } from "react-aria-components";
@@ -30,33 +30,33 @@ const F = g({
     }
   }
 }), N = b(
-  ({ children: t, value: l, isDisabled: i, helperText: d, ...u }, n) => {
-    const { base: c, label: s } = F(), r = f(v), y = p(() => r != null && r.isReadOnly ? {
+  ({ children: d, value: l, isDisabled: i, helperText: t, ...u }, n) => {
+    const { base: s, label: c } = F(), o = f(v), y = p(() => o?.isReadOnly ? {
       "--radio-fill-color": "var(--uy-color-border-form-read-only)",
       "--radio-border-color": "var(--uy-color-border-form-disabled)"
     } : {
       "--radio-fill-color": "var(--uy-color-surface-primary-active)",
       "--radio-border-color": "var(--uy-color-border-form-active)"
-    }, [r == null ? void 0 : r.isReadOnly]);
+    }, [o?.isReadOnly]);
     return /* @__PURE__ */ a(R, { direction: "col", gap: "50", children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         x,
         {
           ...u,
           value: l,
           isDisabled: i,
-          className: ({ isFocusVisible: e }) => c({ isFocusVisible: e }),
+          className: ({ isFocusVisible: e }) => s({ isFocusVisible: e }),
           ref: n,
           children: ({ isSelected: e }) => /* @__PURE__ */ a(m, { children: [
-            e ? /* @__PURE__ */ o(
+            e ? /* @__PURE__ */ r(
               B,
               {
                 style: y
               }
-            ) : /* @__PURE__ */ o(
+            ) : /* @__PURE__ */ r(
               h,
               {
-                style: r != null && r.isReadOnly ? {
+                style: o?.isReadOnly ? {
                   // @ts-expect-error – annoying TS
                   "--radio-border-color": "var(--uy-color-border-form-disabled)"
                 } : {
@@ -64,11 +64,11 @@ const F = g({
                 }
               }
             ),
-            /* @__PURE__ */ o(S, { variant: "body", className: s(), children: t })
+            /* @__PURE__ */ r(S, { variant: "body", className: c(), children: d })
           ] })
         }
       ),
-      d ? /* @__PURE__ */ o(w, { children: d }) : null
+      t ? /* @__PURE__ */ r(w, { children: t }) : null
     ] });
   }
 );

package/dist/esm/components/select-field/SelectField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, JSX, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { LabelProps } from '../label/Label.js';
 import { SelectProps } from '../select/Select.js';
@@ -14,7 +14,7 @@ interface SelectFieldProps<TItems extends object, TFieldValues extends FieldValu
     /** Feedback text to display below the text field. */
     feedbackText?: ReactNode;
 }
-type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(props: SelectFieldProps<TItems, ZodInfer<TSchema>> & {
+type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(props: SelectFieldProps<TItems, StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => JSX.Element) & {
     displayName?: string;

package/dist/esm/components/select-field/SelectField.js

@@ -57,7 +57,10 @@ const v = h({
     }
   );
 }, H = S(function(e, r) {
-  return w(e, r);
+  return w(
+    e,
+    r
+  );
 });
 H.displayName = "SelectField";
 export {

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.js

@@ -1,41 +1,40 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as d, useRef as m } from "react";
-import { uyTv as f } from "@payfit/unity-themes";
-import { useToggleButtonGroup as s, mergeProps as g } from "react-aria";
-import { useToggleGroupState as v } from "react-stately";
-import { SelectableButtonGroupContext as y } from "./SelectableButtonGroup.context.js";
-const G = f({
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as c, useRef as s } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { useToggleButtonGroup as m, mergeProps as f } from "react-aria";
+import { useToggleGroupState as g } from "react-stately";
+import { SelectableButtonGroupContext as v } from "./SelectableButtonGroup.context.js";
+const y = d({
   base: "uy:flex uy:gap-100"
-}), S = d((e, r) => {
-  const t = m(null), a = v({
+}), G = c((e, l) => {
+  const t = s(null), o = g({
     ...e,
     selectedKeys: e.value,
     defaultSelectedKeys: e.defaultValue,
-    onSelectionChange: (c) => {
-      var l;
-      (l = e.onChange) == null || l.call(e, Array.from(c));
+    onSelectionChange: (i) => {
+      e.onChange?.(Array.from(i));
     }
-  }), { groupProps: n } = s(e, a, t), u = G({ className: e.className }), { ref: i } = g({ ref: t }, { ref: r });
-  return /* @__PURE__ */ o(
+  }), { groupProps: r } = m(e, o, t), n = y({ className: e.className }), { ref: u } = f({ ref: t }, { ref: l });
+  return /* @__PURE__ */ a(
     "div",
     {
-      ...n,
-      className: u,
-      ref: i,
+      ...r,
+      className: n,
+      ref: u,
       "data-dd-privacy": "allow",
       "aria-invalid": e.isInvalid,
-      children: /* @__PURE__ */ o(
-        y.Provider,
+      children: /* @__PURE__ */ a(
+        v.Provider,
         {
-          value: { state: a, isInvalid: e.isInvalid },
+          value: { state: o, isInvalid: e.isInvalid },
           children: e.children
         }
       )
     }
   );
 });
-S.displayName = "SelectableButtonGroup";
+G.displayName = "SelectableButtonGroup";
 export {
-  S as SelectableButtonGroup,
-  G as selectableButtonGroup
+  G as SelectableButtonGroup,
+  y as selectableButtonGroup
 };

package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.d.ts

@@ -1,6 +1,6 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, JSX, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { SelectableButtonGroupProps } from '../selectable-button-group/SelectableButtonGroup.js';
 import { LabelProps } from '../label/Label.js';
@@ -24,7 +24,7 @@ export type SelectableButtonGroupFieldProps<TFieldValues extends FieldValues = F
     /** The options to render as SelectableButton children. */
     children: ReactNode;
 };
-type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: SelectableButtonGroupFieldProps<ZodInfer<TSchema>> & {
+type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: SelectableButtonGroupFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
     ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
 }) => JSX.Element) & {
     displayName?: string;