@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupEditView.js

@@ -0,0 +1,56 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useContext as g } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useIntl as x } from "react-intl";
+import { Button as v } from "../../button/Button.js";
+import { InlineFieldGroupContext as I } from "../InlineFieldGroup.context.js";
+const N = w({
+  slots: {
+    fieldset: "uy:border-0 uy:p-0 uy:m-0",
+    legend: "uy:sr-only",
+    fieldsContainer: "uy:flex uy:flex-col uy:gap-250",
+    hiddenButtons: "uy:sr-only"
+  }
+});
+function b({
+  children: d,
+  className: s,
+  legend: o
+}) {
+  const l = x(), t = g(I);
+  if (!t)
+    throw new Error(
+      "InlineFieldGroupEditView must be used within InlineFieldGroup"
+    );
+  const { mode: r, editViewId: a, isLoading: n, editViewRef: u } = t, i = r === "edit", {
+    fieldset: m,
+    legend: f,
+    fieldsContainer: c,
+    hiddenButtons: p
+  } = N(), y = l.formatMessage({
+    id: "unity:component:inline-field-group:save",
+    defaultMessage: "Save"
+  });
+  return /* @__PURE__ */ h(
+    "fieldset",
+    {
+      ref: u,
+      id: a,
+      className: m({ className: s }),
+      disabled: n,
+      hidden: !i,
+      "aria-hidden": !i,
+      "aria-busy": n,
+      ...!i && { inert: "" },
+      children: [
+        /* @__PURE__ */ e("legend", { className: f(), children: o }),
+        /* @__PURE__ */ e("div", { className: c(), children: d }),
+        /* @__PURE__ */ e("div", { className: p(), children: /* @__PURE__ */ e(v, { type: "submit", variant: "primary", children: y }) })
+      ]
+    }
+  );
+}
+b.displayName = "InlineFieldGroupEditView";
+export {
+  b as InlineFieldGroupEditView
+};

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+export interface InlineFieldGroupHeaderProps {
+    /**
+     * The title to display in the header.
+     * This will be used for aria-labelledby on the form element.
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle to display below the title.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Additional custom actions to render alongside the default buttons.
+     * These will be displayed between the title and the edit/save/cancel buttons.
+     */
+    customActions?: ReactNode;
+}
+/**
+ * InlineFieldGroupHeader renders the title and contextual action buttons for an InlineFieldGroup.
+ * It automatically switches between Edit button (read mode) and Save/Cancel buttons (edit mode)
+ * based on the parent InlineFieldGroup's current mode.
+ * The Save button integrates with TanStack Form and remains disabled until the form has changes.
+ * Cancel resets the form and returns to read mode.
+ * @example Basic usage
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({ defaultValues: { name: 'John' } })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.InlineFieldGroup>
+ *         <form.InlineFieldGroupHeader title="Contact Information" />
+ *         <form.InlineFieldGroupReadView>...</form.InlineFieldGroupReadView>
+ *         <form.InlineFieldGroupEditView legend="Edit">...</form.InlineFieldGroupEditView>
+ *       </form.InlineFieldGroup>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @example Custom button labels and actions
+ * ```tsx
+ * <form.InlineFieldGroup
+ *   editLabel="Modify"
+ *   saveLabel="Confirm"
+ *   cancelLabel="Discard"
+ *   onSavePress={() => trackAnalytics('save_clicked')}
+ * >
+ *   <form.InlineFieldGroupHeader
+ *     title="Contact Information"
+ *     customActions={<Button onPress={handleDelete}>Delete</Button>}
+ *   />
+ *   ...
+ * </form.InlineFieldGroup>
+ * ```
+ * @remarks
+ * - Must be used as a child of InlineFieldGroup
+ * - The title serves as the accessible label for the form via `aria-labelledby`
+ * - The Edit button uses `aria-expanded` and `aria-controls` for accessibility
+ * - Use `customActions` to add buttons that appear in both read and edit modes
+ * - Use `onEditPress`, `onSavePress`, `onCancelPress` for analytics or side effects
+ * @see {@link InlineFieldGroupHeaderProps} for all available props
+ * @see {@link InlineFieldGroup} for the parent container component
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
+ */
+export declare function InlineFieldGroupHeader({ title, subtitle, customActions, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldGroupHeader {
+    var displayName: string;
+}

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.js

@@ -0,0 +1,39 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { useContext as d } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import { useBreakpointListener as f } from "../../../hooks/use-breakpoint-listener.js";
+import { Text as i } from "../../text/Text.js";
+import { InlineFieldGroupContext as y } from "../InlineFieldGroup.context.js";
+import { InlineFieldGroupActions as h } from "./InlineFieldGroupActions.js";
+const x = m({
+  slots: {
+    base: "uy:flex uy:items-center uy:justify-between uy:w-full uy:gap-300",
+    titleContainer: "uy:flex uy:flex-col uy:gap-100 uy:flex-1"
+  }
+});
+function I({
+  title: l,
+  subtitle: t,
+  customActions: s
+}) {
+  const o = d(y), n = f(), a = n !== "xs" && n !== "sm";
+  if (!o)
+    throw new Error(
+      "InlineFieldGroupHeader must be used within InlineFieldGroup"
+    );
+  const { headerId: u } = o, { base: c, titleContainer: p } = x();
+  return /* @__PURE__ */ e("header", { className: c(), children: [
+    /* @__PURE__ */ e("hgroup", { className: p(), children: [
+      /* @__PURE__ */ r(i, { id: u, variant: "h3", color: "content.neutral", children: l }),
+      t && /* @__PURE__ */ r(i, { variant: "subtitle", color: "content.neutral", children: t })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "uy:flex uy:gap-100 uy:items-center", role: "group", children: [
+      s,
+      a && /* @__PURE__ */ r(h, { orientation: "horizontal" })
+    ] })
+  ] });
+}
+I.displayName = "InlineFieldGroupHeader";
+export {
+  I as InlineFieldGroupHeader
+};

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupReadView.d.ts

@@ -0,0 +1,56 @@
+import { PropsWithChildren } from 'react';
+export interface InlineFieldGroupReadViewProps extends PropsWithChildren {
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+}
+/**
+ * InlineFieldGroupReadView displays content only when the parent InlineFieldGroup is in read mode.
+ * Wrap read-only data displays (like DefinitionList) in this component to show them when not editing.
+ * The component automatically hides its content when entering edit mode using the `hidden` attribute
+ * and `inert` for proper accessibility, ensuring screen readers and keyboard navigation skip it.
+ * @example Basic usage with DefinitionList
+ * ```tsx
+ * import { useTanstackUnityForm, DefinitionList, DefinitionItem } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({ defaultValues: { email: 'john@example.com' } })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.InlineFieldGroup>
+ *         <form.InlineFieldGroupHeader title="Contact" />
+ *         <form.InlineFieldGroupReadView>
+ *           <form.Subscribe selector={state => state.values}>
+ *             {values => (
+ *               <DefinitionList>
+ *                 <DefinitionItem term="Email" description={values.email} />
+ *               </DefinitionList>
+ *             )}
+ *           </form.Subscribe>
+ *         </form.InlineFieldGroupReadView>
+ *         <form.InlineFieldGroupEditView legend="Edit contact">
+ *           <form.AppField name="email">
+ *             {field => <field.TextField label="Email" />}
+ *           </form.AppField>
+ *         </form.InlineFieldGroupEditView>
+ *       </form.InlineFieldGroup>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used as a child of InlineFieldGroup
+ * - Use `form.Subscribe` to display current form values that update after saving
+ * - The content remains in the DOM but is hidden with `hidden` and `inert` attributes in edit mode
+ * @see {@link InlineFieldGroupReadViewProps} for all available props
+ * @see {@link InlineFieldGroup} for the parent container component
+ * @see {@link InlineFieldGroupEditView} for the corresponding edit mode component
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
+ */
+export declare function InlineFieldGroupReadView({ children, className, }: InlineFieldGroupReadViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InlineFieldGroupReadView {
+    var displayName: string;
+}

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupReadView.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as d } from "react";
+import { InlineFieldGroupContext as t } from "../InlineFieldGroup.context.js";
+function l({
+  children: n,
+  className: o
+}) {
+  const i = d(t);
+  if (!i)
+    throw new Error(
+      "InlineFieldGroupReadView must be used within InlineFieldGroup"
+    );
+  const e = i.mode === "read";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o,
+      hidden: !e,
+      "aria-hidden": !e,
+      ...!e && { inert: "" },
+      children: n
+    }
+  );
+}
+l.displayName = "InlineFieldGroupReadView";
+export {
+  l as InlineFieldGroupReadView
+};

package/dist/esm/components/input/Input.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react';
+import { InputProps as AriaInputProps } from 'react-aria-components/Input';
+export interface InputProps extends Omit<AriaInputProps, 'prefix' | 'style' | 'className'> {
+    /**
+     * The type of the input field
+     * @default 'text'
+     */
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+    /** Element to display before the input field */
+    prefix?: ReactElement;
+    /** Element to display after the input field */
+    suffix?: ReactElement;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /**
+     * Clear button click handler
+     */
+    onClearButtonPress?: () => void;
+}
+/**
+ * The `Input` components displays a styled, single HTML `<input>` field whose type is text-compatible (`text`, `password`, `email`, `tel`, `url`, `search`), and follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
+ * @param {InputProps} props - Regular props from the `<input>` HTML element, plus state-related props
+ * @see {@link InputProps} for all available props
+ * @example
+ * ```tsx
+ * import { Input } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [value, setValue] = useState()
+ *
+ *   const handleInputChange = (e) => {
+ *     setValue(e.target.value)
+ *   }
+ *
+ *   return <Input type="text" placeholder="write something..." value={value} onChange={handleInputChange} />
+ * }
+ * ```
+ */
+declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };

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

@@ -0,0 +1,150 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { uyTv as h } from "@payfit/unity-themes";
+import { Input as I } from "react-aria-components/Input";
+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 C } from "../spinner/Spinner.js";
+const O = h({
+  slots: {
+    base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm: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-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm: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-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy:border-border-form-error uy:bg-surface-form-error",
+        prefix: "uy:bg-surface-form-error uy:border-border-form-error",
+        inputWrapper: "uy:bg-surface-form-error",
+        input: "uy:bg-surface-form-error",
+        state: "uy:text-content-form-error",
+        suffix: "uy:bg-surface-form-error uy:border-border-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly",
+        inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-readonly",
+        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+        prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled",
+        inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+        input: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+        suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+        prefix: "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
+        inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+        input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+        state: "uy:text-content-neutral-disabled",
+        suffix: "uy:border-border-form-enabled uy:bg-surface-neutral-low uy:text-content-form-enabled"
+      }
+    }
+  ]
+}), S = v(
+  ({
+    type: i = "text",
+    prefix: s,
+    suffix: l,
+    isInvalid: r,
+    isLoading: o,
+    isDisabled: u,
+    isReadOnly: t,
+    onClearButtonPress: y,
+    ...a
+  }, f) => {
+    const n = N(), {
+      base: b,
+      prefix: m,
+      inputWrapper: c,
+      input: p,
+      state: x,
+      suffix: g
+    } = O({
+      isInvalid: !!r,
+      isReadOnly: !!t,
+      isDisabled: !!u
+    }), w = a.value && !o && !t && !u;
+    return delete a.isRequired, /* @__PURE__ */ d("div", { className: b(), children: [
+      s ? /* @__PURE__ */ e("span", { className: m(), children: s }) : null,
+      /* @__PURE__ */ d("div", { className: c(), children: [
+        /* @__PURE__ */ e(
+          I,
+          {
+            "data-dd-privacy": "mask",
+            ...a,
+            ref: f,
+            type: i,
+            className: p(),
+            "aria-busy": o,
+            "aria-invalid": r,
+            readOnly: t,
+            disabled: u
+          }
+        ),
+        /* @__PURE__ */ d("div", { className: x(), children: [
+          o && /* @__PURE__ */ e(
+            C,
+            {
+              color: "inherit",
+              size: "small",
+              label: n.formatMessage({
+                id: "unity:component:common:loading:label",
+                defaultMessage: "Loading..."
+              })
+            }
+          ),
+          r && /* @__PURE__ */ e(
+            M,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: n.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          ),
+          w && /* @__PURE__ */ e(
+            W,
+            {
+              title: n.formatMessage({
+                id: "unity:component:common:clear:title",
+                defaultMessage: "Clear"
+              }),
+              color: "content.neutral.low",
+              icon: "CloseOutlined",
+              onPress: () => {
+                y?.();
+              }
+            }
+          )
+        ] })
+      ] }),
+      l ? /* @__PURE__ */ e("span", { className: g(), children: l }) : null
+    ] });
+  }
+);
+S.displayName = "Input";
+export {
+  S as Input
+};

package/dist/esm/components/input/TanstackInput.d.ts

@@ -0,0 +1,22 @@
+import { InputProps } from './Input.js';
+export type TanstackInputProps = Omit<InputProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackInput` is a controlled input wired to the TanStack Form field context.
+ * It is based on the Unity `Input` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="name">
+ *         {() => <TanstackInput placeholder="Your name" />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackInput: import('react').ForwardRefExoticComponent<TanstackInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackInput };

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

@@ -0,0 +1,38 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as I } from "../form-field/TanstackFormField.context.js";
+import { Input as b } from "./Input.js";
+const h = p(
+  ({ onClearButtonPress: r, onBlur: i, onChange: n, isReadOnly: l, isDisabled: d, ...s }, u) => {
+    const e = f(), t = I(), m = e.state.meta.isTouched && !e.state.meta.isValid, o = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c(
+      b,
+      {
+        ...s,
+        ref: u,
+        id: t.inputId,
+        value: e.state.value ?? "",
+        onChange: (a) => {
+          e.handleChange(a.target.value), n?.(a);
+        },
+        onBlur: (a) => {
+          e.handleBlur(), i?.(a);
+        },
+        onClearButtonPress: () => {
+          e.setValue(""), r?.();
+        },
+        isReadOnly: l,
+        isDisabled: d,
+        isInvalid: m,
+        "aria-labelledby": t.labelId,
+        "aria-describedby": o.length > 0 ? o : void 0,
+        "aria-details": t.contextualLinkId
+      }
+    );
+  }
+);
+h.displayName = "TanstackInput";
+export {
+  h as TanstackInput
+};

package/dist/esm/components/label/Label.d.ts

@@ -0,0 +1,17 @@
+import { LabelProps as AriaLabelProps } from 'react-aria-components/Label';
+export interface LabelProps extends AriaLabelProps {
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * The variant of the required label.
+     */
+    requiredVariant?: 'required' | 'optional';
+}
+/**
+ * FormLabel is a component that displays a label for a form field.
+ * It is used to provide context for the form field.
+ */
+declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Label };

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

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