@skodaflow/web-library 8.0.0 → 8.1.0

package/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 { IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { FC, ReactNode } 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/**\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  children,\n  iconButtonProps,\n  iconProps,\n  customIcon,\n  ...props\n}) => {\n  const { sx, ...restProps } = props || {};\n  const { sx: iconButtonSx, ...restIconButtonProps } = iconButtonProps || {};\n\n  return (\n    <UploadWrapper\n      sx={{\n        borderStyle: 'solid',\n        borderColor: 'onSurface.os500',\n        borderRadius: '4px',\n        cursor: 'default',\n        width: '100px',\n        height: '100px',\n        padding: '0',\n        ...sx,\n      }}\n      {...restProps}\n    >\n      <IconButton\n        sx={{\n          position: 'absolute',\n          right: '4px',\n          top: '4px',\n          zIndex: '1',\n          width: '24px',\n          height: '24px',\n          '& .MuiSvgIcon-root': {\n            fontSize: '17px',\n          },\n          ...iconButtonSx,\n        }}\n        variant=\"filled\"\n        color=\"surface\"\n        {...restIconButtonProps}\n      >\n        {customIcon || <CloseIcon {...iconProps} />}\n      </IconButton>\n      {children}\n    </UploadWrapper>\n  );\n};\n"],"names":["UploadPreview","_a","children","iconButtonProps","iconProps","customIcon","_b","__rest","sx","restProps","_c","iconButtonSx","restIconButtonProps","_jsxs","UploadWrapper","Object","assign","borderStyle","borderColor","borderRadius","cursor","width","height","padding","_jsx","IconButton","position","right","top","zIndex","fontSize","variant","color","CloseIcon"],"mappings":"4PAgCO,MAAMA,EAAyCC,IAAA,IAAAC,SACpDA,EAAQC,gBACRA,EAAeC,UACfA,EAASC,WACTA,GAAUJ,EAGV,MAAMK,EAFEC,EAAAN,EAL4C,CAAA,WAAA,kBAAA,YAAA,gBAOd,CAAA,GAAhCO,GAAEA,GAAEF,EAAKG,EAASF,EAAAD,EAAlB,CAAA,OACAI,EAA+CP,GAAmB,IAAhEK,GAAIG,KAAiBC,EAAmBL,EAAAG,EAA1C,CAAA,OAEN,OACEG,EAACC,EAAaC,OAAAC,OAAA,CACZR,GAAEO,OAAAC,OAAA,CACAC,YAAa,QACbC,YAAa,kBACbC,aAAc,MACdC,OAAQ,UACRC,MAAO,QACPC,OAAQ,QACRC,QAAS,KACNf,IAEDC,EAAS,CAAAP,SAAA,CAEbsB,EAACC,iBACCjB,GAAEO,OAAAC,OAAA,CACAU,SAAU,WACVC,MAAO,MACPC,IAAK,MACLC,OAAQ,IACRR,MAAO,OACPC,OAAQ,OACR,qBAAsB,CACpBQ,SAAU,SAETnB,GAELoB,QAAQ,SACRC,MAAM,WACFpB,EAAmB,CAAAV,SAEtBG,GAAcmB,EAACS,EAASlB,OAAAC,OAAA,GAAKZ,OAE/BF"}
+{"version":3,"file":"UploadPreview.js","sources":["../../../../../src/components/upload/components/uploadPreview/UploadPreview.tsx"],"sourcesContent":["import { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\nimport { IconButton, IconButtonProps, SvgIconProps } from '@mui/material';\nimport { FC, ReactNode } 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/**\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  children,\n  iconButtonProps,\n  iconProps,\n  customIcon,\n  ...props\n}) => {\n  const { sx, ...restProps } = props || {};\n  const { sx: iconButtonSx, ...restIconButtonProps } = iconButtonProps || {};\n\n  return (\n    <UploadWrapper\n      sx={{\n        borderStyle: 'solid',\n        borderColor: 'onSurface.os500',\n        borderRadius: '4px',\n        cursor: 'default',\n        width: '100px',\n        height: '100px',\n        padding: '0',\n        ...sx,\n      }}\n      {...restProps}\n    >\n      <IconButton\n        sx={{\n          position: 'absolute',\n          right: '4px',\n          top: '4px',\n          zIndex: '1',\n          width: '24px',\n          height: '24px',\n          '& .MuiSvgIcon-root': {\n            fontSize: '17px',\n          },\n          ...iconButtonSx,\n        }}\n        variant=\"filled\"\n        color=\"surface\"\n        {...restIconButtonProps}\n      >\n        {customIcon || <CloseIcon {...iconProps} />}\n      </IconButton>\n      {children}\n    </UploadWrapper>\n  );\n};\n"],"names":["UploadPreview","children","iconButtonProps","iconProps","customIcon","props","sx","restProps","iconButtonSx","restIconButtonProps","_jsxs","UploadWrapper","borderStyle","borderColor","borderRadius","cursor","width","height","padding","_jsx","IconButton","position","right","top","zIndex","fontSize","variant","color","CloseIcon"],"mappings":"6NAgCO,MAAMA,EAAwC,EACnDC,WACAC,kBACAC,YACAC,gBACGC,MAEH,MAAMC,GAAEA,KAAOC,GAAcF,GAAS,CAAA,GAC9BC,GAAIE,KAAiBC,GAAwBP,GAAmB,CAAA,EAExE,OACEQ,EAACC,EAAa,CACZL,GAAI,CACFM,YAAa,QACbC,YAAa,kBACbC,aAAc,MACdC,OAAQ,UACRC,MAAO,QACPC,OAAQ,QACRC,QAAS,OACNZ,MAEDC,EAASN,SAAA,CAEbkB,EAACC,EAAU,CACTd,GAAI,CACFe,SAAU,WACVC,MAAO,MACPC,IAAK,MACLC,OAAQ,IACRR,MAAO,OACPC,OAAQ,OACR,qBAAsB,CACpBQ,SAAU,WAETjB,GAELkB,QAAQ,SACRC,MAAM,aACFlB,EAAmBR,SAEtBG,GAAce,EAACS,MAAczB,MAE/BF"}

package/components/upload/components/uploadPreview/UploadPreviewImage.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"tslib";import{jsx as i}from"react/jsx-runtime";import{Box as o}from"@mui/material";function r(r){var{sx:e}=r,s=t(r,["sx"]);return i(o,Object.assign({component:"img",sx:Object.assign({display:"block",position:"absolute",width:"100%",height:"100%",objectFit:"cover",borderRadius:"4px"},e)},s))}export{r as UploadPreviewImage};
+import{jsx as o}from"react/jsx-runtime";import{Box as t}from"@mui/material";function i({sx:i,...r}){return o(t,{component:"img",sx:{display:"block",position:"absolute",width:"100%",height:"100%",objectFit:"cover",borderRadius:"4px",...i},...r})}export{i as UploadPreviewImage};
 //# sourceMappingURL=UploadPreviewImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UploadPreviewImage.js","sources":["../../../../../src/components/upload/components/uploadPreview/UploadPreviewImage.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@mui/material';\n\nexport type UploadPreviewImageProps = BoxProps<'img'>;\n\n/**\n * Component that should be used along with UploadPreview to preview the uploaded image.\n *\n * @see UploadPreview\n */\nexport function UploadPreviewImage({ sx, ...restProps }: UploadPreviewImageProps) {\n  return (\n    <Box\n      component=\"img\"\n      sx={{\n        display: 'block',\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        objectFit: 'cover',\n        borderRadius: '4px',\n        ...sx,\n      }}\n      {...restProps}\n    />\n  );\n}\n"],"names":["UploadPreviewImage","_a","sx","restProps","__rest","_jsx","Box","Object","assign","component","display","position","width","height","objectFit","borderRadius"],"mappings":"2GASM,SAAUA,EAAmBC,GAAA,IAAAC,GAAEA,GAAED,EAAKE,EAASC,EAAAH,EAAlB,QACjC,OACEI,EAACC,EAAGC,OAAAC,OAAA,CACFC,UAAU,MACVP,GAAEK,OAAAC,OAAA,CACAE,QAAS,QACTC,SAAU,WACVC,MAAO,OACPC,OAAQ,OACRC,UAAW,QACXC,aAAc,OACXb,IAEDC,GAGV"}
+{"version":3,"file":"UploadPreviewImage.js","sources":["../../../../../src/components/upload/components/uploadPreview/UploadPreviewImage.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@mui/material';\n\nexport type UploadPreviewImageProps = BoxProps<'img'>;\n\n/**\n * Component that should be used along with UploadPreview to preview the uploaded image.\n *\n * @see UploadPreview\n */\nexport function UploadPreviewImage({ sx, ...restProps }: UploadPreviewImageProps) {\n  return (\n    <Box\n      component=\"img\"\n      sx={{\n        display: 'block',\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        objectFit: 'cover',\n        borderRadius: '4px',\n        ...sx,\n      }}\n      {...restProps}\n    />\n  );\n}\n"],"names":["UploadPreviewImage","sx","restProps","_jsx","Box","component","display","position","width","height","objectFit","borderRadius"],"mappings":"4EASM,SAAUA,GAAmBC,GAAEA,KAAOC,IAC1C,OACEC,EAACC,EAAG,CACFC,UAAU,MACVJ,GAAI,CACFK,QAAS,QACTC,SAAU,WACVC,MAAO,OACPC,OAAQ,OACRC,UAAW,QACXC,aAAc,SACXV,MAEDC,GAGV"}

package/components/upload/components/uploadWrapper/UploadContent.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{Box as t}from"@mui/material";function i(i){var{children:r,sx:o}=i,s=e(i,["children","sx"]);return n(t,Object.assign({sx:Object.assign({display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",margin:"auto",gap:e=>e.spacing(),"& .MuiSvgIcon-root":{fontSize:"20px"}},o)},s,{children:r}))}function r(t){var{children:r,sx:o}=t,s=e(t,["children","sx"]);return n(i,Object.assign({sx:Object.assign({position:"absolute",width:"100%",height:"100%",borderRadius:"inherit",left:0,top:0,zIndex:2,pointerEvents:"none",userSelect:"none",backgroundColor:"success.light"},o)},s,{children:r}))}export{i as UploadContent,r as UploadContentDragging};
+import{jsx as e}from"react/jsx-runtime";import{Box as n}from"@mui/material";function t({children:t,sx:i,...r}){return e(n,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",margin:"auto",gap:e=>e.spacing(),"& .MuiSvgIcon-root":{fontSize:"20px"},...i},...r,children:t})}function i({children:n,sx:i,...r}){return e(t,{sx:{position:"absolute",width:"100%",height:"100%",borderRadius:"inherit",left:0,top:0,zIndex:2,pointerEvents:"none",userSelect:"none",backgroundColor:"success.light",...i},...r,children:n})}export{t as UploadContent,i as UploadContentDragging};
 //# sourceMappingURL=UploadContent.js.map

package/components/upload/components/uploadWrapper/UploadContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadContent.js","sources":["../../../../../src/components/upload/components/uploadWrapper/UploadContent.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { PropsWithChildren } from 'react';\n\ninterface UploadContentProps extends PropsWithChildren<BoxProps> {}\n\n/**\n * Content of UploadWrapper.\n *\n * @see UploadWrapper\n */\nexport function UploadContent({ children, sx, ...restProps }: UploadContentProps) {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        textAlign: 'center',\n        margin: 'auto',\n        gap: (theme) => theme.spacing(),\n        '& .MuiSvgIcon-root': {\n          fontSize: '20px',\n        },\n        ...sx,\n      }}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Content of UploadWrapper when user drags over Upload.\n *\n * @see UploadWrapper\n */\nexport function UploadContentDragging({ children, sx, ...restProps }: UploadContentProps) {\n  return (\n    <UploadContent\n      sx={{\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        borderRadius: 'inherit',\n        left: 0,\n        top: 0,\n        zIndex: 2,\n        pointerEvents: 'none',\n        userSelect: 'none',\n        backgroundColor: 'success.light',\n        ...sx,\n      }}\n      {...restProps}\n    >\n      {children}\n    </UploadContent>\n  );\n}\n"],"names":["UploadContent","_a","children","sx","restProps","__rest","_jsx","Box","Object","assign","display","flexDirection","justifyContent","alignItems","textAlign","margin","gap","theme","spacing","fontSize","UploadContentDragging","position","width","height","borderRadius","left","top","zIndex","pointerEvents","userSelect","backgroundColor"],"mappings":"2GAUM,SAAUA,EAAcC,OAAAC,SAAEA,EAAQC,GAAEA,GAAEF,EAAKG,EAASC,EAAAJ,EAA5B,mBAC5B,OACEK,EAACC,iBACCJ,GAAEK,OAAAC,OAAA,CACAC,QAAS,OACTC,cAAe,SACfC,eAAgB,SAChBC,WAAY,SACZC,UAAW,SACXC,OAAQ,OACRC,IAAMC,GAAUA,EAAMC,UACtB,qBAAsB,CACpBC,SAAU,SAEThB,IAEDC,YAEHF,IAGP,CAOM,SAAUkB,EAAsBnB,OAAAC,SAAEA,EAAQC,GAAEA,GAAEF,EAAKG,EAASC,EAAAJ,EAA5B,mBACpC,OACEK,EAACN,EAAaQ,OAAAC,OAAA,CACZN,kBACEkB,SAAU,WACVC,MAAO,OACPC,OAAQ,OACRC,aAAc,UACdC,KAAM,EACNC,IAAK,EACLC,OAAQ,EACRC,cAAe,OACfC,WAAY,OACZC,gBAAiB,iBACd3B,IAEDC,EAAS,CAAAF,SAEZA,IAGP"}
+{"version":3,"file":"UploadContent.js","sources":["../../../../../src/components/upload/components/uploadWrapper/UploadContent.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { PropsWithChildren } from 'react';\n\ninterface UploadContentProps extends PropsWithChildren<BoxProps> {}\n\n/**\n * Content of UploadWrapper.\n *\n * @see UploadWrapper\n */\nexport function UploadContent({ children, sx, ...restProps }: UploadContentProps) {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        textAlign: 'center',\n        margin: 'auto',\n        gap: (theme) => theme.spacing(),\n        '& .MuiSvgIcon-root': {\n          fontSize: '20px',\n        },\n        ...sx,\n      }}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Content of UploadWrapper when user drags over Upload.\n *\n * @see UploadWrapper\n */\nexport function UploadContentDragging({ children, sx, ...restProps }: UploadContentProps) {\n  return (\n    <UploadContent\n      sx={{\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        borderRadius: 'inherit',\n        left: 0,\n        top: 0,\n        zIndex: 2,\n        pointerEvents: 'none',\n        userSelect: 'none',\n        backgroundColor: 'success.light',\n        ...sx,\n      }}\n      {...restProps}\n    >\n      {children}\n    </UploadContent>\n  );\n}\n"],"names":["UploadContent","children","sx","restProps","_jsx","Box","display","flexDirection","justifyContent","alignItems","textAlign","margin","gap","theme","spacing","fontSize","UploadContentDragging","position","width","height","borderRadius","left","top","zIndex","pointerEvents","userSelect","backgroundColor"],"mappings":"4EAUM,SAAUA,GAAcC,SAAEA,EAAQC,GAAEA,KAAOC,IAC/C,OACEC,EAACC,EAAG,CACFH,GAAI,CACFI,QAAS,OACTC,cAAe,SACfC,eAAgB,SAChBC,WAAY,SACZC,UAAW,SACXC,OAAQ,OACRC,IAAMC,GAAUA,EAAMC,UACtB,qBAAsB,CACpBC,SAAU,WAETb,MAEDC,EAASF,SAEZA,GAGP,CAOM,SAAUe,GAAsBf,SAAEA,EAAQC,GAAEA,KAAOC,IACvD,OACEC,EAACJ,EAAa,CACZE,GAAI,CACFe,SAAU,WACVC,MAAO,OACPC,OAAQ,OACRC,aAAc,UACdC,KAAM,EACNC,IAAK,EACLC,OAAQ,EACRC,cAAe,OACfC,WAAY,OACZC,gBAAiB,mBACdxB,MAEDC,EAASF,SAEZA,GAGP"}

package/components/upload/components/uploadWrapper/UploadWrapper.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"tslib";import{jsx as o}from"react/jsx-runtime";import{Box as e}from"@mui/material";import{getFocusRingStyle as s}from"../../../focusring/focusring.js";function i(i){var{state:a="default",sx:t}=i,n=r(i,["state","sx"]);return o(e,Object.assign({sx:r=>Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({display:"flex",alignItems:"flex-start",justifyContent:"center",cursor:"pointer",position:"relative",borderRadius:"8px",width:"100px",height:"100px",borderWidth:"1px",borderStyle:"dashed",borderColor:"onSurface.os200",backgroundColor:"surface.primary","&:hover":{borderColor:"onSurface.os500"},transition:"background-color .3s ease, border-color .3s ease",outline:"none"},"dragdropping"===a&&{borderColor:"primary.main",backgroundColor:"success.light"}),"error"===a&&{borderColor:"error.main",color:"error.main","&:hover":{borderColor:"error.main"}}),"solid"===a&&{borderColor:"surface.secondary",backgroundColor:"background.primary",borderStyle:"solid","&:hover":{borderColor:"surface.secondary"},cursor:"default"}),s(r,!1,1,":focus-visible")),t)},n))}export{i as UploadWrapper};
+import{jsx as r}from"react/jsx-runtime";import{Box as o}from"@mui/material";import{getFocusRingStyle as e}from"../../../focusring/focusring.js";function i({state:i="default",sx:a,...s}){return r(o,{sx:r=>({display:"flex",alignItems:"flex-start",justifyContent:"center",cursor:"pointer",position:"relative",borderRadius:"8px",width:"100px",height:"100px",borderWidth:"1px",borderStyle:"dashed",borderColor:"onSurface.os200",backgroundColor:"surface.primary","&:hover":{borderColor:"onSurface.os500"},transition:"background-color .3s ease, border-color .3s ease",outline:"none",..."dragdropping"===i&&{borderColor:"primary.main",backgroundColor:"success.light"},..."error"===i&&{borderColor:"error.main",color:"error.main","&:hover":{borderColor:"error.main"}},..."solid"===i&&{borderColor:"surface.secondary",backgroundColor:"background.primary",borderStyle:"solid","&:hover":{borderColor:"surface.secondary"},cursor:"default"},...e(r,!1,1,":focus-visible"),...a}),...s})}export{i as UploadWrapper};
 //# sourceMappingURL=UploadWrapper.js.map

package/components/upload/components/uploadWrapper/UploadWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadWrapper.js","sources":["../../../../../src/components/upload/components/uploadWrapper/UploadWrapper.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { getFocusRingStyle } from '../../../focusring';\n\nexport interface UploadWrapperProps extends BoxProps {\n  /**\n   * Variant that adjusts look of the component\n   */\n  state?: 'dragdropping' | 'error' | 'default' | 'solid';\n}\n\n/**\n * Base wrapper for Upload components\n *\n * @see Upload\n * @see UploadPreview\n */\nexport function UploadWrapper({ state = 'default', sx, ...restProps }: UploadWrapperProps) {\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'center',\n        cursor: 'pointer',\n        position: 'relative',\n        borderRadius: '8px',\n        width: '100px',\n        height: '100px',\n        borderWidth: '1px',\n        borderStyle: 'dashed',\n        borderColor: 'onSurface.os200',\n        backgroundColor: 'surface.primary',\n        '&:hover': {\n          borderColor: 'onSurface.os500',\n        },\n        transition: 'background-color .3s ease, border-color .3s ease',\n        outline: 'none',\n        ...(state === 'dragdropping' && {\n          borderColor: 'primary.main',\n          backgroundColor: 'success.light',\n        }),\n        ...(state === 'error' && {\n          borderColor: 'error.main',\n          color: 'error.main',\n          '&:hover': {\n            borderColor: 'error.main',\n          },\n        }),\n        ...(state === 'solid' && {\n          borderColor: 'surface.secondary',\n          backgroundColor: 'background.primary',\n          borderStyle: 'solid',\n          '&:hover': {\n            borderColor: 'surface.secondary',\n          },\n          cursor: 'default',\n        }),\n        ...getFocusRingStyle(theme, false, 1, ':focus-visible'),\n        ...sx,\n      })}\n      {...restProps}\n    ></Box>\n  );\n}\n"],"names":["UploadWrapper","_a","state","sx","restProps","__rest","_jsx","Box","Object","assign","theme","display","alignItems","justifyContent","cursor","position","borderRadius","width","height","borderWidth","borderStyle","borderColor","backgroundColor","transition","outline","color","getFocusRingStyle"],"mappings":"+KAgBM,SAAUA,EAAcC,OAAAC,MAAEA,EAAQ,UAASC,GAAEA,KAAOC,EAASC,EAAAJ,EAArC,CAAA,QAAA,OAC5B,OACEK,EAACC,EAAGC,OAAAC,OAAA,CACFN,GAAKO,GAAUF,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CACbE,QAAS,OACTC,WAAY,aACZC,eAAgB,SAChBC,OAAQ,UACRC,SAAU,WACVC,aAAc,MACdC,MAAO,QACPC,OAAQ,QACRC,YAAa,MACbC,YAAa,SACbC,YAAa,kBACbC,gBAAiB,kBACjB,UAAW,CACTD,YAAa,mBAEfE,WAAY,mDACZC,QAAS,QACK,iBAAVtB,GAA4B,CAC9BmB,YAAa,eACbC,gBAAiB,kBAEL,UAAVpB,GAAqB,CACvBmB,YAAa,aACbI,MAAO,aACP,UAAW,CACTJ,YAAa,gBAGH,UAAVnB,GAAqB,CACvBmB,YAAa,oBACbC,gBAAiB,qBACjBF,YAAa,QACb,UAAW,CACTC,YAAa,qBAEfP,OAAQ,YAEPY,EAAkBhB,GAAO,EAAO,EAAG,mBACnCP,IAEDC,GAGV"}
+{"version":3,"file":"UploadWrapper.js","sources":["../../../../../src/components/upload/components/uploadWrapper/UploadWrapper.tsx"],"sourcesContent":["import { Box, BoxProps } from '@mui/material';\nimport { getFocusRingStyle } from '../../../focusring';\n\nexport interface UploadWrapperProps extends BoxProps {\n  /**\n   * Variant that adjusts look of the component\n   */\n  state?: 'dragdropping' | 'error' | 'default' | 'solid';\n}\n\n/**\n * Base wrapper for Upload components\n *\n * @see Upload\n * @see UploadPreview\n */\nexport function UploadWrapper({ state = 'default', sx, ...restProps }: UploadWrapperProps) {\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'center',\n        cursor: 'pointer',\n        position: 'relative',\n        borderRadius: '8px',\n        width: '100px',\n        height: '100px',\n        borderWidth: '1px',\n        borderStyle: 'dashed',\n        borderColor: 'onSurface.os200',\n        backgroundColor: 'surface.primary',\n        '&:hover': {\n          borderColor: 'onSurface.os500',\n        },\n        transition: 'background-color .3s ease, border-color .3s ease',\n        outline: 'none',\n        ...(state === 'dragdropping' && {\n          borderColor: 'primary.main',\n          backgroundColor: 'success.light',\n        }),\n        ...(state === 'error' && {\n          borderColor: 'error.main',\n          color: 'error.main',\n          '&:hover': {\n            borderColor: 'error.main',\n          },\n        }),\n        ...(state === 'solid' && {\n          borderColor: 'surface.secondary',\n          backgroundColor: 'background.primary',\n          borderStyle: 'solid',\n          '&:hover': {\n            borderColor: 'surface.secondary',\n          },\n          cursor: 'default',\n        }),\n        ...getFocusRingStyle(theme, false, 1, ':focus-visible'),\n        ...sx,\n      })}\n      {...restProps}\n    ></Box>\n  );\n}\n"],"names":["UploadWrapper","state","sx","restProps","_jsx","Box","theme","display","alignItems","justifyContent","cursor","position","borderRadius","width","height","borderWidth","borderStyle","borderColor","backgroundColor","transition","outline","color","getFocusRingStyle"],"mappings":"gJAgBM,SAAUA,GAAcC,MAAEA,EAAQ,UAASC,GAAEA,KAAOC,IACxD,OACEC,EAACC,EAAG,CACFH,GAAKI,IAAK,CACRC,QAAS,OACTC,WAAY,aACZC,eAAgB,SAChBC,OAAQ,UACRC,SAAU,WACVC,aAAc,MACdC,MAAO,QACPC,OAAQ,QACRC,YAAa,MACbC,YAAa,SACbC,YAAa,kBACbC,gBAAiB,kBACjB,UAAW,CACTD,YAAa,mBAEfE,WAAY,mDACZC,QAAS,UACK,iBAAVnB,GAA4B,CAC9BgB,YAAa,eACbC,gBAAiB,oBAEL,UAAVjB,GAAqB,CACvBgB,YAAa,aACbI,MAAO,aACP,UAAW,CACTJ,YAAa,kBAGH,UAAVhB,GAAqB,CACvBgB,YAAa,oBACbC,gBAAiB,qBACjBF,YAAa,QACb,UAAW,CACTC,YAAa,qBAEfP,OAAQ,cAEPY,EAAkBhB,GAAO,EAAO,EAAG,qBACnCJ,OAEDC,GAGV"}

package/components/video/Video.js

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

package/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":"4NAgCO,MAAMA,EAA8BC,EACzC,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,EAAAd,EAZT,gHAgBA,OACEe,EAACC,EAAGC,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,EAACN,iBAAIG,UAAU,SAASjB,IAAKA,EAAKC,KAAMA,GAAUE,IAC9DD,QAAAA,EACCkB,EAACN,EAAG,CAACT,GAAI,CAAEa,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQd,SACzGU,EAACK,EAAe,CAAA"}
+{"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","src","type","noVidErrorMessage","sourceProps","poster","sx","autoPlay","muted","controls","loop","children","rest","ref","_jsxs","Box","component","display","maxWidth","_jsx","justifyContent","alignItems","width","height","FileMissingIcon"],"mappings":"mMAgCaA,EAA8BC,EACzC,EAEIC,MACAC,OAAO,YACPC,oBACAC,cACAC,SACAC,KACAC,YAAW,EACXC,SAAQ,EACRC,YAAW,EACXC,QAAO,EACPC,cACGC,GAELC,IAGEC,EAACC,EAAG,CACFC,UAAU,QAAO,cACL,QACZX,OAAQA,EACRQ,IAAKA,EACLN,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAI,CACFW,QAAS,QACTC,SAAU,UACPZ,MAEDM,EAAID,SAAA,CAEPA,GAAYQ,EAACJ,EAAG,CAACC,UAAU,SAASf,IAAKA,EAAKC,KAAMA,KAAUE,IAC9DD,GACCgB,EAACJ,EAAG,CAACT,GAAI,CAAEW,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQZ,SACzGQ,EAACK,EAAe,CAAA"}

package/components/video/hooks.js

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

package/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"],"names":["useVideoSoundControls","videoRef","isMuted","setIsMuted","useState","_a","current","muted","volume","setVolume","useEffect","video","handleMuteToggle","useCallback","prevMuted","handleVolumeChange","newVolume","useVideoPlayPause","isPlaying","setIsPlaying","paused","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","pause","play","prevIsPlaying","useVideoTime","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"iEAiBO,MAAMA,EAAyBC,UACpC,MAAOC,EAASC,GAAcC,EAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAEE,QAClDC,EAAQC,GAAaL,EAAS,GAErCM,EAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QACpBK,SACqB,IAAZT,GACTC,EAAWQ,eAAAA,EAAOJ,OAGpBN,EAASK,QAAQC,MAAQL,EACzBD,EAASK,QAAQE,OAASA,IAE3B,CAACN,EAASM,EAAQP,IAErB,MAAMW,EAAmBC,EAAY,KACnCV,EAAYW,IAAeA,IAC1B,IAEGC,EAAqBF,EAAaG,IACtCP,EAAUO,IACT,IAEH,MAAO,CACLd,UACAU,mBACAJ,SACAO,uBAeSE,EAAqBhB,UAChC,MAAOiB,EAAWC,GAAgBf,YAAUC,EAAAJ,EAASK,8BAASc,SAE9DV,EAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QAEpBK,QAA8B,IAAdO,GAClBC,IAAcR,aAAK,EAALA,EAAOS,SAGvB,MAAMC,EAAa,OAEfV,EAAMW,WAAYX,EAAMY,QAAUJ,GAAa,IAE7CK,EAAc,IAAML,GAAa,GAEvC,GAAIR,EAQF,OAPAA,EAAMc,iBAAiB,QAASD,GAGhCL,GAAcR,EAAMS,QAEpBT,EAAMc,iBAAiB,OAAQJ,GAExB,KACLV,EAAMe,oBAAoB,OAAQL,GAClCV,EAAMe,oBAAoB,QAASF,KAGtC,CAACvB,IAEJ,MAAM0B,EAAkBd,EAAY,MAC9BZ,aAAQ,EAARA,EAAUK,WACRY,EACFjB,EAASK,QAAQsB,QAEjB3B,EAASK,QAAQuB,OAEnBV,EAAcW,IAAmBA,KAElC,CAACZ,EAAWjB,aAAQ,EAARA,EAAUK,UAEzB,MAAO,CACLY,YACAS,oBAoBSI,EAAgB9B,UAC3B,MAAO+B,EAAaC,GAAkB7B,EAAS,IACxC8B,EAAUC,GAAe/B,EAAyB,QAAhBC,EAAAJ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE6B,UAErDE,EAAmBvB,EAAY,YACf,UAAhBZ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,cACpBC,EAAehC,EAASK,QAAQ0B,cAEjC,CAAC/B,IAEEoC,EAAaxB,EAChByB,WACqB,UAAhBrC,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE2B,eACpB/B,EAASK,QAAQ0B,YAAcM,GAEjCL,EAAeK,IAEjB,CAACrC,IAGGsC,EAAuB1B,EAAY,YACnB,UAAhBZ,EAASK,eAAO,IAAAD,OAAA,EAAAA,EAAE6B,WACpBC,EAAYlC,EAASK,QAAQ4B,WAE9B,CAACjC,IAeJ,OAbAS,EAAU,KACR,MAAMC,EAAQV,aAAQ,EAARA,EAAUK,QACxB,GAAIK,EAIF,OAHAA,EAAMc,iBAAiB,iBAAkBc,GACzC5B,EAAMc,iBAAiB,aAAcW,GAE9B,KACLzB,EAAMe,oBAAoB,iBAAkBa,GAC5C5B,EAAMe,oBAAoB,aAAcU,KAG3C,CAACG,EAAsBH,EAAkBnC,IAErC,CACL+B,cACAE,WACAG"}
+{"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().catch(() => {});\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"],"names":["useVideoSoundControls","videoRef","isMuted","setIsMuted","useState","current","muted","volume","setVolume","useEffect","video","handleMuteToggle","useCallback","prevMuted","handleVolumeChange","newVolume","useVideoPlayPause","isPlaying","setIsPlaying","paused","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","pause","play","catch","prevIsPlaying","useVideoTime","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"iEAiBO,MAAMA,EAAyBC,IACpC,MAAOC,EAASC,GAAcC,EAASH,EAASI,SAASC,QAClDC,EAAQC,GAAaJ,EAAS,GAErCK,EAAU,KACR,MAAMC,EAAQT,GAAUI,QACpBK,SACqB,IAAZR,GACTC,EAAWO,GAAOJ,OAGpBL,EAASI,QAAQC,MAAQJ,EACzBD,EAASI,QAAQE,OAASA,IAE3B,CAACL,EAASK,EAAQN,IAErB,MAAMU,EAAmBC,EAAY,KACnCT,EAAYU,IAAeA,IAC1B,IAEGC,EAAqBF,EAAaG,IACtCP,EAAUO,IACT,IAEH,MAAO,CACLb,UACAS,mBACAJ,SACAO,uBAeSE,EAAqBf,IAChC,MAAOgB,EAAWC,GAAgBd,GAAUH,EAASI,SAASc,QAE9DV,EAAU,KACR,MAAMC,EAAQT,GAAUI,QAEpBK,QAA8B,IAAdO,GAClBC,GAAcR,GAAOS,QAGvB,MAAMC,EAAa,OAEfV,EAAMW,WAAYX,EAAMY,QAAUJ,GAAa,IAE7CK,EAAc,IAAML,GAAa,GAEvC,GAAIR,EAQF,OAPAA,EAAMc,iBAAiB,QAASD,GAGhCL,GAAcR,EAAMS,QAEpBT,EAAMc,iBAAiB,OAAQJ,GAExB,KACLV,EAAMe,oBAAoB,OAAQL,GAClCV,EAAMe,oBAAoB,QAASF,KAGtC,CAACtB,IAEJ,MAAMyB,EAAkBd,EAAY,KAC9BX,GAAUI,UACRY,EACFhB,EAASI,QAAQsB,QAEjB1B,EAASI,QAAQuB,OAAOC,MAAM,QAEhCX,EAAcY,IAAmBA,KAElC,CAACb,EAAWhB,GAAUI,UAEzB,MAAO,CACLY,YACAS,oBAoBSK,EAAgB9B,IAC3B,MAAO+B,EAAaC,GAAkB7B,EAAS,IACxC8B,EAAUC,GAAe/B,EAASH,EAASI,SAAS6B,UAErDE,EAAmBxB,EAAY,KAC/BX,EAASI,SAAS2B,aACpBC,EAAehC,EAASI,QAAQ2B,cAEjC,CAAC/B,IAEEoC,EAAazB,EAChB0B,IACKrC,EAASI,SAAS2B,cACpB/B,EAASI,QAAQ2B,YAAcM,GAEjCL,EAAeK,IAEjB,CAACrC,IAGGsC,EAAuB3B,EAAY,KACnCX,EAASI,SAAS6B,UACpBC,EAAYlC,EAASI,QAAQ6B,WAE9B,CAACjC,IAeJ,OAbAQ,EAAU,KACR,MAAMC,EAAQT,GAAUI,QACxB,GAAIK,EAIF,OAHAA,EAAMc,iBAAiB,iBAAkBe,GACzC7B,EAAMc,iBAAiB,aAAcY,GAE9B,KACL1B,EAAMe,oBAAoB,iBAAkBc,GAC5C7B,EAAMe,oBAAoB,aAAcW,KAG3C,CAACG,EAAsBH,EAAkBnC,IAErC,CACL+B,cACAE,WACAG"}