@televet/kibble-ui 5.0.21 → 5.0.22

package/dist/chunks/{datePicker.component-Dq2vL7Mk.js.map → datePicker.component-CLTjEX7i.js.map}

@@ -1 +1 @@
-{"version":3,"file":"datePicker.component-Dq2vL7Mk.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/**\n * @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n *\n * @description\n * Is the first date before the second one?\n *\n * @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n *\n * @returns The first date is before the second date\n *\n * @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n */\nexport function isBefore(date, dateToCompare) {\n  return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n  /** Props to customize the input field. See `TextInput` for more information. */\n  inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n  /** Data test id for the input.\n   * @default kibble-datepicker-input\n   */\n  'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n  inputProps,\n  ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n  const {\n    setFocusedInput,\n    startDate,\n    endDate,\n    focusedInput,\n    dateFormat,\n    withDateRange,\n    minDate,\n    maxDate,\n    onDateChange,\n    onDateSelect,\n    onClose,\n  } = useDatePickerContext();\n  const { open, setOpen } = usePopoverContext();\n  const iconSize = inputProps?.size || 'md';\n\n  const onKeyDown = (e: React.KeyboardEvent): void => {\n    if (e.key === 'Enter' && open) {\n      setOpen(false);\n      onClose();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const dateValue = e.target.value;\n    const parsedDate = parseDate(dateValue, dateFormat, today);\n\n    if (\n      dateValue.length === dateFormat.length &&\n      isDate(parsedDate) &&\n      isDateAfterMin(parsedDate, minDate) &&\n      isDateBeforeMax(parsedDate, maxDate)\n    ) {\n      onDateSelect(parsedDate);\n    }\n\n    // Trigger change when input is empty\n    if (!dateValue.length && onDateChange) {\n      onDateChange({ startDate: null, endDate: null });\n    }\n  };\n\n  return (\n    <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n      <TextInput\n        className=\"DatePicker__Input--Start\"\n        data-testid={`${dataTestId}-start`}\n        autoComplete=\"off\"\n        rightElement={\n          <Flex\n            {...(!inputProps?.disabled && {\n              onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n            })}\n            h=\"100%\"\n            align=\"center\"\n          >\n            <Icon name=\"calendarDate\" size={iconSize} />\n          </Flex>\n        }\n        value={getInputValue(startDate, dateFormat, '')}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        {...(!inputProps?.disabled && {\n          onFocus: (): void => {\n            setFocusedInput(FocusedInput.StartDate);\n          },\n        })}\n        placeholder={format(today, dateFormat).toString()}\n        {...(focusedInput === FocusedInput.StartDate && {\n          'data-focus': true,\n        })}\n        {...inputProps}\n      />\n      {withDateRange && (\n        <>\n          <Text> - </Text>\n          <TextInput\n            className=\"DatePicker__Input--End\"\n            data-testid={`${dataTestId}-end`}\n            rightElement={\n              <Flex\n                {...(!inputProps?.disabled && {\n                  onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n                })}\n                h=\"100%\"\n                align=\"center\"\n              >\n                <Icon name=\"calendarDate\" size={iconSize} />\n              </Flex>\n            }\n            value={getInputValue(endDate, dateFormat, '')}\n            onChange={onInputChange}\n            {...(!inputProps?.disabled && {\n              onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n            })}\n            onKeyDown={onKeyDown}\n            placeholder={format(today, dateFormat).toString()}\n            {...(focusedInput === FocusedInput.EndDate && {\n              'data-focus': true,\n            })}\n            {...inputProps}\n          />\n        </>\n      )}\n    </HStack>\n  );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n  /** Text to display in the submit button.\n   * @default Apply\n   */\n  buttonText?: string;\n  /** Callback function to be called when the submit button is clicked. */\n  onSubmit?: ({ startDate, endDate }: DateRange) => void;\n  /** If true, the reset button will be hidden. */\n  hideResetButton?: boolean;\n  /** Data test id for the footer.\n   * @default kibble-datepicker-footer\n   */\n  'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n  buttonText = 'Apply',\n  onSubmit,\n  hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n  const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n  const { open, setOpen } = usePopoverContext();\n\n  const handleSubmit = useCallback((): void => {\n    if (!standalone) {\n      setOpen(false);\n    }\n\n    if (onSubmit) {\n      onSubmit({ startDate, endDate });\n    }\n  }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n  return (\n    <HStack\n      w=\"100%\"\n      justify={hideResetButton ? 'end' : 'space-between'}\n      align=\"center\"\n      borderTop=\"1px\"\n      borderColor=\"border.default\"\n      px={3}\n      py={2}\n    >\n      {!hideResetButton && (\n        <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n          Clear Dates\n        </Button>\n      )}\n      <Button size=\"sm\" onClick={handleSubmit}>\n        {buttonText}\n      </Button>\n    </HStack>\n  );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n  /** Props to customize the calendar footer. Only applicable when `withDateRange` is true. */\n  footerProps?: DatePickerFooterProps;\n  /**\n   * Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n   * @default false\n   */\n  hideFooter?: boolean;\n  /** Props to customize the input field. See `TextInput` for more information. */\n  inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n  /**\n   * Placement of the calendar popover\n   * @default bottom\n   */\n  placement?: Placement;\n  /**\n   * If true, the date picker will be rendered in a portal.\n   * @default true\n   */\n  portalled?: boolean;\n  /**\n   * If true, the date picker will render two input fields that control both the start and end date for a range selection.\n   * @default false\n   */\n  withDateRange?: boolean;\n  /** Data test id for the date picker.\n   * @default kibble-datepicker\n   */\n  'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n  const {\n    footerProps,\n    hideFooter = false,\n    inputProps,\n    portalled = true,\n    withDateRange = false,\n    ['data-testid']: dataTestId = 'kibble-datepicker',\n  } = props;\n  const { contentRef } = usePortalContentRef();\n  const recipe = useSlotRecipe({ recipe: popoverRecipe });\n  const styles = recipe();\n\n  return (\n    <DatePickerProvider {...props}>\n      <CPopover.Trigger w=\"100%\">\n        <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n      </CPopover.Trigger>\n      <Portal container={contentRef || undefined} disabled={!portalled}>\n        <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n          <CPopover.Content\n            className=\"DatePicker__Content\"\n            data-testid={`${dataTestId}-content`}\n            css={{ ...styles.content, minW: '340px' }}\n          >\n            <CPopover.Body css={{ '--popover-padding': 0 }}>\n              <DatePickerHeader />\n              <Divider />\n              <DatePickerCalendar />\n              {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n            </CPopover.Body>\n          </CPopover.Content>\n        </CPopover.Positioner>\n      </Portal>\n    </DatePickerProvider>\n  );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"datePicker.component-CLTjEX7i.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/**\n * @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n *\n * @description\n * Is the first date before the second one?\n *\n * @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n *\n * @returns The first date is before the second date\n *\n * @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n */\nexport function isBefore(date, dateToCompare) {\n  return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n  /** Props to customize the input field. See `TextInput` for more information. */\n  inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n  /** Data test id for the input.\n   * @default kibble-datepicker-input\n   */\n  'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n  inputProps,\n  ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n  const {\n    setFocusedInput,\n    startDate,\n    endDate,\n    focusedInput,\n    dateFormat,\n    withDateRange,\n    minDate,\n    maxDate,\n    onDateChange,\n    onDateSelect,\n    onClose,\n  } = useDatePickerContext();\n  const { open, setOpen } = usePopoverContext();\n  const iconSize = inputProps?.size || 'md';\n\n  const onKeyDown = (e: React.KeyboardEvent): void => {\n    if (e.key === 'Enter' && open) {\n      setOpen(false);\n      onClose();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n    const dateValue = e.target.value;\n    const parsedDate = parseDate(dateValue, dateFormat, today);\n\n    if (\n      dateValue.length === dateFormat.length &&\n      isDate(parsedDate) &&\n      isDateAfterMin(parsedDate, minDate) &&\n      isDateBeforeMax(parsedDate, maxDate)\n    ) {\n      onDateSelect(parsedDate);\n    }\n\n    // Trigger change when input is empty\n    if (!dateValue.length && onDateChange) {\n      onDateChange({ startDate: null, endDate: null });\n    }\n  };\n\n  return (\n    <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n      <TextInput\n        className=\"DatePicker__Input--Start\"\n        data-testid={`${dataTestId}-start`}\n        autoComplete=\"off\"\n        rightElement={\n          <Flex\n            {...(!inputProps?.disabled && {\n              onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n            })}\n            h=\"100%\"\n            align=\"center\"\n          >\n            <Icon name=\"calendarDate\" size={iconSize} />\n          </Flex>\n        }\n        value={getInputValue(startDate, dateFormat, '')}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        {...(!inputProps?.disabled && {\n          onFocus: (): void => {\n            setFocusedInput(FocusedInput.StartDate);\n          },\n        })}\n        placeholder={format(today, dateFormat).toString()}\n        {...(focusedInput === FocusedInput.StartDate && {\n          'data-focus': true,\n        })}\n        {...inputProps}\n      />\n      {withDateRange && (\n        <>\n          <Text> - </Text>\n          <TextInput\n            className=\"DatePicker__Input--End\"\n            data-testid={`${dataTestId}-end`}\n            rightElement={\n              <Flex\n                {...(!inputProps?.disabled && {\n                  onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n                })}\n                h=\"100%\"\n                align=\"center\"\n              >\n                <Icon name=\"calendarDate\" size={iconSize} />\n              </Flex>\n            }\n            value={getInputValue(endDate, dateFormat, '')}\n            onChange={onInputChange}\n            {...(!inputProps?.disabled && {\n              onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n            })}\n            onKeyDown={onKeyDown}\n            placeholder={format(today, dateFormat).toString()}\n            {...(focusedInput === FocusedInput.EndDate && {\n              'data-focus': true,\n            })}\n            {...inputProps}\n          />\n        </>\n      )}\n    </HStack>\n  );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n  /** Text to display in the submit button.\n   * @default Apply\n   */\n  buttonText?: string;\n  /** Callback function to be called when the submit button is clicked. */\n  onSubmit?: ({ startDate, endDate }: DateRange) => void;\n  /** If true, the reset button will be hidden. */\n  hideResetButton?: boolean;\n  /** Data test id for the footer.\n   * @default kibble-datepicker-footer\n   */\n  'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n  buttonText = 'Apply',\n  onSubmit,\n  hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n  const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n  const { open, setOpen } = usePopoverContext();\n\n  const handleSubmit = useCallback((): void => {\n    if (!standalone) {\n      setOpen(false);\n    }\n\n    if (onSubmit) {\n      onSubmit({ startDate, endDate });\n    }\n  }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n  return (\n    <HStack\n      w=\"100%\"\n      justify={hideResetButton ? 'end' : 'space-between'}\n      align=\"center\"\n      borderTop=\"1px\"\n      borderColor=\"border.default\"\n      px={3}\n      py={2}\n    >\n      {!hideResetButton && (\n        <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n          Clear Dates\n        </Button>\n      )}\n      <Button size=\"sm\" onClick={handleSubmit}>\n        {buttonText}\n      </Button>\n    </HStack>\n  );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n  /** Props to customize the calendar footer. Only applicable when `withDateRange` is true. */\n  footerProps?: DatePickerFooterProps;\n  /**\n   * Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n   * @default false\n   */\n  hideFooter?: boolean;\n  /** Props to customize the input field. See `TextInput` for more information. */\n  inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n  /**\n   * Placement of the calendar popover\n   * @default bottom\n   */\n  placement?: Placement;\n  /**\n   * If true, the date picker will be rendered in a portal.\n   * @default true\n   */\n  portalled?: boolean;\n  /**\n   * If true, the date picker will render two input fields that control both the start and end date for a range selection.\n   * @default false\n   */\n  withDateRange?: boolean;\n  /** Data test id for the date picker.\n   * @default kibble-datepicker\n   */\n  'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n  const {\n    footerProps,\n    hideFooter = false,\n    inputProps,\n    portalled = true,\n    withDateRange = false,\n    ['data-testid']: dataTestId = 'kibble-datepicker',\n  } = props;\n  const { contentRef } = usePortalContentRef();\n  const recipe = useSlotRecipe({ recipe: popoverRecipe });\n  const styles = recipe();\n\n  return (\n    <DatePickerProvider {...props}>\n      <CPopover.Trigger w=\"100%\">\n        <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n      </CPopover.Trigger>\n      <Portal container={contentRef || undefined} disabled={!portalled}>\n        <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n          <CPopover.Content\n            className=\"DatePicker__Content\"\n            data-testid={`${dataTestId}-content`}\n            css={{ ...styles.content, minW: '340px' }}\n          >\n            <CPopover.Body css={{ '--popover-padding': 0 }}>\n              <DatePickerHeader />\n              <Divider />\n              <DatePickerCalendar />\n              {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n            </CPopover.Body>\n          </CPopover.Content>\n        </CPopover.Positioner>\n      </Portal>\n    </DatePickerProvider>\n  );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{datePicker.provider-CavuOZl4.js → datePicker.provider-CttuPiiS.js}

@@ -11,7 +11,7 @@ import { G as et, a as Gt } from "./grid-item-BmCSQ38y.js";
 import { C as Tt } from "./center-Dmlzv1BW.js";
 import { u as Xt } from "./popover-root-provider-CFn2dthZ.js";
 import { F as _t } from "./flex-CX-8gE9T.js";
-import { M as tt } from "./menu.component-CV8eVKYt.js";
+import { M as tt } from "./menu.component-WHzMw5ZI.js";
 import { i as _e, a as zt, b as Vt, e as $t, c as Kt } from "./isSymbol-BQN49XhJ.js";
 import { H as Jt } from "./h-stack-8q5nAOg0.js";
 import { m as Zt } from "./popover-Gb1fXSR7.js";
@@ -3007,4 +3007,4 @@ export {
   we as u,
   ga as x
 };
-//# sourceMappingURL=datePicker.provider-CavuOZl4.js.map
+//# sourceMappingURL=datePicker.provider-CttuPiiS.js.map