@skodaflow/web-library 8.0.1 → 8.2.0

package/cjs/components/textAndCta/TextAndCta.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAndCta.js","sources":["../../../../../src/components/textAndCta/TextAndCta.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, ElementType } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport { Label, LabelProps } from '@/src/components/label';\n\nexport interface TextAndCtaProps extends BoxProps<ElementType> {\n  /**\n   * Top label above the headlines\n   */\n  label?: ReactNode;\n  /**\n   * Label customization\n   */\n  labelProps?: LabelProps;\n  /**\n   * Main Headline at the top\n   */\n  headline?: ReactNode;\n  /**\n   * Headline customization\n   */\n  headlineProps?: TypographyProps<ElementType>;\n  /**\n   * Main Headline at the top\n   */\n  subheadline?: ReactNode;\n  /**\n   * Subheading customization\n   */\n  subheadlineProps?: TypographyProps<ElementType>;\n  /**\n   * Main text body\n   */\n  body?: ReactNode;\n  /**\n   * Body text customization\n   */\n  bodyProps?: TypographyProps<ElementType>;\n  /**\n   * Bottom CTA buttons\n   */\n  buttons?: ReactNode;\n  /**\n   * Body text customization\n   */\n  buttonsProps?: BoxProps<ElementType>;\n}\n\nexport const TextAndCta: React.FC<TextAndCtaProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      label,\n      labelProps,\n      headline,\n      headlineProps,\n      subheadline,\n      subheadlineProps,\n      body,\n      bodyProps,\n      buttons,\n      buttonsProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: labelSx, ...restLabelProps } = labelProps || {};\n    const { sx: headlineSx, ...restHeadlineProps } = headlineProps || {};\n    const { sx: subHeadlineSx, ...restSubHeadlineProps } = subheadlineProps || {};\n    const { sx: bodySx, ...restBodyProps } = bodyProps || {};\n    const { sx: buttonsSx, ...restButtonsProps } = buttonsProps || {};\n\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'flex-start',\n          justifyContent: 'flex-start',\n          p: 3,\n          width: '320px',\n          maxWidth: '100%',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        {label && (\n          <Label sx={{ mb: 1, ...labelSx }} {...restLabelProps}>\n            {label}\n          </Label>\n        )}\n        {headline && (\n          <Typography variant=\"h4\" sx={{ display: 'block', mb: 1, ...headlineSx }} {...restHeadlineProps}>\n            {headline}\n          </Typography>\n        )}\n        {subheadline && (\n          <Typography\n            variant=\"subheadline\"\n            sx={{ display: 'block', mb: 1, ...subHeadlineSx }}\n            {...restSubHeadlineProps}\n          >\n            {subheadline}\n          </Typography>\n        )}\n        {body && (\n          <Typography sx={{ display: 'block', mb: 2, ...bodySx }} {...restBodyProps}>\n            {body}\n          </Typography>\n        )}\n        {children}\n        {buttons && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: { xs: 'column', md: 'row' },\n              alignItems: { xs: 'stretch', md: 'center' },\n              justifyContent: 'stretch',\n              alignSelf: 'stretch',\n              gap: 1,\n              ...buttonsSx,\n            }}\n            {...restButtonsProps}\n          >\n            {buttons}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["TextAndCta","forwardRef","_a","ref","sx","children","label","labelProps","headline","headlineProps","subheadline","subheadlineProps","body","bodyProps","buttons","buttonsProps","rest","__rest","_b","labelSx","restLabelProps","_c","headlineSx","restHeadlineProps","_d","subHeadlineSx","restSubHeadlineProps","_e","bodySx","restBodyProps","_f","buttonsSx","restButtonsProps","_jsxs","Box","Object","assign","display","flexDirection","alignItems","justifyContent","p","width","maxWidth","_jsx","Label","mb","Typography","variant","xs","md","alignSelf","gap"],"mappings":"gJA+CO,MAAMA,EAAwCC,EAAAA,WACnD,CACEC,EAeAC,KAfA,IAAAC,GACEA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,SACVA,EAAQC,cACRA,EAAaC,YACbA,EAAWC,iBACXA,EAAgBC,KAChBA,EAAIC,UACJA,EAASC,QACTA,EAAOC,aACPA,GAAYb,EACTc,EAAIC,EAAAA,OAAAf,EAbT,CAAA,KAAA,WAAA,QAAA,aAAA,WAAA,gBAAA,cAAA,mBAAA,OAAA,YAAA,UAAA,iBAiBA,MAAMgB,EAAqCX,GAAc,IAAjDH,GAAIe,KAAYC,EAAcH,EAAAA,OAAAC,EAAhC,CAAA,OACAG,EAA2CZ,GAAiB,IAA1DL,GAAIkB,KAAeC,EAAiBN,EAAAA,OAAAI,EAAtC,CAAA,OACAG,EAAiDb,GAAoB,IAAnEP,GAAIqB,KAAkBC,EAAoBT,EAAAA,OAAAO,EAA5C,CAAA,OACAG,EAAmCd,GAAa,IAA9CT,GAAIwB,KAAWC,EAAaZ,EAAAA,OAAAU,EAA9B,CAAA,OACAG,EAAyCf,GAAgB,IAAvDX,GAAI2B,KAAcC,EAAgBf,EAAAA,OAAAa,EAApC,CAAA,OAEN,OACEG,EAAAA,KAACC,EAAAA,IAAGC,OAAAC,OAAA,CACFhC,GAAE+B,OAAAC,OAAA,CACAC,QAAS,OACTC,cAAe,SACfC,WAAY,aACZC,eAAgB,aAChBC,EAAG,EACHC,MAAO,QACPC,SAAU,QACPvC,GAELD,IAAKA,GACDa,EAAI,CAAAX,SAAA,CAEPC,GACCsC,EAAAA,IAACC,EAAAA,MAAKV,OAAAC,OAAA,CAAChC,kBAAM0C,GAAI,GAAM3B,IAAeC,EAAc,CAAAf,SACjDC,KAGJE,GACCoC,EAAAA,IAACG,4BAAWC,QAAQ,KAAK5C,GAAE+B,OAAAC,OAAA,CAAIC,QAAS,QAASS,GAAI,GAAMxB,IAAkBC,EAAiB,CAAAlB,SAC3FG,KAGJE,GACCkC,EAAAA,IAACG,EAAAA,WAAUZ,OAAAC,OAAA,CACTY,QAAQ,cACR5C,GAAE+B,OAAAC,OAAA,CAAIC,QAAS,QAASS,GAAI,GAAMrB,IAC9BC,EAAoB,CAAArB,SAEvBK,KAGJE,GACCgC,EAAAA,IAACG,EAAAA,WAAUZ,OAAAC,OAAA,CAAChC,kBAAMiC,QAAS,QAASS,GAAI,GAAMlB,IAAcC,EAAa,CAAAxB,SACtEO,KAGJP,EACAS,GACC8B,EAAAA,IAACV,EAAAA,IAAGC,OAAAC,OAAA,CACFhC,kBACEiC,QAAS,OACTC,cAAe,CAAEW,GAAI,SAAUC,GAAI,OACnCX,WAAY,CAAEU,GAAI,UAAWC,GAAI,UACjCV,eAAgB,UAChBW,UAAW,UACXC,IAAK,GACFrB,IAEDC,EAAgB,CAAA3B,SAEnBS"}
+{"version":3,"file":"TextAndCta.js","sources":["../../../../../src/components/textAndCta/TextAndCta.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, ElementType } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { Label, LabelProps } from '@/src/components/label';\n\nexport interface TextAndCtaProps extends BoxProps<ElementType> {\n  /**\n   * Top label above the headlines\n   */\n  label?: ReactNode;\n  /**\n   * Label customization\n   */\n  labelProps?: LabelProps;\n  /**\n   * Main Headline at the top\n   */\n  headline?: ReactNode;\n  /**\n   * Headline customization\n   */\n  headlineProps?: TypographyProps<ElementType>;\n  /**\n   * Main Headline at the top\n   */\n  subheadline?: ReactNode;\n  /**\n   * Subheading customization\n   */\n  subheadlineProps?: TypographyProps<ElementType>;\n  /**\n   * Main text body\n   */\n  body?: ReactNode;\n  /**\n   * Body text customization\n   */\n  bodyProps?: TypographyProps<ElementType>;\n  /**\n   * Bottom CTA buttons\n   */\n  buttons?: ReactNode;\n  /**\n   * Body text customization\n   */\n  buttonsProps?: BoxProps<ElementType>;\n}\n\nexport const TextAndCta: React.FC<TextAndCtaProps> = forwardRef(\n  (\n    {\n      sx,\n      children,\n      label,\n      labelProps,\n      headline,\n      headlineProps,\n      subheadline,\n      subheadlineProps,\n      body,\n      bodyProps,\n      buttons,\n      buttonsProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: labelSx, ...restLabelProps } = labelProps || {};\n    const { sx: headlineSx, ...restHeadlineProps } = headlineProps || {};\n    const { sx: subHeadlineSx, ...restSubHeadlineProps } = subheadlineProps || {};\n    const { sx: bodySx, ...restBodyProps } = bodyProps || {};\n    const { sx: buttonsSx, ...restButtonsProps } = buttonsProps || {};\n\n    return (\n      <Box\n        sx={sxOverride(\n          {\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            justifyContent: 'flex-start',\n            p: 3,\n            width: '320px',\n            maxWidth: '100%',\n          },\n          sx,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {label && (\n          <Label sx={sxOverride({ mb: 1 }, labelSx)} {...restLabelProps}>\n            {label}\n          </Label>\n        )}\n        {headline && (\n          <Typography variant=\"h4\" sx={sxOverride({ display: 'block', mb: 1 }, headlineSx)} {...restHeadlineProps}>\n            {headline}\n          </Typography>\n        )}\n        {subheadline && (\n          <Typography\n            variant=\"subheadline\"\n            sx={sxOverride({ display: 'block', mb: 1 }, subHeadlineSx)}\n            {...restSubHeadlineProps}\n          >\n            {subheadline}\n          </Typography>\n        )}\n        {body && (\n          <Typography sx={sxOverride({ display: 'block', mb: 2 }, bodySx)} {...restBodyProps}>\n            {body}\n          </Typography>\n        )}\n        {children}\n        {buttons && (\n          <Box\n            sx={sxOverride(\n              {\n                display: 'flex',\n                flexDirection: { xs: 'column', md: 'row' },\n                alignItems: { xs: 'stretch', md: 'center' },\n                justifyContent: 'stretch',\n                alignSelf: 'stretch',\n                gap: 1,\n              },\n              buttonsSx,\n            )}\n            {...restButtonsProps}\n          >\n            {buttons}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["TextAndCta","forwardRef","sx","children","label","labelProps","headline","headlineProps","subheadline","subheadlineProps","body","bodyProps","buttons","buttonsProps","rest","ref","labelSx","restLabelProps","headlineSx","restHeadlineProps","subHeadlineSx","restSubHeadlineProps","bodySx","restBodyProps","buttonsSx","restButtonsProps","_jsxs","Box","sxOverride","display","flexDirection","alignItems","justifyContent","p","width","maxWidth","_jsx","Label","mb","Typography","variant","xs","md","alignSelf","gap"],"mappings":"+KAgDO,MAAMA,EAAwCC,EAAAA,WACnD,EAEIC,KACAC,WACAC,QACAC,aACAC,WACAC,gBACAC,cACAC,mBACAC,OACAC,YACAC,UACAC,kBACGC,GAELC,KAEA,MAAQb,GAAIc,KAAYC,GAAmBZ,GAAc,CAAA,GACjDH,GAAIgB,KAAeC,GAAsBZ,GAAiB,CAAA,GAC1DL,GAAIkB,KAAkBC,GAAyBZ,GAAoB,CAAA,GACnEP,GAAIoB,KAAWC,GAAkBZ,GAAa,CAAA,GAC9CT,GAAIsB,KAAcC,GAAqBZ,GAAgB,CAAA,EAE/D,OACEa,OAACC,EAAAA,KACCzB,GAAI0B,EAAAA,WACF,CACEC,QAAS,OACTC,cAAe,SACfC,WAAY,aACZC,eAAgB,aAChBC,EAAG,EACHC,MAAO,QACPC,SAAU,QAEZjC,GAEFa,IAAKA,KACDD,EAAIX,SAAA,CAEPC,GACCgC,MAACC,EAAAA,MAAK,CAACnC,GAAI0B,EAAAA,WAAW,CAAEU,GAAI,GAAKtB,MAAcC,EAAcd,SAC1DC,IAGJE,GACC8B,EAAAA,IAACG,EAAAA,WAAU,CAACC,QAAQ,KAAKtC,GAAI0B,EAAAA,WAAW,CAAEC,QAAS,QAASS,GAAI,GAAKpB,MAAiBC,EAAiBhB,SACpGG,IAGJE,GACC4B,EAAAA,IAACG,EAAAA,WAAU,CACTC,QAAQ,cACRtC,GAAI0B,aAAW,CAAEC,QAAS,QAASS,GAAI,GAAKlB,MACxCC,EAAoBlB,SAEvBK,IAGJE,GACC0B,MAACG,EAAAA,WAAU,CAACrC,GAAI0B,EAAAA,WAAW,CAAEC,QAAS,QAASS,GAAI,GAAKhB,MAAaC,EAAapB,SAC/EO,IAGJP,EACAS,GACCwB,EAAAA,IAACT,EAAAA,IAAG,CACFzB,GAAI0B,aACF,CACEC,QAAS,OACTC,cAAe,CAAEW,GAAI,SAAUC,GAAI,OACnCX,WAAY,CAAEU,GAAI,UAAWC,GAAI,UACjCV,eAAgB,UAChBW,UAAW,UACXC,IAAK,GAEPpB,MAEEC,EAAgBtB,SAEnBS"}

package/cjs/components/tooltipHeader/TooltipHeader.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),i=require("@mui/material");exports.TooltipHeader=o=>{var{children:a,sx:s,className:t}=o,n=e.__rest(o,["children","sx","className"]);return r.jsx(i.Typography,Object.assign({sx:Object.assign({display:"block",maxWidth:"none",mt:"-24px",mb:"12px",mx:"-24px",py:"16px",px:"24px",backgroundColor:"onSurface.os800",color:"onSurface.os0",borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"},s),variant:"caption2",component:"h4",className:["FlowTooltip-header",t].filter(Boolean).join(" ")},n,{children:a}))};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("../../utils/sxOverride/sxOverride.js");exports.TooltipHeader=({children:o,sx:a,className:s,...t})=>e.jsx(r.Typography,{sx:i.sxOverride({display:"block",maxWidth:"none",mt:"-24px",mb:"12px",mx:"-24px",py:"16px",px:"24px",backgroundColor:"onSurface.os800",color:"onSurface.os0",borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"},a),variant:"caption2",component:"h4",className:["FlowTooltip-header",s].filter(Boolean).join(" "),...t,children:o});
 //# sourceMappingURL=TooltipHeader.js.map

package/cjs/components/tooltipHeader/TooltipHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipHeader.js","sources":["../../../../../src/components/tooltipHeader/TooltipHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Typography, TypographyProps } from '@mui/material';\n\nexport interface TooltipHeaderProps extends TypographyProps {}\n\n/**\n * Headline for @mui tooltip, that should be passed as first element in title:\n *  <Tooltip title={<>\n *    <TooltipHeader>Headline</TooltipHeader>\n *    {children}\n *  </>} />\n */\nexport const TooltipHeader = ({ children, sx, className, ...rest }: TooltipHeaderProps) => {\n  return (\n    <Typography\n      sx={{\n        display: 'block',\n        maxWidth: 'none',\n        // move to the sides of tooltip\n        mt: '-24px',\n        mb: '12px',\n        mx: '-24px',\n        // spacing\n        py: '16px',\n        px: '24px',\n        // style\n        backgroundColor: 'onSurface.os800',\n        color: 'onSurface.os0',\n        borderTopLeftRadius: 'inherit',\n        borderTopRightRadius: 'inherit',\n        // other variants are controlled from tooltip.theme.ts\n        ...sx,\n      }}\n      variant=\"caption2\"\n      component=\"h4\"\n      className={['FlowTooltip-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"names":["_a","children","sx","className","rest","__rest","_jsx","Typography","Object","assign","display","maxWidth","mt","mb","mx","py","px","backgroundColor","color","borderTopLeftRadius","borderTopRightRadius","variant","component","filter","Boolean","join"],"mappings":"oHAY8BA,QAAAC,SAAEA,EAAQC,GAAEA,EAAEC,UAAEA,KAAcC,EAAIC,EAAAA,OAAAL,EAAlC,CAAA,WAAA,KAAA,cAC5B,OACEM,MAACC,EAAAA,WAAUC,OAAAC,OAAA,CACTP,GAAEM,OAAAC,OAAA,CACAC,QAAS,QACTC,SAAU,OAEVC,GAAI,QACJC,GAAI,OACJC,GAAI,QAEJC,GAAI,OACJC,GAAI,OAEJC,gBAAiB,kBACjBC,MAAO,gBACPC,oBAAqB,UACrBC,qBAAsB,WAEnBlB,GAELmB,QAAQ,WACRC,UAAU,KACVnB,UAAW,CAAC,qBAAsBA,GAAWoB,OAAOC,SAASC,KAAK,MAC9DrB,EAAI,CAAAH,SAEPA"}
+{"version":3,"file":"TooltipHeader.js","sources":["../../../../../src/components/tooltipHeader/TooltipHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Typography, TypographyProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface TooltipHeaderProps extends TypographyProps {}\n\n/**\n * Headline for @mui tooltip, that should be passed as first element in title:\n *  <Tooltip title={<>\n *    <TooltipHeader>Headline</TooltipHeader>\n *    {children}\n *  </>} />\n */\nexport const TooltipHeader = ({ children, sx, className, ...rest }: TooltipHeaderProps) => {\n  return (\n    <Typography\n      sx={sxOverride(\n        {\n          display: 'block',\n          maxWidth: 'none',\n          // move to the sides of tooltip\n          mt: '-24px',\n          mb: '12px',\n          mx: '-24px',\n          // spacing\n          py: '16px',\n          px: '24px',\n          // style\n          backgroundColor: 'onSurface.os800',\n          color: 'onSurface.os0',\n          borderTopLeftRadius: 'inherit',\n          borderTopRightRadius: 'inherit',\n          // other variants are controlled from tooltip.theme.ts\n        },\n        sx,\n      )}\n      variant=\"caption2\"\n      component=\"h4\"\n      className={['FlowTooltip-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </Typography>\n  );\n};\n"],"names":["children","sx","className","rest","_jsx","Typography","sxOverride","display","maxWidth","mt","mb","mx","py","px","backgroundColor","color","borderTopLeftRadius","borderTopRightRadius","variant","component","filter","Boolean","join"],"mappings":"mJAa6B,EAAGA,WAAUC,KAAIC,eAAcC,KAExDC,MAACC,EAAAA,YACCJ,GAAIK,EAAAA,WACF,CACEC,QAAS,QACTC,SAAU,OAEVC,GAAI,QACJC,GAAI,OACJC,GAAI,QAEJC,GAAI,OACJC,GAAI,OAEJC,gBAAiB,kBACjBC,MAAO,gBACPC,oBAAqB,UACrBC,qBAAsB,WAGxBhB,GAEFiB,QAAQ,WACRC,UAAU,KACVjB,UAAW,CAAC,qBAAsBA,GAAWkB,OAAOC,SAASC,KAAK,QAC9DnB,EAAIH,SAEPA"}

package/cjs/components/upload/Upload.js

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

package/cjs/components/upload/components/uploadList/UploadList.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),r=require("react/jsx-runtime"),i=require("@mui/material");exports.UploadList=s=>{var{children:t,sx:a}=s,n=e.__rest(s,["children","sx"]);return r.jsx(i.List,Object.assign({sx:Object.assign({padding:"4px",width:"100%",height:"100%",overflowY:"auto"},a)},n,{children:t}))};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("../../../../utils/sxOverride/sxOverride.js");exports.UploadList=({children:s,sx:t,...d})=>e.jsx(r.List,{sx:i.sxOverride({padding:"4px",width:"100%",height:"100%",overflowY:"auto"},t),...d,children:s});
 //# sourceMappingURL=UploadList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UploadList.js","sources":["../../../../../../../src/components/upload/components/uploadList/UploadList.tsx"],"sourcesContent":["import { List, ListProps } from '@mui/material';\nimport { FC } from 'react';\n\n/**\n * Styled List component for Upload component.\n *\n * @see List\n * @see Upload\n */\nexport const UploadList: FC<ListProps> = ({ children, sx, ...restProps }) => {\n  return (\n    <List sx={{ padding: '4px', width: '100%', height: '100%', overflowY: 'auto', ...sx }} {...restProps}>\n      {children}\n    </List>\n  );\n};\n"],"names":["_a","children","sx","restProps","__rest","_jsx","List","Object","assign","padding","width","height","overflowY"],"mappings":"iHAS0CA,QAAAC,SAAEA,EAAQC,GAAEA,GAAEF,EAAKG,EAASC,EAAAA,OAAAJ,EAA5B,mBACxC,OACEK,MAACC,EAAAA,KAAIC,OAAAC,OAAA,CAACN,GAAEK,OAAAC,OAAA,CAAIC,QAAS,MAAOC,MAAO,OAAQC,OAAQ,OAAQC,UAAW,QAAWV,IAAUC,EAAS,CAAAF,SACjGA"}
+{"version":3,"file":"UploadList.js","sources":["../../../../../../../src/components/upload/components/uploadList/UploadList.tsx"],"sourcesContent":["import { List, ListProps } from '@mui/material';\nimport { FC } from 'react';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\n/**\n * Styled List component for Upload component.\n *\n * @see List\n * @see Upload\n */\nexport const UploadList: FC<ListProps> = ({ children, sx, ...restProps }) => {\n  return (\n    <List sx={sxOverride({ padding: '4px', width: '100%', height: '100%', overflowY: 'auto' }, sx)} {...restProps}>\n      {children}\n    </List>\n  );\n};\n"],"names":["children","sx","restProps","_jsx","List","sxOverride","padding","width","height","overflowY"],"mappings":"sJAUyC,EAAGA,WAAUC,QAAOC,KAEzDC,EAAAA,IAACC,EAAAA,KAAI,CAACH,GAAII,EAAAA,WAAW,CAAEC,QAAS,MAAOC,MAAO,OAAQC,OAAQ,OAAQC,UAAW,QAAUR,MAASC,EAASF,SAC1GA"}

package/cjs/components/upload/components/uploadList/UploadListItem.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),s=require("react/jsx-runtime"),r=require("@mui/material");exports.UploadListItem=function(t){var{children:i,linearProgressProps:o={},sx:n}=t,a=e.__rest(t,["children","linearProgressProps","sx"]);const{sx:l}=o,u=e.__rest(o,["sx"]);return s.jsxs(r.ListItem,Object.assign({component:"li",sx:Object.assign({position:"relative",margin:0,py:1,px:2,borderRadius:"4px",outline:"0","&:not(:last-child):after":{content:'""',position:"absolute",left:0,bottom:0,height:"1px",width:"100%",backgroundColor:"surface.secondary"},"&:focus-visible":{backgroundColor:"surface.primary"}},n),disableGutters:!0},a,{children:[i,void 0!==(null==o?void 0:o.value)&&null!==(null==o?void 0:o.value)&&s.jsx(r.LinearProgress,Object.assign({variant:"determinate",sx:Object.assign({position:"absolute",bottom:0,left:0,width:"100%",height:"2px",zIndex:"1"},l)},u))]}))};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("../../../../utils/sxOverride/sxOverride.js");exports.UploadListItem=function({children:i,linearProgressProps:s={},sx:o,...n}){const{sx:a,...l}=s;return e.jsxs(r.ListItem,{component:"li",sx:t.sxOverride({position:"relative",margin:0,py:1,px:2,borderRadius:"4px",outline:"0","&:not(:last-child):after":{content:'""',position:"absolute",left:0,bottom:0,height:"1px",width:"100%",backgroundColor:"surface.secondary"},"&:focus-visible":{backgroundColor:"surface.primary"}},o),disableGutters:!0,...n,children:[i,null!=s?.value&&e.jsx(r.LinearProgress,{variant:"determinate",sx:t.sxOverride({position:"absolute",bottom:0,left:0,width:"100%",height:"2px",zIndex:"1"},a),...l})]})};
 //# sourceMappingURL=UploadListItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UploadListItem.js","sources":["../../../../../../../src/components/upload/components/uploadList/UploadListItem.tsx"],"sourcesContent":["import { LinearProgress, LinearProgressProps, ListItem, ListItemProps } from '@mui/material';\n\nexport interface UploadListItemProps extends ListItemProps {\n  /**\n   * Properties that will be passed to LinearProgress\n   */\n  linearProgressProps?: LinearProgressProps;\n}\n\n/**\n * ListItem component styled for UploadList.\n *\n * @param children\n * @param linearProgressProps\n * @param sx\n * @param restProps\n *\n * @see UploadList\n * @see ListItem\n */\nexport function UploadListItem({ children, linearProgressProps = {}, sx, ...restProps }: UploadListItemProps) {\n  const { sx: linearProgressSx, ...restLinearProgressProps } = linearProgressProps;\n\n  return (\n    <ListItem\n      component=\"li\"\n      sx={{\n        position: 'relative',\n        margin: 0,\n        py: 1,\n        px: 2,\n        borderRadius: '4px',\n        outline: '0',\n        // every child except the last child has 'border' on the bottom\n        '&:not(:last-child):after': {\n          content: '\"\"',\n          position: 'absolute',\n          left: 0,\n          bottom: 0,\n          height: '1px',\n          width: '100%',\n          backgroundColor: 'surface.secondary',\n        },\n        '&:focus-visible': {\n          backgroundColor: 'surface.primary',\n        },\n        ...sx,\n      }}\n      disableGutters\n      {...restProps}\n    >\n      {children}\n\n      {typeof linearProgressProps?.value !== 'undefined' && linearProgressProps?.value !== null && (\n        <LinearProgress\n          variant=\"determinate\"\n          sx={{\n            position: 'absolute',\n            bottom: 0,\n            left: 0,\n            width: '100%',\n            height: '2px',\n            zIndex: '1',\n            ...linearProgressSx,\n          }}\n          {...restLinearProgressProps}\n        />\n      )}\n    </ListItem>\n  );\n}\n"],"names":["_a","children","linearProgressProps","sx","restProps","__rest","linearProgressSx","restLinearProgressProps","_jsxs","ListItem","Object","assign","component","position","margin","py","px","borderRadius","outline","content","left","bottom","height","width","backgroundColor","disableGutters","value","_jsx","LinearProgress","variant","zIndex"],"mappings":"qHAoBM,SAAyBA,GAAA,IAAAC,SAAEA,EAAQC,oBAAEA,EAAsB,CAAA,EAAEC,GAAEA,GAAEH,EAAKI,EAASC,EAAAA,OAAAL,EAAtD,CAAA,WAAA,sBAAA,OAC7B,MAAQG,GAAIG,GAAiDJ,EAA5BK,EAAuBF,SAAKH,EAAvD,CAAA,OAEN,OACEM,EAAAA,KAACC,WAAQC,OAAAC,OAAA,CACPC,UAAU,KACVT,GAAEO,OAAAC,OAAA,CACAE,SAAU,WACVC,OAAQ,EACRC,GAAI,EACJC,GAAI,EACJC,aAAc,MACdC,QAAS,IAET,2BAA4B,CAC1BC,QAAS,KACTN,SAAU,WACVO,KAAM,EACNC,OAAQ,EACRC,OAAQ,MACRC,MAAO,OACPC,gBAAiB,qBAEnB,kBAAmB,CACjBA,gBAAiB,oBAEhBrB,GAELsB,gBAAc,GACVrB,EAAS,CAAAH,SAAA,CAEZA,OAEsC,KAA/BC,aAAmB,EAAnBA,EAAqBwB,QAAwD,QAA/BxB,aAAmB,EAAnBA,EAAqBwB,QACzEC,EAAAA,IAACC,EAAAA,eAAclB,OAAAC,OAAA,CACbkB,QAAQ,cACR1B,GAAEO,OAAAC,OAAA,CACAE,SAAU,WACVQ,OAAQ,EACRD,KAAM,EACNG,MAAO,OACPD,OAAQ,MACRQ,OAAQ,KACLxB,IAEDC,OAKd"}
+{"version":3,"file":"UploadListItem.js","sources":["../../../../../../../src/components/upload/components/uploadList/UploadListItem.tsx"],"sourcesContent":["import { LinearProgress, LinearProgressProps, ListItem, ListItemProps } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\n\nexport interface UploadListItemProps extends ListItemProps {\n  /**\n   * Properties that will be passed to LinearProgress\n   */\n  linearProgressProps?: LinearProgressProps;\n}\n\n/**\n * ListItem component styled for UploadList.\n *\n * @param children\n * @param linearProgressProps\n * @param sx\n * @param restProps\n *\n * @see UploadList\n * @see ListItem\n */\nexport function UploadListItem({ children, linearProgressProps = {}, sx, ...restProps }: UploadListItemProps) {\n  const { sx: linearProgressSx, ...restLinearProgressProps } = linearProgressProps;\n\n  return (\n    <ListItem\n      component=\"li\"\n      sx={sxOverride(\n        {\n          position: 'relative',\n          margin: 0,\n          py: 1,\n          px: 2,\n          borderRadius: '4px',\n          outline: '0',\n          // every child except the last child has 'border' on the bottom\n          '&:not(:last-child):after': {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            bottom: 0,\n            height: '1px',\n            width: '100%',\n            backgroundColor: 'surface.secondary',\n          },\n          '&:focus-visible': {\n            backgroundColor: 'surface.primary',\n          },\n        },\n        sx,\n      )}\n      disableGutters\n      {...restProps}\n    >\n      {children}\n\n      {typeof linearProgressProps?.value !== 'undefined' && linearProgressProps?.value !== null && (\n        <LinearProgress\n          variant=\"determinate\"\n          sx={sxOverride(\n            {\n              position: 'absolute',\n              bottom: 0,\n              left: 0,\n              width: '100%',\n              height: '2px',\n              zIndex: '1',\n            },\n            linearProgressSx,\n          )}\n          {...restLinearProgressProps}\n        />\n      )}\n    </ListItem>\n  );\n}\n"],"names":["children","linearProgressProps","sx","restProps","linearProgressSx","restLinearProgressProps","_jsxs","ListItem","component","sxOverride","position","margin","py","px","borderRadius","outline","content","left","bottom","height","width","backgroundColor","disableGutters","value","_jsx","LinearProgress","variant","zIndex"],"mappings":"0JAqBM,UAAyBA,SAAEA,EAAQC,oBAAEA,EAAsB,CAAA,EAAEC,GAAEA,KAAOC,IAC1E,MAAQD,GAAIE,KAAqBC,GAA4BJ,EAE7D,OACEK,EAAAA,KAACC,EAAAA,SAAQ,CACPC,UAAU,KACVN,GAAIO,aACF,CACEC,SAAU,WACVC,OAAQ,EACRC,GAAI,EACJC,GAAI,EACJC,aAAc,MACdC,QAAS,IAET,2BAA4B,CAC1BC,QAAS,KACTN,SAAU,WACVO,KAAM,EACNC,OAAQ,EACRC,OAAQ,MACRC,MAAO,OACPC,gBAAiB,qBAEnB,kBAAmB,CACjBA,gBAAiB,oBAGrBnB,GAEFoB,qBACInB,EAASH,SAAA,CAEZA,EAEA,MAAOC,GAAqBsB,OAC3BC,EAAAA,IAACC,iBAAc,CACbC,QAAQ,cACRxB,GAAIO,aACF,CACEC,SAAU,WACVQ,OAAQ,EACRD,KAAM,EACNG,MAAO,OACPD,OAAQ,MACRQ,OAAQ,KAEVvB,MAEEC,MAKd"}

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("tslib"),e=require("react/jsx-runtime"),o=require("../../../icon/stroke/CloseIcon.js"),s=require("@mui/material"),i=require("../uploadWrapper/UploadWrapper.js");exports.UploadPreview=t=>{var{children:n,iconButtonProps:c,iconProps:p,customIcon:a}=t;const u=r.__rest(t,["children","iconButtonProps","iconProps","customIcon"])||{},{sx:d}=u,l=r.__rest(u,["sx"]),x=c||{},{sx:h}=x,j=r.__rest(x,["sx"]);return e.jsxs(i.UploadWrapper,Object.assign({sx:Object.assign({borderStyle:"solid",borderColor:"onSurface.os500",borderRadius:"4px",cursor:"default",width:"100px",height:"100px",padding:"0"},d)},l,{children:[e.jsx(s.IconButton,Object.assign({sx:Object.assign({position:"absolute",right:"4px",top:"4px",zIndex:"1",width:"24px",height:"24px","& .MuiSvgIcon-root":{fontSize:"17px"}},h),variant:"filled",color:"surface"},j,{children:a||e.jsx(o.CloseIcon,Object.assign({},p))})),n]}))};
+"use strict";var r=require("react/jsx-runtime"),e=require("../../../icon/stroke/CloseIcon.js"),o=require("@mui/material"),i=require("../../../../utils/sxOverride/sxOverride.js"),s=require("../uploadWrapper/UploadWrapper.js");exports.UploadPreview=({children:t,iconButtonProps:p,iconProps:d,customIcon:n,...x})=>{const{sx:u,...a}=x||{},{sx:c,...l}=p||{};return r.jsxs(s.UploadWrapper,{sx:i.sxOverride({borderStyle:"solid",borderColor:"onSurface.os500",borderRadius:"4px",cursor:"default",width:"100px",height:"100px",padding:"0"},u),...a,children:[r.jsx(o.IconButton,{sx:i.sxOverride({position:"absolute",right:"4px",top:"4px",zIndex:"1",width:"24px",height:"24px","& .MuiSvgIcon-root":{fontSize:"17px"}},c),variant:"filled",color:"surface",...l,children:n||r.jsx(e.CloseIcon,{...d})}),t]})};
 //# sourceMappingURL=UploadPreview.js.map

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 { 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":["_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":"kNAgCsDA,IAAA,IAAAC,SACpDA,EAAQC,gBACRA,EAAeC,UACfA,EAASC,WACTA,GAAUJ,EAGV,MAAMK,EAFEC,EAAAA,OAAAN,EAL4C,CAAA,WAAA,kBAAA,YAAA,gBAOd,CAAA,GAAhCO,GAAEA,GAAEF,EAAKG,EAASF,EAAAA,OAAAD,EAAlB,CAAA,OACAI,EAA+CP,GAAmB,IAAhEK,GAAIG,KAAiBC,EAAmBL,EAAAA,OAAAG,EAA1C,CAAA,OAEN,OACEG,OAACC,EAAAA,cAAaC,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,EAAAA,IAACC,EAAAA,0BACCjB,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,EAAAA,IAACS,YAASlB,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 { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n        {\n          borderStyle: 'solid',\n          borderColor: 'onSurface.os500',\n          borderRadius: '4px',\n          cursor: 'default',\n          width: '100px',\n          height: '100px',\n          padding: '0',\n        },\n        sx,\n      )}\n      {...restProps}\n    >\n      <IconButton\n        sx={sxOverride(\n          {\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          },\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":["children","iconButtonProps","iconProps","customIcon","props","sx","restProps","iconButtonSx","restIconButtonProps","_jsxs","UploadWrapper","sxOverride","borderStyle","borderColor","borderRadius","cursor","width","height","padding","_jsx","IconButton","position","right","top","zIndex","fontSize","variant","color","CloseIcon"],"mappings":"uPAiCqD,EACnDA,WACAC,kBACAC,YACAC,gBACGC,MAEH,MAAMC,GAAEA,KAAOC,GAAcF,GAAS,CAAA,GAC9BC,GAAIE,KAAiBC,GAAwBP,GAAmB,CAAA,EAExE,OACEQ,OAACC,EAAAA,eACCL,GAAIM,EAAAA,WACF,CACEC,YAAa,QACbC,YAAa,kBACbC,aAAc,MACdC,OAAQ,UACRC,MAAO,QACPC,OAAQ,QACRC,QAAS,KAEXb,MAEEC,EAASN,SAAA,CAEbmB,EAAAA,IAACC,EAAAA,WAAU,CACTf,GAAIM,aACF,CACEU,SAAU,WACVC,MAAO,MACPC,IAAK,MACLC,OAAQ,IACRR,MAAO,OACPC,OAAQ,OACR,qBAAsB,CACpBQ,SAAU,SAGdlB,GAEFmB,QAAQ,SACRC,MAAM,aACFnB,WAEHL,GAAcgB,EAAAA,IAACS,EAAAA,UAAS,IAAK1B,MAE/BF"}

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

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

package/cjs/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":["_a","sx","restProps","__rest","_jsx","Box","Object","assign","component","display","position","width","height","objectFit","borderRadius"],"mappings":"yHASM,SAA6BA,GAAA,IAAAC,GAAEA,GAAED,EAAKE,EAASC,EAAAA,OAAAH,EAAlB,QACjC,OACEI,EAAAA,IAACC,EAAAA,IAAGC,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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n        {\n          display: 'block',\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n          borderRadius: '4px',\n        },\n        sx,\n      )}\n      {...restProps}\n    />\n  );\n}\n"],"names":["sx","restProps","_jsx","Box","component","sxOverride","display","position","width","height","objectFit","borderRadius"],"mappings":"8JAUM,UAA6BA,GAAEA,KAAOC,IAC1C,OACEC,EAAAA,IAACC,EAAAA,IAAG,CACFC,UAAU,MACVJ,GAAIK,aACF,CACEC,QAAS,QACTC,SAAU,WACVC,MAAO,OACPC,OAAQ,OACRC,UAAW,QACXC,aAAc,OAEhBX,MAEEC,GAGV"}

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

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

package/cjs/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","position","width","height","borderRadius","left","top","zIndex","pointerEvents","userSelect","backgroundColor"],"mappings":"8FAUM,SAAUA,EAAcC,OAAAC,SAAEA,EAAQC,GAAEA,GAAEF,EAAKG,EAASC,EAAAA,OAAAJ,EAA5B,mBAC5B,OACEK,EAAAA,IAACC,EAAAA,mBACCJ,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,uDAOM,SAAgCD,OAAAC,SAAEA,EAAQC,GAAEA,GAAEF,EAAKG,EAASC,EAAAA,OAAAJ,EAA5B,mBACpC,OACEK,EAAAA,IAACN,EAAaQ,OAAAC,OAAA,CACZN,kBACEiB,SAAU,WACVC,MAAO,OACPC,OAAQ,OACRC,aAAc,UACdC,KAAM,EACNC,IAAK,EACLC,OAAQ,EACRC,cAAe,OACfC,WAAY,OACZC,gBAAiB,iBACd1B,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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n        {\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        },\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={sxOverride(\n        {\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        },\n        sx,\n      )}\n      {...restProps}\n    >\n      {children}\n    </UploadContent>\n  );\n}\n"],"names":["UploadContent","children","sx","restProps","_jsx","Box","sxOverride","display","flexDirection","justifyContent","alignItems","textAlign","margin","gap","theme","spacing","fontSize","position","width","height","borderRadius","left","top","zIndex","pointerEvents","userSelect","backgroundColor"],"mappings":"mIAWM,SAAUA,GAAcC,SAAEA,EAAQC,GAAEA,KAAOC,IAC/C,OACEC,MAACC,EAAAA,KACCH,GAAII,EAAAA,WACF,CACEC,QAAS,OACTC,cAAe,SACfC,eAAgB,SAChBC,WAAY,SACZC,UAAW,SACXC,OAAQ,OACRC,IAAMC,GAAUA,EAAMC,UACtB,qBAAsB,CACpBC,SAAU,SAGdd,MAEEC,WAEHF,GAGP,uDAOM,UAAgCA,SAAEA,EAAQC,GAAEA,KAAOC,IACvD,OACEC,MAACJ,GACCE,GAAII,EAAAA,WACF,CACEW,SAAU,WACVC,MAAO,OACPC,OAAQ,OACRC,aAAc,UACdC,KAAM,EACNC,IAAK,EACLC,OAAQ,EACRC,cAAe,OACfC,WAAY,OACZC,gBAAiB,iBAEnBxB,MAEEC,WAEHF,GAGP"}

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("tslib"),o=require("react/jsx-runtime"),e=require("@mui/material"),s=require("../../../focusring/focusring.js");exports.UploadWrapper=function(a){var{state:i="default",sx:t}=a,n=r.__rest(a,["state","sx"]);return o.jsx(e.Box,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"===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"}),s.getFocusRingStyle(r,!1,1,":focus-visible")),t)},n))};
+"use strict";var r=require("react/jsx-runtime"),o=require("@mui/material"),e=require("../../../focusring/focusring.js"),s=require("../../../../utils/sxOverride/sxOverride.js");exports.UploadWrapper=function({state:i="default",sx:a,...d}){return r.jsx(o.Box,{sx:s.sxOverride(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.getFocusRingStyle(r,!1,1,":focus-visible")}),a),...d})};
 //# sourceMappingURL=UploadWrapper.js.map

package/cjs/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":["_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":"iKAgBM,SAAwBA,OAAAC,MAAEA,EAAQ,UAASC,GAAEA,KAAOC,EAASC,EAAAA,OAAAJ,EAArC,CAAA,QAAA,OAC5B,OACEK,EAAAA,IAACC,MAAGC,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,EAAAA,kBAAkBhB,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 '@/src/components/focusring/focusring';\nimport { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n        (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        }),\n        sx,\n      )}\n      {...restProps}\n    ></Box>\n  );\n}\n"],"names":["state","sx","restProps","_jsx","Box","sxOverride","theme","display","alignItems","justifyContent","cursor","position","borderRadius","width","height","borderWidth","borderStyle","borderColor","backgroundColor","transition","outline","color","getFocusRingStyle"],"mappings":"sMAiBM,UAAwBA,MAAEA,EAAQ,UAASC,GAAEA,KAAOC,IACxD,OACEC,EAAAA,IAACC,EAAAA,IAAG,CACFH,GAAII,EAAAA,WACDC,IAAK,CACJC,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,iBAAVpB,GAA4B,CAC9BiB,YAAa,eACbC,gBAAiB,oBAEL,UAAVlB,GAAqB,CACvBiB,YAAa,aACbI,MAAO,aACP,UAAW,CACTJ,YAAa,kBAGH,UAAVjB,GAAqB,CACvBiB,YAAa,oBACbC,gBAAiB,qBACjBF,YAAa,QACb,UAAW,CACTC,YAAa,qBAEfP,OAAQ,cAEPY,EAAAA,kBAAkBhB,GAAO,EAAO,EAAG,oBAExCL,MAEEC,GAGV"}

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("react/jsx-runtime"),r=require("react"),s=require("@mui/material"),o=require("../icon/stroke/FileMissingIcon.js"),i=require("../../utils/sxOverride/sxOverride.js");const t=r.forwardRef(({src:r,type:t="video/mp4",noVidErrorMessage:n,sourceProps:c,poster:d,sx:l,autoPlay:a=!0,muted:x=!0,controls:u=!1,loop:p=!1,children:m,...j},h)=>e.jsxs(s.Box,{component:"video","data-testid":"Video",poster:d,ref:h,autoPlay:a,muted:x,controls:u,loop:p,sx:i.sxOverride({display:"block",maxWidth:"100%"},l),...j,children:[m??e.jsx(s.Box,{component:"source",src:r,type:t,...c}),n??e.jsx(s.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},children:e.jsx(o.FileMissingIcon,{})})]}));exports.Video=t;
 //# 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,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"}
+{"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';\nimport { sxOverride } from '@/src/utils/sxOverride';\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={sxOverride(\n          {\n            display: 'block',\n            maxWidth: '100%',\n          },\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","sxOverride","display","maxWidth","_jsx","justifyContent","alignItems","width","height","FileMissingIcon"],"mappings":"qMAiCaA,EAA8BC,EAAAA,WACzC,EAEIC,MACAC,OAAO,YACPC,oBACAC,cACAC,SACAC,KACAC,YAAW,EACXC,SAAQ,EACRC,YAAW,EACXC,QAAO,EACPC,cACGC,GAELC,IAGEC,EAAAA,KAACC,MAAG,CACFC,UAAU,QAAO,cACL,QACZX,OAAQA,EACRQ,IAAKA,EACLN,SAAUA,EACVC,MAAOA,EACPC,SAAUA,EACVC,KAAMA,EACNJ,GAAIW,aACF,CACEC,QAAS,QACTC,SAAU,QAEZb,MAEEM,EAAID,SAAA,CAEPA,GAAYS,EAAAA,IAACL,EAAAA,IAAG,CAACC,UAAU,SAASf,IAAKA,EAAKC,KAAMA,KAAUE,IAC9DD,GACCiB,MAACL,EAAAA,IAAG,CAACT,GAAI,CAAEY,QAAS,OAAQG,eAAgB,SAAUC,WAAY,SAAUC,MAAO,OAAQC,OAAQ,QAAQb,SACzGS,EAAAA,IAACK,EAAAA,gBAAe"}

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=>{const[r,u]=e.useState(!t.current?.paused);e.useEffect(()=>{const e=t?.current;e&&void 0===r&&u(!e?.paused);const n=()=>{(!e.autoplay||!e.ended)&&u(!0)},a=()=>u(!1);if(e)return e.addEventListener("pause",a),u(!e.paused),e.addEventListener("play",n),()=>{e.removeEventListener("play",n),e.removeEventListener("pause",a)}},[t]);const n=e.useCallback(()=>{t?.current&&(r?t.current.pause():t.current.play().catch(()=>{}),u(e=>!e))},[r,t?.current]);return{isPlaying:r,handlePlayPause:n}},exports.useVideoSoundControls=t=>{const[r,u]=e.useState(t.current?.muted),[n,a]=e.useState(1);e.useEffect(()=>{const e=t?.current;e&&(void 0===r&&u(e?.muted),t.current.muted=r,t.current.volume=n)},[r,n,t]);const s=e.useCallback(()=>{u(e=>!e)},[]),c=e.useCallback(e=>{a(e)},[]);return{isMuted:r,handleMuteToggle:s,volume:n,handleVolumeChange:c}},exports.useVideoTime=t=>{const[r,u]=e.useState(0),[n,a]=e.useState(t.current?.duration),s=e.useCallback(()=>{t.current?.currentTime&&u(t.current.currentTime)},[t]),c=e.useCallback(e=>{t.current?.currentTime&&(t.current.currentTime=e),u(e)},[t]),d=e.useCallback(()=>{t.current?.duration&&a(t.current.duration)},[t]);return e.useEffect(()=>{const e=t?.current;if(e)return e.addEventListener("loadedmetadata",d),e.addEventListener("timeupdate",s),()=>{e.removeEventListener("loadedmetadata",d),e.removeEventListener("timeupdate",s)}},[d,s,t]),{currentTime:r,duration:n,handleSeek:c}};
 //# 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"],"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"}
+{"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":["videoRef","isPlaying","setIsPlaying","useState","current","paused","useEffect","video","handlePlay","autoplay","ended","handlePause","addEventListener","removeEventListener","handlePlayPause","useCallback","pause","play","catch","prevIsPlaying","isMuted","setIsMuted","muted","volume","setVolume","handleMuteToggle","prevMuted","handleVolumeChange","newVolume","currentTime","setCurrentTime","duration","setDuration","handleTimeUpdate","handleSeek","newTime","handleLoadedMetadata"],"mappings":"8DA4DkCA,IAChC,MAAOC,EAAWC,GAAgBC,EAAAA,UAAUH,EAASI,SAASC,QAE9DC,EAAAA,UAAU,KACR,MAAMC,EAAQP,GAAUI,QAEpBG,QAA8B,IAAdN,GAClBC,GAAcK,GAAOF,QAGvB,MAAMG,EAAa,OAEfD,EAAME,WAAYF,EAAMG,QAAUR,GAAa,IAE7CS,EAAc,IAAMT,GAAa,GAEvC,GAAIK,EAQF,OAPAA,EAAMK,iBAAiB,QAASD,GAGhCT,GAAcK,EAAMF,QAEpBE,EAAMK,iBAAiB,OAAQJ,GAExB,KACLD,EAAMM,oBAAoB,OAAQL,GAClCD,EAAMM,oBAAoB,QAASF,KAGtC,CAACX,IAEJ,MAAMc,EAAkBC,EAAAA,YAAY,KAC9Bf,GAAUI,UACRH,EACFD,EAASI,QAAQY,QAEjBhB,EAASI,QAAQa,OAAOC,MAAM,QAEhChB,EAAciB,IAAmBA,KAElC,CAAClB,EAAWD,GAAUI,UAEzB,MAAO,CACLH,YACAa,kDAvFkCd,IACpC,MAAOoB,EAASC,GAAclB,EAAAA,SAASH,EAASI,SAASkB,QAClDC,EAAQC,GAAarB,EAAAA,SAAS,GAErCG,EAAAA,UAAU,KACR,MAAMC,EAAQP,GAAUI,QACpBG,SACqB,IAAZa,GACTC,EAAWd,GAAOe,OAGpBtB,EAASI,QAAQkB,MAAQF,EACzBpB,EAASI,QAAQmB,OAASA,IAE3B,CAACH,EAASG,EAAQvB,IAErB,MAAMyB,EAAmBV,EAAAA,YAAY,KACnCM,EAAYK,IAAeA,IAC1B,IAEGC,EAAqBZ,cAAaa,IACtCJ,EAAUI,IACT,IAEH,MAAO,CACLR,UACAK,mBACAF,SACAI,4CA+EyB3B,IAC3B,MAAO6B,EAAaC,GAAkB3B,EAAAA,SAAS,IACxC4B,EAAUC,GAAe7B,EAAAA,SAASH,EAASI,SAAS2B,UAErDE,EAAmBlB,EAAAA,YAAY,KAC/Bf,EAASI,SAASyB,aACpBC,EAAe9B,EAASI,QAAQyB,cAEjC,CAAC7B,IAEEkC,EAAanB,cAChBoB,IACKnC,EAASI,SAASyB,cACpB7B,EAASI,QAAQyB,YAAcM,GAEjCL,EAAeK,IAEjB,CAACnC,IAGGoC,EAAuBrB,EAAAA,YAAY,KACnCf,EAASI,SAAS2B,UACpBC,EAAYhC,EAASI,QAAQ2B,WAE9B,CAAC/B,IAeJ,OAbAM,EAAAA,UAAU,KACR,MAAMC,EAAQP,GAAUI,QACxB,GAAIG,EAIF,OAHAA,EAAMK,iBAAiB,iBAAkBwB,GACzC7B,EAAMK,iBAAiB,aAAcqB,GAE9B,KACL1B,EAAMM,oBAAoB,iBAAkBuB,GAC5C7B,EAAMM,oBAAoB,aAAcoB,KAG3C,CAACG,EAAsBH,EAAkBjC,IAErC,CACL6B,cACAE,WACAG"}