@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/UploadFile/styled.cjs

@@ -1,65 +1,15 @@
-"use strict";var o=require("styled-components"),e=require("../../theme/modules/colors.cjs"),r=require("../../theme/modules/radius.cjs"),s=require("../../theme/modules/sizes.cjs");function d(o){return o&&o.__esModule?o:{default:o}}const l=d(o).default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
+'use strict';
 
-  padding: ${s.sizes.md};
-  border-radius: ${r.radius.base};
+var styled = require('styled-components');
+var colors = require('../../theme/modules/colors.cjs');
+var radius = require('../../theme/modules/radius.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
 
-  input[type='file'] {
-    position: absolute;
-    opacity: 0;
-    width: 1px;
-    height: 1px;
-    cursor: pointer;
-  }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  cursor: pointer;
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  border: 2px dashed ${e.colors.neutral.ink.lightest};
-  background-color: ${e.colors.neutral.grey.lightest};
+const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.md};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.colors.secondary.red.base};:hover{border:2px dashed ${colors.colors.secondary.red.base};background-color:${colors.colors.secondary.red.lightest};}:active{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.colors.secondary.red.light};background-color:${colors.colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};}`;
 
-  :hover {
-    border: 2px dashed ${e.colors.secondary.blue.base};
-    background-color: ${e.colors.secondary.blue.lightest};
-  }
-  :active {
-    border: 2px dashed ${e.colors.secondary.blue.base};
-    box-shadow: 0 0 0 4px ${e.colors.secondary.blue.light};
-    background-color: ${e.colors.secondary.blue.lightest};
-  }
-  :focus-within {
-    border: 2px dashed ${e.colors.secondary.blue.base};
-    box-shadow: 0 0 0 4px ${e.colors.secondary.blue.light};
-    background-color: ${e.colors.secondary.blue.lightest};
-  }
-
-  &:has(input:invalid) {
-    border: 2px dashed ${e.colors.secondary.red.base};
-    :hover {
-      border: 2px dashed ${e.colors.secondary.red.base};
-      background-color: ${e.colors.secondary.red.lightest};
-    }
-
-    :active {
-      border: 2px dashed ${e.colors.secondary.red.base};
-      box-shadow: 0 0 0 4px ${e.colors.secondary.red.light};
-      background-color: ${e.colors.secondary.red.lightest};
-    }
-
-    :focus-within {
-      border: 2px dashed ${e.colors.secondary.red.base};
-      box-shadow: 0 0 0 4px ${e.colors.secondary.red.light};
-      background-color: ${e.colors.secondary.red.lightest};
-    }
-  }
-
-  &:has(input:disabled) {
-    cursor: not-allowed;
-    box-shadow: none;
-    background-color: ${e.colors.neutral.grey.light};
-    border-color: ${e.colors.neutral.ink.lightest};
-    color: ${e.colors.neutral.ink.light};
-  }
-`;exports.DropZoneContainer=l;
+exports.DropZoneContainer = DropZoneContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/UploadFile/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":[null],"names":["styled","sizes","radius","colors"],"mappings":";;;;;;;;;;;MAKa,iBAAiB,GAAGA,uBAAM,CAAC,GAAG,sJAK9BC,WAAK,CAAC,EAAE,CACF,eAAA,EAAAC,aAAM,CAAC,IAAI,CAAA,sHAAA,EAYPC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC5B,kBAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,+BAG7BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,qCAG7BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,yCAAA,EAI7BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAEvB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,qBAC1BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAI5BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACtB,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,qBAC9BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAI5B,kCAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,yBACtBA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EAC9BA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAO/B,6EAAA,EAAAA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,iBAC7BA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClCA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}

package/dist/components/UploadFile/styled.d.ts

@@ -1,2 +1 @@
 export declare const DropZoneContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/UploadFile/styled.js

@@ -1,65 +1,9 @@
-import e from"styled-components";import{colors as o}from"../../theme/modules/colors.js";import{radius as r}from"../../theme/modules/radius.js";import{sizes as d}from"../../theme/modules/sizes.js";const s=e.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
+import styled from 'styled-components';
+import { colors } from '../../theme/modules/colors.js';
+import { radius } from '../../theme/modules/radius.js';
+import { sizes } from '../../theme/modules/sizes.js';
 
-  padding: ${d.md};
-  border-radius: ${r.base};
+const DropZoneContainer = styled.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.md};border-radius:${radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.neutral.ink.lightest};background-color:${colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};}:active{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}:focus-within{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};}&:has(input:invalid){border:2px dashed ${colors.secondary.red.base};:hover{border:2px dashed ${colors.secondary.red.base};background-color:${colors.secondary.red.lightest};}:active{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}:focus-within{border:2px dashed ${colors.secondary.red.base};box-shadow:0 0 0 4px ${colors.secondary.red.light};background-color:${colors.secondary.red.lightest};}}&:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.neutral.grey.light};border-color:${colors.neutral.ink.lightest};color:${colors.neutral.ink.light};}`;
 
-  input[type='file'] {
-    position: absolute;
-    opacity: 0;
-    width: 1px;
-    height: 1px;
-    cursor: pointer;
-  }
-
-  cursor: pointer;
-
-  border: 2px dashed ${o.neutral.ink.lightest};
-  background-color: ${o.neutral.grey.lightest};
-
-  :hover {
-    border: 2px dashed ${o.secondary.blue.base};
-    background-color: ${o.secondary.blue.lightest};
-  }
-  :active {
-    border: 2px dashed ${o.secondary.blue.base};
-    box-shadow: 0 0 0 4px ${o.secondary.blue.light};
-    background-color: ${o.secondary.blue.lightest};
-  }
-  :focus-within {
-    border: 2px dashed ${o.secondary.blue.base};
-    box-shadow: 0 0 0 4px ${o.secondary.blue.light};
-    background-color: ${o.secondary.blue.lightest};
-  }
-
-  &:has(input:invalid) {
-    border: 2px dashed ${o.secondary.red.base};
-    :hover {
-      border: 2px dashed ${o.secondary.red.base};
-      background-color: ${o.secondary.red.lightest};
-    }
-
-    :active {
-      border: 2px dashed ${o.secondary.red.base};
-      box-shadow: 0 0 0 4px ${o.secondary.red.light};
-      background-color: ${o.secondary.red.lightest};
-    }
-
-    :focus-within {
-      border: 2px dashed ${o.secondary.red.base};
-      box-shadow: 0 0 0 4px ${o.secondary.red.light};
-      background-color: ${o.secondary.red.lightest};
-    }
-  }
-
-  &:has(input:disabled) {
-    cursor: not-allowed;
-    box-shadow: none;
-    background-color: ${o.neutral.grey.light};
-    border-color: ${o.neutral.ink.lightest};
-    color: ${o.neutral.ink.light};
-  }
-`;export{s as DropZoneContainer};
+export { DropZoneContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/UploadFile/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;MAKa,iBAAiB,GAAG,MAAM,CAAC,GAAG,sJAK9B,KAAK,CAAC,EAAE,CACF,eAAA,EAAA,MAAM,CAAC,IAAI,CAAA,sHAAA,EAYP,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAC5B,kBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,+BAG7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,qCAG7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,yCAAA,EAI7B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAEvB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,qBAC1B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAI5B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CACtB,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,qBAC9B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAI5B,kCAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,yBACtB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EAC9B,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAO/B,6EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,iBAC7B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,EAAA;;;;"}

package/dist/components/UploadFile/types.d.ts

@@ -7,4 +7,3 @@ export interface UploadFileProps extends React.InputHTMLAttributes<HTMLInputElem
     format?: FileSizeUnit;
     maxBytes?: number;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.cjs

@@ -1,2 +1,34 @@
-"use strict";var e=require("../../constants.cjs");exports.getFileSizeString=({maxBytes:t,format:r,baseString:i})=>{const s=null==i?"Max size: ":i;switch(r){case e.FileSizeUnit.KB:return`${s}${Number(t)/1e3} KB`;case e.FileSizeUnit.MB:return`${s}${Number(t)/1e6} MB`;default:return`${s}${Number(t)/1e3} KB`}};
+'use strict';
+
+var constants = require('../../constants.cjs');
+
+/**
+ * Constructs a string intended to be consumed by an <input> element of type "file". This string
+ * should go inside the accept property
+ *
+ * E.g.
+ *
+ * const maxSizeCopy = getFileSizeString({
+ *  maxBytes: 10000,
+ *  format: FileSizeUnit.MB
+ * });
+ *
+ * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ *
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * the returned string
+ */
+const getFileSizeString = ({ maxBytes, format, baseString }) => {
+    const base = baseString == null ? 'Max size: ' : baseString;
+    switch (format) {
+        case constants.FileSizeUnit.KB:
+            return `${base}${Number(maxBytes) / 1000} KB`;
+        case constants.FileSizeUnit.MB:
+            return `${base}${Number(maxBytes) / 1000000} MB`;
+        default:
+            return `${base}${Number(maxBytes) / 1000} KB`;
+    }
+};
+
+exports.getFileSizeString = getFileSizeString;
 //# sourceMappingURL=getFileSizeString.cjs.map

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getFileSizeString.cjs","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":[null],"names":["base","Number","maxBytes","FileSizeUnit","MB"],"mappings":"mLAsBG,MAAA,GAAAA,IAAAC,OAAAC,GAAA,SACH,KAAAC,EAAaA,aAAAC"}
+{"version":3,"file":"getFileSizeString.cjs","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":[null],"names":["FileSizeUnit"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAA0B,KAAI;AAC5F,IAAA,MAAM,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,YAAY,GAAG,UAAU;AAC3D,IAAA,QAAQ,MAAM;QACZ,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;QAC/C,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAA,GAAA,CAAK;AAClD,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;AAChD;AACH;;;;"}

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.d.ts

@@ -22,4 +22,3 @@ type GetFileSizeStringProps = {
  */
 export declare const getFileSizeString: ({ maxBytes, format, baseString }: GetFileSizeStringProps) => string;
 export {};
-//# sourceMappingURL=getFileSizeString.d.ts.map

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.js

@@ -1,2 +1,32 @@
-import{FileSizeUnit as e}from"../../constants.js";const r=({maxBytes:r,format:t,baseString:s})=>{const n=null==s?"Max size: ":s;switch(t){case e.KB:return`${n}${Number(r)/1e3} KB`;case e.MB:return`${n}${Number(r)/1e6} MB`;default:return`${n}${Number(r)/1e3} KB`}};export{r as getFileSizeString};
+import { FileSizeUnit } from '../../constants.js';
+
+/**
+ * Constructs a string intended to be consumed by an <input> element of type "file". This string
+ * should go inside the accept property
+ *
+ * E.g.
+ *
+ * const maxSizeCopy = getFileSizeString({
+ *  maxBytes: 10000,
+ *  format: FileSizeUnit.MB
+ * });
+ *
+ * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ *
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * the returned string
+ */
+const getFileSizeString = ({ maxBytes, format, baseString }) => {
+    const base = baseString == null ? 'Max size: ' : baseString;
+    switch (format) {
+        case FileSizeUnit.KB:
+            return `${base}${Number(maxBytes) / 1000} KB`;
+        case FileSizeUnit.MB:
+            return `${base}${Number(maxBytes) / 1000000} MB`;
+        default:
+            return `${base}${Number(maxBytes) / 1000} KB`;
+    }
+};
+
+export { getFileSizeString };
 //# sourceMappingURL=getFileSizeString.js.map

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFileSizeString.js","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":[null],"names":["base","Number","maxBytes","FileSizeUnit","MB"],"mappings":"oJAsBG,MAAA,GAAAA,IAAAC,OAAAC,GAAA,SACH,KAAAC,EAAaC"}
+{"version":3,"file":"getFileSizeString.js","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAA0B,KAAI;AAC5F,IAAA,MAAM,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,YAAY,GAAG,UAAU;AAC3D,IAAA,QAAQ,MAAM;QACZ,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;QAC/C,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAA,GAAA,CAAK;AAClD,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;AAChD;AACH;;;;"}

package/dist/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.cjs

@@ -1,2 +1,35 @@
-"use strict";exports.getTypePropForInputEl=({fileTypes:t})=>{if(1===t.length)return t[0];let e="";return t.forEach(((t,r,n)=>{const l=n.length-1===r&&n.length>1;e+=l?`${t}`:`${t}, `})),e.trim()};
+'use strict';
+
+/**
+ * Constructs a string intended to be consumed by an <input> element of type "file". This string
+ * should go inside the accept property.
+ *
+ * E.g.
+ *
+ * const inputElAcceptProperty = getTypePropForInputEl({
+ *  fileTypes: [
+ *    AcceptedFileTypes.CSV,
+ *  ]
+ * });
+ *
+ * Where @constant inputElAcceptProperty would equal ".csv"
+ *
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * the returned string
+ */
+const getTypePropForInputEl = ({ fileTypes }) => {
+    if (fileTypes.length === 1)
+        return fileTypes[0];
+    let base = '';
+    fileTypes.forEach((fileType, index, list) => {
+        const isLastElement = list.length - 1 === index && list.length > 1;
+        if (isLastElement)
+            base += `${fileType}`;
+        else
+            base += `${fileType}, `;
+    });
+    return base.trim();
+};
+
+exports.getTypePropForInputEl = getTypePropForInputEl;
 //# sourceMappingURL=getTypePropForInputEl.cjs.map

package/dist/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getTypePropForInputEl.cjs","sources":["../../../../../src/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.ts"],"sourcesContent":[null],"names":["fileTypes","forEach","fileType","index","list","isLastElement","length"],"mappings":"yGAuBGA,EAAAC,SAAA,CAAAC,EAAAC,EAAAC,KACH,MAAAC,EAAaD,EAAAE,OAAwC,IAAAH,GAAAC,EAAAE,OAAA"}
+{"version":3,"file":"getTypePropForInputEl.cjs","sources":["../../../../../src/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;AAgBG;MACU,qBAAqB,GAAG,CAAC,EAAE,SAAS,EAA4B,KAAI;AAC/E,IAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,SAAS,CAAC,CAAC,CAAC;IAC/C,IAAI,IAAI,GAAG,EAAE;IACb,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;AAClE,QAAA,IAAI,aAAa;AAAE,YAAA,IAAI,IAAI,CAAA,EAAG,QAAQ,CAAA,CAAE;;AACnC,YAAA,IAAI,IAAI,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI;AAC9B,KAAC,CAAC;AACF,IAAA,OAAO,IAAI,CAAC,IAAI,EAAE;AACpB;;;;"}

package/dist/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.d.ts

@@ -22,4 +22,3 @@ type GetValidTypesStringProps = {
  */
 export declare const getTypePropForInputEl: ({ fileTypes }: GetValidTypesStringProps) => string;
 export {};
-//# sourceMappingURL=getTypePropForInputEl.d.ts.map

package/dist/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.js

@@ -1,2 +1,33 @@
-const t=({fileTypes:t})=>{if(1===t.length)return t[0];let e="";return t.forEach(((t,n,r)=>{const l=r.length-1===n&&r.length>1;e+=l?`${t}`:`${t}, `})),e.trim()};export{t as getTypePropForInputEl};
+/**
+ * Constructs a string intended to be consumed by an <input> element of type "file". This string
+ * should go inside the accept property.
+ *
+ * E.g.
+ *
+ * const inputElAcceptProperty = getTypePropForInputEl({
+ *  fileTypes: [
+ *    AcceptedFileTypes.CSV,
+ *  ]
+ * });
+ *
+ * Where @constant inputElAcceptProperty would equal ".csv"
+ *
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * the returned string
+ */
+const getTypePropForInputEl = ({ fileTypes }) => {
+    if (fileTypes.length === 1)
+        return fileTypes[0];
+    let base = '';
+    fileTypes.forEach((fileType, index, list) => {
+        const isLastElement = list.length - 1 === index && list.length > 1;
+        if (isLastElement)
+            base += `${fileType}`;
+        else
+            base += `${fileType}, `;
+    });
+    return base.trim();
+};
+
+export { getTypePropForInputEl };
 //# sourceMappingURL=getTypePropForInputEl.js.map

package/dist/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.js.map

@@ -1 +1 @@
-{"version":3,"file":"getTypePropForInputEl.js","sources":["../../../../../src/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.ts"],"sourcesContent":[null],"names":["fileTypes","forEach","fileType","index","list","isLastElement","length"],"mappings":"sEAuBGA,EAAAC,SAAA,CAAAC,EAAAC,EAAAC,KACH,MAAAC,EAAaD,EAAAE,OAAwC,IAAAH,GAAAC,EAAAE,OAAA"}
+{"version":3,"file":"getTypePropForInputEl.js","sources":["../../../../../src/components/UploadFile/utils/getTypePropForInputEl/getTypePropForInputEl.ts"],"sourcesContent":[null],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;AAgBG;MACU,qBAAqB,GAAG,CAAC,EAAE,SAAS,EAA4B,KAAI;AAC/E,IAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,SAAS,CAAC,CAAC,CAAC;IAC/C,IAAI,IAAI,GAAG,EAAE;IACb,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;AAClE,QAAA,IAAI,aAAa;AAAE,YAAA,IAAI,IAAI,CAAA,EAAG,QAAQ,CAAA,CAAE;;AACnC,YAAA,IAAI,IAAI,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI;AAC9B,KAAC,CAAC;AACF,IAAA,OAAO,IAAI,CAAC,IAAI,EAAE;AACpB;;;;"}

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.cjs

@@ -1,2 +1,55 @@
-"use strict";var e=require("../../constants.cjs");exports.getValidTypesString=({fileTypes:s,baseString:t})=>{let c=null==t?"Valid types: ":t;return s.forEach(((s,t,a)=>{const l=a.length>1,p=t===a.length-1&&l,r=t===a.length-2&&l;switch(p&&(c+=" and "),s){case e.AcceptedFileTypes.CSV:c+="CSV";break;case e.AcceptedFileTypes.GIF:c+="GIF";break;case e.AcceptedFileTypes.JPEG:c+="JPEG";break;case e.AcceptedFileTypes.JPG:c+="JPG";break;case e.AcceptedFileTypes.PNG:c+="PNG"}!r&&!p&&a.length>2&&(c+=", ")})),c};
+'use strict';
+
+var constants = require('../../constants.cjs');
+
+/**
+ * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
+ * fileTypes list passed as parameter.
+ *
+ * E.g.
+ *
+ * const validTypesCopy = getValidTypesString({
+ *  fileTypes: [
+ *    AcceptedFileTypes.CSV,
+ *  ]
+ * });
+ *
+ * Where @constant validTypesCopy would equal "Valid types: CSV"
+ *
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to
+ * the returned string
+ */
+const getValidTypesString = ({ fileTypes, baseString }) => {
+    let base = baseString == null ? 'Valid types: ' : baseString;
+    fileTypes.forEach((fileType, index, list) => {
+        const iterable = list.length > 1;
+        const isLast = index === list.length - 1 && iterable;
+        const isPenultimate = index === list.length - 2 && iterable;
+        if (isLast)
+            base += ' and ';
+        switch (fileType) {
+            case constants.AcceptedFileTypes.CSV:
+                base += 'CSV';
+                break;
+            case constants.AcceptedFileTypes.GIF:
+                base += 'GIF';
+                break;
+            case constants.AcceptedFileTypes.JPEG:
+                base += 'JPEG';
+                break;
+            case constants.AcceptedFileTypes.JPG:
+                base += 'JPG';
+                break;
+            case constants.AcceptedFileTypes.PNG:
+                base += 'PNG';
+                break;
+        }
+        if (!isPenultimate && !isLast && list.length > 2)
+            base += ', ';
+    });
+    return base;
+};
+
+exports.getValidTypesString = getValidTypesString;
 //# sourceMappingURL=getValidTypesString.cjs.map

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.cjs","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":[null],"names":["iterable","list","length","isLast","index"],"mappings":"yKAwBG,MAAAA,EAAAC,EAAAC,OAAA,EACHC,EAAaC,IAAAH,EAAAC,OAAkD,GAAAF"}
+{"version":3,"file":"getValidTypesString.cjs","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":[null],"names":["AcceptedFileTypes"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;AACzF,IAAA,IAAI,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,eAAe,GAAG,UAAU;IAC5D,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;QACpD,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;AAE3D,QAAA,IAAI,MAAM;YAAE,IAAI,IAAI,OAAO;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;AAGH;QAED,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,IAAI,IAAI;AAChE,KAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.d.ts

@@ -23,4 +23,3 @@ type GetValidTypesStringProps = {
  */
 export declare const getValidTypesString: ({ fileTypes, baseString }: GetValidTypesStringProps) => string;
 export {};
-//# sourceMappingURL=getValidTypesString.d.ts.map

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js

@@ -1,2 +1,53 @@
-import{AcceptedFileTypes as e}from"../../constants.js";const t=({fileTypes:t,baseString:a})=>{let s=null==a?"Valid types: ":a;return t.forEach(((t,a,n)=>{const r=n.length>1,c=a===n.length-1&&r,l=a===n.length-2&&r;switch(c&&(s+=" and "),t){case e.CSV:s+="CSV";break;case e.GIF:s+="GIF";break;case e.JPEG:s+="JPEG";break;case e.JPG:s+="JPG";break;case e.PNG:s+="PNG"}!l&&!c&&n.length>2&&(s+=", ")})),s};export{t as getValidTypesString};
+import { AcceptedFileTypes } from '../../constants.js';
+
+/**
+ * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
+ * fileTypes list passed as parameter.
+ *
+ * E.g.
+ *
+ * const validTypesCopy = getValidTypesString({
+ *  fileTypes: [
+ *    AcceptedFileTypes.CSV,
+ *  ]
+ * });
+ *
+ * Where @constant validTypesCopy would equal "Valid types: CSV"
+ *
+ * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
+ * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to
+ * the returned string
+ */
+const getValidTypesString = ({ fileTypes, baseString }) => {
+    let base = baseString == null ? 'Valid types: ' : baseString;
+    fileTypes.forEach((fileType, index, list) => {
+        const iterable = list.length > 1;
+        const isLast = index === list.length - 1 && iterable;
+        const isPenultimate = index === list.length - 2 && iterable;
+        if (isLast)
+            base += ' and ';
+        switch (fileType) {
+            case AcceptedFileTypes.CSV:
+                base += 'CSV';
+                break;
+            case AcceptedFileTypes.GIF:
+                base += 'GIF';
+                break;
+            case AcceptedFileTypes.JPEG:
+                base += 'JPEG';
+                break;
+            case AcceptedFileTypes.JPG:
+                base += 'JPG';
+                break;
+            case AcceptedFileTypes.PNG:
+                base += 'PNG';
+                break;
+        }
+        if (!isPenultimate && !isLast && list.length > 2)
+            base += ', ';
+    });
+    return base;
+};
+
+export { getValidTypesString };
 //# sourceMappingURL=getValidTypesString.js.map

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js.map

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":[null],"names":["iterable","list","length","isLast","index"],"mappings":"0JAwBG,MAAAA,EAAAC,EAAAC,OAAA,EACHC,EAAaC,IAAAH,EAAAC,OAAkD,GAAAF"}
+{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;AACzF,IAAA,IAAI,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,eAAe,GAAG,UAAU;IAC5D,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;QACpD,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;AAE3D,QAAA,IAAI,MAAM;YAAE,IAAI,IAAI,OAAO;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;AAGH;QAED,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,IAAI,IAAI;AAChE,KAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/components/UploadFile/utils/index.d.ts

@@ -2,4 +2,3 @@ export { getValidTypesString } from './getValidTypesString/getValidTypesString';
 export { getFileSizeString } from './getFileSizeString/getFileSizeString';
 export { getTypePropForInputEl } from './getTypePropForInputEl/getTypePropForInputEl';
 export { setInputElFile } from './setInputElFile/setInputElFile';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.cjs

@@ -1,2 +1,18 @@
-"use strict";exports.setInputElFile=({fileList:e,elementId:t})=>{const l=document.getElementById(t);e.length&&(l.files=e)};
+'use strict';
+
+/**
+ * Updates the value of the files attribute held within an input elment. Used during DnD operations where
+ * the input element's files need to kept in sync and updated.
+ *
+ * @param fileList - A list of files, typically extracted from the "files" attribute of an input element
+ * @param elementId - The ID of the input element
+ */
+const setInputElFile = ({ fileList, elementId }) => {
+    const inputEl = document.getElementById(elementId);
+    if (fileList.length) {
+        inputEl.files = fileList;
+    }
+};
+
+exports.setInputElFile = setInputElFile;
 //# sourceMappingURL=setInputElFile.cjs.map

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"setInputElFile.cjs","sources":["../../../../../src/components/UploadFile/utils/setInputElFile/setInputElFile.ts"],"sourcesContent":[null],"names":["inputEl","files","fileList"],"mappings":"+GAWGA,EAAAC,MAAAC,EACH"}
+{"version":3,"file":"setInputElFile.cjs","sources":["../../../../../src/components/UploadFile/utils/setInputElFile/setInputElFile.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAKA;;;;;;AAMG;AACU,MAAA,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAuB,KAAI;IAC7E,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAqB;IACtE,IAAI,QAAQ,CAAC,MAAM,EAAE;AACnB,QAAA,OAAO,CAAC,KAAK,GAAG,QAAQ;AACzB;AACH;;;;"}

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.d.ts

@@ -11,4 +11,3 @@ type SetInputElFileProps = {
  */
 export declare const setInputElFile: ({ fileList, elementId }: SetInputElFileProps) => void;
 export {};
-//# sourceMappingURL=setInputElFile.d.ts.map

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.js

@@ -1,2 +1,16 @@
-const e=({fileList:e,elementId:t})=>{const n=document.getElementById(t);e.length&&(n.files=e)};export{e as setInputElFile};
+/**
+ * Updates the value of the files attribute held within an input elment. Used during DnD operations where
+ * the input element's files need to kept in sync and updated.
+ *
+ * @param fileList - A list of files, typically extracted from the "files" attribute of an input element
+ * @param elementId - The ID of the input element
+ */
+const setInputElFile = ({ fileList, elementId }) => {
+    const inputEl = document.getElementById(elementId);
+    if (fileList.length) {
+        inputEl.files = fileList;
+    }
+};
+
+export { setInputElFile };
 //# sourceMappingURL=setInputElFile.js.map

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"setInputElFile.js","sources":["../../../../../src/components/UploadFile/utils/setInputElFile/setInputElFile.ts"],"sourcesContent":[null],"names":["inputEl","files","fileList"],"mappings":"mFAWGA,EAAAC,MAAAC,EACH"}
+{"version":3,"file":"setInputElFile.js","sources":["../../../../../src/components/UploadFile/utils/setInputElFile/setInputElFile.ts"],"sourcesContent":[null],"names":[],"mappings":"AAKA;;;;;;AAMG;AACU,MAAA,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAuB,KAAI;IAC7E,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAqB;IACtE,IAAI,QAAQ,CAAC,MAAM,EAAE;AACnB,QAAA,OAAO,CAAC,KAAK,GAAG,QAAQ;AACzB;AACH;;;;"}

package/dist/components/VideoModal/VideoModal.cjs

@@ -1,2 +1,25 @@
-"use strict";var e=require("react"),t=require("./components/Popup.cjs"),o=require("./styled.cjs"),r=require("../../hooks/useClickOutside.cjs");require("../../hooks/useFocusVisible.cjs"),require("uid/secure");var l=require("../../tempIcons/CrossIcon.cjs");function a(e){return e&&e.__esModule?e:{default:e}}var i=a(e);exports.VideoModal=({id:e,youtubeVideoId:a,showVideoModal:c,handleCloseClick:d})=>{const s=r.useClickOutside(c,d);return i.default.createElement(t.Popup,{shouldShow:c,className:`${e}-video`},i.default.createElement(o.PopupContent,{"data-testid":"video-modal_popup-content",className:"video-modal--"+(c?"visible":"hidden")},i.default.createElement(o.VideoWrapper,{ref:s},i.default.createElement("iframe",{title:`${e}-video`,src:`https://www.youtube.com/embed/${a}`,frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}),i.default.createElement(o.ButtonSC,{variant:"flat",onClick:d,"data-testid":"video-modal--close",iconSlot:i.default.createElement(l.CrossIcon,{color:"white"})}))))};
+'use strict';
+
+var React = require('react');
+var Popup = require('./components/Popup.cjs');
+var styled = require('./styled.cjs');
+var useClickOutside = require('../../hooks/useClickOutside.cjs');
+require('../../hooks/useFocusVisible.cjs');
+require('uid/secure');
+var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const VideoModal = ({ id, youtubeVideoId, showVideoModal, handleCloseClick, }) => {
+    const ref = useClickOutside.useClickOutside(showVideoModal, handleCloseClick);
+    return (React__default.default.createElement(Popup.Popup, { shouldShow: showVideoModal, className: `${id}-video` },
+        React__default.default.createElement(styled.PopupContent, { "data-testid": "video-modal_popup-content", className: `video-modal--${showVideoModal ? 'visible' : 'hidden'}` },
+            React__default.default.createElement(styled.VideoWrapper, { ref: ref },
+                React__default.default.createElement("iframe", { title: `${id}-video`, src: `https://www.youtube.com/embed/${youtubeVideoId}`, frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }),
+                React__default.default.createElement(styled.ButtonSC, { variant: "flat", onClick: handleCloseClick, "data-testid": "video-modal--close", iconSlot: React__default.default.createElement(CrossIcon.CrossIcon, { color: "white" }) })))));
+};
+
+exports.VideoModal = VideoModal;
 //# sourceMappingURL=VideoModal.cjs.map

package/dist/components/VideoModal/VideoModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoModal.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"VideoModal.cjs","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":[null],"names":["useClickOutside","React","Popup","PopupContent","VideoWrapper","ButtonSC","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAGA,+BAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAF,sBAAA,CAAA,aAAA,CAACG,mBAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBH,sBACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAK,mBAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}

package/dist/components/VideoModal/VideoModal.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { VideoModalProps } from './types';
 export declare const VideoModal: ({ id, youtubeVideoId, showVideoModal, handleCloseClick, }: VideoModalProps) => React.JSX.Element;
-//# sourceMappingURL=VideoModal.d.ts.map

package/dist/components/VideoModal/VideoModal.js

@@ -1,2 +1,19 @@
-import e from"react";import{Popup as o}from"./components/Popup.js";import{PopupContent as t,VideoWrapper as r,ButtonSC as i}from"./styled.js";import{useClickOutside as l}from"../../hooks/useClickOutside.js";import"../../hooks/useFocusVisible.js";import"uid/secure";import{CrossIcon as s}from"../../tempIcons/CrossIcon.js";const c=({id:c,youtubeVideoId:a,showVideoModal:m,handleCloseClick:d})=>{const n=l(m,d);return e.createElement(o,{shouldShow:m,className:`${c}-video`},e.createElement(t,{"data-testid":"video-modal_popup-content",className:"video-modal--"+(m?"visible":"hidden")},e.createElement(r,{ref:n},e.createElement("iframe",{title:`${c}-video`,src:`https://www.youtube.com/embed/${a}`,frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}),e.createElement(i,{variant:"flat",onClick:d,"data-testid":"video-modal--close",iconSlot:e.createElement(s,{color:"white"})}))))};export{c as VideoModal};
+import React from 'react';
+import { Popup } from './components/Popup.js';
+import { PopupContent, VideoWrapper, ButtonSC } from './styled.js';
+import { useClickOutside } from '../../hooks/useClickOutside.js';
+import '../../hooks/useFocusVisible.js';
+import 'uid/secure';
+import { CrossIcon } from '../../tempIcons/CrossIcon.js';
+
+const VideoModal = ({ id, youtubeVideoId, showVideoModal, handleCloseClick, }) => {
+    const ref = useClickOutside(showVideoModal, handleCloseClick);
+    return (React.createElement(Popup, { shouldShow: showVideoModal, className: `${id}-video` },
+        React.createElement(PopupContent, { "data-testid": "video-modal_popup-content", className: `video-modal--${showVideoModal ? 'visible' : 'hidden'}` },
+            React.createElement(VideoWrapper, { ref: ref },
+                React.createElement("iframe", { title: `${id}-video`, src: `https://www.youtube.com/embed/${youtubeVideoId}`, frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }),
+                React.createElement(ButtonSC, { variant: "flat", onClick: handleCloseClick, "data-testid": "video-modal--close", iconSlot: React.createElement(CrossIcon, { color: "white" }) })))));
+};
+
+export { VideoModal };
 //# sourceMappingURL=VideoModal.js.map