@veeqo/ui 13.2.4 → 13.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.cjs +1 -1
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.cjs.map +1 -1
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.d.ts +1 -1
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.js +1 -1
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.js.map +1 -1
- package/dist/components/UploadFile/types.d.ts +1 -1
- package/dist/components/ViewTab/ViewTab.module.scss.cjs +2 -2
- package/dist/components/ViewTab/ViewTab.module.scss.cjs.map +1 -1
- package/dist/components/ViewTab/ViewTab.module.scss.js +2 -2
- package/dist/components/ViewTab/ViewTab.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ const useUploadFile = ({ onFileInputCancelled } = {}) => {
|
|
|
22
22
|
}, [fileList, inputRef]);
|
|
23
23
|
// Restores the previous file selection when user cancels the file dialog
|
|
24
24
|
const onCancel = React.useCallback(() => {
|
|
25
|
-
onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled();
|
|
25
|
+
onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled(inputRef);
|
|
26
26
|
// If there are no existing files to restore, just return
|
|
27
27
|
if (!fileList || fileList.length === 0)
|
|
28
28
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUploadFile.cjs","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n onFileInputCancelled?: () => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n onFileInputCancelled?.();\n\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList, onFileInputCancelled]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":["useRef","useState","useEffect","useCallback"],"mappings":";;;;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,EAAY;;IAGpDC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,
|
|
1
|
+
{"version":3,"file":"useUploadFile.cjs","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n onFileInputCancelled?: (inputRef: React.MutableRefObject<HTMLInputElement | null>) => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n onFileInputCancelled?.(inputRef);\n\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList, onFileInputCancelled]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":["useRef","useState","useEffect","useCallback"],"mappings":";;;;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,EAAY;;IAGpDC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,aAApB,oBAAoB,KAAA,SAAA,GAAA,SAAA,GAApB,oBAAoB,CAAG,QAAQ,CAAC;;AAGhC,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
type UseUploadFileProps = {
|
|
3
|
-
onFileInputCancelled?: () => void;
|
|
3
|
+
onFileInputCancelled?: (inputRef: React.MutableRefObject<HTMLInputElement | null>) => void;
|
|
4
4
|
};
|
|
5
5
|
export declare const useUploadFile: ({ onFileInputCancelled }?: UseUploadFileProps) => {
|
|
6
6
|
clearFileSelection: () => void;
|
|
@@ -20,7 +20,7 @@ const useUploadFile = ({ onFileInputCancelled } = {}) => {
|
|
|
20
20
|
}, [fileList, inputRef]);
|
|
21
21
|
// Restores the previous file selection when user cancels the file dialog
|
|
22
22
|
const onCancel = useCallback(() => {
|
|
23
|
-
onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled();
|
|
23
|
+
onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled(inputRef);
|
|
24
24
|
// If there are no existing files to restore, just return
|
|
25
25
|
if (!fileList || fileList.length === 0)
|
|
26
26
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUploadFile.js","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n onFileInputCancelled?: () => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n onFileInputCancelled?.();\n\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList, onFileInputCancelled]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":[],"mappings":";;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAY;;IAGpD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,
|
|
1
|
+
{"version":3,"file":"useUploadFile.js","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n onFileInputCancelled?: (inputRef: React.MutableRefObject<HTMLInputElement | null>) => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n onFileInputCancelled?.(inputRef);\n\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList, onFileInputCancelled]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":[],"mappings":";;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAY;;IAGpD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,aAApB,oBAAoB,KAAA,SAAA,GAAA,SAAA,GAApB,oBAAoB,CAAG,QAAQ,CAAC;;AAGhC,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}
|
|
@@ -10,7 +10,7 @@ export interface UploadFileProps extends React.InputHTMLAttributes<HTMLInputElem
|
|
|
10
10
|
hideUploadedFiles?: boolean;
|
|
11
11
|
onMaxFilesExceeded?: () => void;
|
|
12
12
|
onFileRemoved?: (file: File) => void;
|
|
13
|
-
onFileInputCancelled?: () => void;
|
|
13
|
+
onFileInputCancelled?: (ref: React.MutableRefObject<HTMLInputElement | null>) => void;
|
|
14
14
|
maxFiles?: number;
|
|
15
15
|
disabledMessage?: string;
|
|
16
16
|
}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"contour":"
|
|
5
|
+
___$insertStyle("._contour_yy89k_1 {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n}\n._contour_yy89k_1 > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_yy89k_14 {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n._counterText_yy89k_23 {\n line-height: 1;\n}\n\nbutton[role=tab]._viewButton_yy89k_27 {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 {\n background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > svg {\n color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n background-color: var(--colour-palette-dark);\n /* Force all text elements to be white when active, used when using slot */\n /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 svg {\n color: var(--colors-neutral-ink-dark);\n}\n\n._iconWrapper_yy89k_80 {\n margin-right: var(--sizes-sm);\n}\n._iconWrapper_yy89k_80 svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n\n._iconStyling_yy89k_88 {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}");
|
|
6
|
+
var styles = {"contour":"_contour_yy89k_1","counterContainer":"_counterContainer_yy89k_14","counterText":"_counterText_yy89k_23","viewButton":"_viewButton_yy89k_27","active":"_active_yy89k_33","iconWrapper":"_iconWrapper_yy89k_80","iconStyling":"_iconStyling_yy89k_88"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=ViewTab.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewTab.module.scss.cjs","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n\n &.active {\n .contour {\n background-color: var(--colour-palette-lightest);\n\n & > svg {\n color: var(--colour-palette-dark);\n }\n\n > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n }\n\n .counterContainer {\n background-color: var(--colour-palette-dark);\n\n .counterText {\n color: var(--colors-neutral-grey-lightest);\n }\n\n /* Force all text elements to be white when active, used when using slot */\n & span {\n color: var(--colors-neutral-grey-lightest) !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n }\n\n &:hover,\n &:focus-visible,\n &.active:hover,\n &.active:focus-visible {\n .contour {\n background-color: var(--colors-neutral-grey-base);\n .counterContainer {\n background-color: var(--colors-neutral-grey-base);\n .counterText {\n color: var(--colors-neutral-ink-base);\n }\n & span {\n color: var(--colors-neutral-ink-base);\n }\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n\n & span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n & svg {\n color: var(--colors-neutral-ink-dark);\n }\n }\n }\n}\n\n.iconWrapper {\n margin-right: var(--sizes-sm);\n\n svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n }\n}\n\n.iconStyling {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"ViewTab.module.scss.cjs","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n\n &.active {\n .contour {\n background-color: var(--colour-palette-lightest);\n\n & > svg {\n color: var(--colour-palette-dark);\n }\n\n > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n }\n\n .counterContainer {\n background-color: var(--colour-palette-dark);\n\n .counterText {\n color: var(--colors-neutral-grey-lightest);\n }\n\n /* Force all text elements to be white when active, used when using slot */\n & span {\n color: var(--colors-neutral-grey-lightest) !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n }\n\n &:hover,\n &:focus-visible,\n &.active:hover,\n &.active:focus-visible {\n .contour {\n background-color: var(--colors-neutral-grey-base);\n .counterContainer {\n background-color: var(--colors-neutral-grey-base);\n .counterText {\n color: var(--colors-neutral-ink-base);\n }\n & span {\n color: var(--colors-neutral-ink-base);\n }\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n\n & span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n & svg {\n color: var(--colors-neutral-ink-dark);\n }\n }\n }\n}\n\n.iconWrapper {\n margin-right: var(--sizes-sm);\n\n svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n }\n}\n\n.iconStyling {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q2KAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"contour":"
|
|
3
|
+
insertStyle("._contour_yy89k_1 {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n}\n._contour_yy89k_1 > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\n\n._counterContainer_yy89k_14 {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n._counterText_yy89k_23 {\n line-height: 1;\n}\n\nbutton[role=tab]._viewButton_yy89k_27 {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 {\n background-color: var(--colour-palette-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > svg {\n color: var(--colour-palette-dark);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n background-color: var(--colour-palette-dark);\n /* Force all text elements to be white when active, used when using slot */\n /* Force all SVG icons to be white when active, used when using slot */\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n color: var(--colors-neutral-grey-lightest) !important;\n}\nbutton[role=tab]._viewButton_yy89k_27._active_yy89k_33 ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 {\n background-color: var(--colors-neutral-grey-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 ._counterText_yy89k_23 {\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 span {\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 ._counterContainer_yy89k_14 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 ._counterContainer_yy89k_14 svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 span, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n}\nbutton[role=tab]._viewButton_yy89k_27:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27:focus-visible ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:hover ._contour_yy89k_1 svg, button[role=tab]._viewButton_yy89k_27._active_yy89k_33:focus-visible ._contour_yy89k_1 svg {\n color: var(--colors-neutral-ink-dark);\n}\n\n._iconWrapper_yy89k_80 {\n margin-right: var(--sizes-sm);\n}\n._iconWrapper_yy89k_80 svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n\n._iconStyling_yy89k_88 {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}");
|
|
4
|
+
var styles = {"contour":"_contour_yy89k_1","counterContainer":"_counterContainer_yy89k_14","counterText":"_counterText_yy89k_23","viewButton":"_viewButton_yy89k_27","active":"_active_yy89k_33","iconWrapper":"_iconWrapper_yy89k_80","iconStyling":"_iconStyling_yy89k_88"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=ViewTab.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewTab.module.scss.js","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n\n &.active {\n .contour {\n background-color: var(--colour-palette-lightest);\n\n & > svg {\n color: var(--colour-palette-dark);\n }\n\n > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n }\n\n .counterContainer {\n background-color: var(--colour-palette-dark);\n\n .counterText {\n color: var(--colors-neutral-grey-lightest);\n }\n\n /* Force all text elements to be white when active, used when using slot */\n & span {\n color: var(--colors-neutral-grey-lightest) !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n }\n\n &:hover,\n &:focus-visible,\n &.active:hover,\n &.active:focus-visible {\n .contour {\n background-color: var(--colors-neutral-grey-base);\n .counterContainer {\n background-color: var(--colors-neutral-grey-base);\n .counterText {\n color: var(--colors-neutral-ink-base);\n }\n & span {\n color: var(--colors-neutral-ink-base);\n }\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n\n & span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n & svg {\n color: var(--colors-neutral-ink-dark);\n }\n }\n }\n}\n\n.iconWrapper {\n margin-right: var(--sizes-sm);\n\n svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n }\n}\n\n.iconStyling {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"ViewTab.module.scss.js","sources":["../../../src/components/ViewTab/ViewTab.module.scss"],"sourcesContent":[".contour {\n position: relative;\n max-height: var(--sizes-10);\n border-radius: var(--sizes-xs);\n padding: var(--sizes-sm);\n border: var(--sizes-line) solid transparent;\n cursor: pointer;\n background-color: transparent;\n\n & > span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n}\n\n.counterContainer {\n display: inline-flex;\n border-radius: var(--sizes-xs);\n padding: 2px var(--sizes-xs);\n min-width: var(--sizes-5);\n height: var(--sizes-5);\n margin-left: var(--sizes-sm);\n}\n\n.counterText {\n line-height: 1;\n}\n\n// important is needed to override button styles\nbutton[role='tab'].viewButton {\n box-sizing: border-box;\n border-radius: var(--sizes-xs);\n border: none;\n padding: 0;\n\n &.active {\n .contour {\n background-color: var(--colour-palette-lightest);\n\n & > svg {\n color: var(--colour-palette-dark);\n }\n\n > span {\n color: var(--custom-text-colour, var(--colour-palette-dark));\n }\n\n .counterContainer {\n background-color: var(--colour-palette-dark);\n\n .counterText {\n color: var(--colors-neutral-grey-lightest);\n }\n\n /* Force all text elements to be white when active, used when using slot */\n & span {\n color: var(--colors-neutral-grey-lightest) !important;\n }\n\n /* Force all SVG icons to be white when active, used when using slot */\n & svg {\n fill: var(--colors-neutral-grey-lightest);\n color: var(--colors-neutral-grey-lightest);\n }\n }\n }\n }\n\n &:hover,\n &:focus-visible,\n &.active:hover,\n &.active:focus-visible {\n .contour {\n background-color: var(--colors-neutral-grey-base);\n .counterContainer {\n background-color: var(--colors-neutral-grey-base);\n .counterText {\n color: var(--colors-neutral-ink-base);\n }\n & span {\n color: var(--colors-neutral-ink-base);\n }\n & svg {\n fill: var(--colors-neutral-ink-base);\n color: var(--colors-neutral-ink-base);\n }\n }\n\n & span {\n color: var(--custom-text-colour, var(--colors-neutral-ink-dark));\n }\n & svg {\n color: var(--colors-neutral-ink-dark);\n }\n }\n }\n}\n\n.iconWrapper {\n margin-right: var(--sizes-sm);\n\n svg {\n height: var(--sizes-base);\n width: var(--sizes-base);\n }\n}\n\n.iconStyling {\n margin-left: var(--sizes-xs);\n padding: var(--sizes-xs);\n height: var(--sizes-base);\n width: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q2KAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}
|