@transferwise/components 46.49.0 → 46.50.0

package/build/i18n/ru.json.mjs

@@ -23,6 +23,8 @@ var ru = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
 	"neptune.Select.searchPlaceholder": "Поиск...",
 	"neptune.SelectInput.noResultsFound": "Ничего не найдено",
+	"neptune.SelectOption.action.label": "Выбрать",
+	"neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
 	"neptune.Summary.statusDone": "Этап завершен",
 	"neptune.Summary.statusNotDone": "Этап к выполнению",
 	"neptune.Summary.statusPending": "Этап в процессе",

package/build/i18n/ru.json.mjs.map

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

package/build/i18n/th.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
+  "neptune.SelectOption.action.label": "เลือก",
+  "neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
   "neptune.Summary.statusDone": "รายการที่ทำแล้ว",
   "neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
   "neptune.Summary.statusPending": "รายการที่รอดำเนินการ",

package/build/i18n/th.json.js

@@ -25,6 +25,8 @@ var th = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
+	"neptune.SelectOption.action.label": "เลือก",
+	"neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
 	"neptune.Summary.statusDone": "รายการที่ทำแล้ว",
 	"neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
 	"neptune.Summary.statusPending": "รายการที่รอดำเนินการ",

package/build/i18n/th.json.js.map

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

package/build/i18n/th.json.mjs

@@ -23,6 +23,8 @@ var th = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
+	"neptune.SelectOption.action.label": "เลือก",
+	"neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
 	"neptune.Summary.statusDone": "รายการที่ทำแล้ว",
 	"neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
 	"neptune.Summary.statusPending": "รายการที่รอดำเนินการ",

package/build/i18n/th.json.mjs.map

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

package/build/i18n/tr.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
+  "neptune.SelectOption.action.label": "Seç",
+  "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
   "neptune.Summary.statusDone": "Tamamlanan aşama",
   "neptune.Summary.statusNotDone": "Yapılacak",
   "neptune.Summary.statusPending": "Bekliyor",

package/build/i18n/tr.json.js

@@ -25,6 +25,8 @@ var tr = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
 	"neptune.Select.searchPlaceholder": "Ara...",
 	"neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
+	"neptune.SelectOption.action.label": "Seç",
+	"neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
 	"neptune.Summary.statusDone": "Tamamlanan aşama",
 	"neptune.Summary.statusNotDone": "Yapılacak",
 	"neptune.Summary.statusPending": "Bekliyor",

package/build/i18n/tr.json.js.map

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

package/build/i18n/tr.json.mjs

@@ -23,6 +23,8 @@ var tr = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
 	"neptune.Select.searchPlaceholder": "Ara...",
 	"neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
+	"neptune.SelectOption.action.label": "Seç",
+	"neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
 	"neptune.Summary.statusDone": "Tamamlanan aşama",
 	"neptune.Summary.statusNotDone": "Yapılacak",
 	"neptune.Summary.statusPending": "Bekliyor",

package/build/i18n/tr.json.mjs.map

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

package/build/main.css

@@ -5472,6 +5472,11 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
@@ -5563,9 +5568,9 @@ label.np-upload-button:not(.disabled):active {
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -5577,27 +5582,27 @@ label.np-upload-button:not(.disabled):active {
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -5612,38 +5617,41 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.np-upload-item--link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item__link a:hover,
-.np-upload-item__link a:active {
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/build/modal/Modal.js

@@ -6,6 +6,7 @@ var reactTransitionGroup = require('react-transition-group');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var Dimmer = require('../dimmer/Dimmer.js');
 var Drawer = require('../drawer/Drawer.js');
+var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
 var Title = require('../title/Title.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useLayout = require('../common/hooks/useLayout/useLayout.js');
@@ -41,6 +42,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
   const titleId = React.useId();
+  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
   return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: open,
     headerTitle: title,
@@ -68,6 +70,7 @@ const Modal = ({
         className: classNames__default.default('tw-modal', 'd-flex', 'fade', 'outline-none', scroll$1 === scroll.Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          id: overlayId,
           role: "dialog",
           "aria-modal": true,
           "aria-labelledby": titleId,

package/build/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","role","_jsxs","Title","id","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,mCAAmC,GAAG,GAAG,CAAA;AAczCC,MAAAA,KAAK,GAAGA,CAAC;AACbC,EAAAA,KAAK,GAAG,IAAI;EACZC,IAAI;AACJC,EAAAA,MAAM,GAAG,IAAI;EACbC,OAAO;EACPC,SAAS;EACTC,IAAI;QACJC,MAAI,GAAGC,SAAI,CAACC,MAAM;UAClBC,QAAM,GAAGC,aAAM,CAACC,QAAQ;YACxBC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,yBAAyB,GAAG,KAAK;EACjC,GAAGC,UAAAA;AACQ,CAAA,KAAI;AACf,EAAA,MAAMC,mBAAmB,GAAIC,YAAoB,IAC/Cd,SAAS,EAAEe,KAAK,CAAC,GAAG,CAAC,CAACC,QAAQ,CAACF,YAAY,CAAC,CAAA;EAC9C,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAEhC;AACA,EAAA,MAAMC,SAAS,GAAGN,mBAAmB,CAAC,SAAS,CAAC,CAAA;AAChD,EAAA,MAAMO,SAAS,GAAGP,mBAAmB,CAAC,YAAY,CAAC,CAAA;AAEnD,EAAA,MAAMQ,gBAAgB,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;AACrD,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;AAE9C,EAAA,OAAO,CAACV,QAAQ,gBACdW,cAAA,CAACC,MAAM,EAAA;AACL5B,IAAAA,IAAI,EAAEA,IAAK;AACX6B,IAAAA,WAAW,EAAElC,KAAM;AACnBmC,IAAAA,aAAa,EAAEjC,MAAO;IACtBU,QAAQ,EAAEC,iBAAQ,CAACuB,MAAO;AAC1BjC,IAAAA,OAAO,EAAEA,OAAQ;AAAAkC,IAAAA,QAAA,EAEhBpC,IAAAA;AAAI,GACC,CAAC,gBAET+B,cAAA,CAACM,cAAM,EAAA;AACLjC,IAAAA,IAAI,EAAEA,IAAK;AACXkC,IAAAA,UAAU,EAAE9B,QAAM,KAAKC,aAAM,CAACC,QAAS;AACvC6B,IAAAA,eAAe,EAAE5B,UAAS;AAC1B6B,IAAAA,mBAAmB,EAAE1B,yBAA0B;AAC/CZ,IAAAA,OAAO,EAAEA,OAAQ;IAAAkC,QAAA,eAEjBL,cAAA,CAACU,kCAAa,EAAA;AACZC,MAAAA,OAAO,EAAElB,gBAAiB;MAC1BmB,MAAM,EAAA,IAAA;AACNC,MAAAA,EAAE,EAAExC,IAAK;AACTyC,MAAAA,UAAU,EAAE;AAAEC,QAAAA,SAAS,EAAE,IAAA;OAAO;AAChCC,MAAAA,OAAO,EAAElD,mCAAoC;MAC7CmD,aAAa,EAAA,IAAA;AAAAZ,MAAAA,QAAA,eAEbL,cAAA,CAAA,KAAA,EAAA;AACEkB,QAAAA,GAAG,EAAEzB,gBAAiB;QACtBrB,SAAS,EAAE0C,2BAAU,CACnB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,cAAc,EACdrC,QAAM,KAAKC,aAAM,CAACyC,OAAO,IAAI,sBAAsB,EACnD/C,SAAS,CACT;AAAA,QAAA,GACEY,UAAU;AAAAqB,QAAAA,QAAA,eAEdL,cAAA,CAAA,KAAA,EAAA;AACEoB,UAAAA,EAAE,EAAEvB,SAAU;AACdwB,UAAAA,IAAI,EAAC,QAAQ;UACb,YAAU,EAAA,IAAA;AACV,UAAA,iBAAA,EAAiB1B,OAAQ;AACzBvB,UAAAA,SAAS,EAAE0C,2BAAU,CAAC,iBAAiB,EAAE,QAAQ,EAAE;YACjD,CAAC,CAAA,SAAA,EAAYxC,MAAI,CAAA,CAAE,GAAGA,MAAAA;AACvB,WAAA,CAAE;AAAA+B,UAAAA,QAAA,eAEHiB,eAAA,CAAA,KAAA,EAAA;YACElD,SAAS,EAAE0C,2BAAU,CACnB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,yBAAyB,EACzB;AACE,cAAA,kBAAkB,EAAEvB,SAAS;AAC7B,cAAA,mBAAmB,EAAE,CAACvB,KAAAA;AACvB,aAAA,CACD;AAAAqC,YAAAA,QAAA,gBAEFiB,eAAA,CAAA,KAAA,EAAA;AACElD,cAAAA,SAAS,EAAE0C,2BAAU,CACnB,iBAAiB,EACjB,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzB,WAAW,EACX;gBACE,sBAAsB,EAAE,CAAC9C,KAAK,IAAIwB,SAAAA;AACnC,eAAA,CACD;cAAAa,QAAA,EAAA,cAEFL,cAAA,CAACuB,KAAK,EAAA;AAACH,gBAAAA,EAAE,EAAEzB,OAAQ;gBAAC6B,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACtD,gBAAAA,SAAS,EAAC,gBAAgB;AAAAiC,gBAAAA,QAAA,EACxErC,KAAAA;AAAK,eACD,CACP,eAAAgC,cAAA,CAAC2B,uBAAW,EAAA;AAACC,gBAAAA,OAAO,EAAEzD,OAAAA;AAAQ,eAChC,CAAA,CAAA;aAAK,CACL,eAAA6B,cAAA,CAAA,KAAA,EAAA;AACE5B,cAAAA,SAAS,EAAE0C,2BAAU,CAAC,eAAe,EAAE;AACrC,gBAAA,2BAA2B,EAAErC,QAAM,KAAKC,aAAM,CAACyC,OAAAA;AAChD,eAAA,CAAE;AAAAd,cAAAA,QAAA,EAEFpC,IAAAA;AAAI,aACF,CACL,EAACC,MAAM,iBACL8B,cAAA,CAAA,KAAA,EAAA;cACE5B,SAAS,EAAE0C,2BAAU,CACnB,iBAAiB,EACjB,QAAQ,EACR,oBAAoB,EACpB,WAAW,EACX;AACE,gBAAA,sBAAsB,EAAEtB,SAAAA;AACzB,eAAA,CACD;AAAAa,cAAAA,QAAA,EAEDnC,MAAAA;AAAM,aACJ,CACN,CAAA;WACE,CAAA;SACF,CAAA;OACF,CAAA;KACQ,CAAA;AACjB,GAAQ,CACT,CAAA;AACH;;;;"}

package/build/modal/Modal.mjs

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
-import { useRef, useId } from 'react';
+import { useRef, useId, useContext } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import Dimmer from '../dimmer/Dimmer.mjs';
 import Drawer from '../drawer/Drawer.mjs';
+import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
 import Title from '../title/Title.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
@@ -35,6 +36,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = useRef(null);
   const titleId = useId();
+  const overlayId = useContext(OverlayIdContext);
   return !isMedium ? /*#__PURE__*/jsx(Drawer, {
     open: open,
     headerTitle: title,
@@ -62,6 +64,7 @@ const Modal = ({
         className: classNames('tw-modal', 'd-flex', 'fade', 'outline-none', scroll === Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsx("div", {
+          id: overlayId,
           role: "dialog",
           "aria-modal": true,
           "aria-labelledby": titleId,

package/build/modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","role","_jsxs","Title","id","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  title?: ReactNode;\n  body: ReactNode;\n  footer?: ReactNode;\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  open: boolean;\n  scroll?: ScrollContent | ScrollViewport;\n  position?: PositionTop | PositionCenter;\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const checkSpecialClasses = (classToCheck: string) =>\n    className?.split(' ').includes(classToCheck);\n  const { isMedium } = useLayout();\n\n  // These should be replaced with props in breaking change.\n  const isCompact = checkSpecialClasses('compact');\n  const noDivider = checkSpecialClasses('no-divider');\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={classNames(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={classNames('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={classNames(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n                {\n                  'tw-modal-compact': isCompact,\n                  'tw-modal-no-title': !title,\n                },\n              )}\n            >\n              <div\n                className={classNames(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  'justify-content-between',\n                  'flex-wrap',\n                  {\n                    'modal--withoutborder': !title || noDivider,\n                  },\n                )}\n              >\n                <Title id={titleId} type={Typography.TITLE_BODY} className=\"tw-modal-title\">\n                  {title}\n                </Title>\n                <CloseButton onClick={onClose} />\n              </div>\n              <div\n                className={classNames('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer && (\n                <div\n                  className={classNames(\n                    'tw-modal-footer',\n                    'd-flex',\n                    'align-items-center',\n                    'flex-wrap',\n                    {\n                      'modal--withoutborder': noDivider,\n                    },\n                  )}\n                >\n                  {footer}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","checkSpecialClasses","classToCheck","split","includes","isMedium","useLayout","isCompact","noDivider","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"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"}

package/build/provider/overlay/OverlayIdProvider.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+const OverlayIdContext = /*#__PURE__*/React.createContext(undefined);
+const OverlayIdProvider = ({
+  open,
+  children
+}) => {
+  const id = React.useId();
+  return /*#__PURE__*/jsxRuntime.jsx(OverlayIdContext.Provider, {
+    value: open ? id : undefined,
+    children: children
+  });
+};
+
+exports.OverlayIdContext = OverlayIdContext;
+exports.OverlayIdProvider = OverlayIdProvider;
+//# sourceMappingURL=OverlayIdProvider.js.map

package/build/provider/overlay/OverlayIdProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayIdProvider.js","sources":["../../../src/provider/overlay/OverlayIdProvider.tsx"],"sourcesContent":["import { createContext, useId } from 'react';\n\nexport const OverlayIdContext = createContext<string | undefined>(undefined);\n\nexport type OverlayIdProviderProps = {\n  open: boolean;\n  children?: React.ReactNode;\n};\n\nexport const OverlayIdProvider = ({ open, children }: OverlayIdProviderProps) => {\n  const id = useId();\n  return (\n    <OverlayIdContext.Provider value={open ? id : undefined}>{children}</OverlayIdContext.Provider>\n  );\n};\n"],"names":["OverlayIdContext","createContext","undefined","OverlayIdProvider","open","children","id","useId","_jsx","Provider","value"],"mappings":";;;;;MAEaA,gBAAgB,gBAAGC,mBAAa,CAAqBC,SAAS,EAAC;AAOrE,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,QAAAA;AAAkC,CAAA,KAAI;AAC9E,EAAA,MAAMC,EAAE,GAAGC,WAAK,EAAE,CAAA;AAClB,EAAA,oBACEC,cAAA,CAACR,gBAAgB,CAACS,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,IAAI,GAAGE,EAAE,GAAGJ,SAAU;AAAAG,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAA4B,CAAC,CAAA;AAEnG;;;;;"}

package/build/provider/overlay/OverlayIdProvider.mjs

@@ -0,0 +1,17 @@
+import { createContext, useId } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const OverlayIdContext = /*#__PURE__*/createContext(undefined);
+const OverlayIdProvider = ({
+  open,
+  children
+}) => {
+  const id = useId();
+  return /*#__PURE__*/jsx(OverlayIdContext.Provider, {
+    value: open ? id : undefined,
+    children: children
+  });
+};
+
+export { OverlayIdContext, OverlayIdProvider };
+//# sourceMappingURL=OverlayIdProvider.mjs.map

package/build/provider/overlay/OverlayIdProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayIdProvider.mjs","sources":["../../../src/provider/overlay/OverlayIdProvider.tsx"],"sourcesContent":["import { createContext, useId } from 'react';\n\nexport const OverlayIdContext = createContext<string | undefined>(undefined);\n\nexport type OverlayIdProviderProps = {\n  open: boolean;\n  children?: React.ReactNode;\n};\n\nexport const OverlayIdProvider = ({ open, children }: OverlayIdProviderProps) => {\n  const id = useId();\n  return (\n    <OverlayIdContext.Provider value={open ? id : undefined}>{children}</OverlayIdContext.Provider>\n  );\n};\n"],"names":["OverlayIdContext","createContext","undefined","OverlayIdProvider","open","children","id","useId","_jsx","Provider","value"],"mappings":";;;MAEaA,gBAAgB,gBAAGC,aAAa,CAAqBC,SAAS,EAAC;AAOrE,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,QAAAA;AAAkC,CAAA,KAAI;AAC9E,EAAA,MAAMC,EAAE,GAAGC,KAAK,EAAE,CAAA;AAClB,EAAA,oBACEC,GAAA,CAACR,gBAAgB,CAACS,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,IAAI,GAAGE,EAAE,GAAGJ,SAAU;AAAAG,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAA4B,CAAC,CAAA;AAEnG;;;;"}

package/build/styles/main.css

@@ -5472,6 +5472,11 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
@@ -5563,9 +5568,9 @@ label.np-upload-button:not(.disabled):active {
   border: 1px solid var(--color-interactive-secondary);
   position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
@@ -5577,27 +5582,27 @@ label.np-upload-button:not(.disabled):active {
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
 }
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
   border-top: 1px;
 }
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
   border-top-color: rgba(0,0,0,0.10196);
   border-top-color: var(--color-border-neutral);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
   display: none;
 }
 .np-upload-button-container:hover:before,
@@ -5612,38 +5617,41 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: -3px;
 }
 .np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
+.np-upload-item__link:focus-visible,
 .np-upload-button-container:has(:focus-visible) {
   outline-width: 3px;
 }
-.np-upload-item__link a {
+.np-upload-item--link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-top: 1px solid transparent;
   border-radius: inherit;
 }
-.np-upload-item__link a:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
+.np-upload-item--link a:hover:before {
   display: none !important;
 }
-.np-upload-item__link a:hover:after {
+.np-upload-item--link a:hover:after {
   left: 0 !important;
   width: 100% !important;
 }
-.np-upload-item__link a:hover,
-.np-upload-item__link a:active {
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;

package/build/styles/uploadInput/uploadButton/UploadButton.css

@@ -37,3 +37,8 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-button .media {
   align-items: flex-start;
 }
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
+}