@skodaflow/web-library 7.15.1 → 7.16.1

package/cjs/components/upload/components/uploadPreview/uploadPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploadPreview.js","sources":["../../../../../../../src/components/upload/components/uploadPreview/uploadPreview.tsx"],"sourcesContent":["import { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { Box, IconButton, IconButtonProps, Stack, SvgIconProps } from '@mui/material';\nimport { FC, ReactNode, useState } from 'react';\nimport { UploadWrapper, UploadWrapperProps } from '../uploadWrapper';\n\nexport interface UploadPreviewProps extends UploadWrapperProps {\n  /**\n   * Previews the item.\n   */\n  children: ReactNode;\n\n  /**\n   * Properties that will be passed to the IconButton\n   */\n  iconButtonProps?: IconButtonProps;\n\n  /**\n   * Properties that will be passed to the Icon\n   */\n  iconProps?: SvgIconProps;\n\n  /**\n   * Custom Icon component that will be rendered in default action in IconButton\n   */\n  customIcon?: ReactNode;\n\n  /**\n   * @deprecated - old property - used for backward compatibility\n   *\n   * Actions that are displayed whe user hovers over preview\n   * @default undefined\n   * @example\n   * import {IconButton} from '@mui/material';\n   * import {Icon} from '@skodaflow/web-library';\n   * ...\n   * <UploadPreview ... actions={\n   *  <IconButton aria-label=\"...\" onClick={...}>\n   *    <TrashcanIcon />\n   *  </IconButton\n   * }/>\n   */\n  actions?: ReactNode;\n\n  /**\n   * @deprecated - old property - used for backward compatibility\n   *\n   * Preview url. This property is passed to img element.\n   */\n  image?: string;\n}\n\n/**\n * Previews single uploaded item and adds an IconButton on top of it on hover.\n *\n * @see Upload\n */\nexport const UploadPreview: FC<UploadPreviewProps> = ({\n  actions,\n  children,\n  iconButtonProps,\n  iconProps,\n  customIcon,\n  image,\n  ...props\n}) => {\n  const { sx, ...restProps } = props || {};\n  const { sx: iconButtonSx, ...restIconButtonProps } = iconButtonProps || {};\n\n  /**\n   * @deprecated\n   */\n  const [hover, setHover] = useState(false);\n\n  return (\n    <UploadWrapper\n      sx={{\n        borderStyle: actions ? 'dashed' : 'solid',\n        borderColor: actions ? 'onSurface.os200' : 'onSurface.os500',\n        borderRadius: '4px',\n        cursor: 'default',\n        width: actions ? '100%' : '100px',\n        height: actions ? '100%' : '100px',\n        padding: actions ? '5px' : 0,\n        ...sx,\n      }}\n      onMouseOver={() => setHover(true)}\n      onMouseOut={() => setHover(false)}\n      {...restProps}\n    >\n      {actions ? (\n        <Box\n          sx={{\n            display: hover ? 'block' : 'none',\n            position: 'absolute',\n            left: '5px',\n            right: '5px',\n            top: '5px',\n            bottom: '5px',\n            background: '#3232324f',\n            color: 'white',\n            borderRadius: '4px',\n          }}\n        >\n          <Stack\n            direction=\"row\"\n            spacing={1}\n            sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}\n          >\n            {actions}\n          </Stack>\n        </Box>\n      ) : (\n        <IconButton\n          sx={{\n            position: 'absolute',\n            right: '4px',\n            top: '4px',\n            zIndex: '1',\n            width: '24px',\n            height: '24px',\n            '& > svg': {\n              fontSize: '17px',\n            },\n            ...iconButtonSx,\n          }}\n          variant=\"filled\"\n          color=\"surface\"\n          {...restIconButtonProps}\n        >\n          {customIcon || <CloseIcon {...iconProps} />}\n        </IconButton>\n      )}\n\n      {image ? (\n        <Box\n          component=\"img\"\n          src={image}\n          sx={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', borderRadius: '4px' }}\n        />\n      ) : (\n        children\n      )}\n    </UploadWrapper>\n  );\n};\n"],"names":["_a","actions","children","iconButtonProps","iconProps","customIcon","image","_b","__rest","sx","restProps","_c","iconButtonSx","restIconButtonProps","hover","setHover","useState","_jsxs","UploadWrapper","Object","assign","borderStyle","borderColor","borderRadius","cursor","width","height","padding","onMouseOver","onMouseOut","_jsx","Box","display","position","left","right","top","bottom","background","color","Stack","direction","spacing","justifyContent","alignItems","IconButton","zIndex","fontSize","variant","CloseIcon","component","src","objectFit"],"mappings":"qOAwDsDA,IAAA,IAAAC,QACpDA,EAAOC,SACPA,EAAQC,gBACRA,EAAeC,UACfA,EAASC,WACTA,EAAUC,MACVA,GAAKN,EAGL,MAAMO,EAFEC,EAAAA,OAAAR,EAP4C,4EASd,CAAA,GAAhCS,GAAEA,GAAEF,EAAKG,EAASF,EAAAA,OAAAD,EAAlB,CAAA,OACAI,EAA+CR,GAAmB,IAAhEM,GAAIG,KAAiBC,EAAmBL,EAAAA,OAAAG,EAA1C,CAAA,QAKCG,EAAOC,GAAYC,EAAAA,UAAS,GAEnC,OACEC,OAACC,EAAAA,cAAaC,OAAAC,OAAA,CACZX,GAAEU,OAAAC,OAAA,CACAC,YAAapB,EAAU,SAAW,QAClCqB,YAAarB,EAAU,kBAAoB,kBAC3CsB,aAAc,MACdC,OAAQ,UACRC,MAAOxB,EAAU,OAAS,QAC1ByB,OAAQzB,EAAU,OAAS,QAC3B0B,QAAS1B,EAAU,MAAQ,GACxBQ,GAELmB,YAAa,IAAMb,GAAS,GAC5Bc,WAAY,IAAMd,GAAS,IACvBL,EAAS,CAAAR,SAAA,CAEZD,EACC6B,EAAAA,IAACC,EAAAA,IAAG,CACFtB,GAAI,CACFuB,QAASlB,EAAQ,QAAU,OAC3BmB,SAAU,WACVC,KAAM,MACNC,MAAO,MACPC,IAAK,MACLC,OAAQ,MACRC,WAAY,YACZC,MAAO,QACPhB,aAAc,OACfrB,SAED4B,MAACU,EAAAA,MAAK,CACJC,UAAU,MACVC,QAAS,EACTjC,GAAI,CAAEuB,QAAS,OAAQW,eAAgB,SAAUC,WAAY,SAAUlB,OAAQ,QAAQxB,SAEtFD,MAIL6B,MAACe,EAAAA,WAAU1B,OAAAC,OAAA,CACTX,GAAEU,OAAAC,OAAA,CACAa,SAAU,WACVE,MAAO,MACPC,IAAK,MACLU,OAAQ,IACRrB,MAAO,OACPC,OAAQ,OACR,UAAW,CACTqB,SAAU,SAETnC,GAELoC,QAAQ,SACRT,MAAM,WACF1B,EAAmB,CAAAX,SAEtBG,GAAcyB,EAAAA,IAACmB,EAAAA,UAAS9B,OAAAC,OAAA,CAAA,EAAKhB,OAIjCE,EACCwB,EAAAA,IAACC,EAAAA,IAAG,CACFmB,UAAU,MACVC,IAAK7C,EACLG,GAAI,CAAEuB,QAAS,QAASP,MAAO,OAAQC,OAAQ,OAAQ0B,UAAW,QAAS7B,aAAc,SACzF,KAIU"}
+{"version":3,"file":"uploadPreview.js","sources":["../../../../../../../src/components/upload/components/uploadPreview/uploadPreview.tsx"],"sourcesContent":["import { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { Box, IconButton, IconButtonProps, Stack, SvgIconProps } from '@mui/material';\nimport { FC, ReactNode, useState } from 'react';\nimport { UploadWrapper, UploadWrapperProps } from '../uploadWrapper';\n\nexport interface UploadPreviewProps extends UploadWrapperProps {\n  /**\n   * Previews the item.\n   */\n  children: ReactNode;\n\n  /**\n   * Properties that will be passed to the IconButton\n   */\n  iconButtonProps?: IconButtonProps;\n\n  /**\n   * Properties that will be passed to the Icon\n   */\n  iconProps?: SvgIconProps;\n\n  /**\n   * Custom Icon component that will be rendered in default action in IconButton\n   */\n  customIcon?: ReactNode;\n\n  /**\n   * @deprecated - old property - used for backward compatibility\n   *\n   * Actions that are displayed whe user hovers over preview\n   * @default undefined\n   * @example\n   * import {IconButton} from '@mui/material';\n   * import {Icon} from '@skodaflow/web-library';\n   * ...\n   * <UploadPreview ... actions={\n   *  <IconButton aria-label=\"...\" onClick={...}>\n   *    <TrashcanIcon />\n   *  </IconButton\n   * }/>\n   */\n  actions?: ReactNode;\n\n  /**\n   * @deprecated - old property - used for backward compatibility\n   *\n   * Preview url. This property is passed to img element.\n   */\n  image?: string;\n}\n\n/**\n * Previews single uploaded item and adds an IconButton on top of it on hover.\n *\n * @see Upload\n */\nexport const UploadPreview: FC<UploadPreviewProps> = ({\n  actions,\n  children,\n  iconButtonProps,\n  iconProps,\n  customIcon,\n  image,\n  ...props\n}) => {\n  const { sx, ...restProps } = props || {};\n  const { sx: iconButtonSx, ...restIconButtonProps } = iconButtonProps || {};\n\n  /**\n   * @deprecated\n   */\n  const [hover, setHover] = useState(false);\n\n  return (\n    <UploadWrapper\n      sx={{\n        borderStyle: actions ? 'dashed' : 'solid',\n        borderColor: actions ? 'onSurface.os200' : 'onSurface.os500',\n        borderRadius: '4px',\n        cursor: 'default',\n        width: actions ? '100%' : '100px',\n        height: actions ? '100%' : '100px',\n        padding: actions ? '5px' : 0,\n        ...sx,\n      }}\n      onMouseOver={() => setHover(true)}\n      onMouseOut={() => setHover(false)}\n      {...restProps}\n    >\n      {actions ? (\n        <Box\n          sx={{\n            display: hover ? 'block' : 'none',\n            position: 'absolute',\n            left: '5px',\n            right: '5px',\n            top: '5px',\n            bottom: '5px',\n            background: '#3232324f',\n            color: 'white',\n            borderRadius: '4px',\n          }}\n        >\n          <Stack\n            direction=\"row\"\n            spacing={1}\n            sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}\n          >\n            {actions}\n          </Stack>\n        </Box>\n      ) : (\n        <IconButton\n          sx={{\n            position: 'absolute',\n            right: '4px',\n            top: '4px',\n            zIndex: '1',\n            width: '24px',\n            height: '24px',\n            '& > svg': {\n              fontSize: '17px',\n            },\n            ...iconButtonSx,\n          }}\n          variant=\"filled\"\n          color=\"surface\"\n          {...restIconButtonProps}\n        >\n          {customIcon || <CloseIcon {...iconProps} />}\n        </IconButton>\n      )}\n\n      {image ? (\n        <Box\n          component=\"img\"\n          src={image}\n          sx={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', borderRadius: '4px' }}\n        />\n      ) : (\n        children\n      )}\n    </UploadWrapper>\n  );\n};\n"],"names":["_a","actions","children","iconButtonProps","iconProps","customIcon","image","_b","__rest","sx","restProps","_c","iconButtonSx","restIconButtonProps","hover","setHover","useState","_jsxs","UploadWrapper","Object","assign","borderStyle","borderColor","borderRadius","cursor","width","height","padding","onMouseOver","onMouseOut","_jsx","Box","display","position","left","right","top","bottom","background","color","Stack","direction","spacing","justifyContent","alignItems","IconButton","zIndex","fontSize","variant","CloseIcon","component","src","objectFit"],"mappings":"qOAwDsDA,IAAA,IAAAC,QACpDA,EAAOC,SACPA,EAAQC,gBACRA,EAAeC,UACfA,EAASC,WACTA,EAAUC,MACVA,GAAKN,EAGL,MAAMO,EAFEC,EAAAA,OAAAR,EAP4C,4EASd,CAAA,GAAhCS,GAAEA,GAAEF,EAAKG,EAASF,EAAAA,OAAAD,EAAlB,CAAA,OACAI,EAA+CR,GAAmB,IAAhEM,GAAIG,KAAiBC,EAAmBL,EAAAA,OAAAG,EAA1C,CAAA,QAKCG,EAAOC,GAAYC,EAAAA,UAAS,GAEnC,OACEC,OAACC,EAAAA,cAAaC,OAAAC,OAAA,CACZX,GAAEU,OAAAC,OAAA,CACAC,YAAapB,EAAU,SAAW,QAClCqB,YAAarB,EAAU,kBAAoB,kBAC3CsB,aAAc,MACdC,OAAQ,UACRC,MAAOxB,EAAU,OAAS,QAC1ByB,OAAQzB,EAAU,OAAS,QAC3B0B,QAAS1B,EAAU,MAAQ,GACxBQ,GAELmB,YAAa,IAAMb,GAAS,GAC5Bc,WAAY,IAAMd,GAAS,IACvBL,EAAS,CAAAR,SAAA,CAEZD,EACC6B,EAAAA,IAACC,EAAAA,IAAG,CACFtB,GAAI,CACFuB,QAASlB,EAAQ,QAAU,OAC3BmB,SAAU,WACVC,KAAM,MACNC,MAAO,MACPC,IAAK,MACLC,OAAQ,MACRC,WAAY,YACZC,MAAO,QACPhB,aAAc,OACfrB,SAED4B,MAACU,EAAAA,MAAK,CACJC,UAAU,MACVC,QAAS,EACTjC,GAAI,CAAEuB,QAAS,OAAQW,eAAgB,SAAUC,WAAY,SAAUlB,OAAQ,QAAQxB,SAEtFD,MAIL6B,MAACe,EAAAA,WAAU1B,OAAAC,OAAA,CACTX,GAAEU,OAAAC,OAAA,CACAa,SAAU,WACVE,MAAO,MACPC,IAAK,MACLU,OAAQ,IACRrB,MAAO,OACPC,OAAQ,OACR,UAAW,CACTqB,SAAU,SAETnC,GAELoC,QAAQ,SACRT,MAAM,WACF1B,EAAmB,CAAAX,SAEtBG,GAAcyB,EAAAA,IAACmB,EAAAA,UAAS9B,OAAAC,OAAA,CAAA,EAAKhB,OAIjCE,EACCwB,EAAAA,IAACC,EAAAA,IAAG,CACFmB,UAAU,MACVC,IAAK7C,EACLG,GAAI,CAAEuB,QAAS,QAASP,MAAO,OAAQC,OAAQ,OAAQ0B,UAAW,QAAS7B,aAAc,SACzF"}

package/cjs/components/upload/upload.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),r=require("react"),n=require("./components/uploadWrapper/uploadWrapper.js");function l(e,t){if(!e.type)return!1;if("*"===t.trim())return!0;return t.split(",").some((t=>{if(t.includes("/*")){const r=t.split("/")[0];return e.type.startsWith(`${r}/`)}if(e.type.trim()===t.trim())return!0;if(t.startsWith(".")){const r=t.trim().toLowerCase();return e.name.toLowerCase().endsWith(r)}return!1}))}exports.Upload=function(a){var{children:i,currentFilesCount:s=0,onFileChange:o,inputProps:u={},maxFiles:p=1,state:c}=a,d=e.__rest(a,["children","currentFilesCount","onFileChange","inputProps","maxFiles","state"]);const f=r.useRef(null),[g,v]=r.useState(!1),[h,C]=r.useState(null),m=(null==u?void 0:u.accept)||"*",b=r.useMemo((()=>g?"dragdropping":h?"error":c||"default"),[g,h,c]),y=r.useCallback((e=>{e.stopPropagation(),e.preventDefault()}),[]),x=r.useCallback((e=>e.filter((e=>l(e,m)))),[m,p]),k=r.useCallback((()=>{o&&(h&&C(null),v(!0))}),[v]),F=r.useCallback((()=>{v(!1)}),[v]),D=r.useCallback((()=>{var e;h&&C(null),null===(e=f.current)||void 0===e||e.click()}),[]),j=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),h&&C(null);const t=[...e.dataTransfer.files];if(s+t.length>p)return v(!1),void C({type:"maxFilesExceeded"});const r=t.filter((e=>!l(e,m)));if(r.length>0)return v(!1),void C({type:"invalidFileType",files:r});const n=x([...e.dataTransfer.files]);v(!1),n.length>0&&(null==o||o(n))}),[v,h,C,m,o,s]),W=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),h&&C(null);const t=[...e.target.files];if(s+t.length>p)return v(!1),void C({type:"maxFilesExceeded"});const r=t.filter((e=>!l(e,m)));if(r.length>0)return void C({type:"invalidFileType",files:r});const n=x(t);n.length>0&&(null==o||o(n),f.current&&(f.current.value=""))}),[v,h,C,m,o,s]);return t.jsxs(n.UploadWrapper,Object.assign({role:"button",tabIndex:0,"aria-label":"Upload file",state:b,onClick:D,onDragOver:y,onDrop:j,onDragEnter:k,onDragLeave:F,onKeyDown:e=>{"Enter"===e.key&&D()}},d,{children:["function"==typeof i?i({error:h,dragging:g}):i,t.jsx("input",Object.assign({ref:f,onChange:W},u,{hidden:!0,type:"file",multiple:p>1}))]}))};
+"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),r=require("react"),n=require("./components/uploadWrapper/uploadWrapper.js");function l(e,t){if(!e.type)return!1;if("*"===t.trim())return!0;return t.split(",").some(t=>{if(t.includes("/*")){const r=t.split("/")[0];return e.type.startsWith(`${r}/`)}if(e.type.trim()===t.trim())return!0;if(t.startsWith(".")){const r=t.trim().toLowerCase();return e.name.toLowerCase().endsWith(r)}return!1})}exports.Upload=function(a){var{children:i,currentFilesCount:s=0,onFileChange:o,inputProps:u={},maxFiles:p=1,state:c}=a,d=e.__rest(a,["children","currentFilesCount","onFileChange","inputProps","maxFiles","state"]);const f=r.useRef(null),[g,v]=r.useState(!1),[h,C]=r.useState(null),m=(null==u?void 0:u.accept)||"*",b=r.useMemo(()=>g?"dragdropping":h?"error":c||"default",[g,h,c]),y=r.useCallback(e=>{e.stopPropagation(),e.preventDefault()},[]),x=r.useCallback(e=>e.filter(e=>l(e,m)),[m,p]),k=r.useCallback(()=>{o&&(h&&C(null),v(!0))},[v]),F=r.useCallback(()=>{v(!1)},[v]),D=r.useCallback(()=>{var e;h&&C(null),null===(e=f.current)||void 0===e||e.click()},[]),j=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),h&&C(null);const t=[...e.dataTransfer.files];if(s+t.length>p)return v(!1),void C({type:"maxFilesExceeded"});const r=t.filter(e=>!l(e,m));if(r.length>0)return v(!1),void C({type:"invalidFileType",files:r});const n=x([...e.dataTransfer.files]);v(!1),n.length>0&&(null==o||o(n))},[v,h,C,m,o,s]),W=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),h&&C(null);const t=[...e.target.files];if(s+t.length>p)return v(!1),void C({type:"maxFilesExceeded"});const r=t.filter(e=>!l(e,m));if(r.length>0)return void C({type:"invalidFileType",files:r});const n=x(t);n.length>0&&(null==o||o(n),f.current&&(f.current.value=""))},[v,h,C,m,o,s]);return t.jsxs(n.UploadWrapper,Object.assign({role:"button",tabIndex:0,"aria-label":"Upload file",state:b,onClick:D,onDragOver:y,onDrop:j,onDragEnter:k,onDragLeave:F,onKeyDown:e=>{"Enter"===e.key&&D()}},d,{children:["function"==typeof i?i({error:h,dragging:g}):i,t.jsx("input",Object.assign({ref:f,onChange:W},u,{hidden:!0,type:"file",multiple:p>1}))]}))};
 //# sourceMappingURL=upload.js.map

package/cjs/components/upload/upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload.js","sources":["../../../../../src/components/upload/upload.tsx"],"sourcesContent":["import { ChangeEvent, DragEvent, HTMLProps, ReactNode, useCallback, useMemo, useRef, useState } from 'react';\nimport { UploadWrapper, UploadWrapperProps } from './components/uploadWrapper/uploadWrapper';\n\nfunction isAcceptedFileType(file: File, acceptedTypes: string) {\n  if (!file.type) return false; // Avoid issues where file.type is empty\n\n  // If '*' is used, accept all files\n  if (acceptedTypes.trim() === '*') return true;\n\n  // Split the accepted types into an array\n  const accepted = acceptedTypes.split(',');\n\n  return accepted.some((type) => {\n    // Check for wildcards (image/*, video/*)\n    if (type.includes('/*')) {\n      const typePrefix = type.split('/')[0];\n      return file.type.startsWith(`${typePrefix}/`);\n    }\n    // Check for exact MIME types (image/jpeg, video/mp4)\n    if (file.type.trim() === type.trim()) {\n      return true;\n    }\n    // Check for file extension matches (e.g., .pdf, .csv)\n    if (type.startsWith('.')) {\n      const extension = type.trim().toLowerCase();\n      return file.name.toLowerCase().endsWith(extension);\n    }\n    return false;\n  });\n}\n\ntype UploadError = {\n  type: 'maxFilesExceeded' | 'invalidFileType';\n  files?: File[];\n} | null;\n\nexport interface UploadProps extends Omit<UploadWrapperProps, 'children'> {\n  /**\n   * Properties that will be passed to the input element.\n   */\n  inputProps?: Omit<HTMLProps<HTMLInputElement>, 'hidden' | 'type' | 'multiple'>;\n\n  /**\n   * Sets maximum files that are available.\n   * If maxFiles is bigger than 1 the input is type multiple.\n   * @default 1\n   */\n  maxFiles?: number;\n\n  /**\n   * Handler that is called when user provide files.\n   */\n  onFileChange?: (files: Array<File>) => void;\n\n  /**\n   * Children as a render function that gets error and dragging state.\n   */\n  children?: ReactNode | ((params: { error: UploadError; dragging: boolean }) => ReactNode);\n\n  /**\n   * Current number of uploaded files.\n   */\n  currentFilesCount?: number;\n}\n\nexport function Upload({\n  children,\n  currentFilesCount = 0,\n  onFileChange,\n  inputProps = {},\n  maxFiles = 1,\n  state,\n  ...restProps\n}: UploadProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = useState<boolean>(false);\n  const [error, setError] = useState<UploadError>(null);\n\n  const accept = inputProps?.accept || '*';\n\n  const currentState = useMemo(() => {\n    return dragging ? 'dragdropping' : error ? 'error' : state ? state : 'default';\n  }, [dragging, error, state]);\n\n  const preventDragOver = useCallback((event: DragEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n  }, []);\n\n  const getFilteredFiles = useCallback(\n    (inputFiles: File[]) => inputFiles.filter((file) => isAcceptedFileType(file, accept)),\n    [accept, maxFiles],\n  );\n\n  const handleDragEnter = useCallback(() => {\n    if (!onFileChange) return;\n\n    error && setError(null); // reset error state if needed\n    setDragging(true);\n  }, [setDragging]);\n\n  const handleDragLeave = useCallback(() => {\n    setDragging(false);\n  }, [setDragging]);\n\n  const handleClick = useCallback(() => {\n    error && setError(null); // reset error state if needed\n    inputRef.current?.click();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.dataTransfer.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setDragging(false);\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles([...event.dataTransfer.files]);\n      setDragging(false);\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.target.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles(files);\n\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  return (\n    <UploadWrapper\n      role=\"button\"\n      tabIndex={0}\n      aria-label=\"Upload file\"\n      state={currentState}\n      onClick={handleClick}\n      onDragOver={preventDragOver}\n      onDrop={handleDrop}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') handleClick();\n      }}\n      {...restProps}\n    >\n      {typeof children === 'function' ? children({ error, dragging }) : children}\n      <input ref={inputRef} onChange={handleInputChange} {...inputProps} hidden type=\"file\" multiple={maxFiles > 1} />\n    </UploadWrapper>\n  );\n}\n"],"names":["isAcceptedFileType","file","acceptedTypes","type","trim","split","some","includes","typePrefix","startsWith","extension","toLowerCase","name","endsWith","_a","children","currentFilesCount","onFileChange","inputProps","maxFiles","state","restProps","__rest","inputRef","useRef","dragging","setDragging","useState","error","setError","accept","currentState","useMemo","preventDragOver","useCallback","event","stopPropagation","preventDefault","getFilteredFiles","inputFiles","filter","handleDragEnter","handleDragLeave","handleClick","current","click","handleDrop","files","dataTransfer","length","permittedFiles","filteredFiles","handleInputChange","target","value","_jsxs","UploadWrapper","role","tabIndex","onClick","onDragOver","onDrop","onDragEnter","onDragLeave","onKeyDown","key","_jsx","Object","assign","ref","onChange","hidden","multiple"],"mappings":"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"}
+{"version":3,"file":"upload.js","sources":["../../../../../src/components/upload/upload.tsx"],"sourcesContent":["import { ChangeEvent, DragEvent, HTMLProps, ReactNode, useCallback, useMemo, useRef, useState } from 'react';\nimport { UploadWrapper, UploadWrapperProps } from './components/uploadWrapper/uploadWrapper';\n\nfunction isAcceptedFileType(file: File, acceptedTypes: string) {\n  if (!file.type) return false; // Avoid issues where file.type is empty\n\n  // If '*' is used, accept all files\n  if (acceptedTypes.trim() === '*') return true;\n\n  // Split the accepted types into an array\n  const accepted = acceptedTypes.split(',');\n\n  return accepted.some((type) => {\n    // Check for wildcards (image/*, video/*)\n    if (type.includes('/*')) {\n      const typePrefix = type.split('/')[0];\n      return file.type.startsWith(`${typePrefix}/`);\n    }\n    // Check for exact MIME types (image/jpeg, video/mp4)\n    if (file.type.trim() === type.trim()) {\n      return true;\n    }\n    // Check for file extension matches (e.g., .pdf, .csv)\n    if (type.startsWith('.')) {\n      const extension = type.trim().toLowerCase();\n      return file.name.toLowerCase().endsWith(extension);\n    }\n    return false;\n  });\n}\n\ntype UploadError = {\n  type: 'maxFilesExceeded' | 'invalidFileType';\n  files?: File[];\n} | null;\n\nexport interface UploadProps extends Omit<UploadWrapperProps, 'children'> {\n  /**\n   * Properties that will be passed to the input element.\n   */\n  inputProps?: Omit<HTMLProps<HTMLInputElement>, 'hidden' | 'type' | 'multiple'>;\n\n  /**\n   * Sets maximum files that are available.\n   * If maxFiles is bigger than 1 the input is type multiple.\n   * @default 1\n   */\n  maxFiles?: number;\n\n  /**\n   * Handler that is called when user provide files.\n   */\n  onFileChange?: (files: Array<File>) => void;\n\n  /**\n   * Children as a render function that gets error and dragging state.\n   */\n  children?: ReactNode | ((params: { error: UploadError; dragging: boolean }) => ReactNode);\n\n  /**\n   * Current number of uploaded files.\n   */\n  currentFilesCount?: number;\n}\n\nexport function Upload({\n  children,\n  currentFilesCount = 0,\n  onFileChange,\n  inputProps = {},\n  maxFiles = 1,\n  state,\n  ...restProps\n}: UploadProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = useState<boolean>(false);\n  const [error, setError] = useState<UploadError>(null);\n\n  const accept = inputProps?.accept || '*';\n\n  const currentState = useMemo(() => {\n    return dragging ? 'dragdropping' : error ? 'error' : state ? state : 'default';\n  }, [dragging, error, state]);\n\n  const preventDragOver = useCallback((event: DragEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n  }, []);\n\n  const getFilteredFiles = useCallback(\n    (inputFiles: File[]) => inputFiles.filter((file) => isAcceptedFileType(file, accept)),\n    [accept, maxFiles],\n  );\n\n  const handleDragEnter = useCallback(() => {\n    if (!onFileChange) return;\n\n    error && setError(null); // reset error state if needed\n    setDragging(true);\n  }, [setDragging]);\n\n  const handleDragLeave = useCallback(() => {\n    setDragging(false);\n  }, [setDragging]);\n\n  const handleClick = useCallback(() => {\n    error && setError(null); // reset error state if needed\n    inputRef.current?.click();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: DragEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.dataTransfer.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setDragging(false);\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles([...event.dataTransfer.files]);\n      setDragging(false);\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      error && setError(null); // reset error state if needed\n\n      const files = [...event.target.files];\n\n      if (currentFilesCount + files.length > maxFiles) {\n        setDragging(false);\n        setError({\n          type: 'maxFilesExceeded',\n        });\n        return;\n      }\n\n      const permittedFiles = files.filter((file) => !isAcceptedFileType(file, accept));\n\n      if (permittedFiles.length > 0) {\n        setError({\n          type: 'invalidFileType',\n          files: permittedFiles,\n        });\n        return;\n      }\n\n      const filteredFiles = getFilteredFiles(files);\n\n      if (filteredFiles.length > 0) {\n        onFileChange?.(filteredFiles);\n\n        if (inputRef.current) {\n          inputRef.current.value = '';\n        }\n      }\n    },\n    [setDragging, error, setError, accept, onFileChange, currentFilesCount],\n  );\n\n  return (\n    <UploadWrapper\n      role=\"button\"\n      tabIndex={0}\n      aria-label=\"Upload file\"\n      state={currentState}\n      onClick={handleClick}\n      onDragOver={preventDragOver}\n      onDrop={handleDrop}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter') handleClick();\n      }}\n      {...restProps}\n    >\n      {typeof children === 'function' ? children({ error, dragging }) : children}\n      <input ref={inputRef} onChange={handleInputChange} {...inputProps} hidden type=\"file\" multiple={maxFiles > 1} />\n    </UploadWrapper>\n  );\n}\n"],"names":["isAcceptedFileType","file","acceptedTypes","type","trim","split","some","includes","typePrefix","startsWith","extension","toLowerCase","name","endsWith","_a","children","currentFilesCount","onFileChange","inputProps","maxFiles","state","restProps","__rest","inputRef","useRef","dragging","setDragging","useState","error","setError","accept","currentState","useMemo","preventDragOver","useCallback","event","stopPropagation","preventDefault","getFilteredFiles","inputFiles","filter","handleDragEnter","handleDragLeave","handleClick","current","click","handleDrop","files","dataTransfer","length","permittedFiles","filteredFiles","handleInputChange","target","value","_jsxs","UploadWrapper","role","tabIndex","onClick","onDragOver","onDrop","onDragEnter","onDragLeave","onKeyDown","key","_jsx","Object","assign","ref","onChange","hidden","multiple"],"mappings":"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"}

package/cjs/components/video/Video.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),o=require("@mui/material"),t=require("../icon/stroke/FileMissingIcon.js");const i=s.forwardRef(((s,i)=>{var{src:n,type:c="video/mp4",noVidErrorMessage:l,sourceProps:a,poster:u,sx:d,autoPlay:p=!0,muted:x=!0,controls:m=!1,loop:j=!1,children:g}=s,y=e.__rest(s,["src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children"]);return r.jsxs(o.Box,Object.assign({component:"video","data-testid":"Video",poster:u,ref:i,autoPlay:p,muted:x,controls:m,loop:j,sx:Object.assign({display:"block",maxWidth:"100%"},d)},y,{children:[null!=g?g:r.jsx(o.Box,Object.assign({component:"source",src:n,type:c},a)),null!=l?l:r.jsx(o.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:r.jsx(t.FileMissingIcon,{})})]}))}));exports.Video=i;
+"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),s=require("react"),o=require("@mui/material"),t=require("../icon/stroke/FileMissingIcon.js");const i=s.forwardRef((s,i)=>{var{src:n,type:c="video/mp4",noVidErrorMessage:l,sourceProps:a,poster:u,sx:d,autoPlay:p=!0,muted:x=!0,controls:m=!1,loop:j=!1,children:g}=s,y=e.__rest(s,["src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children"]);return r.jsxs(o.Box,Object.assign({component:"video","data-testid":"Video",poster:u,ref:i,autoPlay:p,muted:x,controls:m,loop:j,sx:Object.assign({display:"block",maxWidth:"100%"},d)},y,{children:[null!=g?g:r.jsx(o.Box,Object.assign({component:"source",src:n,type:c},a)),null!=l?l:r.jsx(o.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:r.jsx(t.FileMissingIcon,{})})]}))});exports.Video=i;
 //# sourceMappingURL=Video.js.map

package/cjs/components/video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sources":["../../../../../src/components/video/Video.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { FileMissingIcon } from '@/src/components/icon/stroke/FileMissingIcon';\n\nexport interface VideoProps extends BoxProps<'video'> {\n  /** The URL of the video to embed. */\n  src?: string;\n  /** video type property, @default \"video/mp4\" */\n  type?: string;\n  /** The message (or component) to display if the video cannot be loaded, @default <Icon name=\"file-missing\" /> centered inside the Box  */\n  noVidErrorMessage?: React.ReactNode;\n  /** Custom source Box props. */\n  sourceProps?: BoxProps<'source'>;\n  /** Image to be shown while the video is downloading or until the user hits the play button. */\n  poster?: string;\n  /** Video element autoPlay, @default true */\n  autoPlay?: boolean;\n  /** Video element muted, @default true */\n  muted?: boolean;\n  /** Video element native browser controls, @default false */\n  controls?: boolean;\n  /** Video element loop, @default false */\n  loop?: boolean;\n}\n\n/**\n *  The Video component is a customizable video player built with React and Material-UI.\n *  It extends the Box component from Material-UI and provides various props to control video playback and appearance.\n *  If children are provided, they are rendered inside the video element as source elements.\n *  If no children are provided, a default source element is used based on the src prop.\n *  @param videoRef - A reference to the video element.\n */\nexport const Video: React.FC<VideoProps> = forwardRef(\n  (\n    {\n      src,\n      type = 'video/mp4',\n      noVidErrorMessage,\n      sourceProps,\n      poster,\n      sx,\n      autoPlay = true,\n      muted = true,\n      controls = false,\n      loop = false,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"video\"\n        data-testid=\"Video\"\n        poster={poster}\n        ref={ref}\n        autoPlay={autoPlay}\n        muted={muted}\n        controls={controls}\n        loop={loop}\n        sx={{\n          display: 'block',\n          maxWidth: '100%',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children ?? <Box component=\"source\" src={src} type={type} {...sourceProps} />}\n        {noVidErrorMessage ?? (\n          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>\n            <FileMissingIcon />\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Video","forwardRef","_a","ref","src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children","rest","__rest","_jsxs","Box","Object","assign","component","display","maxWidth","_jsx","justifyContent","alignItems","width","height","FileMissingIcon"],"mappings":"gKAgCO,MAAMA,EAA8BC,EAAAA,YACzC,CACEC,EAcAC,KAdA,IAAAC,IACEA,EAAGC,KACHA,EAAO,YAAWC,kBAClBA,EAAiBC,YACjBA,EAAWC,OACXA,EAAMC,GACNA,EAAEC,SACFA,GAAW,EAAIC,MACfA,GAAQ,EAAIC,SACZA,GAAW,EAAKC,KAChBA,GAAO,EAAKC,SACZA,GAAQZ,EACLa,EAAIC,EAAAA,OAAAd,EAZT,gHAgBA,OACEe,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CACFC,UAAU,QAAO,cACL,QACZb,OAAQA,EACRL,IAAKA,EACLO,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAEU,OAAAC,OAAA,CACAE,QAAS,QACTC,SAAU,QACPd,IAEDM,EAAI,CAAAD,SAAA,CAEPA,QAAAA,EAAYU,EAAAA,IAACN,qBAAIG,UAAU,SAASjB,IAAKA,EAAKC,KAAMA,GAAUE,IAC9DD,QAAAA,EACCkB,EAAAA,IAACN,EAAAA,IAAG,CAACT,GAAI,CAAEa,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQd,SACzGU,MAACK,EAAAA,gBAAe,CAAA,QAGhB"}
+{"version":3,"file":"Video.js","sources":["../../../../../src/components/video/Video.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { FileMissingIcon } from '@/src/components/icon/stroke/FileMissingIcon';\n\nexport interface VideoProps extends BoxProps<'video'> {\n  /** The URL of the video to embed. */\n  src?: string;\n  /** video type property, @default \"video/mp4\" */\n  type?: string;\n  /** The message (or component) to display if the video cannot be loaded, @default <Icon name=\"file-missing\" /> centered inside the Box  */\n  noVidErrorMessage?: React.ReactNode;\n  /** Custom source Box props. */\n  sourceProps?: BoxProps<'source'>;\n  /** Image to be shown while the video is downloading or until the user hits the play button. */\n  poster?: string;\n  /** Video element autoPlay, @default true */\n  autoPlay?: boolean;\n  /** Video element muted, @default true */\n  muted?: boolean;\n  /** Video element native browser controls, @default false */\n  controls?: boolean;\n  /** Video element loop, @default false */\n  loop?: boolean;\n}\n\n/**\n *  The Video component is a customizable video player built with React and Material-UI.\n *  It extends the Box component from Material-UI and provides various props to control video playback and appearance.\n *  If children are provided, they are rendered inside the video element as source elements.\n *  If no children are provided, a default source element is used based on the src prop.\n *  @param videoRef - A reference to the video element.\n */\nexport const Video: React.FC<VideoProps> = forwardRef(\n  (\n    {\n      src,\n      type = 'video/mp4',\n      noVidErrorMessage,\n      sourceProps,\n      poster,\n      sx,\n      autoPlay = true,\n      muted = true,\n      controls = false,\n      loop = false,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Box\n        component=\"video\"\n        data-testid=\"Video\"\n        poster={poster}\n        ref={ref}\n        autoPlay={autoPlay}\n        muted={muted}\n        controls={controls}\n        loop={loop}\n        sx={{\n          display: 'block',\n          maxWidth: '100%',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children ?? <Box component=\"source\" src={src} type={type} {...sourceProps} />}\n        {noVidErrorMessage ?? (\n          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' }}>\n            <FileMissingIcon />\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["Video","forwardRef","_a","ref","src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children","rest","__rest","_jsxs","Box","Object","assign","component","display","maxWidth","_jsx","justifyContent","alignItems","width","height","FileMissingIcon"],"mappings":"gKAgCO,MAAMA,EAA8BC,EAAAA,WACzC,CACEC,EAcAC,KAdA,IAAAC,IACEA,EAAGC,KACHA,EAAO,YAAWC,kBAClBA,EAAiBC,YACjBA,EAAWC,OACXA,EAAMC,GACNA,EAAEC,SACFA,GAAW,EAAIC,MACfA,GAAQ,EAAIC,SACZA,GAAW,EAAKC,KAChBA,GAAO,EAAKC,SACZA,GAAQZ,EACLa,EAAIC,EAAAA,OAAAd,EAZT,gHAgBA,OACEe,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CACFC,UAAU,QAAO,cACL,QACZb,OAAQA,EACRL,IAAKA,EACLO,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAEU,OAAAC,OAAA,CACAE,QAAS,QACTC,SAAU,QACPd,IAEDM,EAAI,CAAAD,SAAA,CAEPA,QAAAA,EAAYU,EAAAA,IAACN,qBAAIG,UAAU,SAASjB,IAAKA,EAAKC,KAAMA,GAAUE,IAC9DD,QAAAA,EACCkB,EAAAA,IAACN,EAAAA,IAAG,CAACT,GAAI,CAAEa,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQd,SACzGU,MAACK,EAAAA,gBAAe,CAAA"}

package/cjs/components/video/hooks.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react");exports.useVideoPlayPause=t=>{var r;const[u,n]=e.useState(!(null===(r=t.current)||void 0===r?void 0:r.paused));e.useEffect((()=>{const e=null==t?void 0:t.current;e&&void 0===u&&n(!(null==e?void 0:e.paused));const r=()=>{(!e.autoplay||!e.ended)&&n(!0)},a=()=>n(!1);if(e)return e.addEventListener("pause",a),n(!e.paused),e.addEventListener("play",r),()=>{e.removeEventListener("play",r),e.removeEventListener("pause",a)}}),[t]);const a=e.useCallback((()=>{(null==t?void 0:t.current)&&(u?t.current.pause():t.current.play(),n((e=>!e)))}),[u,null==t?void 0:t.current]);return{isPlaying:u,handlePlayPause:a}},exports.useVideoSoundControls=t=>{var r;const[u,n]=e.useState(null===(r=t.current)||void 0===r?void 0:r.muted),[a,d]=e.useState(1);e.useEffect((()=>{const e=null==t?void 0:t.current;e&&(void 0===u&&n(null==e?void 0:e.muted),t.current.muted=u,t.current.volume=a)}),[u,a,t]);const l=e.useCallback((()=>{n((e=>!e))}),[]),o=e.useCallback((e=>{d(e)}),[]);return{isMuted:u,handleMuteToggle:l,volume:a,handleVolumeChange:o}},exports.useVideoTime=t=>{var r;const[u,n]=e.useState(0),[a,d]=e.useState(null===(r=t.current)||void 0===r?void 0:r.duration),l=e.useCallback((()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.currentTime)&&n(t.current.currentTime)}),[t]),o=e.useCallback((e=>{var r;(null===(r=t.current)||void 0===r?void 0:r.currentTime)&&(t.current.currentTime=e),n(e)}),[t]),i=e.useCallback((()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.duration)&&d(t.current.duration)}),[t]);return e.useEffect((()=>{const e=null==t?void 0:t.current;if(e)return e.addEventListener("loadedmetadata",i),e.addEventListener("timeupdate",l),()=>{e.removeEventListener("loadedmetadata",i),e.removeEventListener("timeupdate",l)}}),[i,l,t]),{currentTime:u,duration:a,handleSeek:o}};
+"use strict";var e=require("react");exports.useVideoPlayPause=t=>{var r;const[u,n]=e.useState(!(null===(r=t.current)||void 0===r?void 0:r.paused));e.useEffect(()=>{const e=null==t?void 0:t.current;e&&void 0===u&&n(!(null==e?void 0:e.paused));const r=()=>{(!e.autoplay||!e.ended)&&n(!0)},a=()=>n(!1);if(e)return e.addEventListener("pause",a),n(!e.paused),e.addEventListener("play",r),()=>{e.removeEventListener("play",r),e.removeEventListener("pause",a)}},[t]);const a=e.useCallback(()=>{(null==t?void 0:t.current)&&(u?t.current.pause():t.current.play(),n(e=>!e))},[u,null==t?void 0:t.current]);return{isPlaying:u,handlePlayPause:a}},exports.useVideoSoundControls=t=>{var r;const[u,n]=e.useState(null===(r=t.current)||void 0===r?void 0:r.muted),[a,d]=e.useState(1);e.useEffect(()=>{const e=null==t?void 0:t.current;e&&(void 0===u&&n(null==e?void 0:e.muted),t.current.muted=u,t.current.volume=a)},[u,a,t]);const l=e.useCallback(()=>{n(e=>!e)},[]),o=e.useCallback(e=>{d(e)},[]);return{isMuted:u,handleMuteToggle:l,volume:a,handleVolumeChange:o}},exports.useVideoTime=t=>{var r;const[u,n]=e.useState(0),[a,d]=e.useState(null===(r=t.current)||void 0===r?void 0:r.duration),l=e.useCallback(()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.currentTime)&&n(t.current.currentTime)},[t]),o=e.useCallback(e=>{var r;(null===(r=t.current)||void 0===r?void 0:r.currentTime)&&(t.current.currentTime=e),n(e)},[t]),i=e.useCallback(()=>{var e;(null===(e=t.current)||void 0===e?void 0:e.duration)&&d(t.current.duration)},[t]);return e.useEffect(()=>{const e=null==t?void 0:t.current;if(e)return e.addEventListener("loadedmetadata",i),e.addEventListener("timeupdate",l),()=>{e.removeEventListener("loadedmetadata",i),e.removeEventListener("timeupdate",l)}},[i,l,t]),{currentTime:u,duration:a,handleSeek:o}};
 //# sourceMappingURL=hooks.js.map

package/cjs/components/video/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../../../src/components/video/hooks.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState, RefObject } from 'react';\n\ninterface SoundControls {\n  /** A boolean indicating if the video is muted. */\n  isMuted: boolean;\n  /** handleMuteToggle: A function to toggle the mute state. */\n  handleMuteToggle: () => void;\n  /** A number representing the current volume level (0 to 1). */\n  volume: number;\n  /** A function to change the volume level. */\n  handleVolumeChange: (newVolume: number) => void;\n}\n\n/**\n * A custom hook to manage sound controls (mute and volume) for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoSoundControls = (videoRef: React.RefObject<HTMLVideoElement>): SoundControls => {\n  const [isMuted, setIsMuted] = useState(videoRef.current?.muted);\n  const [volume, setVolume] = useState(1);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      if (typeof isMuted === 'undefined') {\n        setIsMuted(video?.muted);\n      }\n\n      videoRef.current.muted = isMuted;\n      videoRef.current.volume = volume;\n    }\n  }, [isMuted, volume, videoRef]);\n\n  const handleMuteToggle = useCallback(() => {\n    setIsMuted((prevMuted) => !prevMuted);\n  }, []);\n\n  const handleVolumeChange = useCallback((newVolume: number) => {\n    setVolume(newVolume);\n  }, []);\n\n  return {\n    isMuted,\n    handleMuteToggle,\n    volume,\n    handleVolumeChange,\n  };\n};\n\ninterface PlayPause {\n  /** A boolean indicating if the video is currently playing. */\n  isPlaying: boolean;\n  /** A function to toggle between play and pause states. */\n  handlePlayPause: () => void;\n}\n\n/**\n * A custom hook to manage play/pause functionality for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoPlayPause = (videoRef: React.RefObject<HTMLVideoElement>): PlayPause => {\n  const [isPlaying, setIsPlaying] = useState(!videoRef.current?.paused);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n\n    if (video && typeof isPlaying === 'undefined') {\n      setIsPlaying(!video?.paused);\n    }\n\n    const handlePlay = () => {\n      // prevent playing state when autoplay triggers play event on re-entering viewport after video ended\n      !(video.autoplay && video.ended) && setIsPlaying(true);\n    };\n    const handlePause = () => setIsPlaying(false);\n\n    if (video) {\n      video.addEventListener('pause', handlePause);\n\n      // Set initial state (not enough without event listeners due to autoPlay and paused race conditions)\n      setIsPlaying(!video.paused);\n\n      video.addEventListener('play', handlePlay);\n\n      return () => {\n        video.removeEventListener('play', handlePlay);\n        video.removeEventListener('pause', handlePause);\n      };\n    }\n  }, [videoRef]);\n\n  const handlePlayPause = useCallback(() => {\n    if (videoRef?.current) {\n      if (isPlaying) {\n        videoRef.current.pause();\n      } else {\n        videoRef.current.play();\n      }\n      setIsPlaying((prevIsPlaying) => !prevIsPlaying);\n    }\n  }, [isPlaying, videoRef?.current]);\n\n  return {\n    isPlaying,\n    handlePlayPause,\n  };\n};\n\ninterface VideoTime {\n  /** The current playback time. */\n  currentTime: number;\n  /** The total duration of the video. */\n  duration: number;\n  /** A function to seek to a specific time. */\n  handleSeek: (newTime: number) => void;\n}\n\n/**\n * useVideoTime is a custom React hook designed to manage and synchronize the playback time state\n * of a video element with the React component state. It provides an interface to track the current\n * playback time, the total duration of the video, and a method to seek to a specific time in the video.\n * @param {RefObject<HTMLVideoElement>} videoRef - A reference to the HTML video element.\n */\n\nexport const useVideoTime = (videoRef: RefObject<HTMLVideoElement>): VideoTime => {\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(videoRef.current?.duration);\n\n  const handleTimeUpdate = useCallback(() => {\n    if (videoRef.current?.currentTime) {\n      setCurrentTime(videoRef.current.currentTime);\n    }\n  }, [videoRef]);\n\n  const handleSeek = useCallback(\n    (newTime: number) => {\n      if (videoRef.current?.currentTime) {\n        videoRef.current.currentTime = newTime;\n      }\n      setCurrentTime(newTime);\n    },\n    [videoRef],\n  );\n\n  const handleLoadedMetadata = useCallback(() => {\n    if (videoRef.current?.duration) {\n      setDuration(videoRef.current.duration);\n    }\n  }, [videoRef]);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      video.addEventListener('loadedmetadata', handleLoadedMetadata);\n      video.addEventListener('timeupdate', handleTimeUpdate);\n\n      return () => {\n        video.removeEventListener('loadedmetadata', handleLoadedMetadata);\n        video.removeEventListener('timeupdate', handleTimeUpdate);\n      };\n    }\n  }, [handleLoadedMetadata, handleTimeUpdate, videoRef]);\n\n  return {\n    currentTime,\n    duration,\n    handleSeek,\n  };\n};\n\n// TODO: MDX prepared, release it when we have production ready timeline\n// ### useVideoTime\n\n// Use the `useVideoTime` hook to manage the functionality of a custom video timeline, referencing the video element (videoRef in the example below).\n// The `handleSeek` function updates the current playback time of the video.\n// The `currentTime` state represents the current playback time, while the `duration` state indicates the total length of the video.\n\n// > The slider component in the example does not represent a custom control for production quality\n// > and it is included solely for demonstration purposes.\n\n// `currentTime`, `duration`, `handleSeek`\n// ```tsx\n// import { useVideoTime } from '@skodaflow/web-library';\n\n// const videoRef = useRef<HTMLVideoElement>(null);\n// const { currentTime, duration, handleSeek } = useVideoTime(videoRef);\n\n// <Box sx={{ display: 'grid', width: 'max-content' }}>\n//   <Video ref={videoRef} src={mp4ExampleVideo} style={{ gridArea: '1 / 1' }} />\n\n//   <Slider\n//     value={dragging ? tempValue : currentTime}\n//     max={duration}\n//     onChange={handleChange}\n//     onChangeCommitted={handleChangeCommitted}\n//     onMouseDown={handleDragStart}\n//     sx={{\n//       gridArea: '1 / 1',\n//       justifySelf: 'center',\n//       alignSelf: 'end',\n//       width: '95%',\n//     }}\n//   />\n// </Box>\n// ```\n\n// <Canvas of={VideoStories.WithTimeline} />\n"],"names":["videoRef","isPlaying","setIsPlaying","useState","_a","current","paused","useEffect","video","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","useCallback","pause","play","prevIsPlaying","isMuted","setIsMuted","muted","volume","setVolume","handleMuteToggle","prevMuted","handleVolumeChange","newVolume","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"8DA4DkCA,UAChC,MAAOC,EAAWC,GAAgBC,EAAAA,mBAAUC,EAAAJ,EAASK,8BAASC,SAE9DC,EAAAA,WAAU,KACR,MAAMC,EAAQR,aAAQ,EAARA,EAAUK,QAEpBG,QAA8B,IAAdP,GAClBC,IAAcM,aAAK,EAALA,EAAOF,SAGvB,MAAMG,EAAa,OAEfD,EAAME,WAAYF,EAAMG,QAAUT,GAAa,EAAK,EAElDU,EAAc,IAAMV,GAAa,GAEvC,GAAIM,EAQF,OAPAA,EAAMK,iBAAiB,QAASD,GAGhCV,GAAcM,EAAMF,QAEpBE,EAAMK,iBAAiB,OAAQJ,GAExB,KACLD,EAAMM,oBAAoB,OAAQL,GAClCD,EAAMM,oBAAoB,QAASF,EAAY,CAEnD,GACC,CAACZ,IAEJ,MAAMe,EAAkBC,EAAAA,aAAY,MAC9BhB,aAAQ,EAARA,EAAUK,WACRJ,EACFD,EAASK,QAAQY,QAEjBjB,EAASK,QAAQa,OAEnBhB,GAAciB,IAAmBA,IACnC,GACC,CAAClB,EAAWD,aAAQ,EAARA,EAAUK,UAEzB,MAAO,CACLJ,YACAc,kBACD,gCAxFmCf,UACpC,MAAOoB,EAASC,GAAclB,EAAAA,SAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEkB,QAClDC,EAAQC,GAAarB,EAAAA,SAAS,GAErCI,EAAAA,WAAU,KACR,MAAMC,EAAQR,aAAQ,EAARA,EAAUK,QACpBG,SACqB,IAAZY,GACTC,EAAWb,eAAAA,EAAOc,OAGpBtB,EAASK,QAAQiB,MAAQF,EACzBpB,EAASK,QAAQkB,OAASA,EAC5B,GACC,CAACH,EAASG,EAAQvB,IAErB,MAAMyB,EAAmBT,EAAAA,aAAY,KACnCK,GAAYK,IAAeA,GAAU,GACpC,IAEGC,EAAqBX,eAAaY,IACtCJ,EAAUI,EAAU,GACnB,IAEH,MAAO,CACLR,UACAK,mBACAF,SACAI,qBACD,uBA8E0B3B,UAC3B,MAAO6B,EAAaC,GAAkB3B,EAAAA,SAAS,IACxC4B,EAAUC,GAAe7B,EAAAA,SAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,UAErDE,EAAmBjB,EAAAA,aAAY,YACf,UAAhBhB,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEyB,cACpBC,EAAe9B,EAASK,QAAQwB,YAClC,GACC,CAAC7B,IAEEkC,EAAalB,eAChBmB,WACqB,UAAhBnC,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEyB,eACpB7B,EAASK,QAAQwB,YAAcM,GAEjCL,EAAeK,EAAQ,GAEzB,CAACnC,IAGGoC,EAAuBpB,EAAAA,aAAY,YACnB,UAAhBhB,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,WACpBC,EAAYhC,EAASK,QAAQ0B,SAC/B,GACC,CAAC/B,IAeJ,OAbAO,EAAAA,WAAU,KACR,MAAMC,EAAQR,aAAQ,EAARA,EAAUK,QACxB,GAAIG,EAIF,OAHAA,EAAMK,iBAAiB,iBAAkBuB,GACzC5B,EAAMK,iBAAiB,aAAcoB,GAE9B,KACLzB,EAAMM,oBAAoB,iBAAkBsB,GAC5C5B,EAAMM,oBAAoB,aAAcmB,EAAiB,CAE7D,GACC,CAACG,EAAsBH,EAAkBjC,IAErC,CACL6B,cACAE,WACAG,aACD"}
+{"version":3,"file":"hooks.js","sources":["../../../../../src/components/video/hooks.ts"],"sourcesContent":["import React, { useCallback, useEffect, useState, RefObject } from 'react';\n\ninterface SoundControls {\n  /** A boolean indicating if the video is muted. */\n  isMuted: boolean;\n  /** handleMuteToggle: A function to toggle the mute state. */\n  handleMuteToggle: () => void;\n  /** A number representing the current volume level (0 to 1). */\n  volume: number;\n  /** A function to change the volume level. */\n  handleVolumeChange: (newVolume: number) => void;\n}\n\n/**\n * A custom hook to manage sound controls (mute and volume) for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoSoundControls = (videoRef: React.RefObject<HTMLVideoElement>): SoundControls => {\n  const [isMuted, setIsMuted] = useState(videoRef.current?.muted);\n  const [volume, setVolume] = useState(1);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      if (typeof isMuted === 'undefined') {\n        setIsMuted(video?.muted);\n      }\n\n      videoRef.current.muted = isMuted;\n      videoRef.current.volume = volume;\n    }\n  }, [isMuted, volume, videoRef]);\n\n  const handleMuteToggle = useCallback(() => {\n    setIsMuted((prevMuted) => !prevMuted);\n  }, []);\n\n  const handleVolumeChange = useCallback((newVolume: number) => {\n    setVolume(newVolume);\n  }, []);\n\n  return {\n    isMuted,\n    handleMuteToggle,\n    volume,\n    handleVolumeChange,\n  };\n};\n\ninterface PlayPause {\n  /** A boolean indicating if the video is currently playing. */\n  isPlaying: boolean;\n  /** A function to toggle between play and pause states. */\n  handlePlayPause: () => void;\n}\n\n/**\n * A custom hook to manage play/pause functionality for a video element.\n * @param videoRef - A reference to the video element.\n */\nexport const useVideoPlayPause = (videoRef: React.RefObject<HTMLVideoElement>): PlayPause => {\n  const [isPlaying, setIsPlaying] = useState(!videoRef.current?.paused);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n\n    if (video && typeof isPlaying === 'undefined') {\n      setIsPlaying(!video?.paused);\n    }\n\n    const handlePlay = () => {\n      // prevent playing state when autoplay triggers play event on re-entering viewport after video ended\n      !(video.autoplay && video.ended) && setIsPlaying(true);\n    };\n    const handlePause = () => setIsPlaying(false);\n\n    if (video) {\n      video.addEventListener('pause', handlePause);\n\n      // Set initial state (not enough without event listeners due to autoPlay and paused race conditions)\n      setIsPlaying(!video.paused);\n\n      video.addEventListener('play', handlePlay);\n\n      return () => {\n        video.removeEventListener('play', handlePlay);\n        video.removeEventListener('pause', handlePause);\n      };\n    }\n  }, [videoRef]);\n\n  const handlePlayPause = useCallback(() => {\n    if (videoRef?.current) {\n      if (isPlaying) {\n        videoRef.current.pause();\n      } else {\n        videoRef.current.play();\n      }\n      setIsPlaying((prevIsPlaying) => !prevIsPlaying);\n    }\n  }, [isPlaying, videoRef?.current]);\n\n  return {\n    isPlaying,\n    handlePlayPause,\n  };\n};\n\ninterface VideoTime {\n  /** The current playback time. */\n  currentTime: number;\n  /** The total duration of the video. */\n  duration: number;\n  /** A function to seek to a specific time. */\n  handleSeek: (newTime: number) => void;\n}\n\n/**\n * useVideoTime is a custom React hook designed to manage and synchronize the playback time state\n * of a video element with the React component state. It provides an interface to track the current\n * playback time, the total duration of the video, and a method to seek to a specific time in the video.\n * @param {RefObject<HTMLVideoElement>} videoRef - A reference to the HTML video element.\n */\n\nexport const useVideoTime = (videoRef: RefObject<HTMLVideoElement>): VideoTime => {\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(videoRef.current?.duration);\n\n  const handleTimeUpdate = useCallback(() => {\n    if (videoRef.current?.currentTime) {\n      setCurrentTime(videoRef.current.currentTime);\n    }\n  }, [videoRef]);\n\n  const handleSeek = useCallback(\n    (newTime: number) => {\n      if (videoRef.current?.currentTime) {\n        videoRef.current.currentTime = newTime;\n      }\n      setCurrentTime(newTime);\n    },\n    [videoRef],\n  );\n\n  const handleLoadedMetadata = useCallback(() => {\n    if (videoRef.current?.duration) {\n      setDuration(videoRef.current.duration);\n    }\n  }, [videoRef]);\n\n  useEffect(() => {\n    const video = videoRef?.current;\n    if (video) {\n      video.addEventListener('loadedmetadata', handleLoadedMetadata);\n      video.addEventListener('timeupdate', handleTimeUpdate);\n\n      return () => {\n        video.removeEventListener('loadedmetadata', handleLoadedMetadata);\n        video.removeEventListener('timeupdate', handleTimeUpdate);\n      };\n    }\n  }, [handleLoadedMetadata, handleTimeUpdate, videoRef]);\n\n  return {\n    currentTime,\n    duration,\n    handleSeek,\n  };\n};\n\n// TODO: MDX prepared, release it when we have production ready timeline\n// ### useVideoTime\n\n// Use the `useVideoTime` hook to manage the functionality of a custom video timeline, referencing the video element (videoRef in the example below).\n// The `handleSeek` function updates the current playback time of the video.\n// The `currentTime` state represents the current playback time, while the `duration` state indicates the total length of the video.\n\n// > The slider component in the example does not represent a custom control for production quality\n// > and it is included solely for demonstration purposes.\n\n// `currentTime`, `duration`, `handleSeek`\n// ```tsx\n// import { useVideoTime } from '@skodaflow/web-library';\n\n// const videoRef = useRef<HTMLVideoElement>(null);\n// const { currentTime, duration, handleSeek } = useVideoTime(videoRef);\n\n// <Box sx={{ display: 'grid', width: 'max-content' }}>\n//   <Video ref={videoRef} src={mp4ExampleVideo} style={{ gridArea: '1 / 1' }} />\n\n//   <Slider\n//     value={dragging ? tempValue : currentTime}\n//     max={duration}\n//     onChange={handleChange}\n//     onChangeCommitted={handleChangeCommitted}\n//     onMouseDown={handleDragStart}\n//     sx={{\n//       gridArea: '1 / 1',\n//       justifySelf: 'center',\n//       alignSelf: 'end',\n//       width: '95%',\n//     }}\n//   />\n// </Box>\n// ```\n\n// <Canvas of={VideoStories.WithTimeline} />\n"],"names":["videoRef","isPlaying","setIsPlaying","useState","_a","current","paused","useEffect","video","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","useCallback","pause","play","prevIsPlaying","isMuted","setIsMuted","muted","volume","setVolume","handleMuteToggle","prevMuted","handleVolumeChange","newVolume","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"8DA4DkCA,UAChC,MAAOC,EAAWC,GAAgBC,EAAAA,mBAAUC,EAAAJ,EAASK,8BAASC,SAE9DC,EAAAA,UAAU,KACR,MAAMC,EAAQR,aAAQ,EAARA,EAAUK,QAEpBG,QAA8B,IAAdP,GAClBC,IAAcM,aAAK,EAALA,EAAOF,SAGvB,MAAMG,EAAa,OAEfD,EAAME,WAAYF,EAAMG,QAAUT,GAAa,IAE7CU,EAAc,IAAMV,GAAa,GAEvC,GAAIM,EAQF,OAPAA,EAAMK,iBAAiB,QAASD,GAGhCV,GAAcM,EAAMF,QAEpBE,EAAMK,iBAAiB,OAAQJ,GAExB,KACLD,EAAMM,oBAAoB,OAAQL,GAClCD,EAAMM,oBAAoB,QAASF,KAGtC,CAACZ,IAEJ,MAAMe,EAAkBC,EAAAA,YAAY,MAC9BhB,aAAQ,EAARA,EAAUK,WACRJ,EACFD,EAASK,QAAQY,QAEjBjB,EAASK,QAAQa,OAEnBhB,EAAciB,IAAmBA,KAElC,CAAClB,EAAWD,aAAQ,EAARA,EAAUK,UAEzB,MAAO,CACLJ,YACAc,kDAvFkCf,UACpC,MAAOoB,EAASC,GAAclB,EAAAA,SAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEkB,QAClDC,EAAQC,GAAarB,EAAAA,SAAS,GAErCI,EAAAA,UAAU,KACR,MAAMC,EAAQR,aAAQ,EAARA,EAAUK,QACpBG,SACqB,IAAZY,GACTC,EAAWb,eAAAA,EAAOc,OAGpBtB,EAASK,QAAQiB,MAAQF,EACzBpB,EAASK,QAAQkB,OAASA,IAE3B,CAACH,EAASG,EAAQvB,IAErB,MAAMyB,EAAmBT,EAAAA,YAAY,KACnCK,EAAYK,IAAeA,IAC1B,IAEGC,EAAqBX,cAAaY,IACtCJ,EAAUI,IACT,IAEH,MAAO,CACLR,UACAK,mBACAF,SACAI,4CA+EyB3B,UAC3B,MAAO6B,EAAaC,GAAkB3B,EAAAA,SAAS,IACxC4B,EAAUC,GAAe7B,EAAAA,SAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,UAErDE,EAAmBjB,EAAAA,YAAY,YACf,UAAhBhB,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEyB,cACpBC,EAAe9B,EAASK,QAAQwB,cAEjC,CAAC7B,IAEEkC,EAAalB,cAChBmB,WACqB,UAAhBnC,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEyB,eACpB7B,EAASK,QAAQwB,YAAcM,GAEjCL,EAAeK,IAEjB,CAACnC,IAGGoC,EAAuBpB,EAAAA,YAAY,YACnB,UAAhBhB,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,WACpBC,EAAYhC,EAASK,QAAQ0B,WAE9B,CAAC/B,IAeJ,OAbAO,EAAAA,UAAU,KACR,MAAMC,EAAQR,aAAQ,EAARA,EAAUK,QACxB,GAAIG,EAIF,OAHAA,EAAMK,iBAAiB,iBAAkBuB,GACzC5B,EAAMK,iBAAiB,aAAcoB,GAE9B,KACLzB,EAAMM,oBAAoB,iBAAkBsB,GAC5C5B,EAAMM,oBAAoB,aAAcmB,KAG3C,CAACG,EAAsBH,EAAkBjC,IAErC,CACL6B,cACAE,WACAG"}