@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

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

@@ -0,0 +1,79 @@
+import { jsxs as a, jsx as o, 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";
+import { Flex as R } from "../../flex/Flex.js";
+import { Text as S } from "../../text/Text.js";
+import B from "./radio-input-selected.svg.js";
+import h from "./radio-input-unselected.svg.js";
+import { RadioButtonHelper as w } from "./RadioButtonHelper.js";
+const F = g({
+  slots: {
+    base: [
+      "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-center uy:cursor-pointer",
+      "uy:data-[disabled]:cursor-not-allowed",
+      "uy:data-[readonly]:cursor-not-allowed"
+    ],
+    radio: [
+      "uy:border-border-form-enabled uy:border-solid uy:bg-surface-form-enabled",
+      "uy:group-data-[disabled]:border-border-form-disabled"
+    ],
+    label: [
+      "uy:text-content-neutral",
+      "uy:group-data-[disabled]:text-content-neutral-disabled",
+      "uy:group-data-[readonly]:text-content-neutral uy:group-data-[readonly]:cursor-text"
+    ]
+  },
+  variants: {
+    isFocusVisible: {
+      true: "uy:outline-none uy:ring-2 uy:ring-offset-2 uy:ring-utility-focus-ring"
+    }
+  }
+}), 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 ? {
+      "--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]);
+    return /* @__PURE__ */ a(R, { direction: "col", gap: "50", children: [
+      /* @__PURE__ */ o(
+        x,
+        {
+          ...u,
+          value: l,
+          isDisabled: i,
+          className: ({ isFocusVisible: e }) => c({ isFocusVisible: e }),
+          ref: n,
+          children: ({ isSelected: e }) => /* @__PURE__ */ a(m, { children: [
+            e ? /* @__PURE__ */ o(
+              B,
+              {
+                style: y
+              }
+            ) : /* @__PURE__ */ o(
+              h,
+              {
+                style: r != null && r.isReadOnly ? {
+                  // @ts-expect-error – annoying TS
+                  "--radio-border-color": "var(--uy-color-border-form-disabled)"
+                } : {
+                  "--radio-border-color": "var(--uy-color-border-form-enabled)"
+                }
+              }
+            ),
+            /* @__PURE__ */ o(S, { variant: "body", className: s(), children: t })
+          ] })
+        }
+      ),
+      d ? /* @__PURE__ */ o(w, { children: d }) : null
+    ] });
+  }
+);
+N.displayName = "RadioButton";
+export {
+  N as RadioButton,
+  F as radioButton
+};

package/dist/esm/components/radio-button-group/parts/RadioButtonHelper.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+export type RadioButtonHelperProps = PropsWithChildren;
+/**
+ * The `RadioButtonHelper` component provides additional context or instructions for radio button options.
+ * It displays as smaller, lower-contrast text positioned below the radio button to help users understand the option better.
+ * @example
+ * ```tsx
+ * import { RadioButton, RadioButtonHelper } from '@payfit/unity-components'
+ *
+ * <RadioButton value="option1">
+ *   Option 1
+ *   <RadioButtonHelper>Additional information about this option</RadioButtonHelper>
+ * </RadioButton>
+ * ```
+ */
+declare const RadioButtonHelper: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { RadioButtonHelper };

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

@@ -0,0 +1,19 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Text as a } from "../../text/Text.js";
+const l = e(
+  ({ children: o }, r) => /* @__PURE__ */ t(
+    a,
+    {
+      color: "content.neutral.low",
+      variant: "bodySmall",
+      className: "uy:ml-[28px]",
+      ref: r,
+      children: o
+    }
+  )
+);
+l.displayName = "RadioButtonHelper";
+export {
+  l as RadioButtonHelper
+};

package/dist/esm/components/radio-button-group/parts/radio-input-selected.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Radio input" }, /* @__PURE__ */ e.createElement("path", { id: "Background", d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z", fill: "white", stroke: "var(--radio-border-color, #0157B2)", strokeWidth: 1.25 }), /* @__PURE__ */ e.createElement("path", { id: "Foreground", d: "M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z", fill: "var(--radio-fill-color, #0157B2)" })));
+export {
+  o as default
+};

package/dist/esm/components/radio-button-group/parts/radio-input-unselected.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Radio input" }, /* @__PURE__ */ e.createElement("path", { id: "Background", d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z", fill: "white", stroke: "var(--radio-border-color, #CDCED6)", strokeWidth: 1.25 })));
+export {
+  o as default
+};

package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.d.ts

@@ -0,0 +1,47 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { LabelProps } from '../label/Label.js';
+/**
+ * RadioButtonGroupField component provides a form field with radio button group functionality.
+ * It integrates with React Hook Form for form state management and validation.
+ * @template TFieldValues - The type of the form values
+ * @template TName - The type of the field name
+ */
+interface RadioButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the radio button group. */
+    label: string;
+    /** Helper text to display below the radio button group. */
+    helperText?: ReactNode;
+    /** Whether the radio button group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the radio button group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the radio button group is invalid. */
+    isInvalid?: boolean;
+    /** Feedback text to display, typically used for error messages. */
+    feedbackText?: ReactNode;
+}
+/**
+ * A form field component that wraps a group of radio buttons.
+ *
+ * This component provides a complete form field with label, helper text, and validation feedback.
+ * It integrates with React Hook Form for form state management and validation.
+ * @example
+ * ```tsx
+ * <RadioButtonGroupField
+ *   name="fruit"
+ *   label="Choose your favorite fruit"
+ *   helperText="Select one option"
+ * >
+ *   <RadioButton value="Apple">Apple</RadioButton>
+ *   <RadioButton value="Banana">Banana</RadioButton>
+ *   <RadioButton value="Orange">Orange</RadioButton>
+ * </RadioButtonGroupField>
+ * @remarks
+ * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-radiobuttongroupfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/43631a-radio-group)
+ * ```
+ */
+declare const RadioButtonGroupField: import('react').ForwardRefExoticComponent<RadioButtonGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
+export { RadioButtonGroupField };

package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.js

@@ -0,0 +1,52 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useFormContext as F } from "react-hook-form";
+import { FormField as x } from "../form-field/FormField.js";
+import { FormControl as h } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as y } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as R } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as B } from "../form-field/parts/FormLabel.js";
+import { RadioButtonGroup as G } from "../radio-button-group/RadioButtonGroup.js";
+const N = u(
+  ({
+    children: m,
+    label: e,
+    isReadOnly: t,
+    isDisabled: i,
+    isInvalid: l,
+    isRequired: p,
+    name: n,
+    requiredVariant: c,
+    feedbackText: d,
+    helperText: a
+  }, s) => {
+    const { control: f } = F();
+    return /* @__PURE__ */ r(
+      x,
+      {
+        control: f,
+        name: n,
+        ...{
+          isRequired: p,
+          isInvalid: l,
+          isDisabled: i,
+          isReadOnly: t
+        },
+        ref: s,
+        className: "uy:gap-150",
+        children: [
+          /* @__PURE__ */ r("div", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+            /* @__PURE__ */ o(B, { requiredVariant: c, children: e }),
+            /* @__PURE__ */ o(R, { children: a }),
+            /* @__PURE__ */ o(y, { children: d })
+          ] }),
+          /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(G, { children: m }) })
+        ]
+      }
+    );
+  }
+);
+N.displayName = "RadioButtonGroupField";
+export {
+  N as RadioButtonGroupField
+};

package/dist/esm/components/search/Search.d.ts

@@ -0,0 +1,124 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ReactNode } from 'react';
+import { SearchFieldProps } from 'react-aria-components';
+export declare const search: import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+    feedbackText: string[];
+    closeButton: string[];
+}, undefined, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+    feedbackText: string[];
+    closeButton: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+    feedbackText: string[];
+    closeButton: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface SearchProps extends VariantProps<typeof search>, SearchFieldProps {
+    /**
+     * Use this when search results are being fetched asynchronously.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Text displayed below the search field, typically used for error messages.
+     * Only visible when isInvalid is true.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Custom placeholder text for the search input.
+     * @default "Search"
+     */
+    placeholder?: string;
+    /**
+     * A label used as aria-label for the search input
+     */
+    label: string;
+}
+/**
+ * The `Search` component enables users to search or filter content within your application. The component
+ * supports various states including loading, invalid, disabled, and read-only modes to handle different
+ * @param {SearchProps} props - The props for the Search component
+ * @see {@link SearchProps} for all available props
+ * @example
+ * ```tsx
+ * import { Search } from '@payfit/unity-components'
+ *
+ * function OnChangeExample() {
+ *   const [filteredItems, setFilteredItems] = useState(items)
+ *
+ *   const handleChange = (value) => {
+ *     setFilteredItems(
+ *       value !== '' ? items.filter(item => item.name.includes(value)) : items
+ *     )
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <Search onChange={handleChange} />
+ *       {filteredItems.map(item => (
+ *         <div key={item.id}>{item.name}</div>
+ *       ))}
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/search--docs)
+ */
+declare const Search: import('react').ForwardRefExoticComponent<SearchProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Search };

package/dist/esm/components/search/Search.js

@@ -0,0 +1,164 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { uyTv as M } from "@payfit/unity-themes";
+import { SearchField as N, Input as S, FieldError as I } from "react-aria-components";
+import { useIntl as k } from "react-intl";
+import { CircularIconButton as C } from "../icon-button/CircularIconButton.js";
+import { Icon as l } from "../icon/Icon.js";
+import { Spinner as T } from "../spinner/Spinner.js";
+const B = M({
+  slots: {
+    base: [
+      "uy:w-full uy:flex uy:gap-100 uy:border uy:border-solid uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:border-border-form-enabled uy:items-center",
+      "uy:enabled:border-border-form-enabled uy:enabled:bg-surface-danger-enabled",
+      "uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:focus-visible:border-border-form-focus uy:focus-visible:bg-surface-form-focus",
+      "uy:active:border-border-form-active",
+      "uy:group-data-[disabled=true]:border-border-form-disabled uy:group-data-[disabled=true]:bg-surface-form-disabled",
+      "uy:group-data-[invalid=true]:border-border-form-error uy:group-data-[invalid=true]:bg-surface-form-error"
+    ],
+    input: [
+      "uy:h-300 uy:typography-body uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
+      "uy:enabled:text-content-form-enabled",
+      "uy:hover:text-content-form-hover",
+      "uy:focus-visible:text-content-form-focus",
+      "uy:active:text-content-form-active",
+      "uy:group-data-[invalid=true]:bg-surface-form-error"
+    ],
+    icon: [
+      "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"
+    ],
+    invalidIcon: ["uy:hidden", "uy:group-data-[invalid=true]:block"],
+    wrapperState: ["uy:flex uy:items-center"],
+    feedbackText: [
+      "uy:typography-body-small-strong uy:text-content-form-invalid"
+    ],
+    closeButton: [
+      "uy:text-content-neutral-enabled uy:group-data-[empty=true]:hidden"
+    ]
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        base: "uy:bg-surface-form-disabled",
+        icon: "uy:text-content-neutral-lowest-disabled",
+        button: "uy:bg-surface-form-error uy:text-content-neutral-disabled",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only"
+      },
+      false: {
+        base: [
+          "uy:bg-surface-form-enabled",
+          "uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover"
+        ],
+        icon: "uy:text-content-neutral-lowest",
+        input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest"
+      }
+    }
+  }
+}), E = ({
+  intl: a,
+  placeholder: r,
+  isDisabled: o
+}) => o ? "" : r || a.formatMessage({
+  id: "unity:component:search:placeholder",
+  defaultMessage: "Search"
+}), j = w(
+  ({
+    isLoading: a = !1,
+    isInvalid: r,
+    isDisabled: o,
+    isReadOnly: u,
+    name: i,
+    placeholder: s,
+    feedbackText: d,
+    label: c,
+    ...f
+  }, y) => {
+    const {
+      base: b,
+      icon: m,
+      input: p,
+      invalidIcon: g,
+      wrapperState: v,
+      feedbackText: h,
+      closeButton: x
+    } = B({
+      isReadOnly: u
+    }), t = k();
+    return /* @__PURE__ */ n(
+      N,
+      {
+        "aria-label": c,
+        className: "uy:group",
+        name: i,
+        ref: y,
+        isInvalid: r,
+        isDisabled: o || u,
+        isReadOnly: u,
+        ...f,
+        children: [
+          /* @__PURE__ */ n("div", { className: b(), children: [
+            /* @__PURE__ */ e(
+              l,
+              {
+                src: "MagnifyingGlassOutlined",
+                className: m(),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ e(
+              S,
+              {
+                className: p(),
+                placeholder: E({ intl: t, placeholder: s, isDisabled: o })
+              }
+            ),
+            /* @__PURE__ */ n("div", { className: v(), children: [
+              /* @__PURE__ */ e(
+                l,
+                {
+                  className: g(),
+                  src: "WarningCircleOutlined",
+                  color: "content.form.invalid",
+                  alt: t.formatMessage({
+                    id: "unity:component:form-field:form-input:error:alt",
+                    defaultMessage: "Error"
+                  })
+                }
+              ),
+              a && /* @__PURE__ */ e(
+                T,
+                {
+                  label: t.formatMessage({
+                    id: "unity:component:common:loading:label",
+                    defaultMessage: "Loading..."
+                  }),
+                  color: "primary",
+                  size: "small",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ e(
+                C,
+                {
+                  asElement: "button",
+                  title: t.formatMessage({
+                    id: "unity:component:common:clear:title",
+                    defaultMessage: "Clear"
+                  }),
+                  className: x(),
+                  icon: "CloseOutlined"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e(I, { className: h(), children: d })
+        ]
+      }
+    );
+  }
+);
+j.displayName = "Search";
+export {
+  j as Search,
+  B as search
+};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useRadioGroup as n } from "react-aria";
+import { useRadioGroupState as i } from "react-stately";
+import { SegmentedButtonGroupProvider as a } from "./SegmentedButtonGroups.context.js";
+const p = (o) => {
+  const { children: e } = o, t = i(o), { radioGroupProps: u } = n(
+    { ...o, orientation: "horizontal" },
+    t
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...u,
+      className: "uy:bg-surface-neutral-low uy:pl-50 uy:pr-50 uy:pt-50 uy:pb-50 uy:flex uy:gap-50 uy:rounded-75 uy:w-fit",
+      children: /* @__PURE__ */ r(a, { state: t, children: e })
+    }
+  );
+};
+p.displayName = "SegmentedButtonGroup";
+export {
+  p as SegmentedButtonGroup
+};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as r } from "react";
+const n = r({
+  state: {}
+});
+function i({
+  children: t,
+  state: e
+}) {
+  return /* @__PURE__ */ o(n.Provider, { value: { state: e }, children: t });
+}
+export {
+  n as SegmentedButtonGroupContext,
+  i as SegmentedButtonGroupProvider
+};

package/dist/esm/components/segmented-button-group/parts/ToggleButton.js

@@ -0,0 +1,122 @@
+import { jsxs as c, jsx as t, Fragment as b } from "react/jsx-runtime";
+import { forwardRef as h, useContext as x, useRef as v } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useRadio as P, useFocusRing as L, VisuallyHidden as I, mergeProps as N } from "react-aria";
+import { useIntl as V } from "react-intl";
+import { Icon as F } from "../../icon/Icon.js";
+import { Spinner as R } from "../../spinner/Spinner.js";
+import { SegmentedButtonGroupContext as S } from "../SegmentedButtonGroups.context.js";
+const B = w({
+  slots: {
+    base: [
+      "uy:rounded-50 uy:pt-50 uy:pb-50 uy:pr-150 uy:flex uy:gap-25",
+      "uy:active:gb-surface-neutral-pressed"
+    ],
+    wrapper: [
+      "uy:flex uy:gap-50 uy:items-center uy:typography-action",
+      "uy:active:text-content-neutral-pressed"
+    ]
+  },
+  variants: {
+    isSelected: {
+      true: { base: "uy:bg-surface-neutral-enabled uy:shadow-raising" }
+    },
+    isLoading: {
+      true: {
+        base: "uy:bg-surface-neutral-disabled uy:cursor-not-allowed",
+        wrapper: "uy:text-content-inverted-disabled"
+      }
+    },
+    isFocusVisible: {
+      true: {
+        base: "uy:outline-none uy:ring-2 uy:ring-ring uy:ring-offset-2 uy:ring-utility-focus-ring"
+      }
+    },
+    hasPrefixIcon: { true: "", false: "" }
+  },
+  compoundVariants: [
+    {
+      isLoading: !1,
+      isSelected: !1,
+      className: {
+        base: "uy:hover:bg-surface-neutral-hover",
+        wrapper: "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover"
+      }
+    },
+    {
+      isLoading: !0,
+      hasPrefixIcon: !1,
+      className: { base: "uy:pl-150 uy:cursor-not-allowed" }
+    },
+    {
+      isLoading: !0,
+      hasPrefixIcon: !0,
+      className: { base: "uy:pl-150 uy:cursor-not-allowed" }
+    },
+    {
+      isLoading: !1,
+      hasPrefixIcon: !1,
+      className: { base: "uy:pl-150 uy:cursor-pointer" }
+    },
+    {
+      isLoading: !1,
+      hasPrefixIcon: !0,
+      className: { base: "uy:pl-50 uy:cursor-pointer" }
+    }
+  ],
+  defaultVariants: {
+    isSelected: !1,
+    isLoading: !1,
+    hasPrefixIcon: !1
+  }
+}), C = ({
+  intl: r,
+  children: n,
+  isLoading: o,
+  prefixIcon: e,
+  isSelected: s
+}) => o ? /* @__PURE__ */ t(
+  R,
+  {
+    label: r.formatMessage({
+      id: "unity:component:common:loading:label",
+      defaultMessage: "Loading..."
+    }),
+    color: "inherit",
+    size: "small"
+  }
+) : /* @__PURE__ */ c(b, { children: [
+  e ? /* @__PURE__ */ t(
+    F,
+    {
+      src: s ? `${e}Filled` : `${e}Outlined`,
+      color: s ? "content.neutral" : "content.neutral.low",
+      role: "presentation"
+    }
+  ) : null,
+  n
+] }), T = h(
+  (r, n) => {
+    const { children: o, value: e, prefixIcon: s, isLoading: a } = r, { state: u } = x(S), i = v(null), { inputProps: d } = P(r, u, i), { focusProps: f, isFocusVisible: p } = L(), y = V(), l = u.selectedValue === e, { base: g, wrapper: m } = B({
+      isSelected: l,
+      hasPrefixIcon: !!s,
+      isLoading: a,
+      isFocusVisible: p
+    });
+    return /* @__PURE__ */ c("label", { ref: n, className: g(), "aria-disabled": a, children: [
+      /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
+        "input",
+        {
+          ...N(d, f),
+          ref: i,
+          disabled: a
+        }
+      ) }),
+      /* @__PURE__ */ t("span", { className: m(), children: C({ intl: y, children: o, isLoading: a, isSelected: l, prefixIcon: s }) })
+    ] });
+  }
+);
+T.displayName = "ToggleButton";
+export {
+  T as ToggleButton
+};