@skodaflow/web-library 7.13.1 → 7.15.0

package/components/notification/Notification.js

@@ -0,0 +1,2 @@
+import{__rest as i}from"tslib";import{jsxs as s,jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Box as o,Typography as r,IconButton as n,Stack as a}from"@mui/material";import{Label as c}from"../label/label.js";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const p=e(((e,p)=>{var{sx:d,headline:x,titleProps:f,titleWrapperProps:m,description:b,descriptionProps:g,wrapperProps:h,color:u,isNew:j,headerProps:O,icon:w,iconProps:P,footer:v,buttons:y,buttonsProps:N,footerProps:k,onDismiss:I,closeIconButtonProps:C,closeIconProps:W,children:D}=e,S=i(e,["sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children"]);const B=null!=h?h:{},{sx:z}=B,M=i(B,["sx"]),F=null!=O?O:{},{sx:G}=F,L=i(F,["sx"]),R=null!=N?N:{},{sx:V}=R,q=i(R,["sx"]),A=null!=g?g:{},{sx:E}=A,H=i(A,["sx"]),J=null!=f?f:{},{sx:K}=J,Q=i(J,["sx"]),T=null!=C?C:{},{sx:U}=T,X=i(T,["sx"]),Y=null!=P?P:{},{sx:Z}=Y,$=i(Y,["sx"]);return s(o,Object.assign({ref:p,sx:Object.assign({backgroundColor:"grey"===u?"surface.primary":"background.primary",padding:"16px 16px 24px",display:"flex",flexDirection:"row",gap:2,position:"relative"},d),"data-testid":"Notification"},S,{children:[w&&t(o,Object.assign({sx:Object.assign({display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:{xs:"32px",md:"56px"},height:{xs:"32px",md:"56px"},backgroundColor:"transparent.backdrop",flexShrink:"0",overflow:"hidden","& img":{width:"100%",height:"100%",objectFit:"cover"},"& .MuiSvgIcon-root":{width:{xs:"22px",md:"32px"},height:{xs:"22px",md:"32px"}}},Z),"data-testid":"Notification.icon"},$,{children:w})),s(o,Object.assign({sx:Object.assign({width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"4px",flexDirection:"column",padding:"4px","&:hover .notification-dismiss":{opacity:"1"}},z)},M,{children:[s(o,Object.assign({sx:Object.assign({display:"flex",alignItems:"center",justifyContent:"flex-start",gap:1},G)},L,{children:[j&&t(c,{type:"indicator",variant:"neutral"}),t(r,Object.assign({variant:"subheadline",sx:Object.assign({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flexGrow:"1",minWidth:"0"},K),"data-testid":"Notification.headline"},Q,{children:x})),I&&t(n,Object.assign({"aria-label":"Dismiss notification",onClick:I,size:"small",className:"notification-dismiss",sx:Object.assign({padding:"2px",opacity:{xs:"1",md:"0"},"&.Mui-focusVisible":{opacity:"1"}},U),"data-testid":"Notification.dismiss"},X,{children:t(l,Object.assign({fontSize:"small",className:"ballotx",name:"close"},W))}))]})),t(o,{"data-testid":"Notification.description",children:"string"==typeof D||"string"==typeof b?t(r,Object.assign({sx:Object.assign({overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},E),variant:"disclaimer1"},H,{children:D||b})):D||b}),v&&t(r,Object.assign({variant:"disclaimer1",color:"onSurface.os600","data-testid":"Notification.footer"},k,{children:v})),y&&t(a,Object.assign({direction:"row",sx:Object.assign({mt:1.5},V),spacing:1,"data-testid":"Notification.buttons"},q,{children:y}))]}))]}))}));export{p as Notification};
+//# sourceMappingURL=Notification.js.map

package/components/notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.tsx"],"sourcesContent":["import React, { ElementType, FC, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  Typography,\n  TypographyProps,\n  Stack,\n  IconButton,\n  StackProps,\n  IconButtonProps,\n  IconProps,\n} from '@mui/material';\nimport { Label } from '@/src/components/label/label';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationProps extends BoxProps<ElementType> {\n  /**\n   * headline of the notification\n   */\n  headline?: React.ReactNode;\n  /**\n   * Custom props for the headline\n   */\n  headlineProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Longer description of the notification\n   * @deprecated use prop children instead\n   */\n  description?: React.ReactNode;\n  /**\n   * Custom props for the description container\n   */\n  descriptionProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the wrapper container\n   */\n  wrapperProps?: BoxProps<ElementType>;\n  /**\n   * Different color options for the notification\n   */\n  color?: 'white' | 'grey';\n  /**\n   * Indicates if the notification is new\n   */\n  isNew?: boolean;\n  /**\n   * Custom props for the header container\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Icon to display in the notification\n   */\n  icon?: React.ReactNode;\n  /**\n   * Custom props for the icon container\n   */\n  iconProps?: BoxProps<ElementType>;\n  /**\n   * Footer text for the notification\n   */\n  footer?: React.ReactNode;\n  /**\n   * Control Buttons to display in the notification\n   */\n  buttons?: React.ReactNode;\n  /**\n   * Custom props for the buttons container\n   */\n  buttonsProps?: StackProps<ElementType>;\n  /**\n   * Custom props for the footer container\n   */\n  footerProps?: TypographyProps<ElementType>;\n  /**\n   * Callback function when the notification is dismissed\n   */\n  onDismiss?: () => void;\n  /**\n   * Custom props for the close icon container\n   */\n  closeIconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  closeIconProps?: IconProps<ElementType>;\n}\n\n/**\n * Component that renders an notification\n */\nexport const Notification: FC<NotificationProps> = forwardRef(\n  (\n    {\n      sx,\n      headline,\n      titleProps,\n      titleWrapperProps,\n      description,\n      descriptionProps,\n      wrapperProps,\n      color,\n      isNew,\n      headerProps,\n      icon,\n      iconProps,\n      footer,\n      buttons,\n      buttonsProps,\n      footerProps,\n      onDismiss,\n      closeIconButtonProps,\n      closeIconProps,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: wrapperSx, ...restWrapper } = wrapperProps ?? {};\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: buttonsSx, ...restButtons } = buttonsProps ?? {};\n    const { sx: descriptionSx, ...restDescription } = descriptionProps ?? {};\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n    const { sx: closeIconButtonSx, ...restCloseIconButton } = closeIconButtonProps ?? {};\n\n    const { sx: iconSx, ...restIcon } = iconProps ?? {};\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          backgroundColor: color === 'grey' ? 'surface.primary' : 'background.primary',\n          padding: '16px 16px 24px',\n          display: 'flex',\n          flexDirection: 'row',\n          gap: 2,\n          position: 'relative',\n          ...sx,\n        }}\n        data-testid=\"Notification\"\n        {...rest}\n      >\n        {icon && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              borderRadius: '50%',\n              width: { xs: '32px', md: '56px' },\n              height: { xs: '32px', md: '56px' },\n              backgroundColor: 'transparent.backdrop',\n              flexShrink: '0',\n              overflow: 'hidden',\n              '& img': { width: '100%', height: '100%', objectFit: 'cover' },\n              '& .MuiSvgIcon-root': {\n                width: { xs: '22px', md: '32px' },\n                height: { xs: '22px', md: '32px' },\n              },\n              ...iconSx,\n            }}\n            data-testid=\"Notification.icon\"\n            {...restIcon}\n          >\n            {icon}\n          </Box>\n        )}\n        <Box\n          sx={{\n            width: '100%',\n            maxWidth: '100%',\n            overflow: 'hidden',\n            display: 'flex',\n            gap: '4px',\n            flexDirection: 'column',\n            // Small padding to prevent focus ring trimming\n            padding: '4px',\n            // show dismiss button on hover Desktop + Tablet\n            '&:hover .notification-dismiss': {\n              opacity: '1',\n            },\n            ...wrapperSx,\n          }}\n          {...restWrapper}\n        >\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', gap: 1, ...headerSx }}\n            {...restHeader}\n          >\n            {isNew && <Label type=\"indicator\" variant=\"neutral\" />}\n\n            <Typography\n              variant=\"subheadline\"\n              sx={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                flexGrow: '1',\n                minWidth: '0',\n                ...titleSx,\n              }}\n              data-testid=\"Notification.headline\"\n              {...restTitle}\n            >\n              {headline}\n            </Typography>\n\n            {onDismiss && (\n              <IconButton\n                aria-label=\"Dismiss notification\"\n                onClick={onDismiss}\n                size=\"small\"\n                className=\"notification-dismiss\"\n                sx={{\n                  padding: '2px',\n                  // hide dismiss button Desktop + Tablet, keep on mobile\n                  opacity: { xs: '1', md: '0' },\n                  // show dismiss button on focus\n                  '&.Mui-focusVisible': {\n                    opacity: '1',\n                  },\n                  ...closeIconButtonSx,\n                }}\n                data-testid=\"Notification.dismiss\"\n                {...restCloseIconButton}\n              >\n                <CloseIcon fontSize=\"small\" className=\"ballotx\" name=\"close\" {...closeIconProps} />\n              </IconButton>\n            )}\n          </Box>\n          <Box data-testid=\"Notification.description\">\n            {typeof children === 'string' || typeof description === 'string' ? (\n              <Typography\n                sx={{\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitLineClamp: '2',\n                  WebkitBoxOrient: 'vertical',\n                  ...descriptionSx,\n                }}\n                variant=\"disclaimer1\"\n                {...restDescription}\n              >\n                {children || description}\n              </Typography>\n            ) : (\n              children || description\n            )}\n          </Box>\n          {footer && (\n            <Typography\n              variant=\"disclaimer1\"\n              color={'onSurface.os600'}\n              data-testid=\"Notification.footer\"\n              {...footerProps}\n            >\n              {footer}\n            </Typography>\n          )}\n          {buttons && (\n            <Stack\n              direction=\"row\"\n              sx={{ mt: 1.5, ...buttonsSx }}\n              spacing={1}\n              data-testid=\"Notification.buttons\"\n              {...restButtons}\n            >\n              {buttons}\n            </Stack>\n          )}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["Notification","forwardRef","_a","ref","sx","headline","titleProps","titleWrapperProps","description","descriptionProps","wrapperProps","color","isNew","headerProps","icon","iconProps","footer","buttons","buttonsProps","footerProps","onDismiss","closeIconButtonProps","closeIconProps","children","rest","__rest","_b","wrapperSx","restWrapper","_c","headerSx","restHeader","_d","buttonsSx","restButtons","_e","descriptionSx","restDescription","_f","titleSx","restTitle","_g","closeIconButtonSx","restCloseIconButton","_h","iconSx","restIcon","_jsxs","Box","Object","assign","backgroundColor","padding","display","flexDirection","gap","position","_jsx","justifyContent","alignItems","borderRadius","width","xs","md","height","flexShrink","overflow","objectFit","maxWidth","opacity","Label","type","variant","Typography","whiteSpace","textOverflow","flexGrow","minWidth","IconButton","onClick","size","className","CloseIcon","fontSize","name","WebkitLineClamp","WebkitBoxOrient","Stack","direction","mt","spacing"],"mappings":"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"}

package/components/notification/NotificationButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material';
+export interface NotificationButtonProps extends ButtonProps {
+}
+/**
+ * NotificationButton is a proxy component to <Button variant="outline" size="small" color="secondary" />
+ */
+export declare const NotificationButton: React.FC<NotificationButtonProps>;

package/components/notification/NotificationButton.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Button as t}from"@mui/material";const e=o(((o,e)=>r(t,Object.assign({ref:e,variant:"outlined",size:"small",color:"secondary"},o))));export{e as NotificationButton};
+//# sourceMappingURL=NotificationButton.js.map

package/components/notification/NotificationButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationButton.js","sources":["../../../src/components/notification/NotificationButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\n\nexport interface NotificationButtonProps extends ButtonProps {}\n\n/**\n * NotificationButton is a proxy component to <Button variant=\"outline\" size=\"small\" color=\"secondary\" />\n */\nexport const NotificationButton: React.FC<NotificationButtonProps> = forwardRef((props, ref) => {\n  return <Button ref={ref} variant=\"outlined\" size=\"small\" color=\"secondary\" {...props} />;\n});\n"],"names":["NotificationButton","forwardRef","props","ref","_jsx","Button","Object","assign","variant","size","color"],"mappings":"kHAQa,MAAAA,EAAwDC,GAAW,CAACC,EAAOC,IAC/EC,EAACC,EAAOC,OAAAC,OAAA,CAAAJ,IAAKA,EAAKK,QAAQ,WAAWC,KAAK,QAAQC,MAAM,aAAgBR"}

package/components/notification/NotificationCenter.d.ts

@@ -0,0 +1,53 @@
+import React, { ElementType, FC } from 'react';
+import { BoxProps, ButtonProps, IconButtonProps, IconProps, TypographyProps } from '@mui/material';
+export interface NotificationCenterProps extends BoxProps<ElementType> {
+    /**
+     * Title of the notification center
+     */
+    title?: React.ReactNode;
+    /**
+     * Custom props for the header
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the title
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Text for the dismiss all button
+     */
+    dismissAllText?: React.ReactNode;
+    /**
+     * Callback function when the dismiss all button is clicked
+     */
+    onDismissAll?: () => void;
+    /**
+     * Callback function when the close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Max Height of the notification center
+     */
+    height?: number | string;
+    /**
+     * Custom props for the icon button
+     */
+    iconButtonProps?: IconButtonProps;
+    /**
+     * Custom props for the close icon
+     */
+    iconProps?: IconProps<ElementType>;
+    /**
+     * Custom props for the container
+     */
+    containerProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the dismiss box
+     */
+    dismissBoxProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the dismiss button
+     */
+    dismissButtonProps?: ButtonProps<ElementType>;
+}
+export declare const NotificationCenter: FC<NotificationCenterProps>;

package/components/notification/NotificationCenter.js

@@ -0,0 +1,2 @@
+import{__rest as s}from"tslib";import{jsxs as i,jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Box as e,Typography as n,IconButton as r,Button as a}from"@mui/material";import{CloseIcon as l}from"../icon/stroke/CloseIcon.js";const c=o(((o,c)=>{var{children:d,sx:x,title:p="Notifications",headerProps:m,titleProps:f,dismissAllText:b="Dismiss All",onDismissAll:g,onClose:u,iconButtonProps:h,iconProps:C,containerProps:j,dismissBoxProps:P,dismissButtonProps:O,height:y=556}=o,N=s(o,["children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height"]);const B=null!=m?m:{},{sx:v}=B,k=s(B,["sx"]),w=null!=j?j:{},{sx:A}=w,D=s(w,["sx"]),z=null!=P?P:{},{sx:S}=z,T=s(z,["sx"]),H=null!=h?h:{},{sx:I}=H,R=s(H,["sx"]);return i(e,Object.assign({ref:c,sx:Object.assign({display:"flex",flexDirection:"column",width:{xs:"100%",sm:"360px",md:"440px"},borderRadius:{xs:"0px",sm:"8px"},backgroundColor:"background.primary",color:"text.primary",boxShadow:"0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)",overflow:"hidden",maxHeight:(Y=y,"string"==typeof Y&&Y.includes("px")?Y:`${Y}px`)},x),"data-testid":"NotificationCenter"},N,{children:[i(e,Object.assign({sx:Object.assign({padding:"16px 8px 16px 16px",display:"flex",justifyContent:"space-between"},v)},k,{children:[t(n,Object.assign({variant:"h4",component:"span","data-testid":"NotificationCenter.title"},f,{children:p})),u&&t(r,Object.assign({"aria-label":"onClose notificationCenter",onClick:u,size:"medium",className:"notificationCenter-onClose",sx:Object.assign({padding:"4px"},I),"data-testid":"NotificationCenter.onClose"},R,{children:t(l,Object.assign({fontSize:"medium",className:"ballotx"},C))}))]})),g&&t(e,Object.assign({sx:Object.assign({padding:"0 8px 4px 16px",display:"flex",justifyContent:"flex-end"},S)},T,{children:t(a,Object.assign({onClick:g,size:"small",color:"secondary",variant:"text","data-testid":"NotificationCenter.dismiss"},O,{children:b}))})),t(e,Object.assign({sx:Object.assign({overflowY:"auto",'& [data-testid="Notification"]:not(:last-child)':{borderBottom:1,borderColor:"surface.secondary"}},A),"data-testid":"NotificationCenter.content"},D,{children:d}))]}));var Y}));export{c as NotificationCenter};
+//# sourceMappingURL=NotificationCenter.js.map

package/components/notification/NotificationCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.js","sources":["../../../src/components/notification/NotificationCenter.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport {\n  Box,\n  Button,\n  BoxProps,\n  ButtonProps,\n  IconButton,\n  IconButtonProps,\n  IconProps,\n  Typography,\n  TypographyProps,\n} from '@mui/material';\nimport { CloseIcon } from '@/src/components/icon/stroke/CloseIcon';\n\nexport interface NotificationCenterProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification center\n   */\n  title?: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Text for the dismiss all button\n   */\n  dismissAllText?: React.ReactNode;\n  /**\n   * Callback function when the dismiss all button is clicked\n   */\n  onDismissAll?: () => void;\n  /**\n   * Callback function when the close button is clicked\n   */\n  onClose?: () => void;\n  /**\n   * Max Height of the notification center\n   */\n  height?: number | string;\n  /**\n   * Custom props for the icon button\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Custom props for the close icon\n   */\n  iconProps?: IconProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss box\n   */\n  dismissBoxProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the dismiss button\n   */\n  dismissButtonProps?: ButtonProps<ElementType>;\n}\n\nexport const NotificationCenter: FC<NotificationCenterProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      title = 'Notifications',\n      headerProps,\n      titleProps,\n      dismissAllText = 'Dismiss All',\n      onDismissAll,\n      onClose,\n      iconButtonProps,\n      iconProps,\n      containerProps,\n      dismissBoxProps,\n      dismissButtonProps,\n      height = 556,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: headerSx, ...restHeader } = headerProps ?? {};\n    const { sx: containerSx, ...restContainer } = containerProps ?? {};\n    const { sx: dismissBoxSx, ...restDismissBox } = dismissBoxProps ?? {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps ?? {};\n\n    const formatHeight = (heightValue: number | string) => {\n      if (typeof heightValue === 'string' && heightValue.includes('px')) {\n        return heightValue;\n      }\n      // if typeof heightValue === 'number', or string without 'px'\n      return `${heightValue}px`;\n    };\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          width: { xs: '100%', sm: '360px', md: '440px' },\n          borderRadius: { xs: '0px', sm: '8px' },\n          backgroundColor: 'background.primary',\n          color: 'text.primary',\n          boxShadow: '0px 5px 6px 1px rgba(0, 0, 0, 0.18), 0px -1px 4px 0px rgba(0, 0, 0, 0.1)',\n          overflow: 'hidden',\n          maxHeight: formatHeight(height),\n          ...sx,\n        }}\n        data-testid=\"NotificationCenter\"\n        {...rest}\n      >\n        <Box\n          sx={{\n            padding: '16px 8px 16px 16px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            ...headerSx,\n          }}\n          {...restHeader}\n        >\n          <Typography variant=\"h4\" component=\"span\" data-testid=\"NotificationCenter.title\" {...titleProps}>\n            {title}\n          </Typography>\n          {onClose && (\n            <IconButton\n              aria-label=\"onClose notificationCenter\"\n              onClick={onClose}\n              size=\"medium\"\n              className=\"notificationCenter-onClose\"\n              sx={{\n                padding: '4px',\n                ...iconButtonSx,\n              }}\n              data-testid=\"NotificationCenter.onClose\"\n              {...restIconButton}\n            >\n              <CloseIcon fontSize=\"medium\" className=\"ballotx\" {...iconProps} />\n            </IconButton>\n          )}\n        </Box>\n\n        {onDismissAll && (\n          <Box\n            sx={{\n              padding: '0 8px 4px 16px',\n              display: 'flex',\n              justifyContent: 'flex-end',\n              ...dismissBoxSx,\n            }}\n            {...restDismissBox}\n          >\n            <Button\n              onClick={onDismissAll}\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"text\"\n              data-testid=\"NotificationCenter.dismiss\"\n              {...dismissButtonProps}\n            >\n              {dismissAllText}\n            </Button>\n          </Box>\n        )}\n        <Box\n          sx={{\n            overflowY: 'auto',\n            // add divider between notifications\n            '& [data-testid=\"Notification\"]:not(:last-child)': {\n              borderBottom: 1,\n              borderColor: 'surface.secondary',\n            },\n            ...containerSx,\n          }}\n          data-testid=\"NotificationCenter.content\"\n          {...restContainer}\n        >\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenter","forwardRef","_a","ref","children","sx","title","headerProps","titleProps","dismissAllText","onDismissAll","onClose","iconButtonProps","iconProps","containerProps","dismissBoxProps","dismissButtonProps","height","rest","__rest","_b","headerSx","restHeader","_c","containerSx","restContainer","_d","dismissBoxSx","restDismissBox","_e","iconButtonSx","restIconButton","_jsxs","Box","Object","assign","display","flexDirection","width","xs","sm","md","borderRadius","backgroundColor","color","boxShadow","overflow","maxHeight","heightValue","includes","padding","justifyContent","_jsx","Typography","variant","component","IconButton","onClick","size","className","CloseIcon","fontSize","Button","overflowY","borderBottom","borderColor"],"mappings":"4PAiEa,MAAAA,EAAkDC,GAC7D,CACEC,EAiBAC,KAjBA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,MACFA,EAAQ,gBAAeC,YACvBA,EAAWC,WACXA,EAAUC,eACVA,EAAiB,cAAaC,aAC9BA,EAAYC,QACZA,EAAOC,gBACPA,EAAeC,UACfA,EAASC,eACTA,EAAcC,gBACdA,EAAeC,mBACfA,EAAkBC,OAClBA,EAAS,KAAGf,EACTgB,EAAIC,EAAAjB,EAfT,+LAmBA,MAAMkB,EAAkCb,QAAAA,EAAe,IAA/CF,GAAIgB,GAA6CD,EAAhCE,EAAnBH,EAAAC,EAAA,CAAA,OACAG,EAAwCT,QAAAA,EAAkB,IAAxDT,GAAImB,GAAsDD,EAAtCE,EAAtBN,EAAAI,EAAA,CAAA,OACAG,EAA0CX,QAAAA,EAAmB,IAA3DV,GAAIsB,GAAyDD,EAAxCE,EAAvBT,EAAAO,EAAA,CAAA,OACAG,EAA0CjB,QAAAA,EAAmB,IAA3DP,GAAIyB,GAAyDD,EAAxCE,EAAvBZ,EAAAU,EAAA,CAAA,OAUN,OACEG,EAACC,EACCC,OAAAC,OAAA,CAAAhC,IAAKA,EACLE,GAAE6B,OAAAC,OAAA,CACAC,QAAS,OACTC,cAAe,SACfC,MAAO,CAAEC,GAAI,OAAQC,GAAI,QAASC,GAAI,SACtCC,aAAc,CAAEH,GAAI,MAAOC,GAAI,OAC/BG,gBAAiB,qBACjBC,MAAO,eACPC,UAAW,2EACXC,SAAU,SACVC,WApBgBC,EAoBQ/B,EAnBD,iBAAhB+B,GAA4BA,EAAYC,SAAS,MACnDD,EAGF,GAAGA,QAgBH3C,GAAE,cAEK,sBACRa,EAAI,CAAAd,SAAA,CAER4B,EAACC,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,qBACTd,QAAS,OACTe,eAAgB,iBACb9B,IAEDC,EAAU,CAAAlB,SAAA,CAEdgD,EAACC,EAAUnB,OAAAC,OAAA,CAACmB,QAAQ,KAAKC,UAAU,OAAM,cAAa,4BAA+B/C,EAAU,CAAAJ,SAC5FE,KAEFK,GACCyC,EAACI,EACYtB,OAAAC,OAAA,CAAA,aAAA,6BACXsB,QAAS9C,EACT+C,KAAK,SACLC,UAAU,6BACVtD,GACE6B,OAAAC,OAAA,CAAAe,QAAS,OACNpB,GAAY,cAEL,8BACRC,EAAc,CAAA3B,SAElBgD,EAACQ,EAAS1B,OAAAC,OAAA,CAAC0B,SAAS,SAASF,UAAU,WAAc9C,WAK1DH,GACC0C,EAACnB,EACCC,OAAAC,OAAA,CAAA9B,GACE6B,OAAAC,OAAA,CAAAe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YACbxB,IAEDC,EAEJ,CAAAxB,SAAAgD,EAACU,EACC5B,OAAAC,OAAA,CAAAsB,QAAS/C,EACTgD,KAAK,QACLd,MAAM,YACNU,QAAQ,OACI,cAAA,8BACRtC,YAEHP,QAIP2C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACA4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAEZzC,GAEO,cAAA,8BACRC,YAEHrB,SA3Fc,IAAC4C,CA6Fd"}

package/components/notification/NotificationCenterCategory.d.ts

@@ -0,0 +1,24 @@
+import React, { ElementType, FC } from 'react';
+import { BoxProps, TypographyProps } from '@mui/material';
+export interface NotificationCenterCategoryProps extends BoxProps<ElementType> {
+    /**
+     * Title of the notification
+     */
+    title: React.ReactNode;
+    /**
+     * Custom props for the header
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Custom props for the title
+     */
+    titleProps?: TypographyProps<ElementType>;
+    /**
+     * Custom props for the container
+     */
+    containerProps?: BoxProps<ElementType>;
+}
+/**
+ * Component that renders a category in the Notification Center
+ */
+export declare const NotificationCenterCategory: FC<NotificationCenterCategoryProps>;

package/components/notification/NotificationCenterCategory.js

@@ -0,0 +1,2 @@
+import{__rest as t}from"tslib";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as o,Typography as a}from"@mui/material";const n=i(((i,n)=>{var{title:s,headerProps:c,titleProps:l,containerProps:d,children:p}=i,m=t(i,["title","headerProps","titleProps","containerProps","children"]);const b=null!=l?l:{},{sx:f}=b,g=t(b,["sx"]);return r(o,Object.assign({"data-testid":"NotificationCenterCategory"},m,{ref:n,children:[e(a,Object.assign({variant:"caption2",sx:Object.assign({pl:1,pt:2,pb:1,display:"block",borderBottom:1,borderColor:"surface.secondary"},f),"data-testid":"NotificationCenterCategory.title"},g,{children:s})),e(o,Object.assign({"data-testid":"NotificationCenterCategory.content"},d,{children:p}))]}))}));export{n as NotificationCenterCategory};
+//# sourceMappingURL=NotificationCenterCategory.js.map

package/components/notification/NotificationCenterCategory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenterCategory.js","sources":["../../../src/components/notification/NotificationCenterCategory.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, FC } from 'react';\nimport { Box, BoxProps, Typography, TypographyProps } from '@mui/material';\n\nexport interface NotificationCenterCategoryProps extends BoxProps<ElementType> {\n  /**\n   * Title of the notification\n   */\n  title: React.ReactNode;\n  /**\n   * Custom props for the header\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Custom props for the title\n   */\n  titleProps?: TypographyProps<ElementType>;\n  /**\n   * Custom props for the container\n   */\n  containerProps?: BoxProps<ElementType>;\n}\n\n/**\n * Component that renders a category in the Notification Center\n */\nexport const NotificationCenterCategory: FC<NotificationCenterCategoryProps> = forwardRef(\n  ({ title, headerProps, titleProps, containerProps, children, ...rest }, ref) => {\n    const { sx: titleSx, ...restTitle } = titleProps ?? {};\n\n    return (\n      <Box data-testid=\"NotificationCenterCategory\" {...rest} ref={ref}>\n        <Typography\n          variant=\"caption2\"\n          sx={{\n            pl: 1,\n            pt: 2,\n            pb: 1,\n            display: 'block',\n            borderBottom: 1,\n            borderColor: 'surface.secondary',\n            ...titleSx,\n          }}\n          data-testid=\"NotificationCenterCategory.title\"\n          {...restTitle}\n        >\n          {title}\n        </Typography>\n        <Box data-testid=\"NotificationCenterCategory.content\" {...containerProps}>\n          {children}\n        </Box>\n      </Box>\n    );\n  },\n);\n"],"names":["NotificationCenterCategory","forwardRef","_a","ref","title","headerProps","titleProps","containerProps","children","rest","__rest","_b","sx","titleSx","restTitle","_jsxs","Box","Object","assign","_jsx","Typography","variant","pl","pt","pb","display","borderBottom","borderColor"],"mappings":"wKAyBa,MAAAA,EAAkEC,GAC7E,CAACC,EAAuEC,KAAvE,IAAAC,MAAEA,EAAKC,YAAEA,EAAWC,WAAEA,EAAUC,eAAEA,EAAcC,SAAEA,GAAmBN,EAANO,EAAIC,EAAAR,EAAnE,kEACC,MAAMS,EAAgCL,QAAAA,EAAc,IAA5CM,GAAIC,GAA0CF,EAA9BG,EAAlBJ,EAAAC,EAAA,CAAA,OAEN,OACEI,EAACC,EAAGC,OAAAC,OAAA,CAAA,cAAa,8BAAiCT,EAAI,CAAEN,IAAKA,EAAGK,SAAA,CAC9DW,EAACC,EAAUH,OAAAC,OAAA,CACTG,QAAQ,WACRT,GAAEK,OAAAC,OAAA,CACAI,GAAI,EACJC,GAAI,EACJC,GAAI,EACJC,QAAS,QACTC,aAAc,EACdC,YAAa,qBACVd,iBAEO,oCACRC,EAAS,CAAAN,SAEZJ,KAEHe,EAACH,EAAgBC,OAAAC,OAAA,CAAA,cAAA,sCAAyCX,EACvD,CAAAC,SAAAA,QAEC"}

package/components/notification/NotificationCenterHeaderButton.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { HeaderButtonProps } from '@/src/components/header/HeaderButton';
+import { ClickAwayListenerProps, PopperProps, FadeProps } from '@mui/material';
+import { NotificationCenterProps } from './NotificationCenter';
+export interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {
+    /**
+     * Label for the tooltip or the text button
+     */
+    label?: HeaderButtonProps['label'];
+    /**
+     * Change icon button with tooltip into button
+     */
+    extend?: boolean;
+    /**
+     * Properties applied to tooltip
+     */
+    tooltipProps?: HeaderButtonProps['tooltipProps'];
+    /**
+     * Properties applied to badge
+     */
+    badgeProps?: HeaderButtonProps['badgeProps'];
+    /**
+     * @deprecated use badgeProps instead
+     */
+    indicator?: HeaderButtonProps['indicator'];
+    /**
+     * Props applied to HeaderButton
+     */
+    headerButtonProps?: HeaderButtonProps;
+    /**
+     * Icon for the HeaderButton
+     * @default BellIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Props for the Popper component
+     */
+    popperProps?: PopperProps;
+    /**
+     * Props applied to ClickAwayListener
+     */
+    clickAwayListenerProps?: ClickAwayListenerProps;
+    /**
+     * Props applied to Fade
+     */
+    fadeProps?: FadeProps;
+}
+/**
+ * HeaderButton that opens NotificationCenter
+ */
+export declare const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps>;

package/components/notification/NotificationCenterHeaderButton.js

@@ -0,0 +1,2 @@
+import{__rest as o}from"tslib";import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{forwardRef as i,useState as n}from"react";import{HeaderButton as s}from"../header/HeaderButton.js";import{BellIcon as a}from"../icon/stroke/BellIcon.js";import{Popper as c,ClickAwayListener as p,Fade as l}from"@mui/material";import{NotificationCenter as d}from"./NotificationCenter.js";const m=i(((i,m)=>{var{popperProps:f,clickAwayListenerProps:b,fadeProps:P,label:u="Notifications",extend:g,tooltipProps:j,badgeProps:x,indicator:h,headerButtonProps:O,icon:k,onClick:B}=i,C=o(i,["popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","indicator","headerButtonProps","icon","onClick"]);const[w,y]=n(null),A=null!=f?f:{},{sx:I}=A,N=o(A,["sx"]);return e(t,{children:[r(s,Object.assign({label:u,extend:null!=g&&g,tooltipProps:Object.assign(Object.assign({},w&&{open:!1}),j),badgeProps:x,indicator:h,onClick:o=>{null==B||B(o),y(o.currentTarget)},ref:m,"data-testid":"NotificationCenterHeaderButton"},O,{children:k||r(a,{})})),r(c,Object.assign({open:!!w,anchorEl:w,placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,18]}}],transition:!0,sx:Object.assign({zIndex:o=>o.zIndex.appBar+10},I)},N,{children:({TransitionProps:o})=>r(p,Object.assign({onClickAway:()=>y(null)},b,{children:r(l,Object.assign({},o,P,{children:r(d,Object.assign({},C,{ref:void 0}))}))}))}))]})}));export{m as NotificationCenterHeaderButton};
+//# sourceMappingURL=NotificationCenterHeaderButton.js.map

package/components/notification/NotificationCenterHeaderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenterHeaderButton.js","sources":["../../../src/components/notification/NotificationCenterHeaderButton.tsx"],"sourcesContent":["import React, { FC, forwardRef, ReactNode, useState } from 'react';\nimport { HeaderButton, HeaderButtonProps } from '@/src/components/header/HeaderButton';\nimport { BellIcon } from '@/src/components/icon/stroke/BellIcon';\nimport { Fade, ClickAwayListener, ClickAwayListenerProps, Popper, PopperProps, FadeProps } from '@mui/material';\nimport { NotificationCenter, NotificationCenterProps } from './NotificationCenter';\n\nexport interface NotificationCenterHeaderButtonProps extends NotificationCenterProps {\n  /**\n   * Label for the tooltip or the text button\n   */\n  label?: HeaderButtonProps['label'];\n  /**\n   * Change icon button with tooltip into button\n   */\n  extend?: boolean;\n  /**\n   * Properties applied to tooltip\n   */\n  tooltipProps?: HeaderButtonProps['tooltipProps'];\n  /**\n   * Properties applied to badge\n   */\n  badgeProps?: HeaderButtonProps['badgeProps'];\n  /**\n   * @deprecated use badgeProps instead\n   */\n  indicator?: HeaderButtonProps['indicator'];\n  /**\n   * Props applied to HeaderButton\n   */\n  headerButtonProps?: HeaderButtonProps;\n  /**\n   * Icon for the HeaderButton\n   * @default BellIcon\n   */\n  icon?: ReactNode;\n  /**\n   * Props for the Popper component\n   */\n  popperProps?: PopperProps;\n  /**\n   * Props applied to ClickAwayListener\n   */\n  clickAwayListenerProps?: ClickAwayListenerProps;\n  /**\n   * Props applied to Fade\n   */\n  fadeProps?: FadeProps;\n}\n\n/**\n * HeaderButton that opens NotificationCenter\n */\nexport const NotificationCenterHeaderButton: FC<NotificationCenterHeaderButtonProps> = forwardRef(\n  (\n    {\n      popperProps,\n      clickAwayListenerProps,\n      fadeProps,\n      label = 'Notifications',\n      extend,\n      tooltipProps,\n      badgeProps,\n      indicator,\n      headerButtonProps,\n      icon,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [anchor, setAnchor] = useState(null);\n    const { sx: popperSx, ...restPopper } = popperProps ?? {};\n\n    return (\n      <>\n        <HeaderButton\n          label={label}\n          extend={extend ?? false}\n          tooltipProps={{\n            ...(anchor && { open: false }),\n            ...tooltipProps,\n          }}\n          badgeProps={badgeProps}\n          indicator={indicator}\n          onClick={(e) => {\n            onClick?.(e);\n            setAnchor(e.currentTarget);\n          }}\n          ref={ref}\n          data-testid=\"NotificationCenterHeaderButton\"\n          {...headerButtonProps}\n        >\n          {icon || <BellIcon />}\n        </HeaderButton>\n        <Popper\n          open={!!anchor}\n          anchorEl={anchor}\n          placement=\"bottom-end\"\n          modifiers={[\n            {\n              name: 'offset',\n              options: {\n                offset: [0, 18],\n              },\n            },\n          ]}\n          transition\n          sx={{\n            zIndex: (theme) => theme.zIndex.appBar + 10,\n            ...popperSx,\n          }}\n          {...restPopper}\n        >\n          {({ TransitionProps }) => (\n            <ClickAwayListener onClickAway={() => setAnchor(null)} {...clickAwayListenerProps}>\n              <Fade {...TransitionProps} {...fadeProps}>\n                <NotificationCenter {...rest} ref={undefined} />\n              </Fade>\n            </ClickAwayListener>\n          )}\n        </Popper>\n      </>\n    );\n  },\n);\n"],"names":["NotificationCenterHeaderButton","forwardRef","_a","ref","popperProps","clickAwayListenerProps","fadeProps","label","extend","tooltipProps","badgeProps","indicator","headerButtonProps","icon","onClick","rest","__rest","anchor","setAnchor","useState","_b","sx","popperSx","restPopper","_jsxs","_jsx","HeaderButton","Object","assign","open","e","currentTarget","children","BellIcon","Popper","anchorEl","placement","modifiers","name","options","offset","transition","zIndex","theme","appBar","TransitionProps","ClickAwayListener","onClickAway","Fade","NotificationCenter","undefined"],"mappings":"oYAqDa,MAAAA,EAA0EC,GACrF,CACEC,EAcAC,KAdA,IAAAC,YACEA,EAAWC,uBACXA,EAAsBC,UACtBA,EAASC,MACTA,EAAQ,gBAAeC,OACvBA,EAAMC,aACNA,EAAYC,WACZA,EAAUC,UACVA,EAASC,kBACTA,EAAiBC,KACjBA,EAAIC,QACJA,GAAOZ,EACJa,EAZLC,EAAAd,EAAA,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,YAAA,oBAAA,OAAA,YAgBA,MAAOe,EAAQC,GAAaC,EAAS,MAC/BC,EAAkChB,QAAAA,EAAe,IAA/CiB,GAAIC,GAA6CF,EAAhCG,EAAnBP,EAAAI,EAAA,CAAA,OAEN,OACEI,eACEC,EAACC,iBACCnB,MAAOA,EACPC,OAAQA,SAAAA,EACRC,aAAYkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACNX,GAAU,CAAEY,MAAM,IACnBpB,GAELC,WAAYA,EACZC,UAAWA,EACXG,QAAUgB,IACRhB,SAAAA,EAAUgB,GACVZ,EAAUY,EAAEC,cAAc,EAE5B5B,IAAKA,gBACO,kCACRS,EAAiB,CAAAoB,SAEpBnB,GAAQY,EAACQ,EAAQ,CAAA,MAEpBR,EAACS,EAAMP,OAAAC,OAAA,CACLC,OAAQZ,EACRkB,SAAUlB,EACVmB,UAAU,aACVC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAC,EAAG,OAIlBC,YAAU,EACVpB,GAAEM,OAAAC,OAAA,CACAc,OAASC,GAAUA,EAAMD,OAAOE,OAAS,IACtCtB,IAEDC,YAEH,EAAGsB,qBACFpB,EAACqB,EAAiBnB,OAAAC,OAAA,CAACmB,YAAa,IAAM7B,EAAU,OAAWb,EACzD,CAAA2B,SAAAP,EAACuB,EAAIrB,OAAAC,OAAA,CAAA,EAAKiB,EAAqBvC,EAC7B,CAAA0B,SAAAP,EAACwB,EAAkBtB,OAAAC,OAAA,CAAA,EAAKb,EAAI,CAAEZ,SAAK+C,gBAK1C"}

package/{organisms → components}/notification/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Notification';
+export * from './NotificationButton';
 export * from './NotificationCenter';
 export * from './NotificationCenterCategory';
 export * from './NotificationCenterHeaderButton';

package/{layout/PageLayout → components/pageLayout}/PageLayout.d.ts

@@ -1,18 +1,12 @@
-import React from 'react';
-export type PageLayoutProps = {
-    /**
-     * Content of an page
-     * @requires
-     */
-    children: React.ReactNode;
+import React, { ElementType } from 'react';
+import { BoxProps } from '@mui/material';
+export interface PageLayoutProps extends BoxProps<ElementType> {
     /**
      * React node that renders layout header
-     * @default undefined
      */
     header?: React.ReactNode;
     /**
      * React node that renders layout footer
-     * @default undefined
      */
     footer?: React.ReactNode;
     /**
@@ -24,7 +18,7 @@ export type PageLayoutProps = {
      */
     headerPosition?: 'static' | 'fixed' | 'slide';
     /**
-     * Specifies threshold that is used to hide header
+     * Specifies threshold that is used to hide header for the headerPosition="slide"
      * @default 250
      */
     headerSlideThreshold?: number;
@@ -33,5 +27,25 @@ export type PageLayoutProps = {
      * @default false
      */
     wrapContent?: boolean;
-};
+    /**
+     * Properties applied to header wrapper
+     */
+    headerProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to header wrapper
+     */
+    headerContainerProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to root header wrapper
+     */
+    headerWrapperProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to page content wrapper
+     */
+    contentProps?: BoxProps<ElementType>;
+    /**
+     * Properties applied to footer wrapper
+     */
+    footerProps?: BoxProps<ElementType>;
+}
 export declare const PageLayout: React.FC<PageLayoutProps>;

package/components/pageLayout/PageLayout.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"tslib";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useState as i,useCallback as o}from"react";import{useTheme as s,useScrollTrigger as n,Box as d,Slide as c,Container as h}from"@mui/material";const p=a(((a,p)=>{var{children:l,sx:g,header:m,footer:x,headerPosition:f="static",headerSlideThreshold:b=250,wrapContent:P=!1,headerProps:j,headerContainerProps:u,headerWrapperProps:O,contentProps:w,footerProps:y}=a,C=e(a,["children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps"]);const v=s(),L=null!=O?O:{},{sx:W}=L,z=e(L,["sx"]),B=null!=u?u:{},{sx:H,className:N}=B,S=e(B,["sx","className"]),[T,I]=i(parseFloat(String(v.mixins.toolbar.minHeight))),R=o((e=>{"static"!==f&&e&&new ResizeObserver((()=>{I(e.offsetHeight)})).observe(e)}),["static"!==f]),k=n({target:window,threshold:b});return t(d,Object.assign({sx:Object.assign({position:"relative",minHeight:"100vh",backgroundColor:"surface.primary",display:"grid",gridTemplateRows:[m&&"max-content","auto",x&&"max-content"].filter(Boolean).join(" ")},g),"data-testid":"PageLayout",ref:p},C,{children:[m&&r(d,Object.assign({sx:Object.assign(Object.assign({},"static"!==f&&T&&{height:T}),W),"data-testid":"PageLayout.headerWrapper"},z,{children:r(d,Object.assign({},"slide"===f&&{component:c,appear:!1,direction:"down",in:!k},{sx:Object.assign(Object.assign({},"static"!==f&&{position:"fixed",top:"0",left:"0",right:"0",zIndex:v.zIndex.appBar}),H),className:["static"!==f?"mui-fixed":"",N].filter(Boolean).join(", ")},S,{children:r(d,Object.assign({ref:R,"data-testid":"PageLayout.header"},j,{children:m}))}))})),r(d,Object.assign({},P&&{component:h,maxWidth:"xl"},{"data-testid":"Container"},w,{children:l})),x&&r(d,Object.assign({"data-testid":"PageLayout.footer"},y,{children:x}))]}))}));export{p as PageLayout};
+//# sourceMappingURL=PageLayout.js.map

package/components/pageLayout/PageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.js","sources":["../../../src/components/pageLayout/PageLayout.tsx"],"sourcesContent":["import React, { useCallback, useState, ElementType, forwardRef } from 'react';\nimport { Box, BoxProps, useScrollTrigger, Slide, Container, useTheme } from '@mui/material';\n\nexport interface PageLayoutProps extends BoxProps<ElementType> {\n  /**\n   * React node that renders layout header\n   */\n  header?: React.ReactNode;\n  /**\n   * React node that renders layout footer\n   */\n  footer?: React.ReactNode;\n  /**\n   * Specifies position of header\n   * - static: header is fixed on top of the content\n   * - fixed: header is visible while user scrolls the content\n   * - slide: header is visible until user scrolls down beyond `headerSlideThreshold`, header will reappear when user scrolls up\n   * @default static\n   */\n  headerPosition?: 'static' | 'fixed' | 'slide';\n  /**\n   * Specifies threshold that is used to hide header for the headerPosition=\"slide\"\n   * @default 250\n   */\n  headerSlideThreshold?: number;\n  /**\n   * Specifies if content should be automatically wrapped into container component\n   * @default false\n   */\n  wrapContent?: boolean;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to header wrapper\n   */\n  headerContainerProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to root header wrapper\n   */\n  headerWrapperProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to page content wrapper\n   */\n  contentProps?: BoxProps<ElementType>;\n  /**\n   * Properties applied to footer wrapper\n   */\n  footerProps?: BoxProps<ElementType>;\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = forwardRef(\n  (\n    {\n      children,\n      sx,\n      header,\n      footer,\n      headerPosition = 'static',\n      headerSlideThreshold = 250,\n      wrapContent = false,\n      headerProps,\n      headerContainerProps,\n      headerWrapperProps,\n      contentProps,\n      footerProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const { sx: headerWrapperSx, ...restHeaderWrapper } = headerWrapperProps ?? {};\n    const {\n      sx: headerContainerSx,\n      className: headerContainerClassName,\n      ...restHeaderContainer\n    } = headerContainerProps ?? {};\n    // header height to take actual space in dom for the fixed/slide variants\n    const [headerHeight, setHeaderHeight] = useState<number>(parseFloat(String(theme.mixins.toolbar.minHeight)));\n    const headerContainerRef = useCallback(\n      (element: HTMLElement) => {\n        if (headerPosition === 'static' || !element) {\n          return;\n        }\n        new ResizeObserver(() => {\n          setHeaderHeight(element.offsetHeight);\n        }).observe(element);\n      },\n      [headerPosition !== 'static'],\n    );\n    // trigger hide of the header during scroll\n    const slideTrigger = useScrollTrigger({\n      target: window,\n      threshold: headerSlideThreshold,\n    });\n\n    return (\n      <Box\n        sx={{\n          position: 'relative',\n          minHeight: '100vh',\n          backgroundColor: 'surface.primary',\n          display: 'grid',\n          gridTemplateRows: [header && 'max-content', 'auto', footer && 'max-content'].filter(Boolean).join(' '),\n          ...sx,\n        }}\n        data-testid=\"PageLayout\"\n        ref={ref}\n        {...rest}\n      >\n        {header && (\n          <Box\n            sx={{\n              ...(headerPosition !== 'static' && headerHeight && { height: headerHeight }),\n              ...headerWrapperSx,\n            }}\n            data-testid=\"PageLayout.headerWrapper\"\n            {...restHeaderWrapper}\n          >\n            <Box\n              {...(headerPosition === 'slide' && {\n                component: Slide,\n                appear: false,\n                direction: 'down',\n                in: !slideTrigger,\n              })}\n              sx={{\n                ...(headerPosition !== 'static' && {\n                  position: 'fixed',\n                  top: '0',\n                  left: '0',\n                  right: '0',\n                  zIndex: theme.zIndex.appBar,\n                }),\n                ...headerContainerSx,\n              }}\n              className={[headerPosition !== 'static' ? 'mui-fixed' : '', headerContainerClassName]\n                .filter(Boolean)\n                .join(', ')}\n              {...restHeaderContainer}\n            >\n              <Box ref={headerContainerRef} data-testid=\"PageLayout.header\" {...headerProps}>\n                {header}\n              </Box>\n            </Box>\n          </Box>\n        )}\n        <Box {...(wrapContent && { component: Container, maxWidth: 'xl' })} data-testid=\"Container\" {...contentProps}>\n          {children}\n        </Box>\n        {footer && (\n          <Box data-testid=\"PageLayout.footer\" {...footerProps}>\n            {footer}\n          </Box>\n        )}\n      </Box>\n    );\n  },\n);\n"],"names":["PageLayout","forwardRef","_a","ref","children","sx","header","footer","headerPosition","headerSlideThreshold","wrapContent","headerProps","headerContainerProps","headerWrapperProps","contentProps","footerProps","rest","__rest","theme","useTheme","_b","headerWrapperSx","restHeaderWrapper","_c","headerContainerSx","className","headerContainerClassName","restHeaderContainer","headerHeight","setHeaderHeight","useState","parseFloat","String","mixins","toolbar","minHeight","headerContainerRef","useCallback","element","ResizeObserver","offsetHeight","observe","slideTrigger","useScrollTrigger","target","window","threshold","_jsxs","Box","Object","assign","position","backgroundColor","display","gridTemplateRows","filter","Boolean","join","_jsx","height","component","Slide","appear","direction","in","top","left","right","zIndex","appBar","Container","maxWidth"],"mappings":"qPAoDa,MAAAA,EAAwCC,GACnD,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAQC,GACRA,EAAEC,OACFA,EAAMC,OACNA,EAAMC,eACNA,EAAiB,SAAQC,qBACzBA,EAAuB,IAAGC,YAC1BA,GAAc,EAAKC,YACnBA,EAAWC,qBACXA,EAAoBC,mBACpBA,EAAkBC,aAClBA,EAAYC,YACZA,GAEDb,EADIc,EAAIC,EAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,IACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAkED,EAA9CE,EAA1BL,EAAAG,EAAA,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAM,EAHlB,CAIL,KAAA,eAEMK,EAAcC,GAAmBC,EAAiBC,WAAWC,OAAOd,EAAMe,OAAOC,QAAQC,aAC1FC,EAAqBC,GACxBC,IACwB,WAAnB9B,GAAgC8B,GAGpC,IAAIC,gBAAe,KACjBV,EAAgBS,EAAQE,aAAa,IACpCC,QAAQH,EAAQ,GAErB,CAAoB,WAAnB9B,IAGGkC,EAAeC,EAAiB,CACpCC,OAAQC,OACRC,UAAWrC,IAGb,OACEsC,EAACC,iBACC3C,GAAE4C,OAAAC,OAAA,CACAC,SAAU,WACVhB,UAAW,QACXiB,gBAAiB,kBACjBC,QAAS,OACTC,iBAAkB,CAAChD,GAAU,cAAe,OAAQC,GAAU,eAAegD,OAAOC,SAASC,KAAK,MAC/FpD,GAAE,cAEK,aACZF,IAAKA,GACDa,EAEH,CAAAZ,SAAA,CAAAE,GACCoD,EAACV,EACCC,OAAAC,OAAA,CAAA7C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAE+B,OAAQ/B,IAC1DP,GAEO,cAAA,4BACRC,EAAiB,CAAAlB,SAErBsD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EACsB,UAAnB1C,GAA8B,CACjCoD,UAAWC,EACXC,QAAQ,EACRC,UAAW,OACXC,IAAKtB,IAEPrC,GAAE4C,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACuB,WAAnB1C,GAA+B,CACjC2C,SAAU,QACVc,IAAK,IACLC,KAAM,IACNC,MAAO,IACPC,OAAQlD,EAAMkD,OAAOC,SAEpB7C,GAELC,UAAW,CAAoB,WAAnBjB,EAA8B,YAAc,GAAIkB,GACzD6B,OAAOC,SACPC,KAAK,OACJ9B,EAAmB,CAAAvB,SAEvBsD,EAACV,EAAIC,OAAAC,OAAA,CAAA/C,IAAKiC,EAAgC,cAAA,qBAAwBzB,EAC/D,CAAAP,SAAAE,WAKToD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EAAMxC,GAAe,CAAEkD,UAAWU,EAAWC,SAAU,MAAqB,CAAA,cAAA,aAAgBzD,EAC7F,CAAAV,SAAAA,KAEFG,GACCmD,EAACV,EAAGC,OAAAC,OAAA,CAAA,cAAa,qBAAwBnC,EAAW,CAAAX,SACjDG,QAGD"}

package/components/pagination/pagination.d.ts

@@ -1,90 +1,43 @@
-import { SxProps, Theme } from '@mui/material';
-import React, { HTMLAttributes } from 'react';
-export interface PaginationProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'size'> {
-    /**
-     *  The total number of pages.
-     */
-    count?: number;
-    /**
-       The page selected by default
-       */
-    defaultPage?: number;
+import { PaginationProps as MuiPaginationProps } from '@mui/material';
+import React from 'react';
+export interface PaginationProps extends MuiPaginationProps {
     /**
      *  If true, a pagination will be disabled.
+     *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`
      */
     isDisabled?: boolean;
-    /**
-     *  Set the current page number controlled from outside.
-     */
-    page?: number;
     /**
      *  The label for previous button.
-     *  @deprecated Previous button label not used by design, will be deleted in future versions
+     *  @deprecated No longer used, property has no effect
      */
     prevButtonLabel?: string;
     /**
      *  The label for next button.
-     *  @deprecated Previous button label not used by design, will be deleted in future versions
+     *  @deprecated No longer used, property has no effect
      */
     nextButtonLabel?: string;
-    /**
-     * If true, hide the next-page button.
-     */
-    hideNextButton?: boolean;
-    /**
-     * If true, hide the previous-page button.
-     */
-    hidePrevButton?: boolean;
     /**
      * If true, hide the first-page button.
+     * @deprecated Use showFirstButton instead
      */
     hideFirstButton?: boolean;
     /**
      * If true, hide the last-page button.
+     * @deprecated Use showLastButton instead
      */
     hideLastButton?: boolean;
-    /**
-     * Number of always visible pages at the beginning and end.
-     */
-    boundaryCount?: number;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: object;
-    /**
-     *	Accepts a function which returns a string value that provides a user-friendly name for the current page.
-     */
-    getItemAriaLabel?: (type: string, page: number, selected: boolean) => string;
-    /**
-     * If true, show the first-page button.
-     * @deprecated showFirstButton not working and is deprecated  as first-button should be visible by default according to design. Use hideFirstButton property instead.
-     */
-    showFirstButton?: boolean;
-    /**
-     * If true, show the last-page button.
-     * @deprecated showLastButton not working and is deprecated  as last-button should be visible by default according to design. Use hideLastButton property instead.
-     */
-    showLastButton?: boolean;
-    /**
-     * Number of always visible pages before and after the current page.
-     */
-    siblingCount?: number;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * On click callback.
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /**
      * enable or disable direction label. mobile only
-     * @deprecated hideLabels not used by design, will be deleted in future versions
+     * @deprecated No longer used, property has no effect
      */
     hideLabels?: boolean;
     /**
      * callback for value change handling. takes the new value as its only parameter
+     * @deprecated provide the callback in the onChange function
      **/
     onValueChange?: (payload: number) => void;
 }
-export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @mui Pagination that contain props parser for the previous implementation
+ */
+export declare const Pagination: React.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/pagination/pagination.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsxs as t,jsx as i,Fragment as n}from"react/jsx-runtime";import{styled as o,Pagination as a,PaginationItem as r,TextField as l,IconButton as s}from"@mui/material";import{forwardRef as p,useState as d,useEffect as c,useCallback as m}from"react";import{ternaryCondition as u}from"../../utils/utilities.js";import{Icon as h}from"../icon/icon.js";import"../icon/icon.definitions.js";const x=(e,t)=>""===e||"number"==typeof e&&e-1>0&&e+1<=t||"number"==typeof parseInt(e)&&parseInt(e)>0&&parseInt(e)<=t,f=(e,n,o,a,r,l)=>t(s,{"aria-label":"Navigate",variant:"standard",onClick:n,disabled:o,children:["forward"===a&&!r&&l,i(h,{name:e}),"back"===a&&!r&&l]}),g=p(((o,s)=>{var{count:p,isDisabled:g,page:v,prevButtonLabel:B,nextButtonLabel:y,defaultPage:w,hideNextButton:L,hidePrevButton:C,hideFirstButton:I,hideLastButton:j,hideLabels:k,onValueChange:N}=o,P=e(o,["count","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange"]);const z=w||1,[M,S]=d(z),[V,W]=d(!0),[D,O]=d();c((()=>{M&&N&&N(M)}),[M,N]),c((()=>{V?W(!1):v&&!g&&S(v)}),[g,V,v]);const F=m(((e,t)=>{S(t)}),[]);return t(b,{"data-testid":"Pagination-wrapper",children:[i(a,Object.assign({className:"desktopView"},P,{shape:"rounded",count:p,disabled:g,page:M,hideNextButton:L,hidePrevButton:C,showFirstButton:!I,showLastButton:!j,ref:s,onChange:F,renderItem:e=>i(r,Object.assign({className:u(C,!1,"MuiPagination-prev",""),components:{first:()=>i(h,{name:"previous",fontSize:"small"}),last:()=>i(h,{name:"next",fontSize:"small"}),previous:()=>t(n,{children:[i(h,{name:"chevron-left",fontSize:"small"}),i(n,{children:B})]}),next:()=>t(n,{children:[i(n,{children:y}),i(h,{name:"chevron-right",fontSize:"small"})]})}},e))}))," ",i("div",{style:{display:"flex",flexDirection:"column"},className:"mobileView "+(g?"paginationDisabled":""),children:t("div",{className:"mobileContainer",children:[f("chevron-previous",(()=>x(M-1,p)&&S(1)),!x(M-1,p)),f("chevron-left",(()=>x(M-1,p)&&S(M-1)),!x(M-1,p),"back",k,B),i(l,{className:"textFieldContainer",value:M,inputProps:{inputMode:"numeric",pattern:`[1-${p}]*`},onChange:e=>(e=>{""===e&&(O(M),S(e));const t=parseInt(e);"number"==typeof t&&x(t,p)&&(O(t),S(t))})(e.target.value),onBlur:()=>""===M&&S(D)}),f("chevron-right",(()=>x(M+1,p)&&S(M+1)),!x(M+1,p),"forward",k,y),f("chevron-next",(()=>x(M+1,p)&&S(p)),!x(M+1,p))]})})]})})),b=o("div")((({theme:e})=>{let t={};const i={alignItems:"center",display:"flex",justifyContent:"center",width:"100%"};return t={[e.breakpoints.up("md")]:{"& .mobileView":{display:"none!important"}},[e.breakpoints.down("md")]:{"& .desktopView":{display:"none!important"}},"& .desktopView":{"& .MuiButton-startIcon":{marginRight:"8px",display:"inline-flex"},"& .MuiButton-endIcon":{marginLeft:"8px",display:"inline-flex"}},"& .mobileView":Object.assign(Object.assign({},i),{flexDirection:"column",flexWrap:"nowrap","& .mobileContainer":Object.assign(Object.assign({},i),{flexWrap:"nowrap"}),"& .textFieldContainer":{height:"36px",margin:"0 34px","& input, fieldset":{backgroundColor:e.palette.transparent.primary,border:0,borderRadius:"4px",fontSize:"16px",fontWeight:"400",height:"36px",lineHeight:"36px",minWidth:"44px",maxWidth:"50px",padding:"0 4px",textAlign:"center",color:e.palette.text.primary},"& fieldset":{visibility:"hidden"},"& div":{"&::before":{borderBottom:0},"&::after":{borderBottom:0}}},"& .controllerContainer":{"& .arrowLabel":{color:e.palette.text.primary,fontSize:"16px",fontWeight:"400",lineHeight:"16px"},"& .MuiButton-startIcon":{marginRight:"8px",display:"inline-flex"},"& .MuiButton-endIcon":{marginLeft:"8px",display:"inline-flex"},"& .MuiIcon-root":{fontSize:"16px",width:"20px",height:"20px"}},"& .counter_label":{color:e.palette.text.primary,fontSize:"12px",fontWeight:"400",lineHeight:"24px",marginTop:"4px"},"&.paginationDisabled":{pointerEvents:"none","& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset":{color:e.palette.disabled.primary}}})},t}));export{g as Pagination};
+import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{Pagination as o}from"@mui/material";import{forwardRef as a}from"react";const n=a(((a,n)=>{var{isDisabled:s,page:i,hideFirstButton:r,hideLastButton:u,showFirstButton:l,showLastButton:h,hideLabels:d,onValueChange:B,disabled:b,onChange:m,prevButtonLabel:L,nextButtonLabel:g}=a,p=t(a,["isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","onValueChange","disabled","onChange","prevButtonLabel","nextButtonLabel"]);return e(o,Object.assign({},p,{ref:n,disabled:b||s,page:i&&m?i:void 0,onChange:(t,e)=>{null==m||m(t,e),null==B||B(e)},showFirstButton:l||!r,showLastButton:h||!u}))}));export{n as Pagination};
 //# sourceMappingURL=pagination.js.map

package/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n  SxProps,\n  Theme,\n  styled,\n  Pagination as MuiPagination,\n  PaginationItem as MuiPaginationItem,\n  TextField,\n  IconButton,\n} from '@mui/material';\nimport React, { HTMLAttributes, forwardRef, useCallback, useEffect, useState } from 'react';\nimport { ternaryCondition } from '../../utils/utilities';\nimport { Icon, IconNameProp } from '../icon';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'size'> {\n  /**\n   *  The total number of pages.\n   */\n  count?: number;\n\n  /**\n\t The page selected by default\n\t */\n  defaultPage?: number;\n\n  /**\n   *  If true, a pagination will be disabled.\n   */\n\n  isDisabled?: boolean;\n\n  /**\n   *  Set the current page number controlled from outside.\n   */\n\n  page?: number;\n  /**\n   *  The label for previous button.\n   *  @deprecated Previous button label not used by design, will be deleted in future versions\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated Previous button label not used by design, will be deleted in future versions\n   */\n  nextButtonLabel?: string;\n  /**\n   * If true, hide the next-page button.\n   */\n  hideNextButton?: boolean;\n\n  /**\n   * If true, hide the previous-page button.\n   */\n  hidePrevButton?: boolean;\n\n  /**\n   * If true, hide the first-page button.\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * Number of always visible pages at the beginning and end.\n   */\n  boundaryCount?: number;\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes?: object;\n  /**\n   *\tAccepts a function which returns a string value that provides a user-friendly name for the current page.\n   */\n  getItemAriaLabel?: (type: string, page: number, selected: boolean) => string;\n  /**\n   * If true, show the first-page button.\n   * @deprecated showFirstButton not working and is deprecated  as first-button should be visible by default according to design. Use hideFirstButton property instead.\n   */\n  showFirstButton?: boolean;\n  /**\n   * If true, show the last-page button.\n   * @deprecated showLastButton not working and is deprecated  as last-button should be visible by default according to design. Use hideLastButton property instead.\n   */\n  showLastButton?: boolean;\n  /**\n   * Number of always visible pages before and after the current page.\n   */\n  siblingCount?: number;\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx?: SxProps<Theme>;\n  /**\n   * On click callback.\n   */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated hideLabels not used by design, will be deleted in future versions\n   */\n  hideLabels?: boolean;\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @description SkodaFlow Pagination component.\n * Properties are inherited from HTML div Attribetes element.\n * @param props PaginationProps\n * @returns React Functional Component\n */\n\nconst isPageNumberValid = (pageNumber: any, count: number) => {\n  return (\n    pageNumber === '' ||\n    (typeof pageNumber === 'number' && pageNumber - 1 > 0 && pageNumber + 1 <= count) ||\n    (typeof parseInt(pageNumber) === 'number' && parseInt(pageNumber) > 0 && parseInt(pageNumber) <= count)\n  );\n};\n\nconst mobileIconButton = (\n  muiIcon: IconNameProp,\n  onClick: () => void,\n  disabled?: boolean,\n  direction?: 'forward' | 'back',\n  hideLabel?: boolean,\n  label?: string,\n) => (\n  <IconButton aria-label=\"Navigate\" variant=\"standard\" onClick={onClick} disabled={disabled}>\n    {direction === 'forward' && !hideLabel && label}\n    <Icon name={muiIcon}></Icon>\n    {direction === 'back' && !hideLabel && label}\n  </IconButton>\n);\n\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      count,\n      isDisabled,\n      page,\n      prevButtonLabel,\n      nextButtonLabel,\n      defaultPage,\n      hideNextButton,\n      hidePrevButton,\n      hideFirstButton,\n      hideLastButton,\n      hideLabels,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const initialPage = defaultPage || 1;\n    const [currentPageNumber, setCurrentPageNumber] = useState<any>(initialPage);\n    const [isFirstMount, setIsFirstMount] = useState(true);\n    const [prevStatePageNumber, setPrevStatePageNumber] = useState<any>();\n\n    useEffect(() => {\n      currentPageNumber && onValueChange && onValueChange(currentPageNumber);\n    }, [currentPageNumber, onValueChange]);\n\n    useEffect(() => {\n      isFirstMount ? setIsFirstMount(false) : page && !isDisabled && setCurrentPageNumber(page);\n    }, [isDisabled, isFirstMount, page]);\n\n    const handleChange = useCallback((event: React.ChangeEvent<unknown>, pageNumber: number) => {\n      setCurrentPageNumber(pageNumber);\n    }, []);\n\n    const handleValueChange = (payload: string) => {\n      if (payload === '') {\n        setPrevStatePageNumber(currentPageNumber);\n        setCurrentPageNumber(payload);\n      }\n      const castToNum = parseInt(payload);\n      if (typeof castToNum === 'number' && isPageNumberValid(castToNum, count)) {\n        setPrevStatePageNumber(castToNum);\n        setCurrentPageNumber(castToNum);\n      }\n    };\n\n    const mobilePagination = () => (\n      <div\n        style={{ display: 'flex', flexDirection: 'column' }}\n        className={`mobileView ${isDisabled ? 'paginationDisabled' : ''}`}\n      >\n        <div className=\"mobileContainer\">\n          {mobileIconButton(\n            'chevron-previous',\n            () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(1),\n            !isPageNumberValid(currentPageNumber - 1, count),\n          )}\n          {mobileIconButton(\n            'chevron-left',\n            () => isPageNumberValid(currentPageNumber - 1, count) && setCurrentPageNumber(currentPageNumber - 1),\n            !isPageNumberValid(currentPageNumber - 1, count),\n            'back',\n            hideLabels,\n            prevButtonLabel,\n          )}\n          <TextField\n            className=\"textFieldContainer\"\n            value={currentPageNumber}\n            inputProps={{ inputMode: 'numeric', pattern: `[1-${count}]*` }}\n            onChange={(val: any) => handleValueChange(val.target.value)}\n            onBlur={() => currentPageNumber === '' && setCurrentPageNumber(prevStatePageNumber)}\n          />\n          {mobileIconButton(\n            'chevron-right',\n            () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(currentPageNumber + 1),\n            !isPageNumberValid(currentPageNumber + 1, count),\n            'forward',\n            hideLabels,\n            nextButtonLabel,\n          )}\n          {mobileIconButton(\n            'chevron-next',\n            () => isPageNumberValid(currentPageNumber + 1, count) && setCurrentPageNumber(count),\n            !isPageNumberValid(currentPageNumber + 1, count),\n          )}\n        </div>\n      </div>\n    );\n\n    const desktopPagination = () => (\n      <MuiPagination\n        className=\"desktopView\"\n        {...props}\n        shape=\"rounded\"\n        count={count}\n        disabled={isDisabled}\n        page={currentPageNumber}\n        hideNextButton={hideNextButton}\n        hidePrevButton={hidePrevButton}\n        showFirstButton={!hideFirstButton}\n        showLastButton={!hideLastButton}\n        ref={ref}\n        onChange={handleChange}\n        renderItem={(item) => (\n          <MuiPaginationItem\n            className={ternaryCondition(hidePrevButton, false, 'MuiPagination-prev', '')}\n            components={{\n              first: () => <Icon name=\"previous\" fontSize=\"small\" />,\n              last: () => <Icon name=\"next\" fontSize=\"small\" />,\n              previous: () => (\n                <>\n                  <Icon name=\"chevron-left\" fontSize=\"small\" />\n                  <>{prevButtonLabel}</>\n                </>\n              ),\n              next: () => (\n                <>\n                  <>{nextButtonLabel}</>\n                  <Icon name=\"chevron-right\" fontSize=\"small\" />\n                </>\n              ),\n            }}\n            {...item}\n          />\n        )}\n      />\n    );\n\n    return (\n      <PaginationStyled data-testid=\"Pagination-wrapper\">\n        {desktopPagination()} {mobilePagination()}\n      </PaginationStyled>\n    );\n  },\n);\n\n/**\n * @description Pagination styling definition based on props\n */\nconst PaginationStyled = styled('div')<{ theme?: any }>(({ theme }) => {\n  let style = {};\n  const flexStyle = {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n    width: '100%',\n  };\n\n  style = {\n    [theme.breakpoints.up('md')]: {\n      '& .mobileView': {\n        display: 'none!important',\n      },\n    },\n    [theme.breakpoints.down('md')]: {\n      '& .desktopView': {\n        display: 'none!important',\n      },\n    },\n    '& .desktopView': {\n      '& .MuiButton-startIcon': {\n        marginRight: '8px',\n        display: 'inline-flex',\n      },\n      '& .MuiButton-endIcon': {\n        marginLeft: '8px',\n        display: 'inline-flex',\n      },\n    },\n    '& .mobileView': {\n      ...flexStyle,\n      flexDirection: 'column',\n      flexWrap: 'nowrap',\n      '& .mobileContainer': {\n        ...flexStyle,\n        flexWrap: 'nowrap',\n      },\n      '& .textFieldContainer': {\n        height: '36px',\n        margin: '0 34px',\n        '& input, fieldset': {\n          backgroundColor: theme.palette.transparent.primary,\n          border: 0,\n          borderRadius: '4px',\n          fontSize: '16px',\n          fontWeight: '400',\n          height: '36px',\n          lineHeight: '36px',\n          minWidth: '44px',\n          maxWidth: '50px',\n          padding: '0 4px',\n          textAlign: 'center',\n          color: theme.palette.text.primary,\n        },\n        '& fieldset': {\n          visibility: 'hidden',\n        },\n        '& div': {\n          '&::before': {\n            borderBottom: 0,\n          },\n          '&::after': {\n            borderBottom: 0,\n          },\n        },\n      },\n      '& .controllerContainer': {\n        '& .arrowLabel': {\n          color: theme.palette.text.primary,\n          fontSize: '16px',\n          fontWeight: '400',\n          lineHeight: '16px',\n        },\n        '& .MuiButton-startIcon': {\n          marginRight: '8px',\n          display: 'inline-flex',\n        },\n        '& .MuiButton-endIcon': {\n          marginLeft: '8px',\n          display: 'inline-flex',\n        },\n        '& .MuiIcon-root': {\n          fontSize: '16px',\n          width: '20px',\n          height: '20px',\n        },\n      },\n      '& .counter_label': {\n        color: theme.palette.text.primary,\n        fontSize: '12px',\n        fontWeight: '400',\n        lineHeight: '24px',\n        marginTop: '4px',\n      },\n      '&.paginationDisabled': {\n        pointerEvents: 'none',\n        '& .counter_label, .MuiIcon-root,.arrowLabel, input, fieldset': {\n          color: theme.palette.disabled.primary,\n        },\n      },\n    },\n  };\n\n  return style;\n});\n"],"names":["isPageNumberValid","pageNumber","count","parseInt","mobileIconButton","muiIcon","onClick","disabled","direction","hideLabel","label","_jsxs","IconButton","variant","children","_jsx","Icon","name","Pagination","forwardRef","_a","ref","isDisabled","page","prevButtonLabel","nextButtonLabel","defaultPage","hideNextButton","hidePrevButton","hideFirstButton","hideLastButton","hideLabels","onValueChange","props","__rest","initialPage","currentPageNumber","setCurrentPageNumber","useState","isFirstMount","setIsFirstMount","prevStatePageNumber","setPrevStatePageNumber","useEffect","handleChange","useCallback","event","PaginationStyled","MuiPagination","Object","assign","className","shape","showFirstButton","showLastButton","onChange","renderItem","item","MuiPaginationItem","ternaryCondition","components","first","fontSize","last","previous","_Fragment","next","style","display","flexDirection","TextField","value","inputProps","inputMode","pattern","val","payload","castToNum","handleValueChange","target","onBlur","styled","theme","flexStyle","alignItems","justifyContent","width","breakpoints","up","down","marginRight","marginLeft","flexWrap","height","margin","backgroundColor","palette","transparent","primary","border","borderRadius","fontWeight","lineHeight","minWidth","maxWidth","padding","textAlign","color","text","visibility","borderBottom","marginTop","pointerEvents"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nexport interface PaginationProps extends MuiPaginationProps {\n  /**\n   *  If true, a pagination will be disabled.\n   *  @deprecated It is recommended to use `disabled` prop instead of `isDisabled`\n   */\n  isDisabled?: boolean;\n\n  /**\n   *  The label for previous button.\n   *  @deprecated No longer used, property has no effect\n   */\n  prevButtonLabel?: string;\n\n  /**\n   *  The label for next button.\n   *  @deprecated No longer used, property has no effect\n   */\n  nextButtonLabel?: string;\n\n  /**\n   * If true, hide the first-page button.\n   * @deprecated Use showFirstButton instead\n   */\n  hideFirstButton?: boolean;\n\n  /**\n   * If true, hide the last-page button.\n   * @deprecated Use showLastButton instead\n   */\n  hideLastButton?: boolean;\n\n  /**\n   * enable or disable direction label. mobile only\n   * @deprecated No longer used, property has no effect\n   */\n  hideLabels?: boolean;\n\n  /**\n   * callback for value change handling. takes the new value as its only parameter\n   * @deprecated provide the callback in the onChange function\n   **/\n  onValueChange?: (payload: number) => void;\n}\n\n/**\n * @mui Pagination that contain props parser for the previous implementation\n */\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      isDisabled,\n      page,\n      hideFirstButton,\n      hideLastButton,\n      showFirstButton,\n      showLastButton,\n      hideLabels: _,\n      onValueChange,\n      disabled,\n      onChange,\n      prevButtonLabel: __,\n      nextButtonLabel: ___,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <MuiPagination\n        {...rest}\n        ref={ref}\n        disabled={disabled || isDisabled}\n        page={page && onChange ? page : undefined}\n        onChange={(e, newPage) => {\n          onChange?.(e, newPage);\n          onValueChange?.(newPage);\n        }}\n        showFirstButton={showFirstButton || !hideFirstButton}\n        showLastButton={showLastButton || !hideLastButton}\n      />\n    );\n  },\n);\n"],"names":["Pagination","forwardRef","_a","ref","isDisabled","page","hideFirstButton","hideLastButton","showFirstButton","showLastButton","hideLabels","_","onValueChange","disabled","onChange","prevButtonLabel","__","nextButtonLabel","___","rest","__rest","_jsx","MuiPagination","Object","assign","undefined","e","newPage"],"mappings":"qJAkDa,MAAAA,EAAaC,GACxB,CACEC,EAeAC,KAfA,IAAAC,WACEA,EAAUC,KACVA,EAAIC,gBACJA,EAAeC,eACfA,EAAcC,gBACdA,EAAeC,eACfA,EACAC,WAAYC,EAACC,cACbA,EAAaC,SACbA,EAAQC,SACRA,EACAC,gBAAiBC,EACjBC,gBAAiBC,GAElBhB,EADIiB,EAAIC,EAAAlB,EAbT,oLAiBA,OACEmB,EAACC,EACKC,OAAAC,OAAA,CAAA,EAAAL,GACJhB,IAAKA,EACLU,SAAUA,GAAYT,EACtBC,KAAMA,GAAQS,EAAWT,OAAOoB,EAChCX,SAAU,CAACY,EAAGC,KACZb,SAAAA,EAAWY,EAAGC,GACdf,SAAAA,EAAgBe,EAAQ,EAE1BnB,gBAAiBA,IAAoBF,EACrCG,eAAgBA,IAAmBF,IACnC"}

package/components/search/search.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{CloseIcon as a}from"../icon/stroke/CloseIcon.js";import{SearchIcon as r}from"../icon/stroke/SearchIcon.js";import{TextField as s,InputAdornment as o,IconButton as t}from"@mui/material";import{forwardRef as i,useState as l,useMemo as c,useEffect as p,useCallback as d}from"react";import u from"../../utils/useDebounce/useDebounce.js";import{updateFocusRingStyle as b}from"../focusring/focusring.js";import{getInteractiveStyle as m}from"../../materialui/button/interactive.js";const g=i(((i,g)=>{var{debounce:x=200,defaultValue:h="",cancelIconProps:j={},CancelIconComponent:f,disableInput:C,onCancel:O,onSearch:v,onChange:I,searchIconProps:P={},SearchIconComponent:S,slotProps:k,sx:w,value:y="",variant:D}=i,z=e(i,["debounce","defaultValue","cancelIconProps","CancelIconComponent","disableInput","onCancel","onSearch","onChange","searchIconProps","SearchIconComponent","slotProps","sx","value","variant"]);const A=S||r,M=f||a,[V,N]=l(h||y),R=V,U=u(V,x,{instantClear:!0}),{sx:q}=P,B=e(P,["sx"]),E=k||{},{input:F={}}=E,G=e(E,["input"]),H=c((()=>{switch(D){case"transparent":return{bgcolor:"transparent.primary"};case"mapShadow":return{bgcolor:"onSurface.os0",boxShadow:e=>e.flowShadows.l};default:return{bgcolor:"surface.primary"}}}),[D]);p((()=>{null==I||I(x<=0?R:U)}),[x<=0?R:U]);const J=d((e=>{e.preventDefault(),e.stopPropagation(),null==v||v(V)}),[V]);return n(s,Object.assign({onChange:e=>N(e.target.value),ref:g,sx:Object.assign(Object.assign({position:"relative",borderRadius:"200px",border:1,borderColor:(null==z?void 0:z.disabled)?"disabled.primary":"onSurface.os900",py:"5px",pl:"15px",pr:"5px",mb:0,"&&":Object.assign({},b(1,!1,"&:has(.Mui-focused)"))},H),w)},z,{value:V,variant:"standard",slotProps:Object.assign(Object.assign(Object.assign({},F),{input:{className:""+(""!==V?"filled":""),disabled:C||(null==z?void 0:z.disabled),inputProps:Object.assign(Object.assign({},"inputProps"in F&&Object.assign({},F.inputProps)),{sx:Object.assign({p:0,ml:1,color:"text.primary","&::-webkit-input-placeholder":{color:"onSurface.os700"},"&.Mui-disabled":{"&, &::-webkit-input-placeholder":{color:"disabled.tertiary"}}},"inputProps"in F&&"sx"in F.inputProps&&Object.assign({},F.inputProps.sx))}),disableUnderline:!0,startAdornment:n(o,{position:"start",sx:{transition:"all .4s ease",mr:"5px"},children:n(t,{disabled:null==z?void 0:z.disabled,tabIndex:v?0:-1,onClick:J,size:"medium","aria-label":"Search",sx:Object.assign(Object.assign({width:"34px",height:"34px"},b("0px")),m({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})),children:n(A,Object.assign({sx:Object.assign({transition:"all .5s ease"},q)},B))})}),endAdornment:n(o,{position:"end",sx:{opacity:""!==V?"1":"0",transition:"opacity .3s ease"},children:n(t,{disabled:""===V||(null==z?void 0:z.disabled),onClick:()=>{N(""),null==O||O()},size:"medium",tabIndex:C?-1:0,"aria-label":"Clear search",sx:Object.assign(Object.assign({cursor:""!==V?"pointer":"default",width:"34px",height:"34px"},b("0px")),m({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})),children:n(M,Object.assign({},j))})})}}),G)}))}));export{g as Search};
+import{__rest as e}from"tslib";import{jsx as n}from"react/jsx-runtime";import{CloseIcon as a}from"../icon/stroke/CloseIcon.js";import{SearchIcon as r}from"../icon/stroke/SearchIcon.js";import{TextField as s,InputAdornment as o,IconButton as t}from"@mui/material";import{forwardRef as i,useState as l,useMemo as c,useEffect as p,useCallback as d}from"react";import u from"../../utils/useDebounce/useDebounce.js";import{updateFocusRingStyle as b}from"../focusring/focusring.js";import{getInteractiveStyle as m}from"../../materialui/button/interactive.js";const g=i(((i,g)=>{var{debounce:x=200,defaultValue:h="",cancelIconProps:j={},CancelIconComponent:f,disableInput:C,onCancel:O,onSearch:v,onChange:I,searchIconProps:P={},SearchIconComponent:S,slotProps:k,sx:w,value:y="",variant:D}=i,z=e(i,["debounce","defaultValue","cancelIconProps","CancelIconComponent","disableInput","onCancel","onSearch","onChange","searchIconProps","SearchIconComponent","slotProps","sx","value","variant"]);const A=S||r,M=f||a,[V,N]=l(h||y),R=V,U=u(V,x,{instantClear:!0}),{sx:q}=P,B=e(P,["sx"]),E=k||{},{input:F={}}=E,G=e(E,["input"]),H=c((()=>{switch(D){case"transparent":return{bgcolor:"transparent.primary"};case"mapShadow":return{bgcolor:"onSurface.os0",boxShadow:e=>e.flowShadows.l};default:return{bgcolor:"surface.primary"}}}),[D]);p((()=>{null==I||I(x<=0?R:U)}),[x<=0?R:U]);const J=d((e=>{e.preventDefault(),e.stopPropagation(),null==v||v(V)}),[V]);return n(s,Object.assign({onChange:e=>N(e.target.value),ref:g,sx:Object.assign(Object.assign({position:"relative",borderRadius:"200px",border:1,borderColor:(null==z?void 0:z.disabled)?"disabled.primary":"onSurface.os500",py:"5px",pl:"15px",pr:"5px",mb:0,"&&":Object.assign({},b(1,!1,"&:has(.Mui-focused)"))},H),w)},z,{value:V,variant:"standard",slotProps:Object.assign(Object.assign(Object.assign({},F),{input:{className:""+(""!==V?"filled":""),disabled:C||(null==z?void 0:z.disabled),inputProps:Object.assign(Object.assign({},"inputProps"in F&&Object.assign({},F.inputProps)),{sx:Object.assign({p:0,ml:1,color:"text.primary","&::-webkit-input-placeholder":{color:"onSurface.os700"},"&.Mui-disabled":{"&, &::-webkit-input-placeholder":{color:"disabled.tertiary"}}},"inputProps"in F&&"sx"in F.inputProps&&Object.assign({},F.inputProps.sx))}),disableUnderline:!0,startAdornment:n(o,{position:"start",sx:{transition:"all .4s ease",mr:"5px"},children:n(t,{disabled:null==z?void 0:z.disabled,tabIndex:v?0:-1,onClick:J,size:"medium","aria-label":"Search",sx:Object.assign(Object.assign({width:"34px",height:"34px"},b("0px")),m({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})),children:n(A,Object.assign({sx:Object.assign({transition:"all .5s ease"},q)},B))})}),endAdornment:n(o,{position:"end",sx:{opacity:""!==V?"1":"0",transition:"opacity .3s ease"},children:n(t,{disabled:""===V||(null==z?void 0:z.disabled),onClick:()=>{N(""),null==O||O()},size:"medium",tabIndex:C?-1:0,"aria-label":"Clear search",sx:Object.assign(Object.assign({cursor:""!==V?"pointer":"default",width:"34px",height:"34px"},b("0px")),m({backgroundColor:"transparent.transparent"},{backgroundColor:"transparent.transparent"})),children:n(M,Object.assign({},j))})})}}),G)}))}));export{g as Search};
 //# sourceMappingURL=search.js.map