@skodaflow/web-library 7.14.0 → 7.15.1

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":"4PAiEO,MAAMA,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,GAAQD,EAAKE,EAAUH,EAAAC,EAA7B,CAAA,OACAG,EAAwCT,QAAAA,EAAkB,IAAxDT,GAAImB,GAAWD,EAAKE,EAAaN,EAAAI,EAAnC,CAAA,OACAG,EAA0CX,QAAAA,EAAmB,IAA3DV,GAAIsB,GAAYD,EAAKE,EAAcT,EAAAO,EAArC,CAAA,OACAG,EAA0CjB,QAAAA,EAAmB,IAA3DP,GAAIyB,GAAYD,EAAKE,EAAcZ,EAAAU,EAArC,CAAA,OAUN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CACFhC,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,EAAUtB,OAAAC,OAAA,CAAA,aACE,6BACXsB,QAAS9C,EACT+C,KAAK,SACLC,UAAU,6BACVtD,GAAE6B,OAAAC,OAAA,CACAe,QAAS,OACNpB,GAAY,cAEL,8BACRC,EAAc,CAAA3B,SAElBgD,EAACQ,EAAS1B,OAAAC,OAAA,CAAC0B,SAAS,SAASF,UAAU,WAAc9C,WAK1DH,GACC0C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACAe,QAAS,iBACTd,QAAS,OACTe,eAAgB,YACbxB,IAEDC,EAAc,CAAAxB,SAElBgD,EAACU,EAAM5B,OAAAC,OAAA,CACLsB,QAAS/C,EACTgD,KAAK,QACLd,MAAM,YACNU,QAAQ,OAAM,cACF,8BACRtC,YAEHP,QAIP2C,EAACnB,EAAGC,OAAAC,OAAA,CACF9B,GAAE6B,OAAAC,OAAA,CACA4B,UAAW,OAEX,kDAAmD,CACjDC,aAAc,EACdC,YAAa,sBAEZzC,GAAW,cAEJ,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":"wKAyBO,MAAMA,EAAkEC,GAC7E,CAACC,EAAuEC,KAAvE,IAAAC,MAAEA,EAAKC,YAAEA,EAAWC,WAAEA,EAAUC,eAAEA,EAAcC,SAAEA,GAAQN,EAAKO,EAAIC,EAAAR,EAAnE,kEACC,MAAMS,EAAgCL,QAAAA,EAAc,IAA5CM,GAAIC,GAAOF,EAAKG,EAASJ,EAAAC,EAA3B,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,EAAGC,OAAAC,OAAA,CAAA,cAAa,sCAAyCX,EAAc,CAAAC,SACrEA,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":"oYAqDO,MAAMA,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,EAAIC,EAAAd,EAZT,CAAA,cAAA,yBAAA,YAAA,QAAA,SAAA,eAAA,aAAA,YAAA,oBAAA,OAAA,YAgBA,MAAOe,EAAQC,GAAaC,EAAS,MAC/BC,EAAkChB,QAAAA,EAAe,IAA/CiB,GAAIC,GAAQF,EAAKG,EAAUP,EAAAI,EAA7B,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,EAAsB,CAAA2B,SAC/EP,EAACuB,EAAIrB,OAAAC,OAAA,CAAA,EAAKiB,EAAqBvC,EAAS,CAAA0B,SACtCP,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/components/numbering/numbering.js.map

@@ -1 +1 @@
-{"version":3,"file":"numbering.js","sources":["../../../src/components/numbering/numbering.tsx"],"sourcesContent":["import { FC, HTMLAttributes } from 'react';\nimport { styled } from '@mui/material';\nimport { NumberingColors, NumberingSizes } from '../../utils/enum';\n\nexport interface NumberingProps extends HTMLAttributes<HTMLDivElement> {\n  /*\n   * left side of component\n   */\n  index: number;\n  /*\n   * right side of component\n   */\n  total: number;\n  /*\n   * if needed, specifis a custom simbol as separator\n   */\n  customSeparator?: string;\n  /*\n   * custom style that ovverides standard one\n   */\n  customStyle?: object;\n  /*\n   * indicates if the left side of the component should be black or white ( can be \"dark\" or \"light\")\n   */\n  colorTheme?: NumberingColors;\n  /*\n   * indicates the size for the whole component ( can be \"big\" or \"small\")\n   */\n  size?: NumberingSizes;\n}\n\n/**\n * @description SkodaFlow Numbering component.\n * @param props NumberingProps\n * @returns React Functional Component\n */\n\nexport const Numbering: FC<NumberingProps> = ({ ...props }) => {\n  return (\n    <NumberingStyled {...props} style={props.customStyle} data-testid=\"Numbering\">\n      <span className=\"index-container\" data-testid=\"Numbering.index\">\n        {props.index}{' '}\n      </span>\n      <span className=\"separator-container\" data-testid=\"Numbering.separator\">\n        {props.customSeparator ? props.customSeparator : '/'}{' '}\n      </span>\n      <span className=\"total-container\" data-testid=\"Numbering.total\">\n        {props.total}\n      </span>\n    </NumberingStyled>\n  );\n};\n/**\n * @description Controls styling definition based on props\n */\nconst NumberingStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'customSeparator' && prop !== 'colorTheme',\n})<NumberingProps>(({ theme, ...args }) => {\n  return {\n    fontWeight: '700',\n    fontSize: args.size === NumberingSizes.LARGE ? '18px' : '16px',\n    lineHeight: args.size === NumberingSizes.LARGE ? '28px' : '24px',\n    letterSpacing: '0.02em',\n\n    '& .index-container': {\n      color: args.colorTheme === NumberingColors.DARK ? theme.palette.text.primary : theme.palette.onSurface.os0,\n    },\n    '& .separator-container': {\n      color: theme.palette.onSurface.os600,\n    },\n    '& .total-container': {\n      color: theme.palette.onSurface.os600,\n    },\n  };\n});\n"],"names":["Numbering","_a","props","__rest","_jsxs","NumberingStyled","Object","assign","style","customStyle","children","className","index","customSeparator","_jsx","total","styled","shouldForwardProp","prop","theme","args","fontWeight","fontSize","size","NumberingSizes","LARGE","lineHeight","letterSpacing","color","colorTheme","NumberingColors","DARK","palette","text","primary","onSurface","os0","os600"],"mappings":"kMAqCa,MAAAA,EAAiCC,QAAKC,EAAKC,EAAAF,EAAV,IAC5C,OACEG,EAACC,EAAeC,OAAAC,OAAA,CAAA,EAAKL,EAAK,CAAEM,MAAON,EAAMO,YAAW,cAAc,YAChEC,SAAA,CAAAN,EAAA,OAAA,CAAMO,UAAU,kBAAiB,cAAa,kBAAiBD,SAAA,CAC5DR,EAAMU,MAAO,OAEhBR,EAAA,OAAA,CAAMO,UAAU,sBAAkC,cAAA,sBAC/CD,SAAA,CAAAR,EAAMW,gBAAkBX,EAAMW,gBAAkB,IAAK,OAExDC,EAAA,OAAA,CAAMH,UAAU,kBAA8B,cAAA,kBAC3CD,SAAAR,EAAMa,WAEO,EAMhBV,EAAkBW,EAAO,MAAO,CACpCC,kBAAoBC,GAAkB,oBAATA,GAAuC,eAATA,GADrCF,EAEJf,IAAA,IAAAkB,MAAEA,GAAgBlB,EAANmB,EAAIjB,EAAAF,EAAhB,WAClB,MAAO,CACLoB,WAAY,MACZC,SAAUF,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OACxDC,WAAYN,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OAC1DE,cAAe,SAEf,qBAAsB,CACpBC,MAAOR,EAAKS,aAAeC,EAAgBC,KAAOZ,EAAMa,QAAQC,KAAKC,QAAUf,EAAMa,QAAQG,UAAUC,KAEzG,yBAA0B,CACxBR,MAAOT,EAAMa,QAAQG,UAAUE,OAEjC,qBAAsB,CACpBT,MAAOT,EAAMa,QAAQG,UAAUE,OAElC"}
+{"version":3,"file":"numbering.js","sources":["../../../src/components/numbering/numbering.tsx"],"sourcesContent":["import { FC, HTMLAttributes } from 'react';\nimport { styled } from '@mui/material';\nimport { NumberingColors, NumberingSizes } from '../../utils/enum';\n\nexport interface NumberingProps extends HTMLAttributes<HTMLDivElement> {\n  /*\n   * left side of component\n   */\n  index: number;\n  /*\n   * right side of component\n   */\n  total: number;\n  /*\n   * if needed, specifis a custom simbol as separator\n   */\n  customSeparator?: string;\n  /*\n   * custom style that ovverides standard one\n   */\n  customStyle?: object;\n  /*\n   * indicates if the left side of the component should be black or white ( can be \"dark\" or \"light\")\n   */\n  colorTheme?: NumberingColors;\n  /*\n   * indicates the size for the whole component ( can be \"big\" or \"small\")\n   */\n  size?: NumberingSizes;\n}\n\n/**\n * @description SkodaFlow Numbering component.\n * @param props NumberingProps\n * @returns React Functional Component\n */\n\nexport const Numbering: FC<NumberingProps> = ({ ...props }) => {\n  return (\n    <NumberingStyled {...props} style={props.customStyle} data-testid=\"Numbering\">\n      <span className=\"index-container\" data-testid=\"Numbering.index\">\n        {props.index}{' '}\n      </span>\n      <span className=\"separator-container\" data-testid=\"Numbering.separator\">\n        {props.customSeparator ? props.customSeparator : '/'}{' '}\n      </span>\n      <span className=\"total-container\" data-testid=\"Numbering.total\">\n        {props.total}\n      </span>\n    </NumberingStyled>\n  );\n};\n/**\n * @description Controls styling definition based on props\n */\nconst NumberingStyled = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'customSeparator' && prop !== 'colorTheme',\n})<NumberingProps>(({ theme, ...args }) => {\n  return {\n    fontWeight: '700',\n    fontSize: args.size === NumberingSizes.LARGE ? '18px' : '16px',\n    lineHeight: args.size === NumberingSizes.LARGE ? '28px' : '24px',\n    letterSpacing: '0.02em',\n\n    '& .index-container': {\n      color: args.colorTheme === NumberingColors.DARK ? theme.palette.text.primary : theme.palette.onSurface.os0,\n    },\n    '& .separator-container': {\n      color: theme.palette.onSurface.os600,\n    },\n    '& .total-container': {\n      color: theme.palette.onSurface.os600,\n    },\n  };\n});\n"],"names":["Numbering","_a","props","__rest","_jsxs","NumberingStyled","Object","assign","style","customStyle","children","className","index","customSeparator","_jsx","total","styled","shouldForwardProp","prop","theme","args","fontWeight","fontSize","size","NumberingSizes","LARGE","lineHeight","letterSpacing","color","colorTheme","NumberingColors","DARK","palette","text","primary","onSurface","os0","os600"],"mappings":"kMAqCO,MAAMA,EAAiCC,QAAKC,EAAKC,EAAAF,EAAV,IAC5C,OACEG,EAACC,EAAeC,OAAAC,OAAA,CAAA,EAAKL,EAAK,CAAEM,MAAON,EAAMO,YAAW,cAAc,YAAWC,SAAA,CAC3EN,EAAA,OAAA,CAAMO,UAAU,kBAAiB,cAAa,kBAAiBD,SAAA,CAC5DR,EAAMU,MAAO,OAEhBR,EAAA,OAAA,CAAMO,UAAU,sBAAqB,cAAa,sBAAqBD,SAAA,CACpER,EAAMW,gBAAkBX,EAAMW,gBAAkB,IAAK,OAExDC,EAAA,OAAA,CAAMH,UAAU,kBAAiB,cAAa,kBAAiBD,SAC5DR,EAAMa,WAEO,EAMhBV,EAAkBW,EAAO,MAAO,CACpCC,kBAAoBC,GAAkB,oBAATA,GAAuC,eAATA,GADrCF,EAEJf,IAAA,IAAAkB,MAAEA,GAAKlB,EAAKmB,EAAIjB,EAAAF,EAAhB,WAClB,MAAO,CACLoB,WAAY,MACZC,SAAUF,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OACxDC,WAAYN,EAAKG,OAASC,EAAeC,MAAQ,OAAS,OAC1DE,cAAe,SAEf,qBAAsB,CACpBC,MAAOR,EAAKS,aAAeC,EAAgBC,KAAOZ,EAAMa,QAAQC,KAAKC,QAAUf,EAAMa,QAAQG,UAAUC,KAEzG,yBAA0B,CACxBR,MAAOT,EAAMa,QAAQG,UAAUE,OAEjC,qBAAsB,CACpBT,MAAOT,EAAMa,QAAQG,UAAUE,OAElC"}

package/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={{ position: 'relative', maxWidth: '100%', maxHeight: '100%', ...wrapperSx }}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={{\n          position: 'absolute',\n          inset: '0',\n          zIndex: '100',\n          background:\n            variant === 'hero'\n              ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n              : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Overlay","_a","wrapperProps","sx","overlayContent","variant","children","rest","__rest","_b","wrapperSx","restWrapper","_jsxs","Box","Object","assign","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"qHAkBa,MAAAA,EAAmCC,IAAA,IAAAC,aAAEA,EAAYC,GAAEA,EAAEC,eAAEA,EAAcC,QAAEA,EAAOC,SAAEA,GAAmBL,EAANM,EAAIC,EAAAP,EAA9D,6DAC9C,MAAMQ,EAAoCP,GAAgB,IAAlDC,GAAIO,KAAcC,EAApBH,EAAAC,EAAA,CAAA,OAEN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAMW,OAAAC,OAAA,CAAAC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAWR,IAChEC,EAAW,CAAAL,SAAA,CAEdF,EACDe,EAACN,EACaC,OAAAC,OAAA,CAAA,cAAA,kBACZZ,GAAEW,OAAAC,OAAA,CACAC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZjB,EACI,8KACA,6DACHF,IAEDI,EAAI,CAAAD,SAEPA,QAEC"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Box, BoxProps } from '@mui/material';\n\nexport interface OverlayProps extends BoxProps<ElementType> {\n  variant?: 'default' | 'hero';\n  /** The content like image to be displayed inside the overlay.  */\n  overlayContent?: React.ReactNode;\n  /** custom props of the Box wrapper of the component. */\n  wrapperProps?: BoxProps<ElementType>;\n}\n\n/**\n * The Overlay Component\n *\n * Overlay component wraps its children with an overlay effect. The overlay effect is achieved\n * using a semi-transparent gradient background. The component allows for custom content\n * (like an image) to be displayed inside the overlay through the `overlayContent` prop.\n */\nexport const Overlay: React.FC<OverlayProps> = ({ wrapperProps, sx, overlayContent, variant, children, ...rest }) => {\n  const { sx: wrapperSx, ...restWrapper } = wrapperProps || {};\n\n  return (\n    <Box\n      data-testid=\"Overlay-wrapper\"\n      sx={{ position: 'relative', maxWidth: '100%', maxHeight: '100%', ...wrapperSx }}\n      {...restWrapper}\n    >\n      {overlayContent}\n      <Box\n        data-testid=\"Overlay-overlay\"\n        sx={{\n          position: 'absolute',\n          inset: '0',\n          zIndex: '100',\n          background:\n            variant === 'hero'\n              ? 'linear-gradient(0deg, rgba(35, 35, 35, 0.3), rgba(35, 35, 35, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0.468) 0%, rgba(0, 0, 0, 0) 42.19%, rgba(28, 28, 28, 0.72) 100%)'\n              : 'linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',\n          ...sx,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    </Box>\n  );\n};\n"],"names":["Overlay","_a","wrapperProps","sx","overlayContent","variant","children","rest","__rest","_b","wrapperSx","restWrapper","_jsxs","Box","Object","assign","position","maxWidth","maxHeight","_jsx","inset","zIndex","background"],"mappings":"qHAkBO,MAAMA,EAAmCC,IAAA,IAAAC,aAAEA,EAAYC,GAAEA,EAAEC,eAAEA,EAAcC,QAAEA,EAAOC,SAAEA,GAAQL,EAAKM,EAAIC,EAAAP,EAA9D,6DAC9C,MAAMQ,EAAoCP,GAAgB,IAAlDC,GAAIO,KAAcC,EAAWH,EAAAC,EAA/B,CAAA,OAEN,OACEG,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CAAIC,SAAU,WAAYC,SAAU,OAAQC,UAAW,QAAWR,IAChEC,EAAW,CAAAL,SAAA,CAEdF,EACDe,EAACN,EAAGC,OAAAC,OAAA,CAAA,cACU,kBACZZ,GAAEW,OAAAC,OAAA,CACAC,SAAU,WACVI,MAAO,IACPC,OAAQ,MACRC,WACc,SAAZjB,EACI,8KACA,6DACHF,IAEDI,EAAI,CAAAD,SAEPA,QAEC"}

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":"qPAoDO,MAAMA,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,GAAWb,EACRc,EAAIC,EAAAf,EAbT,kLAiBA,MAAMgB,EAAQC,IACRC,EAAgDP,QAAAA,EAAsB,IAApER,GAAIgB,GAAeD,EAAKE,EAAiBL,EAAAG,EAA3C,CAAA,OACAG,EAIFX,QAAAA,EAAwB,IAH1BP,GAAImB,EACJC,UAAWC,GAAwBH,EAChCI,EAAmBV,EAAAM,EAHlB,CAAA,KAAA,eAMCK,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,EAAI,CAAAZ,SAAA,CAEPE,GACCoD,EAACV,EAAGC,OAAAC,OAAA,CACF7C,kCACyB,WAAnBG,GAA+BoB,GAAgB,CAAE+B,OAAQ/B,IAC1DP,GAAe,cAER,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,EAAGC,OAAAC,OAAA,CAAC/C,IAAKiC,EAAkB,cAAc,qBAAwBzB,EAAW,CAAAP,SAC1EE,WAKToD,EAACV,EAAGC,OAAAC,OAAA,CAAA,EAAMxC,GAAe,CAAEkD,UAAWU,EAAWC,SAAU,MAAO,CAAA,cAAc,aAAgBzD,EAAY,CAAAV,SACzGA,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":"iaAsHA,MAAMA,EAAoB,CAACC,EAAiBC,IAEzB,KAAfD,GACuB,iBAAfA,GAA2BA,EAAa,EAAI,GAAKA,EAAa,GAAKC,GAC1C,iBAAzBC,SAASF,IAA4BE,SAASF,GAAc,GAAKE,SAASF,IAAeC,EAI/FE,EAAmB,CACvBC,EACAC,EACAC,EACAC,EACAC,EACAC,IAEAC,EAACC,EAAsB,CAAA,aAAA,WAAWC,QAAQ,WAAWP,QAASA,EAASC,SAAUA,EAAQO,SAAA,CACxE,YAAdN,IAA4BC,GAAaC,EAC1CK,EAACC,EAAI,CAACC,KAAMZ,IACG,SAAdG,IAAyBC,GAAaC,KAI9BQ,EAAaC,GACxB,CACEC,EAeAC,KAfA,IAAAnB,MACEA,EAAKoB,WACLA,EAAUC,KACVA,EAAIC,gBACJA,EAAeC,gBACfA,EAAeC,YACfA,EAAWC,eACXA,EAAcC,eACdA,EAAcC,gBACdA,EAAeC,eACfA,EAAcC,WACdA,EAAUC,cACVA,GAAaZ,EACVa,EAbLC,EAAAd,EAAA,CAAA,QAAA,aAAA,OAAA,kBAAA,kBAAA,cAAA,iBAAA,iBAAA,kBAAA,iBAAA,aAAA,kBAiBA,MAAMe,EAAcT,GAAe,GAC5BU,EAAmBC,GAAwBC,EAAcH,IACzDI,EAAcC,GAAmBF,GAAS,IAC1CG,EAAqBC,GAA0BJ,IAEtDK,GAAU,KACRP,GAAqBJ,GAAiBA,EAAcI,EAAkB,GACrE,CAACA,EAAmBJ,IAEvBW,GAAU,KACRJ,EAAeC,GAAgB,GAASjB,IAASD,GAAce,EAAqBd,EAAK,GACxF,CAACD,EAAYiB,EAAchB,IAE9B,MAAMqB,EAAeC,GAAY,CAACC,EAAmC7C,KACnEoC,EAAqBpC,EAAW,GAC/B,IAgGH,OACEU,EAACoC,EAAgB,CAAA,cAAa,qBAAoBjC,SAAA,CAvClDC,EAACiC,EACCC,OAAAC,OAAA,CAAAC,UAAU,eACNlB,EACJ,CAAAmB,MAAM,UACNlD,MAAOA,EACPK,SAAUe,EACVC,KAAMa,EACNT,eAAgBA,EAChBC,eAAgBA,EAChByB,iBAAkBxB,EAClByB,gBAAiBxB,EACjBT,IAAKA,EACLkC,SAAUX,EACVY,WAAaC,GACX1C,EAAC2C,iBACCP,UAAWQ,EAAiB/B,GAAgB,EAAO,qBAAsB,IACzEgC,WAAY,CACVC,MAAO,IAAM9C,EAACC,EAAI,CAACC,KAAK,WAAW6C,SAAS,UAC5CC,KAAM,IAAMhD,EAACC,EAAI,CAACC,KAAK,OAAO6C,SAAS,UACvCE,SAAU,IACRrD,EACEsD,EAAA,CAAAnD,SAAA,CAAAC,EAACC,EAAI,CAACC,KAAK,eAAe6C,SAAS,UACnC/C,EAAGkD,EAAA,CAAAnD,SAAAU,OAGP0C,KAAM,IACJvD,EACEsD,EAAA,CAAAnD,SAAA,CAAAC,EAAAkD,EAAA,CAAAnD,SAAGW,IACHV,EAACC,EAAK,CAAAC,KAAK,gBAAgB6C,SAAS,eAItCL,OAQe,IAnFzB1C,EAAA,MAAA,CACEoD,MAAO,CAAEC,QAAS,OAAQC,cAAe,UACzClB,UAAW,eAAc7B,EAAa,qBAAuB,IAAIR,SAEjEH,EAAK,MAAA,CAAAwC,UAAU,kBACZrC,SAAA,CAAAV,EACC,oBACA,IAAMJ,EAAkBoC,EAAoB,EAAGlC,IAAUmC,EAAqB,KAC7ErC,EAAkBoC,EAAoB,EAAGlC,IAE3CE,EACC,gBACA,IAAMJ,EAAkBoC,EAAoB,EAAGlC,IAAUmC,EAAqBD,EAAoB,KACjGpC,EAAkBoC,EAAoB,EAAGlC,GAC1C,OACA6B,EACAP,GAEFT,EAACuD,EACC,CAAAnB,UAAU,qBACVoB,MAAOnC,EACPoC,WAAY,CAAEC,UAAW,UAAWC,QAAS,MAAMxE,OACnDqD,SAAWoB,GAnCO,CAACC,IACT,KAAZA,IACFlC,EAAuBN,GACvBC,EAAqBuC,IAEvB,MAAMC,EAAY1E,SAASyE,GACF,iBAAdC,GAA0B7E,EAAkB6E,EAAW3E,KAChEwC,EAAuBmC,GACvBxC,EAAqBwC,KA2BOC,CAAkBH,EAAII,OAAOR,OACrDS,OAAQ,IAA4B,KAAtB5C,GAA4BC,EAAqBI,KAEhErC,EACC,iBACA,IAAMJ,EAAkBoC,EAAoB,EAAGlC,IAAUmC,EAAqBD,EAAoB,KACjGpC,EAAkBoC,EAAoB,EAAGlC,GAC1C,UACA6B,EACAN,GAEDrB,EACC,gBACA,IAAMJ,EAAkBoC,EAAoB,EAAGlC,IAAUmC,EAAqBnC,KAC7EF,EAAkBoC,EAAoB,EAAGlC,WAgD7B,IAQnB6C,EAAmBkC,EAAO,MAAPA,EAA+B,EAAGC,YACzD,IAAIf,EAAQ,CAAE,EACd,MAAMgB,EAAY,CAChBC,WAAY,SACZhB,QAAS,OACTiB,eAAgB,SAChBC,MAAO,QAkGT,OA/FAnB,EAAQ,CACN,CAACe,EAAMK,YAAYC,GAAG,OAAQ,CAC5B,gBAAiB,CACfpB,QAAS,mBAGb,CAACc,EAAMK,YAAYE,KAAK,OAAQ,CAC9B,iBAAkB,CAChBrB,QAAS,mBAGb,iBAAkB,CAChB,yBAA0B,CACxBsB,YAAa,MACbtB,QAAS,eAEX,uBAAwB,CACtBuB,WAAY,MACZvB,QAAS,gBAGb,gBAAenB,OAAAC,OAAAD,OAAAC,OAAA,GACViC,GACH,CAAAd,cAAe,SACfuB,SAAU,SACV,qBAAoB3C,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACfiC,GACH,CAAAS,SAAU,WAEZ,wBAAyB,CACvBC,OAAQ,OACRC,OAAQ,SACR,oBAAqB,CACnBC,gBAAiBb,EAAMc,QAAQC,YAAYC,QAC3CC,OAAQ,EACRC,aAAc,MACdtC,SAAU,OACVuC,WAAY,MACZR,OAAQ,OACRS,WAAY,OACZC,SAAU,OACVC,SAAU,OACVC,QAAS,QACTC,UAAW,SACXC,MAAOzB,EAAMc,QAAQY,KAAKV,SAE5B,aAAc,CACZW,WAAY,UAEd,QAAS,CACP,YAAa,CACXC,aAAc,GAEhB,WAAY,CACVA,aAAc,KAIpB,yBAA0B,CACxB,gBAAiB,CACfH,MAAOzB,EAAMc,QAAQY,KAAKV,QAC1BpC,SAAU,OACVuC,WAAY,MACZC,WAAY,QAEd,yBAA0B,CACxBZ,YAAa,MACbtB,QAAS,eAEX,uBAAwB,CACtBuB,WAAY,MACZvB,QAAS,eAEX,kBAAmB,CACjBN,SAAU,OACVwB,MAAO,OACPO,OAAQ,SAGZ,mBAAoB,CAClBc,MAAOzB,EAAMc,QAAQY,KAAKV,QAC1BpC,SAAU,OACVuC,WAAY,MACZC,WAAY,OACZS,UAAW,OAEb,uBAAwB,CACtBC,cAAe,OACf,+DAAgE,CAC9DL,MAAOzB,EAAMc,QAAQzF,SAAS2F,aAM/B/B,CAAK"}
+{"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":"qJAkDO,MAAMA,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,GAAGhB,EACjBiB,EAAIC,EAAAlB,EAbT,oLAiBA,OACEmB,EAACC,EAAaC,OAAAC,OAAA,CAAA,EACRL,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/passwordField/passwordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"passwordField.js","sources":["../../../src/components/passwordField/passwordField.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { IconButton, InputAdornment, TextField, TextFieldProps, IconButtonProps } from '@mui/material';\nimport { HideIcon } from '@/src/components/icon/stroke/HideIcon';\nimport { ShowIcon } from '@/src/components/icon/stroke/ShowIcon';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type'> {\n  /**\n   * Tell browser how it should behave to password field\n   * @default new-password\n   */\n  autoComplete?: 'new-password' | 'current-password' | string;\n  /**\n   * Properties provided to button toggling visibility. Can be used to change aria-label.\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Optional flag if password is visible\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Optional function to toggle visibility\n   */\n  setVisible?: (visible: boolean) => void;\n}\n\nexport const PasswordField: React.FC<PasswordFieldProps> = forwardRef(\n  ({ slotProps, iconButtonProps, visible: propsVisible, setVisible: setPropsVisible, ...rest }, ref) => {\n    const { input: inputSlotProps, ...restSlotProps } = slotProps || {};\n    const [rawVisible, setRawVisible] = useState<boolean>(false);\n    const visible = propsVisible ?? rawVisible;\n    const setVisible = setPropsVisible ?? setRawVisible;\n\n    return (\n      <TextField\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        autoComplete=\"new-password\"\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\">\n                <IconButton onClick={() => setVisible(!visible)} aria-label=\"Toggle visibility\" {...iconButtonProps}>\n                  {visible ? <HideIcon /> : <ShowIcon />}\n                </IconButton>\n              </InputAdornment>\n            ),\n            ...inputSlotProps,\n          },\n          ...restSlotProps,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","_a","ref","slotProps","iconButtonProps","visible","propsVisible","setVisible","setPropsVisible","rest","__rest","_b","input","inputSlotProps","restSlotProps","rawVisible","setRawVisible","useState","_jsx","TextField","Object","assign","type","autoComplete","endAdornment","InputAdornment","position","IconButton","onClick","HideIcon","ShowIcon"],"mappings":"kTA0Ba,MAAAA,EAA8CC,GACzD,CAACC,EAA6FC,KAA7F,IAAAC,UAAEA,EAASC,gBAAEA,EAAiBC,QAASC,EAAcC,WAAYC,GAA0BP,EAANQ,EAAIC,EAAAT,EAAzF,wDACC,MAAMU,EAA8CR,GAAa,IAAzDS,MAAOC,KAAmBC,EAA5BJ,EAAAC,EAAA,CAAA,WACCI,EAAYC,GAAiBC,GAAkB,GAChDZ,EAAUC,QAAAA,EAAgBS,EAC1BR,EAAaC,QAAAA,EAAmBQ,EAEtC,OACEE,EAACC,EACCC,OAAAC,OAAA,CAAAnB,IAAKA,EACLoB,KAAMjB,EAAU,OAAS,WACzBkB,aAAa,eACbpB,UAASiB,OAAAC,OAAA,CACPT,MACEQ,OAAAC,OAAA,CAAAG,aACEN,EAACO,EAAc,CAACC,SAAS,eACvBR,EAACS,EAAWP,OAAAC,OAAA,CAAAO,QAAS,IAAMrB,GAAYF,GAAQ,aAAa,qBAAwBD,YACvEc,EAAVb,EAAWwB,EAAeC,EAAP,CAAA,SAIvBjB,IAEFC,IAEDL,GACJ"}
+{"version":3,"file":"passwordField.js","sources":["../../../src/components/passwordField/passwordField.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { IconButton, InputAdornment, TextField, TextFieldProps, IconButtonProps } from '@mui/material';\nimport { HideIcon } from '@/src/components/icon/stroke/HideIcon';\nimport { ShowIcon } from '@/src/components/icon/stroke/ShowIcon';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type'> {\n  /**\n   * Tell browser how it should behave to password field\n   * @default new-password\n   */\n  autoComplete?: 'new-password' | 'current-password' | string;\n  /**\n   * Properties provided to button toggling visibility. Can be used to change aria-label.\n   */\n  iconButtonProps?: IconButtonProps;\n  /**\n   * Optional flag if password is visible\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Optional function to toggle visibility\n   */\n  setVisible?: (visible: boolean) => void;\n}\n\nexport const PasswordField: React.FC<PasswordFieldProps> = forwardRef(\n  ({ slotProps, iconButtonProps, visible: propsVisible, setVisible: setPropsVisible, ...rest }, ref) => {\n    const { input: inputSlotProps, ...restSlotProps } = slotProps || {};\n    const [rawVisible, setRawVisible] = useState<boolean>(false);\n    const visible = propsVisible ?? rawVisible;\n    const setVisible = setPropsVisible ?? setRawVisible;\n\n    return (\n      <TextField\n        ref={ref}\n        type={visible ? 'text' : 'password'}\n        autoComplete=\"new-password\"\n        slotProps={{\n          input: {\n            endAdornment: (\n              <InputAdornment position=\"end\">\n                <IconButton onClick={() => setVisible(!visible)} aria-label=\"Toggle visibility\" {...iconButtonProps}>\n                  {visible ? <HideIcon /> : <ShowIcon />}\n                </IconButton>\n              </InputAdornment>\n            ),\n            ...inputSlotProps,\n          },\n          ...restSlotProps,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","_a","ref","slotProps","iconButtonProps","visible","propsVisible","setVisible","setPropsVisible","rest","__rest","_b","input","inputSlotProps","restSlotProps","rawVisible","setRawVisible","useState","_jsx","TextField","Object","assign","type","autoComplete","endAdornment","InputAdornment","position","IconButton","onClick","HideIcon","ShowIcon"],"mappings":"kTA0BO,MAAMA,EAA8CC,GACzD,CAACC,EAA6FC,KAA7F,IAAAC,UAAEA,EAASC,gBAAEA,EAAiBC,QAASC,EAAcC,WAAYC,GAAeP,EAAKQ,EAAIC,EAAAT,EAAzF,wDACC,MAAMU,EAA8CR,GAAa,IAAzDS,MAAOC,KAAmBC,EAAaJ,EAAAC,EAAzC,CAAA,WACCI,EAAYC,GAAiBC,GAAkB,GAChDZ,EAAUC,QAAAA,EAAgBS,EAC1BR,EAAaC,QAAAA,EAAmBQ,EAEtC,OACEE,EAACC,EAASC,OAAAC,OAAA,CACRnB,IAAKA,EACLoB,KAAMjB,EAAU,OAAS,WACzBkB,aAAa,eACbpB,UAASiB,OAAAC,OAAA,CACPT,MAAKQ,OAAAC,OAAA,CACHG,aACEN,EAACO,EAAc,CAACC,SAAS,eACvBR,EAACS,EAAUP,OAAAC,OAAA,CAACO,QAAS,IAAMrB,GAAYF,GAAQ,aAAa,qBAAwBD,YACvEc,EAAVb,EAAWwB,EAAeC,EAAP,CAAA,SAIvBjB,IAEFC,IAEDL,GACJ"}

package/components/playPauseButton/PlayPauseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ElementType, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CircularProgress,\n  CircularProgressProps,\n  IconButton,\n  IconButtonProps,\n  SvgIconProps,\n} from '@mui/material';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: () => void;\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /** Custom props for the background CircularProgress component. */\n  circularProgressBgProps?: CircularProgressProps;\n  /** Custom props for the foreground CircularProgress component. */\n  circularProgressProps?: CircularProgressProps;\n  /** Custom props for the IconButton component. */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /** Custom props for the pause icon component. */\n  pauseIconProps?: SvgIconProps;\n  PauseIconComponent?: ElementType<SvgIconProps>;\n  /** Custom props for the play icon component. */\n  playIconProps?: SvgIconProps;\n  PlayIconComponent?: ElementType<SvgIconProps>;\n}\nexport interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      circularProgressBgProps,\n      circularProgressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: circularProgressBgSx, ...restCircularProgressBg } = circularProgressBgProps || {};\n    const { sx: circularProgressSx, ...restCircularProgress } = circularProgressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <CircularProgress\n          sx={{\n            // circular progress serving as a background\n            color: 'onSurface.os0',\n            position: 'absolute',\n            inset: '0',\n            zIndex: '10',\n            ...circularProgressBgSx,\n          }}\n          size={44}\n          thickness={1.75}\n          variant=\"determinate\"\n          value={100}\n          {...restCircularProgressBg}\n        />\n        <CircularProgress\n          sx={{\n            // circular progress indicating real progress\n            color: 'brandHover.secondary',\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            ...circularProgressSx,\n          }}\n          size={44}\n          thickness={1.75}\n          variant=\"determinate\"\n          value={progress || 0}\n          {...restCircularProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n\n/**\n * @deprecated renamed to <PlayPauseButton />\n */\nexport const VideoPlayPauseIndicator: React.FC<VideoPlayPauseIndicatorProps> = forwardRef((props, ref) => {\n  return <PlayPauseButton ref={ref} {...props} />;\n});\n"],"names":["PlayPauseButton","forwardRef","_a","ref","progress","isPlaying","onClick","circularProgressBgProps","circularProgressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","__rest","_b","circularProgressBgSx","restCircularProgressBg","_c","circularProgressSx","restCircularProgress","_d","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","Object","assign","position","zIndex","width","height","_jsx","CircularProgress","color","inset","size","thickness","variant","value","IconButton","VideoPlayPauseIndicator","props"],"mappings":"4UA6Ca,MAAAA,EAAkDC,GAC7D,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,wBACPA,EAAuBC,sBACvBA,EAAqBC,gBACrBA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAEDb,EADIc,EAAIC,EAAAf,EAbT,kMAiBA,MAAMgB,EAA0DX,GAA2B,IAAnFQ,GAAII,KAAyBC,EAA/BH,EAAAC,EAAA,CAAA,OACAG,EAAsDb,GAAyB,IAA7EO,GAAIO,KAAuBC,EAA7BN,EAAAI,EAAA,CAAA,OACAG,EAA0Cf,GAAmB,IAA3DM,GAAIU,KAAiBC,EAAvBT,EAAAO,EAAA,CAAA,OACAG,EAAYhB,GAAsBiB,EAClCC,EAAWhB,GAAqBiB,EAEtC,OACEC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,qBACZnB,GACEkB,OAAAC,OAAA,CAAAC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLvB,GAELZ,IAAKA,GACDa,EAAI,CAAAF,SAAA,CAERyB,EAACC,iBACCzB,GAAEkB,OAAAC,OAAA,CAEAO,MAAO,gBACPN,SAAU,WACVO,MAAO,IACPN,OAAQ,MACLjB,GAELwB,KAAM,GACNC,UAAW,KACXC,QAAQ,cACRC,MAAO,KACH1B,IAENmB,EAACC,iBACCzB,GAAEkB,OAAAC,OAAA,CAEAO,MAAO,uBACPN,SAAU,WACVO,MAAO,IACPN,OAAQ,MACLd,GAELqB,KAAM,GACNC,UAAW,KACXC,QAAQ,cACRC,MAAO1C,GAAY,GACfmB,IAENgB,EAACQ,+BACa,sBACZzC,QAASA,EACTmC,MAAM,QACNE,KAAK,SACL5B,GAAMkB,OAAAC,OAAA,CAAAC,SAAU,WAAYO,MAAO,IAAKN,OAAQ,MAASX,GAC7C,aAAApB,EAAY,cAAgB,cACpCqB,EAEH,CAAAZ,SAAAT,EACCkC,EAACZ,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBxB,IAEhD6B,EAACV,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBtB,UAG9C,IAQCoC,EAAkE/C,GAAW,CAACgD,EAAO9C,IACzFoC,EAACvC,EAAgBiC,OAAAC,OAAA,CAAA/B,IAAKA,GAAS8C"}
+{"version":3,"file":"PlayPauseButton.js","sources":["../../../src/components/playPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, { ElementType, forwardRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CircularProgress,\n  CircularProgressProps,\n  IconButton,\n  IconButtonProps,\n  SvgIconProps,\n} from '@mui/material';\nimport { ControlsPlayIcon } from '@/src/components/icon/stroke/ControlsPlayIcon';\nimport { ControlsPauseIcon } from '@/src/components/icon/stroke/ControlsPauseIcon';\n\nexport interface PlayPauseButtonProps extends BoxProps<ElementType> {\n  /**\n   * Boolean to indicate if the media is currently playing\n   */\n  isPlaying: boolean;\n  /**\n   * Callback function to handle play/pause button click events.\n   */\n  onClick: () => void;\n  /**\n   * The progress value for the CircularProgress component.\n   * Should be a number between 0 and 100.\n   */\n  progress?: number;\n  /** Custom props for the background CircularProgress component. */\n  circularProgressBgProps?: CircularProgressProps;\n  /** Custom props for the foreground CircularProgress component. */\n  circularProgressProps?: CircularProgressProps;\n  /** Custom props for the IconButton component. */\n  iconButtonProps?: Partial<IconButtonProps>;\n  /** Custom props for the pause icon component. */\n  pauseIconProps?: SvgIconProps;\n  PauseIconComponent?: ElementType<SvgIconProps>;\n  /** Custom props for the play icon component. */\n  playIconProps?: SvgIconProps;\n  PlayIconComponent?: ElementType<SvgIconProps>;\n}\nexport interface VideoPlayPauseIndicatorProps extends PlayPauseButtonProps {}\n\n/**\n * A component that displays a circular progress indicator with a play/pause button.\n */\nexport const PlayPauseButton: React.FC<PlayPauseButtonProps> = forwardRef(\n  (\n    {\n      progress = 0,\n      isPlaying,\n      onClick,\n      circularProgressBgProps,\n      circularProgressProps,\n      iconButtonProps,\n      pauseIconProps,\n      PauseIconComponent,\n      playIconProps,\n      PlayIconComponent,\n      children,\n      sx,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { sx: circularProgressBgSx, ...restCircularProgressBg } = circularProgressBgProps || {};\n    const { sx: circularProgressSx, ...restCircularProgress } = circularProgressProps || {};\n    const { sx: iconButtonSx, ...restIconButton } = iconButtonProps || {};\n    const PauseIcon = PauseIconComponent || ControlsPauseIcon;\n    const PlayIcon = PlayIconComponent || ControlsPlayIcon;\n\n    return (\n      <Box\n        data-testid=\"PlayPauseIndicator\"\n        sx={{\n          position: 'relative',\n          zIndex: '150',\n          width: '44px',\n          height: '44px',\n          ...sx,\n        }}\n        ref={ref}\n        {...rest}\n      >\n        <CircularProgress\n          sx={{\n            // circular progress serving as a background\n            color: 'onSurface.os0',\n            position: 'absolute',\n            inset: '0',\n            zIndex: '10',\n            ...circularProgressBgSx,\n          }}\n          size={44}\n          thickness={1.75}\n          variant=\"determinate\"\n          value={100}\n          {...restCircularProgressBg}\n        />\n        <CircularProgress\n          sx={{\n            // circular progress indicating real progress\n            color: 'brandHover.secondary',\n            position: 'absolute',\n            inset: '0',\n            zIndex: '20',\n            ...circularProgressSx,\n          }}\n          size={44}\n          thickness={1.75}\n          variant=\"determinate\"\n          value={progress || 0}\n          {...restCircularProgress}\n        />\n        <IconButton\n          data-testid=\"IndicatorIconButton\"\n          onClick={onClick}\n          color=\"white\"\n          size=\"medium\"\n          sx={{ position: 'absolute', inset: '0', zIndex: '30', ...iconButtonSx }}\n          aria-label={isPlaying ? 'Pause video' : 'Play video'}\n          {...restIconButton}\n        >\n          {isPlaying ? (\n            <PauseIcon data-testid=\"IndicatorPauseIcon\" {...pauseIconProps} />\n          ) : (\n            <PlayIcon data-testid=\"IndicatorPlayIcon\" {...playIconProps} />\n          )}\n        </IconButton>\n      </Box>\n    );\n  },\n);\n\n/**\n * @deprecated renamed to <PlayPauseButton />\n */\nexport const VideoPlayPauseIndicator: React.FC<VideoPlayPauseIndicatorProps> = forwardRef((props, ref) => {\n  return <PlayPauseButton ref={ref} {...props} />;\n});\n"],"names":["PlayPauseButton","forwardRef","_a","ref","progress","isPlaying","onClick","circularProgressBgProps","circularProgressProps","iconButtonProps","pauseIconProps","PauseIconComponent","playIconProps","PlayIconComponent","children","sx","rest","__rest","_b","circularProgressBgSx","restCircularProgressBg","_c","circularProgressSx","restCircularProgress","_d","iconButtonSx","restIconButton","PauseIcon","ControlsPauseIcon","PlayIcon","ControlsPlayIcon","_jsxs","Box","Object","assign","position","zIndex","width","height","_jsx","CircularProgress","color","inset","size","thickness","variant","value","IconButton","VideoPlayPauseIndicator","props"],"mappings":"4UA6CO,MAAMA,EAAkDC,GAC7D,CACEC,EAeAC,KAfA,IAAAC,SACEA,EAAW,EAACC,UACZA,EAASC,QACTA,EAAOC,wBACPA,EAAuBC,sBACvBA,EAAqBC,gBACrBA,EAAeC,eACfA,EAAcC,mBACdA,EAAkBC,cAClBA,EAAaC,kBACbA,EAAiBC,SACjBA,EAAQC,GACRA,GAAEb,EACCc,EAAIC,EAAAf,EAbT,kMAiBA,MAAMgB,EAA0DX,GAA2B,IAAnFQ,GAAII,KAAyBC,EAAsBH,EAAAC,EAArD,CAAA,OACAG,EAAsDb,GAAyB,IAA7EO,GAAIO,KAAuBC,EAAoBN,EAAAI,EAAjD,CAAA,OACAG,EAA0Cf,GAAmB,IAA3DM,GAAIU,KAAiBC,EAAcT,EAAAO,EAArC,CAAA,OACAG,EAAYhB,GAAsBiB,EAClCC,EAAWhB,GAAqBiB,EAEtC,OACEC,EAACC,EAAGC,OAAAC,OAAA,CAAA,cACU,qBACZnB,GAAEkB,OAAAC,OAAA,CACAC,SAAU,WACVC,OAAQ,MACRC,MAAO,OACPC,OAAQ,QACLvB,GAELZ,IAAKA,GACDa,EAAI,CAAAF,SAAA,CAERyB,EAACC,iBACCzB,GAAEkB,OAAAC,OAAA,CAEAO,MAAO,gBACPN,SAAU,WACVO,MAAO,IACPN,OAAQ,MACLjB,GAELwB,KAAM,GACNC,UAAW,KACXC,QAAQ,cACRC,MAAO,KACH1B,IAENmB,EAACC,iBACCzB,GAAEkB,OAAAC,OAAA,CAEAO,MAAO,uBACPN,SAAU,WACVO,MAAO,IACPN,OAAQ,MACLd,GAELqB,KAAM,GACNC,UAAW,KACXC,QAAQ,cACRC,MAAO1C,GAAY,GACfmB,IAENgB,EAACQ,+BACa,sBACZzC,QAASA,EACTmC,MAAM,QACNE,KAAK,SACL5B,GAAEkB,OAAAC,OAAA,CAAIC,SAAU,WAAYO,MAAO,IAAKN,OAAQ,MAASX,GAAY,aACzDpB,EAAY,cAAgB,cACpCqB,EAAc,CAAAZ,SAEjBT,EACCkC,EAACZ,EAASM,OAAAC,OAAA,CAAA,cAAa,sBAAyBxB,IAEhD6B,EAACV,EAAQI,OAAAC,OAAA,CAAA,cAAa,qBAAwBtB,UAG9C,IAQCoC,EAAkE/C,GAAW,CAACgD,EAAO9C,IACzFoC,EAACvC,EAAeiC,OAAAC,OAAA,CAAC/B,IAAKA,GAAS8C"}