@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/toggle-switch/ToggleSwitch.js

@@ -1,112 +1,111 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { SwitchField as m, SwitchButton as b } from "react-aria-components/Switch";
-import { useBreakpointListener as N } from "../../hooks/use-breakpoint-listener.js";
-const x = w({
-  slots: {
-    container: ["uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:group"],
-    mobileContainer: [
-      "uy:flex uy:flex-1 uy:justify-between uy:sm:justify-start uy:gap-200 uy:sm:gap-100 uy:group uy:my-75 uy:sm:my-0"
-    ],
-    textWrapper: ["uy:flex uy:flex-col uy:gap-50"],
-    label: [
-      "uy:typography-body uy:text-content-form-enabled uy:leading-4! uy:sm:leading-3!"
-    ],
-    hintText: ["uy:typography-body-small uy:text-content-neutral-low"],
-    indicator: [
-      "uy:p-50 uy:w-6.75 uy:h-4 uy:sm:w-500 uy:sm:h-300 uy:flex uy:items-center uy:shrink-0 uy:grow-0",
-      "uy:rounded-pill",
-      "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-disabled",
-      "uy:cursor-pointer uy:transition-colors uy:duration-200 uy:ease-in-out",
-      "uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
-      "uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled uy:group-data-[disabled]:cursor-not-allowed",
-      "uy:group-data-[focus-visible]:outline-2 uy:group-data-[focus-visible]:outline-offset-2 uy:group-data-[focus-visible]:outline-utility-focus-ring"
-    ],
-    knob: [
-      "uy:w-300 uy:h-300 uy:sm:w-200 uy:sm:h-200 uy:rounded-circle",
-      "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-enabled",
-      "uy:transition-all uy:duration-200 uy:ease-in-out",
-      'uy:group-data-[selected="true"]:translate-x-[90%]',
-      "uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
-      "uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled"
-    ]
-  },
-  variants: {
-    isDisabled: {
-      false: {
-        indicator: [
-          'uy:theme-legacy:group-data-[selected="true"]:bg-surface-form-active uy:theme-legacy:group-data-[selected="true"]:border-border-form-active',
-          'uy:theme-rebrand:group-data-[selected="true"]:bg-surface-form-active uy:theme-rebrand:group-data-[selected="true"]:border-surface-form-active',
-          'uy:theme-legacy:group-data-[selected="true"]:group-data-[pressed]:bg-surface-form-active',
-          'uy:theme-legacy:group-data-[selected="true"]:group-data-[pressed]:border-border-form-active',
-          'uy:theme-rebrand:group-data-[selected="true"]:group-data-[pressed]:bg-surface-primary-active',
-          'uy:theme-rebrand:group-data-[selected="true"]:group-data-[pressed]:border-border-primary-active'
-        ],
-        knob: [
-          "uy:theme-legacy:group-data-[selected=true]:border-border-inverted-enabled uy:theme-rebrand:group-data-[selected=true]:border-transparent",
-          "uy:group-data-[selected=true]:group-data-[pressed]:bg-surface-form-pressed",
-          "uy:group-data-[selected=true]:group-data-[pressed]:border-border-inverted-pressed"
-        ]
-      },
-      true: {
-        indicator: "",
-        knob: ""
-      }
-    }
-  }
-}), k = v(
-  ({
-    label: s,
-    helperText: r,
-    isLabelSrOnly: u = !1,
-    isDisabled: d,
-    ...g
-  }, o) => {
-    const {
-      container: t,
-      indicator: l,
-      knob: i,
-      textWrapper: y,
-      label: c,
-      hintText: n,
-      mobileContainer: f
-    } = x({ isDisabled: d }), h = N() === "xs", p = { ...g, role: "switch" };
-    return h ? /* @__PURE__ */ e(m, { ...p, className: "uy:contents", isDisabled: d, children: /* @__PURE__ */ e(b, { ref: o, className: t(), children: /* @__PURE__ */ a("div", { className: f(), children: [
-      /* @__PURE__ */ a(
-        "div",
-        {
-          className: y({
-            className: u ? "uy:sr-only" : ""
-          }),
-          "data-dd-privacy": "allow",
-          children: [
-            /* @__PURE__ */ e("span", { className: c(), children: s }),
-            r && /* @__PURE__ */ e("span", { className: n(), children: r })
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: l(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: i() }) })
-    ] }) }) }) : /* @__PURE__ */ e(m, { ...p, className: "uy:contents", isDisabled: d, children: /* @__PURE__ */ a(b, { className: t(), ref: o, children: [
-      /* @__PURE__ */ e("div", { className: l(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: i() }) }),
-      /* @__PURE__ */ a(
-        "div",
-        {
-          className: y({
-            className: u ? "uy:sr-only" : ""
-          }),
-          "data-dd-privacy": "allow",
-          children: [
-            /* @__PURE__ */ e("span", { className: c(), children: s }),
-            r && /* @__PURE__ */ e("span", { className: n(), children: r })
-          ]
-        }
-      )
-    ] }) });
-  }
-);
-k.displayName = "ToggleSwitch";
-export {
-  k as ToggleSwitch,
-  x as toggleSwitch
-};
+import { useBreakpointListener as e } from "../../hooks/use-breakpoint-listener.js";
+import { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { SwitchButton as a, SwitchField as o } from "react-aria-components/Switch";
+//#region src/components/toggle-switch/ToggleSwitch.tsx
+var s = n({
+	slots: {
+		container: ["uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:group"],
+		mobileContainer: ["uy:flex uy:flex-1 uy:justify-between uy:sm:justify-start uy:gap-200 uy:sm:gap-100 uy:group uy:my-75 uy:sm:my-0"],
+		textWrapper: ["uy:flex uy:flex-col uy:gap-50"],
+		label: ["uy:typography-body uy:text-content-form-enabled uy:leading-4! uy:sm:leading-3!"],
+		hintText: ["uy:typography-body-small uy:text-content-neutral-low"],
+		indicator: [
+			"uy:p-50 uy:w-6.75 uy:h-4 uy:sm:w-500 uy:sm:h-300 uy:flex uy:items-center uy:shrink-0 uy:grow-0",
+			"uy:rounded-pill",
+			"uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			"uy:cursor-pointer uy:transition-colors uy:duration-200 uy:ease-in-out",
+			"uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
+			"uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled uy:group-data-[disabled]:cursor-not-allowed",
+			"uy:group-data-[focus-visible]:outline-2 uy:group-data-[focus-visible]:outline-offset-2 uy:group-data-[focus-visible]:outline-utility-focus-ring"
+		],
+		knob: [
+			"uy:w-300 uy:h-300 uy:sm:w-200 uy:sm:h-200 uy:rounded-circle",
+			"uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-enabled",
+			"uy:transition-all uy:duration-200 uy:ease-in-out",
+			"uy:group-data-[selected=\"true\"]:translate-x-[90%]",
+			"uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
+			"uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled"
+		]
+	},
+	variants: { isDisabled: {
+		false: {
+			indicator: [
+				"uy:theme-legacy:group-data-[selected=\"true\"]:bg-surface-form-active uy:theme-legacy:group-data-[selected=\"true\"]:border-border-form-active",
+				"uy:theme-rebrand:group-data-[selected=\"true\"]:bg-surface-form-active uy:theme-rebrand:group-data-[selected=\"true\"]:border-surface-form-active",
+				"uy:theme-legacy:group-data-[selected=\"true\"]:group-data-[pressed]:bg-surface-form-active",
+				"uy:theme-legacy:group-data-[selected=\"true\"]:group-data-[pressed]:border-border-form-active",
+				"uy:theme-rebrand:group-data-[selected=\"true\"]:group-data-[pressed]:bg-surface-primary-active",
+				"uy:theme-rebrand:group-data-[selected=\"true\"]:group-data-[pressed]:border-border-primary-active"
+			],
+			knob: [
+				"uy:theme-legacy:group-data-[selected=true]:border-border-inverted-enabled uy:theme-rebrand:group-data-[selected=true]:border-transparent",
+				"uy:group-data-[selected=true]:group-data-[pressed]:bg-surface-form-pressed",
+				"uy:group-data-[selected=true]:group-data-[pressed]:border-border-inverted-pressed"
+			]
+		},
+		true: {
+			indicator: "",
+			knob: ""
+		}
+	} }
+}), c = t(({ label: t, helperText: n, isLabelSrOnly: c = !1, isDisabled: l, ...u }, d) => {
+	let { container: f, indicator: p, knob: m, textWrapper: h, label: g, hintText: _, mobileContainer: v } = s({ isDisabled: l }), y = e() === "xs", b = {
+		...u,
+		role: "switch"
+	};
+	return y ? /* @__PURE__ */ r(o, {
+		...b,
+		className: "uy:contents",
+		isDisabled: l,
+		children: /* @__PURE__ */ r(a, {
+			ref: d,
+			className: f(),
+			children: /* @__PURE__ */ i("div", {
+				className: v(),
+				children: [/* @__PURE__ */ i("div", {
+					className: h({ className: c ? "uy:sr-only" : "" }),
+					"data-dd-privacy": "allow",
+					children: [/* @__PURE__ */ r("span", {
+						className: g(),
+						children: t
+					}), n && /* @__PURE__ */ r("span", {
+						className: _(),
+						children: n
+					})]
+				}), /* @__PURE__ */ r("div", {
+					className: p(),
+					"data-dd-privacy": "mask",
+					children: /* @__PURE__ */ r("div", { className: m() })
+				})]
+			})
+		})
+	}) : /* @__PURE__ */ r(o, {
+		...b,
+		className: "uy:contents",
+		isDisabled: l,
+		children: /* @__PURE__ */ i(a, {
+			className: f(),
+			ref: d,
+			children: [/* @__PURE__ */ r("div", {
+				className: p(),
+				"data-dd-privacy": "mask",
+				children: /* @__PURE__ */ r("div", { className: m() })
+			}), /* @__PURE__ */ i("div", {
+				className: h({ className: c ? "uy:sr-only" : "" }),
+				"data-dd-privacy": "allow",
+				children: [/* @__PURE__ */ r("span", {
+					className: g(),
+					children: t
+				}), n && /* @__PURE__ */ r("span", {
+					className: _(),
+					children: n
+				})]
+			})]
+		})
+	});
+});
+c.displayName = "ToggleSwitch";
+//#endregion
+export { c as ToggleSwitch, s as toggleSwitch };

package/dist/esm/components/toggle-switch-field/TanstackToggleSwitchField.js

@@ -1,34 +1,20 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { TanstackFormFeedbackText as s } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormField as l } from "../form-field/TanstackFormField.js";
-import { TanstackToggleSwitch as T } from "../toggle-switch/TanstackToggleSwitch.js";
-function p({
-  label: t,
-  switchHelperText: r,
-  isDisabled: e,
-  isReadOnly: m,
-  isLabelSrOnly: c
-}, a) {
-  return /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ o(
-      T,
-      {
-        ref: a,
-        label: t,
-        helperText: r,
-        isLabelSrOnly: c,
-        ...{
-          isDisabled: e,
-          isReadOnly: m
-        }
-      }
-    ),
-    /* @__PURE__ */ o(s, {})
-  ] });
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackToggleSwitch as n } from "../toggle-switch/TanstackToggleSwitch.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/toggle-switch-field/TanstackToggleSwitchField.tsx
+function o({ label: r, switchHelperText: o, isDisabled: s, isReadOnly: c, isLabelSrOnly: l }, u) {
+	return /* @__PURE__ */ a(t, { children: [/* @__PURE__ */ i(n, {
+		ref: u,
+		label: r,
+		helperText: o,
+		isLabelSrOnly: l,
+		isDisabled: s,
+		isReadOnly: c
+	}), /* @__PURE__ */ i(e, {})] });
 }
-const d = n(p);
-d.displayName = "TanstackToggleSwitchField";
-export {
-  d as TanstackToggleSwitchField
-};
+var s = r(o);
+s.displayName = "TanstackToggleSwitchField";
+//#endregion
+export { s as TanstackToggleSwitchField };

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.js

@@ -1,60 +1,35 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { useFormContext as a } from "react-hook-form";
-import { FormField as x } from "../form-field/FormField.js";
-import { FormControl as w } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.js";
-import { ToggleSwitch as S } from "../toggle-switch/ToggleSwitch.js";
-function y({
-  name: o,
-  label: r,
-  defaultSelected: e,
-  switchHelperText: i,
-  isInvalid: m,
-  isLoading: l,
-  isDisabled: c,
-  isReadOnly: n,
-  isLabelSrOnly: p,
-  ...s
-}, f) {
-  const { control: d, watch: g } = a(), F = g(o);
-  return /* @__PURE__ */ h(
-    x,
-    {
-      control: d,
-      name: o,
-      className: "uy:flex uy:flex-col uy:gap-100",
-      ...{
-        isInvalid: m,
-        isLoading: l,
-        isDisabled: c,
-        isReadOnly: n
-      },
-      children: [
-        /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
-          S,
-          {
-            ref: f,
-            defaultSelected: e,
-            isSelected: F,
-            label: r,
-            isLabelSrOnly: p,
-            helperText: i,
-            ...s
-          }
-        ) }),
-        /* @__PURE__ */ t(T, {})
-      ]
-    }
-  );
+import { ToggleSwitch as e } from "../toggle-switch/ToggleSwitch.js";
+import { FormField as t } from "../form-field/FormField.js";
+import { FormControl as n } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as r } from "../form-field/parts/FormFeedbackText.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useFormContext as s } from "react-hook-form";
+//#region src/components/toggle-switch-field/ToggleSwitchField.tsx
+function c({ name: i, label: c, defaultSelected: l, switchHelperText: u, isInvalid: d, isLoading: f, isDisabled: p, isReadOnly: m, isLabelSrOnly: h, ...g }, _) {
+	let { control: v, watch: y } = s();
+	return /* @__PURE__ */ o(t, {
+		control: v,
+		name: i,
+		className: "uy:flex uy:flex-col uy:gap-100",
+		isInvalid: d,
+		isLoading: f,
+		isDisabled: p,
+		isReadOnly: m,
+		children: [/* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(e, {
+			ref: _,
+			defaultSelected: l,
+			isSelected: y(i),
+			label: c,
+			isLabelSrOnly: h,
+			helperText: u,
+			...g
+		}) }), /* @__PURE__ */ a(r, {})]
+	});
 }
-const j = u(function(r, e) {
-  return y(
-    r,
-    e
-  );
+var l = i(function(e, t) {
+	return c(e, t);
 });
-j.displayName = "ToggleSwitchField";
-export {
-  j as ToggleSwitchField
-};
+l.displayName = "ToggleSwitchField";
+//#endregion
+export { l as ToggleSwitchField };

package/dist/esm/components/toggle-switch-group/TanstackToggleSwitchGroup.js

@@ -1,23 +1,20 @@
-import { jsx as l } from "react/jsx-runtime";
+import { ToggleSwitchGroup as e } from "./ToggleSwitchGroup.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
 import { forwardRef as n } from "react";
-import { useFieldContext as c } from "../../hooks/tanstack-form-context.js";
-import { ToggleSwitchGroup as u } from "./ToggleSwitchGroup.js";
-const m = n(function({ onChange: a, ...e }, r) {
-  const t = c(), i = Array.isArray(t.state.value) ? t.state.value : [], s = t.state.meta.isTouched && !t.state.meta.isValid;
-  return /* @__PURE__ */ l(
-    u,
-    {
-      ...e,
-      ref: r,
-      value: i,
-      isInvalid: s,
-      onChange: (o) => {
-        t.handleChange(o), a?.(o);
-      }
-    }
-  );
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/toggle-switch-group/TanstackToggleSwitchGroup.tsx
+var i = n(function({ onChange: n, ...i }, a) {
+	let o = t(), s = Array.isArray(o.state.value) ? o.state.value : [], c = o.state.meta.isTouched && !o.state.meta.isValid;
+	return /* @__PURE__ */ r(e, {
+		...i,
+		ref: a,
+		value: s,
+		isInvalid: c,
+		onChange: (e) => {
+			o.handleChange(e), n?.(e);
+		}
+	});
 });
-m.displayName = "TanstackToggleSwitchGroup";
-export {
-  m as TanstackToggleSwitchGroup
-};
+i.displayName = "TanstackToggleSwitchGroup";
+//#endregion
+export { i as TanstackToggleSwitchGroup };

package/dist/esm/components/toggle-switch-group/ToggleSwitchGroup.js

@@ -1,109 +1,84 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { forwardRef as q, useState as z, useId as A, useRef as H, useCallback as J, isValidElement as B, cloneElement as w, Children as K } from "react";
-import { uyTv as Q } from "@payfit/unity-themes";
-import { Label as U } from "../label/Label.js";
-import { Text as j } from "../text/Text.js";
-const W = Q({
-  base: "uy:flex uy:flex-col uy:gap-50"
-});
-function X(i) {
-  if (!B(i)) return !1;
-  const o = i.props;
-  return typeof o == "object" && o !== null && "value" in o && typeof o.value == "string";
+import { Text as e } from "../text/Text.js";
+import { Label as t } from "../label/Label.js";
+import { Children as n, cloneElement as r, forwardRef as i, isValidElement as a, useCallback as o, useId as s, useRef as c, useState as l } from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/toggle-switch-group/ToggleSwitchGroup.tsx
+var p = u({ base: "uy:flex uy:flex-col uy:gap-50" });
+function m(e) {
+	if (!a(e)) return !1;
+	let t = e.props;
+	return typeof t == "object" && !!t && "value" in t && typeof t.value == "string";
 }
-const Y = q(
-  ({
-    label: i,
-    helperText: o,
-    feedbackText: r,
-    isDisabled: f,
-    isReadOnly: E,
-    isInvalid: a,
-    isRequired: y,
-    children: N,
-    requiredVariant: R,
-    value: m,
-    defaultValue: V,
-    onChange: g,
-    onFocus: C,
-    onBlur: G,
-    onFocusChange: h,
-    ...I
-  }, F) => {
-    const c = m !== void 0, [M, O] = z(
-      V ?? []
-    ), n = c ? m : M, v = A(), b = o ? `${v}-helper` : void 0, d = a && r ? `${v}-feedback` : void 0, $ = [b, d].filter(Boolean).join(" ") || void 0, S = H(!1), x = (e) => {
-      S.current = !0, C?.(e), h?.(!0);
-    }, D = (e) => {
-      S.current = !1, G?.(e), h?.(!1);
-    }, L = J(
-      (e) => {
-        let l;
-        n.includes(e) ? l = n.filter((s) => s !== e) : l = [...n, e], c || O(l), g?.(l);
-      },
-      [n, c, g]
-    ), P = () => K.map(N, (e, l) => {
-      if (!X(e)) return e;
-      const s = e, u = s.props, p = u.value;
-      return w(s, {
-        key: s.key ?? l,
-        isSelected: n.includes(p),
-        isDisabled: f ?? u.isDisabled,
-        isReadOnly: E ?? u.isReadOnly,
-        value: p,
-        onChange: () => {
-          L(p);
-        }
-      });
-    });
-    return /* @__PURE__ */ k(
-      "fieldset",
-      {
-        ...I,
-        ref: F,
-        className: W(),
-        "aria-describedby": $,
-        "aria-invalid": a || void 0,
-        "aria-required": y || void 0,
-        disabled: f,
-        onFocus: x,
-        onBlur: D,
-        children: [
-          /* @__PURE__ */ t("legend", { className: "uy:mb-25", children: /* @__PURE__ */ t(U, { isRequired: y, requiredVariant: R, children: i }) }),
-          o && /* @__PURE__ */ t(
-            j,
-            {
-              id: b,
-              variant: "bodySmall",
-              color: "content.neutral.low",
-              slot: "description",
-              children: o
-            }
-          ),
-          /* @__PURE__ */ t("div", { className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25", children: P() }),
-          a && r && (typeof r == "string" ? /* @__PURE__ */ t(
-            j,
-            {
-              id: d,
-              variant: "bodySmallStrong",
-              color: "content.form.invalid",
-              slot: "errorMessage",
-              children: r
-            }
-          ) : B(r) && w(
-            r,
-            {
-              id: d,
-              slot: "errorMessage"
-            }
-          ))
-        ]
-      }
-    );
-  }
-);
-Y.displayName = "ToggleSwitchGroup";
-export {
-  Y as ToggleSwitchGroup,
-  W as toggleSwitchGroup
-};
+var h = i(({ label: i, helperText: u, feedbackText: h, isDisabled: g, isReadOnly: _, isInvalid: v, isRequired: y, children: b, requiredVariant: x, value: S, defaultValue: C, onChange: w, onFocus: T, onBlur: E, onFocusChange: D, ...O }, k) => {
+	let A = S !== void 0, [j, M] = l(C ?? []), N = A ? S : j, P = s(), F = u ? `${P}-helper` : void 0, I = v && h ? `${P}-feedback` : void 0, L = [F, I].filter(Boolean).join(" ") || void 0, R = c(!1), z = (e) => {
+		R.current = !0, T?.(e), D?.(!0);
+	}, B = (e) => {
+		R.current = !1, E?.(e), D?.(!1);
+	}, V = o((e) => {
+		let t;
+		t = N.includes(e) ? N.filter((t) => t !== e) : [...N, e], A || M(t), w?.(t);
+	}, [
+		N,
+		A,
+		w
+	]), H = () => n.map(b, (e, t) => {
+		if (!m(e)) return e;
+		let n = e, i = n.props, a = i.value;
+		return r(n, {
+			key: n.key ?? t,
+			isSelected: N.includes(a),
+			isDisabled: g ?? i.isDisabled,
+			isReadOnly: _ ?? i.isReadOnly,
+			value: a,
+			onChange: () => {
+				V(a);
+			}
+		});
+	});
+	return /* @__PURE__ */ f("fieldset", {
+		...O,
+		ref: k,
+		className: p(),
+		"aria-describedby": L,
+		"aria-invalid": v || void 0,
+		"aria-required": y || void 0,
+		disabled: g,
+		onFocus: z,
+		onBlur: B,
+		children: [
+			/* @__PURE__ */ d("legend", {
+				className: "uy:mb-25",
+				children: /* @__PURE__ */ d(t, {
+					isRequired: y,
+					requiredVariant: x,
+					children: i
+				})
+			}),
+			u && /* @__PURE__ */ d(e, {
+				id: F,
+				variant: "bodySmall",
+				color: "content.neutral.low",
+				slot: "description",
+				children: u
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "uy:mt-100 uy:flex uy:flex-col uy:gap-150 uy:py-25",
+				children: H()
+			}),
+			v && h && (typeof h == "string" ? /* @__PURE__ */ d(e, {
+				id: I,
+				variant: "bodySmallStrong",
+				color: "content.form.invalid",
+				slot: "errorMessage",
+				children: h
+			}) : a(h) && r(h, {
+				id: I,
+				slot: "errorMessage"
+			}))
+		]
+	});
+});
+h.displayName = "ToggleSwitchGroup";
+//#endregion
+export { h as ToggleSwitchGroup, p as toggleSwitchGroup };