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

package/dist/esm/components/checkbox-field/CheckboxField.mjs

@@ -1,61 +0,0 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { useFormContext as k } from "react-hook-form";
-import { Checkbox as C } from "../checkbox/Checkbox.mjs";
-import { FormField as y } from "../form-field/FormField.mjs";
-import { FormControl as j } from "../form-field/parts/FormControl.mjs";
-import { FormFeedbackText as w } from "../form-field/parts/FormFeedbackText.mjs";
-function N({
-  name: o,
-  children: e,
-  defaultSelected: r,
-  helperText: m,
-  contextualLink: c,
-  isRequired: i,
-  isInvalid: l,
-  isLoading: n,
-  isDisabled: f,
-  isReadOnly: s,
-  requiredVariant: p,
-  ...x
-}, d) {
-  const { control: F, watch: a } = k(), u = a(o);
-  return /* @__PURE__ */ h(
-    y,
-    {
-      control: F,
-      name: o,
-      className: "uy-flex uy-flex-col uy-gap-100",
-      ...{
-        isRequired: i,
-        isInvalid: l,
-        isLoading: n,
-        isDisabled: f,
-        isReadOnly: s
-      },
-      children: [
-        /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(
-          C,
-          {
-            ref: d,
-            defaultSelected: r,
-            isSelected: u,
-            requiredVariant: p,
-            helperText: m,
-            feedbackText: /* @__PURE__ */ t(w, {}),
-            ...x,
-            children: e
-          }
-        ) }),
-        c
-      ]
-    }
-  );
-}
-const P = b(function(e, r) {
-  return N(e, r);
-});
-P.displayName = "CheckboxField";
-export {
-  P as CheckboxField
-};

package/dist/esm/components/checkbox-group/CheckboxGroup.d.mts

@@ -1,65 +0,0 @@
-import { ReactNode } from 'react';
-import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-export declare const checkboxGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CheckboxGroupProps extends VariantProps<typeof checkboxGroup>, Omit<AriaCheckboxGroupProps, 'className' | 'class'> {
-    /** The label for the checkbox group. */
-    label: string;
-    /** Helper text to display below the checkbox group. */
-    helperText?: ReactNode;
-    /** Feedback text to display below the checkbox group. */
-    feedbackText?: ReactNode;
-    /** The default selected values of the checkbox group. */
-    defaultValue?: string[];
-    /** The current selected values of the checkbox group (controlled). */
-    value?: string[];
-    /** Whether the checkbox group is disabled. */
-    isDisabled?: boolean;
-    /** Whether the checkbox group is read-only. */
-    isReadOnly?: boolean;
-    /** Whether the checkbox group is invalid. */
-    isInvalid?: boolean;
-    /** Whether the checkbox group is required. */
-    isRequired?: boolean;
-    /** Whether the checkbox group is loading. */
-    isLoading?: boolean;
-    /** The variant of the required indicator. */
-    requiredVariant?: 'required' | 'optional';
-    /** Callback when the selection changes. */
-    onChange?: (value: string[]) => void;
-    /**
-     * Handler called when the checkbox receives focus.
-     */
-    onFocus?: AriaCheckboxGroupProps['onFocus'];
-    /**
-     * Handler called when the checkbox loses focus.
-     */
-    onBlur?: AriaCheckboxGroupProps['onBlur'];
-    /**
-     * Handler that is called when the element's focus status changes.
-     * @param isFocused
-     */
-    onFocusChange?: (isFocused: boolean) => void;
-    children: ReactNode;
-}
-/**
- * The `CheckboxGroup` component is an accessible group of related checkboxes.
- * It provides a way to select multiple options from a list of choices.
- * @param {CheckboxGroupProps} props - The props for the `CheckboxGroup` component
- * @example
- * ```tsx
- * import { CheckboxGroup, Checkbox } from '@payfit/unity-components'
- *
- * <CheckboxGroup
- *   label="Notification preferences"
- *   helperText="Choose how you want to receive notifications"
- * >
- *   <Checkbox value="email">Email notifications</Checkbox>
- *   <Checkbox value="sms">SMS notifications</Checkbox>
- *   <Checkbox value="push">Push notifications</Checkbox>
- * </CheckboxGroup>
- * ```
- * @see {@link CheckboxProps} for all available props
- */
-declare const CheckboxGroup: import('react').ForwardRefExoticComponent<CheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
-export { CheckboxGroup };

package/dist/esm/components/checkbox-group/CheckboxGroup.mjs

@@ -1,73 +0,0 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { forwardRef as d, isValidElement as x, cloneElement as h } from "react";
-import { CheckboxGroup as g } from "react-aria-components";
-import { tv as b } from "tailwind-variants";
-import { Label as v } from "../label/Label.mjs";
-import { Text as c } from "../text/Text.mjs";
-const G = b({
-  base: "uy-flex uy-flex-col uy-gap-50"
-}), C = d(
-  ({
-    label: t,
-    helperText: l,
-    feedbackText: o,
-    isDisabled: e,
-    isReadOnly: n,
-    isInvalid: m,
-    isRequired: s,
-    isLoading: a,
-    children: p,
-    requiredVariant: i,
-    ...u
-  }, y) => /* @__PURE__ */ f(
-    g,
-    {
-      ...{
-        isDisabled: e,
-        isReadOnly: n,
-        isInvalid: m,
-        isRequired: s,
-        isLoading: a
-      },
-      ...u,
-      ref: y,
-      className: G(),
-      children: [
-        t && /* @__PURE__ */ r(v, { isRequired: s, requiredVariant: i, children: t }),
-        l && /* @__PURE__ */ r(
-          c,
-          {
-            variant: "bodySmall",
-            color: "content.neutral.low",
-            slot: "description",
-            children: l
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: "uy-mt-100 uy-flex uy-flex-col uy-gap-150 uy-py-25",
-            "data-dd-privacy": "mask",
-            children: p
-          }
-        ),
-        m && (typeof o == "string" ? /* @__PURE__ */ r(
-          c,
-          {
-            variant: "bodySmallStrong",
-            color: "content.form.invalid",
-            slot: "errorMessage",
-            children: o
-          }
-        ) : x(o) && h(o, {
-          slot: "errorMessage"
-        }))
-      ]
-    }
-  )
-);
-C.displayName = "CheckboxGroup";
-export {
-  C as CheckboxGroup,
-  G as checkboxGroup
-};

package/dist/esm/components/checkbox-group-field/CheckboxGroupField.d.mts

@@ -1,79 +0,0 @@
-import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
-import { Schema } from '../../hooks/use-form.types.mjs';
-import { CheckboxGroupProps } from '../checkbox-group/CheckboxGroup.mjs';
-import { LabelProps } from '../label/Label.mjs';
-interface FieldProps<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 checkbox group. */
-    label: string;
-    /** Helper text to display below the checkbox group. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the checkbox group. */
-    contextualLink?: ReactNode;
-    /** The default selected values of the checkbox group. */
-    defaultValue?: string[];
-    /** Whether the checkbox group is disabled. */
-    isDisabled?: boolean;
-    /** Whether the checkbox group is read-only. */
-    isReadOnly?: boolean;
-    /** Whether the checkbox group is invalid. */
-    isInvalid?: boolean;
-    /** Whether the checkbox group is loading. */
-    isLoading?: boolean;
-    /** Callback when the selection changes. */
-    onChange?: (value: string[]) => void;
-    /**
-     * Handler called when the checkbox receives focus.
-     */
-    onFocus?: CheckboxGroupProps['onFocus'];
-    /**
-     * Handler called when the checkbox loses focus.
-     */
-    onBlur?: CheckboxGroupProps['onBlur'];
-    /**
-     * Handler that is called when the element's focus status changes.
-     * @param isFocused
-     */
-    onFocusChange?: (isFocused: boolean) => void;
-}
-export type CheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
-type CheckboxGroupFieldComponent = (<TSchema extends Schema>(props: CheckboxGroupFieldProps<ZodInfer<TSchema>> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => JSX.Element) & {
-    displayName?: string;
-};
-/**
- * The `CheckboxGroupField` component renders a group of related checkboxes that can be used in forms.
- * It integrates with the `Form` component automatically and provides form validation, helper text,
- * and error feedback.
- * @example
- * ```tsx
- * const schema = z.object({
- *   preferences: z.array(z.string())
- * })
- *
- * function MyForm() {
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <CheckboxGroupField<typeof schema>
- *         name="preferences"
- *         label="Select your preferences"
- *         helperText="Choose all that apply"
- *       >
- *         <Checkbox value="email">Email notifications</Checkbox>
- *         <Checkbox value="sms">SMS notifications</Checkbox>
- *       </CheckboxGroupField>
- *     </Form>
- *   )
- * }
- * ```
- * @note The schema type parameter is needed to ensure type safety with the form's schema.
- * If you omit it, the `name` prop will not be type-safe.
- */
-declare const CheckboxGroupField: CheckboxGroupFieldComponent;
-export { CheckboxGroupField };

package/dist/esm/components/checkbox-group-field/CheckboxGroupField.mjs

@@ -1,54 +0,0 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { forwardRef as C } from "react";
-import { useFormContext as a } from "react-hook-form";
-import { CheckboxGroup as G } from "../checkbox-group/CheckboxGroup.mjs";
-import { FormField as j } from "../form-field/FormField.mjs";
-import { FormControl as w } from "../form-field/parts/FormControl.mjs";
-import { FormFeedbackText as y } from "../form-field/parts/FormFeedbackText.mjs";
-function P({
-  name: o,
-  label: r,
-  defaultValue: e,
-  helperText: m,
-  contextualLink: c,
-  isRequired: i,
-  isInvalid: n,
-  isLoading: p,
-  isDisabled: f,
-  isReadOnly: l,
-  requiredVariant: d,
-  children: s,
-  ...u
-}, x) {
-  const { control: F, watch: h } = a(), b = h(o);
-  return /* @__PURE__ */ k(j, { control: F, name: o, ...{
-    isRequired: i,
-    isInvalid: n,
-    isLoading: p,
-    isDisabled: f,
-    isReadOnly: l
-  }, children: [
-    /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
-      G,
-      {
-        ref: x,
-        label: r,
-        defaultValue: e,
-        value: b,
-        helperText: m,
-        feedbackText: /* @__PURE__ */ t(y, {}),
-        requiredVariant: d,
-        ...u,
-        children: s
-      }
-    ) }),
-    c
-  ] });
-}
-const T = C(function(r, e) {
-  return P(r, e);
-});
-T.displayName = "CheckboxGroupField";
-export {
-  T as CheckboxGroupField
-};

package/dist/esm/components/collapsible/Collapsible.d.mts

@@ -1,33 +0,0 @@
-import { ReactNode } from 'react';
-import { DisclosureProps } from 'react-aria-components';
-export interface CollapsibleProps extends Omit<DisclosureProps, 'isDisabled' | 'defaultExpanded' | 'className'> {
-    /**
-     * The content of the collapsible component.
-     * Typically includes a CollapsibleTitle and CollapsibleContent.
-     */
-    children: ReactNode;
-    /**
-     * Controls whether the collapsible is expanded by default.
-     * @default false
-     */
-    isExpanded?: boolean;
-}
-/**
- * @description
- * The Collapsible component provides an expandable/collapsible container that can show or hide content.
- * It's typically used to organize information in a space-efficient way, allowing users to focus on relevant content.
- * @example
- * ```tsx
- * <Collapsible>
- *   <CollapsibleTitle>Section Title</CollapsibleTitle>
- *   <CollapsibleContent>
- *     Content that can be shown or hidden
- *   </CollapsibleContent>
- * </Collapsible>
- * ```
- * @component
- * @see {@link CollapsibleTitle} - The clickable title component that toggles the expanded state
- * @see {@link CollapsibleContent} - The content component that is shown/hidden based on the expanded state
- */
-declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Collapsible };

package/dist/esm/components/collapsible/parts/CollapsibleContent.d.mts

@@ -1,36 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * @description
- * The CollapsibleContent component renders the content that is shown or hidden
- * when the parent Collapsible component is expanded or collapsed.
- */
-export interface CollapsibleContentProps {
-    /**
-     * The content to be shown or hidden.
-     */
-    children: ReactNode;
-}
-/**
- * The content component for a Collapsible.
- *
- * This component renders a DisclosurePanel that shows or hides its content
- * based on the expanded state of the parent Collapsible component.
- * @example
- * ```tsx
- * <Collapsible>
- *   <CollapsibleTitle>Section Title</CollapsibleTitle>
- *   <CollapsibleContent>
- *     This content will be shown or hidden based on the expanded state.
- *   </CollapsibleContent>
- * </Collapsible>
- * ```
- * @component
- * @see {@link Collapsible} - The parent component
- * @see {@link CollapsibleTitle} - The title component that toggles the expanded state
- * @param {CollapsibleContentProps} props - The component props
- * @param {ReactNode} props.children - The content to be shown or hidden
- * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
- * @returns {JSX.Element} The rendered CollapsibleContent component
- */
-declare const CollapsibleContent: import('react').ForwardRefExoticComponent<CollapsibleContentProps & import('react').RefAttributes<HTMLDivElement>>;
-export { CollapsibleContent };

package/dist/esm/components/collapsible/parts/CollapsibleTitle.d.mts

@@ -1,39 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * @description
- * The CollapsibleTitle component renders the clickable header of a Collapsible component.
- * It displays a title with an icon that rotates based on the expanded state.
- * @example
- * ```tsx
- * <Collapsible>
- *   <CollapsibleTitle>Section Title</CollapsibleTitle>
- *   <CollapsibleContent>Content</CollapsibleContent>
- * </Collapsible>
- * ```
- * @component
- * @see {@link Collapsible} - The parent component
- * @see {@link CollapsibleContent} - The content component that is shown/hidden
- */
-interface CollapsibleTitleProps {
-    /**
-     * The content of the collapsible title.
-     */
-    children: ReactNode;
-    /**
-     * Optional content to display after the title.
-     */
-    suffix?: ReactNode;
-}
-/**
- * The title component for a Collapsible.
- *
- * This component renders a heading with a button that toggles the expanded state of the parent Collapsible.
- * It displays an icon that rotates based on the expanded state to indicate the current state.
- * @param {CollapsibleTitleProps} props - The component props
- * @param {ReactNode} props.children - The content of the title
- * @param {ReactNode} [props.suffix] - Optional content to display after the title
- * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
- * @returns {JSX.Element} The rendered CollapsibleTitle component
- */
-declare const CollapsibleTitle: import('react').ForwardRefExoticComponent<CollapsibleTitleProps & import('react').RefAttributes<HTMLDivElement>>;
-export { CollapsibleTitle };

package/dist/esm/components/date-picker/DatePicker.d.mts

@@ -1,67 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { DatePickerProps as AriaDatePickerProps } from 'react-aria-components';
-export interface DatePickerProps extends Pick<AriaDatePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek'> {
-    /** The currently selected date */
-    value?: CalendarDate;
-    /** The default selected date (uncontrolled) */
-    defaultValue?: CalendarDate;
-    /** The minimum allowed date */
-    minValue?: CalendarDate;
-    /** The maximum allowed date */
-    maxValue?: CalendarDate;
-    /** Callback fired when the date value changes */
-    onChange?: (value: CalendarDate | undefined) => void;
-    /** Callback fired when the clear button is clicked */
-    onClearButtonPress?: () => void;
-    /** Callback fired when the picker loses focus */
-    onBlur?: () => void;
-    /** Callback fired when the picker gains focus */
-    onFocus?: () => void;
-    /** Callback fired when the calendar overlay's open state changes */
-    onOpenChange?: (isOpen: boolean) => void;
-    /** Whether the picker is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the picker is in a loading state */
-    isLoading?: boolean;
-    /** Whether the picker is disabled */
-    isDisabled?: boolean;
-    /** Whether the picker is read-only */
-    isReadOnly?: boolean;
-    /** Function to determine if a date should be disabled */
-    isDateUnavailable?: (date: CalendarDate) => boolean;
-    /** Whether to force leading zeros for days and months */
-    shouldForceLeadingZeros?: boolean;
-    /** Whether to close the calendar after a date is selected */
-    shouldCloseOnSelect?: boolean;
-    /** Whether to open the calendar by default */
-    defaultOpen?: boolean;
-}
-/**
- * The DatePicker component allows users to select a date either by typing it in directly or choosing from a calendar overlay, providing a standardized way to handle date selection across the application.
- * @param {DatePickerProps} props - Props for configuring the DatePicker's behavior and appearance
- * @see {@link DatePickerProps} for all available props
- * @example
- * ```tsx
- * import { DatePicker } from '@payfit/unity-components'
- * import { parseDate } from '@internationalized/date'
- *
- * function Example() {
- *   const [selectedDate, setSelectedDate] = useState<CalendarDate>()
- *
- *   return (
- *     <DatePicker
- *       value={selectedDate}
- *       onChange={setSelectedDate}
- *       minValue={parseDate('2024-01-01')}  // Restrict dates before Jan 1, 2024
- *       isDateUnavailable={(date) => date.dayOfWeek === 0}  // Disable Sundays
- *     />
- *   )
- * }
- * ```
- * @remarks
- * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/inputs-datepicker--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/719ac2-date-picker)
- * @note
- * This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
- */
-declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
-export { DatePicker };

package/dist/esm/components/date-picker/DatePicker.mjs

@@ -1,164 +0,0 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { forwardRef as W } from "react";
-import { DatePicker as I, Group as P, Button as U, Popover as j } from "react-aria-components";
-import { useIntl as E } from "react-intl";
-import { tv as c } from "tailwind-variants";
-import { Icon as M } from "../icon/Icon.mjs";
-import { DateCalendar as O } from "./parts/DateCalendar.mjs";
-import { DateInput as R } from "./parts/DateInput.mjs";
-const G = c({
-  slots: {
-    base: [
-      "uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100",
-      "active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"
-    ],
-    inputWrapper: [
-      "uy-flex uy-grow uy-rounded-75 uy-outline-none",
-      // Show focus styles when input wrapper is focused AND button is not focused
-      "focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2",
-      // Hide focus styles when button is focused
-      "group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"
-    ],
-    suffix: [
-      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100",
-      "hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active",
-      "focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"
-    ]
-  },
-  variants: {
-    isInvalid: {
-      true: {
-        base: "uy-border-border-form-error uy-bg-surface-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",
-        inputWrapper: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        suffix: "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        inputWrapper: "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",
-        suffix: "uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"
-      }
-    }
-  ]
-}), $ = c({
-  base: "uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",
-  variants: {
-    isEntering: {
-      true: "uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"
-    },
-    isExiting: {
-      true: "uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"
-    }
-  }
-}), q = W(
-  ({
-    value: l,
-    defaultValue: n,
-    isInvalid: b,
-    isLoading: p,
-    isDisabled: t,
-    isReadOnly: u,
-    onClearButtonPress: d,
-    onBlur: o,
-    onFocus: i,
-    onChange: s,
-    onOpenChange: f,
-    id: v,
-    ...e
-  }, z) => {
-    const g = E(), { base: x, inputWrapper: h, suffix: D } = G({
-      isInvalid: !!b,
-      isReadOnly: !!u,
-      isDisabled: !!t
-    }), y = (r) => {
-      s == null || s(r ?? void 0);
-    }, w = (r) => {
-      f == null || f(r), r ? i == null || i() : o == null || o();
-    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
-      d == null || d();
-    };
-    return /* @__PURE__ */ m(
-      I,
-      {
-        "data-dd-privacy": "mask",
-        ...e,
-        className: x(),
-        value: l,
-        defaultValue: n,
-        minValue: e.minValue,
-        maxValue: e.maxValue,
-        isReadOnly: !!u,
-        isDisabled: !!t,
-        onChange: y,
-        onFocus: i,
-        onBlur: o,
-        onOpenChange: w,
-        isDateUnavailable: k,
-        children: [
-          /* @__PURE__ */ m(P, { className: h(), id: v, children: [
-            /* @__PURE__ */ a(
-              R,
-              {
-                isLoading: p,
-                isDisabled: t,
-                isReadOnly: u,
-                isInvalid: b,
-                onClearButtonPress: V
-              }
-            ),
-            /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
-              M,
-              {
-                src: "CalendarBlankOutlined",
-                color: "inherit",
-                alt: g.formatMessage({
-                  id: "unity:component:form-field:date-picker:calendar-button",
-                  defaultMessage: "Open Calendar"
-                })
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ a(
-            j,
-            {
-              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
-              children: /* @__PURE__ */ a(
-                O,
-                {
-                  value: l,
-                  defaultValue: n,
-                  minValue: e.minValue,
-                  maxValue: e.maxValue,
-                  onChange: y,
-                  firstDayOfWeek: e.firstDayOfWeek
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-q.displayName = "DatePicker";
-export {
-  q as DatePicker
-};