@codeleap/web 6.3.0 → 6.8.0

package/src/components/Checkbox/styles.ts

@@ -1,16 +1,4 @@
-import { InputBaseParts, InputBaseStates } from '../InputBase'
+import { FieldParts } from '../Field'
 
-type AnimatableParts = 'checkmarkWrapper' | 'box'
-
-export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark'
-
-export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked'
-
-export type CheckboxStates = InputBaseStates
-
-export type CheckboxComposition =
-  | CheckboxParts
-  | `${CheckboxParts}:${CheckboxStates}`
-  | `${AnimatableParts}:transition`
-  | `${AnimatableParts}:${CheckboxAnimationStates}`
-  | '__props'
+type CheckboxParts = FieldParts | 'box' | 'checkmarkWrapper' | 'checkmark'
+export type CheckboxComposition = CheckboxParts

package/src/components/Checkbox/types.ts

@@ -1,17 +1,31 @@
 import { CheckboxComposition } from './styles'
-import { InputBaseProps } from '../InputBase'
-import { ComponentCommonProps } from '../../types'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { FieldProps } from '../Field'
+import { FieldStateContext } from '../Field/styles'
+import { AppIcon, ICSS, StyleProp } from '@codeleap/styles'
 import { BooleanField } from '@codeleap/form'
 
+export interface CheckboxStyleDef {
+  __internal: Record<CheckboxComposition, ICSS>
+}
+
+/** Extends `FieldStateContext` with the checkbox-position flag used for style variants. */
+export interface CheckboxFieldContext extends FieldStateContext {
+  checkboxOnLeft?: boolean
+}
+
+/**
+ * Props for `Checkbox`.
+ * `checkboxOnLeft` repositions the tick box before the label; exposed as a context flag so variant styles can react.
+ * `checkIcon` overrides the icon rendered inside the tick box (defaults to `'check'`).
+ */
 export type CheckboxProps =
-  Pick<InputBaseProps, 'disabled' | 'label'> &
-  ComponentCommonProps &
-  {
-    style?: StyledProp<CheckboxComposition>
+  Pick<FieldProps, 'label' | 'helper' | 'leftSection' | 'rightSection'> & {
+    style?: StyleProp<CheckboxComposition, keyof CheckboxStyleDef>
     checkboxOnLeft?: boolean
     checkIcon?: AppIcon
     field?: BooleanField<any>
     value?: boolean
     onValueChange?: (value: boolean) => void
+    disabled?: boolean
+    debugName?: string
   }

package/src/components/Collapse/index.tsx

@@ -7,6 +7,10 @@ import { motion } from 'motion/react'
 export * from './styles'
 export * from './types'
 
+/**
+ * Animates a content region between zero height (collapsed) and its natural height (expanded) using Framer Motion.
+ * Fully controlled — pass `open` from the caller; the component owns no toggle state of its own.
+ */
 export const Collapse = (props: CollapseProps) => {
   const {
     open,
@@ -27,7 +31,6 @@ export const Collapse = (props: CollapseProps) => {
       transition={{ duration: 0.2 }}
       {...rest}
       style={open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']}
-      // @ts-expect-error css type
       css={[styles.wrapper, open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']]}
     >
       {children}

package/src/components/Collapse/types.ts

@@ -1,11 +1,14 @@
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp, StyledProp } from '@codeleap/styles'
 import { MotionProps } from 'motion/react'
 import { CollapseComposition } from './styles'
 
+export interface CollapseStyleDef {}
+
 export type CollapseProps =
   Omit<MotionProps, 'style'> &
   {
+    /** Controls expanded (`true`) or collapsed (`false`) state; the component is fully controlled. */
     open: boolean
-    style?: StyledProp<CollapseComposition>
+    style?: StyleProp<CollapseComposition, keyof CollapseStyleDef>
     children?: React.ReactNode
   }

package/src/components/ColorPicker/index.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback } from 'react'
-import { ActionIcon, Collapse, View } from '../components'
+import { Button } from '../Button'
+import { Collapse } from '../Collapse'
+import { View } from '../View'
 import { HexColorPicker } from 'react-colorful'
 import { TypeGuards } from '@codeleap/types'
 import { useConditionalState, useState } from '@codeleap/hooks'
@@ -16,13 +18,13 @@ const DefaultFooter = (props: ColorPickerFooterProps) => {
 
   return (
     <View style={styles.footerWrapper}>
-      <ActionIcon
+      <Button
         debugName='ColorPicker footer trash'
         name={clearIcon}
         onPress={handleClear}
         style={styles.clearIcon}
       />
-      <ActionIcon
+      <Button
         debugName='ColorPicker footer check'
         name={confirmIcon}
         onPress={handleConfirmation}
@@ -32,6 +34,11 @@ const DefaultFooter = (props: ColorPickerFooterProps) => {
   )
 }
 
+/**
+ * Color selection control that wraps any `react-colorful` picker in either an inline (`isPlain`) or collapsible-dropdown layout with optional confirm/clear footer actions.
+ * Internal color state is initialised from `initialColor`; `onConfirm` fires only when the user explicitly confirms (not on every picker drag).
+ * Uses: `Button`, `Collapse`, `View`
+ */
 export const ColorPicker = (props: ColorPickerProps) => {
   const {
     isPlain,
@@ -79,7 +86,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
       toggle={() => toggle(!visible)}
     />
   ) : (
-    <ActionIcon
+    <Button
       onPress={() => toggle(!visible)}
       icon={icon}
       {...openPickerProps}

package/src/components/ColorPicker/types.ts

@@ -1,10 +1,14 @@
 import React from 'react'
-import { ActionIconProps, ColorPickerComposition } from '../components'
-import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
+import { ButtonProps, ColorPickerComposition } from '../components'
+import { AppIcon, ICSS, StyleProp, StyledProp } from '@codeleap/styles'
 import { RgbColor, RgbaColor, HslColor, HsvColor, HslaColor, HsvaColor } from 'react-colorful'
 
+export interface ColorPickerStyleDef {}
+
+/** Union of all `react-colorful` color-object types plus a plain CSS hex/string. */
 export type ColorTypes = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor | string
 
+/** Props injected into the footer renderer by `ColorPicker`. */
 export type ColorPickerFooterProps = Pick<ColorPickerProps, 'confirmIcon' | 'clearIcon'> & {
   color?: ColorTypes
   handleConfirmation: (value: ColorTypes) => void
@@ -12,14 +16,22 @@ export type ColorPickerFooterProps = Pick<ColorPickerProps, 'confirmIcon' | 'cle
   styles: Record<ColorPickerComposition, ICSS>
 }
 
+/** Props injected into the custom open-picker trigger renderer by `ColorPicker`. */
 export type ColorPickerPickerProps = {
   color: ColorTypes
   visible: boolean
   toggle: (v?: boolean) => void
 }
 
+/**
+ * Props for `ColorPicker`.
+ * In the default (dropdown) mode a `Button` trigger opens a `Collapse` panel containing the picker; set `isPlain` to render the picker inline with no toggle.
+ * `visible`/`toggle` allow external control of the dropdown state; omit them for fully internal state.
+ * `pickerComponent` defaults to `HexColorPicker`; replace it with any `react-colorful` picker or a custom component.
+ * Confirmation and clear are handled by `footerComponent` (defaults to `DefaultFooter`); set `showFooter={false}` to hide it.
+ */
 export type ColorPickerProps = {
-  style?: StyledProp<ColorPickerComposition>
+  style?: StyleProp<ColorPickerComposition, keyof ColorPickerStyleDef>
   isPlain?: boolean
   closeOnConfirm?: boolean
   initialColor?: ColorTypes
@@ -27,7 +39,7 @@ export type ColorPickerProps = {
   icon?: AppIcon
   clearIcon?: AppIcon
   confirmIcon?: AppIcon
-  openPickerProps?: ActionIconProps
+  openPickerProps?: ButtonProps
   onConfirm?: (color: ColorTypes) => void
   onClear?: () => void
   openPickerComponent?: (props: ColorPickerPickerProps) => React.ReactElement

package/src/components/CropPicker/hooks.ts

@@ -5,13 +5,22 @@ import { Crop } from 'react-image-crop'
 import { calculateProportionalDimensions, cropImage, readImage } from './utils'
 
 export type UseCropPicker = {
+  /** Source image file to load into the crop editor. */
   file: File
+  /** Enforced aspect ratio for the crop selection; omit to allow free-form cropping. */
   aspect?: number
+  /** Minimum crop width in pixels; defaults to 100. */
   minWidth?: number
+  /** Minimum crop height in pixels; defaults to 100. */
   minHeight?: number
+  /** Called with the cropped `WebInputFile` on confirm, or `null` when the user cancels. */
   onCrop?: (croppedFile: WebInputFile | null) => void
 }
 
+/**
+ * Manages crop state for a `CropPicker`, including image loading, crop selection with minimum-size enforcement, confirm/cancel handlers, and display-size calculation.
+ * Pass the return value to `CropPicker` via the `handle` prop.
+ */
 export function useCropPicker({
   aspect,
   minWidth: minW,

package/src/components/CropPicker/index.tsx

@@ -4,17 +4,20 @@ import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { View } from '../View'
 import { ActivityIndicator } from '../ActivityIndicator'
-import { CropPickerFooter } from './components/CropPickerFooter'
 import { CropPickerProps } from './types'
 
+
 import 'react-image-crop/dist/ReactCrop.css'
 const ReactCrop: React.ElementType = require('react-image-crop').Component
 
 export * from './styles'
 export * from './types'
 export * from './hooks'
-export * from './components/CropPickerFooter'
 
+/**
+ * Image crop editor that wraps react-image-crop and delegates all crop state to a `useCropPicker` handle.
+ * Renders a loading spinner while the image is being decoded; renders nothing when `handle` is not provided.
+ */
 export const CropPicker = (props: CropPickerProps) => {
   const {
     style,
@@ -22,14 +25,13 @@ export const CropPicker = (props: CropPickerProps) => {
     reactCrop,
     aspect,
     children,
-    FooterComponent,
   } = {
     ...CropPicker.defaultProps,
     ...props,
   }
 
   const styles = useStylesFor(CropPicker.styleRegistryName, style)
-  const compositionStyles = useCompositionStyles(['indicator', 'confirm', 'cancel'], styles)
+  const compositionStyles = useCompositionStyles(['indicator'], styles)
 
   if (!handle) return null
 
@@ -38,51 +40,40 @@ export const CropPicker = (props: CropPickerProps) => {
     crop,
     setRelativeCrop,
     handleCropChange,
-    handleConfirmCrop,
-    handleCancelCrop,
   } = handle
 
-  if (!image?.src) return <View style={styles.loadingWrapper}><ActivityIndicator style={compositionStyles.indicator} debugName='CropPickerLoading' /></View>
-
   return (
-    <>
-      <ReactCrop
-        {...reactCrop}
-        crop={crop}
-        onChange={handleCropChange}
-        onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
-        style={styles.crop}
-        aspect={aspect ?? reactCrop?.aspect}
-      >
-        <img
-          src={image.src}
-          // @ts-ignore
-          css={[styles?.image]}
-        />
-      </ReactCrop>
-
+    <View style={styles.wrapper}>
+      {!image?.src ? (
+        <ActivityIndicator style={compositionStyles.indicator} debugName='CropPickerLoading' />
+      ) : (
+        <ReactCrop
+          {...reactCrop}
+          crop={crop}
+          onChange={handleCropChange}
+          onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
+          style={styles.crop}
+          aspect={aspect ?? reactCrop?.aspect}
+        >
+          <img
+            src={image.src}
+            // @ts-ignore
+            css={[styles?.image]}
+          />
+        </ReactCrop>
+      )}
       {children}
-
-      <FooterComponent
-        footerStyle={styles.footer}
-        confirmStyles={compositionStyles.confirm}
-        cancelStyles={compositionStyles.cancel}
-        onConfirmCrop={handleConfirmCrop}
-        onCancelCrop={handleCancelCrop}
-      />
-    </>
+    </View>
   )
 }
 
 CropPicker.styleRegistryName = 'CropPicker'
-CropPicker.elements = ['crop', 'image', 'footer', 'confirm', 'cancel', 'indicator', 'loadingWrapper']
+CropPicker.elements = ['crop', 'image', 'wrapper', 'indicator']
 CropPicker.rootElement = 'crop'
 CropPicker.withVariantTypes = <S extends AnyRecord>(styles: S) => {
   return CropPicker as (props: StyledComponentProps<CropPickerProps, typeof styles>) => IJSX
 }
 
-CropPicker.defaultProps = {
-  FooterComponent: CropPickerFooter,
-} as Partial<CropPickerProps>
+CropPicker.defaultProps = {} as Partial<CropPickerProps>
 
 WebStyleRegistry.registerComponent(CropPicker)

package/src/components/CropPicker/styles.ts

@@ -1,11 +1,7 @@
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
-import { ButtonComposition } from '../Button'
 
 export type CropPickerComposition =
   | 'crop'
   | 'image'
-  | 'footer'
+  | 'wrapper'
   | `indicator${Capitalize<ActivityIndicatorComposition>}`
-  | `confirm${Capitalize<ButtonComposition>}`
-  | `cancel${Capitalize<ButtonComposition>}`
-  | 'loadingWrapper'

package/src/components/CropPicker/types.ts

@@ -1,21 +1,24 @@
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp, StyledProp } from '@codeleap/styles'
 import { FileInputRef } from '../FileInput'
 import type { ReactCropProps } from 'react-image-crop'
 import { CropPickerComposition } from './styles'
 import React from 'react'
 import { useCropPicker } from './hooks'
 import { RefObject } from 'react'
-import { CropPickerFooterProps } from './components/CropPickerFooter'
 
 type NativeCropProps = Omit<ReactCropProps, 'crop' | 'onChange' | 'onComplete' | 'style'>
 
+export interface CropPickerStyleDef {}
+
 export type CropPickerProps =
   {
-    FooterComponent?: React.ComponentType<Partial<CropPickerFooterProps>>
     debugName: string
-    style?: StyledProp<CropPickerComposition>
+    style?: StyleProp<CropPickerComposition, keyof CropPickerStyleDef>
+    /** Return value of `useCropPicker`; the component renders nothing when omitted. */
     handle?: ReturnType<typeof useCropPicker>
+    /** Enforced aspect ratio forwarded to react-image-crop; takes precedence over `reactCrop.aspect`. */
     aspect?: number
+    /** Additional props forwarded directly to the underlying `ReactCrop` element (excluding `crop`, `onChange`, `onComplete`, and `style`). */
     reactCrop?: NativeCropProps
     children?: React.ReactNode
     ref?: RefObject<FileInputRef | null>

package/src/components/CropPicker/utils.ts

@@ -1,5 +1,6 @@
 import { Crop } from 'react-image-crop'
 
+/** Reads a `File` or `Blob` as a data-URL and resolves with a loaded `HTMLImageElement`. */
 export function readImage(file: File | Blob): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
@@ -16,6 +17,10 @@ export function readImage(file: File | Blob): Promise<HTMLImageElement> {
   })
 }
 
+/**
+ * Renders the specified percentage-unit `crop` region of `image` onto an off-screen canvas and returns a `[dataURL, Blob]` tuple.
+ * The output blob is always `image/png` at quality 1.
+ */
 export async function cropImage(
   image: HTMLImageElement,
   crop: Crop,
@@ -66,6 +71,10 @@ export async function cropImage(
   }
 }
 
+/**
+ * Scales natural image dimensions down to fit within a 600×400 display budget while preserving aspect ratio.
+ * Returns both the original natural dimensions and the calculated display dimensions.
+ */
 export const calculateProportionalDimensions = (naturalWidth: number, naturalHeight: number) => {
   const aspectRatio = naturalWidth / naturalHeight
 

package/src/components/DatePicker/index.tsx

@@ -1,171 +1,118 @@
-import { useCallback, useConditionalState } from '@codeleap/hooks'
-import { View } from '../components'
-import { DatePickerProps } from './types'
-import { DatePicker as ReactDatePicker } from 'react-datepicker'
-import { DayContent, Header, OuterInput, YearContent } from './components'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
-import { useInputBase } from '../InputBase/useInputBase'
+import { useRef } from 'react'
+import { Popover } from 'react-aria-components'
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
+import { useConditionalState } from '@codeleap/hooks'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { fields } from '@codeleap/form'
+import { View } from '../View'
+import { Calendar } from '../Calendar'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { useFieldInput } from '../Field'
+import { DatePickerProps } from './types'
 
 export * from './styles'
 export * from './types'
-export * from './components'
 
+function dateToCalendarDate(date: Date | null | undefined): CalendarDate | null {
+  if (!date) return null
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
+}
+
+function calendarDateToDate(cal: CalendarDate): Date {
+  return cal.toDate(getLocalTimeZone())
+}
+
+function defaultFormatDate(date: Date): string {
+  return date.toLocaleDateString(undefined, { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+/**
+ * Date selection control that pairs a fully custom trigger element with a `react-aria-components` `Popover` containing a `Calendar`.
+ * Converts native `Date` values to/from `@internationalized/date` `CalendarDate` for the calendar; closes the popover after a date is selected.
+ * Uses: `View`, `Calendar`
+ */
 export function DatePicker(props: DatePickerProps) {
   const {
-    hideInput,
     value,
     onValueChange,
     field,
     style,
     defaultValue,
-    outerInputComponent: OuterInputComponent,
-    headerComponent: HeaderComponent,
-    headerProps: _headerProps,
-    dayComponent,
-    dayProps: providedDayProps,
-    yearComponent,
-    yearProps: providedYearProps,
-    datePickerProps,
+    renderTrigger,
+    calendarProps,
     minDate,
     maxDate,
-    startDate,
     disabled,
     visible: providedVisible,
     toggle: providedToggle,
-    yearShow: providedYearShow,
-    setYearShow: providedSetYearShow,
-    ...otherProps
-  } = {
-    ...DatePicker.defaultProps,
-    ...props,
-  }
+    formatDate,
+    label,
+    helper,
+    placeholder,
+    forceError,
+  } = { ...DatePicker.defaultProps, ...props }
 
   const styles = useStylesFor(DatePicker.styleRegistryName, style)
+  const triggerRef = useRef<HTMLElement | null>(null)
+  const [isOpen, setIsOpen] = useConditionalState(providedVisible, providedToggle, { initialValue: false })
 
-  const compositionStyles = useCompositionStyles(['outerInput', 'header'], styles)
+  const { inputValue, onInputValueChange, validation } = useFieldInput(field, fields.date, { value, onValueChange })
 
-  const [visible, toggle] = useConditionalState(providedVisible, providedToggle, { initialValue: false })
-  const [yearShow, setYearShow] = useConditionalState(providedYearShow, providedSetYearShow, { initialValue: false })
-
-  const {
-    inputValue,
-    onInputValueChange,
-  } = useInputBase(field, fields.date, { value, onValueChange })
+  const hasError = validation?.showError || !!forceError
+  const errorMessage = validation?.message || forceError
 
-  const DayContentComponent = useCallback(({ day, date }) => {
-    return (
-      <DayContent
-        day={day}
-        date={date}
-        {...providedDayProps}
-        value={inputValue}
-        minDate={minDate}
-        maxDate={maxDate}
-        component={dayComponent}
-        styles={styles}
-      />
-    )
-  }, [inputValue])
+  const formattedValue = inputValue ? (formatDate ?? defaultFormatDate)(inputValue) : ''
 
-  const YearContentComponent = useCallback(({ year }) => {
-    return (
-      <YearContent
-        year={year}
-        {...providedYearProps}
-        value={inputValue}
-        component={yearComponent}
-        styles={styles}
-      />
-    )
-  }, [inputValue])
+  const handleCalendarChange = (date: CalendarDate) => {
+    onInputValueChange(calendarDateToDate(date) as any)
+    setIsOpen(false)
+  }
 
   return (
     <View style={styles.wrapper}>
-      <ReactDatePicker
-        onChange={(date) => onInputValueChange(date as any)}
-        selected={inputValue}
-        open={visible}
-        todayButton={null}
-        shouldCloseOnSelect={false}
-        openToDate={defaultValue ?? inputValue}
-        dateFormat='dd/MM/yyyy'
-        formatWeekDay={(day) => day.charAt(0)}
-        calendarStartDay={1}
-        placeholderText={otherProps?.placeholder}
-        disabled={disabled}
-        renderDayContents={(day, date) => (
-          <DayContentComponent day={day} date={date} />
-        )}
-        customInput={
-          <OuterInputComponent
-            style={compositionStyles.outerInput}
-            focused={visible}
-            hideInput={hideInput}
-            {...otherProps}
-          />
-        }
-        renderCustomHeader={(headerProps) => (
-          <HeaderComponent
-            styles={compositionStyles.header}
-            setYearShow={setYearShow}
-            prevYearButtonDisabled={yearShow}
-            nextYearButtonDisabled={yearShow}
-            {...headerProps}
-            {..._headerProps}
-          />
-        )}
-        onFocus={() => toggle(true)}
-        onSelect={() => (yearShow ? setYearShow(false) : toggle(false))}
-        onClickOutside={() => {
-          toggle(false)
-          setYearShow(false)
-        }}
-        minDate={minDate}
-        maxDate={maxDate}
-        endDate={maxDate}
-        startDate={startDate}
-        onYearChange={() => setYearShow(false)}
-        yearItemNumber={maxDate.getFullYear() - minDate.getFullYear()}
-        showYearPicker={yearShow}
-        renderYearContent={(year) => {
-          if (year < startDate.getFullYear() || year > maxDate.getFullYear()) return null
-          return <YearContentComponent year={year} />
-        }}
-        filterDate={(date) => {
-          if (date.getFullYear() < startDate.getFullYear() || date.getFullYear() > maxDate.getFullYear()) return false
-          return true
-        }}
-        {...datePickerProps as any}
-      />
+      {renderTrigger?.({
+        ref: triggerRef,
+        value: inputValue ?? null,
+        formattedValue,
+        isOpen,
+        onPress: () => setIsOpen(!isOpen),
+        disabled: !!disabled,
+        style: (styles as any).trigger,
+        label,
+        placeholder,
+        helper,
+        error: hasError ? errorMessage : undefined,
+        hasValue: !!inputValue,
+      })}
+      <Popover
+        triggerRef={triggerRef}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        css={(styles as any).popover}
+      >
+        <Calendar
+          value={dateToCalendarDate(inputValue) ?? undefined}
+          onChange={handleCalendarChange}
+          minValue={dateToCalendarDate(minDate) ?? undefined}
+          maxValue={dateToCalendarDate(maxDate) ?? undefined}
+          defaultValue={dateToCalendarDate(defaultValue) ?? undefined}
+          {...calendarProps}
+        />
+      </Popover>
     </View>
   )
 }
 
 DatePicker.styleRegistryName = 'DatePicker'
-
-DatePicker.elements = [
-  'wrapper',
-  'day',
-  'year',
-  'outerInput',
-  'header',
-]
-
+DatePicker.elements = ['wrapper', 'popover', 'trigger']
 DatePicker.rootElement = 'wrapper'
-
 DatePicker.withVariantTypes = <S extends AnyRecord>(styles: S) => {
   return DatePicker as (props: StyledComponentProps<DatePickerProps, typeof styles>) => IJSX
 }
-
 DatePicker.defaultProps = {
   minDate: new Date(1910, 0, 1),
   maxDate: new Date(),
-  startDate: new Date(1923, 0, 1),
-  outerInputComponent: OuterInput,
-  headerComponent: Header,
   disabled: false,
 } as Partial<DatePickerProps>