@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/Base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX, ErrorInfo } from 'react'\nimport { Suspense, useEffect, useRef } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type OnEventType } from './useBase'\nimport { useBaseSubmit } from './useBaseSubmit'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { normalizeToSDKError, type SDKError } from '@/types/sdkError'\n\n/**\n * Props common to all SDK feature components, including children, an optional className, default form values, and an i18n resource dictionary override.\n *\n * @typeParam TResourceKey - The i18n resource namespace key whose dictionary entries can be overridden.\n * @public\n * @page blocks\n */\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  /** Optional child content rendered inside the component's layout. */\n  children?: ReactNode\n  /** CSS class name applied to the component's root element. */\n  className?: string\n  /**\n   * Initial values pre-populated into the component's form fields before the user interacts.\n   * The exact shape depends on the specific component — refer to each component's own props type.\n   */\n  defaultValues?: unknown\n  /**\n   * Overrides for the component's i18n strings. Supply a partial object whose keys match the\n   * component's resource namespace — any omitted keys fall back to SDK defaults.\n   * See the [Translation guide](https://docs.gusto.com/embedded-payroll/docs/translation) for details.\n   */\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n/**\n * Props for SDK feature components that participate in the standard error/loading/observability surface.\n *\n * @remarks\n * Extends {@link CommonComponentInterface} with the `onEvent` callback that emits component events\n * and optional overrides for the error-boundary fallback and loading indicator. This is the prop\n * shape mixed into every public SDK feature component.\n *\n * @typeParam TResourceKey - The i18n resource namespace key whose dictionary entries can be overridden.\n * @public\n * @page blocks\n */\nexport interface BaseComponentInterface<\n  TResourceKey extends keyof Resources = keyof Resources,\n> extends CommonComponentInterface<TResourceKey> {\n  /**\n   * Custom React component rendered in place of the component when an unhandled error is caught\n   * by the component-level error boundary. Receives `error` and `resetErrorBoundary` as props.\n   * Defaults to the SDK's built-in `InternalError` fallback.\n   */\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  /**\n   * Custom loading indicator rendered while the component's async data is fetching.\n   * Overrides the indicator configured on `GustoProvider` for this component instance only.\n   */\n  LoaderComponent?: ({ children }: { children?: ReactNode }) => JSX.Element\n  /**\n   * Callback invoked each time the component emits an event — user interactions, successful API\n   * responses, step transitions, or errors. Receives the event type constant and an optional\n   * payload whose shape varies by event. See the [Event Handling guide](https://docs.gusto.com/embedded-payroll/docs/event-handling)\n   * and each component's event table for the full list of emitted events.\n   */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Keys unique to the BaseComponentInterface\n *\n * @internal\n */\nexport type BaseComponentKeys = Exclude<\n  keyof BaseComponentInterface,\n  keyof CommonComponentInterface\n>\n\ninterface InternalBaseComponentProps {\n  componentName?: string\n}\n\n/**\n * Wraps SDK feature components with the standard error boundary, suspense fallback, form-submission handler, and observability wiring.\n *\n * @remarks\n * Provides a {@link BaseContext} value to descendants exposing `error`, `setError`, `onEvent`, and\n * `baseSubmitHandler`, then renders children inside {@link BaseBoundaries} and {@link BaseLayout}.\n * Errors caught by the React error boundary are normalized, emitted to observability, and re-emitted\n * via `onEvent`.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `componentEvents.ERROR` | Emitted when an unhandled rendering error is caught by the component's error boundary | The raw error value caught by the boundary |\n *\n * @typeParam TResourceKey - The i18n resource namespace key whose dictionary entries can be overridden.\n * @param props - Component props extending {@link BaseComponentInterface}.\n * @returns A React element wrapping `children` with the SDK's standard error, loading, and event-emission surface.\n * @internal\n */\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n  componentName,\n}: BaseComponentInterface<TResourceKey> & InternalBaseComponentProps) => {\n  const { error, baseSubmitHandler, setError } = useBaseSubmit(componentName)\n  const { observability } = useObservability()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  const onErrorBoundaryError = (boundaryError: unknown, errorInfo: ErrorInfo) => {\n    onEvent(componentEvents.ERROR, boundaryError)\n\n    const sdkError = normalizeToSDKError(boundaryError)\n\n    observability?.onError?.({\n      ...sdkError,\n      timestamp: Date.now(),\n      componentName,\n      componentStack: errorInfo.componentStack ?? undefined,\n    })\n  }\n\n  return (\n    <BaseContext.Provider\n      value={{\n        error,\n        setError,\n        onEvent,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n        componentName,\n      }}\n    >\n      <BaseBoundaries\n        FallbackComponent={FallbackComponent}\n        onErrorBoundaryError={onErrorBoundaryError}\n        componentName={componentName}\n      >\n        <BaseLayout error={error}>{children}</BaseLayout>\n      </BaseBoundaries>\n    </BaseContext.Provider>\n  )\n}\n\n/** @internal */\nexport interface BaseLayoutProps {\n  children?: ReactNode\n  error?: SDKError | SDKError[] | null\n  isLoading?: boolean\n}\n\nfunction SingleErrorContent({ error }: { error: SDKError }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const hasFieldErrors = error.fieldErrors.length > 0\n\n  return (\n    <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n      {hasFieldErrors && (\n        <Components.UnorderedList\n          items={error.fieldErrors\n            .filter(fieldError => fieldError.message)\n            .map(fieldError => (\n              <span key={fieldError.field}>{fieldError.message}</span>\n            ))}\n        />\n      )}\n      {!hasFieldErrors && error.category === 'validation_error' && (\n        <Components.Text as=\"pre\">\n          {error.raw &&\n          typeof error.raw === 'object' &&\n          'pretty' in error.raw &&\n          typeof (error.raw as { pretty: unknown }).pretty === 'function'\n            ? (error.raw as { pretty: () => string }).pretty()\n            : error.message}\n        </Components.Text>\n      )}\n      {!hasFieldErrors && error.category !== 'validation_error' && (\n        <Components.Text>{error.message || t('errors.unknownError')}</Components.Text>\n      )}\n    </Components.Alert>\n  )\n}\n\nfunction MultipleErrorsContent({ errors }: { errors: SDKError[] }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n\n  return (\n    <Components.Alert label={t('status.multipleErrorsEncountered')} status=\"error\">\n      <Components.UnorderedList\n        items={errors\n          .filter(error => error.message || error.fieldErrors.length > 0)\n          .map((error, index) => {\n            const visibleFieldErrors = error.fieldErrors.filter(fieldError => fieldError.message)\n\n            if (visibleFieldErrors.length === 0) {\n              return <span key={index}>{error.message || t('errors.unknownError')}</span>\n            }\n\n            return (\n              <span key={index}>\n                {error.message || t('errors.unknownError')}\n                <Components.UnorderedList\n                  items={visibleFieldErrors.map(fieldError => (\n                    <span key={fieldError.field}>{fieldError.message}</span>\n                  ))}\n                />\n              </span>\n            )\n          })}\n      />\n    </Components.Alert>\n  )\n}\n\n/**\n * Renders the standard SDK layout with normalized error display, suspense-aware loading state, and the children content.\n *\n * @remarks\n * When `isLoading` is true and there are no errors, renders the configured loading indicator.\n * Otherwise renders a fade-in wrapper that displays a single error alert, an aggregated alert when\n * multiple errors are present, or no alert when errors are absent. Field-level errors are rendered\n * as a list, validation errors as preformatted Zod output, and all other errors as a generic\n * message — see {@link https://github.com/Gusto/embedded-react-sdk/blob/main/docs/integration-guide/error-handling.md | the Error Handling guide}.\n *\n * @param props - Component props matching {@link BaseLayoutProps}.\n * @returns A React element with the SDK's standard error rendering and loading behavior wrapped around `children`.\n * @internal\n */\nexport const BaseLayout = ({ children, error, isLoading }: BaseLayoutProps) => {\n  const { LoadingIndicator } = useLoadingIndicator()\n\n  const errors = Array.isArray(error) ? error : error ? [error] : []\n  const hasErrors = errors.length > 0\n\n  if (isLoading && !hasErrors) {\n    return <LoadingIndicator />\n  }\n\n  const [firstError] = errors\n\n  return (\n    <FadeIn>\n      {errors.length > 1 && <MultipleErrorsContent errors={errors} />}\n      {errors.length === 1 && firstError && <SingleErrorContent error={firstError} />}\n      {children}\n    </FadeIn>\n  )\n}\n\ninterface LoaderWithMetricsProps {\n  LoaderComponent: LoadingIndicatorContextProps['LoadingIndicator']\n  observability: ReturnType<typeof useObservability>['observability']\n  componentName?: string\n}\n\nconst LoaderWithMetrics = ({\n  LoaderComponent,\n  observability,\n  componentName,\n}: LoaderWithMetricsProps) => {\n  const loadingStartTime = useRef(Date.now())\n  const observabilityRef = useRef(observability)\n  const componentNameRef = useRef(componentName)\n\n  useEffect(() => {\n    observabilityRef.current = observability\n    componentNameRef.current = componentName\n  }, [observability, componentName])\n\n  useEffect(() => {\n    return () => {\n      const duration = Date.now() - loadingStartTime.current\n      observabilityRef.current?.onMetric?.({\n        name: 'sdk.component.loading_duration',\n        value: duration,\n        unit: 'ms',\n        tags: componentNameRef.current ? { component: componentNameRef.current } : undefined,\n        timestamp: Date.now(),\n      })\n    }\n  }, [])\n\n  return <LoaderComponent />\n}\n\nfunction SuspenseFallback({ componentName }: { componentName?: string }) {\n  const { LoadingIndicator } = useLoadingIndicator()\n  const { observability } = useObservability()\n  return (\n    <LoaderWithMetrics\n      LoaderComponent={LoadingIndicator}\n      observability={observability}\n      componentName={componentName}\n    />\n  )\n}\n\n/** @internal */\nexport interface BaseBoundariesProps {\n  children?: ReactNode\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void\n  componentName?: string\n}\n\n/**\n * Composes the SDK's React error boundary, TanStack Query reset boundary, and Suspense fallback around children.\n *\n * @remarks\n * Resetting the error boundary also resets any TanStack Query errors so suspended queries refetch\n * cleanly. While children suspend, a metrics-instrumented loading indicator is rendered that emits\n * an `sdk.component.loading_duration` observability metric on unmount.\n *\n * @param props - Component props matching {@link BaseBoundariesProps}.\n * @returns A React element wrapping `children` with the SDK's error and suspense boundaries.\n * @internal\n */\nexport const BaseBoundaries = ({\n  children,\n  FallbackComponent = InternalError,\n  onErrorBoundaryError,\n  componentName,\n}: BaseBoundariesProps) => {\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset: resetQueries }) => (\n        <ErrorBoundary\n          FallbackComponent={FallbackComponent}\n          onReset={resetQueries}\n          onError={onErrorBoundaryError}\n        >\n          <Suspense fallback={<SuspenseFallback componentName={componentName} />}>\n            {children}\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"],"names":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","componentName","error","baseSubmitHandler","setError","useBaseSubmit","observability","useObservability","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","onErrorBoundaryError","boundaryError","errorInfo","componentEvents","sdkError","normalizeToSDKError","jsx","BaseContext","BaseBoundaries","BaseLayout","SingleErrorContent","Components","useComponentContext","t","useTranslation","hasFieldErrors","jsxs","fieldError","MultipleErrorsContent","errors","index","visibleFieldErrors","isLoading","LoadingIndicator","hasErrors","firstError","FadeIn","LoaderWithMetrics","loadingStartTime","useRef","observabilityRef","componentNameRef","useEffect","duration","SuspenseFallback","QueryErrorResetBoundary","resetQueries","ErrorBoundary","Suspense"],"mappings":"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"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX, ErrorInfo } from 'react'\nimport { Suspense, useEffect, useRef } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type OnEventType } from './useBase'\nimport { useBaseSubmit } from './useBaseSubmit'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { normalizeToSDKError, type SDKError } from '@/types/sdkError'\n\n/**\n * Signature of a loading indicator component — a React component that optionally receives `children`.\n * Supply one to `GustoProvider` or an individual component's `LoaderComponent` prop to override the\n * SDK's default loading indicator.\n *\n * @public\n * @page blocks\n */\nexport type LoaderComponentType = ({ children }: { children?: ReactNode }) => JSX.Element\n\n/**\n * Props common to all SDK feature components, including children, an optional className, default form values, and an i18n resource dictionary override.\n *\n * @typeParam TResourceKey - The i18n resource namespace key whose dictionary entries can be overridden.\n * @public\n * @page blocks\n */\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  /** Optional child content rendered inside the component's layout. */\n  children?: ReactNode\n  /** CSS class name applied to the component's root element. */\n  className?: string\n  /**\n   * Initial values pre-populated into the component's form fields before the user interacts.\n   * The exact shape depends on the specific component — refer to each component's own props type.\n   */\n  defaultValues?: unknown\n  /**\n   * Overrides for the component's i18n strings. Supply a partial object whose keys match the\n   * component's resource namespace — any omitted keys fall back to SDK defaults.\n   * See the [Translation guide](https://docs.gusto.com/embedded-payroll/docs/translation) for details.\n   */\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n/**\n * Props for SDK feature components that participate in the standard error/loading/observability surface.\n *\n * @remarks\n * Extends {@link CommonComponentInterface} with the `onEvent` callback that emits component events\n * and optional overrides for the error-boundary fallback and loading indicator. This is the prop\n * shape mixed into every public SDK feature component.\n *\n * @typeParam TResourceKey - The i18n resource namespace key whose dictionary entries can be overridden.\n * @public\n * @page blocks\n */\nexport interface BaseComponentInterface<\n  TResourceKey extends keyof Resources = keyof Resources,\n> extends CommonComponentInterface<TResourceKey> {\n  /**\n   * Custom React component rendered in place of the component when an unhandled error is caught\n   * by the component-level error boundary. Receives `error` and `resetErrorBoundary` as props.\n   * Defaults to the SDK's built-in `InternalError` fallback.\n   */\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  /**\n   * Custom loading indicator rendered while the component's async data is fetching.\n   * Overrides the indicator configured on `GustoProvider` for this component instance only.\n   */\n  LoaderComponent?: LoaderComponentType\n  /**\n   * Callback invoked each time the component emits an event — user interactions, successful API\n   * responses, step transitions, or errors. Receives the event type constant and an optional\n   * payload whose shape varies by event. See the [Event Handling guide](https://docs.gusto.com/embedded-payroll/docs/event-handling)\n   * and each component's event table for the full list of emitted events.\n   */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Keys unique to the BaseComponentInterface\n *\n * @internal\n */\nexport type BaseComponentKeys = Exclude<\n  keyof BaseComponentInterface,\n  keyof CommonComponentInterface\n>\n\ninterface InternalBaseComponentProps {\n  componentName?: string\n}\n\n/**\n * Wraps SDK feature components with the standard error boundary, suspense fallback, form-submission handler, and observability wiring.\n *\n * @remarks\n * Provides a {@link BaseContext} value to descendants exposing `error`, `setError`, `onEvent`, and\n * `baseSubmitHandler`, then renders children inside {@link BaseBoundaries} and {@link BaseLayout}.\n * Errors caught by the React error boundary are normalized, emitted to observability, and re-emitted\n * via `onEvent`.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `componentEvents.ERROR` | Emitted when an unhandled rendering error is caught by the component's error boundary | The raw error value caught by the boundary |\n *\n * @typeParam TResourceKey - The i18n resource namespace key whose dictionary entries can be overridden.\n * @param props - Component props extending {@link BaseComponentInterface}.\n * @returns A React element wrapping `children` with the SDK's standard error, loading, and event-emission surface.\n * @internal\n */\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n  componentName,\n}: BaseComponentInterface<TResourceKey> & InternalBaseComponentProps) => {\n  const { error, baseSubmitHandler, setError } = useBaseSubmit(componentName)\n  const { observability } = useObservability()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  const onErrorBoundaryError = (boundaryError: unknown, errorInfo: ErrorInfo) => {\n    onEvent(componentEvents.ERROR, boundaryError)\n\n    const sdkError = normalizeToSDKError(boundaryError)\n\n    observability?.onError?.({\n      ...sdkError,\n      timestamp: Date.now(),\n      componentName,\n      componentStack: errorInfo.componentStack ?? undefined,\n    })\n  }\n\n  return (\n    <BaseContext.Provider\n      value={{\n        error,\n        setError,\n        onEvent,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n        componentName,\n      }}\n    >\n      <BaseBoundaries\n        FallbackComponent={FallbackComponent}\n        onErrorBoundaryError={onErrorBoundaryError}\n        componentName={componentName}\n        LoaderComponent={LoaderComponent}\n      >\n        <BaseLayout error={error} LoaderComponent={LoaderComponent}>\n          {children}\n        </BaseLayout>\n      </BaseBoundaries>\n    </BaseContext.Provider>\n  )\n}\n\n/** @internal */\nexport interface BaseLayoutProps {\n  children?: ReactNode\n  error?: SDKError | SDKError[] | null\n  isLoading?: boolean\n  /**\n   * Loading indicator rendered while `isLoading` is true and no errors are present.\n   * Overrides the indicator resolved from `LoadingIndicatorContext` for this instance only;\n   * falls back to that context value when omitted.\n   */\n  LoaderComponent?: LoaderComponentType\n}\n\nfunction SingleErrorContent({ error }: { error: SDKError }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const hasFieldErrors = error.fieldErrors.length > 0\n\n  return (\n    <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n      {hasFieldErrors && (\n        <Components.UnorderedList\n          items={error.fieldErrors\n            .filter(fieldError => fieldError.message)\n            .map(fieldError => (\n              <span key={fieldError.field}>{fieldError.message}</span>\n            ))}\n        />\n      )}\n      {!hasFieldErrors && error.category === 'validation_error' && (\n        <Components.Text as=\"pre\">\n          {error.raw &&\n          typeof error.raw === 'object' &&\n          'pretty' in error.raw &&\n          typeof (error.raw as { pretty: unknown }).pretty === 'function'\n            ? (error.raw as { pretty: () => string }).pretty()\n            : error.message}\n        </Components.Text>\n      )}\n      {!hasFieldErrors && error.category !== 'validation_error' && (\n        <Components.Text>{error.message || t('errors.unknownError')}</Components.Text>\n      )}\n    </Components.Alert>\n  )\n}\n\nfunction MultipleErrorsContent({ errors }: { errors: SDKError[] }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n\n  return (\n    <Components.Alert label={t('status.multipleErrorsEncountered')} status=\"error\">\n      <Components.UnorderedList\n        items={errors\n          .filter(error => error.message || error.fieldErrors.length > 0)\n          .map((error, index) => {\n            const visibleFieldErrors = error.fieldErrors.filter(fieldError => fieldError.message)\n\n            if (visibleFieldErrors.length === 0) {\n              return <span key={index}>{error.message || t('errors.unknownError')}</span>\n            }\n\n            return (\n              <span key={index}>\n                {error.message || t('errors.unknownError')}\n                <Components.UnorderedList\n                  items={visibleFieldErrors.map(fieldError => (\n                    <span key={fieldError.field}>{fieldError.message}</span>\n                  ))}\n                />\n              </span>\n            )\n          })}\n      />\n    </Components.Alert>\n  )\n}\n\n/**\n * Renders the standard SDK layout with normalized error display, suspense-aware loading state, and the children content.\n *\n * @remarks\n * When `isLoading` is true and there are no errors, renders the configured loading indicator.\n * Otherwise renders a fade-in wrapper that displays a single error alert, an aggregated alert when\n * multiple errors are present, or no alert when errors are absent. Field-level errors are rendered\n * as a list, validation errors as preformatted Zod output, and all other errors as a generic\n * message — see {@link https://github.com/Gusto/embedded-react-sdk/blob/main/docs/integration-guide/error-handling.md | the Error Handling guide}.\n *\n * @param props - Component props matching {@link BaseLayoutProps}.\n * @returns A React element with the SDK's standard error rendering and loading behavior wrapped around `children`.\n * @internal\n */\nexport const BaseLayout = ({ children, error, isLoading, LoaderComponent }: BaseLayoutProps) => {\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoadingIndicator = LoaderComponent ?? LoadingIndicatorFromContext\n\n  const errors = Array.isArray(error) ? error : error ? [error] : []\n  const hasErrors = errors.length > 0\n\n  if (isLoading && !hasErrors) {\n    return <LoadingIndicator />\n  }\n\n  const [firstError] = errors\n\n  return (\n    <FadeIn>\n      {errors.length > 1 && <MultipleErrorsContent errors={errors} />}\n      {errors.length === 1 && firstError && <SingleErrorContent error={firstError} />}\n      {children}\n    </FadeIn>\n  )\n}\n\ninterface LoaderWithMetricsProps {\n  LoaderComponent: LoaderComponentType\n  observability: ReturnType<typeof useObservability>['observability']\n  componentName?: string\n}\n\nconst LoaderWithMetrics = ({\n  LoaderComponent,\n  observability,\n  componentName,\n}: LoaderWithMetricsProps) => {\n  const loadingStartTime = useRef(Date.now())\n  const observabilityRef = useRef(observability)\n  const componentNameRef = useRef(componentName)\n\n  useEffect(() => {\n    observabilityRef.current = observability\n    componentNameRef.current = componentName\n  }, [observability, componentName])\n\n  useEffect(() => {\n    return () => {\n      const duration = Date.now() - loadingStartTime.current\n      observabilityRef.current?.onMetric?.({\n        name: 'sdk.component.loading_duration',\n        value: duration,\n        unit: 'ms',\n        tags: componentNameRef.current ? { component: componentNameRef.current } : undefined,\n        timestamp: Date.now(),\n      })\n    }\n  }, [])\n\n  return <LoaderComponent />\n}\n\nfunction SuspenseFallback({\n  componentName,\n  LoaderComponent,\n}: {\n  componentName?: string\n  LoaderComponent?: LoaderComponentType\n}) {\n  const { LoadingIndicator } = useLoadingIndicator()\n  const { observability } = useObservability()\n  return (\n    <LoaderWithMetrics\n      LoaderComponent={LoaderComponent ?? LoadingIndicator}\n      observability={observability}\n      componentName={componentName}\n    />\n  )\n}\n\n/** @internal */\nexport interface BaseBoundariesProps {\n  children?: ReactNode\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void\n  componentName?: string\n  /**\n   * Loading indicator rendered as the Suspense fallback while children suspend.\n   * Overrides the indicator resolved from `LoadingIndicatorContext` for this instance only;\n   * falls back to that context value when omitted.\n   */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Composes the SDK's React error boundary, TanStack Query reset boundary, and Suspense fallback around children.\n *\n * @remarks\n * Resetting the error boundary also resets any TanStack Query errors so suspended queries refetch\n * cleanly. While children suspend, a metrics-instrumented loading indicator is rendered that emits\n * an `sdk.component.loading_duration` observability metric on unmount.\n *\n * @param props - Component props matching {@link BaseBoundariesProps}.\n * @returns A React element wrapping `children` with the SDK's error and suspense boundaries.\n * @internal\n */\nexport const BaseBoundaries = ({\n  children,\n  FallbackComponent = InternalError,\n  onErrorBoundaryError,\n  componentName,\n  LoaderComponent,\n}: BaseBoundariesProps) => {\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset: resetQueries }) => (\n        <ErrorBoundary\n          FallbackComponent={FallbackComponent}\n          onReset={resetQueries}\n          onError={onErrorBoundaryError}\n        >\n          <Suspense\n            fallback={\n              <SuspenseFallback componentName={componentName} LoaderComponent={LoaderComponent} />\n            }\n          >\n            {children}\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"],"names":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","componentName","error","baseSubmitHandler","setError","useBaseSubmit","observability","useObservability","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","onErrorBoundaryError","boundaryError","errorInfo","componentEvents","sdkError","normalizeToSDKError","jsx","BaseContext","BaseBoundaries","BaseLayout","SingleErrorContent","Components","useComponentContext","t","useTranslation","hasFieldErrors","jsxs","fieldError","MultipleErrorsContent","errors","index","visibleFieldErrors","isLoading","LoadingIndicator","hasErrors","firstError","FadeIn","LoaderWithMetrics","loadingStartTime","useRef","observabilityRef","componentNameRef","useEffect","duration","SuspenseFallback","QueryErrorResetBoundary","resetQueries","ErrorBoundary","Suspense"],"mappings":"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"}

package/dist/components/Base/index.d.ts

@@ -1,3 +1,3 @@
-export { BaseComponent, BaseBoundaries, BaseLayout, type BaseComponentInterface, type CommonComponentInterface, } from './Base';
+export { BaseComponent, BaseBoundaries, BaseLayout, type BaseComponentInterface, type CommonComponentInterface, type LoaderComponentType, } from './Base';
 export { createCompoundContext } from './createCompoundContext';
 export { useBase, type OnEventType } from './useBase';

package/dist/components/Common/DateRangeFilter/DateRangeFilter.d.ts

@@ -11,10 +11,9 @@ interface DateRangeFilterProps {
     resetLabel: string;
     selectDatesLabel: string;
     triggerLabel: string;
-    isFilterActive: boolean;
     maxEndDate?: Date;
     minStartDate?: Date;
 }
 /** @internal */
-export declare const DateRangeFilter: ({ startDate, endDate, onStartDateChange, onEndDateChange, onClear, startDateLabel, endDateLabel, applyLabel, cancelLabel, resetLabel, selectDatesLabel, triggerLabel, isFilterActive, maxEndDate, minStartDate, }: DateRangeFilterProps) => import("react").JSX.Element;
+export declare const DateRangeFilter: ({ startDate, endDate, onStartDateChange, onEndDateChange, onClear, startDateLabel, endDateLabel, applyLabel, cancelLabel, resetLabel, selectDatesLabel, triggerLabel, maxEndDate, minStartDate, }: DateRangeFilterProps) => import("react").JSX.Element;
 export {};

package/dist/components/Common/DateRangeFilter/DateRangeFilter.js

@@ -1,13 +1,13 @@
-import { jsxs as a, Fragment as I, jsx as e } from "react/jsx-runtime";
-import { useState as R, useRef as M, useCallback as l, useMemo as _ } from "react";
-import { Popover as q, Dialog as z } from "react-aria-components";
+import { jsxs as a, Fragment as H, jsx as e } from "react/jsx-runtime";
+import { useState as y, useRef as I, useCallback as l, useMemo as M } from "react";
+import { Popover as _, Dialog as q } from "react-aria-components";
 import s from "./DateRangeFilter.module.scss.js";
-import { Flex as x } from "../Flex/Flex.js";
-import { useComponentContext as E } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useTheme as G } from "../../../contexts/ThemeProvider/useTheme.js";
+import { Flex as R } from "../Flex/Flex.js";
+import { useComponentContext as z } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useTheme as E } from "../../../contexts/ThemeProvider/useTheme.js";
 /* empty css                       */
-import J from "../../../assets/icons/filter-funnel.svg.js";
-const k = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric" }), ne = ({
+import G from "../../../assets/icons/filter-funnel.svg.js";
+const x = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric" }), ee = ({
   startDate: n,
   endDate: o,
   onStartDateChange: d,
@@ -16,71 +16,70 @@ const k = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
   startDateLabel: c,
   endDateLabel: m,
   applyLabel: F,
-  cancelLabel: $,
-  resetLabel: b,
-  selectDatesLabel: N,
-  triggerLabel: j,
-  isFilterActive: g,
-  maxEndDate: B,
-  minStartDate: O
+  cancelLabel: k,
+  resetLabel: $,
+  selectDatesLabel: b,
+  triggerLabel: N,
+  maxEndDate: j,
+  minStartDate: B
 }) => {
-  const { Button: t, DateRangePicker: S } = E(), { container: P } = G(), [C, p] = R(!1), [r, u] = R(null), v = M(null), U = l(() => {
+  const { Button: t, DateRangePicker: O } = z(), { container: S } = E(), [g, p] = y(!1), [r, u] = y(null), v = I(null), P = l(() => {
     u(n && o ? { start: n, end: o } : null), p(!0);
-  }, [n, o]), y = l(() => {
+  }, [n, o]), C = l(() => {
     p(!1);
-  }, []), V = l(() => {
+  }, []), U = l(() => {
     r ? (d(r.start), f(r.end)) : h(), p(!1);
-  }, [r, d, f, h]), T = l(() => {
+  }, [r, d, f, h]), V = l(() => {
     u(null);
-  }, []), w = l((i) => {
+  }, []), A = l((i) => {
     u(i);
-  }, []), A = _(() => !g || !n || !o ? null : `${k(n)} – ${k(o)}`, [g, n, o]), H = /* @__PURE__ */ e(
+  }, []), T = M(() => !n || !o ? null : `${x(n)} – ${x(o)}`, [n, o]), w = /* @__PURE__ */ e(
     t,
     {
       buttonRef: v,
-      "aria-label": j,
+      "aria-label": N,
       "aria-haspopup": "dialog",
-      "aria-expanded": C,
-      onClick: U,
+      "aria-expanded": g,
+      onClick: P,
       variant: "secondary",
-      icon: /* @__PURE__ */ e(J, {}),
+      icon: /* @__PURE__ */ e(G, {}),
       className: s.triggerButton,
-      children: A ?? N
+      children: T ?? b
     }
   );
-  return /* @__PURE__ */ a(I, { children: [
-    H,
+  return /* @__PURE__ */ a(H, { children: [
+    w,
     /* @__PURE__ */ e(
-      q,
+      _,
       {
-        UNSTABLE_portalContainer: P.current ?? void 0,
-        isOpen: C,
+        UNSTABLE_portalContainer: S.current ?? void 0,
+        isOpen: g,
         onOpenChange: (i) => {
-          i || y();
+          i || C();
         },
         triggerRef: v,
         placement: "bottom end",
         offset: 8,
         shouldUpdatePosition: !0,
-        children: /* @__PURE__ */ a(z, { className: s.dialog, "aria-label": `${c} – ${m}`, children: [
+        children: /* @__PURE__ */ a(q, { className: s.dialog, "aria-label": `${c} – ${m}`, children: [
           /* @__PURE__ */ e("div", { className: s.popoverContent, children: /* @__PURE__ */ e(
-            S,
+            O,
             {
               label: `${c} – ${m}`,
               shouldVisuallyHideLabel: !0,
               value: r,
-              onChange: w,
+              onChange: A,
               startDateLabel: c,
               endDateLabel: m,
-              minValue: O,
-              maxValue: B
+              minValue: B,
+              maxValue: j
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: s.popoverFooter, children: /* @__PURE__ */ a(x, { gap: 8, justifyContent: "space-between", children: [
-            /* @__PURE__ */ e(t, { variant: "tertiary", onClick: T, children: b }),
-            /* @__PURE__ */ a(x, { gap: 8, justifyContent: "flex-end", children: [
-              /* @__PURE__ */ e(t, { variant: "secondary", onClick: y, children: $ }),
-              /* @__PURE__ */ e(t, { variant: "primary", onClick: V, children: F })
+          /* @__PURE__ */ e("div", { className: s.popoverFooter, children: /* @__PURE__ */ a(R, { gap: 8, justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(t, { variant: "tertiary", onClick: V, children: $ }),
+            /* @__PURE__ */ a(R, { gap: 8, justifyContent: "flex-end", children: [
+              /* @__PURE__ */ e(t, { variant: "secondary", onClick: C, children: k }),
+              /* @__PURE__ */ e(t, { variant: "primary", onClick: U, children: F })
             ] })
           ] }) })
         ] })
@@ -89,6 +88,6 @@ const k = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
   ] });
 };
 export {
-  ne as DateRangeFilter
+  ee as DateRangeFilter
 };
 //# sourceMappingURL=DateRangeFilter.js.map

package/dist/components/Common/DateRangeFilter/DateRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../../src/components/Common/DateRangeFilter/DateRangeFilter.tsx"],"sourcesContent":["import { useState, useRef, useCallback, useMemo } from 'react'\nimport { Dialog, Popover } from 'react-aria-components'\nimport styles from './DateRangeFilter.module.scss'\nimport type { DateRange } from '@/components/Common/UI/DateRangePicker/DateRangePickerTypes'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport FilterFunnelIcon from '@/assets/icons/filter-funnel.svg?react'\n\nconst formatFilterDate = (date: Date): string =>\n  date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\ninterface DateRangeFilterProps {\n  startDate: Date | null\n  endDate: Date | null\n  onStartDateChange: (date: Date | null) => void\n  onEndDateChange: (date: Date | null) => void\n  onClear: () => void\n  startDateLabel: string\n  endDateLabel: string\n  applyLabel: string\n  cancelLabel: string\n  resetLabel: string\n  selectDatesLabel: string\n  triggerLabel: string\n  isFilterActive: boolean\n  maxEndDate?: Date\n  minStartDate?: Date\n}\n\n/** @internal */\nexport const DateRangeFilter = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  onClear,\n  startDateLabel,\n  endDateLabel,\n  applyLabel,\n  cancelLabel,\n  resetLabel,\n  selectDatesLabel,\n  triggerLabel,\n  isFilterActive,\n  maxEndDate,\n  minStartDate,\n}: DateRangeFilterProps) => {\n  const { Button, DateRangePicker } = useComponentContext()\n  const { container } = useTheme()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [draftRange, setDraftRange] = useState<DateRange | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleOpen = useCallback(() => {\n    const range = startDate && endDate ? { start: startDate, end: endDate } : null\n    setDraftRange(range)\n    setIsOpen(true)\n  }, [startDate, endDate])\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleApply = useCallback(() => {\n    if (draftRange) {\n      onStartDateChange(draftRange.start)\n      onEndDateChange(draftRange.end)\n    } else {\n      onClear()\n    }\n    setIsOpen(false)\n  }, [draftRange, onStartDateChange, onEndDateChange, onClear])\n\n  const handleReset = useCallback(() => {\n    setDraftRange(null)\n  }, [])\n\n  const handleRangeChange = useCallback((range: DateRange | null) => {\n    setDraftRange(range)\n  }, [])\n\n  const filterDateLabel = useMemo(() => {\n    if (!isFilterActive || !startDate || !endDate) return null\n    return `${formatFilterDate(startDate)} – ${formatFilterDate(endDate)}`\n  }, [isFilterActive, startDate, endDate])\n\n  const triggerButton = (\n    <Button\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"secondary\"\n      icon={<FilterFunnelIcon />}\n      className={styles.triggerButton}\n    >\n      {filterDateLabel ?? selectDatesLabel}\n    </Button>\n  )\n\n  return (\n    <>\n      {triggerButton}\n\n      <Popover\n        UNSTABLE_portalContainer={container.current ?? undefined}\n        isOpen={isOpen}\n        onOpenChange={open => {\n          if (!open) handleClose()\n        }}\n        triggerRef={triggerRef}\n        placement=\"bottom end\"\n        offset={8}\n        shouldUpdatePosition\n      >\n        <Dialog className={styles.dialog} aria-label={`${startDateLabel} – ${endDateLabel}`}>\n          <div className={styles.popoverContent}>\n            <DateRangePicker\n              label={`${startDateLabel} – ${endDateLabel}`}\n              shouldVisuallyHideLabel\n              value={draftRange}\n              onChange={handleRangeChange}\n              startDateLabel={startDateLabel}\n              endDateLabel={endDateLabel}\n              minValue={minStartDate}\n              maxValue={maxEndDate}\n            />\n          </div>\n\n          <div className={styles.popoverFooter}>\n            <Flex gap={8} justifyContent=\"space-between\">\n              <Button variant=\"tertiary\" onClick={handleReset}>\n                {resetLabel}\n              </Button>\n              <Flex gap={8} justifyContent=\"flex-end\">\n                <Button variant=\"secondary\" onClick={handleClose}>\n                  {cancelLabel}\n                </Button>\n                <Button variant=\"primary\" onClick={handleApply}>\n                  {applyLabel}\n                </Button>\n              </Flex>\n            </Flex>\n          </div>\n        </Dialog>\n      </Popover>\n    </>\n  )\n}\n"],"names":["formatFilterDate","date","DateRangeFilter","startDate","endDate","onStartDateChange","onEndDateChange","onClear","startDateLabel","endDateLabel","applyLabel","cancelLabel","resetLabel","selectDatesLabel","triggerLabel","isFilterActive","maxEndDate","minStartDate","Button","DateRangePicker","useComponentContext","container","useTheme","isOpen","setIsOpen","useState","draftRange","setDraftRange","triggerRef","useRef","handleOpen","useCallback","handleClose","handleApply","handleReset","handleRangeChange","range","filterDateLabel","useMemo","triggerButton","jsx","FilterFunnelIcon","styles","jsxs","Fragment","Popover","open","Dialog","Flex"],"mappings":"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"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../../src/components/Common/DateRangeFilter/DateRangeFilter.tsx"],"sourcesContent":["import { useState, useRef, useCallback, useMemo } from 'react'\nimport { Dialog, Popover } from 'react-aria-components'\nimport styles from './DateRangeFilter.module.scss'\nimport type { DateRange } from '@/components/Common/UI/DateRangePicker/DateRangePickerTypes'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport FilterFunnelIcon from '@/assets/icons/filter-funnel.svg?react'\n\nconst formatFilterDate = (date: Date): string =>\n  date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\ninterface DateRangeFilterProps {\n  startDate: Date | null\n  endDate: Date | null\n  onStartDateChange: (date: Date | null) => void\n  onEndDateChange: (date: Date | null) => void\n  onClear: () => void\n  startDateLabel: string\n  endDateLabel: string\n  applyLabel: string\n  cancelLabel: string\n  resetLabel: string\n  selectDatesLabel: string\n  triggerLabel: string\n  maxEndDate?: Date\n  minStartDate?: Date\n}\n\n/** @internal */\nexport const DateRangeFilter = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  onClear,\n  startDateLabel,\n  endDateLabel,\n  applyLabel,\n  cancelLabel,\n  resetLabel,\n  selectDatesLabel,\n  triggerLabel,\n  maxEndDate,\n  minStartDate,\n}: DateRangeFilterProps) => {\n  const { Button, DateRangePicker } = useComponentContext()\n  const { container } = useTheme()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [draftRange, setDraftRange] = useState<DateRange | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleOpen = useCallback(() => {\n    const range = startDate && endDate ? { start: startDate, end: endDate } : null\n    setDraftRange(range)\n    setIsOpen(true)\n  }, [startDate, endDate])\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleApply = useCallback(() => {\n    if (draftRange) {\n      onStartDateChange(draftRange.start)\n      onEndDateChange(draftRange.end)\n    } else {\n      onClear()\n    }\n    setIsOpen(false)\n  }, [draftRange, onStartDateChange, onEndDateChange, onClear])\n\n  const handleReset = useCallback(() => {\n    setDraftRange(null)\n  }, [])\n\n  const handleRangeChange = useCallback((range: DateRange | null) => {\n    setDraftRange(range)\n  }, [])\n\n  const filterDateLabel = useMemo(() => {\n    if (!startDate || !endDate) return null\n    return `${formatFilterDate(startDate)} – ${formatFilterDate(endDate)}`\n  }, [startDate, endDate])\n\n  const triggerButton = (\n    <Button\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"secondary\"\n      icon={<FilterFunnelIcon />}\n      className={styles.triggerButton}\n    >\n      {filterDateLabel ?? selectDatesLabel}\n    </Button>\n  )\n\n  return (\n    <>\n      {triggerButton}\n\n      <Popover\n        UNSTABLE_portalContainer={container.current ?? undefined}\n        isOpen={isOpen}\n        onOpenChange={open => {\n          if (!open) handleClose()\n        }}\n        triggerRef={triggerRef}\n        placement=\"bottom end\"\n        offset={8}\n        shouldUpdatePosition\n      >\n        <Dialog className={styles.dialog} aria-label={`${startDateLabel} – ${endDateLabel}`}>\n          <div className={styles.popoverContent}>\n            <DateRangePicker\n              label={`${startDateLabel} – ${endDateLabel}`}\n              shouldVisuallyHideLabel\n              value={draftRange}\n              onChange={handleRangeChange}\n              startDateLabel={startDateLabel}\n              endDateLabel={endDateLabel}\n              minValue={minStartDate}\n              maxValue={maxEndDate}\n            />\n          </div>\n\n          <div className={styles.popoverFooter}>\n            <Flex gap={8} justifyContent=\"space-between\">\n              <Button variant=\"tertiary\" onClick={handleReset}>\n                {resetLabel}\n              </Button>\n              <Flex gap={8} justifyContent=\"flex-end\">\n                <Button variant=\"secondary\" onClick={handleClose}>\n                  {cancelLabel}\n                </Button>\n                <Button variant=\"primary\" onClick={handleApply}>\n                  {applyLabel}\n                </Button>\n              </Flex>\n            </Flex>\n          </div>\n        </Dialog>\n      </Popover>\n    </>\n  )\n}\n"],"names":["formatFilterDate","date","DateRangeFilter","startDate","endDate","onStartDateChange","onEndDateChange","onClear","startDateLabel","endDateLabel","applyLabel","cancelLabel","resetLabel","selectDatesLabel","triggerLabel","maxEndDate","minStartDate","Button","DateRangePicker","useComponentContext","container","useTheme","isOpen","setIsOpen","useState","draftRange","setDraftRange","triggerRef","useRef","handleOpen","useCallback","handleClose","handleApply","handleReset","handleRangeChange","range","filterDateLabel","useMemo","triggerButton","jsx","FilterFunnelIcon","styles","jsxs","Fragment","Popover","open","Dialog","Flex"],"mappings":"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"}

package/dist/components/Common/Fields/PercentageField/PercentageField.js

@@ -1,58 +1,60 @@
-import { jsx as N } from "react/jsx-runtime";
-import { useMemo as d } from "react";
-import { useTranslation as C } from "react-i18next";
+import { jsx as C } from "react/jsx-runtime";
+import { useTranslation as v } from "react-i18next";
+import { useFormContext as x } from "react-hook-form";
 import { useField as F } from "../hooks/useField.js";
-import { useComponentContext as b } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { decimalToPercent as u, percentToDecimal as h } from "../../../../helpers/percentageConversion.js";
-function x(t) {
-  if (!(t == null || typeof t == "boolean"))
-    return String(t);
+import { useComponentContext as N } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { decimalToPercent as a, percentToDecimal as b } from "../../../../helpers/percentageConversion.js";
+function h(e) {
+  if (!(e == null || typeof e == "boolean"))
+    return String(e);
 }
-function I({
-  decimalValue: t,
-  decimalMin: o,
-  decimalMax: n,
-  ...a
+function j({
+  decimalValue: e,
+  decimalMin: r,
+  decimalMax: m,
+  ...t
 }) {
-  const f = b(), { t: i } = C("common"), p = d(() => {
-    const r = {};
-    if (o !== void 0) {
-      const m = parseFloat(o);
-      r.min = (s) => {
-        const e = Number(s);
-        return isNaN(e) ? !0 : e >= m || i("validations.percentageMin", { min: u(o) });
-      };
+  const c = N(), { t: i } = v("common"), { setError: s, clearErrors: u } = x(), { value: f, onChange: l, ...g } = F({
+    ...t,
+    defaultValue: h(e)
+  }), d = (o) => {
+    const n = Number(o);
+    if (o === "" || Number.isNaN(n)) {
+      u(t.name);
+      return;
     }
-    if (n !== void 0) {
-      const m = parseFloat(n);
-      r.max = (s) => {
-        const e = Number(s);
-        return isNaN(e) ? !0 : e <= m || i("validations.percentageMax", { max: u(n) });
-      };
+    if (r !== void 0 && n < parseFloat(r)) {
+      s(t.name, {
+        type: "min",
+        message: i("validations.percentageMin", { min: a(r) })
+      });
+      return;
     }
-    return r;
-  }, [o, n, i]), { value: c, onChange: l, ...g } = F({
-    ...a,
-    defaultValue: x(t),
-    rules: { validate: p }
-  }), v = (r) => {
-    l(h(r));
+    if (m !== void 0 && n > parseFloat(m)) {
+      s(t.name, {
+        type: "max",
+        message: i("validations.percentageMax", { max: a(m) })
+      });
+      return;
+    }
+    u(t.name);
+  }, p = (o) => {
+    const n = b(o);
+    d(n), l(n);
   };
-  return /* @__PURE__ */ N(
-    f.NumberInput,
+  return /* @__PURE__ */ C(
+    c.NumberInput,
     {
-      ...a,
+      ...t,
       ...g,
-      value: u(c),
-      onChange: v,
-      min: o ? u(o) : void 0,
-      max: n ? u(n) : void 0,
+      value: a(f),
+      onChange: p,
       format: "percent",
       maximumFractionDigits: 4
     }
   );
 }
 export {
-  I as PercentageField
+  j as PercentageField
 };
 //# sourceMappingURL=PercentageField.js.map

package/dist/components/Common/Fields/PercentageField/PercentageField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PercentageField.js","sources":["../../../../../src/components/Common/Fields/PercentageField/PercentageField.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { NumberInputProps } from '@/components/Common/UI/NumberInput/NumberInputTypes'\nimport { useField } from '@/components/Common/Fields/hooks/useField'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { decimalToPercent, percentToDecimal } from '@/helpers/percentageConversion'\n\n/** @internal */\nexport interface PercentageFieldProps extends Pick<\n  NumberInputProps,\n  'isDisabled' | 'className' | 'label' | 'isRequired' | 'description' | 'errorMessage'\n> {\n  name: string\n  decimalValue?: string | number | boolean | null\n  decimalMin?: string\n  decimalMax?: string\n}\n\nfunction toDefaultString(value?: string | number | boolean | null): string | undefined {\n  if (value === null || value === undefined || typeof value === 'boolean') return undefined\n  return String(value)\n}\n\n/** @internal */\nexport function PercentageField({\n  decimalValue,\n  decimalMin,\n  decimalMax,\n  ...props\n}: PercentageFieldProps) {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n\n  const validationRules = useMemo(() => {\n    const rules: Record<string, (value: string) => string | true> = {}\n\n    if (decimalMin !== undefined) {\n      const minNum = parseFloat(decimalMin)\n      rules.min = (value: string) => {\n        const num = Number(value)\n        if (isNaN(num)) return true\n        return (\n          num >= minNum || t('validations.percentageMin', { min: decimalToPercent(decimalMin) })\n        )\n      }\n    }\n\n    if (decimalMax !== undefined) {\n      const maxNum = parseFloat(decimalMax)\n      rules.max = (value: string) => {\n        const num = Number(value)\n        if (isNaN(num)) return true\n        return (\n          num <= maxNum || t('validations.percentageMax', { max: decimalToPercent(decimalMax) })\n        )\n      }\n    }\n\n    return rules\n  }, [decimalMin, decimalMax, t])\n\n  const { value, onChange, ...fieldProps } = useField({\n    ...props,\n    defaultValue: toDefaultString(decimalValue),\n    rules: { validate: validationRules },\n  })\n\n  const handleChange = (percentValue: number) => {\n    onChange(percentToDecimal(percentValue))\n  }\n\n  return (\n    <Components.NumberInput\n      {...props}\n      {...fieldProps}\n      value={decimalToPercent(value)}\n      onChange={handleChange}\n      min={decimalMin ? decimalToPercent(decimalMin) : undefined}\n      max={decimalMax ? decimalToPercent(decimalMax) : undefined}\n      format=\"percent\"\n      maximumFractionDigits={4}\n    />\n  )\n}\n"],"names":["toDefaultString","value","PercentageField","decimalValue","decimalMin","decimalMax","props","Components","useComponentContext","t","useTranslation","validationRules","useMemo","rules","minNum","num","decimalToPercent","maxNum","onChange","fieldProps","useField","handleChange","percentValue","percentToDecimal","jsx"],"mappings":";;;;;;AAkBA,SAASA,EAAgBC,GAA8D;AACrF,MAAI,EAAAA,KAAU,QAA+B,OAAOA,KAAU;AAC9D,WAAO,OAAOA,CAAK;AACrB;AAGO,SAASC,EAAgB;AAAA,EAC9B,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAE/BC,IAAkBC,EAAQ,MAAM;AACpC,UAAMC,IAA0D,CAAA;AAEhE,QAAIT,MAAe,QAAW;AAC5B,YAAMU,IAAS,WAAWV,CAAU;AACpC,MAAAS,EAAM,MAAM,CAACZ,MAAkB;AAC7B,cAAMc,IAAM,OAAOd,CAAK;AACxB,eAAI,MAAMc,CAAG,IAAU,KAErBA,KAAOD,KAAUL,EAAE,6BAA6B,EAAE,KAAKO,EAAiBZ,CAAU,GAAG;AAAA,MAEzF;AAAA,IACF;AAEA,QAAIC,MAAe,QAAW;AAC5B,YAAMY,IAAS,WAAWZ,CAAU;AACpC,MAAAQ,EAAM,MAAM,CAACZ,MAAkB;AAC7B,cAAMc,IAAM,OAAOd,CAAK;AACxB,eAAI,MAAMc,CAAG,IAAU,KAErBA,KAAOE,KAAUR,EAAE,6BAA6B,EAAE,KAAKO,EAAiBX,CAAU,GAAG;AAAA,MAEzF;AAAA,IACF;AAEA,WAAOQ;AAAA,EACT,GAAG,CAACT,GAAYC,GAAYI,CAAC,CAAC,GAExB,EAAE,OAAAR,GAAO,UAAAiB,GAAU,GAAGC,EAAA,IAAeC,EAAS;AAAA,IAClD,GAAGd;AAAA,IACH,cAAcN,EAAgBG,CAAY;AAAA,IAC1C,OAAO,EAAE,UAAUQ,EAAA;AAAA,EAAgB,CACpC,GAEKU,IAAe,CAACC,MAAyB;AAC7C,IAAAJ,EAASK,EAAiBD,CAAY,CAAC;AAAA,EACzC;AAEA,SACE,gBAAAE;AAAA,IAACjB,EAAW;AAAA,IAAX;AAAA,MACE,GAAGD;AAAA,MACH,GAAGa;AAAA,MACJ,OAAOH,EAAiBf,CAAK;AAAA,MAC7B,UAAUoB;AAAA,MACV,KAAKjB,IAAaY,EAAiBZ,CAAU,IAAI;AAAA,MACjD,KAAKC,IAAaW,EAAiBX,CAAU,IAAI;AAAA,MACjD,QAAO;AAAA,MACP,uBAAuB;AAAA,IAAA;AAAA,EAAA;AAG7B;"}
+{"version":3,"file":"PercentageField.js","sources":["../../../../../src/components/Common/Fields/PercentageField/PercentageField.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useFormContext } from 'react-hook-form'\nimport type { NumberInputProps } from '@/components/Common/UI/NumberInput/NumberInputTypes'\nimport { useField } from '@/components/Common/Fields/hooks/useField'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { decimalToPercent, percentToDecimal } from '@/helpers/percentageConversion'\n\n/** @internal */\nexport interface PercentageFieldProps extends Pick<\n  NumberInputProps,\n  'isDisabled' | 'className' | 'label' | 'isRequired' | 'description' | 'errorMessage'\n> {\n  name: string\n  decimalValue?: string | number | boolean | null\n  decimalMin?: string\n  decimalMax?: string\n}\n\nfunction toDefaultString(value?: string | number | boolean | null): string | undefined {\n  if (value === null || value === undefined || typeof value === 'boolean') return undefined\n  return String(value)\n}\n\n/** @internal */\nexport function PercentageField({\n  decimalValue,\n  decimalMin,\n  decimalMax,\n  ...props\n}: PercentageFieldProps) {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const { setError, clearErrors } = useFormContext()\n\n  const { value, onChange, ...fieldProps } = useField({\n    ...props,\n    defaultValue: toDefaultString(decimalValue),\n  })\n\n  // Deliberately not passed to NumberInput's `min`/`max` props: react-aria's NumberField\n  // treats those as hard bounds and silently clamps out-of-range values to them on blur,\n  // with no error shown. Validating here instead keeps the value the user actually typed\n  // on screen, paired with a real error message.\n  const validateRange = (rawDecimalValue: string) => {\n    const num = Number(rawDecimalValue)\n    if (rawDecimalValue === '' || Number.isNaN(num)) {\n      clearErrors(props.name)\n      return\n    }\n    if (decimalMin !== undefined && num < parseFloat(decimalMin)) {\n      setError(props.name, {\n        type: 'min',\n        message: t('validations.percentageMin', { min: decimalToPercent(decimalMin) }),\n      })\n      return\n    }\n    if (decimalMax !== undefined && num > parseFloat(decimalMax)) {\n      setError(props.name, {\n        type: 'max',\n        message: t('validations.percentageMax', { max: decimalToPercent(decimalMax) }),\n      })\n      return\n    }\n    clearErrors(props.name)\n  }\n\n  const handleChange = (percentValue: number) => {\n    const decimalStr = percentToDecimal(percentValue)\n    validateRange(decimalStr)\n    onChange(decimalStr)\n  }\n\n  return (\n    <Components.NumberInput\n      {...props}\n      {...fieldProps}\n      value={decimalToPercent(value)}\n      onChange={handleChange}\n      format=\"percent\"\n      maximumFractionDigits={4}\n    />\n  )\n}\n"],"names":["toDefaultString","value","PercentageField","decimalValue","decimalMin","decimalMax","props","Components","useComponentContext","t","useTranslation","setError","clearErrors","useFormContext","onChange","fieldProps","useField","validateRange","rawDecimalValue","num","decimalToPercent","handleChange","percentValue","decimalStr","percentToDecimal","jsx"],"mappings":";;;;;;AAkBA,SAASA,EAAgBC,GAA8D;AACrF,MAAI,EAAAA,KAAU,QAA+B,OAAOA,KAAU;AAC9D,WAAO,OAAOA,CAAK;AACrB;AAGO,SAASC,EAAgB;AAAA,EAC9B,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/B,EAAE,UAAAC,GAAU,aAAAC,EAAA,IAAgBC,EAAA,GAE5B,EAAE,OAAAZ,GAAO,UAAAa,GAAU,GAAGC,EAAA,IAAeC,EAAS;AAAA,IAClD,GAAGV;AAAA,IACH,cAAcN,EAAgBG,CAAY;AAAA,EAAA,CAC3C,GAMKc,IAAgB,CAACC,MAA4B;AACjD,UAAMC,IAAM,OAAOD,CAAe;AAClC,QAAIA,MAAoB,MAAM,OAAO,MAAMC,CAAG,GAAG;AAC/C,MAAAP,EAAYN,EAAM,IAAI;AACtB;AAAA,IACF;AACA,QAAIF,MAAe,UAAae,IAAM,WAAWf,CAAU,GAAG;AAC5D,MAAAO,EAASL,EAAM,MAAM;AAAA,QACnB,MAAM;AAAA,QACN,SAASG,EAAE,6BAA6B,EAAE,KAAKW,EAAiBhB,CAAU,GAAG;AAAA,MAAA,CAC9E;AACD;AAAA,IACF;AACA,QAAIC,MAAe,UAAac,IAAM,WAAWd,CAAU,GAAG;AAC5D,MAAAM,EAASL,EAAM,MAAM;AAAA,QACnB,MAAM;AAAA,QACN,SAASG,EAAE,6BAA6B,EAAE,KAAKW,EAAiBf,CAAU,GAAG;AAAA,MAAA,CAC9E;AACD;AAAA,IACF;AACA,IAAAO,EAAYN,EAAM,IAAI;AAAA,EACxB,GAEMe,IAAe,CAACC,MAAyB;AAC7C,UAAMC,IAAaC,EAAiBF,CAAY;AAChD,IAAAL,EAAcM,CAAU,GACxBT,EAASS,CAAU;AAAA,EACrB;AAEA,SACE,gBAAAE;AAAA,IAAClB,EAAW;AAAA,IAAX;AAAA,MACE,GAAGD;AAAA,MACH,GAAGS;AAAA,MACJ,OAAOK,EAAiBnB,CAAK;AAAA,MAC7B,UAAUoB;AAAA,MACV,QAAO;AAAA,MACP,uBAAuB;AAAA,IAAA;AAAA,EAAA;AAG7B;"}

package/dist/components/Common/UI/Box/Box.js

@@ -1,11 +1,11 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import m from "classnames";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import c from "classnames";
 import s from "./Box.module.scss.js";
-function x({ children: o, header: e, footer: a, withPadding: r = !0, className: i }) {
-  return /* @__PURE__ */ c("div", { className: m(s.root, i), "data-testid": "data-box", children: [
+function x({ children: a, header: e, footer: o, withPadding: r = !0, className: i }) {
+  return /* @__PURE__ */ m("div", { className: c(s.root, i), "data-testid": "data-box", children: [
     e && /* @__PURE__ */ t("div", { className: s.header, children: e }),
-    /* @__PURE__ */ t("div", { className: r ? s.content : s.contentFlush, children: o }),
-    a && /* @__PURE__ */ t("div", { className: s.footer, children: a })
+    a && /* @__PURE__ */ t("div", { className: r ? s.content : s.contentFlush, children: a }),
+    o && /* @__PURE__ */ t("div", { className: s.footer, children: o })
   ] });
 }
 export {

package/dist/components/Common/UI/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../../src/components/Common/UI/Box/Box.tsx"],"sourcesContent":["import cn from 'classnames'\nimport styles from './Box.module.scss'\nimport type { BoxProps } from '@/components/Common/UI/Box/BoxTypes'\n\n/**\n * Renders a bordered container that groups related content, with optional header and footer slots.\n *\n * @param props - The {@link BoxProps} controlling the box contents, header, footer, and padding.\n * @returns The rendered box.\n * @internal\n */\nexport function Box({ children, header, footer, withPadding = true, className }: BoxProps) {\n  return (\n    <div className={cn(styles.root, className)} data-testid=\"data-box\">\n      {header && <div className={styles.header}>{header}</div>}\n      <div className={withPadding ? styles.content : styles.contentFlush}>{children}</div>\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  )\n}\n"],"names":["Box","children","header","footer","withPadding","className","jsxs","cn","styles","jsx"],"mappings":";;;AAWO,SAASA,EAAI,EAAE,UAAAC,GAAU,QAAAC,GAAQ,QAAAC,GAAQ,aAAAC,IAAc,IAAM,WAAAC,KAAuB;AACzF,SACE,gBAAAC,EAAC,SAAI,WAAWC,EAAGC,EAAO,MAAMH,CAAS,GAAG,eAAY,YACrD,UAAA;AAAA,IAAAH,KAAU,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAN,GAAO;AAAA,IAClD,gBAAAO,EAAC,SAAI,WAAWL,IAAcI,EAAO,UAAUA,EAAO,cAAe,UAAAP,GAAS;AAAA,IAC7EE,KAAU,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAL,EAAA,CAAO;AAAA,EAAA,GACpD;AAEJ;"}
+{"version":3,"file":"Box.js","sources":["../../../../../src/components/Common/UI/Box/Box.tsx"],"sourcesContent":["import cn from 'classnames'\nimport styles from './Box.module.scss'\nimport type { BoxProps } from '@/components/Common/UI/Box/BoxTypes'\n\n/**\n * Renders a bordered container that groups related content, with optional header and footer slots.\n *\n * @param props - The {@link BoxProps} controlling the box contents, header, footer, and padding.\n * @returns The rendered box.\n * @internal\n */\nexport function Box({ children, header, footer, withPadding = true, className }: BoxProps) {\n  return (\n    <div className={cn(styles.root, className)} data-testid=\"data-box\">\n      {header && <div className={styles.header}>{header}</div>}\n      {children && (\n        <div className={withPadding ? styles.content : styles.contentFlush}>{children}</div>\n      )}\n      {footer && <div className={styles.footer}>{footer}</div>}\n    </div>\n  )\n}\n"],"names":["Box","children","header","footer","withPadding","className","jsxs","cn","styles","jsx"],"mappings":";;;AAWO,SAASA,EAAI,EAAE,UAAAC,GAAU,QAAAC,GAAQ,QAAAC,GAAQ,aAAAC,IAAc,IAAM,WAAAC,KAAuB;AACzF,SACE,gBAAAC,EAAC,SAAI,WAAWC,EAAGC,EAAO,MAAMH,CAAS,GAAG,eAAY,YACrD,UAAA;AAAA,IAAAH,KAAU,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAN,GAAO;AAAA,IACjDD,uBACE,OAAA,EAAI,WAAWG,IAAcI,EAAO,UAAUA,EAAO,cAAe,UAAAP,EAAA,CAAS;AAAA,IAE/EE,KAAU,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,UAAAL,EAAA,CAAO;AAAA,EAAA,GACpD;AAEJ;"}

package/dist/components/Common/UI/Box/Box.module.scss.js

@@ -1,16 +1,16 @@
-const t = "_root_16abs_1", o = "_header_16abs_12", e = "_content_16abs_17", n = "_contentFlush_16abs_22", s = "_footer_16abs_27", _ = {
-  root: t,
-  header: o,
+const o = "_root_1polg_1", t = "_header_1polg_12", e = "_content_1polg_17", n = "_contentFlush_1polg_22", _ = "_footer_1polg_27", c = {
+  root: o,
+  header: t,
   content: e,
   contentFlush: n,
-  footer: s
+  footer: _
 };
 export {
   e as content,
   n as contentFlush,
-  _ as default,
-  s as footer,
-  o as header,
-  t as root
+  c as default,
+  _ as footer,
+  t as header,
+  o as root
 };
 //# sourceMappingURL=Box.module.scss.js.map

package/dist/components/Common/UI/Box/BoxTypes.d.ts

@@ -10,7 +10,7 @@ export interface BoxProps {
     /**
      * Content rendered inside the box body.
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Optional content rendered above the body in the box header section.
      */

package/dist/components/Common/UI/Breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,9 @@
 import { jsx as l } from "react/jsx-runtime";
 import h from "classnames";
+import { Flex as u } from "../../Flex/Flex.js";
 import { BreadcrumbsDefaults as C } from "./BreadcrumbsTypes.js";
 import i from "./Breadcrumbs.module.scss.js";
 import { applyMissingDefaults as x } from "../../../../helpers/applyMissingDefaults.js";
-import { Flex as u } from "../../Flex/Flex.js";
 function P(f) {
   const p = x(f, C), {
     className: s,

package/dist/components/Common/UI/CalendarPreview/CalendarPreview.js

@@ -1,37 +1,39 @@
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { Text as m, RangeCalendar as D, CalendarGrid as x, CalendarGridHeader as N, CalendarHeaderCell as I, CalendarGridBody as S, CalendarCell as F } from "react-aria-components";
+import { Text as m, RangeCalendar as w, CalendarGrid as x, CalendarGridHeader as N, CalendarHeaderCell as I, CalendarGridBody as S, CalendarCell as F } from "react-aria-components";
 import { parseDate as p } from "@internationalized/date";
 import { useMemo as u } from "react";
-import { CalendarLegend as g } from "./CalendarLegend.js";
-import d from "./CalendarPreview.module.scss.js";
-import { formatDateToStringDate as s } from "../../../../helpers/dateFormatting.js";
+import { CalendarLegend as T } from "./CalendarLegend.js";
+import s from "./CalendarPreview.module.scss.js";
+import { formatDateToStringDate as d, normalizeToDate as g } from "../../../../helpers/dateFormatting.js";
 import { Flex as f } from "../../Flex/Flex.js";
 const L = ({ dateRange: t, highlightDates: n }) => {
   const C = u(() => n ? new Map(
     n.map((e) => [
-      s(e.date),
+      d(e.date),
       e.highlightColor
     ])
   ) : /* @__PURE__ */ new Map(), [n]), M = (e) => {
-    const a = new Date(e.toString()), { start: o, end: y } = t;
-    return a >= o && a <= y;
+    const a = g(e.toString());
+    if (!a) return !1;
+    const { start: o, end: D } = t;
+    return a >= o && a <= D;
   }, h = u(() => {
     const e = [t.start, t.end, ...n?.map((o) => o.date) || []], a = e[0]?.getMonth() ?? 0;
     return e.some((o) => o.getMonth() !== a);
   }, [t, n]), v = (e) => new Intl.DateTimeFormat(void 0, {
     month: "long",
     year: "numeric"
-  }).format(e), i = s(t.start), c = s(t.end), w = i && c ? {
+  }).format(e), i = d(t.start), c = d(t.end), y = i && c ? {
     start: p(i),
     end: p(c)
   } : void 0;
-  return /* @__PURE__ */ r("div", { className: d.calendar, children: /* @__PURE__ */ l("div", { className: d.calendarWrapper, children: [
-    /* @__PURE__ */ r("div", { className: d.calendarHeader, children: /* @__PURE__ */ r(f, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ r(m, { children: v(t.start) }) }) }),
+  return /* @__PURE__ */ r("div", { className: s.calendar, children: /* @__PURE__ */ l("div", { className: s.calendarWrapper, children: [
+    /* @__PURE__ */ r("div", { className: s.calendarHeader, children: /* @__PURE__ */ r(f, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ r(m, { children: v(t.start) }) }) }),
     /* @__PURE__ */ l(
-      D,
+      w,
       {
         isReadOnly: !0,
-        value: w,
+        value: y,
         visibleDuration: h ? { weeks: 2 } : void 0,
         children: [
           /* @__PURE__ */ l(x, { weekdayStyle: "short", children: [
@@ -46,7 +48,7 @@ const L = ({ dateRange: t, highlightDates: n }) => {
                 "data-disabled": !0,
                 children: ({ formattedDate: a }) => /* @__PURE__ */ l(f, { flexDirection: "column", alignItems: "center", gap: 0, children: [
                   a,
-                  /* @__PURE__ */ r("div", { className: d.dateMarker })
+                  /* @__PURE__ */ r("div", { className: s.dateMarker })
                 ] })
               }
             ) })
@@ -55,7 +57,7 @@ const L = ({ dateRange: t, highlightDates: n }) => {
         ]
       }
     ),
-    /* @__PURE__ */ r(g, { highlightDates: n, dateRange: t })
+    /* @__PURE__ */ r(T, { highlightDates: n, dateRange: t })
   ] }) });
 };
 export {