@veeqo/ui 12.5.0 → 13.0.0

package/dist/components/UploadedFile/UploadedFile.js

@@ -0,0 +1,72 @@
+import React__default from 'react';
+import { theme } from '../../theme/index.js';
+import { Button } from '../Button/Button.js';
+import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { Text } from '../Text/Text.js';
+import { Image } from '../Image/Image.js';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { Error } from '../../hoc/withLabels/styled.js';
+import { usePreviewImage } from './hooks/usePreviewImage/usePreviewImage.js';
+import uploadedFileStyles from './UploadedFile.module.scss.js';
+import { useFileErrorMessages } from './hooks/useFileErrorMessages/useFileErrorMessages.js';
+import { getFileSizeString } from '../UploadFile/utils/getFileSizeString/getFileSizeString.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+
+const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileTypes, isLoading, }) => {
+    const { previewSrc, shouldShowPreview } = usePreviewImage({ file });
+    const { errorMessages, hasCriticalErrors } = useFileErrorMessages({
+        file,
+        maxBytes,
+        fileTypes,
+    });
+    const fileSizeCopy = getFileSizeString({ maxBytes: (file === null || file === undefined ? undefined : file.size) || 0, format, baseString: '' });
+    if (isLoading) {
+        return React__default.createElement(Skeleton, { height: "40px", "aria-label": "Loading file" });
+    }
+    if (!file)
+        return null;
+    const RemoveButton = (React__default.createElement(Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.createElement(CrossIcon, null), "aria-label": `Remove file ${file.name}`, disabled: disabled }));
+    const ErrorMessages = hasCriticalErrors && (React__default.createElement(FlexRow, { alignItems: "flex-start" },
+        React__default.createElement(CriticalIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.secondary.red.base }),
+        React__default.createElement("div", { className: uploadedFileStyles.singleLineWrapper },
+            React__default.createElement(Error, { className: uploadedFileStyles.singleLineTextWithoutFlex }, errorMessages.criticalErrors.map((error, index, array) => {
+                const isNotLast = !!(array.length > index + 1);
+                return `${error.errorMessage}${isNotLast ? ', ' : ''}`;
+            })))));
+    if (!shouldShowPreview) {
+        return (React__default.createElement("div", { className: hasCriticalErrors
+                ? uploadedFileStyles.uploadedFileContainerCriticalError
+                : uploadedFileStyles.uploadedFileContainer },
+            React__default.createElement(FlexRow, { justifyContent: "space-between", alignItems: "center" },
+                React__default.createElement(FlexCol, { style: { flex: 1, minWidth: 0 } },
+                    React__default.createElement("div", { className: uploadedFileStyles.standardFileTextWrapper },
+                        React__default.createElement(Text, { className: uploadedFileStyles.singleLineText, variant: "body", style: {
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            } }, file.name),
+                        React__default.createElement(Text, { variant: "body", className: uploadedFileStyles.fileSizeText, style: { color: theme.colors.neutral.ink.light } }, fileSizeCopy)),
+                    ErrorMessages),
+                onRemoveFile && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', marginLeft: 12 } }, RemoveButton)))));
+    }
+    return (React__default.createElement("div", { className: hasCriticalErrors
+            ? uploadedFileStyles.uploadedFileContainerCriticalError
+            : uploadedFileStyles.uploadedFileContainer },
+        React__default.createElement(FlexRow, { style: { flexWrap: 'nowrap' }, justifyContent: "space-between" },
+            React__default.createElement(FlexCol, null,
+                React__default.createElement(FlexRow, { alignItems: "center", style: { flex: 1, minWidth: 0, gap: theme.sizes.base }, flexWrap: "nowrap" },
+                    React__default.createElement(Image, { className: uploadedFileStyles.previewImage, height: "44", width: "44", src: previewSrc }),
+                    React__default.createElement("div", { className: uploadedFileStyles.singleLineWrapper },
+                        React__default.createElement(Text, { className: uploadedFileStyles.singleLineTextWithoutFlex, variant: "body" }, file === null || file === undefined ? undefined : file.name),
+                        React__default.createElement(Text, { variant: "body", className: uploadedFileStyles.singleLineTextWithoutFlex, style: {
+                                color: theme.colors.neutral.ink.light,
+                            } }, fileSizeCopy))),
+                ErrorMessages),
+            onRemoveFile && RemoveButton)));
+};
+
+export { UploadedFile };
+//# sourceMappingURL=UploadedFile.js.map

package/dist/components/UploadedFile/UploadedFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.js","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n  file?: File | null;\n  onRemoveFile?: (file: File) => void;\n  disabled?: boolean;\n  format: FileSizeUnit;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n  isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n  file,\n  onRemoveFile,\n  disabled,\n  format,\n  maxBytes,\n  fileTypes,\n  isLoading,\n}: UploadedFileProps) => {\n  const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n  const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n    file,\n    maxBytes,\n    fileTypes,\n  });\n\n  const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n  if (isLoading) {\n    return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n  }\n\n  if (!file) return null;\n\n  const RemoveButton = (\n    <Button\n      size=\"sm\"\n      variant=\"flat\"\n      onClick={() => onRemoveFile && onRemoveFile(file)}\n      iconSlot={<CrossIcon />}\n      aria-label={`Remove file ${file.name}`}\n      disabled={disabled}\n    />\n  );\n\n  const ErrorMessages = hasCriticalErrors && (\n    <FlexRow alignItems=\"flex-start\">\n      <CriticalIcon\n        width={theme.sizes.base}\n        height={theme.sizes.base}\n        color={theme.colors.secondary.red.base}\n      />\n      <div className={uploadedFileStyles.singleLineWrapper}>\n        <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n          {errorMessages.criticalErrors.map((error, index, array) => {\n            const isNotLast = !!(array.length > index + 1);\n            return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n          })}\n        </Error>\n      </div>\n    </FlexRow>\n  );\n\n  if (!shouldShowPreview) {\n    return (\n      <div\n        className={\n          hasCriticalErrors\n            ? uploadedFileStyles.uploadedFileContainerCriticalError\n            : uploadedFileStyles.uploadedFileContainer\n        }\n      >\n        <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n          <FlexCol style={{ flex: 1, minWidth: 0 }}>\n            <div className={uploadedFileStyles.standardFileTextWrapper}>\n              <Text\n                className={uploadedFileStyles.singleLineText}\n                variant=\"body\"\n                style={{\n                  minWidth: 0,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                }}\n              >\n                {file.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.fileSizeText}\n                style={{ color: theme.colors.neutral.ink.light }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n            {ErrorMessages}\n          </FlexCol>\n          {onRemoveFile && (\n            <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n              {RemoveButton}\n            </div>\n          )}\n        </FlexRow>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={\n        hasCriticalErrors\n          ? uploadedFileStyles.uploadedFileContainerCriticalError\n          : uploadedFileStyles.uploadedFileContainer\n      }\n    >\n      <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n        <FlexCol>\n          <FlexRow\n            alignItems=\"center\"\n            style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n            flexWrap=\"nowrap\"\n          >\n            <Image\n              className={uploadedFileStyles.previewImage}\n              height=\"44\"\n              width=\"44\"\n              src={previewSrc}\n            />\n            <div className={uploadedFileStyles.singleLineWrapper}>\n              <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n                {file?.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.singleLineTextWithoutFlex}\n                style={{\n                  color: theme.colors.neutral.ink.light,\n                }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n          </FlexRow>\n          {ErrorMessages}\n        </FlexCol>\n        {onRemoveFile && RemoveButton}\n      </FlexRow>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;MA0Ba,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACS,KAAI;AACtB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAAC;QAChE,IAAI;QACJ,QAAQ;QACR,SAAS;AACV,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,IAAI,KAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAE7F,IAAA,IAAI,SAAS,EAAE;QACb,OAAOA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,MAAM,EAAC,MAAM,EAAA,YAAA,EAAY,cAAc,EAAA,CAAG;AAC5D;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,MAAM,YAAY,IAChBA,6BAAC,MAAM,EAAA,EACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAM,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,EACjD,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,OAAG,EACX,YAAA,EAAA,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,EAAE,EACtC,QAAQ,EAAE,QAAQ,EAAA,CAClB,CACH;IAED,MAAM,aAAa,GAAG,iBAAiB,KACrCA,6BAAC,OAAO,EAAA,EAAC,UAAU,EAAC,YAAY,EAAA;AAC9B,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,CAAA;AACF,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,iBAAiB,EAAA;YAClDA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAE,kBAAkB,CAAC,yBAAyB,IAC3D,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,KAAI;AACxD,gBAAA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;AAC9C,gBAAA,OAAO,CAAG,EAAA,KAAK,CAAC,YAAY,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,EAAE;AACxD,aAAC,CAAC,CACI,CACJ,CACE,CACX;IAED,IAAI,CAAC,iBAAiB,EAAE;AACtB,QAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EACP;kBACI,kBAAkB,CAAC;kBACnB,kBAAkB,CAAC,qBAAqB,EAAA;YAG9CA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,EAAA;AACzD,gBAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;AACtC,oBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,uBAAuB,EAAA;AACxD,wBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,kBAAkB,CAAC,cAAc,EAC5C,OAAO,EAAC,MAAM,EACd,KAAK,EAAE;AACL,gCAAA,QAAQ,EAAE,CAAC;AACX,gCAAA,QAAQ,EAAE,QAAQ;AAClB,gCAAA,YAAY,EAAE,UAAU;AACxB,gCAAA,UAAU,EAAE,QAAQ;6BACrB,EAEA,EAAA,IAAI,CAAC,IAAI,CACL;AACP,wBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,kBAAkB,CAAC,YAAY,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,EAE/C,EAAA,YAAY,CACR,CACH;AACL,oBAAA,aAAa,CACN;gBACT,YAAY,KACXA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,EAAA,EAClE,YAAY,CACT,CACP,CACO,CACN;AAET;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EACP;cACI,kBAAkB,CAAC;cACnB,kBAAkB,CAAC,qBAAqB,EAAA;AAG9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,EAAC,eAAe,EAAA;AACpE,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EACtD,QAAQ,EAAC,QAAQ,EAAA;AAEjB,oBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,SAAS,EAAE,kBAAkB,CAAC,YAAY,EAC1C,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,UAAU,EACf,CAAA;AACF,oBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,iBAAiB,EAAA;AAClD,wBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,kBAAkB,CAAC,yBAAyB,EAAE,OAAO,EAAC,MAAM,EAAA,EAC1E,IAAI,KAAJ,IAAA,IAAA,IAAI,6BAAJ,IAAI,CAAE,IAAI,CACN;AACP,wBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,kBAAkB,CAAC,yBAAyB,EACvD,KAAK,EAAE;gCACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;6BACtC,EAEA,EAAA,YAAY,CACR,CACH,CACE;AACT,gBAAA,aAAa,CACN;AACT,YAAA,YAAY,IAAI,YAAY,CACrB,CACN;AAEV;;;;"}

package/dist/components/UploadedFile/UploadedFile.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._uploadedFileContainer_17uzv_1 {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._uploadedFileContainerCriticalError_17uzv_7 {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._singleLineText_17uzv_13 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n._singleLineTextWithoutFlex_17uzv_21 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n._fileSizeText_17uzv_29 {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n._previewImage_17uzv_35 img {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--sizes-xs);\n}\n\n._singleLineWrapper_17uzv_40 {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n._standardFileTextWrapper_17uzv_46 {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}");
+var uploadedFileStyles = {"uploadedFileContainer":"_uploadedFileContainer_17uzv_1","uploadedFileContainerCriticalError":"_uploadedFileContainerCriticalError_17uzv_7","singleLineText":"_singleLineText_17uzv_13","singleLineTextWithoutFlex":"_singleLineTextWithoutFlex_17uzv_21","fileSizeText":"_fileSizeText_17uzv_29","previewImage":"_previewImage_17uzv_35","singleLineWrapper":"_singleLineWrapper_17uzv_40","standardFileTextWrapper":"_standardFileTextWrapper_17uzv_46"};
+
+module.exports = uploadedFileStyles;
+//# sourceMappingURL=UploadedFile.module.scss.cjs.map

package/dist/components/UploadedFile/UploadedFile.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.module.scss.cjs","sources":["../../../src/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.uploadedFileContainerCriticalError {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.singleLineText {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n.singleLineTextWithoutFlex {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n.fileSizeText {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n.previewImage {\n  img {\n    border: 1px solid var(--colors-neutral-ink-lightest);\n    border-radius: var(--sizes-xs);\n  }\n}\n\n.singleLineWrapper {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n.standardFileTextWrapper {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,iiCAAA;AACA,yBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,oCAAA,CAAA,6CAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,2BAAA,CAAA,qCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,yBAAA,CAAA,mCAAA;;;;"}

package/dist/components/UploadedFile/UploadedFile.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._uploadedFileContainer_17uzv_1 {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._uploadedFileContainerCriticalError_17uzv_7 {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n._singleLineText_17uzv_13 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n._singleLineTextWithoutFlex_17uzv_21 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n._fileSizeText_17uzv_29 {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n._previewImage_17uzv_35 img {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--sizes-xs);\n}\n\n._singleLineWrapper_17uzv_40 {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n._standardFileTextWrapper_17uzv_46 {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}");
+var uploadedFileStyles = {"uploadedFileContainer":"_uploadedFileContainer_17uzv_1","uploadedFileContainerCriticalError":"_uploadedFileContainerCriticalError_17uzv_7","singleLineText":"_singleLineText_17uzv_13","singleLineTextWithoutFlex":"_singleLineTextWithoutFlex_17uzv_21","fileSizeText":"_fileSizeText_17uzv_29","previewImage":"_previewImage_17uzv_35","singleLineWrapper":"_singleLineWrapper_17uzv_40","standardFileTextWrapper":"_standardFileTextWrapper_17uzv_46"};
+
+export { uploadedFileStyles as default };
+//# sourceMappingURL=UploadedFile.module.scss.js.map

package/dist/components/UploadedFile/UploadedFile.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.module.scss.js","sources":["../../../src/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n  border: 1px solid var(--colors-neutral-ink-lightest);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.uploadedFileContainerCriticalError {\n  border: 1px solid var(--colors-secondary-red-base);\n  border-radius: var(--radius-base);\n  padding: var(--sizes-3);\n}\n\n.singleLineText {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 0 1 80%;\n  min-width: 0;\n}\n\n.singleLineTextWithoutFlex {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: none;\n  min-width: 0;\n}\n\n.fileSizeText {\n  white-space: nowrap;\n  flex: 0 0 20%;\n  text-align: right;\n}\n\n.previewImage {\n  img {\n    border: 1px solid var(--colors-neutral-ink-lightest);\n    border-radius: var(--sizes-xs);\n  }\n}\n\n.singleLineWrapper {\n  display: grid;\n  min-width: 0;\n  flex: 1;\n}\n\n.standardFileTextWrapper {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--sizes-xs);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,iiCAAA;AACA,yBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,oCAAA,CAAA,6CAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,2BAAA,CAAA,qCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,yBAAA,CAAA,mCAAA;;;;"}

package/dist/components/UploadedFile/hooks/useFileErrorMessages/index.d.ts

@@ -0,0 +1 @@
+export { useFileErrorMessages } from './useFileErrorMessages';

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var convertFileTypeToAcceptedFileType = require('../../utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.cjs');
+var constants = require('../../../UploadFile/constants.cjs');
+
+const useFileErrorMessages = ({ maxBytes, fileTypes, file }) => {
+    const errorMessages = React.useMemo(() => {
+        if (!file)
+            return { criticalErrors: [] };
+        const extension = convertFileTypeToAcceptedFileType.convertFileTypeToAcceptedFileType(file.type);
+        const isTypeValid = fileTypes.includes(extension);
+        const hasInvalidFormat = !isTypeValid;
+        const hasExceededMaxSize = file.size > maxBytes;
+        const errors = { criticalErrors: [] };
+        if (hasExceededMaxSize) {
+            errors.criticalErrors.push({
+                errorType: constants.ErrorType.critical,
+                errorMessage: constants.CriticalErrorMessages.FILE_IS_TOO_BIG,
+            });
+        }
+        if (hasInvalidFormat) {
+            errors.criticalErrors.push({
+                errorType: constants.ErrorType.critical,
+                errorMessage: constants.CriticalErrorMessages.INVALID_FORMAT,
+            });
+        }
+        return errors;
+    }, [file, fileTypes, maxBytes]);
+    const hasCriticalErrors = !!errorMessages.criticalErrors.length;
+    return {
+        hasCriticalErrors,
+        errorMessages,
+    };
+};
+
+exports.useFileErrorMessages = useFileErrorMessages;
+//# sourceMappingURL=useFileErrorMessages.cjs.map

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileErrorMessages.cjs","sources":["../../../../../src/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { convertFileTypeToAcceptedFileType } from '../../utils/convertFileTypeToAcceptedFileType';\nimport { AcceptedFileTypes, CriticalErrorMessages, ErrorType } from '../../../UploadFile/constants';\n\ntype UploadFileErrors = {\n  criticalErrors: Array<UploadFileError>;\n};\n\ntype UploadFileError = {\n  errorType: ErrorType;\n  errorMessage: string;\n};\n\ntype UseFileErrorMessagesProps = {\n  file?: File | null;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const useFileErrorMessages = ({ maxBytes, fileTypes, file }: UseFileErrorMessagesProps) => {\n  const errorMessages = useMemo(() => {\n    if (!file) return { criticalErrors: [] };\n\n    const extension = convertFileTypeToAcceptedFileType(file.type);\n    const isTypeValid = (fileTypes as string[]).includes(extension);\n    const hasInvalidFormat = !isTypeValid;\n\n    const hasExceededMaxSize = file.size > maxBytes;\n\n    const errors: UploadFileErrors = { criticalErrors: [] };\n    if (hasExceededMaxSize) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.FILE_IS_TOO_BIG,\n      });\n    }\n    if (hasInvalidFormat) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.INVALID_FORMAT,\n      });\n    }\n    return errors;\n  }, [file, fileTypes, maxBytes]);\n\n  const hasCriticalErrors = !!errorMessages.criticalErrors.length;\n\n  return {\n    hasCriticalErrors,\n    errorMessages,\n  };\n};\n"],"names":["useMemo","convertFileTypeToAcceptedFileType","ErrorType","CriticalErrorMessages"],"mappings":";;;;;;AAmBO,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAA6B,KAAI;AAC/F,IAAA,MAAM,aAAa,GAAGA,aAAO,CAAC,MAAK;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE;QAExC,MAAM,SAAS,GAAGC,mEAAiC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9D,MAAM,WAAW,GAAI,SAAsB,CAAC,QAAQ,CAAC,SAAS,CAAC;AAC/D,QAAA,MAAM,gBAAgB,GAAG,CAAC,WAAW;AAErC,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ;AAE/C,QAAA,MAAM,MAAM,GAAqB,EAAE,cAAc,EAAE,EAAE,EAAE;AACvD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAEC,mBAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAEC,+BAAqB,CAAC,eAAe;AACpD,aAAA,CAAC;AACH;AACD,QAAA,IAAI,gBAAgB,EAAE;AACpB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAED,mBAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAEC,+BAAqB,CAAC,cAAc;AACnD,aAAA,CAAC;AACH;AACD,QAAA,OAAO,MAAM;KACd,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE/B,MAAM,iBAAiB,GAAG,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM;IAE/D,OAAO;QACL,iBAAiB;QACjB,aAAa;KACd;AACH;;;;"}

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.d.ts

@@ -0,0 +1,18 @@
+import { AcceptedFileTypes, ErrorType } from '../../../UploadFile/constants';
+type UploadFileErrors = {
+    criticalErrors: Array<UploadFileError>;
+};
+type UploadFileError = {
+    errorType: ErrorType;
+    errorMessage: string;
+};
+type UseFileErrorMessagesProps = {
+    file?: File | null;
+    maxBytes: number;
+    fileTypes: Array<AcceptedFileTypes>;
+};
+export declare const useFileErrorMessages: ({ maxBytes, fileTypes, file }: UseFileErrorMessagesProps) => {
+    hasCriticalErrors: boolean;
+    errorMessages: UploadFileErrors;
+};
+export {};

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { convertFileTypeToAcceptedFileType } from '../../utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.js';
+import { ErrorType, CriticalErrorMessages } from '../../../UploadFile/constants.js';
+
+const useFileErrorMessages = ({ maxBytes, fileTypes, file }) => {
+    const errorMessages = useMemo(() => {
+        if (!file)
+            return { criticalErrors: [] };
+        const extension = convertFileTypeToAcceptedFileType(file.type);
+        const isTypeValid = fileTypes.includes(extension);
+        const hasInvalidFormat = !isTypeValid;
+        const hasExceededMaxSize = file.size > maxBytes;
+        const errors = { criticalErrors: [] };
+        if (hasExceededMaxSize) {
+            errors.criticalErrors.push({
+                errorType: ErrorType.critical,
+                errorMessage: CriticalErrorMessages.FILE_IS_TOO_BIG,
+            });
+        }
+        if (hasInvalidFormat) {
+            errors.criticalErrors.push({
+                errorType: ErrorType.critical,
+                errorMessage: CriticalErrorMessages.INVALID_FORMAT,
+            });
+        }
+        return errors;
+    }, [file, fileTypes, maxBytes]);
+    const hasCriticalErrors = !!errorMessages.criticalErrors.length;
+    return {
+        hasCriticalErrors,
+        errorMessages,
+    };
+};
+
+export { useFileErrorMessages };
+//# sourceMappingURL=useFileErrorMessages.js.map

package/dist/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileErrorMessages.js","sources":["../../../../../src/components/UploadedFile/hooks/useFileErrorMessages/useFileErrorMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { convertFileTypeToAcceptedFileType } from '../../utils/convertFileTypeToAcceptedFileType';\nimport { AcceptedFileTypes, CriticalErrorMessages, ErrorType } from '../../../UploadFile/constants';\n\ntype UploadFileErrors = {\n  criticalErrors: Array<UploadFileError>;\n};\n\ntype UploadFileError = {\n  errorType: ErrorType;\n  errorMessage: string;\n};\n\ntype UseFileErrorMessagesProps = {\n  file?: File | null;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const useFileErrorMessages = ({ maxBytes, fileTypes, file }: UseFileErrorMessagesProps) => {\n  const errorMessages = useMemo(() => {\n    if (!file) return { criticalErrors: [] };\n\n    const extension = convertFileTypeToAcceptedFileType(file.type);\n    const isTypeValid = (fileTypes as string[]).includes(extension);\n    const hasInvalidFormat = !isTypeValid;\n\n    const hasExceededMaxSize = file.size > maxBytes;\n\n    const errors: UploadFileErrors = { criticalErrors: [] };\n    if (hasExceededMaxSize) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.FILE_IS_TOO_BIG,\n      });\n    }\n    if (hasInvalidFormat) {\n      errors.criticalErrors.push({\n        errorType: ErrorType.critical,\n        errorMessage: CriticalErrorMessages.INVALID_FORMAT,\n      });\n    }\n    return errors;\n  }, [file, fileTypes, maxBytes]);\n\n  const hasCriticalErrors = !!errorMessages.criticalErrors.length;\n\n  return {\n    hasCriticalErrors,\n    errorMessages,\n  };\n};\n"],"names":[],"mappings":";;;;AAmBO,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAA6B,KAAI;AAC/F,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;AACjC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE;QAExC,MAAM,SAAS,GAAG,iCAAiC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9D,MAAM,WAAW,GAAI,SAAsB,CAAC,QAAQ,CAAC,SAAS,CAAC;AAC/D,QAAA,MAAM,gBAAgB,GAAG,CAAC,WAAW;AAErC,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ;AAE/C,QAAA,MAAM,MAAM,GAAqB,EAAE,cAAc,EAAE,EAAE,EAAE;AACvD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAE,SAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAE,qBAAqB,CAAC,eAAe;AACpD,aAAA,CAAC;AACH;AACD,QAAA,IAAI,gBAAgB,EAAE;AACpB,YAAA,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC;gBACzB,SAAS,EAAE,SAAS,CAAC,QAAQ;gBAC7B,YAAY,EAAE,qBAAqB,CAAC,cAAc;AACnD,aAAA,CAAC;AACH;AACD,QAAA,OAAO,MAAM;KACd,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE/B,MAAM,iBAAiB,GAAG,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM;IAE/D,OAAO;QACL,iBAAiB;QACjB,aAAa;KACd;AACH;;;;"}

package/dist/components/UploadedFile/hooks/usePreviewImage/index.d.ts

@@ -0,0 +1 @@
+export { usePreviewImage } from './usePreviewImage';

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var isImageType = require('../../utils/isImageType/isImageType.cjs');
+
+const usePreviewImage = ({ file }) => {
+    const [previewSrc, setPreviewSrc] = React.useState('');
+    React.useEffect(() => {
+        if (!file) {
+            setPreviewSrc('');
+            return undefined;
+        }
+        if (!isImageType.isImageType(file)) {
+            setPreviewSrc('');
+            return undefined;
+        }
+        const fileReader = new FileReader();
+        fileReader.onload = (event) => {
+            var _a;
+            const imageUrl = (_a = event.target) === null || _a === undefined ? undefined : _a.result;
+            setPreviewSrc(String(imageUrl));
+        };
+        fileReader.readAsDataURL(file);
+        return () => {
+            fileReader.abort();
+        };
+    }, [file]);
+    const shouldShowPreview = file ? isImageType.isImageType(file) : false;
+    return {
+        previewSrc,
+        shouldShowPreview,
+    };
+};
+
+exports.usePreviewImage = usePreviewImage;
+//# sourceMappingURL=usePreviewImage.cjs.map

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewImage.cjs","sources":["../../../../../src/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { isImageType } from '../../utils/isImageType';\n\ntype UsePreviewImageProps = {\n  file?: File | null;\n};\n\nexport const usePreviewImage = ({ file }: UsePreviewImageProps) => {\n  const [previewSrc, setPreviewSrc] = useState('');\n\n  useEffect(() => {\n    if (!file) {\n      setPreviewSrc('');\n      return undefined;\n    }\n\n    if (!isImageType(file)) {\n      setPreviewSrc('');\n      return undefined;\n    }\n\n    const fileReader = new FileReader();\n\n    fileReader.onload = (event) => {\n      const imageUrl = event.target?.result;\n      setPreviewSrc(String(imageUrl));\n    };\n\n    fileReader.readAsDataURL(file);\n\n    return () => {\n      fileReader.abort();\n    };\n  }, [file]);\n\n  const shouldShowPreview = file ? isImageType(file) : false;\n\n  return {\n    previewSrc,\n    shouldShowPreview,\n  };\n};\n"],"names":["useState","useEffect","isImageType"],"mappings":";;;;;MAOa,eAAe,GAAG,CAAC,EAAE,IAAI,EAAwB,KAAI;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC;IAEhDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,IAAI,EAAE;YACT,aAAa,CAAC,EAAE,CAAC;AACjB,YAAA,OAAO,SAAS;AACjB;AAED,QAAA,IAAI,CAACC,uBAAW,CAAC,IAAI,CAAC,EAAE;YACtB,aAAa,CAAC,EAAE,CAAC;AACjB,YAAA,OAAO,SAAS;AACjB;AAED,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE;AAEnC,QAAA,UAAU,CAAC,MAAM,GAAG,CAAC,KAAK,KAAI;;YAC5B,MAAM,QAAQ,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM;AACrC,YAAA,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjC,SAAC;AAED,QAAA,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC;AAE9B,QAAA,OAAO,MAAK;YACV,UAAU,CAAC,KAAK,EAAE;AACpB,SAAC;AACH,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AAEV,IAAA,MAAM,iBAAiB,GAAG,IAAI,GAAGA,uBAAW,CAAC,IAAI,CAAC,GAAG,KAAK;IAE1D,OAAO;QACL,UAAU;QACV,iBAAiB;KAClB;AACH;;;;"}

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.d.ts

@@ -0,0 +1,8 @@
+type UsePreviewImageProps = {
+    file?: File | null;
+};
+export declare const usePreviewImage: ({ file }: UsePreviewImageProps) => {
+    previewSrc: string;
+    shouldShowPreview: boolean;
+};
+export {};

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import { isImageType } from '../../utils/isImageType/isImageType.js';
+
+const usePreviewImage = ({ file }) => {
+    const [previewSrc, setPreviewSrc] = useState('');
+    useEffect(() => {
+        if (!file) {
+            setPreviewSrc('');
+            return undefined;
+        }
+        if (!isImageType(file)) {
+            setPreviewSrc('');
+            return undefined;
+        }
+        const fileReader = new FileReader();
+        fileReader.onload = (event) => {
+            var _a;
+            const imageUrl = (_a = event.target) === null || _a === undefined ? undefined : _a.result;
+            setPreviewSrc(String(imageUrl));
+        };
+        fileReader.readAsDataURL(file);
+        return () => {
+            fileReader.abort();
+        };
+    }, [file]);
+    const shouldShowPreview = file ? isImageType(file) : false;
+    return {
+        previewSrc,
+        shouldShowPreview,
+    };
+};
+
+export { usePreviewImage };
+//# sourceMappingURL=usePreviewImage.js.map

package/dist/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviewImage.js","sources":["../../../../../src/components/UploadedFile/hooks/usePreviewImage/usePreviewImage.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { isImageType } from '../../utils/isImageType';\n\ntype UsePreviewImageProps = {\n  file?: File | null;\n};\n\nexport const usePreviewImage = ({ file }: UsePreviewImageProps) => {\n  const [previewSrc, setPreviewSrc] = useState('');\n\n  useEffect(() => {\n    if (!file) {\n      setPreviewSrc('');\n      return undefined;\n    }\n\n    if (!isImageType(file)) {\n      setPreviewSrc('');\n      return undefined;\n    }\n\n    const fileReader = new FileReader();\n\n    fileReader.onload = (event) => {\n      const imageUrl = event.target?.result;\n      setPreviewSrc(String(imageUrl));\n    };\n\n    fileReader.readAsDataURL(file);\n\n    return () => {\n      fileReader.abort();\n    };\n  }, [file]);\n\n  const shouldShowPreview = file ? isImageType(file) : false;\n\n  return {\n    previewSrc,\n    shouldShowPreview,\n  };\n};\n"],"names":[],"mappings":";;;MAOa,eAAe,GAAG,CAAC,EAAE,IAAI,EAAwB,KAAI;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAEhD,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,IAAI,EAAE;YACT,aAAa,CAAC,EAAE,CAAC;AACjB,YAAA,OAAO,SAAS;AACjB;AAED,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE;YACtB,aAAa,CAAC,EAAE,CAAC;AACjB,YAAA,OAAO,SAAS;AACjB;AAED,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE;AAEnC,QAAA,UAAU,CAAC,MAAM,GAAG,CAAC,KAAK,KAAI;;YAC5B,MAAM,QAAQ,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM;AACrC,YAAA,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjC,SAAC;AAED,QAAA,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC;AAE9B,QAAA,OAAO,MAAK;YACV,UAAU,CAAC,KAAK,EAAE;AACpB,SAAC;AACH,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AAEV,IAAA,MAAM,iBAAiB,GAAG,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,KAAK;IAE1D,OAAO;QACL,UAAU;QACV,iBAAiB;KAClB;AACH;;;;"}

package/dist/components/UploadedFile/index.d.ts

@@ -0,0 +1 @@
+export { UploadedFile } from './UploadedFile';

package/dist/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const convertFileTypeToAcceptedFileType = (fileType) => {
+    if (typeof fileType !== 'string' || !fileType.includes('/')) {
+        throw new Error('Invalid MIME type');
+    }
+    // Remove any MIME parameter (e.g., ";charset=UTF-8")
+    const [typePart] = fileType.split(';');
+    const [group, type] = typePart.trim().split('/');
+    if (!group || !type) {
+        throw new Error('Invalid MIME type');
+    }
+    return `.${type}`;
+};
+
+exports.convertFileTypeToAcceptedFileType = convertFileTypeToAcceptedFileType;
+//# sourceMappingURL=convertFileTypeToAcceptedFileType.cjs.map

package/dist/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"convertFileTypeToAcceptedFileType.cjs","sources":["../../../../../src/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.ts"],"sourcesContent":["export const convertFileTypeToAcceptedFileType = (fileType: string) => {\n  if (typeof fileType !== 'string' || !fileType.includes('/')) {\n    throw new Error('Invalid MIME type');\n  }\n  // Remove any MIME parameter (e.g., \";charset=UTF-8\")\n  const [typePart] = fileType.split(';');\n  const [group, type] = typePart.trim().split('/');\n  if (!group || !type) {\n    throw new Error('Invalid MIME type');\n  }\n  return `.${type}`;\n};\n"],"names":[],"mappings":";;AAAa,MAAA,iCAAiC,GAAG,CAAC,QAAgB,KAAI;AACpE,IAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC3D,QAAA,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC;AACrC;;IAED,MAAM,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC;AACtC,IAAA,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC;AAChD,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;AACnB,QAAA,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC;AACrC;IACD,OAAO,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;AACnB;;;;"}

package/dist/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.d.ts

@@ -0,0 +1 @@
+export declare const convertFileTypeToAcceptedFileType: (fileType: string) => string;

package/dist/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.js

@@ -0,0 +1,15 @@
+const convertFileTypeToAcceptedFileType = (fileType) => {
+    if (typeof fileType !== 'string' || !fileType.includes('/')) {
+        throw new Error('Invalid MIME type');
+    }
+    // Remove any MIME parameter (e.g., ";charset=UTF-8")
+    const [typePart] = fileType.split(';');
+    const [group, type] = typePart.trim().split('/');
+    if (!group || !type) {
+        throw new Error('Invalid MIME type');
+    }
+    return `.${type}`;
+};
+
+export { convertFileTypeToAcceptedFileType };
+//# sourceMappingURL=convertFileTypeToAcceptedFileType.js.map

package/dist/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"convertFileTypeToAcceptedFileType.js","sources":["../../../../../src/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/convertFileTypeToAcceptedFileType.ts"],"sourcesContent":["export const convertFileTypeToAcceptedFileType = (fileType: string) => {\n  if (typeof fileType !== 'string' || !fileType.includes('/')) {\n    throw new Error('Invalid MIME type');\n  }\n  // Remove any MIME parameter (e.g., \";charset=UTF-8\")\n  const [typePart] = fileType.split(';');\n  const [group, type] = typePart.trim().split('/');\n  if (!group || !type) {\n    throw new Error('Invalid MIME type');\n  }\n  return `.${type}`;\n};\n"],"names":[],"mappings":"AAAa,MAAA,iCAAiC,GAAG,CAAC,QAAgB,KAAI;AACpE,IAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC3D,QAAA,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC;AACrC;;IAED,MAAM,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC;AACtC,IAAA,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC;AAChD,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;AACnB,QAAA,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC;AACrC;IACD,OAAO,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;AACnB;;;;"}

package/dist/components/UploadedFile/utils/convertFileTypeToAcceptedFileType/index.d.ts

@@ -0,0 +1 @@
+export { convertFileTypeToAcceptedFileType } from './convertFileTypeToAcceptedFileType';

package/dist/components/UploadedFile/utils/isImageType/index.d.ts

@@ -0,0 +1 @@
+export { isImageType } from './isImageType';

package/dist/components/UploadedFile/utils/isImageType/isImageType.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const isImageType = (file) => {
+    if (!file)
+        return false;
+    const fileType = file.type.split('/');
+    if (fileType[0] === 'image') {
+        return true;
+    }
+    return false;
+};
+
+exports.isImageType = isImageType;
+//# sourceMappingURL=isImageType.cjs.map

package/dist/components/UploadedFile/utils/isImageType/isImageType.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isImageType.cjs","sources":["../../../../../src/components/UploadedFile/utils/isImageType/isImageType.ts"],"sourcesContent":["export const isImageType = (file?: File | null) => {\n  if (!file) return false;\n\n  const fileType = file.type.split('/');\n\n  if (fileType[0] === 'image') {\n    return true;\n  }\n\n  return false;\n};\n"],"names":[],"mappings":";;AAAa,MAAA,WAAW,GAAG,CAAC,IAAkB,KAAI;AAChD,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,KAAK;IAEvB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AAErC,IAAA,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE;AAC3B,QAAA,OAAO,IAAI;AACZ;AAED,IAAA,OAAO,KAAK;AACd;;;;"}

package/dist/components/UploadedFile/utils/isImageType/isImageType.d.ts

@@ -0,0 +1 @@
+export declare const isImageType: (file?: File | null) => boolean;

package/dist/components/UploadedFile/utils/isImageType/isImageType.js

@@ -0,0 +1,12 @@
+const isImageType = (file) => {
+    if (!file)
+        return false;
+    const fileType = file.type.split('/');
+    if (fileType[0] === 'image') {
+        return true;
+    }
+    return false;
+};
+
+export { isImageType };
+//# sourceMappingURL=isImageType.js.map

package/dist/components/UploadedFile/utils/isImageType/isImageType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isImageType.js","sources":["../../../../../src/components/UploadedFile/utils/isImageType/isImageType.ts"],"sourcesContent":["export const isImageType = (file?: File | null) => {\n  if (!file) return false;\n\n  const fileType = file.type.split('/');\n\n  if (fileType[0] === 'image') {\n    return true;\n  }\n\n  return false;\n};\n"],"names":[],"mappings":"AAAa,MAAA,WAAW,GAAG,CAAC,IAAkB,KAAI;AAChD,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,KAAK;IAEvB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AAErC,IAAA,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE;AAC3B,QAAA,OAAO,IAAI;AACZ;AAED,IAAA,OAAO,KAAK;AACd;;;;"}

package/dist/components/ViewsContainer/ViewsContainer.cjs

@@ -28,7 +28,8 @@ const ViewsContainer = React__default.default.forwardRef(({ children, className,
         isLoadingMoreViews,
     });
     const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;
-    return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module[`appearance-${appearance}`], className]), justifyContent: "between", flexWrap: "nowrap", style: style },
+    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;
+    return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module[`appearance-${appearance}`], className]), justifyContent: "space-between", flexWrap: "nowrap", style: style },
         React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module.viewsWrapper, compact && ViewsContainer_module.compact]), ref: viewsRef, id: "views", role: "tablist", gap: "sm", flexWrap: "nowrap" },
             children,
             isLoadingMoreViews && (React__default.default.createElement(React__default.default.Fragment, null,
@@ -39,8 +40,8 @@ const ViewsContainer = React__default.default.forwardRef(({ children, className,
                 ViewsContainer_module.buttonGroup,
                 showCustomMenuButton && ViewsContainer_module.customMenuButton,
             ]) },
-            React__default.default.createElement("div", { className: form_module.inputGroup },
-                (!leftDisabled || !rightDisabled) && (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement("div", { className: shouldShowNavigationArrows ? form_module.inputGroup : undefined },
+                shouldShowNavigationArrows && (React__default.default.createElement(React__default.default.Fragment, null,
                     React__default.default.createElement(Button.Button, { id: "left-arrow", className: ViewsContainer_module.scrollButton, iconSlot: React__default.default.createElement(LeftArrowIcon.ReactComponent, { color: index.theme.colors.neutral.ink.base }), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
                     React__default.default.createElement(Button.Button, { id: "right-arrow", className: ViewsContainer_module.scrollButton, iconSlot: React__default.default.createElement(RightArrowIcon.ReactComponent, { color: index.theme.colors.neutral.ink.base }), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
                 !menuButtonSlot && !!onClickMenu && (React__default.default.createElement(Button.Button, { className: ViewsContainer_module.menuButton, iconSlot: React__default.default.createElement(ThreeDotsIcon.ThreeDotsIcon, { color: index.theme.colors.neutral.ink.base }), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))),

package/dist/components/ViewsContainer/ViewsContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={formStyles.inputGroup}>\n            {(!leftDisabled || !rightDisabled) && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React","useRef","useSetScrollPosition","FlexRow","buildClassnames","styles","Skeleton","formStyles","Button","LeftArrowIcon","theme","RightArrowIcon","ThreeDotsIcon"],"mappings":"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"}
+{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"space-between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n            {shouldShowNavigationArrows && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React","useRef","useSetScrollPosition","FlexRow","buildClassnames","styles","Skeleton","formStyles","Button","LeftArrowIcon","theme","RightArrowIcon","ThreeDotsIcon"],"mappings":"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"}

package/dist/components/ViewsContainer/ViewsContainer.js

@@ -22,7 +22,8 @@ const ViewsContainer = React__default.forwardRef(({ children, className, style,
         isLoadingMoreViews,
     });
     const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;
-    return (React__default.createElement(FlexRow, { className: buildClassnames([styles[`appearance-${appearance}`], className]), justifyContent: "between", flexWrap: "nowrap", style: style },
+    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;
+    return (React__default.createElement(FlexRow, { className: buildClassnames([styles[`appearance-${appearance}`], className]), justifyContent: "space-between", flexWrap: "nowrap", style: style },
         React__default.createElement(FlexRow, { className: buildClassnames([styles.viewsWrapper, compact && styles.compact]), ref: viewsRef, id: "views", role: "tablist", gap: "sm", flexWrap: "nowrap" },
             children,
             isLoadingMoreViews && (React__default.createElement(React__default.Fragment, null,
@@ -33,8 +34,8 @@ const ViewsContainer = React__default.forwardRef(({ children, className, style,
                 styles.buttonGroup,
                 showCustomMenuButton && styles.customMenuButton,
             ]) },
-            React__default.createElement("div", { className: formStyles.inputGroup },
-                (!leftDisabled || !rightDisabled) && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: shouldShowNavigationArrows ? formStyles.inputGroup : undefined },
+                shouldShowNavigationArrows && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(Button, { id: "left-arrow", className: styles.scrollButton, iconSlot: React__default.createElement(LeftArrowIcon, { color: theme.colors.neutral.ink.base }), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
                     React__default.createElement(Button, { id: "right-arrow", className: styles.scrollButton, iconSlot: React__default.createElement(RightArrowIcon, { color: theme.colors.neutral.ink.base }), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
                 !menuButtonSlot && !!onClickMenu && (React__default.createElement(Button, { className: styles.menuButton, iconSlot: React__default.createElement(ThreeDotsIcon, { color: theme.colors.neutral.ink.base }), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))),

package/dist/components/ViewsContainer/ViewsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={formStyles.inputGroup}>\n            {(!leftDisabled || !rightDisabled) && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAca,MAAA,cAAc,GAAGA,cAAK,CAAC,UAAU,CAC5C,CACE,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,SAAS,EACtB,cAAc,GACK,EACrB,OAA+B,KAC7B;AACF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAqC;IACjF,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,GAC/E,oBAAoB,CAAC;AACnB,QAAA,YAAY,EAAE,QAAQ;QACtB,QAAQ;QACR,YAAY;QACZ,gBAAgB;QAChB,kBAAkB;AACnB,KAAA,CAAC;IAEJ,MAAM,oBAAoB,GAAG,CAAC,WAAW,IAAI,CAAC,CAAC,cAAc;AAE7D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EAC3E,cAAc,EAAC,SAAS,EACxB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EAC5E,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,GAAG,EAAC,IAAI,EACR,QAAQ,EAAC,QAAQ,EAAA;YAEhB,QAAQ;AACR,YAAA,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;gBACvCA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CACtC,CACJ,CACO;QAEVA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,MAAM,CAAC,WAAW;gBAClB,oBAAoB,IAAI,MAAM,CAAC,gBAAgB;aAChD,CAAC,EAAA;AAEF,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAA;AAClC,gBAAA,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,MAC/BA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,oBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,EAAE,EAAC,YAAY,EACf,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,EACjE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,wBAAwB,EACnC,CAAA;oBACFA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,EAAE,EAAC,aAAa,EAChB,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAI,EAClE,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,yBAAyB,EACpC,CAAA,CACD,CACJ;AACA,gBAAA,CAAC,cAAc,IAAI,CAAC,CAAC,WAAW,KAC/BA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI,EACjE,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EACT,YAAA,EAAA,WAAW,EACP,eAAA,EAAA,gBAAgB,mBAChB,gBAAgB,EAAA,eAAA,EAChB,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EACtD,GAAG,EAAE,OAAO,EAAA,CACZ,CACH,CACG;YACL,cAAc,CACP,CACF;AAEd,CAAC;;;;"}
+{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"space-between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n            {shouldShowNavigationArrows && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._viewsWrapper_lffdu_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n}\n._viewsWrapper_lffdu_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_lffdu_1._compact_lffdu_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_lffdu_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_lffdu_20 {\n  background-color: white !important;\n}\n._menuButton_lffdu_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_lffdu_27 {\n  background-color: white !important;\n}\n._scrollButton_lffdu_27:disabled {\n  background-color: white !important;\n}\n._scrollButton_lffdu_27:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_lffdu_27:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_lffdu_40 {\n  padding-right: var(--sizes-sm);\n}");
-var styles = {"viewsWrapper":"_viewsWrapper_lffdu_1","compact":"_compact_lffdu_12","appearance-primary":"_appearance-primary_lffdu_16","menuButton":"_menuButton_lffdu_20","scrollButton":"_scrollButton_lffdu_27","buttonGroup":"_buttonGroup_lffdu_40"};
+___$insertStyle("._viewsWrapper_1ht5y_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n}\n._viewsWrapper_1ht5y_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1ht5y_1._compact_1ht5y_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_1ht5y_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1ht5y_20 {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n}\n._menuButton_1ht5y_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1ht5y_28 {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1ht5y_28:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1ht5y_41 {\n  padding-right: var(--sizes-sm);\n}");
+var styles = {"viewsWrapper":"_viewsWrapper_1ht5y_1","compact":"_compact_1ht5y_12","appearance-primary":"_appearance-primary_1ht5y_16","menuButton":"_menuButton_1ht5y_20","scrollButton":"_scrollButton_1ht5y_28","buttonGroup":"_buttonGroup_1ht5y_41"};
 
 module.exports = styles;
 //# sourceMappingURL=ViewsContainer.module.scss.cjs.map