@popsure/dirty-swan 0.57.9 → 0.58.1

package/dist/cjs/lib/components/multiDropzone/utils/index.d.ts

@@ -1,5 +1,5 @@
-import { Accept, FileError } from "react-dropzone";
-import { AcceptType, TextOverrides, UploadStatus } from "../types";
+import { Accept, FileError, FileRejection } from 'react-dropzone';
+import { AcceptType, TextOverrides, UploadStatus } from '../types';
 export declare const getUploadStatus: (progress: number, error?: string) => UploadStatus;
 export declare const DOCUMENT_FILES_ACCEPT: Accept;
 export declare const IMAGE_FILES_ACCEPT: Accept;
@@ -11,3 +11,10 @@ export declare const getErrorMessage: ({ code, message }: FileError, { fileList,
     fileList?: string;
     maxSize?: number;
 }, textOverrides?: TextOverrides) => string;
+export declare const getStatusMessage: ({ acceptedFiles, filesRejected, fileList, maxSize, textOverrides, }: {
+    acceptedFiles: File[];
+    filesRejected: FileRejection[];
+    fileList?: string;
+    maxSize?: number;
+    textOverrides?: TextOverrides;
+}) => string;

package/dist/esm/{TableSection-a26ba0c5.js → TableSection-ebace923.js}

@@ -128,4 +128,4 @@ var TableSection = function (_a) {
 };
 
 export { TableSection as T, isBaseCell as i, useMediaQuery as u };
-//# sourceMappingURL=TableSection-a26ba0c5.js.map
+//# sourceMappingURL=TableSection-ebace923.js.map

package/dist/esm/{TableSection-a26ba0c5.js.map → TableSection-ebace923.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TableSection-a26ba0c5.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n  modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  if (typeof window === 'undefined') {\n    return {\n      initialValue: false,\n      queryString: '',\n    };\n  }\n\n  switch (breakpoint) {\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\n  );\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: tableCellData?.modalTitle || titleFromRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"TableSection-ebace923.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n  modalTitle?: ReactNode;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  if (typeof window === 'undefined') {\n    return {\n      initialValue: false,\n      queryString: '',\n    };\n  }\n\n  switch (breakpoint) {\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\n  );\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: tableCellData?.modalTitle || titleFromRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js

@@ -12,7 +12,7 @@ styleInject(css_248z);
 
 var TableInfoButton = function (_a) {
     var onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (jsx("button", { className: "p-btn--secondary ".concat(styles.button, " ").concat(className), type: "button", "data-testid": "ds-table-info-button", onClick: onClick, children: jsx(Info, { size: 20 }) }));
+    return (jsx("button", { className: "p-btn--secondary ".concat(styles.button, " ").concat(className), type: "button", "data-testid": "ds-table-info-button", onClick: onClick, "aria-label": "View more information", title: "View more information", children: jsx(Info, { size: 20 }) }));
 };
 
 export default TableInfoButton;

package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableInfoButton/index.tsx"],"sourcesContent":["import Info from '../../../icon/icons/Info';\nimport styles from './style.module.scss';\n\nconst TableInfoButton = ({\n  onClick,\n  className = '',\n}: {\n  onClick: () => void;\n  className?: string;\n}) => (\n  <button\n    className={`p-btn--secondary ${styles.button} ${className}`}\n    type=\"button\"\n    data-testid=\"ds-table-info-button\"\n    onClick={onClick}\n  >\n    <Info size={20} />\n  </button>\n);\n\nexport default TableInfoButton;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;IAGM,eAAe,GAAG,UAAC,EAMxB;QALC,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIV,QACJA,gBACE,SAAS,EAAE,2BAAoB,MAAM,CAAC,MAAM,cAAI,SAAS,CAAE,EAC3D,IAAI,EAAC,QAAQ,iBACD,sBAAsB,EAClC,OAAO,EAAE,OAAO,YAEhBA,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACX;AARL;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableInfoButton/index.tsx"],"sourcesContent":["import Info from '../../../icon/icons/Info';\nimport styles from './style.module.scss';\n\nconst TableInfoButton = ({\n  onClick,\n  className = '',\n}: {\n  onClick: () => void;\n  className?: string;\n}) => (\n  <button\n    className={`p-btn--secondary ${styles.button} ${className}`}\n    type=\"button\"\n    data-testid=\"ds-table-info-button\"\n    onClick={onClick}\n    aria-label=\"View more information\"\n    title=\"View more information\"\n  >\n    <Info size={20} />\n  </button>\n);\n\nexport default TableInfoButton;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;IAGM,eAAe,GAAG,UAAC,EAMxB;QALC,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIV,QACJA,gBACE,SAAS,EAAE,2BAAoB,MAAM,CAAC,MAAM,cAAI,SAAS,CAAE,EAC3D,IAAI,EAAC,QAAQ,iBACD,sBAAsB,EAClC,OAAO,EAAE,OAAO,gBACL,uBAAuB,EAClC,KAAK,EAAC,uBAAuB,YAE7BA,IAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACX;AAVL;;;;"}

package/dist/esm/components/input/checkbox/index.js

@@ -9,7 +9,7 @@ styleInject(css_248z);
 
 var Checkbox = function (_a) {
     var _b;
-    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames, _g = _a.fieldLegend, fieldLegend = _g === void 0 ? 'Select one or more options' : _g;
+    var options = _a.options, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, _d = _a.wide, wide = _d === void 0 ? false : _d, _e = _a.inlineLayout, inlineLayout = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? true : _f, classNamesObj = _a.classNames, fieldLegend = _a.fieldLegend;
     var hasNoneValue = Object.keys(options).includes('NONE');
     var handleOnChange = function (newValue) {
         if (value === null || value === void 0 ? void 0 : value.includes(newValue)) {
@@ -34,12 +34,15 @@ var Checkbox = function (_a) {
     var isCheckboxLabelObject = function (label) {
         return label.title !== undefined;
     };
+    var legend = fieldLegend !== null && fieldLegend !== void 0 ? fieldLegend : (Object.keys(options).length > 1
+        ? 'Select one or more options'
+        : 'You may select this option');
     return (jsxs("fieldset", { className: classNames(classNamesObj === null || classNamesObj === void 0 ? void 0 : classNamesObj.container, styles.container, 'd-flex gap8', (_b = {},
             _b[styles.narrow] = !wide,
             _b['fd-row'] = inlineLayout,
             _b['f-wrap'] = inlineLayout,
             _b['fd-column'] = !inlineLayout,
-            _b)), children: [jsx("legend", { className: "sr-only", children: fieldLegend }), entries.map(function (_a) {
+            _b)), children: [jsx("legend", { className: "sr-only", children: legend }), entries.map(function (_a) {
                 var currentValue = _a[0], label = _a[1];
                 var checked = value === null || value === void 0 ? void 0 : value.includes(currentValue);
                 var customIcon = label === null || label === void 0 ? void 0 : label.icon;

package/dist/esm/components/input/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n  fieldLegend = 'Select one or more options',\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  return (\n    <fieldset\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      <legend className=\"sr-only\">{fieldLegend}</legend>\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </fieldset>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: ReactNode;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, ReactNode | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  bordered?: Boolean;\n  classNames?: {\n    container?: string;\n    label?: string;\n    option?: string;\n  };\n  fieldLegend?: string;\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  bordered = true,\n  classNames: classNamesObj,\n  fieldLegend,\n}: CheckboxProps<ValueType> & {}) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value ? [...value, newValue] : [newValue];\n    onChange(newValues);\n  };\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    ReactNode | CheckboxWithDescription\n  ][];\n\n  const isCheckboxLabelObject = (\n    label: ReactNode | CheckboxWithDescription\n  ): label is CheckboxWithDescription => {\n    return (label as CheckboxWithDescription).title !== undefined;\n  };\n\n  const legend =\n    fieldLegend ??\n    (Object.keys(options).length > 1\n      ? 'Select one or more options'\n      : 'You may select this option');\n\n  return (\n    <fieldset\n      className={classNames(\n        classNamesObj?.container,\n        styles.container,\n        'd-flex gap8',\n        {\n          [styles.narrow]: !wide,\n          'fd-row': inlineLayout,\n          'f-wrap': inlineLayout,\n          'fd-column': !inlineLayout,\n        }\n      )}\n    >\n      <legend className=\"sr-only\">{legend}</legend>\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={classNamesObj?.option} key={currentValue}>\n            <input\n              className={classNames('p-checkbox', {\n                'p-checkbox--no-icon': customIcon,\n              })}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(classNamesObj?.label, 'p-label pr16', {\n                'p-label--bordered': bordered,\n                'jc-center': customIcon,\n                'fd-column': customIcon,\n              })}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && <div className=\"mt8\">{customIcon?.(checked)}</div>}\n\n              {isCheckboxLabelObject(label) ? (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              ) : (\n                label\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </fieldset>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/input/index.js

@@ -16,12 +16,14 @@ var Input = React__default.forwardRef(function (_a, ref) {
     return (jsxs("div", { className: "".concat(styles.container, " ").concat(className !== null && className !== void 0 ? className : ''), children: [label && !labelInsideInput && (jsx("label", { htmlFor: uniqueId, className: classNames('p-p', styles.label, (_b = {},
                     _b[styles['label--with-error']] = error,
                     _b['sr-only'] = hideLabel,
-                    _b)), children: label })), jsxs("div", { style: { position: 'relative' }, children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', (!label || labelInsideInput) && placeholder && placeholder.length > 0
+                    _b)), children: label })), jsxs("div", { style: { position: 'relative' }, children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', (!label || labelInsideInput) &&
+                            placeholder &&
+                            placeholder.length > 0
                             ? styles.input
                             : styles['input--no-placeholder'], (_c = {},
                             _c[styles['input--with-prefix']] = prefix,
                             _c[styles['input--with-inside-label']] = labelInsideInput,
-                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
+                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? "".concat(uniqueId, "-error") : undefined }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { id: "".concat(uniqueId, "-error"), className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
 });
 
 export { Input };

package/dist/esm/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n  error?: string | boolean;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n  labelInsideInput?: boolean;\n};\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      labelInsideInput = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && !labelInsideInput && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              (!label || labelInsideInput) && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              {\n                [styles['input--with-prefix']]: prefix, \n                [styles['input--with-inside-label']]: labelInsideInput\n              }\n            )}\n            placeholder={label || labelInsideInput ? placeholder : ' '}\n            disabled={disabled}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {(!label || labelInsideInput) && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {labelInsideInput ? label : placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB,KAAK,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BACjE,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,IACd,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WAAG,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YACvD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n    error?: string | boolean;\n    prefix?: string;\n    label?: string;\n    id?: string;\n    hideLabel?: boolean;\n    labelInsideInput?: boolean;\n  };\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      labelInsideInput = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && !labelInsideInput && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              (!label || labelInsideInput) &&\n                placeholder &&\n                placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              {\n                [styles['input--with-prefix']]: prefix,\n                [styles['input--with-inside-label']]: labelInsideInput,\n              }\n            )}\n            placeholder={label || labelInsideInput ? placeholder : ' '}\n            disabled={disabled}\n            aria-invalid={!!error}\n            aria-errormessage={error ? `${uniqueId}-error` : undefined}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {(!label || labelInsideInput) && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {labelInsideInput ? label : placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p\n            id={`${uniqueId}-error`}\n            className={`p-p--small tc-red-500 w100 ${styles.error}`}\n          >\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB;4BACzB,WAAW;4BACX,WAAW,CAAC,MAAM,GAAG,CAAC;8BACpB,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,uBACF,KAAK,GAAG,UAAG,QAAQ,WAAQ,GAAG,SAAS,IACtD,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WACE,EAAE,EAAE,UAAG,QAAQ,WAAQ,EACvB,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YAEtD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}

package/dist/esm/components/multiDropzone/UploadFileCell/index.js

@@ -4,18 +4,19 @@ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 import EyeVisionIcon from '../../icon/icons/EyeVision.js';
 import FileIcon from '../../icon/icons/File.js';
 import Trash2Icon from '../../icon/icons/Trash2.js';
+import { Button } from '../../button/index.js';
 import 'react';
 import '../../icon/IconWrapper/IconWrapper.js';
 import '../../../tslib.es6-a39f91fc.js';
 
-var css_248z = ".style-module_upload-file-cell__3nv5i {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 64px;\n  padding: 8px 16px;\n  border: 1px solid #d2d2d8;\n  border-radius: 8px;\n  background-color: white;\n  animation: style-module_appear-down__14rCV 0.6s;\n  animation-fill-mode: both;\n  animation-delay: 0s;\n}\n\n.style-module_upload-file-cell-error__3KcSe {\n  border-color: #e55454;\n  background-color: rgba(229, 84, 84, 0.2);\n}\n\n.style-module_cell-left-section__3Iv8c {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_icon__31Yuk {\n  margin: 0px;\n}\n\n.style-module_main-icon__335_Y {\n  margin-right: 16px;\n}\n\n.style-module_upload-display-text__3Rd68 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.style-module_progress-bar-container__2JCBO {\n  position: relative;\n}\n\n.style-module_progress-bar__1Rosf {\n  background-color: #f5f6fb;\n  border-radius: 10px;\n  height: 4px;\n}\n\n.style-module_progress-bar-filler__131fA {\n  background-color: #8e8cee;\n  border-radius: 10px;\n  height: 4px;\n  position: absolute;\n  bottom: 0;\n  transition: 1s ease;\n}\n\n.style-module_cell-right-section__dVWqJ {\n  display: flex;\n  justify-content: flex-end;\n  min-width: 32px;\n  margin-left: 16px;\n}\n\n.style-module_cell-right-section-complete__c0rHc {\n  min-width: 64px;\n}\n\n.style-module_view-icon__3UenG,\n.style-module_remove-icon__2FWBQ {\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  text-align: inherit;\n  outline: none;\n  box-shadow: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n.style-module_remove-icon__2FWBQ {\n  margin-left: 16px;\n}\n\n.style-module_disabled__s-DR1 {\n  pointer-events: none;\n  cursor: default;\n  opacity: 0.3;\n}\n\n@keyframes style-module_appear-down__14rCV {\n  from {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
-var styles = {"upload-file-cell":"style-module_upload-file-cell__3nv5i","appear-down":"style-module_appear-down__14rCV","upload-file-cell-error":"style-module_upload-file-cell-error__3KcSe","cell-left-section":"style-module_cell-left-section__3Iv8c","icon":"style-module_icon__31Yuk","main-icon":"style-module_main-icon__335_Y","upload-display-text":"style-module_upload-display-text__3Rd68","progress-bar-container":"style-module_progress-bar-container__2JCBO","progress-bar":"style-module_progress-bar__1Rosf","progress-bar-filler":"style-module_progress-bar-filler__131fA","cell-right-section":"style-module_cell-right-section__dVWqJ","cell-right-section-complete":"style-module_cell-right-section-complete__c0rHc","view-icon":"style-module_view-icon__3UenG","remove-icon":"style-module_remove-icon__2FWBQ","disabled":"style-module_disabled__s-DR1"};
+var css_248z = ".style-module_upload-file-cell__3nv5i {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 64px;\n  padding: 8px 16px;\n  border: 1px solid #d2d2d8;\n  border-radius: 8px;\n  background-color: white;\n  animation: style-module_appear-down__14rCV 0.6s;\n  animation-fill-mode: both;\n  animation-delay: 0s;\n}\n\n.style-module_upload-file-cell-error__3KcSe {\n  border-color: #e55454;\n  background-color: rgba(229, 84, 84, 0.2);\n}\n\n.style-module_cell-left-section__3Iv8c {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_main-icon__335_Y {\n  margin-right: 16px;\n}\n\n.style-module_upload-display-text__3Rd68 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.style-module_progress-bar-container__2JCBO {\n  position: relative;\n}\n\n.style-module_progress-bar__1Rosf {\n  background-color: #f5f6fb;\n  border-radius: 10px;\n  height: 4px;\n}\n\n.style-module_progress-bar-filler__131fA {\n  background-color: #8e8cee;\n  border-radius: 10px;\n  height: 4px;\n  position: absolute;\n  bottom: 0;\n  transition: 1s ease;\n}\n\n.style-module_cell-right-section__dVWqJ {\n  display: flex;\n}\n\n.style-module_cell-right-section-complete__c0rHc {\n  min-width: 64px;\n}\n\n.style-module_button__xo5tR {\n  width: 32px;\n}\n.style-module_button__xo5tR div span span {\n  min-width: 24px !important;\n  height: 24px !important;\n}\n.style-module_button__xo5tR:focus-visible {\n  outline: 2px solid #26262e;\n  border-radius: 2px;\n  outline-offset: 2px;\n}\n\n@keyframes style-module_appear-down__14rCV {\n  from {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
+var styles = {"upload-file-cell":"style-module_upload-file-cell__3nv5i","appear-down":"style-module_appear-down__14rCV","upload-file-cell-error":"style-module_upload-file-cell-error__3KcSe","cell-left-section":"style-module_cell-left-section__3Iv8c","main-icon":"style-module_main-icon__335_Y","upload-display-text":"style-module_upload-display-text__3Rd68","progress-bar-container":"style-module_progress-bar-container__2JCBO","progress-bar":"style-module_progress-bar__1Rosf","progress-bar-filler":"style-module_progress-bar-filler__131fA","cell-right-section":"style-module_cell-right-section__dVWqJ","cell-right-section-complete":"style-module_cell-right-section-complete__c0rHc","button":"style-module_button__xo5tR"};
 styleInject(css_248z);
 
 var UploadFileCell = function (_a) {
-    var _b, _c, _d;
+    var _b, _c;
     var uploadStatus = _a.uploadStatus, file = _a.file, onRemoveFile = _a.onRemoveFile, uploading = _a.uploading;
-    var id = file.id, error = file.error, name = file.name, progress = file.progress, previewUrl = file.previewUrl, _e = file.showLoadingSpinner, showLoadingSpinner = _e === void 0 ? false : _e, _f = file.showProgressBar, showProgressBar = _f === void 0 ? true : _f;
+    var id = file.id, error = file.error, name = file.name, progress = file.progress, previewUrl = file.previewUrl, _d = file.showLoadingSpinner, showLoadingSpinner = _d === void 0 ? false : _d, _e = file.showProgressBar, showProgressBar = _e === void 0 ? true : _e;
     var isComplete = uploadStatus === 'COMPLETE';
     var isUploading = uploadStatus === 'UPLOADING';
     var hasError = uploadStatus === 'ERROR';
@@ -33,9 +34,7 @@ var UploadFileCell = function (_a) {
             _b[styles['upload-file-cell-error']] = hasError,
             _b)), children: [jsxs("div", { className: "w100 ".concat(styles['cell-left-section']), children: [jsx(FileIcon, { className: classNames("".concat(styles['main-icon'], " ").concat(styles.icon)), color: mapFileIconColor[uploadStatus], size: 24 }), jsxs("div", { className: "w100", children: [jsx("div", { className: "p-p ".concat(styles['upload-display-text']), title: displayText, children: displayText }), isUploading && showProgressBar && (jsxs("div", { className: "mt8 w100 ".concat(styles['progress-bar-container']), children: [jsx("div", { className: "".concat(styles['progress-bar']) }), jsx("div", { "data-testid": "ds-filecell-progressbar", className: "".concat(styles['progress-bar-filler']), style: { width: "".concat(progress, "%") } })] }))] })] }), jsx("div", { className: classNames(styles['cell-right-section'], (_c = {},
                     _c[styles['cell-right-section-complete']] = isComplete,
-                    _c)), children: isUploading ? (jsx("div", { className: styles.spinner, children: showLoadingSpinner && (jsx("div", { className: "ds-spinner ds-spinner__m", "data-testid": "ds-filecell-spinner" })) })) : (jsxs(Fragment, { children: [isComplete && (jsx("a", { className: styles['view-icon'], href: previewUrl, target: "_blank", rel: "noopener noreferrer", children: jsx(EyeVisionIcon, { color: 'grey-500', size: 24, className: styles.icon }) })), onRemoveFile && (jsx("button", { type: "button", onClick: function () { return onRemoveFile(id); }, className: classNames(styles['remove-icon'], (_d = {},
-                                _d[styles.disabled] = uploading,
-                                _d)), "data-testid": "remove-button", children: jsx(Trash2Icon, { color: hasError ? 'red-500' : 'grey-500', size: 24, className: styles.icon }) }))] })) })] }));
+                    _c)), children: isUploading ? (jsx("div", { className: styles.spinner, children: showLoadingSpinner && (jsx("div", { className: "ds-spinner ds-spinner__m", "data-testid": "ds-filecell-spinner" })) })) : (jsxs(Fragment, { children: [isComplete && (jsx(Button, { as: "a", href: previewUrl, target: "_blank", rel: "noopener noreferrer", hideLabel: true, variant: "filledWhite", className: classNames('mr16', styles.button), leftIcon: jsx(EyeVisionIcon, { noMargin: true, color: 'grey-500', size: 24 }), children: "Preview file" })), onRemoveFile && (jsx(Button, { onClick: function () { return onRemoveFile(id); }, disabled: uploading, "data-testid": "remove-button", className: styles.button, leftIcon: jsx(Trash2Icon, { color: hasError ? 'red-500' : 'grey-500', size: 24, noMargin: true }), hideLabel: true, variant: "filledWhite", children: "Delete file" }))] })) })] }));
 };
 
 export default UploadFileCell;

package/dist/esm/components/multiDropzone/UploadFileCell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/multiDropzone/UploadFileCell/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport styles from './style.module.scss';\nimport { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';\nimport { Color } from '../../../models/styles';\nimport { UploadStatus, UploadedFile } from '../types';\n\ninterface Props {\n  uploadStatus: UploadStatus;\n  file: UploadedFile;\n  onRemoveFile?: (id: string) => void;\n  uploading: boolean;\n}\n\nconst UploadFileCell: React.FC<Props> = ({\n  uploadStatus,\n  file,\n  onRemoveFile,\n  uploading,\n}) => {\n  const {\n    id,\n    error,\n    name,\n    progress,\n    previewUrl,\n    showLoadingSpinner = false,\n    showProgressBar = true,\n  } = file;\n\n  const isComplete = uploadStatus === 'COMPLETE';\n  const isUploading = uploadStatus === 'UPLOADING';\n  const hasError = uploadStatus === 'ERROR';\n\n  const mapFileIconColor: { [k in UploadStatus]: Color } = {\n    UPLOADING: 'purple-500',\n    COMPLETE: 'grey-500',\n    ERROR: 'red-500',\n  };\n\n  const displayText = {\n    UPLOADING: 'Uploading...',\n    COMPLETE: name,\n    ERROR: error ?? 'Something went wrong. Try uploading again.',\n  }[uploadStatus];\n\n  return (\n    <div\n      className={classnames(`mt8 ${styles['upload-file-cell']}`, {\n        [styles['upload-file-cell-error']]: hasError,\n      })}\n    >\n      <div className={`w100 ${styles['cell-left-section']}`}>\n        <FileIcon\n          className={classnames(`${styles['main-icon']} ${styles.icon}`)}\n          color={mapFileIconColor[uploadStatus]}\n          size={24}\n        />\n        <div className=\"w100\">\n          <div\n            className={`p-p ${styles['upload-display-text']}`}\n            title={displayText}\n          >\n            {displayText}\n          </div>\n\n          {isUploading && showProgressBar && (\n            <div className={`mt8 w100 ${styles['progress-bar-container']}`}>\n              <div className={`${styles['progress-bar']}`} />\n              <div\n                data-testid=\"ds-filecell-progressbar\"\n                className={`${styles['progress-bar-filler']}`}\n                style={{ width: `${progress}%` }}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        className={classnames(styles['cell-right-section'], {\n          [styles['cell-right-section-complete']]: isComplete,\n        })}\n      >\n        {isUploading ? (\n          <div className={styles.spinner}>\n            {showLoadingSpinner && (\n              <div\n                className=\"ds-spinner ds-spinner__m\"\n                data-testid=\"ds-filecell-spinner\"\n              />\n            )}\n          </div>\n        ) : (\n          <>\n            {isComplete && (\n              <a\n                className={styles['view-icon']}\n                href={previewUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                <EyeVisionIcon\n                  color={'grey-500'}\n                  size={24}\n                  className={styles.icon}\n                />\n              </a>\n            )}\n\n            {onRemoveFile && (\n              <button\n                type=\"button\"\n                onClick={() => onRemoveFile(id)}\n                className={classnames(styles['remove-icon'], {\n                  [styles.disabled]: uploading,\n                })}\n                data-testid=\"remove-button\"\n              >\n                <Trash2Icon\n                  color={hasError ? 'red-500' : 'grey-500'}\n                  size={24}\n                  className={styles.icon}\n                />\n              </button>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadFileCell;\n"],"names":["_jsxs","classnames","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/multiDropzone/UploadFileCell/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport styles from './style.module.scss';\nimport { FileIcon, Trash2Icon, EyeVisionIcon } from '../../icon/icons';\nimport { Color } from '../../../models/styles';\nimport { UploadStatus, UploadedFile } from '../types';\nimport { Button } from '../../button';\n\ninterface Props {\n  uploadStatus: UploadStatus;\n  file: UploadedFile;\n  onRemoveFile?: (id: string) => void;\n  uploading: boolean;\n}\n\nconst UploadFileCell: React.FC<Props> = ({\n  uploadStatus,\n  file,\n  onRemoveFile,\n  uploading,\n}) => {\n  const {\n    id,\n    error,\n    name,\n    progress,\n    previewUrl,\n    showLoadingSpinner = false,\n    showProgressBar = true,\n  } = file;\n\n  const isComplete = uploadStatus === 'COMPLETE';\n  const isUploading = uploadStatus === 'UPLOADING';\n  const hasError = uploadStatus === 'ERROR';\n\n  const mapFileIconColor: { [k in UploadStatus]: Color } = {\n    UPLOADING: 'purple-500',\n    COMPLETE: 'grey-500',\n    ERROR: 'red-500',\n  };\n\n  const displayText = {\n    UPLOADING: 'Uploading...',\n    COMPLETE: name,\n    ERROR: error ?? 'Something went wrong. Try uploading again.',\n  }[uploadStatus];\n\n  return (\n    <div\n      className={classnames(`mt8 ${styles['upload-file-cell']}`, {\n        [styles['upload-file-cell-error']]: hasError,\n      })}\n    >\n      <div className={`w100 ${styles['cell-left-section']}`}>\n        <FileIcon\n          className={classnames(`${styles['main-icon']} ${styles.icon}`)}\n          color={mapFileIconColor[uploadStatus]}\n          size={24}\n        />\n        <div className=\"w100\">\n          <div\n            className={`p-p ${styles['upload-display-text']}`}\n            title={displayText}\n          >\n            {displayText}\n          </div>\n\n          {isUploading && showProgressBar && (\n            <div className={`mt8 w100 ${styles['progress-bar-container']}`}>\n              <div className={`${styles['progress-bar']}`} />\n              <div\n                data-testid=\"ds-filecell-progressbar\"\n                className={`${styles['progress-bar-filler']}`}\n                style={{ width: `${progress}%` }}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        className={classnames(styles['cell-right-section'], {\n          [styles['cell-right-section-complete']]: isComplete,\n        })}\n      >\n        {isUploading ? (\n          <div className={styles.spinner}>\n            {showLoadingSpinner && (\n              <div\n                className=\"ds-spinner ds-spinner__m\"\n                data-testid=\"ds-filecell-spinner\"\n              />\n            )}\n          </div>\n        ) : (\n          <>\n            {isComplete && (\n              <Button\n                as=\"a\"\n                href={previewUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                hideLabel\n                variant=\"filledWhite\"\n                className={classnames('mr16', styles.button)}\n                leftIcon={\n                  <EyeVisionIcon noMargin color={'grey-500'} size={24} />\n                }\n              >\n                Preview file\n              </Button>\n            )}\n\n            {onRemoveFile && (\n              <Button\n                onClick={() => onRemoveFile(id)}\n                disabled={uploading}\n                data-testid=\"remove-button\"\n                className={styles.button}\n                leftIcon={\n                  <Trash2Icon\n                    color={hasError ? 'red-500' : 'grey-500'}\n                    size={24}\n                    noMargin\n                  />\n                }\n                hideLabel\n                variant=\"filledWhite\"\n              >\n                Delete file\n              </Button>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default UploadFileCell;\n"],"names":["_jsxs","classnames","_jsx"],"mappings":"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"}

package/dist/esm/components/multiDropzone/index.js

@@ -12,6 +12,7 @@ import '../icon/IconWrapper/IconWrapper.js';
 import '../icon/icons/EyeVision.js';
 import '../icon/icons/File.js';
 import '../icon/icons/Trash2.js';
+import '../button/index.js';
 
 var propTypes = {exports: {}};
 
@@ -2731,7 +2732,7 @@ function reducer(state, action) {
 
 function noop() {}
 
-var css_248z = ".style-module_container__Uyltc {\n  background-color: transparent;\n}\n\n.style-module_dropzoneContainer__yZoGP {\n  border: 1px dashed var(--ds-primary-500);\n  padding: 32px 0;\n  background-color: white;\n  transition: all 0.6s ease-in-out;\n}\n\n.style-module_img__11JI8 {\n  vertical-align: middle;\n  margin-right: 8px;\n  height: 18px;\n}\n\n.style-module_textInline__2F21z {\n  display: inline-flex;\n}\n\n.style-module_dropzoneContainer__yZoGP:focus {\n  outline: none;\n}\n\n.style-module_dropzoneContainer__yZoGP:hover {\n  background-color: var(--ds-primary-100);\n  transition: 0.5s ease;\n}\n\n.style-module_dropzoneContainerDisabled__1X3gP {\n  pointer-events: none;\n  opacity: 0.4;\n}";
+var css_248z = ".style-module_container__Uyltc {\n  background-color: transparent;\n}\n\n.style-module_dropzoneContainer__yZoGP {\n  border: 1px dashed var(--ds-primary-500);\n  padding: 32px 0;\n  background-color: white;\n  transition: all 0.6s ease-in-out;\n}\n.style-module_dropzoneContainer__yZoGP:focus-visible {\n  outline: 2px solid #26262e;\n  border-radius: 2px;\n  outline-offset: 2px;\n}\n.style-module_dropzoneContainer__yZoGP:hover {\n  background-color: var(--ds-primary-100);\n  transition: 0.5s ease;\n}\n\n.style-module_img__11JI8 {\n  vertical-align: middle;\n  margin-right: 8px;\n  height: 18px;\n}\n\n.style-module_textInline__2F21z {\n  display: inline-flex;\n}\n\n.style-module_dropzoneContainerDisabled__1X3gP {\n  pointer-events: none;\n  opacity: 0.4;\n}";
 var styles = {"container":"style-module_container__Uyltc","dropzoneContainer":"style-module_dropzoneContainer__yZoGP","img":"style-module_img__11JI8","textInline":"style-module_textInline__2F21z","dropzoneContainerDisabled":"style-module_dropzoneContainerDisabled__1X3gP"};
 styleInject(css_248z);
 
@@ -2799,13 +2800,13 @@ var IMAGE_FILES_ACCEPT = formatMimeType(IMAGE_FILES);
 var VIDEO_FILES_ACCEPT = formatMimeType(VIDEO_FILES);
 var getFormattedAcceptObject = function (accept) {
     if (accept === void 0) { accept = {}; }
-    if (accept === "document") {
+    if (accept === 'document') {
         return DOCUMENT_FILES_ACCEPT;
     }
-    if (accept === "image") {
+    if (accept === 'image') {
         return IMAGE_FILES_ACCEPT;
     }
-    if (accept === "video") {
+    if (accept === 'video') {
         return VIDEO_FILES_ACCEPT;
     }
     if (accept) {
@@ -2813,11 +2814,13 @@ var getFormattedAcceptObject = function (accept) {
     }
     return __assign(__assign(__assign({}, DOCUMENT_FILES_ACCEPT), IMAGE_FILES_ACCEPT), VIDEO_FILES_ACCEPT);
 };
-var formatAcceptFileList = function (accept) { return (Object.values(accept)
-    .reduce(function (acc, value) { return __spreadArray$1(__spreadArray$1([], acc, true), value, true); }, [])
-    .join(", ")
-    .replace(/\./g, '')
-    .toUpperCase()); };
+var formatAcceptFileList = function (accept) {
+    return Object.values(accept)
+        .reduce(function (acc, value) { return __spreadArray$1(__spreadArray$1([], acc, true), value, true); }, [])
+        .join(', ')
+        .replace(/\./g, '')
+        .toUpperCase();
+};
 var getPlaceholder = function (textOverrides, accept, maxSize) {
     var maxSizePlaceholder = maxSize && maxSize > 0
         ? "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.sizeUpToText) || 'up to', " ").concat(formatBytes(maxSize))
@@ -2825,26 +2828,48 @@ var getPlaceholder = function (textOverrides, accept, maxSize) {
     var isAcceptString = typeof accept === 'string' &&
         ['video', 'image', 'document'].includes(accept);
     var defaultPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) || 'Supports images, videos and documents', " ").concat(maxSizePlaceholder);
-    var acceptPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) || "Supports ".concat(accept, "s ").concat(maxSizePlaceholder));
+    var acceptPlaceholder = "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsTextShort) ||
+        "Supports ".concat(accept, "s ").concat(maxSizePlaceholder));
     return isAcceptString ? acceptPlaceholder : defaultPlaceholder;
 };
 var getErrorMessage = function (_a, _b, textOverrides) {
     var code = _a.code, message = _a.message;
-    var _c = _b.fileList, fileList = _c === void 0 ? "" : _c, maxSize = _b.maxSize;
+    var _c = _b.fileList, fileList = _c === void 0 ? '' : _c, maxSize = _b.maxSize;
     switch (code) {
         case ErrorCode.FileInvalidType:
-            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTypeError) || "File type must be", " ").concat(fileList);
+            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTypeError) || 'File type must be', " ").concat(fileList);
         case ErrorCode.FileTooLarge:
-            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTooLargeError) || "File is too large. It must be less than", " ").concat(formatBytes(maxSize || 0), ".");
+            return "".concat((textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.fileTooLargeError) ||
+                'File is too large. It must be less than', " ").concat(formatBytes(maxSize || 0), ".");
         default:
             return message;
     }
 };
+var getStatusMessage = function (_a) {
+    var acceptedFiles = _a.acceptedFiles, filesRejected = _a.filesRejected, fileList = _a.fileList, maxSize = _a.maxSize, textOverrides = _a.textOverrides;
+    var message = '';
+    if (acceptedFiles.length > 0) {
+        var fileNames = acceptedFiles.map(function (file) { return file.name; }).join(', ');
+        message += "File".concat(acceptedFiles.length > 1 ? 's' : '', " uploaded: ").concat(fileNames, ". ");
+    }
+    if (filesRejected.length > 0) {
+        var rejectionMessages = filesRejected.map(function (rejection) {
+            var firstError = rejection.errors[0];
+            var rejectionMessage = getErrorMessage(firstError, { fileList: fileList, maxSize: maxSize }, textOverrides);
+            return "Could not upload ".concat(rejection.file.name, ": ").concat(rejectionMessage.endsWith('.')
+                ? rejectionMessage
+                : "".concat(rejectionMessage, "."));
+        });
+        message += rejectionMessages.join('');
+    }
+    return message.trim();
+};
 
 var MultiDropzone = function (_a) {
     var _b;
     var uploadedFiles = _a.uploadedFiles, onFileSelect = _a.onFileSelect, onRemoveFile = _a.onRemoveFile, uploading = _a.uploading, _c = _a.isCondensed, isCondensed = _c === void 0 ? false : _c, accept = _a.accept, _d = _a.maxFiles, maxFiles = _d === void 0 ? 0 : _d, maxSize = _a.maxSize, textOverrides = _a.textOverrides;
     var _e = useState([]), errors = _e[0], setErrors = _e[1];
+    var _f = useState(''), statusMessage = _f[0], setStatusMessage = _f[1];
     var formattedAccept = getFormattedAcceptObject(accept);
     var fileList = formatAcceptFileList(formattedAccept);
     var placeholder = getPlaceholder(textOverrides, accept, maxSize);
@@ -2857,6 +2882,14 @@ var MultiDropzone = function (_a) {
     };
     var onDrop = useCallback(function (acceptedFiles, filesRejected) {
         onFileSelect(acceptedFiles);
+        var messageForScreenReader = getStatusMessage({
+            acceptedFiles: acceptedFiles,
+            filesRejected: filesRejected,
+            fileList: fileList,
+            maxSize: maxSize,
+            textOverrides: textOverrides,
+        });
+        setStatusMessage(messageForScreenReader);
         setErrors(function (previousErrors) { return __spreadArray$1(__spreadArray$1([], previousErrors, true), filesRejected.map(function (_a) {
             var errors = _a.errors;
             return ({
@@ -2865,15 +2898,15 @@ var MultiDropzone = function (_a) {
             });
         }), true); });
     }, [fileList, maxSize, onFileSelect, textOverrides]);
-    var _f = useDropzone({
+    var _g = useDropzone({
         accept: formattedAccept,
         disabled: uploading,
         maxSize: maxSize,
         onDrop: onDrop,
-    }), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
+    }), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps;
     return (jsxs("div", { className: styles.container, children: [jsxs("div", __assign({ className: classNames("w100 ta-center br8 c-pointer ".concat(styles.dropzoneContainer), (_b = {},
                     _b[styles['dropzoneContainerDisabled']] = uploading,
-                    _b)) }, getRootProps(), { children: [jsx("input", __assign({ "data-testid": "ds-drop-input" }, getInputProps())), jsx(UploadCloudIcon, { className: isCondensed ? styles.img : '', size: isCondensed ? 24 : 64, color: 'purple-500' }), jsx("div", { className: "p-h4 mt8 d-block c-pointer ".concat(isCondensed ? styles.textInline : ''), children: uploading
+                    _b)) }, getRootProps(), { children: [jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: statusMessage }), jsx("input", __assign({ "data-testid": "ds-drop-input" }, getInputProps())), jsx(UploadCloudIcon, { className: isCondensed ? styles.img : '', size: isCondensed ? 24 : 64, color: 'purple-500' }), jsx("div", { className: "p-h4 mt8 d-block c-pointer ".concat(isCondensed ? styles.textInline : ''), children: uploading
                             ? (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.currentlyUploadingText) ||
                                 'Please wait while uploading file...'
                             : (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.instructionsText) || 'Choose file or drag & drop' }), jsx("div", { className: "p-p--small tc-grey-500", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.supportsText) || placeholder })] })), errors.map(function (_a) {
@@ -2884,7 +2917,8 @@ var MultiDropzone = function (_a) {
                         name: message,
                         progress: 0,
                     }, onRemoveFile: function () { return removeError(id); }, uploading: false }, id));
-            }), uploadedFiles.length > 0 && (jsx("div", { className: "w100 mt16", children: uploadedFiles.map(function (file) { return (jsx(UploadFileCell, __assign({ uploadStatus: getUploadStatus(file.progress, file.error), file: file }, (!onRemoveFile ? {} : { onRemoveFile: onRemoveFile }), { uploading: uploading }), file.id)); }) })), jsx(AnimateHeight, { duration: 300, height: isOverMaxFiles ? 'auto' : 0, children: jsx("p", { className: "tc-red-500 mt16", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) || "You can upload maximum ".concat(maxFiles, " files.") }) })] }));
+            }), uploadedFiles.length > 0 && (jsx("div", { className: "w100 mt16", children: uploadedFiles.map(function (file) { return (jsx(UploadFileCell, __assign({ uploadStatus: getUploadStatus(file.progress, file.error), file: file }, (!onRemoveFile ? {} : { onRemoveFile: onRemoveFile }), { uploading: uploading }), file.id)); }) })), jsx(AnimateHeight, { duration: 300, height: isOverMaxFiles ? 'auto' : 0, children: jsx("p", { className: "tc-red-500 mt16", children: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.tooManyFilesError) ||
+                        "You can upload maximum ".concat(maxFiles, " files.") }) })] }));
 };
 
 export { MultiDropzone };