@televet/kibble-ui 5.0.13-steve.0 → 5.0.14

package/dist/chunks/{datePicker.component-mE9U6yIL.js.map → datePicker.component-Cx76pUPS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"datePicker.component-mE9U6yIL.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-Cx76pUPS.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-DEN8clnz.js → datePicker.provider-xtYFjWKI.js}

@@ -1,6 +1,6 @@
 import { j as N } from "./jsx-runtime-C5mzlN2N.js";
 import { useState as Oe, useEffect as Be, useCallback as I, useMemo as K, createContext as Lt, useContext as It, useRef as Ce } from "react";
-import { W as Ge } from "./text.component-IjomJyJY.js";
+import { W as Ge } from "./text.component-DhuUgP3j.js";
 import { B as qt } from "./index-9BerxEcw.js";
 import { B as Xe } from "./button.component-BO6oee_V.js";
 import { d as Wt } from "./config-Djkl1N81.js";
@@ -9,12 +9,12 @@ import { i as At } from "./isToday-iCYsPDMT.js";
 import { u as jt } from "./create-slot-recipe-context-D_FXDJGp.js";
 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-DR0Iuda1.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-Cq9sPsTJ.js";
+import { M as tt } from "./menu.component-BEDMybmZ.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-pd70xkY_.js";
+import { m as Zt } from "./popover-Gb1fXSR7.js";
 var Ne = {
   lessThanXSeconds: { one: "less than a second", other: "less than {{count}} seconds" },
   xSeconds: { one: "1 second", other: "{{count}} seconds" },
@@ -3006,4 +3006,4 @@ export {
   we as u,
   ga as x
 };
-//# sourceMappingURL=datePicker.provider-DEN8clnz.js.map
+//# sourceMappingURL=datePicker.provider-xtYFjWKI.js.map