@danske/sapphire-react-lab 0.82.2 → 0.84.0

package/build/esm/Calendar/src/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/Calendar/src/Calendar.tsx"],"sourcesContent":["import React from 'react';\nimport { createCalendar, DateValue } from '@internationalized/date';\nimport { AriaCalendarProps, useCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Button,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport {\n  useDateFormatter,\n  useLocale,\n  useMessageFormatter,\n} from '@react-aria/i18n';\nimport { CalendarMonthsGrid } from './CalendarMonthsGrid';\nimport { CalendarYearsGrid } from './CalendarYearsGrid';\nimport {\n  SapphireCalendarStateOptions,\n  useSapphireCalendarState,\n} from './useSapphireCalendarState';\nimport clsx from 'clsx';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n  CalendarPageAnimation,\n  useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport intlMessages from '../i18n';\nimport { sentenceCase } from './utils';\n\nexport interface SapphireCalendarProps\n  extends SapphireStyleProps,\n    Omit<AriaCalendarProps<DateValue>, 'validationState' | 'errorMessage'>,\n    SapphireCalendarStateOptions {\n  /**\n   * Whether week numbers are visible as a first column\n   */\n  showWeekNumbers?: boolean;\n}\n\n/**\n * Displays a calendar and allows users to select a single date. It displays a grid of days in one\n * month, by default, and the user can navigate to previous and next months. It's also possible\n * to navigate to months and years view, to quickly jump to a date far away from the focused date.\n */\nexport const Calendar = ({\n  showWeekNumbers,\n  ...props\n}: Omit<SapphireCalendarProps, 'locale'>): JSX.Element => {\n  useThemeCheck();\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const state = useCalendarAnimationState(\n    useSapphireCalendarState({\n      selectionAlignment: 'start',\n      ...props,\n      locale,\n      createCalendar,\n    })\n  );\n\n  const monthDateFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era:\n      state.visibleRange.start.calendar.identifier === 'gregory' &&\n      state.visibleRange.start.era === 'BC'\n        ? 'short'\n        : undefined,\n    calendar: state.visibleRange.start.calendar.identifier,\n    timeZone: state.timeZone,\n  });\n\n  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(\n    props,\n    state\n  );\n\n  const renderGrid = () => {\n    switch (state.view) {\n      case 'years':\n        return <CalendarYearsGrid state={state} />;\n      case 'months':\n        return <CalendarMonthsGrid state={state} />;\n      case 'days':\n      default:\n        return (\n          <CalendarDaysGrid state={state} showWeekNumbers={showWeekNumbers} />\n        );\n    }\n  };\n\n  const renderTitle = () => {\n    switch (state.view) {\n      case 'days':\n        return sentenceCase(\n          monthDateFormatter.format(\n            state.visibleRange.start.toDate(state.timeZone)\n          )\n        );\n      case 'months':\n        return state.focusedDate.year;\n      case 'years':\n        return sentenceCase(formatMessage('year'));\n    }\n  };\n  return (\n    <div\n      className={styles['sapphire-calendar']}\n      {...mergeProps(calendarProps, filterDOMProps(props))}\n    >\n      <div\n        className={clsx(\n          styles['sapphire-calendar__table-container'],\n          styleProps.className\n        )}\n        style={styleProps.style}\n      >\n        <CalendarHeader\n          prevButtonProps={prevButtonProps}\n          nextButtonProps={nextButtonProps}\n        >\n          {state.canBroadenView ? (\n            <Button\n              onPress={state.broadenView}\n              isDisabled={state.isDisabled}\n              variant=\"tertiary\"\n              appearance=\"ghost\"\n              size=\"large\"\n            >\n              {renderTitle()}\n            </Button>\n          ) : (\n            renderTitle()\n          )}\n        </CalendarHeader>\n        {state.view === 'days' ? (\n          <CalendarPageAnimation state={state.animationState}>\n            {renderGrid()}\n          </CalendarPageAnimation>\n        ) : (\n          renderGrid()\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDa,MAAA,QAAA,GAAW,CAAC,EAGiC,KAAA;AAHjC,EACvB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,eAAA;AAAA,GADuB,GAAA,EAAA,EAEpB,kBAFoB,EAEpB,EAAA;AAAA,IADH,iBAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AACnB,EAAA,MAAM,gBAAgB,mBAAoB,CAAA,YAAA,CAAA,CAAA;AAE1C,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,KAAA,GAAQ,0BACZ,wBAAyB,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACvB,kBAAoB,EAAA,OAAA;AAAA,GAAA,EACjB,KAFoB,CAAA,EAAA;AAAA,IAGvB,MAAA;AAAA,IACA,cAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAIJ,EAAA,MAAM,qBAAqB,gBAAiB,CAAA;AAAA,IAC1C,KAAO,EAAA,MAAA;AAAA,IACP,IAAM,EAAA,SAAA;AAAA,IACN,GACE,EAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,QAAS,CAAA,UAAA,KAAe,SACjD,IAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,GAAQ,KAAA,IAAA,GAC7B,OACA,GAAA,KAAA,CAAA;AAAA,IACN,QAAU,EAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,QAAS,CAAA,UAAA;AAAA,IAC5C,UAAU,KAAM,CAAA,QAAA;AAAA,GAAA,CAAA,CAAA;AAGlB,EAAA,MAAM,EAAE,aAAA,EAAe,eAAiB,EAAA,eAAA,EAAA,GAAoB,YAC1D,KACA,EAAA,KAAA,CAAA,CAAA;AAGF,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,QAAQ,KAAM,CAAA,IAAA;AAAA,MACP,KAAA,OAAA;AACH,QAAA,2CAAQ,iBAAD,EAAA;AAAA,UAAmB,KAAA;AAAA,SAAA,CAAA,CAAA;AAAA,MACvB,KAAA,QAAA;AACH,QAAA,2CAAQ,kBAAD,EAAA;AAAA,UAAoB,KAAA;AAAA,SAAA,CAAA,CAAA;AAAA,MACxB,KAAA,MAAA,CAAA;AAAA,MAAA;AAEH,QAAA,2CACG,gBAAD,EAAA;AAAA,UAAkB,KAAA;AAAA,UAAc,eAAA;AAAA,SAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAKxC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAQ,KAAM,CAAA,IAAA;AAAA,MACP,KAAA,MAAA;AACH,QAAA,OAAO,aACL,kBAAmB,CAAA,MAAA,CACjB,MAAM,YAAa,CAAA,KAAA,CAAM,OAAO,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA,MAGvC,KAAA,QAAA;AACH,QAAA,OAAO,MAAM,WAAY,CAAA,IAAA,CAAA;AAAA,MACtB,KAAA,OAAA;AACH,QAAA,OAAO,aAAa,aAAc,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAGxC,EAAA,2CACG,KAAD,EAAA,cAAA,CAAA;AAAA,IACE,WAAW,MAAO,CAAA,mBAAA,CAAA;AAAA,GAAA,EACd,UAAW,CAAA,aAAA,EAAe,cAAe,CAAA,KAAA,CAAA,CAAA,CAAA,sCAE5C,KAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,oCAAA,CAAA,EACP,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,OAAO,UAAW,CAAA,KAAA;AAAA,GAAA,sCAEjB,cAAD,EAAA;AAAA,IACE,eAAA;AAAA,IACA,eAAA;AAAA,GAEC,EAAA,KAAA,CAAM,cACL,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IACE,SAAS,KAAM,CAAA,WAAA;AAAA,IACf,YAAY,KAAM,CAAA,UAAA;AAAA,IAClB,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,GAAA,EAEJ,iBAGH,WAGH,EAAA,CAAA,EAAA,KAAA,CAAM,IAAS,KAAA,MAAA,uCACb,qBAAD,EAAA;AAAA,IAAuB,OAAO,KAAM,CAAA,cAAA;AAAA,GAAA,EACjC,UAGH,EAAA,CAAA,GAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Calendar.js","sources":["../../../../src/Calendar/src/Calendar.tsx"],"sourcesContent":["import React from 'react';\nimport { createCalendar, DateValue } from '@internationalized/date';\nimport { AriaCalendarProps, useCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Button,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport {\n  useDateFormatter,\n  useLocale,\n  useMessageFormatter,\n} from '@react-aria/i18n';\nimport { CalendarMonthsGrid } from './CalendarMonthsGrid';\nimport { CalendarYearsGrid } from './CalendarYearsGrid';\nimport {\n  SapphireCalendarStateOptions,\n  useSapphireCalendarState,\n} from './useSapphireCalendarState';\nimport clsx from 'clsx';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n  CalendarPageAnimation,\n  useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport intlMessages from '../i18n';\nimport { sentenceCase } from './utils';\n\nexport interface SapphireCalendarProps<T extends DateValue = DateValue>\n  extends SapphireStyleProps,\n    Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>,\n    Omit<SapphireCalendarStateOptions<T>, 'createCalendar'> {\n  /**\n   * Whether week numbers are visible as a first column\n   */\n  showWeekNumbers?: boolean;\n}\n\n/**\n * Displays a calendar and allows users to select a single date. It displays a grid of days in one\n * month, by default, and the user can navigate to previous and next months. It's also possible\n * to navigate to months and years view, to quickly jump to a date far away from the focused date.\n */\nexport const Calendar = <T extends DateValue = DateValue>({\n  showWeekNumbers,\n  ...props\n}: Omit<SapphireCalendarProps<T>, 'locale'>): JSX.Element => {\n  useThemeCheck();\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const state = useCalendarAnimationState(\n    useSapphireCalendarState({\n      selectionAlignment: 'start',\n      ...props,\n      locale,\n      createCalendar,\n    })\n  );\n\n  const monthDateFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era:\n      state.visibleRange.start.calendar.identifier === 'gregory' &&\n      state.visibleRange.start.era === 'BC'\n        ? 'short'\n        : undefined,\n    calendar: state.visibleRange.start.calendar.identifier,\n    timeZone: state.timeZone,\n  });\n\n  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(\n    props,\n    state\n  );\n\n  const renderGrid = () => {\n    switch (state.view) {\n      case 'years':\n        return <CalendarYearsGrid state={state} />;\n      case 'months':\n        return <CalendarMonthsGrid state={state} />;\n      case 'days':\n      default:\n        return (\n          <CalendarDaysGrid state={state} showWeekNumbers={showWeekNumbers} />\n        );\n    }\n  };\n\n  const renderTitle = () => {\n    switch (state.view) {\n      case 'days':\n        return sentenceCase(\n          monthDateFormatter.format(\n            state.visibleRange.start.toDate(state.timeZone)\n          )\n        );\n      case 'months':\n        return state.focusedDate.year;\n      case 'years':\n        return sentenceCase(formatMessage('year'));\n    }\n  };\n  return (\n    <div\n      className={styles['sapphire-calendar']}\n      {...mergeProps(calendarProps, filterDOMProps(props))}\n    >\n      <div\n        className={clsx(\n          styles['sapphire-calendar__table-container'],\n          styleProps.className\n        )}\n        style={styleProps.style}\n      >\n        <CalendarHeader\n          prevButtonProps={prevButtonProps}\n          nextButtonProps={nextButtonProps}\n        >\n          {state.canBroadenView ? (\n            <Button\n              onPress={state.broadenView}\n              isDisabled={state.isDisabled}\n              variant=\"tertiary\"\n              appearance=\"ghost\"\n              size=\"large\"\n            >\n              {renderTitle()}\n            </Button>\n          ) : (\n            renderTitle()\n          )}\n        </CalendarHeader>\n        {state.view === 'days' ? (\n          <CalendarPageAnimation state={state.animationState}>\n            {renderGrid()}\n          </CalendarPageAnimation>\n        ) : (\n          renderGrid()\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/esm/Calendar/src/RangeCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeCalendar.js","sources":["../../../../src/Calendar/src/RangeCalendar.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  createCalendar,\n  DateValue,\n  toCalendarDate,\n} from '@internationalized/date';\nimport { AriaRangeCalendarProps, useRangeCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport {\n  Button,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport { useDateFormatter, useLocale } from '@react-aria/i18n';\nimport clsx from 'clsx';\nimport { useRangeCalendarState } from './useRangeCalendarState';\nimport type { RangeCalendarStateOptions } from './useRangeCalendarState';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n  CalendarPageAnimation,\n  useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport { sentenceCase } from './utils';\n\nexport interface PredefinedDateRange {\n  label: string;\n  dateRange: { start: DateValue; end: DateValue };\n}\n\nexport interface SapphireRangeCalendarProps<P extends string = string>\n  extends SapphireStyleProps,\n    Omit<\n      AriaRangeCalendarProps<DateValue>,\n      | 'validationState'\n      | 'errorMessage'\n      | 'allowsNonContiguousRanges'\n      | 'onChange'\n    > {\n  /**\n   * This callback also gives you the information if the selected range was a\n   * predefined date according to the `predefinedRanges` prop.\n   */\n  onChange?: RangeCalendarStateOptions<DateValue, P>['onChange'];\n  /**\n   * Whether week numbers are visible as a first column\n   */\n  showWeekNumbers?: boolean;\n\n  /**\n   * Whether to show two months at the same time.\n   */\n  showTwoMonths?: boolean;\n\n  /**\n   * A set of predefined date ranges the user can more conveniently select.\n   */\n  predefinedRanges?: Record<P, PredefinedDateRange>;\n\n  /**\n   * Whether range is allowed to span unavailable dates.\n   */\n  allowUnavailableDatesWithinRange?: boolean;\n}\n\n/**\n * Displays a calendar and allow users to select a consecutive range of dates.\n * One or two months can be visible at the same time.\n */\nconst _RangeCalendar = function RangeCalendar<T extends string>(\n  {\n    showWeekNumbers,\n    showTwoMonths = false,\n    allowUnavailableDatesWithinRange = false,\n    predefinedRanges,\n    ...props\n  }: SapphireRangeCalendarProps<T>,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>\n): JSX.Element {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  const ref = useObjectRef(forwardedRef);\n  const { locale } = useLocale();\n  const state = useCalendarAnimationState(\n    useRangeCalendarState({\n      ...props,\n      locale,\n      allowsNonContiguousRanges: allowUnavailableDatesWithinRange,\n      visibleDuration: useMemo(\n        () => ({ months: showTwoMonths ? 2 : 1 }),\n        [showTwoMonths]\n      ),\n      createCalendar,\n    })\n  );\n  const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(\n    props,\n    state,\n    ref\n  );\n\n  const monthDateFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era:\n      state.visibleRange.start.calendar.identifier === 'gregory' &&\n      state.visibleRange.start.era === 'BC'\n        ? 'short'\n        : undefined,\n    calendar: state.visibleRange.start.calendar.identifier,\n    timeZone: state.timeZone,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles['sapphire-calendar'], styleProps.className)}\n      style={styleProps.style}\n      {...mergeProps(calendarProps, filterDOMProps(props))}\n    >\n      <div className={styles['sapphire-calendar__tables-row']}>\n        {[state.visibleRange.start]\n          .concat(\n            showTwoMonths ? state.visibleRange.start.add({ months: 1 }) : []\n          )\n          .map((startOfMonth, index, visibleMonths) => {\n            const isLeft = visibleMonths.length > 1 && index === 0;\n            const isRight =\n              visibleMonths.length > 1 && index === visibleMonths.length - 1;\n            const shouldAnimate = visibleMonths.length === 1;\n            const daysGrid = (\n              <CalendarDaysGrid\n                startDate={startOfMonth}\n                state={state}\n                showWeekNumbers={showWeekNumbers}\n              />\n            );\n            return (\n              <div\n                key={index}\n                className={styles['sapphire-calendar__table-container']}\n              >\n                <CalendarHeader\n                  prevButtonProps={prevButtonProps}\n                  nextButtonProps={nextButtonProps}\n                  isLeft={isLeft}\n                  isRight={isRight}\n                >\n                  {sentenceCase(\n                    monthDateFormatter.format(\n                      startOfMonth.toDate(state.timeZone)\n                    )\n                  )}\n                </CalendarHeader>\n                {shouldAnimate ? (\n                  <CalendarPageAnimation state={state.animationState}>\n                    {daysGrid}\n                  </CalendarPageAnimation>\n                ) : (\n                  daysGrid\n                )}\n              </div>\n            );\n          })}\n      </div>\n      {predefinedRanges && (\n        <div className={styles['sapphire-calendar__custom-ranges']}>\n          {(\n            Object.entries(predefinedRanges) as Array<[T, PredefinedDateRange]>\n          ).map(([key, { label, dateRange }]) => (\n            <div key={key}>\n              <Button\n                variant=\"secondary\"\n                appearance=\"ghost\"\n                onPress={() => {\n                  state.setValue(dateRange, key);\n                  state.setAnchorDate(null);\n                  state.setFocusedDate(toCalendarDate(dateRange.end));\n                }}\n              >\n                {label}\n              </Button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// eslint-disable-next-line\n// @ts-ignore Union type too complex to represent (TODO: check if this is still\n// an issue when we use TS@5.\nexport const RangeCalendar = React.forwardRef(_RangeCalendar) as <\n  T extends string\n>(\n  props: SapphireRangeCalendarProps<T> & {\n    ref?: React.ForwardedRef<HTMLDivElement>;\n  }\n) => ReturnType<typeof _RangeCalendar>;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RangeCalendar.js","sources":["../../../../src/Calendar/src/RangeCalendar.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  createCalendar,\n  DateValue,\n  toCalendarDate,\n} from '@internationalized/date';\nimport { AriaRangeCalendarProps, useRangeCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport {\n  Button,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport { useDateFormatter, useLocale } from '@react-aria/i18n';\nimport clsx from 'clsx';\nimport { useRangeCalendarState } from './useRangeCalendarState';\nimport type { RangeCalendarStateOptions } from './useRangeCalendarState';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n  CalendarPageAnimation,\n  useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport { sentenceCase } from './utils';\n\nexport interface PredefinedDateRange {\n  label: string;\n  dateRange: { start: DateValue; end: DateValue };\n}\n\nexport interface SapphireRangeCalendarProps<\n  T extends DateValue = DateValue,\n  P extends string = string\n> extends SapphireStyleProps,\n    Omit<\n      AriaRangeCalendarProps<T>,\n      | 'validationState'\n      | 'errorMessage'\n      | 'allowsNonContiguousRanges'\n      | 'onChange'\n    > {\n  /**\n   * This callback also gives you the information if the selected range was a\n   * predefined date according to the `predefinedRanges` prop.\n   */\n  onChange?: RangeCalendarStateOptions<DateValue, P>['onChange'];\n  /**\n   * Whether week numbers are visible as a first column\n   */\n  showWeekNumbers?: boolean;\n\n  /**\n   * Whether to show two months at the same time.\n   */\n  showTwoMonths?: boolean;\n\n  /**\n   * A set of predefined date ranges the user can more conveniently select.\n   */\n  predefinedRanges?: Record<P, PredefinedDateRange>;\n\n  /**\n   * Whether range is allowed to span unavailable dates.\n   */\n  allowUnavailableDatesWithinRange?: boolean;\n}\n\n/**\n * Displays a calendar and allow users to select a consecutive range of dates.\n * One or two months can be visible at the same time.\n */\nconst _RangeCalendar = function RangeCalendar<\n  T extends DateValue = DateValue,\n  P extends string = string\n>(\n  {\n    showWeekNumbers,\n    showTwoMonths = false,\n    allowUnavailableDatesWithinRange = false,\n    predefinedRanges,\n    ...props\n  }: SapphireRangeCalendarProps<T, P>,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>\n): JSX.Element {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  const ref = useObjectRef(forwardedRef);\n  const { locale } = useLocale();\n  const state = useCalendarAnimationState(\n    useRangeCalendarState({\n      ...props,\n      locale,\n      allowsNonContiguousRanges: allowUnavailableDatesWithinRange,\n      visibleDuration: useMemo(\n        () => ({ months: showTwoMonths ? 2 : 1 }),\n        [showTwoMonths]\n      ),\n      createCalendar,\n    })\n  );\n  const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(\n    props,\n    state,\n    ref\n  );\n\n  const monthDateFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era:\n      state.visibleRange.start.calendar.identifier === 'gregory' &&\n      state.visibleRange.start.era === 'BC'\n        ? 'short'\n        : undefined,\n    calendar: state.visibleRange.start.calendar.identifier,\n    timeZone: state.timeZone,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(styles['sapphire-calendar'], styleProps.className)}\n      style={styleProps.style}\n      {...mergeProps(calendarProps, filterDOMProps(props))}\n    >\n      <div className={styles['sapphire-calendar__tables-row']}>\n        {[state.visibleRange.start]\n          .concat(\n            showTwoMonths ? state.visibleRange.start.add({ months: 1 }) : []\n          )\n          .map((startOfMonth, index, visibleMonths) => {\n            const isLeft = visibleMonths.length > 1 && index === 0;\n            const isRight =\n              visibleMonths.length > 1 && index === visibleMonths.length - 1;\n            const shouldAnimate = visibleMonths.length === 1;\n            const daysGrid = (\n              <CalendarDaysGrid\n                startDate={startOfMonth}\n                state={state}\n                showWeekNumbers={showWeekNumbers}\n              />\n            );\n            return (\n              <div\n                key={index}\n                className={styles['sapphire-calendar__table-container']}\n              >\n                <CalendarHeader\n                  prevButtonProps={prevButtonProps}\n                  nextButtonProps={nextButtonProps}\n                  isLeft={isLeft}\n                  isRight={isRight}\n                >\n                  {sentenceCase(\n                    monthDateFormatter.format(\n                      startOfMonth.toDate(state.timeZone)\n                    )\n                  )}\n                </CalendarHeader>\n                {shouldAnimate ? (\n                  <CalendarPageAnimation state={state.animationState}>\n                    {daysGrid}\n                  </CalendarPageAnimation>\n                ) : (\n                  daysGrid\n                )}\n              </div>\n            );\n          })}\n      </div>\n      {predefinedRanges && (\n        <div className={styles['sapphire-calendar__custom-ranges']}>\n          {(\n            Object.entries(predefinedRanges) as Array<[P, PredefinedDateRange]>\n          ).map(([key, { label, dateRange }]) => (\n            <div key={key}>\n              <Button\n                variant=\"secondary\"\n                appearance=\"ghost\"\n                onPress={() => {\n                  state.setValue(dateRange, key);\n                  state.setAnchorDate(null);\n                  state.setFocusedDate(toCalendarDate(dateRange.end));\n                }}\n              >\n                {label}\n              </Button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// eslint-disable-next-line\n// @ts-ignore Union type too complex to represent (TODO: check if this is still\n// an issue when we use TS@5.\nexport const RangeCalendar = React.forwardRef(_RangeCalendar) as <\n  T extends DateValue,\n  P extends string\n>(\n  props: SapphireRangeCalendarProps<T, P> & {\n    ref?: React.ForwardedRef<HTMLDivElement>;\n  }\n) => ReturnType<typeof _RangeCalendar>;\n"],"names":[],"mappings":"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"}

package/build/esm/Calendar/src/useSapphireCalendarState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSapphireCalendarState.js","sources":["../../../../src/Calendar/src/useSapphireCalendarState.tsx"],"sourcesContent":["import { DateDuration } from '@internationalized/date';\nimport {\n  CalendarState,\n  CalendarStateOptions,\n  useCalendarState,\n} from '@react-stately/calendar';\nimport { useControlledState } from '@react-stately/utils';\n\nexport type CalendarView = 'days' | 'months' | 'years';\nconst viewToVisibleDuration: Record<CalendarView, DateDuration> = {\n  days: {\n    months: 1,\n  },\n  months: {\n    years: 1,\n  },\n  years: {\n    years: 12,\n  },\n};\n\nexport interface SapphireCalendarStateOptions {\n  /**\n   * Controls the calendar's view (day, month, year).\n   */\n  view?: CalendarView;\n\n  /**\n   * The view of the calendar when it first mounts (uncontrolled).\n   */\n  defaultView?: CalendarView;\n  /**\n   * Handler that is called when the view is changed.\n   */\n  onViewChange?: (value: CalendarView) => void;\n}\n\nexport type SapphireCalendarState = CalendarState & {\n  view: CalendarView;\n  narrowView: () => void;\n  broadenView: () => void;\n  canBroadenView: boolean;\n};\n\nexport function useSapphireCalendarState({\n  view: viewProp,\n  defaultView = 'days',\n  onViewChange,\n  ...otherOptions\n}: SapphireCalendarStateOptions & CalendarStateOptions): SapphireCalendarState {\n  const [view, setView] = useControlledState<CalendarView>(\n    viewProp,\n    defaultView,\n    onViewChange\n  );\n  const state = useCalendarState({\n    ...otherOptions,\n    visibleDuration: viewToVisibleDuration[view],\n  });\n  const broadenView = () => {\n    switch (view) {\n      case 'days':\n        return setView('months');\n      case 'months':\n        return setView('years');\n    }\n  };\n  const narrowView = () => {\n    switch (view) {\n      case 'months':\n        return setView('days');\n      case 'years':\n        return setView('months');\n    }\n  };\n  const canDrillUp = !state.isReadOnly && ['days', 'months'].includes(view);\n  return {\n    ...state,\n    view: view,\n    narrowView,\n    broadenView,\n    canBroadenView: canDrillUp,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAA4D,GAAA;AAAA,EAChE,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,CAAA;AAAA,GAAA;AAAA,EAEV,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,CAAA;AAAA,GAAA;AAAA,EAET,KAAO,EAAA;AAAA,IACL,KAAO,EAAA,EAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AA2BJ,SAAA,wBAAA,CAAkC,EAKsC,EAAA;AALtC,EACvC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAM,IAAA,EAAA,QAAA;AAAA,IACN,WAAc,GAAA,MAAA;AAAA,IACd,YAAA;AAAA,GAHuC,GAAA,EAAA,EAIpC,yBAJoC,EAIpC,EAAA;AAAA,IAHH,MAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAW,CAAA,GAAA,kBAAA,CACtB,UACA,WACA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,KAAA,GAAQ,gBAAiB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAC1B,YAD0B,CAAA,EAAA;AAAA,IAE7B,iBAAiB,qBAAsB,CAAA,IAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEzC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAQ,QAAA,IAAA;AAAA,MACD,KAAA,MAAA;AACH,QAAA,OAAO,OAAQ,CAAA,QAAA,CAAA,CAAA;AAAA,MACZ,KAAA,QAAA;AACH,QAAA,OAAO,OAAQ,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAGrB,EAAA,MAAM,aAAa,MAAM;AACvB,IAAQ,QAAA,IAAA;AAAA,MACD,KAAA,QAAA;AACH,QAAA,OAAO,OAAQ,CAAA,MAAA,CAAA,CAAA;AAAA,MACZ,KAAA,OAAA;AACH,QAAA,OAAO,OAAQ,CAAA,QAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAGrB,EAAA,MAAM,aAAa,CAAC,KAAA,CAAM,cAAc,CAAC,MAAA,EAAQ,UAAU,QAAS,CAAA,IAAA,CAAA,CAAA;AACpE,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,IAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAgB,EAAA,UAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"useSapphireCalendarState.js","sources":["../../../../src/Calendar/src/useSapphireCalendarState.tsx"],"sourcesContent":["import { DateDuration, DateValue } from '@internationalized/date';\nimport {\n  CalendarState,\n  CalendarStateOptions,\n  useCalendarState,\n} from '@react-stately/calendar';\nimport { useControlledState } from '@react-stately/utils';\n\nexport type CalendarView = 'days' | 'months' | 'years';\nconst viewToVisibleDuration: Record<CalendarView, DateDuration> = {\n  days: {\n    months: 1,\n  },\n  months: {\n    years: 1,\n  },\n  years: {\n    years: 12,\n  },\n};\n\nexport interface SapphireCalendarStateOptions<T extends DateValue>\n  extends CalendarStateOptions<T> {\n  /**\n   * Controls the calendar's view (day, month, year).\n   */\n  view?: CalendarView;\n\n  /**\n   * The view of the calendar when it first mounts (uncontrolled).\n   */\n  defaultView?: CalendarView;\n  /**\n   * Handler that is called when the view is changed.\n   */\n  onViewChange?: (value: CalendarView) => void;\n}\n\nexport type SapphireCalendarState = CalendarState & {\n  view: CalendarView;\n  narrowView: () => void;\n  broadenView: () => void;\n  canBroadenView: boolean;\n};\n\nexport function useSapphireCalendarState<T extends DateValue>({\n  view: viewProp,\n  defaultView = 'days',\n  onViewChange,\n  ...otherOptions\n}: SapphireCalendarStateOptions<T> &\n  CalendarStateOptions<T>): SapphireCalendarState {\n  const [view, setView] = useControlledState<CalendarView>(\n    viewProp,\n    defaultView,\n    onViewChange\n  );\n  const state = useCalendarState({\n    ...otherOptions,\n    visibleDuration: viewToVisibleDuration[view],\n  });\n  const broadenView = () => {\n    switch (view) {\n      case 'days':\n        return setView('months');\n      case 'months':\n        return setView('years');\n    }\n  };\n  const narrowView = () => {\n    switch (view) {\n      case 'months':\n        return setView('days');\n      case 'years':\n        return setView('months');\n    }\n  };\n  const canDrillUp = !state.isReadOnly && ['days', 'months'].includes(view);\n  return {\n    ...state,\n    view: view,\n    narrowView,\n    broadenView,\n    canBroadenView: canDrillUp,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAA4D,GAAA;AAAA,EAChE,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,CAAA;AAAA,GAAA;AAAA,EAEV,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,CAAA;AAAA,GAAA;AAAA,EAET,KAAO,EAAA;AAAA,IACL,KAAO,EAAA,EAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AA4BJ,SAAA,wBAAA,CAAuD,EAMZ,EAAA;AANY,EAC5D,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAM,IAAA,EAAA,QAAA;AAAA,IACN,WAAc,GAAA,MAAA;AAAA,IACd,YAAA;AAAA,GAH4D,GAAA,EAAA,EAIzD,yBAJyD,EAIzD,EAAA;AAAA,IAHH,MAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,GAAA,CAAA,CAAA;AAIA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAW,CAAA,GAAA,kBAAA,CACtB,UACA,WACA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,KAAA,GAAQ,gBAAiB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAC1B,YAD0B,CAAA,EAAA;AAAA,IAE7B,iBAAiB,qBAAsB,CAAA,IAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEzC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAQ,QAAA,IAAA;AAAA,MACD,KAAA,MAAA;AACH,QAAA,OAAO,OAAQ,CAAA,QAAA,CAAA,CAAA;AAAA,MACZ,KAAA,QAAA;AACH,QAAA,OAAO,OAAQ,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAGrB,EAAA,MAAM,aAAa,MAAM;AACvB,IAAQ,QAAA,IAAA;AAAA,MACD,KAAA,QAAA;AACH,QAAA,OAAO,OAAQ,CAAA,MAAA,CAAA,CAAA;AAAA,MACZ,KAAA,OAAA;AACH,QAAA,OAAO,OAAQ,CAAA,QAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAGrB,EAAA,MAAM,aAAa,CAAC,KAAA,CAAM,cAAc,CAAC,MAAA,EAAQ,UAAU,QAAS,CAAA,IAAA,CAAA,CAAA;AACpE,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,IAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAgB,EAAA,UAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/FileDropzone/i18n/da-DK.js

@@ -0,0 +1,7 @@
+var da = {
+	"dropzone-heading-default": "Træk filer hertil, eller klik for at vælge",
+	"dropzone-heading-dropping": "Slip fil"
+};
+
+export { da as default };
+//# sourceMappingURL=da-DK.js.map

package/build/esm/FileDropzone/i18n/da-DK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"da-DK.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/de-DE.js

@@ -0,0 +1,7 @@
+var de = {
+	"dropzone-heading-default": "Ziehen Sie Dateien hierher oder klicken Sie, um sie auszuwählen",
+	"dropzone-heading-dropping": "Datei ablegen"
+};
+
+export { de as default };
+//# sourceMappingURL=de-DE.js.map

package/build/esm/FileDropzone/i18n/de-DE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"de-DE.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/en-US.js

@@ -0,0 +1,7 @@
+var en = {
+	"dropzone-heading-default": "Drag files here or click to select",
+	"dropzone-heading-dropping": "Drop file"
+};
+
+export { en as default };
+//# sourceMappingURL=en-US.js.map

package/build/esm/FileDropzone/i18n/en-US.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/fi-FI.js

@@ -0,0 +1,7 @@
+var fi = {
+	"dropzone-heading-default": "Vedä tiedostoja tähän tai valitse napsauttamalla",
+	"dropzone-heading-dropping": "Pudota tiedosto"
+};
+
+export { fi as default };
+//# sourceMappingURL=fi-FI.js.map

package/build/esm/FileDropzone/i18n/fi-FI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fi-FI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/index.js

@@ -0,0 +1,20 @@
+import da from './da-DK.js';
+import en from './en-US.js';
+import de from './de-DE.js';
+import fi from './fi-FI.js';
+import no from './nb-NO.js';
+import pl from './pl-PL.js';
+import se from './sv-SE.js';
+
+var intlMessages = {
+  "da-DK": da,
+  "en-US": en,
+  "de-DE": de,
+  "fi-FI": fi,
+  "nb-NO": no,
+  "pl-PL": pl,
+  "sv-SE": se
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/build/esm/FileDropzone/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/FileDropzone/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,CAAA;;;;"}

package/build/esm/FileDropzone/i18n/nb-NO.js

@@ -0,0 +1,7 @@
+var no = {
+	"dropzone-heading-default": "Dra filer her eller klikk for å velge",
+	"dropzone-heading-dropping": "Slipp fil"
+};
+
+export { no as default };
+//# sourceMappingURL=nb-NO.js.map

package/build/esm/FileDropzone/i18n/nb-NO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nb-NO.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/pl-PL.js

@@ -0,0 +1,7 @@
+var pl = {
+	"dropzone-heading-default": "Przeciągnij pliki tutaj lub kliknij, aby wybrać",
+	"dropzone-heading-dropping": "Upuść plik"
+};
+
+export { pl as default };
+//# sourceMappingURL=pl-PL.js.map

package/build/esm/FileDropzone/i18n/pl-PL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pl-PL.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/i18n/sv-SE.js

@@ -0,0 +1,7 @@
+var se = {
+	"dropzone-heading-default": "Dra filer hit eller klicka för att välja",
+	"dropzone-heading-dropping": "Släpp filen"
+};
+
+export { se as default };
+//# sourceMappingURL=sv-SE.js.map

package/build/esm/FileDropzone/i18n/sv-SE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-SE.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/FileDropzone/src/FileDropzone.js

@@ -0,0 +1,122 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useSapphireStyleProps, useButton, Icon, Heading } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';
+import { Upload } from '@danske/sapphire-icons/react';
+import { Body } from '../../Typography/src/Body.js';
+import { useHover, usePress, Pressable } from '@react-aria/interactions';
+import { useId, mergeProps } from '@react-aria/utils';
+import { FileTrigger } from './FileTrigger.js';
+import { useDrop, useClipboard } from '@react-aria/dnd';
+import { convertFileListToFileDropItems } from './utils.js';
+import { useFocusRing } from '@react-aria/focus';
+import { useMessageFormatter } from '@react-aria/i18n';
+import intlMessages from '../i18n/index.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const FileDropzone = React.forwardRef(function DropzoneWrapper(props, ref) {
+  const {
+    isDisabled = false,
+    hasError,
+    renderInstruction,
+    onFileSelectOpen = () => null,
+    acceptedFileTypes,
+    allowsMultiple,
+    onDrop = () => null
+  } = props;
+  const id = useId();
+  const paragraphId = props["aria-label"] ? void 0 : id;
+  const format = useMessageFormatter(intlMessages);
+  const pressableRef = useRef(null);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { styleProps } = useSapphireStyleProps(props);
+  const {
+    dropProps,
+    dropButtonProps,
+    isDropTarget: isDropping
+  } = useDrop(__spreadProps(__spreadValues({}, props), {
+    ref: pressableRef,
+    hasDropButton: true,
+    isDisabled
+  }));
+  const { buttonProps } = useButton(__spreadProps(__spreadValues({}, dropButtonProps), { elementType: "div" }), pressableRef);
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const { pressProps, isPressed } = usePress({});
+  const { clipboardProps } = useClipboard({
+    isDisabled,
+    onPaste: (items) => onDrop({
+      type: "drop",
+      items,
+      x: 0,
+      y: 0,
+      dropOperation: "copy"
+    })
+  });
+  const ariaLabel = props["aria-label"] || "Dropzone";
+  const onFileTriggerSelect = (files) => {
+    onDrop({
+      type: "drop",
+      items: convertFileListToFileDropItems(files),
+      x: 0,
+      y: 0,
+      dropOperation: "copy"
+    });
+  };
+  return /* @__PURE__ */ React.createElement(FileTrigger, {
+    acceptedFileTypes,
+    allowsMultiple,
+    onSelect: onFileTriggerSelect,
+    isDisabled
+  }, /* @__PURE__ */ React.createElement(Pressable, {
+    ref: pressableRef,
+    onPress: onFileSelectOpen
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps, pressProps)), {
+    ref,
+    style: __spreadValues({}, styleProps.style),
+    className: clsx(styles["sapphire-dropzone"], styles["js-focus"], styles["js-hover"], {
+      [styles["is-hover"]]: isHovered && !isDropping,
+      [styles["is-active"]]: isPressed,
+      [styles["is-disabled"]]: isDisabled,
+      [styles["is-focus"]]: isFocusVisible,
+      [styles["sapphire-dropzone--dropping"]]: isDropping,
+      [styles["sapphire-dropzone--error"]]: hasError
+    }, styleProps.className),
+    "aria-label": ariaLabel,
+    "aria-invalid": hasError,
+    "aria-describedby": paragraphId
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-dropzone__content"])
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-dropzone__icon"])
+  }, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(Upload, null))), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-dropzone__heading"])
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    level: 6
+  }, isDropping ? format("dropzone-heading-dropping") : format("dropzone-heading-default"))), /* @__PURE__ */ React.createElement("div", {
+    id: paragraphId,
+    className: clsx(styles["sapphire-dropzone__paragraph"])
+  }, /* @__PURE__ */ React.createElement(Body, {
+    level: 2
+  }, renderInstruction(isDropping)))))));
+});
+
+export { FileDropzone };
+//# sourceMappingURL=FileDropzone.js.map

package/build/esm/FileDropzone/src/FileDropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport {\n  Heading,\n  Icon,\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { Body } from '../../Typography/src/Body';\nimport {\n  HoverProps,\n  Pressable,\n  useHover,\n  usePress,\n} from '@react-aria/interactions';\nimport { mergeProps, useId } from '@react-aria/utils';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useClipboard, useDrop } from '@react-aria/dnd';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n  extends SapphireStyleProps,\n    Omit<DropOptions, 'hasDropButton'>,\n    HoverProps,\n    FileSelectProps,\n    AriaLabelingProps {\n  /**\n   * Whether the dropzone has an error\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * The body text of the dropzone which can contain the instructions for the files to be uploaded.\n   * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.\n   * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.\n   */\n  renderInstruction: (isDropping: boolean) => string;\n  /**\n   * Function that is called when the file select is opened on press, before any file is selected.\n   * @default \"() => null\"\n   */\n  onFileSelectOpen?: () => void;\n}\n\nexport const FileDropzone = React.forwardRef(function DropzoneWrapper(\n  props: FileDropzoneProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    isDisabled = false,\n    hasError,\n    renderInstruction,\n    onFileSelectOpen = () => null,\n    acceptedFileTypes,\n    allowsMultiple,\n    onDrop = () => null,\n  } = props;\n\n  const id = useId();\n  const paragraphId = props['aria-label'] ? undefined : id;\n  const format = useMessageFormatter(intlMessages);\n  const pressableRef = useRef(null);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(props);\n  const {\n    dropProps,\n    dropButtonProps,\n    isDropTarget: isDropping,\n  } = useDrop({\n    ...props,\n    ref: pressableRef,\n    hasDropButton: true,\n    isDisabled,\n  });\n  const { buttonProps } = useButton(\n    { ...dropButtonProps, elementType: 'div' },\n    pressableRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const { pressProps, isPressed } = usePress({});\n\n  const { clipboardProps } = useClipboard({\n    isDisabled,\n    onPaste: (items) =>\n      onDrop({\n        type: 'drop',\n        items,\n        x: 0,\n        y: 0,\n        dropOperation: 'copy',\n      }),\n  });\n\n  const ariaLabel: string = props['aria-label'] || 'Dropzone';\n\n  const onFileTriggerSelect = (files: FileList | null) => {\n    onDrop({\n      type: 'drop',\n      items: convertFileListToFileDropItems(files),\n      x: 0,\n      y: 0,\n      dropOperation: 'copy',\n    });\n  };\n\n  return (\n    <FileTrigger\n      acceptedFileTypes={acceptedFileTypes}\n      allowsMultiple={allowsMultiple}\n      onSelect={onFileTriggerSelect}\n      isDisabled={isDisabled}\n    >\n      <Pressable ref={pressableRef} onPress={onFileSelectOpen}>\n        <div\n          {...mergeProps(\n            dropProps,\n            hoverProps,\n            clipboardProps,\n            focusProps,\n            buttonProps,\n            pressProps\n          )}\n          ref={ref}\n          style={{ ...styleProps.style }}\n          className={clsx(\n            styles['sapphire-dropzone'],\n            styles['js-focus'],\n            styles['js-hover'],\n            {\n              [styles['is-hover']]: isHovered && !isDropping,\n              [styles['is-active']]: isPressed,\n              [styles['is-disabled']]: isDisabled,\n              [styles['is-focus']]: isFocusVisible,\n              [styles['sapphire-dropzone--dropping']]: isDropping,\n              [styles['sapphire-dropzone--error']]: hasError,\n            },\n            styleProps.className\n          )}\n          aria-label={ariaLabel}\n          aria-invalid={hasError}\n          aria-describedby={paragraphId}\n        >\n          <div className={clsx(styles['sapphire-dropzone__content'])}>\n            <div className={clsx(styles['sapphire-dropzone__icon'])}>\n              <Icon>\n                <Upload />\n              </Icon>\n            </div>\n            <div className={clsx(styles['sapphire-dropzone__heading'])}>\n              <Heading level={6}>\n                {isDropping\n                  ? format('dropzone-heading-dropping')\n                  : format('dropzone-heading-default')}\n              </Heading>\n            </div>\n            <div\n              id={paragraphId}\n              className={clsx(styles['sapphire-dropzone__paragraph'])}\n            >\n              <Body level={2}>{renderInstruction(isDropping)}</Body>\n            </div>\n          </div>\n        </div>\n      </Pressable>\n    </FileTrigger>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDO,MAAM,YAAe,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,eAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAa,GAAA,KAAA;AAAA,IACb,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAmB,MAAM,IAAA;AAAA,IACzB,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAS,MAAM,IAAA;AAAA,GACb,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAK,GAAA,KAAA,EAAA,CAAA;AACX,EAAM,MAAA,WAAA,GAAc,KAAM,CAAA,YAAA,CAAA,GAAgB,KAAY,CAAA,GAAA,EAAA,CAAA;AACtD,EAAA,MAAM,SAAS,mBAAoB,CAAA,YAAA,CAAA,CAAA;AACnC,EAAA,MAAM,eAAe,MAAO,CAAA,IAAA,CAAA,CAAA;AAC5B,EAAA,MAAM,EAAE,UAAA,EAAY,SAAc,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAc,EAAA,UAAA;AAAA,GACZ,GAAA,OAAA,CAAQ,iCACP,KADO,CAAA,EAAA;AAAA,IAEV,GAAK,EAAA,YAAA;AAAA,IACL,aAAe,EAAA,IAAA;AAAA,IACf,UAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEF,EAAA,MAAM,EAAE,WAAgB,EAAA,GAAA,SAAA,CACtB,iCAAK,eAAL,CAAA,EAAA,EAAsB,aAAa,KACnC,EAAA,CAAA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,EAAE,YAAY,cAAmB,EAAA,GAAA,YAAA,EAAA,CAAA;AACvC,EAAM,MAAA,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAA,CAAA,CAAA;AAE3C,EAAM,MAAA,EAAE,mBAAmB,YAAa,CAAA;AAAA,IACtC,UAAA;AAAA,IACA,OAAA,EAAS,CAAC,KAAA,KACR,MAAO,CAAA;AAAA,MACL,IAAM,EAAA,MAAA;AAAA,MACN,KAAA;AAAA,MACA,CAAG,EAAA,CAAA;AAAA,MACH,CAAG,EAAA,CAAA;AAAA,MACH,aAAe,EAAA,MAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAIrB,EAAM,MAAA,SAAA,GAAoB,MAAM,YAAiB,CAAA,IAAA,UAAA,CAAA;AAEjD,EAAM,MAAA,mBAAA,GAAsB,CAAC,KAA2B,KAAA;AACtD,IAAO,MAAA,CAAA;AAAA,MACL,IAAM,EAAA,MAAA;AAAA,MACN,OAAO,8BAA+B,CAAA,KAAA,CAAA;AAAA,MACtC,CAAG,EAAA,CAAA;AAAA,MACH,CAAG,EAAA,CAAA;AAAA,MACH,aAAe,EAAA,MAAA;AAAA,KAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAInB,EAAA,2CACG,WAAD,EAAA;AAAA,IACE,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAU,EAAA,mBAAA;AAAA,IACV,UAAA;AAAA,GAAA,sCAEC,SAAD,EAAA;AAAA,IAAW,GAAK,EAAA,YAAA;AAAA,IAAc,OAAS,EAAA,gBAAA;AAAA,GACrC,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CACF,WACA,UACA,EAAA,cAAA,EACA,UACA,EAAA,WAAA,EACA,UAPJ,CAAA,CAAA,EAAA;AAAA,IASE,GAAA;AAAA,IACA,KAAA,EAAO,mBAAK,UAAW,CAAA,KAAA,CAAA;AAAA,IACvB,WAAW,IACT,CAAA,MAAA,CAAO,sBACP,MAAO,CAAA,UAAA,CAAA,EACP,OAAO,UACP,CAAA,EAAA;AAAA,MACG,CAAA,MAAA,CAAO,UAAc,CAAA,GAAA,SAAA,IAAa,CAAC,UAAA;AAAA,MAAA,CACnC,OAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtB,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,MAAA,CACxB,OAAO,UAAc,CAAA,GAAA,cAAA;AAAA,MAAA,CACrB,OAAO,6BAAiC,CAAA,GAAA,UAAA;AAAA,MAAA,CACxC,OAAO,0BAA8B,CAAA,GAAA,QAAA;AAAA,KAAA,EAExC,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,YAAY,EAAA,SAAA;AAAA,IACZ,cAAc,EAAA,QAAA;AAAA,IACd,kBAAkB,EAAA,WAAA;AAAA,GAAA,CAAA,sCAEjB,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAAA,sCACzB,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,yBAAA,CAAA,CAAA;AAAA,GAAA,sCACzB,IAAD,EAAA,IAAA,sCACG,MAAD,EAAA,IAAA,CAAA,CAAA,CAAA,sCAGH,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAAA,sCACzB,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAA,EACb,aACG,MAAO,CAAA,2BAAA,CAAA,GACP,MAAO,CAAA,0BAAA,CAAA,CAAA,CAAA,sCAGd,KAAD,EAAA;AAAA,IACE,EAAI,EAAA,WAAA;AAAA,IACJ,SAAA,EAAW,KAAK,MAAO,CAAA,8BAAA,CAAA,CAAA;AAAA,GAAA,sCAEtB,IAAD,EAAA;AAAA,IAAM,KAAO,EAAA,CAAA;AAAA,GAAA,EAAI,iBAAkB,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/FileDropzone/src/FileTrigger.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useObjectRef, filterDOMProps } from '@react-aria/utils';
+import { PressResponder } from '@react-aria/interactions';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const HiddenFileInput = React.forwardRef(function InputWrapper(props, ref) {
+  return /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    ref,
+    type: "file",
+    style: { display: "none" }
+  }));
+});
+const FileTrigger = React.forwardRef(function FileTriggerWrapper(props, ref) {
+  const _a = props, {
+    acceptedFileTypes,
+    allowsMultiple = false,
+    onSelect = () => null,
+    children,
+    isDisabled = false
+  } = _a, rest = __objRest(_a, [
+    "acceptedFileTypes",
+    "allowsMultiple",
+    "onSelect",
+    "children",
+    "isDisabled"
+  ]);
+  const inputRef = useObjectRef(ref);
+  const domProps = filterDOMProps(rest);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PressResponder, {
+    onPress: () => {
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+    }
+  }, children), /* @__PURE__ */ React.createElement(HiddenFileInput, __spreadProps(__spreadValues({}, domProps), {
+    disabled: isDisabled,
+    ref: inputRef,
+    accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
+    onChange: (e) => onSelect == null ? void 0 : onSelect(e.target.files),
+    multiple: allowsMultiple
+  })));
+});
+
+export { FileTrigger };
+//# sourceMappingURL=FileTrigger.js.map

package/build/esm/FileDropzone/src/FileTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps, useObjectRef } from '@react-aria/utils';\nimport { PressResponder } from '@react-aria/interactions';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest);\n\n  return (\n    <>\n      <PressResponder\n        onPress={() => {\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,eAAkB,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CACvC,OACA,GACA,EAAA;AACA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,GAAA;AAAA,IAAU,IAAK,EAAA,MAAA;AAAA,IAAO,KAAA,EAAO,EAAE,OAAS,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA;AAG5D,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,kBAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,iBAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAa,GAAA,KAAA;AAAA,GAEX,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IALH,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,WAAW,YAAa,CAAA,GAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,WAAW,cAAe,CAAA,IAAA,CAAA,CAAA;AAEhC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,cAAD,EAAA;AAAA,IACE,SAAS,MAAM;AAtDvB,MAAA,IAAA,GAAA,CAAA;AAuDU,MAAA,CAAA,GAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAGnB,QAEH,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,QADN,CAAA,EAAA;AAAA,IAEE,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,QAAA;AAAA,IACL,QAAQ,iBAAmB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,EAAA;AAAA,IAC3B,QAAU,EAAA,CAAC,CAAM,KAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAY,EAAE,MAA4B,CAAA,KAAA,CAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/FileDropzone/src/utils.js

@@ -0,0 +1,20 @@
+const convertFileListToFileDropItems = (fileList) => {
+  if (!fileList) {
+    return [];
+  }
+  return Array.from(fileList).map((file) => ({
+    kind: "file",
+    type: file.type,
+    name: file.name,
+    getFile: () => Promise.resolve(file),
+    getText: () => new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsText(file);
+    })
+  }));
+};
+
+export { convertFileListToFileDropItems };
+//# sourceMappingURL=utils.js.map

package/build/esm/FileDropzone/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/FileDropzone/src/utils.ts"],"sourcesContent":["import { FileDropItem } from '@react-types/shared';\n\nexport const convertFileListToFileDropItems = (\n  fileList: FileList | null\n): FileDropItem[] => {\n  if (!fileList) {\n    return [];\n  }\n\n  return Array.from(fileList).map((file) => ({\n    kind: 'file',\n    type: file.type,\n    name: file.name,\n    getFile: () => Promise.resolve(file),\n    getText: () =>\n      new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => resolve(reader.result as string);\n        reader.onerror = () => reject(reader.error);\n        reader.readAsText(file);\n      }),\n  }));\n};\n"],"names":[],"mappings":"AAEa,MAAA,8BAAA,GAAiC,CAC5C,QACmB,KAAA;AACnB,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAO,OAAA,EAAA,CAAA;AAAA,GAAA;AAGT,EAAA,OAAO,KAAM,CAAA,IAAA,CAAK,QAAU,CAAA,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,IACzC,IAAM,EAAA,MAAA;AAAA,IACN,MAAM,IAAK,CAAA,IAAA;AAAA,IACX,MAAM,IAAK,CAAA,IAAA;AAAA,IACX,OAAA,EAAS,MAAM,OAAA,CAAQ,OAAQ,CAAA,IAAA,CAAA;AAAA,IAC/B,SAAS,MACP,IAAI,OAAgB,CAAA,CAAC,SAAS,MAAW,KAAA;AACvC,MAAA,MAAM,SAAS,IAAI,UAAA,EAAA,CAAA;AACnB,MAAO,MAAA,CAAA,MAAA,GAAS,MAAM,OAAA,CAAQ,MAAO,CAAA,MAAA,CAAA,CAAA;AACrC,MAAO,MAAA,CAAA,OAAA,GAAU,MAAM,MAAA,CAAO,MAAO,CAAA,KAAA,CAAA,CAAA;AACrC,MAAA,MAAA,CAAO,UAAW,CAAA,IAAA,CAAA,CAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -17,6 +17,8 @@ export { Accordion } from './Accordion/index.js';
 export { Typography } from './Typography/index.js';
 export { Fieldset } from './Fieldset/src/Fieldset.js';
 export { Avatar } from './Avatar/src/Avatar.js';
+export { FileDropzone } from './FileDropzone/src/FileDropzone.js';
+export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
 export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
 export { NumberField } from './NumberField/src/NumberField.js';
 export { useLocale } from '@react-aria/i18n';

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}