@transferwise/components 0.0.0-experimental-28b4d5d → 0.0.0-experimental-b15bafb

package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendarTable.js","sources":["../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        disabled={isDisabled(month)}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(\n      selectedDate &&\n      month === selectedDate.getMonth() &&\n      viewYear === selectedDate.getFullYear()\n    );\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
+{"version":3,"file":"MonthCalendarTable.js","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        disabled={isDisabled(month)}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(\n      selectedDate &&\n      month === selectedDate.getMonth() &&\n      viewYear === selectedDate.getFullYear()\n    );\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}

package/build/dateLookup/monthCalendar/table/MonthCalendarTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendarTable.mjs","sources":["../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        disabled={isDisabled(month)}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(\n      selectedDate &&\n      month === selectedDate.getMonth() &&\n      viewYear === selectedDate.getFullYear()\n    );\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
+{"version":3,"file":"MonthCalendarTable.mjs","sources":["../../../../../src/dateLookup/monthCalendar/table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        disabled={isDisabled(month)}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(\n      selectedDate &&\n      month === selectedDate.getMonth() &&\n      viewYear === selectedDate.getFullYear()\n    );\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}

package/build/dateLookup/tableLink/TableLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.js","sources":["../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,2BAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,2BAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,SAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}
+{"version":3,"file":"TableLink.js","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,2BAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,2BAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,SAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}

package/build/dateLookup/tableLink/TableLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.mjs","sources":["../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,QAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,QAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,IAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}
+{"version":3,"file":"TableLink.mjs","sources":["../../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,QAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,QAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,IAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}

package/build/dateLookup/yearCalendar/YearCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendar.js","sources":["../../../src/dateLookup/yearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\nimport DateHeader from '../dateHeader';\n\nimport YearCalendarTable from './table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: () => void;\n  onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n  onYearSelect = (year: number) => {\n    this.props.onViewDateUpdate({ year });\n    this.props.onSelect();\n  };\n\n  selectPreviousYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n  };\n\n  selectNextYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      min,\n      max,\n      viewYear,\n      placeholder,\n      intl: { formatMessage },\n    } = this.props;\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.twentyYears)}\n          onPreviousClick={this.selectPreviousYears}\n          onNextClick={this.selectNextYears}\n        />\n        <YearCalendarTable\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onYearSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","min","max","placeholder","intl","formatMessage","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;;;;;qBAkBA,MAAMA,YAAa,SAAQC,mBAAgC,CAAA;EACzDC,YAAY,GAAIC,IAAY,IAAI;AAC9B,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAI,KAAE,CAAC;AACrC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,mBAAmB,GAAGA,MAAK;AACzB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;EAEDC,eAAe,GAAGA,MAAK;AACrB,IAAA,IAAI,CAACL,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHL,QAAQ;MACRM,WAAW;AACXC,MAAAA,IAAI,EAAE;AAAEC,QAAAA;AAAa;KACtB,GAAG,IAAI,CAACZ,KAAK;IACd,oBACEa,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEN,aAAa,CAACO,2BAAQ,CAACC,WAAW,CAAE;QAC9CC,eAAe,EAAE,IAAI,CAAClB,mBAAoB;QAC1CmB,WAAW,EAAE,IAAI,CAACjB;AAAgB,OAAA,CAEpC,eAAAW,cAAA,CAACO,yBAAiB,EAAA;AAChBhB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTL,QAAAA,QAAQ,EAAEA,QAAS;AACnBM,QAAAA,WAAW,EAAEA,WAAY;QACzBR,QAAQ,EAAE,IAAI,CAACJ;AAAa,OAAA,CAEhC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,mBAAe0B,oBAAU,CAAC5B,cAAY,CAAC;;;;"}
+{"version":3,"file":"YearCalendar.js","sources":["../../../../src/dateLookup/yearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\nimport DateHeader from '../dateHeader';\n\nimport YearCalendarTable from './table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: () => void;\n  onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n  onYearSelect = (year: number) => {\n    this.props.onViewDateUpdate({ year });\n    this.props.onSelect();\n  };\n\n  selectPreviousYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n  };\n\n  selectNextYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      min,\n      max,\n      viewYear,\n      placeholder,\n      intl: { formatMessage },\n    } = this.props;\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.twentyYears)}\n          onPreviousClick={this.selectPreviousYears}\n          onNextClick={this.selectNextYears}\n        />\n        <YearCalendarTable\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onYearSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","min","max","placeholder","intl","formatMessage","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;;;;;qBAkBA,MAAMA,YAAa,SAAQC,mBAAgC,CAAA;EACzDC,YAAY,GAAIC,IAAY,IAAI;AAC9B,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAI,KAAE,CAAC;AACrC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,mBAAmB,GAAGA,MAAK;AACzB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;EAEDC,eAAe,GAAGA,MAAK;AACrB,IAAA,IAAI,CAACL,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHL,QAAQ;MACRM,WAAW;AACXC,MAAAA,IAAI,EAAE;AAAEC,QAAAA;AAAa;KACtB,GAAG,IAAI,CAACZ,KAAK;IACd,oBACEa,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEN,aAAa,CAACO,2BAAQ,CAACC,WAAW,CAAE;QAC9CC,eAAe,EAAE,IAAI,CAAClB,mBAAoB;QAC1CmB,WAAW,EAAE,IAAI,CAACjB;AAAgB,OAAA,CAEpC,eAAAW,cAAA,CAACO,yBAAiB,EAAA;AAChBhB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTL,QAAAA,QAAQ,EAAEA,QAAS;AACnBM,QAAAA,WAAW,EAAEA,WAAY;QACzBR,QAAQ,EAAE,IAAI,CAACJ;AAAa,OAAA,CAEhC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,mBAAe0B,oBAAU,CAAC5B,cAAY,CAAC;;;;"}

package/build/dateLookup/yearCalendar/YearCalendar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendar.mjs","sources":["../../../src/dateLookup/yearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\nimport DateHeader from '../dateHeader';\n\nimport YearCalendarTable from './table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: () => void;\n  onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n  onYearSelect = (year: number) => {\n    this.props.onViewDateUpdate({ year });\n    this.props.onSelect();\n  };\n\n  selectPreviousYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n  };\n\n  selectNextYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      min,\n      max,\n      viewYear,\n      placeholder,\n      intl: { formatMessage },\n    } = this.props;\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.twentyYears)}\n          onPreviousClick={this.selectPreviousYears}\n          onNextClick={this.selectNextYears}\n        />\n        <YearCalendarTable\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onYearSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","min","max","placeholder","intl","formatMessage","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;AAkBA,MAAMA,YAAa,SAAQC,aAAgC,CAAA;EACzDC,YAAY,GAAIC,IAAY,IAAI;AAC9B,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAI,KAAE,CAAC;AACrC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,mBAAmB,GAAGA,MAAK;AACzB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;EAEDC,eAAe,GAAGA,MAAK;AACrB,IAAA,IAAI,CAACL,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHL,QAAQ;MACRM,WAAW;AACXC,MAAAA,IAAI,EAAE;AAAEC,QAAAA;AAAa;KACtB,GAAG,IAAI,CAACZ,KAAK;IACd,oBACEa,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEN,aAAa,CAACO,QAAQ,CAACC,WAAW,CAAE;QAC9CC,eAAe,EAAE,IAAI,CAAClB,mBAAoB;QAC1CmB,WAAW,EAAE,IAAI,CAACjB;AAAgB,OAAA,CAEpC,eAAAW,GAAA,CAACO,iBAAiB,EAAA;AAChBhB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTL,QAAAA,QAAQ,EAAEA,QAAS;AACnBM,QAAAA,WAAW,EAAEA,WAAY;QACzBR,QAAQ,EAAE,IAAI,CAACJ;AAAa,OAAA,CAEhC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,qBAAe0B,UAAU,CAAC5B,YAAY,CAAC;;;;"}
+{"version":3,"file":"YearCalendar.mjs","sources":["../../../../src/dateLookup/yearCalendar/YearCalendar.tsx"],"sourcesContent":["import { PureComponent } from 'react';\nimport { injectIntl, WrappedComponentProps } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\nimport DateHeader from '../dateHeader';\n\nimport YearCalendarTable from './table';\n\ninterface YearCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: () => void;\n  onViewDateUpdate: (date: { year: number }) => void;\n}\n\nclass YearCalendar extends PureComponent<YearCalendarProps> {\n  onYearSelect = (year: number) => {\n    this.props.onViewDateUpdate({ year });\n    this.props.onSelect();\n  };\n\n  selectPreviousYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });\n  };\n\n  selectNextYears = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      min,\n      max,\n      viewYear,\n      placeholder,\n      intl: { formatMessage },\n    } = this.props;\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.twentyYears)}\n          onPreviousClick={this.selectPreviousYears}\n          onNextClick={this.selectNextYears}\n        />\n        <YearCalendarTable\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onYearSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(YearCalendar);\n"],"names":["YearCalendar","PureComponent","onYearSelect","year","props","onViewDateUpdate","onSelect","selectPreviousYears","viewYear","selectNextYears","render","selectedDate","min","max","placeholder","intl","formatMessage","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","twentyYears","onPreviousClick","onNextClick","YearCalendarTable","injectIntl"],"mappings":";;;;;;;AAkBA,MAAMA,YAAa,SAAQC,aAAgC,CAAA;EACzDC,YAAY,GAAIC,IAAY,IAAI;AAC9B,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAI,KAAE,CAAC;AACrC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,mBAAmB,GAAGA,MAAK;AACzB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;EAEDC,eAAe,GAAGA,MAAK;AACrB,IAAA,IAAI,CAACL,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA,IAAI,EAAE,IAAI,CAACC,KAAK,CAACI,QAAQ,GAAG;AAAE,KAAE,CAAC;EACjE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHL,QAAQ;MACRM,WAAW;AACXC,MAAAA,IAAI,EAAE;AAAEC,QAAAA;AAAa;KACtB,GAAG,IAAI,CAACZ,KAAK;IACd,oBACEa,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEN,aAAa,CAACO,QAAQ,CAACC,WAAW,CAAE;QAC9CC,eAAe,EAAE,IAAI,CAAClB,mBAAoB;QAC1CmB,WAAW,EAAE,IAAI,CAACjB;AAAgB,OAAA,CAEpC,eAAAW,GAAA,CAACO,iBAAiB,EAAA;AAChBhB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTL,QAAAA,QAAQ,EAAEA,QAAS;AACnBM,QAAAA,WAAW,EAAEA,WAAY;QACzBR,QAAQ,EAAE,IAAI,CAACJ;AAAa,OAAA,CAEhC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,qBAAe0B,UAAU,CAAC5B,YAAY,CAAC;;;;"}

package/build/dateLookup/yearCalendar/table/YearCalendarTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendarTable.js","sources":["../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface YearCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: YearCalendarTableProps) => {\n  const { locale } = useIntl();\n  const startYear = viewYear - (viewYear % 20);\n  const getLink = (year: number) => {\n    return (\n      <TableLink\n        item={year}\n        type=\"year\"\n        title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n        active={isActive(year)}\n        disabled={isDisabled(year)}\n        today={isThisYear(year)}\n        autofocus={autofocusYear === year}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (year: number) => {\n    return !!(selectedDate && year === selectedDate.getFullYear());\n  };\n\n  const isThisYear = (year: number) => {\n    return year === new Date().getFullYear();\n  };\n\n  const isDisabled = (year: number) => {\n    return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n  };\n\n  const autofocusYear = (() => {\n    const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAI,GAAG,CAAC;AACd,MAAMC,IAAI,GAAG,CAAC;AACd,MAAMC,gBAAgB,GAA+B;AAAEC,EAAAA,IAAI,EAAE;CAAW;AAExE,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,YAAY;EACZC,GAAG;EACHC,GAAG;EACHC,QAAQ;EACRC,WAAW;AACXC,EAAAA;AAAQ,CACe,KAAI;EAC3B,MAAM;AAAEC,IAAAA;GAAQ,GAAGC,iBAAO,EAAE;AAC5B,EAAA,MAAMC,SAAS,GAAGL,QAAQ,GAAIA,QAAQ,GAAG,EAAG;EAC5C,MAAMM,OAAO,GAAIX,IAAY,IAAI;IAC/B,oBACEY,cAAA,CAACC,iBAAS,EAAA;AACRC,MAAAA,IAAI,EAAEd,IAAK;AACXe,MAAAA,IAAI,EAAC,MAAM;AACXC,MAAAA,KAAK,EAAEC,qBAAU,CAAC,IAAIC,IAAI,CAAClB,IAAI,EAAE,CAAC,CAAC,EAAEQ,MAAM,EAAET,gBAAgB,CAAE;AAC/DoB,MAAAA,MAAM,EAAEC,QAAQ,CAACpB,IAAI,CAAE;AACvBqB,MAAAA,QAAQ,EAAEC,UAAU,CAACtB,IAAI,CAAE;AAC3BuB,MAAAA,KAAK,EAAEC,UAAU,CAACxB,IAAI,CAAE;MACxByB,SAAS,EAAEC,aAAa,KAAK1B,IAAK;AAClC2B,MAAAA,OAAO,EAAEpB;AAAS,KAAA,CAClB;EAEN,CAAC;EAED,MAAMa,QAAQ,GAAIpB,IAAY,IAAI;IAChC,OAAO,CAAC,EAAEE,YAAY,IAAIF,IAAI,KAAKE,YAAY,CAAC0B,WAAW,EAAE,CAAC;EAChE,CAAC;EAED,MAAMJ,UAAU,GAAIxB,IAAY,IAAI;IAClC,OAAOA,IAAI,KAAK,IAAIkB,IAAI,EAAE,CAACU,WAAW,EAAE;EAC1C,CAAC;EAED,MAAMN,UAAU,GAAItB,IAAY,IAAI;IAClC,OAAO,CAAC,EAAGG,GAAG,IAAIH,IAAI,GAAGG,GAAG,CAACyB,WAAW,EAAE,IAAMxB,GAAG,IAAIJ,IAAI,GAAGI,GAAG,CAACwB,WAAW,EAAG,CAAC;EACnF,CAAC;EAED,MAAMF,aAAa,GAAG,CAAC,MAAK;AAC1B,IAAA,MAAMG,KAAK,GAAGC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEnC,IAAI,GAAGC;KAAM,EAAE,CAACmC,CAAC,EAAEC,KAAK,KAAKxB,SAAS,GAAGwB,KAAK,CAAC;AAClF,IAAA,OAAOC,iCAAgB,CAAC;MAAEf,QAAQ;AAAEgB,MAAAA,KAAK,EAAEZ,UAAU;MAAEF,UAAU;AAAEe,MAAAA,QAAQ,EAAER;AAAK,KAAE,CAAC;AACvF,EAAA,CAAC,GAAG;AAEJ,EAAA,oBACES,eAAA,CAAA,OAAA,EAAA;AAAOC,IAAAA,SAAS,EAAC,oEAAoE;AAAAC,IAAAA,QAAA,gBACnF5B,cAAA,CAAA,OAAA,EAAA;AAAO2B,MAAAA,SAAS,EAAC,SAAS;AAAAC,MAAAA,QAAA,eACxB5B,cAAA,CAAA,IAAA,EAAA;AAAA4B,QAAAA,QAAA,eACE5B,cAAA,CAAA,IAAA,EAAA;AAAI6B,UAAAA,OAAO,EAAE3C,IAAK;AAAA0C,UAAAA,QAAA,EAAElC;SAAgB;OAClC;KACC,CACP,eAAAM,cAAA,CAAA,OAAA,EAAA;AAAA4B,MAAAA,QAAA,EACGV,KAAK,CAACC,IAAI,CAAC;AAAEC,QAAAA,MAAM,EAAEnC;AAAI,OAAE,EAAE,CAACoC,CAAC,EAAES,QAAQ,kBACxC9B,cAAA,CAAA,IAAA,EAAA;AAAA4B,QAAAA,QAAA,EACGV,KAAK,CAACC,IAAI,CAAC;AAAEC,UAAAA,MAAM,EAAElC;AAAI,SAAE,EAAE,CAACmC,CAAC,EAAEU,QAAQ,kBACxC/B,cAAA,CAAA,IAAA,EAAA;UAAA4B,QAAA,EAAoB7B,OAAO,CAACD,SAAS,GAAGgC,QAAQ,GAAG5C,IAAI,GAAG6C,QAAQ;AAAC,SAAA,EAA1DA,QAA+D,CACzE;AAAC,OAAA,EAHKD,QAIL,CACL;AAAC,KACG,CACT;AAAA,GAAO,CAAC;AAEZ;;;;"}
+{"version":3,"file":"YearCalendarTable.js","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface YearCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: YearCalendarTableProps) => {\n  const { locale } = useIntl();\n  const startYear = viewYear - (viewYear % 20);\n  const getLink = (year: number) => {\n    return (\n      <TableLink\n        item={year}\n        type=\"year\"\n        title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n        active={isActive(year)}\n        disabled={isDisabled(year)}\n        today={isThisYear(year)}\n        autofocus={autofocusYear === year}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (year: number) => {\n    return !!(selectedDate && year === selectedDate.getFullYear());\n  };\n\n  const isThisYear = (year: number) => {\n    return year === new Date().getFullYear();\n  };\n\n  const isDisabled = (year: number) => {\n    return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n  };\n\n  const autofocusYear = (() => {\n    const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}

package/build/dateLookup/yearCalendar/table/YearCalendarTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendarTable.mjs","sources":["../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface YearCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: YearCalendarTableProps) => {\n  const { locale } = useIntl();\n  const startYear = viewYear - (viewYear % 20);\n  const getLink = (year: number) => {\n    return (\n      <TableLink\n        item={year}\n        type=\"year\"\n        title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n        active={isActive(year)}\n        disabled={isDisabled(year)}\n        today={isThisYear(year)}\n        autofocus={autofocusYear === year}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (year: number) => {\n    return !!(selectedDate && year === selectedDate.getFullYear());\n  };\n\n  const isThisYear = (year: number) => {\n    return year === new Date().getFullYear();\n  };\n\n  const isDisabled = (year: number) => {\n    return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n  };\n\n  const autofocusYear = (() => {\n    const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
+{"version":3,"file":"YearCalendarTable.mjs","sources":["../../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface YearCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder: string;\n  onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: YearCalendarTableProps) => {\n  const { locale } = useIntl();\n  const startYear = viewYear - (viewYear % 20);\n  const getLink = (year: number) => {\n    return (\n      <TableLink\n        item={year}\n        type=\"year\"\n        title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n        active={isActive(year)}\n        disabled={isDisabled(year)}\n        today={isThisYear(year)}\n        autofocus={autofocusYear === year}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (year: number) => {\n    return !!(selectedDate && year === selectedDate.getFullYear());\n  };\n\n  const isThisYear = (year: number) => {\n    return year === new Date().getFullYear();\n  };\n\n  const isDisabled = (year: number) => {\n    return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n  };\n\n  const autofocusYear = (() => {\n    const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}

package/build/decision/Decision.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
-var neptuneTokens = require('@transferwise/neptune-tokens');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
+var breakpoint = require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -50,8 +50,8 @@ const Decision = ({
   showMediaCircleInList = true,
   isContainerAligned = false
 }) => {
-  const screenXs = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.EXTRA_SMALL);
-  const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
+  const screenXs = useScreenSize.useScreenSize(breakpoint.Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
   if (type === exports.DecisionType.NAVIGATION) {
     const renderedOptions = options.map(({
       'aria-label': ariaLabel,

package/build/decision/Decision.js.map

@@ -1 +1 @@
-{"version":3,"file":"Decision.js","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Size, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  'aria-label'?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      (\n        {\n          'aria-label': ariaLabel,\n          title,\n          description,\n          disabled,\n          href,\n          target,\n          media: { list },\n          onClick,\n        },\n        key,\n      ) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          aria-label={ariaLabel}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  {\n                    'aria-label': ariaLabel,\n                    description,\n                    disabled,\n                    href,\n                    target,\n                    media: { block },\n                    onClick,\n                    title,\n                  },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    aria-label={ariaLabel}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Decision.js","sources":["../../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  'aria-label'?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      (\n        {\n          'aria-label': ariaLabel,\n          title,\n          description,\n          disabled,\n          href,\n          target,\n          media: { list },\n          onClick,\n        },\n        key,\n      ) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          aria-label={ariaLabel}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  {\n                    'aria-label': ariaLabel,\n                    description,\n                    disabled,\n                    href,\n                    target,\n                    media: { block },\n                    onClick,\n                    title,\n                  },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    aria-label={ariaLabel}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}

package/build/decision/Decision.mjs

@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
+import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/decision/Decision.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Decision.mjs","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Size, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  'aria-label'?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      (\n        {\n          'aria-label': ariaLabel,\n          title,\n          description,\n          disabled,\n          href,\n          target,\n          media: { list },\n          onClick,\n        },\n        key,\n      ) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          aria-label={ariaLabel}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  {\n                    'aria-label': ariaLabel,\n                    description,\n                    disabled,\n                    href,\n                    target,\n                    media: { block },\n                    onClick,\n                    title,\n                  },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    aria-label={ariaLabel}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Decision.mjs","sources":["../../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  'aria-label'?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      (\n        {\n          'aria-label': ariaLabel,\n          title,\n          description,\n          disabled,\n          href,\n          target,\n          media: { list },\n          onClick,\n        },\n        key,\n      ) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          aria-label={ariaLabel}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  {\n                    'aria-label': ariaLabel,\n                    description,\n                    disabled,\n                    href,\n                    target,\n                    media: { block },\n                    onClick,\n                    title,\n                  },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    aria-label={ariaLabel}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}

package/build/definitionList/DefinitionList.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var clsx = require('clsx');
 require('../common/theme.js');
 require('../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/definitionList/DefinitionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAMA,kBAAkB,GAAIC,MAA4B,IACtDA,MAAM,KAAKC,cAAM,CAACC,uBAAuB,IACzCF,MAAM,KAAKC,cAAM,CAACE,wBAAwB,IAC1CH,MAAM,KAAKC,cAAM,CAACG,oBAAoB;AAExC,MAAMC,mBAAmB,GAAGA,CAC1BL,MAA4B,EAC5BM,MAA0C,KACxC;AACF,EAAA,MAAMC,OAAO,GAAG,CAAC,QAAQ,CAAC;AAE1B,EAAA,IAAID,MAAM,EAAE;AACV,IAAA,IAAIP,kBAAkB,CAACC,MAAM,CAAC,EAAE;AAC9BO,MAAAA,OAAO,CAACC,IAAI,CAAC,oBAAoB,CAAC;AACpC,IAAA,CAAC,MAAM;AACLD,MAAAA,OAAO,CAACC,IAAI,CAAC,mBAAmB,CAAC;AACnC,IAAA;AACF,EAAA;AAEA,EAAA,IAAIR,MAAM,KAAKC,cAAM,CAACE,wBAAwB,EAAE;AAC9CI,IAAAA,OAAO,CAACC,IAAI,CAAC,yDAAyD,CAAC;AACzE,EAAA,CAAC,MAAM;AACLD,IAAAA,OAAO,CAACC,IAAI,CAAC,yBAAyB,CAAC;AACzC,EAAA;AAEA,EAAA,IAAIR,MAAM,KAAKC,cAAM,CAACG,oBAAoB,EAAE;AAC1CG,IAAAA,OAAO,CAACC,IAAI,CAAC,iBAAiB,CAAC;AACjC,EAAA;AAEA,EAAA,OAAOD,OAAO;AAChB,CAAC;AAED,MAAME,kBAAkB,GAAG,EAA+C;AAE5D,SAAUC,cAAcA,CAAC;AACrCC,EAAAA,WAAW,GAAGF,kBAAkB;AAChCT,EAAAA,MAAM,GAAG,qBAAqB;AAC9BY,EAAAA;AAAK,CACe,EAAA;AACpB,EAAA,oBACEC,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE;AAC5C,MAAA,YAAY,EAAEH,KAAK;AACnB,MAAA,aAAa,EAAEZ,MAAM,KAAKC,cAAM,CAACe,mBAAmB;AACpD,MAAA,sDAAsD,EACpDhB,MAAM,KAAKC,cAAM,CAACgB,mBAAmB;MACvC,4CAA4C,EAAElB,kBAAkB,CAACC,MAAM;AACxE,KAAA,CAAE;AAAAkB,IAAAA,QAAA,EAEFP,WAAW,CACTQ,MAAM,CAAEC,UAAU,IAAKA,UAAU,CAAC,CAClCC,GAAG,CAAC,CAAC;MAAEf,MAAM;MAAEgB,KAAK;MAAEC,KAAK;AAAEC,MAAAA;AAAG,KAAE,kBACjCC,eAAA,CAAA,KAAA,EAAA;AAAeX,MAAAA,SAAS,EAAC,0BAA0B;AAAAI,MAAAA,QAAA,gBACjDL,cAAA,CAAA,IAAA,EAAA;AAAAK,QAAAA,QAAA,EAAKI;OAAU,CACf,eAAAG,eAAA,CAAA,IAAA,EAAA;QAAIX,SAAS,EAAEC,SAAI,CAAC,GAAGV,mBAAmB,CAACL,MAAM,EAAEM,MAAM,CAAC,CAAE;AAAAY,QAAAA,QAAA,gBAC1DL,cAAA,CAAA,KAAA,EAAA;AAAAK,UAAAA,QAAA,EAAMK;AAAK,SAAM,CACjB,EAACjB,MAAM,gBACLO,cAAA,CAAA,KAAA,EAAA;AACEC,UAAAA,SAAS,EAAEC,SAAI,CACbhB,kBAAkB,CAACC,MAAM,CAAC,GAAG,OAAO,GAAG,OAAO,EAC9C,4BAA4B,CAC5B;UAAAkB,QAAA,eAEFL,cAAA,CAACa,uBAAM,EAAA;AAACC,YAAAA,EAAE,EAAC,QAAQ;AAACC,YAAAA,IAAI,EAAC,IAAI;YAACC,EAAE,EAAA,IAAA;YAACC,OAAO,EAAExB,MAAM,CAACwB,OAAQ;YAAAZ,QAAA,EACtDZ,MAAM,CAACyB;WACF;SACL,CAAC,GACJ,IAAI;AAAA,OACN,CACN;AAAA,KAAA,EAjBUP,GAiBL,CACN;AAAC,GACF,CAAC;AAET;;;;"}
+{"version":3,"file":"DefinitionList.js","sources":["../../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}

package/build/definitionList/DefinitionList.mjs

@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/definitionList/DefinitionList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.mjs","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}
+{"version":3,"file":"DefinitionList.mjs","sources":["../../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  title: React.ReactNode;\n  value: React.ReactNode;\n  key: string;\n}\n\nexport type DefinitionListLayout =\n  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n  definitions?: DefinitionListDefinition[];\n  layout?: DefinitionListLayout;\n  muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n  layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n  layout: DefinitionListLayout,\n  action: DefinitionListDefinition['action'],\n) => {\n  const classes = ['d-flex'];\n\n  if (action) {\n    if (isLayoutHorizontal(layout)) {\n      classes.push('align-items-center');\n    } else {\n      classes.push('align-items-start');\n    }\n  }\n\n  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n  } else {\n    classes.push('justify-content-between');\n  }\n\n  if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n    classes.push('text-sm-justify');\n  }\n\n  return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n  definitions = defaultDefinitions,\n  layout = 'VERTICAL_TWO_COLUMN',\n  muted,\n}: DefinitionListProps) {\n  return (\n    <dl\n      className={clsx('tw-definition-list d-flex ', {\n        'text-muted': muted,\n        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n        'tw-definition-list--columns flex-column flex-row--sm':\n          layout === Layout.VERTICAL_TWO_COLUMN,\n        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n      })}\n    >\n      {definitions\n        .filter((definition) => definition)\n        .map(({ action, title, value, key }) => (\n          <div key={key} className=\"tw-definition-list__item\">\n            <dt>{title}</dt>\n            <dd className={clsx(...getAlignmentClasses(layout, action))}>\n              <div>{value}</div>\n              {action ? (\n                <div\n                  className={clsx(\n                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n                    'tw-definition-list__action',\n                  )}\n                >\n                  <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n                    {action.label}\n                  </Button>\n                </div>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n    </dl>\n  );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}

package/build/dimmer/Dimmer.js

@@ -10,8 +10,8 @@ var deviceDetection = require('../common/deviceDetection/deviceDetection.js');
 var DOMOperations = require('../common/DOMOperations/DOMOperations.js');
 require('../common/theme.js');
 require('../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/dimmer/Dimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  /** @default false */\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  /** @default false */\n  fadeContentOnEnter?: boolean;\n  /** @default false */\n  fadeContentOnExit?: boolean;\n  /** @default false */\n  open?: boolean;\n  /** @default false */\n  scrollable?: boolean;\n  /** @default false */\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.js","sources":["../../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  /** @default false */\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  /** @default false */\n  fadeContentOnEnter?: boolean;\n  /** @default false */\n  fadeContentOnExit?: boolean;\n  /** @default false */\n  open?: boolean;\n  /** @default false */\n  scrollable?: boolean;\n  /** @default false */\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/dimmer/Dimmer.mjs

@@ -6,8 +6,8 @@ import { isIosDevice } from '../common/deviceDetection/deviceDetection.mjs';
 import { addNoScrollClass, removeNoScrollClass } from '../common/DOMOperations/DOMOperations.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/dimmer/Dimmer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  /** @default false */\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  /** @default false */\n  fadeContentOnEnter?: boolean;\n  /** @default false */\n  fadeContentOnExit?: boolean;\n  /** @default false */\n  open?: boolean;\n  /** @default false */\n  scrollable?: boolean;\n  /** @default false */\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.mjs","sources":["../../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  /** @default false */\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  /** @default false */\n  fadeContentOnEnter?: boolean;\n  /** @default false */\n  fadeContentOnExit?: boolean;\n  /** @default false */\n  open?: boolean;\n  /** @default false */\n  scrollable?: boolean;\n  /** @default false */\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}