acinguiux-ds-react-framework 0.1.16 → 0.1.19

package/build/cjs/components/NavBar/NavBar.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),i=require("react"),K=require("classnames"),e=require("../../react-base/src/consts/index.js"),G=require("../Icon/components/LeftNavigation.js"),J=require("../Icon/components/LeftNavigationSolid.js"),P=require("./components/LastArea/LastArea.js"),Q=require("./components/FirstArea/FirstArea.js"),l=require("./NavBar.styles.js"),m=require("../Divider/Divider.js"),T=require("../../react-base/src/consts/classes.js"),U=i.forwardRef(({size:a=`${e.Sizes.Medium}`,className:O,direction:t=`${e.Directions.Horizontal}`,elevation:L,collapsed:S=!1,preventExpand:h=!1,expandedWidth:k=300,pectenArea:x="default",lockup:D,urlProps:y,header:C,avatarArea:d,avatarProps:j,items:$,topArea:v,onClick:A,startArea:f,endArea:q,itemsAlignment:V=`${e.Alignments.Left}`,expandMode:c="auto_push",itemRender:H,selectedPath:_,onSelect:p,onCollapsedChange:o,onExpandChange:u,...B},I)=>{const[n,z]=i.useState(()=>S),R=D??x,[N,b]=i.useState(()=>!1),r=i.useMemo(()=>t===e.Directions.Horizontal||!n||N,[t,n,N]);i.useEffect(()=>{u==null||u(r)},[r,u]),i.useEffect(()=>z(S),[S]);const M={vertical:"inline",horizontal:"horizontal"},F=i.useCallback(()=>{z(E=>!E),o==null||o(!n)},[o,n]),W=i.useCallback(()=>b(!0),[]),w=i.useCallback(()=>b(!1),[]);return s.jsxs(l.Wrapper,{onMouseLeave:c!=="manual"?w:e.NOOP,onMouseEnter:c!=="manual"?W:e.NOOP,$direction:t,$expandMode:c,$size:a,$isCollapsed:t===e.Directions.Vertical&&n,children:[!!v&&t!==e.Directions.Vertical&&v,s.jsxs(l.Nav,{as:t===e.Directions.Vertical?"nav":"header",$size:a,$expandMode:c,className:K(T.NAV_BAR_CLASS,O),$direction:t,$elevation:L,$collapsed:!r,$expandedWidth:k,ref:I,...B,children:[R!=="none"&&s.jsx(Q,{header:C,pectenArea:x,lockup:D,urlProps:y,onClick:A,collapsed:!r,size:a}),!!f&&t===e.Directions.Vertical&&s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),f,s.jsx(l.MiddleArea,{$direction:t,$collapsed:!r,children:$&&s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!r,items:$,$itemsAlignment:V,itemRender:H,mode:M[t],selectedPath:_,onSelect:p,size:a})}),!!q&&t===e.Directions.Vertical&&s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),q,t===e.Directions.Vertical&&!h&&s.jsxs(s.Fragment,{children:[s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!r,items:[{key:"expand",label:n?"Expand navigation":"Collapse navigation",itemIcon:n?s.jsx(J,{}):s.jsx(G,{})}],$itemsAlignment:V,mode:M[t],selectedKeys:[],noAnimate:!0,onClick:F,size:a})]}),t===e.Directions.Vertical&&(!!d||!!j)&&s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),(!!d||!!j)&&s.jsx(P,{size:a,collapsed:t===e.Directions.Vertical&&!r,avatarArea:d,avatarProps:j})]})]})});module.exports=U;
+"use strict";const s=require("react/jsx-runtime"),n=require("react"),Q=require("classnames"),e=require("../../react-base/src/consts/index.js"),T=require("../Icon/components/LeftNavigation.js"),U=require("../Icon/components/LeftNavigationSolid.js"),X=require("./components/LastArea/LastArea.js"),Y=require("./components/FirstArea/FirstArea.js"),l=require("./NavBar.styles.js"),x=require("../Divider/Divider.js"),Z=require("../../react-base/src/consts/classes.js"),ee=n.forwardRef(({size:r=`${e.Sizes.Medium}`,className:V,direction:t=`${e.Directions.Horizontal}`,elevation:z,collapsed:c=!1,preventExpand:M=!1,expandedWidth:O=300,pectenArea:m="default",lockup:$,urlProps:b,header:y,avatarArea:u,avatarProps:d,items:j,topArea:S,onClick:L,startArea:k,endArea:f,defaultOpenToSelected:g=!1,itemsAlignment:C=`${e.Alignments.Left}`,expandMode:o="auto_push",itemRender:A,selectedPath:E,onSelect:H,onCollapsedChange:D,onExpandChange:v,..._},B)=>{const{indicatorPosition:I,iconPosition:R,type:F="default",...P}=_,[a,h]=n.useState(()=>c),W=$??m,[p,q]=n.useState(()=>!1),i=n.useMemo(()=>t===e.Directions.Horizontal||!a||p,[t,a,p]);n.useEffect(()=>{v?.(i)},[i,v]),n.useEffect(()=>h(c),[c]);const N={vertical:"inline",horizontal:"horizontal"},w=n.useCallback(()=>{h(J=>!J),D?.(!a)},[D,a]),K=n.useCallback(()=>q(!0),[]),G=n.useCallback(()=>q(!1),[]);return s.jsxs(l.Wrapper,{onMouseLeave:o!=="manual"?G:e.NOOP,onMouseEnter:o!=="manual"?K:e.NOOP,$direction:t,$expandMode:o,$size:r,$isCollapsed:t===e.Directions.Vertical&&a,$type:F,children:[!!S&&t!==e.Directions.Vertical&&S,s.jsxs(l.Nav,{as:t===e.Directions.Vertical?"nav":"header",$size:r,$expandMode:o,className:Q(Z.NAV_BAR_CLASS,V),$direction:t,$elevation:z,$collapsed:!i,$expandedWidth:O,ref:B,...P,children:[W!=="none"&&s.jsx(Y,{header:y,pectenArea:m,lockup:$,urlProps:b,onClick:L,collapsed:!i,size:r}),k,s.jsx(l.MiddleArea,{$direction:t,$collapsed:!i,children:j&&s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!i,items:j,$itemsAlignment:C,itemRender:A,mode:N[t],selectedPath:E,defaultOpenToSelected:g,onSelect:H,size:r,indicatorPosition:I,iconPosition:R})}),!!f&&t===e.Directions.Vertical&&s.jsx(l.DividerContainer,{children:s.jsx(x,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),f,t===e.Directions.Vertical&&!M&&s.jsxs(s.Fragment,{children:[s.jsx(l.DividerContainer,{children:s.jsx(x,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!i,items:[{key:"expand",label:a?"Expand navigation":"Collapse navigation",itemIcon:a?s.jsx(U,{}):s.jsx(T,{})}],$itemsAlignment:C,mode:N[t],selectedKeys:[],noAnimate:!0,onClick:w,size:r})]}),t===e.Directions.Vertical&&(!!u||!!d)&&s.jsx(l.DividerContainer,{children:s.jsx(x,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),(!!u||!!d)&&s.jsx(X,{size:r,collapsed:t===e.Directions.Vertical&&!i,avatarArea:u,avatarProps:d})]})]})});module.exports=ee;
 //# sourceMappingURL=NavBar.js.map

package/build/cjs/components/NavBar/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sources":["../../../../src/components/NavBar/NavBar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { NAV_BAR_CLASS, Sizes, Directions, Contrasts, Alignments, NOOP } from 'acinguiux-ds-react-base/consts';\nimport type { NavBarTypes } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport LeftNavigation from '../Icon/components/LeftNavigation';\nimport LeftNavigationSolid from '../Icon/components/LeftNavigationSolid';\nimport LastArea from './components/LastArea/LastArea';\nimport FirstArea from './components/FirstArea/FirstArea';\nimport { Wrapper, MiddleArea, Nav, StyledMenu, DividerContainer } from './NavBar.styles';\nimport type { INavBarProps } from './NavBar.types';\nimport Divider from '../Divider/Divider';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst NavBar = forwardRef<HTMLElement, INavBarProps>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      className,\n      direction = `${Directions.Horizontal}`,\n      elevation,\n      collapsed = false,\n      preventExpand = false,\n      expandedWidth = 300,\n      pectenArea = 'default',\n      lockup,\n      urlProps,\n      header,\n      avatarArea,\n      avatarProps,\n      items,\n      topArea,\n      onClick,\n      startArea,\n      endArea,\n      itemsAlignment = `${Alignments.Left}`,\n      expandMode = 'auto_push',\n      itemRender,\n      selectedPath,\n      onSelect,\n      onCollapsedChange,\n      onExpandChange,\n      ...rest\n    },\n    ref,\n  ): ReactElement => {\n    const [isCollapsed, setIsCollapsed] = useState<boolean>(() => collapsed);\n    const lockupArea = lockup ?? pectenArea;\n    const [isHovered, setIsHovered] = useState<boolean>(() => false);\n    const isOpen = useMemo(\n      () => direction === Directions.Horizontal || !isCollapsed || isHovered,\n      [direction, isCollapsed, isHovered],\n    );\n\n    useEffect(() => {\n      onExpandChange?.(isOpen);\n    }, [isOpen, onExpandChange]);\n\n    useEffect(() => setIsCollapsed(collapsed), [collapsed]);\n\n    const menuModeMap: { [Property in NavBarTypes.Direction]: IMenuProps['mode'] } = {\n      vertical: 'inline',\n      horizontal: 'horizontal',\n    };\n\n    const handleOnExpandClick = useCallback(() => {\n      setIsCollapsed((prev) => !prev);\n      onCollapsedChange?.(!isCollapsed);\n    }, [onCollapsedChange, isCollapsed]);\n\n    const handleOnEnter: MouseEventHandler = useCallback(() => setIsHovered(true), []);\n    const handleOnLeave: MouseEventHandler = useCallback(() => setIsHovered(false), []);\n\n    return (\n      <Wrapper\n        onMouseLeave={expandMode !== 'manual' ? handleOnLeave : NOOP}\n        onMouseEnter={expandMode !== 'manual' ? handleOnEnter : NOOP}\n        $direction={direction}\n        $expandMode={expandMode}\n        $size={size}\n        $isCollapsed={direction === Directions.Vertical && isCollapsed}\n      >\n        {!!topArea && direction !== Directions.Vertical && topArea}\n        <Nav\n          as={direction === Directions.Vertical ? 'nav' : 'header'}\n          $size={size}\n          $expandMode={expandMode}\n          className={classNames(NAV_BAR_CLASS, className)}\n          $direction={direction}\n          $elevation={elevation}\n          $collapsed={!isOpen}\n          $expandedWidth={expandedWidth}\n          ref={ref}\n          {...rest}\n        >\n          {lockupArea !== 'none' && (\n            <FirstArea\n              header={header}\n              pectenArea={pectenArea}\n              lockup={lockup}\n              urlProps={urlProps}\n              onClick={onClick}\n              collapsed={!isOpen}\n              size={size}\n            />\n          )}\n          {!!startArea && direction === Directions.Vertical && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {startArea}\n          <MiddleArea $direction={direction} $collapsed={!isOpen}>\n            {items && (\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={items}\n                $itemsAlignment={itemsAlignment}\n                itemRender={itemRender}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedPath={selectedPath}\n                onSelect={onSelect}\n                size={size}\n              />\n            )}\n          </MiddleArea>\n          {!!endArea && direction === Directions.Vertical && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {endArea}\n          {direction === Directions.Vertical && !preventExpand && (\n            <>\n              <DividerContainer>\n                <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n              </DividerContainer>\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={[\n                  {\n                    key: 'expand',\n                    label: isCollapsed ? 'Expand navigation' : 'Collapse navigation',\n                    itemIcon: isCollapsed ? <LeftNavigationSolid /> : <LeftNavigation />,\n                  },\n                ]}\n                $itemsAlignment={itemsAlignment}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedKeys={[]}\n                noAnimate={true}\n                onClick={handleOnExpandClick}\n                size={size}\n              />\n            </>\n          )}\n          {direction === Directions.Vertical && (!!avatarArea || !!avatarProps) && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {(!!avatarArea || !!avatarProps) && (\n            <LastArea\n              size={size}\n              collapsed={direction === Directions.Vertical && !isOpen}\n              avatarArea={avatarArea}\n              avatarProps={avatarProps}\n            />\n          )}\n        </Nav>\n      </Wrapper>\n    );\n  },\n);\n\nexport default NavBar;\n"],"names":["NavBar","forwardRef","size","Sizes","className","direction","Directions","elevation","collapsed","preventExpand","expandedWidth","pectenArea","lockup","urlProps","header","avatarArea","avatarProps","items","topArea","onClick","startArea","endArea","itemsAlignment","Alignments","expandMode","itemRender","selectedPath","onSelect","onCollapsedChange","onExpandChange","rest","ref","isCollapsed","setIsCollapsed","useState","lockupArea","isHovered","setIsHovered","isOpen","useMemo","useEffect","menuModeMap","handleOnExpandClick","useCallback","prev","handleOnEnter","handleOnLeave","jsxs","Wrapper","NOOP","Nav","classNames","NAV_BAR_CLASS","jsx","FirstArea","DividerContainer","Divider","Contrasts","MiddleArea","StyledMenu","Fragment","LeftNavigationSolid","LeftNavigation","LastArea"],"mappings":"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"}
+{"version":3,"file":"NavBar.js","sources":["../../../../src/components/NavBar/NavBar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { NAV_BAR_CLASS, Sizes, Directions, Contrasts, Alignments, NOOP } from 'acinguiux-ds-react-base/consts';\nimport type { NavBarTypes } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport LeftNavigation from '../Icon/components/LeftNavigation';\nimport LeftNavigationSolid from '../Icon/components/LeftNavigationSolid';\nimport LastArea from './components/LastArea/LastArea';\nimport FirstArea from './components/FirstArea/FirstArea';\nimport { Wrapper, MiddleArea, Nav, StyledMenu, DividerContainer } from './NavBar.styles';\nimport { INavBarProps, INavBarPropsImpl } from './NavBar.types';\nimport Divider from '../Divider/Divider';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst NavBar = forwardRef<HTMLElement, INavBarProps>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      className,\n      direction = `${Directions.Horizontal}`,\n      elevation,\n      collapsed = false,\n      preventExpand = false,\n      expandedWidth = 300,\n      pectenArea = 'default',\n      lockup,\n      urlProps,\n      header,\n      avatarArea,\n      avatarProps,\n      items,\n      topArea,\n      onClick,\n      startArea,\n      endArea,\n      defaultOpenToSelected = false,\n      itemsAlignment = `${Alignments.Left}`,\n      expandMode = 'auto_push',\n      itemRender,\n      selectedPath,\n      onSelect,\n      onCollapsedChange,\n      onExpandChange,\n      ...props\n    },\n    ref,\n  ): ReactElement => {\n    const { indicatorPosition, iconPosition, type = 'default', ...rest } = props as INavBarPropsImpl;\n    const [isCollapsed, setIsCollapsed] = useState<boolean>(() => collapsed);\n    const lockupArea = lockup ?? pectenArea;\n    const [isHovered, setIsHovered] = useState<boolean>(() => false);\n    const isOpen = useMemo(\n      () => direction === Directions.Horizontal || !isCollapsed || isHovered,\n      [direction, isCollapsed, isHovered],\n    );\n\n    useEffect(() => {\n      onExpandChange?.(isOpen);\n    }, [isOpen, onExpandChange]);\n\n    useEffect(() => setIsCollapsed(collapsed), [collapsed]);\n\n    const menuModeMap: { [Property in NavBarTypes.Direction]: IMenuProps['mode'] } = {\n      vertical: 'inline',\n      horizontal: 'horizontal',\n    };\n\n    const handleOnExpandClick = useCallback(() => {\n      setIsCollapsed((prev) => !prev);\n      onCollapsedChange?.(!isCollapsed);\n    }, [onCollapsedChange, isCollapsed]);\n\n    const handleOnEnter: MouseEventHandler = useCallback(() => setIsHovered(true), []);\n    const handleOnLeave: MouseEventHandler = useCallback(() => setIsHovered(false), []);\n\n    return (\n      <Wrapper\n        onMouseLeave={expandMode !== 'manual' ? handleOnLeave : NOOP}\n        onMouseEnter={expandMode !== 'manual' ? handleOnEnter : NOOP}\n        $direction={direction}\n        $expandMode={expandMode}\n        $size={size}\n        $isCollapsed={direction === Directions.Vertical && isCollapsed}\n        $type={type}\n      >\n        {!!topArea && direction !== Directions.Vertical && topArea}\n        <Nav\n          as={direction === Directions.Vertical ? 'nav' : 'header'}\n          $size={size}\n          $expandMode={expandMode}\n          className={classNames(NAV_BAR_CLASS, className)}\n          $direction={direction}\n          $elevation={elevation}\n          $collapsed={!isOpen}\n          $expandedWidth={expandedWidth}\n          ref={ref}\n          {...rest}\n        >\n          {lockupArea !== 'none' && (\n            <FirstArea\n              header={header}\n              pectenArea={pectenArea}\n              lockup={lockup}\n              urlProps={urlProps}\n              onClick={onClick}\n              collapsed={!isOpen}\n              size={size}\n            />\n          )}\n          {startArea}\n          <MiddleArea $direction={direction} $collapsed={!isOpen}>\n            {items && (\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={items}\n                $itemsAlignment={itemsAlignment}\n                itemRender={itemRender}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedPath={selectedPath}\n                defaultOpenToSelected={defaultOpenToSelected}\n                onSelect={onSelect}\n                size={size}\n                indicatorPosition={indicatorPosition}\n                iconPosition={iconPosition}\n              />\n            )}\n          </MiddleArea>\n          {!!endArea && direction === Directions.Vertical && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {endArea}\n          {direction === Directions.Vertical && !preventExpand && (\n            <>\n              <DividerContainer>\n                <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n              </DividerContainer>\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={[\n                  {\n                    key: 'expand',\n                    label: isCollapsed ? 'Expand navigation' : 'Collapse navigation',\n                    itemIcon: isCollapsed ? <LeftNavigationSolid /> : <LeftNavigation />,\n                  },\n                ]}\n                $itemsAlignment={itemsAlignment}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedKeys={[]}\n                noAnimate={true}\n                onClick={handleOnExpandClick}\n                size={size}\n              />\n            </>\n          )}\n          {direction === Directions.Vertical && (!!avatarArea || !!avatarProps) && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {(!!avatarArea || !!avatarProps) && (\n            <LastArea\n              size={size}\n              collapsed={direction === Directions.Vertical && !isOpen}\n              avatarArea={avatarArea}\n              avatarProps={avatarProps}\n            />\n          )}\n        </Nav>\n      </Wrapper>\n    );\n  },\n);\n\nexport default NavBar;\n"],"names":["NavBar","forwardRef","size","Sizes","className","direction","Directions","elevation","collapsed","preventExpand","expandedWidth","pectenArea","lockup","urlProps","header","avatarArea","avatarProps","items","topArea","onClick","startArea","endArea","defaultOpenToSelected","itemsAlignment","Alignments","expandMode","itemRender","selectedPath","onSelect","onCollapsedChange","onExpandChange","props","ref","indicatorPosition","iconPosition","type","rest","isCollapsed","setIsCollapsed","useState","lockupArea","isHovered","setIsHovered","isOpen","useMemo","useEffect","menuModeMap","handleOnExpandClick","useCallback","prev","handleOnEnter","handleOnLeave","jsxs","Wrapper","NOOP","Nav","classNames","NAV_BAR_CLASS","jsx","FirstArea","MiddleArea","StyledMenu","DividerContainer","Divider","Contrasts","Fragment","LeftNavigationSolid","LeftNavigation","LastArea"],"mappings":"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"}

package/build/cjs/components/NavBar/NavBar.styles.js

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),r=require("../../react-base/src/consts/index.js"),s=require("../../react-base/src/components/NavBar/NavBar.consts.js"),c=require("../../react-base/src/theme/types/layer.js"),g=require("../../react-base/src/components/Menu/Menu.consts.js"),f=require("../Menu/Menu.js"),p=require("../../react-base/src/consts/classes.js"),x=require("../../react-base/src/components/NavBar/utils/styleUtils.js"),d=t.styled(f)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),r=require("../../react-base/src/consts/index.js"),a=require("../../react-base/src/components/NavBar/NavBar.consts.js"),d=require("../../react-base/src/theme/types/layer.js"),g=require("../../react-base/src/components/Menu/Menu.consts.js"),f=require("../Menu/Menu.js"),p=require("../../react-base/src/consts/classes.js"),x=require("../../react-base/src/components/NavBar/utils/styleUtils.js"),u=t.styled(f)`
   ${({$itemsAlignment:e})=>t.css`
     flex: 1 1 0;
     max-height: fit-content;
     justify-content: ${x.getItemsAlignment(e)};
     overflow: hidden auto;
   `}
-`,v=(e,n,i,o)=>e===r.Directions.Vertical?n==="auto_cover"&&o?`${s.consts[i].height}px`:"auto":"100%",y=t.styled.div(({$direction:e,$expandMode:n,$size:i,$isCollapsed:o})=>t.css`
+`,v=(e,n,i,o)=>e===r.Directions.Vertical?n==="auto_cover"&&o?`${a.consts[i].height}px`:"auto":"100%",y=t.styled.div(({$direction:e,$expandMode:n,$size:i,$isCollapsed:o,$type:s})=>t.css`
     position: relative;
-    height: ${e===r.Directions.Vertical?"100%":`${s.consts[i].height}px`};
+    height: ${e===r.Directions.Vertical?"100%":`${a.consts[i].height[s]}px`};
     width: ${v(e,n,i,o)};
-  `),$=t.styled.header(({$direction:e,$elevation:n,$collapsed:i,theme:o,$expandedWidth:u,$size:a,$expandMode:h})=>{const l=o.layer({foundation:"surface"});return t.css`
+  `),$=t.styled.header(({$direction:e,$elevation:n,$collapsed:i,theme:o,$expandedWidth:s,$size:l,$expandMode:h})=>{const c=o.layer({foundation:"surface"});return t.css`
       z-index: ${r.ZIndexes.NAVBAR};
       position: ${h==="auto_cover"&&i?"absolute":"relative"};
       display: flex;
@@ -18,15 +18,15 @@
       height: 100%;
       width: 100%;
       filter: ${n?o.dropShadows.low1:null};
-      color: ${l[c.Variables.TextOnFoundationStrong]};
-      background-color: ${l[c.Variables.BackgroundFoundation]};
+      color: ${c[d.Variables.TextOnFoundationStrong]};
+      background-color: ${c[d.Variables.BackgroundFoundation]};
       transition: width 0.3s ease-out;
 
       ${e===r.Directions.Vertical&&t.css`
-        width: ${i?`${s.consts[a].height}px`:`${u}px`};
+        width: ${i?`${a.consts[l].height.default}px`:`${s}px`};
 
-        ${d} {
-          width: calc(100% + ${i?0:g.consts[a].itemListMarginLeft}px);
+        ${u} {
+          width: calc(100% + ${i?0:g.consts[l].itemListMarginLeft}px);
         }
 
         .${p.NAV_BAR_CLASS}-icon {
@@ -46,5 +46,5 @@
   `),m=t.styled.div`
   align-items: center;
   padding: 0 12px;
-`;exports.DividerContainer=m;exports.MiddleArea=w;exports.Nav=$;exports.StyledMenu=d;exports.Wrapper=y;
+`;exports.DividerContainer=m;exports.MiddleArea=w;exports.Nav=$;exports.StyledMenu=u;exports.Wrapper=y;
 //# sourceMappingURL=NavBar.styles.js.map

package/build/cjs/components/NavBar/NavBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.styles.js","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { NAV_BAR_CLASS, Directions, ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { NavBarConsts, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\nimport Menu from '../Menu/Menu';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst StyledMenu = styled(Menu)<IMenuProps & PickTransient<INavBarProps, 'itemsAlignment'>>`\n  ${({ $itemsAlignment }) => css`\n    flex: 1 1 0;\n    max-height: fit-content;\n    justify-content: ${NavBarUtils.getItemsAlignment($itemsAlignment)};\n    overflow: hidden auto;\n  `}\n`;\n\nconst getWrapperWidth = (\n  direction: INavBarPropsWithReqSize['direction'],\n  expandMode: INavBarPropsWithReqSize['expandMode'],\n  size: INavBarPropsWithReqSize['size'],\n  isCollapsed: boolean,\n): string => {\n  if (direction === Directions.Vertical) {\n    return expandMode === 'auto_cover' && isCollapsed ? `${NavBarConsts.consts[size].height}px` : 'auto';\n  }\n\n  return '100%';\n};\n\nconst Wrapper = styled.div<\n  PickTransient<INavBarPropsWithReqSize, 'direction' | 'expandMode' | 'size'> & { $isCollapsed: boolean }\n>(\n  ({ $direction, $expandMode, $size, $isCollapsed }) => css`\n    position: relative;\n    height: ${$direction === Directions.Vertical ? '100%' : `${NavBarConsts.consts[$size].height}px`};\n    width: ${getWrapperWidth($direction, $expandMode, $size, $isCollapsed)};\n  `,\n);\n\ntype NavPropsKeys = 'size' | 'direction' | 'elevation' | 'collapsed' | 'expandMode' | 'expandedWidth';\ntype NavProps = PickTransient<INavBarPropsWithReqSize, NavPropsKeys>;\n\nconst Nav = styled.header<NavProps>(\n  ({ $direction, $elevation, $collapsed, theme, $expandedWidth, $size, $expandMode }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      z-index: ${ZIndexes.NAVBAR};\n      position: ${$expandMode === 'auto_cover' && $collapsed ? 'absolute' : 'relative'};\n      display: flex;\n      flex-flow: ${$direction === Directions.Horizontal ? 'row' : 'column'} nowrap;\n      align-items: stretch;\n      height: 100%;\n      width: 100%;\n      filter: ${$elevation ? theme.dropShadows.low1 : null};\n      color: ${layer[Variables.TextOnFoundationStrong]};\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      transition: width 0.3s ease-out;\n\n      ${$direction === Directions.Vertical &&\n      css`\n        width: ${$collapsed ? `${NavBarConsts.consts[$size].height}px` : `${$expandedWidth}px`};\n\n        ${StyledMenu} {\n          width: calc(100% + ${$collapsed ? 0 : MenuConsts.consts[$size].itemListMarginLeft}px);\n        }\n\n        .${NAV_BAR_CLASS}-icon {\n          transform: rotate(${$collapsed ? 0 : 180}deg);\n        }\n      `}\n    `;\n  },\n);\n\nconst MiddleArea = styled.div<PickTransient<INavBarProps, 'direction' | 'collapsed'>>(\n  ({ $direction, $collapsed }) => css`\n    position: relative;\n    display: flex;\n    flex-shrink: ${$collapsed ? 0 : 1};\n    flex-grow: 1;\n    flex-direction: ${$direction === Directions.Horizontal ? 'row' : 'column'};\n    align-items: stretch;\n    min-width: 0;\n    z-index: 1;\n    overflow: hidden auto;\n  `,\n);\n\nconst DividerContainer = styled.div`\n  align-items: center;\n  padding: 0 12px;\n`;\n\nexport { Wrapper, Nav, MiddleArea, StyledMenu, DividerContainer };\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","NavBarUtils.getItemsAlignment","getWrapperWidth","direction","expandMode","size","isCollapsed","Directions","NavBarConsts.consts","Wrapper","$direction","$expandMode","$size","$isCollapsed","Nav","$elevation","$collapsed","theme","$expandedWidth","layer","ZIndexes","Variables","MenuConsts.consts","NAV_BAR_CLASS","MiddleArea","DividerContainer"],"mappings":"yhBAWMA,EAAaC,EAAAA,OAAOC,CAAI;AAAA,IAC1B,CAAC,CAAE,gBAAAC,CAAA,IAAsBC,EAAAA;AAAAA;AAAAA;AAAAA,uBAGNC,EAAAA,kBAA8BF,CAAe,CAAC;AAAA;AAAA,GAElE;AAAA,EAGGG,EAAkB,CACtBC,EACAC,EACAC,EACAC,IAEIH,IAAcI,EAAAA,WAAW,SACpBH,IAAe,cAAgBE,EAAc,GAAGE,SAAoBH,CAAI,EAAE,MAAM,KAAO,OAGzF,OAGHI,EAAUZ,EAAAA,OAAO,IAGrB,CAAC,CAAE,WAAAa,EAAY,YAAAC,EAAa,MAAAC,EAAO,aAAAC,KAAmBb,EAAAA;AAAAA;AAAAA,cAE1CU,IAAeH,EAAAA,WAAW,SAAW,OAAS,GAAGC,EAAAA,OAAoBI,CAAK,EAAE,MAAM,IAAI;AAAA,aACvFV,EAAgBQ,EAAYC,EAAaC,EAAOC,CAAY,CAAC;AAAA,GAE1E,EAKMC,EAAMjB,EAAAA,OAAO,OACjB,CAAC,CAAE,WAAAa,EAAY,WAAAK,EAAY,WAAAC,EAAY,MAAAC,EAAO,eAAAC,EAAgB,MAAAN,EAAO,YAAAD,KAAkB,CACrF,MAAMQ,EAAQF,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOjB,EAAAA;AAAAA,iBACMoB,EAAAA,SAAS,MAAM;AAAA,kBACdT,IAAgB,cAAgBK,EAAa,WAAa,UAAU;AAAA;AAAA,mBAEnEN,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAI1DQ,EAAaE,EAAM,YAAY,KAAO,IAAI;AAAA,eAC3CE,EAAME,YAAU,sBAAsB,CAAC;AAAA,0BAC5BF,EAAME,YAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGvDX,IAAeH,aAAW,UAC5BP,EAAAA;AAAAA,iBACWgB,EAAa,GAAGR,EAAAA,OAAoBI,CAAK,EAAE,MAAM,KAAO,GAAGM,CAAc,IAAI;AAAA;AAAA,UAEpFtB,CAAU;AAAA,+BACWoB,EAAa,EAAIM,EAAAA,OAAkBV,CAAK,EAAE,kBAAkB;AAAA;AAAA;AAAA,WAGhFW,eAAa;AAAA,8BACMP,EAAa,EAAI,GAAG;AAAA;AAAA,OAE3C;AAAA,KAEL,CACF,EAEMQ,EAAa3B,EAAAA,OAAO,IACxB,CAAC,CAAE,WAAAa,EAAY,WAAAM,CAAA,IAAiBhB,EAAAA;AAAAA;AAAAA;AAAAA,mBAGfgB,EAAa,EAAI,CAAC;AAAA;AAAA,sBAEfN,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAM7E,EAEMkB,EAAmB5B,EAAAA,OAAO;AAAA;AAAA;AAAA"}
+{"version":3,"file":"NavBar.styles.js","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { NAV_BAR_CLASS, Directions, ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { NavBarConsts, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\nimport Menu from '../Menu/Menu';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst StyledMenu = styled(Menu)<IMenuProps & PickTransient<INavBarProps, 'itemsAlignment'>>`\n  ${({ $itemsAlignment }) => css`\n    flex: 1 1 0;\n    max-height: fit-content;\n    justify-content: ${NavBarUtils.getItemsAlignment($itemsAlignment)};\n    overflow: hidden auto;\n  `}\n`;\n\nconst getWrapperWidth = (\n  direction: INavBarPropsWithReqSize['direction'],\n  expandMode: INavBarPropsWithReqSize['expandMode'],\n  size: INavBarPropsWithReqSize['size'],\n  isCollapsed: boolean,\n): string => {\n  if (direction === Directions.Vertical) {\n    return expandMode === 'auto_cover' && isCollapsed ? `${NavBarConsts.consts[size].height}px` : 'auto';\n  }\n\n  return '100%';\n};\n\nconst Wrapper = styled.div<\n  PickTransient<INavBarPropsWithReqSize, 'direction' | 'expandMode' | 'size'> & {\n    $isCollapsed: boolean;\n    $type: 'default' | 'mobile';\n  }\n>(\n  ({ $direction, $expandMode, $size, $isCollapsed, $type }) => css`\n    position: relative;\n    height: ${$direction === Directions.Vertical ? '100%' : `${NavBarConsts.consts[$size].height[$type]}px`};\n    width: ${getWrapperWidth($direction, $expandMode, $size, $isCollapsed)};\n  `,\n);\n\ntype NavPropsKeys = 'size' | 'direction' | 'elevation' | 'collapsed' | 'expandMode' | 'expandedWidth';\ntype NavProps = PickTransient<INavBarPropsWithReqSize, NavPropsKeys>;\n\nconst Nav = styled.header<NavProps>(\n  ({ $direction, $elevation, $collapsed, theme, $expandedWidth, $size, $expandMode }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      z-index: ${ZIndexes.NAVBAR};\n      position: ${$expandMode === 'auto_cover' && $collapsed ? 'absolute' : 'relative'};\n      display: flex;\n      flex-flow: ${$direction === Directions.Horizontal ? 'row' : 'column'} nowrap;\n      align-items: stretch;\n      height: 100%;\n      width: 100%;\n      filter: ${$elevation ? theme.dropShadows.low1 : null};\n      color: ${layer[Variables.TextOnFoundationStrong]};\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      transition: width 0.3s ease-out;\n\n      ${$direction === Directions.Vertical &&\n      css`\n        width: ${$collapsed ? `${NavBarConsts.consts[$size].height.default}px` : `${$expandedWidth}px`};\n\n        ${StyledMenu} {\n          width: calc(100% + ${$collapsed ? 0 : MenuConsts.consts[$size].itemListMarginLeft}px);\n        }\n\n        .${NAV_BAR_CLASS}-icon {\n          transform: rotate(${$collapsed ? 0 : 180}deg);\n        }\n      `}\n    `;\n  },\n);\n\nconst MiddleArea = styled.div<PickTransient<INavBarProps, 'direction' | 'collapsed'>>(\n  ({ $direction, $collapsed }) => css`\n    position: relative;\n    display: flex;\n    flex-shrink: ${$collapsed ? 0 : 1};\n    flex-grow: 1;\n    flex-direction: ${$direction === Directions.Horizontal ? 'row' : 'column'};\n    align-items: stretch;\n    min-width: 0;\n    z-index: 1;\n    overflow: hidden auto;\n  `,\n);\n\nconst DividerContainer = styled.div`\n  align-items: center;\n  padding: 0 12px;\n`;\n\nexport { Wrapper, Nav, MiddleArea, StyledMenu, DividerContainer };\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","NavBarUtils.getItemsAlignment","getWrapperWidth","direction","expandMode","size","isCollapsed","Directions","NavBarConsts.consts","Wrapper","$direction","$expandMode","$size","$isCollapsed","$type","Nav","$elevation","$collapsed","theme","$expandedWidth","layer","ZIndexes","Variables","MenuConsts.consts","NAV_BAR_CLASS","MiddleArea","DividerContainer"],"mappings":"yhBAWMA,EAAaC,EAAAA,OAAOC,CAAI;AAAA,IAC1B,CAAC,CAAE,gBAAAC,CAAA,IAAsBC,EAAAA;AAAAA;AAAAA;AAAAA,uBAGNC,EAAAA,kBAA8BF,CAAe,CAAC;AAAA;AAAA,GAElE;AAAA,EAGGG,EAAkB,CACtBC,EACAC,EACAC,EACAC,IAEIH,IAAcI,EAAAA,WAAW,SACpBH,IAAe,cAAgBE,EAAc,GAAGE,SAAoBH,CAAI,EAAE,MAAM,KAAO,OAGzF,OAGHI,EAAUZ,EAAAA,OAAO,IAMrB,CAAC,CAAE,WAAAa,EAAY,YAAAC,EAAa,MAAAC,EAAO,aAAAC,EAAc,MAAAC,KAAYd,EAAAA;AAAAA;AAAAA,cAEjDU,IAAeH,EAAAA,WAAW,SAAW,OAAS,GAAGC,SAAoBI,CAAK,EAAE,OAAOE,CAAK,CAAC,IAAI;AAAA,aAC9FZ,EAAgBQ,EAAYC,EAAaC,EAAOC,CAAY,CAAC;AAAA,GAE1E,EAKME,EAAMlB,EAAAA,OAAO,OACjB,CAAC,CAAE,WAAAa,EAAY,WAAAM,EAAY,WAAAC,EAAY,MAAAC,EAAO,eAAAC,EAAgB,MAAAP,EAAO,YAAAD,KAAkB,CACrF,MAAMS,EAAQF,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOlB,EAAAA;AAAAA,iBACMqB,EAAAA,SAAS,MAAM;AAAA,kBACdV,IAAgB,cAAgBM,EAAa,WAAa,UAAU;AAAA;AAAA,mBAEnEP,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAI1DS,EAAaE,EAAM,YAAY,KAAO,IAAI;AAAA,eAC3CE,EAAME,YAAU,sBAAsB,CAAC;AAAA,0BAC5BF,EAAME,YAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGvDZ,IAAeH,aAAW,UAC5BP,EAAAA;AAAAA,iBACWiB,EAAa,GAAGT,EAAAA,OAAoBI,CAAK,EAAE,OAAO,OAAO,KAAO,GAAGO,CAAc,IAAI;AAAA;AAAA,UAE5FvB,CAAU;AAAA,+BACWqB,EAAa,EAAIM,EAAAA,OAAkBX,CAAK,EAAE,kBAAkB;AAAA;AAAA;AAAA,WAGhFY,eAAa;AAAA,8BACMP,EAAa,EAAI,GAAG;AAAA;AAAA,OAE3C;AAAA,KAEL,CACF,EAEMQ,EAAa5B,EAAAA,OAAO,IACxB,CAAC,CAAE,WAAAa,EAAY,WAAAO,CAAA,IAAiBjB,EAAAA;AAAAA;AAAAA;AAAAA,mBAGfiB,EAAa,EAAI,CAAC;AAAA;AAAA,sBAEfP,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAM7E,EAEMmB,EAAmB7B,EAAAA,OAAO;AAAA;AAAA;AAAA"}

package/build/cjs/components/NavBar/NavBarMobile.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),n=require("./NavBar.js"),r=n,i=({indicatorPosition:o="bottom",...t})=>e.jsx(r,{...t,indicatorPosition:o,iconPosition:"top",direction:"horizontal",lockup:"none",type:"mobile"});module.exports=i;
+//# sourceMappingURL=NavBarMobile.js.map

package/build/cjs/components/NavBar/NavBarMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarMobile.js","sources":["../../../../src/components/NavBar/NavBarMobile.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport NavBar from './NavBar';\nimport type { INavBarProps, INavbarMobileProps, INavBarPropsImpl } from './NavBar.types';\n\nconst NavbarInternal = NavBar as FC<INavBarPropsImpl & INavBarProps>;\n\nconst NavBarMobile: FC<INavbarMobileProps> = ({ indicatorPosition = 'bottom', ...navbarProps }) => {\n  return (\n    <NavbarInternal\n      {...navbarProps}\n      indicatorPosition={indicatorPosition}\n      iconPosition=\"top\"\n      direction=\"horizontal\"\n      lockup=\"none\"\n      type=\"mobile\"\n    />\n  );\n};\n\nexport default NavBarMobile;\n"],"names":["NavbarInternal","NavBar","NavBarMobile","indicatorPosition","navbarProps","jsx"],"mappings":"2EAKMA,EAAiBC,EAEjBC,EAAuC,CAAC,CAAE,kBAAAC,EAAoB,SAAU,GAAGC,KAE7EC,EAAAA,IAACL,EAAA,CACE,GAAGI,EACJ,kBAAAD,EACA,aAAa,MACb,UAAU,aACV,OAAO,OACP,KAAK,QAAA,CAAA"}

package/build/cjs/components/NavBar/NavBarVerticalStatic.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),m=require("classnames"),i=require("../../react-base/src/consts/index.js"),a=require("../../react-base/src/components/NavBar/NavBarVerticalStatic.consts.js"),N=require("./components/LastArea/LastArea.js"),A=require("../Pecten/Pecten.js"),s=require("./NavBarVerticalStatic.styles.js"),v=require("../../react-base/src/consts/classes.js"),h=p.forwardRef(({size:r=`${i.Sizes.Medium}`,className:o,urlProps:l,avatarArea:t,avatarProps:n,items:c,startArea:u,endArea:d,selectedPath:x,onSelect:q,...S},j)=>e.jsx(s.Wrapper,{children:e.jsxs(s.Nav,{as:"nav",$size:r,className:m(v.NAV_BAR_CLASS,o),ref:j,...S,children:[e.jsx(s.PectenUrlWrapper,{rel:"noopener noreferrer",tabIndex:-1,...l,$size:r,children:e.jsx(A,{size:a.consts[r].pectenSize})}),u,e.jsx(s.MiddleArea,{children:c&&e.jsx(s.StyledMenu,{items:c,$itemsAlignment:i.Alignments.Center,mode:"vertical",selectedPath:x,onSelect:q,size:r,iconPosition:"top"})}),d,(!!t||!!n)&&e.jsx(N,{size:a.consts[r].avatarSize,collapsed:!0,avatarArea:t,avatarProps:n})]})}));module.exports=h;
+//# sourceMappingURL=NavBarVerticalStatic.js.map

package/build/cjs/components/NavBar/NavBarVerticalStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarVerticalStatic.js","sources":["../../../../src/components/NavBar/NavBarVerticalStatic.tsx"],"sourcesContent":["import { forwardRef, type ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport { NAV_BAR_CLASS, Sizes, Alignments } from 'acinguiux-ds-react-base/consts';\nimport { NavBarVerticalStaticConsts } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport LastArea from './components/LastArea/LastArea';\nimport Pecten from '../Pecten/Pecten';\nimport { Wrapper, MiddleArea, Nav, StyledMenu, PectenUrlWrapper } from './NavBarVerticalStatic.styles';\nimport { INavbarVerticalStaticProps } from './NavBar.types';\n\nconst NavBarVerticalStatic = forwardRef<HTMLElement, INavbarVerticalStaticProps>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      className,\n      urlProps,\n      avatarArea,\n      avatarProps,\n      items,\n      startArea,\n      endArea,\n      selectedPath,\n      onSelect,\n      ...rest\n    },\n    ref,\n  ): ReactElement => (\n    <Wrapper>\n      <Nav as=\"nav\" $size={size} className={classNames(NAV_BAR_CLASS, className)} ref={ref} {...rest}>\n        <PectenUrlWrapper rel=\"noopener noreferrer\" tabIndex={-1} {...urlProps} $size={size}>\n          <Pecten size={NavBarVerticalStaticConsts.consts[size].pectenSize} />\n        </PectenUrlWrapper>\n        {startArea}\n        <MiddleArea>\n          {items && (\n            <StyledMenu\n              items={items}\n              $itemsAlignment={Alignments.Center}\n              mode=\"vertical\"\n              selectedPath={selectedPath}\n              onSelect={onSelect}\n              size={size}\n              iconPosition=\"top\"\n            />\n          )}\n        </MiddleArea>\n        {endArea}\n        {(!!avatarArea || !!avatarProps) && (\n          <LastArea\n            size={NavBarVerticalStaticConsts.consts[size].avatarSize}\n            collapsed={true}\n            avatarArea={avatarArea}\n            avatarProps={avatarProps}\n          />\n        )}\n      </Nav>\n    </Wrapper>\n  ),\n);\n\nexport default NavBarVerticalStatic;\n"],"names":["NavBarVerticalStatic","forwardRef","size","Sizes","className","urlProps","avatarArea","avatarProps","items","startArea","endArea","selectedPath","onSelect","rest","ref","jsx","Wrapper","jsxs","Nav","classNames","NAV_BAR_CLASS","PectenUrlWrapper","Pecten","NavBarVerticalStaticConsts.consts","MiddleArea","StyledMenu","Alignments","LastArea"],"mappings":"oZAWMA,EAAuBC,EAAAA,WAC3B,CACE,CACE,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,UAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,aAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,IAEAC,EAAAA,IAACC,UAAA,CACC,SAAAC,OAACC,EAAAA,KAAI,GAAG,MAAM,MAAOhB,EAAM,UAAWiB,EAAWC,EAAAA,cAAehB,CAAS,EAAG,IAAAU,EAAW,GAAGD,EACxF,SAAA,CAAAE,MAACM,EAAAA,kBAAiB,IAAI,sBAAsB,SAAU,GAAK,GAAGhB,EAAU,MAAOH,EAC7E,SAAAa,EAAAA,IAACO,GAAO,KAAMC,EAAAA,OAAkCrB,CAAI,EAAE,WAAY,EACpE,EACCO,EACDM,EAAAA,IAACS,EAAAA,YACE,SAAAhB,GACCO,EAAAA,IAACU,EAAAA,WAAA,CACC,MAAAjB,EACA,gBAAiBkB,EAAAA,WAAW,OAC5B,KAAK,WACL,aAAAf,EACA,SAAAC,EACA,KAAAV,EACA,aAAa,KAAA,CAAA,EAGnB,EACCQ,GACC,CAAC,CAACJ,GAAc,CAAC,CAACC,IAClBQ,EAAAA,IAACY,EAAA,CACC,KAAMJ,EAAAA,OAAkCrB,CAAI,EAAE,WAC9C,UAAW,GACX,WAAAI,EACA,YAAAC,CAAA,CAAA,CACF,CAAA,CAEJ,CAAA,CACF,CAEJ"}

package/build/cjs/components/NavBar/NavBarVerticalStatic.styles.js

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),c=require("../../react-base/src/consts/index.js"),n=require("../../react-base/src/components/NavBar/NavBarVerticalStatic.consts.js"),s=require("../../react-base/src/theme/types/layer.js"),u=require("../Menu/Menu.js"),l=require("./components/LastArea/LastArea.styles.js"),p=require("../../react-base/src/components/NavBar/utils/styleUtils.js"),a=require("../../react-base/src/consts/classes.js"),d=e.styled(u)`
+  ${({$itemsAlignment:t})=>e.css`
+    flex: 1 1 0;
+    max-height: fit-content;
+    justify-content: ${p.getItemsAlignment(t)};
+    overflow: hidden auto;
+
+    .${a.MENU_CLASS}-label {
+      gap: 2px;
+      padding: 6px 4px;
+    }
+
+    .${a.MENU_CLASS}-label-text {
+      font-size: 10px;
+    }
+  `}
+`,h=e.styled.div`
+  position: relative;
+  height: 100%;
+  width: auto;
+`,x=e.styled.header(({$elevation:t,theme:i,$size:r})=>{const o=i.layer({foundation:"surface"});return e.css`
+    z-index: ${c.ZIndexes.NAVBAR};
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+    height: 100%;
+    width: ${n.consts[r].width}px;
+    filter: ${t?i.dropShadows.low1:null};
+    color: ${o[s.Variables.TextOnFoundationStrong]};
+    background-color: ${o[s.Variables.BackgroundFoundation]};
+    transition: width 0.3s ease-out;
+
+    ${d} {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    ${l.Area} {
+      height: ${n.consts[r].width}px;
+    }
+
+    ${l.StyledAvatar} {
+      justify-content: center;
+      margin-right: 0;
+    }
+  `}),f=e.styled.div`
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 0;
+  z-index: 1;
+  overflow: hidden auto;
+`,g=e.styled.a`
+  display: flex;
+  text-decoration: none;
+  cursor: pointer;
+  padding: ${({$size:t})=>(n.consts[t].width-n.consts[t].pectenSize)/2}px;
+`;exports.MiddleArea=f;exports.Nav=x;exports.PectenUrlWrapper=g;exports.StyledMenu=d;exports.Wrapper=h;
+//# sourceMappingURL=NavBarVerticalStatic.styles.js.map

package/build/cjs/components/NavBar/NavBarVerticalStatic.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarVerticalStatic.styles.js","sources":["../../../../src/components/NavBar/NavBarVerticalStatic.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { MENU_CLASS, ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { NavBarVerticalStaticConsts, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\nimport Menu from '../Menu/Menu';\nimport type { IMenuProps } from '../Menu/Menu.types';\nimport { Area, StyledAvatar } from './components/LastArea/LastArea.styles';\n\nconst StyledMenu = styled(Menu)<IMenuProps & PickTransient<INavBarProps, 'itemsAlignment'>>`\n  ${({ $itemsAlignment }) => css`\n    flex: 1 1 0;\n    max-height: fit-content;\n    justify-content: ${NavBarUtils.getItemsAlignment($itemsAlignment)};\n    overflow: hidden auto;\n\n    .${MENU_CLASS}-label {\n      gap: 2px;\n      padding: 6px 4px;\n    }\n\n    .${MENU_CLASS}-label-text {\n      font-size: 10px;\n    }\n  `}\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  height: 100%;\n  width: auto;\n`;\n\ntype NavProps = PickTransient<INavBarPropsWithReqSize, 'size' | 'elevation'>;\n\nconst Nav = styled.header<NavProps>(({ $elevation, theme, $size }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return css`\n    z-index: ${ZIndexes.NAVBAR};\n    position: relative;\n    display: flex;\n    flex-flow: column nowrap;\n    align-items: stretch;\n    height: 100%;\n    width: ${NavBarVerticalStaticConsts.consts[$size].width}px;\n    filter: ${$elevation ? theme.dropShadows.low1 : null};\n    color: ${layer[Variables.TextOnFoundationStrong]};\n    background-color: ${layer[Variables.BackgroundFoundation]};\n    transition: width 0.3s ease-out;\n\n    ${StyledMenu} {\n      width: 100%;\n      margin-left: 0;\n    }\n\n    ${Area} {\n      height: ${NavBarVerticalStaticConsts.consts[$size].width}px;\n    }\n\n    ${StyledAvatar} {\n      justify-content: center;\n      margin-right: 0;\n    }\n  `;\n});\n\nconst MiddleArea = styled.div`\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: stretch;\n  min-width: 0;\n  z-index: 1;\n  overflow: hidden auto;\n`;\n\nconst PectenUrlWrapper = styled.a<PickTransient<INavBarPropsWithReqSize, 'size'>>`\n  display: flex;\n  text-decoration: none;\n  cursor: pointer;\n  padding: ${({ $size }) =>\n    (NavBarVerticalStaticConsts.consts[$size].width - NavBarVerticalStaticConsts.consts[$size].pectenSize) / 2}px;\n`;\n\nexport { Wrapper, Nav, MiddleArea, StyledMenu, PectenUrlWrapper };\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","NavBarUtils.getItemsAlignment","MENU_CLASS","Wrapper","Nav","$elevation","theme","$size","layer","ZIndexes","NavBarVerticalStaticConsts.consts","Variables","Area","StyledAvatar","MiddleArea","PectenUrlWrapper"],"mappings":"4hBAWMA,EAAaC,EAAAA,OAAOC,CAAI;AAAA,IAC1B,CAAC,CAAE,gBAAAC,CAAA,IAAsBC,EAAAA;AAAAA;AAAAA;AAAAA,uBAGNC,EAAAA,kBAA8BF,CAAe,CAAC;AAAA;AAAA;AAAA,OAG9DG,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,OAKVA,YAAU;AAAA;AAAA;AAAA,GAGd;AAAA,EAGGC,EAAUN,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAQjBO,EAAMP,EAAAA,OAAO,OAAiB,CAAC,CAAE,WAAAQ,EAAY,MAAAC,EAAO,MAAAC,KAAY,CACpE,MAAMC,EAAQF,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAON,EAAAA;AAAAA,eACMS,EAAAA,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjBC,EAAAA,OAAkCH,CAAK,EAAE,KAAK;AAAA,cAC7CF,EAAaC,EAAM,YAAY,KAAO,IAAI;AAAA,aAC3CE,EAAMG,YAAU,sBAAsB,CAAC;AAAA,wBAC5BH,EAAMG,YAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,MAGvDf,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKVgB,MAAI;AAAA,gBACMF,EAAAA,OAAkCH,CAAK,EAAE,KAAK;AAAA;AAAA;AAAA,MAGxDM,cAAY;AAAA;AAAA;AAAA;AAAA,GAKlB,CAAC,EAEKC,EAAajB,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYpBkB,EAAmBlB,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,aAInB,CAAC,CAAE,MAAAU,MACXG,EAAAA,OAAkCH,CAAK,EAAE,MAAQG,SAAkCH,CAAK,EAAE,YAAc,CAAC;AAAA"}

package/build/cjs/components/NavBar/components/FirstArea/FirstArea.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),r=require("../../../../react-base/src/consts/index.js"),j=require("../../../../react-base/src/components/NavBar/NavBar.consts.js"),n=require("./FirstArea.styles.js"),C=require("../../../Text/components/Label/Label.js"),l=require("../../../Popover/Popover.js"),x=require("../../../../react-base/src/components/NavBar/utils/firstAreaUtils.js"),S=({header:s,content:o})=>x.isHeader(s)&&s.popoverContent?e.jsxs(l.Popover,{children:[e.jsx(l.PopoverTrigger,{asChild:!0,children:o}),e.jsx(l.PopoverContent,{padding:!1,align:"start",side:"bottom",children:s.popoverContent})]}):o,b=({pectenArea:s,lockup:o,urlProps:c,onClick:p,header:t,collapsed:u,size:i=r.Sizes.Medium})=>{const a=o??s,d=e.jsxs(n.Header,{onClick:p,$size:i,children:[a==="default"?e.jsx(n.HeaderPecten,{size:j.consts[i].pectenSize}):a,x.isHeader(t)?e.jsxs(n.LockupContent,{$collapsed:u,children:[!!t.description&&i!==r.Sizes.XSmall&&e.jsx(n.DescriptionLabel,{contrast:r.Contrasts.Subtle,size:r.Sizes.Small,bold:!0,children:t.description}),e.jsxs(n.TitleContainer,{$size:i,children:[!!t.title&&e.jsx(C,{contrast:r.Contrasts.Strong,size:r.Sizes.Large,bold:!0,children:t.title}),!!t.icon&&e.jsx(n.IconContainer,{children:t.icon})]})]}):t]});return e.jsx(n.Area,{size:i,children:c!=null&&c.href?e.jsx(n.HeaderPectenUrlWrapper,{rel:"noopener noreferrer",tabIndex:-1,...c,children:d}):e.jsx(S,{header:t,content:d})})};module.exports=b;
+"use strict";const e=require("react/jsx-runtime"),s=require("../../../../react-base/src/consts/index.js"),j=require("../../../../react-base/src/components/NavBar/NavBar.consts.js"),t=require("./FirstArea.styles.js"),C=require("../../../Text/components/Label/Label.js"),c=require("../../../Popover/Popover.js"),d=require("../../../../react-base/src/components/NavBar/utils/firstAreaUtils.js"),S=({header:n,content:i})=>d.isHeader(n)&&n.popoverContent?e.jsxs(c.Popover,{children:[e.jsx(c.PopoverTrigger,{asChild:!0,children:i}),e.jsx(c.PopoverContent,{padding:!1,align:"start",side:"bottom",children:n.popoverContent})]}):i,b=({pectenArea:n,lockup:i,urlProps:l,onClick:u,header:r,collapsed:x,size:o=s.Sizes.Medium})=>{const a=i??n,p=e.jsxs(t.Header,{onClick:u,$size:o,children:[a==="default"?e.jsx(t.HeaderPecten,{size:j.consts[o].pectenSize}):a,d.isHeader(r)?e.jsxs(t.LockupContent,{$collapsed:x,children:[!!r.description&&o!==s.Sizes.XSmall&&e.jsx(t.DescriptionLabel,{contrast:s.Contrasts.Subtle,size:s.Sizes.Small,bold:!0,children:r.description}),e.jsxs(t.TitleContainer,{$size:o,children:[!!r.title&&e.jsx(C,{contrast:s.Contrasts.Strong,size:s.Sizes.Large,bold:!0,children:r.title}),!!r.icon&&e.jsx(t.IconContainer,{children:r.icon})]})]}):r]});return e.jsx(t.Area,{size:o,children:l?.href?e.jsx(t.HeaderPectenUrlWrapper,{rel:"noopener noreferrer",tabIndex:-1,...l,children:p}):e.jsx(S,{header:r,content:p})})};module.exports=b;
 //# sourceMappingURL=FirstArea.js.map

package/build/cjs/components/NavBar/components/FirstArea/FirstArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FirstArea.js","sources":["../../../../../../src/components/NavBar/components/FirstArea/FirstArea.tsx"],"sourcesContent":["import { Contrasts, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { NavBarConsts, type NavBarTypes, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport * as Styled from './FirstArea.styles';\nimport Label from '../../../Text/components/Label/Label';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\n\nconst MaybePopover = ({\n  header,\n  content,\n}: {\n  header: NavBarTypes.IFirstAreaProps['header'];\n  content: React.ReactNode;\n}) => {\n  if (NavBarUtils.isHeader(header) && header.popoverContent) {\n    return (\n      <Popover>\n        <PopoverTrigger asChild={true}>{content}</PopoverTrigger>\n        <PopoverContent padding={false} align=\"start\" side=\"bottom\">\n          {header.popoverContent}\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return content;\n};\n\nconst FirstArea = ({\n  pectenArea,\n  lockup,\n  urlProps,\n  onClick,\n  header,\n  collapsed,\n  size = Sizes.Medium,\n}: NavBarTypes.IFirstAreaProps) => {\n  const lockupArea = lockup ?? pectenArea;\n  const content = (\n    <Styled.Header onClick={onClick} $size={size}>\n      {lockupArea === 'default' ? <Styled.HeaderPecten size={NavBarConsts.consts[size].pectenSize} /> : lockupArea}\n      {NavBarUtils.isHeader(header) ? (\n        <Styled.LockupContent $collapsed={collapsed}>\n          {!!header.description && size !== Sizes.XSmall && (\n            <Styled.DescriptionLabel contrast={Contrasts.Subtle} size={Sizes.Small} bold={true}>\n              {header.description}\n            </Styled.DescriptionLabel>\n          )}\n          <Styled.TitleContainer $size={size}>\n            {!!header.title && (\n              <Label contrast={Contrasts.Strong} size={Sizes.Large} bold={true}>\n                {header.title}\n              </Label>\n            )}\n            {!!header.icon && <Styled.IconContainer>{header.icon}</Styled.IconContainer>}\n          </Styled.TitleContainer>\n        </Styled.LockupContent>\n      ) : (\n        header\n      )}\n    </Styled.Header>\n  );\n\n  return (\n    <Styled.Area size={size}>\n      {urlProps?.href ? (\n        <Styled.HeaderPectenUrlWrapper rel=\"noopener noreferrer\" tabIndex={-1} {...urlProps}>\n          {content}\n        </Styled.HeaderPectenUrlWrapper>\n      ) : (\n        <MaybePopover header={header} content={content} />\n      )}\n    </Styled.Area>\n  );\n};\n\nexport default FirstArea;\n"],"names":["MaybePopover","header","content","NavBarUtils.isHeader","Popover","jsx","PopoverTrigger","PopoverContent","FirstArea","pectenArea","lockup","urlProps","onClick","collapsed","size","Sizes","lockupArea","jsxs","Styled.Header","Styled.HeaderPecten","NavBarConsts.consts","Styled.LockupContent","Styled.DescriptionLabel","Contrasts","Styled.TitleContainer","Label","Styled.IconContainer","Styled.Area","Styled.HeaderPectenUrlWrapper"],"mappings":"wYAOMA,EAAe,CAAC,CACpB,OAAAC,EACA,QAAAC,CACF,IAIMC,WAAqBF,CAAM,GAAKA,EAAO,sBAEtCG,UAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CAAe,QAAS,GAAO,SAAAJ,EAAQ,EACxCG,EAAAA,IAACE,EAAAA,gBAAe,QAAS,GAAO,MAAM,QAAQ,KAAK,SAChD,SAAAN,EAAO,cAAA,CACV,CAAA,EACF,EAIGC,EAGHM,EAAY,CAAC,CACjB,WAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAX,EACA,UAAAY,EACA,KAAAC,EAAOC,EAAAA,MAAM,MACf,IAAmC,CACjC,MAAMC,EAAaN,GAAUD,EACvBP,EACJe,EAAAA,KAACC,EAAAA,OAAA,CAAc,QAAAN,EAAkB,MAAOE,EACrC,SAAA,CAAAE,IAAe,UAAYX,MAACc,EAAAA,aAAA,CAAoB,KAAMC,EAAAA,OAAoBN,CAAI,EAAE,UAAA,CAAY,EAAKE,EACjGb,EAAAA,SAAqBF,CAAM,SACzBoB,EAAAA,cAAA,CAAqB,WAAYR,EAC/B,SAAA,CAAA,CAAC,CAACZ,EAAO,aAAea,IAASC,EAAAA,MAAM,cACrCO,EAAAA,iBAAA,CAAwB,SAAUC,EAAAA,UAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GAC3E,WAAO,YACV,EAEFE,EAAAA,KAACO,EAAAA,eAAA,CAAsB,MAAOV,EAC3B,SAAA,CAAA,CAAC,CAACb,EAAO,OACRI,EAAAA,IAACoB,GAAM,SAAUF,YAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GACzD,WAAO,MACV,EAED,CAAC,CAACd,EAAO,YAASyB,EAAAA,cAAA,CAAsB,SAAAzB,EAAO,IAAA,CAAK,CAAA,CAAA,CACvD,CAAA,CAAA,CACF,EAEAA,CAAA,EAEJ,EAGF,OACEI,MAACsB,EAAAA,KAAA,CAAY,KAAAb,EACV,SAAAH,GAAA,MAAAA,EAAU,KACTN,EAAAA,IAACuB,yBAAA,CAA8B,IAAI,sBAAsB,SAAU,GAAK,GAAGjB,EACxE,SAAAT,CAAA,CACH,EAEAG,MAACL,EAAA,CAAa,OAAAC,EAAgB,QAAAC,CAAA,CAAkB,CAAA,CAEpD,CAEJ"}
+{"version":3,"file":"FirstArea.js","sources":["../../../../../../src/components/NavBar/components/FirstArea/FirstArea.tsx"],"sourcesContent":["import { Contrasts, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { NavBarConsts, type NavBarTypes, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport * as Styled from './FirstArea.styles';\nimport Label from '../../../Text/components/Label/Label';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\n\nconst MaybePopover = ({\n  header,\n  content,\n}: {\n  header: NavBarTypes.IFirstAreaProps['header'];\n  content: React.ReactNode;\n}) => {\n  if (NavBarUtils.isHeader(header) && header.popoverContent) {\n    return (\n      <Popover>\n        <PopoverTrigger asChild={true}>{content}</PopoverTrigger>\n        <PopoverContent padding={false} align=\"start\" side=\"bottom\">\n          {header.popoverContent}\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return content;\n};\n\nconst FirstArea = ({\n  pectenArea,\n  lockup,\n  urlProps,\n  onClick,\n  header,\n  collapsed,\n  size = Sizes.Medium,\n}: NavBarTypes.IFirstAreaProps) => {\n  const lockupArea = lockup ?? pectenArea;\n  const content = (\n    <Styled.Header onClick={onClick} $size={size}>\n      {lockupArea === 'default' ? <Styled.HeaderPecten size={NavBarConsts.consts[size].pectenSize} /> : lockupArea}\n      {NavBarUtils.isHeader(header) ? (\n        <Styled.LockupContent $collapsed={collapsed}>\n          {!!header.description && size !== Sizes.XSmall && (\n            <Styled.DescriptionLabel contrast={Contrasts.Subtle} size={Sizes.Small} bold={true}>\n              {header.description}\n            </Styled.DescriptionLabel>\n          )}\n          <Styled.TitleContainer $size={size}>\n            {!!header.title && (\n              <Label contrast={Contrasts.Strong} size={Sizes.Large} bold={true}>\n                {header.title}\n              </Label>\n            )}\n            {!!header.icon && <Styled.IconContainer>{header.icon}</Styled.IconContainer>}\n          </Styled.TitleContainer>\n        </Styled.LockupContent>\n      ) : (\n        header\n      )}\n    </Styled.Header>\n  );\n\n  return (\n    <Styled.Area size={size}>\n      {urlProps?.href ? (\n        <Styled.HeaderPectenUrlWrapper rel=\"noopener noreferrer\" tabIndex={-1} {...urlProps}>\n          {content}\n        </Styled.HeaderPectenUrlWrapper>\n      ) : (\n        <MaybePopover header={header} content={content} />\n      )}\n    </Styled.Area>\n  );\n};\n\nexport default FirstArea;\n"],"names":["MaybePopover","header","content","NavBarUtils.isHeader","Popover","jsx","PopoverTrigger","PopoverContent","FirstArea","pectenArea","lockup","urlProps","onClick","collapsed","size","Sizes","lockupArea","jsxs","Styled.Header","Styled.HeaderPecten","NavBarConsts.consts","Styled.LockupContent","Styled.DescriptionLabel","Contrasts","Styled.TitleContainer","Label","Styled.IconContainer","Styled.Area","Styled.HeaderPectenUrlWrapper"],"mappings":"wYAOMA,EAAe,CAAC,CACpB,OAAAC,EACA,QAAAC,CACF,IAIMC,WAAqBF,CAAM,GAAKA,EAAO,sBAEtCG,UAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CAAe,QAAS,GAAO,SAAAJ,EAAQ,EACxCG,EAAAA,IAACE,EAAAA,gBAAe,QAAS,GAAO,MAAM,QAAQ,KAAK,SAChD,SAAAN,EAAO,cAAA,CACV,CAAA,EACF,EAIGC,EAGHM,EAAY,CAAC,CACjB,WAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAX,EACA,UAAAY,EACA,KAAAC,EAAOC,EAAAA,MAAM,MACf,IAAmC,CACjC,MAAMC,EAAaN,GAAUD,EACvBP,EACJe,EAAAA,KAACC,EAAAA,OAAA,CAAc,QAAAN,EAAkB,MAAOE,EACrC,SAAA,CAAAE,IAAe,UAAYX,MAACc,EAAAA,aAAA,CAAoB,KAAMC,EAAAA,OAAoBN,CAAI,EAAE,UAAA,CAAY,EAAKE,EACjGb,EAAAA,SAAqBF,CAAM,SACzBoB,EAAAA,cAAA,CAAqB,WAAYR,EAC/B,SAAA,CAAA,CAAC,CAACZ,EAAO,aAAea,IAASC,EAAAA,MAAM,cACrCO,EAAAA,iBAAA,CAAwB,SAAUC,EAAAA,UAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GAC3E,WAAO,YACV,EAEFE,EAAAA,KAACO,EAAAA,eAAA,CAAsB,MAAOV,EAC3B,SAAA,CAAA,CAAC,CAACb,EAAO,OACRI,EAAAA,IAACoB,GAAM,SAAUF,YAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GACzD,WAAO,MACV,EAED,CAAC,CAACd,EAAO,YAASyB,EAAAA,cAAA,CAAsB,SAAAzB,EAAO,IAAA,CAAK,CAAA,CAAA,CACvD,CAAA,CAAA,CACF,EAEAA,CAAA,EAEJ,EAGF,OACEI,MAACsB,EAAAA,KAAA,CAAY,KAAAb,EACV,SAAAH,GAAU,KACTN,EAAAA,IAACuB,yBAAA,CAA8B,IAAI,sBAAsB,SAAU,GAAK,GAAGjB,EACxE,SAAAT,CAAA,CACH,EAEAG,MAACL,EAAA,CAAa,OAAAC,EAAgB,QAAAC,CAAA,CAAkB,CAAA,CAEpD,CAEJ"}

package/build/cjs/components/NavBar/components/LastArea/LastArea.styles.js

@@ -1,19 +1,23 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),t=require("../../../Avatar/DropdownAvatar.js"),i=e.styled.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),s=require("../../../../react-base/src/components/Menu/Menu.consts.js"),i=require("../../../Avatar/DropdownAvatar.js"),n=e.styled.div`
   display: flex;
   flex-shrink: 0;
   align-items: center;
   padding: 4px;
   transition: all 0.3s ease;
   overflow: hidden;
-`,s=e.styled(t)`
+`,r=e.styled(i)`
   flex: 1 1 0;
   margin: 0;
   position: relative;
-  justify-content: flex-start;
   min-width: 0;
 
+  ${({size:t})=>e.css`
+    justify-content: flex-start;
+    margin-right: ${s.consts[t].itemListMarginLeft}px;
+  `};
+
   &:focus-visible {
     outline-offset: 0;
   }
-`;exports.Area=i;exports.StyledAvatar=s;
+`;exports.Area=n;exports.StyledAvatar=r;
 //# sourceMappingURL=LastArea.styles.js.map

package/build/cjs/components/NavBar/components/LastArea/LastArea.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LastArea.styles.js","sources":["../../../../../../src/components/NavBar/components/LastArea/LastArea.styles.ts"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport DropdownAvatar from '../../../Avatar/DropdownAvatar';\n\nconst Area = styled.div`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: 4px;\n  transition: all 0.3s ease;\n  overflow: hidden;\n`;\n\nconst StyledAvatar = styled(DropdownAvatar)`\n  flex: 1 1 0;\n  margin: 0;\n  position: relative;\n  justify-content: flex-start;\n  min-width: 0;\n\n  &:focus-visible {\n    outline-offset: 0;\n  }\n`;\n\nexport { Area, StyledAvatar };\n"],"names":["Area","styled","StyledAvatar","DropdownAvatar"],"mappings":"gMAIMA,EAAOC,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASdC,EAAeD,EAAAA,OAAOE,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"LastArea.styles.js","sources":["../../../../../../src/components/NavBar/components/LastArea/LastArea.styles.ts"],"sourcesContent":["import { css, styled } from 'styled-components';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport DropdownAvatar from '../../../Avatar/DropdownAvatar';\nimport { type IDropdownAvatarProps } from '../../../Avatar/Avatar.types';\n\nconst Area = styled.div`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: 4px;\n  transition: all 0.3s ease;\n  overflow: hidden;\n`;\n\nconst StyledAvatar = styled(DropdownAvatar)<Required<Pick<IDropdownAvatarProps, 'size'>>>`\n  flex: 1 1 0;\n  margin: 0;\n  position: relative;\n  min-width: 0;\n\n  ${({ size }) => css`\n    justify-content: flex-start;\n    margin-right: ${MenuConsts.consts[size].itemListMarginLeft}px;\n  `};\n\n  &:focus-visible {\n    outline-offset: 0;\n  }\n`;\n\nexport { Area, StyledAvatar };\n"],"names":["Area","styled","StyledAvatar","DropdownAvatar","size","css","MenuConsts.consts"],"mappings":"uQAMMA,EAAOC,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASdC,EAAeD,EAAAA,OAAOE,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMtC,CAAC,CAAE,KAAAC,CAAA,IAAWC,EAAAA;AAAAA;AAAAA,oBAEEC,EAAAA,OAAkBF,CAAI,EAAE,kBAAkB;AAAA,GAC3D;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/build/cjs/components/Pagination/DefaultPagination.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),a=require("react"),Z=require("classnames"),H=require("../../react-base/src/consts/index.js"),J=require("react-i18next"),m=require("../Text/components/Label/Label.js"),x=require("./DefaultPagination.styles.js"),L=require("./utils/getPagesToDisplay.js"),D=require("./components/PaginationButtons.js"),Q=require("../../react-base/src/consts/classes.js"),w=1,S=1,O=10,A=20,W=50,X=[O,A,W],K=({moreButton:r,onPageClick:t,size:u,t:E,currentPage:i,total:j})=>{const[p,d]=a.useState(i);return a.useEffect(()=>{d(L.enforceInRange(i,j))},[i,j]),a.useMemo(()=>L.getPagesToDisplay(i,p,j,r),[r,p,j,i]).map(({page:g,current:C,more:P})=>P?e.jsx(D.PageButton,{onClick:f=>{f.preventDefault(),d(g)},page:g,more:P,size:u,t:E},`more-${P}`):e.jsx(D.PageButton,{page:g,current:C,onClick:f=>{f.preventDefault(),t(g)},more:!1,size:u,t:E},`page-${g}`))},V=({size:r,t,onChange:u})=>e.jsxs(x.QuickJumperContainer,{children:[e.jsx(m,{size:r,children:t("jumpTo")}),e.jsx(x.TextInput,{onBlur:u,placeholder:t("jumpToPagePlaceholder"),size:r})]}),_=(r,t)=>Math.min(Math.max(r,1),t),Y=({className:r,size:t=H.Sizes.Medium,current:u,quickJumper:E,startEndButtons:i,allowedPageSizes:j=X,pageSize:p=A,onPageSizeChange:d,totalItems:T,showTotalItems:g=!0,moreButton:C=!1,onPageChange:P,i18n:f,...y})=>{const{t:c}=J.useTranslation("pagination",{i18n:f}),[s,I]=a.useState(u),[N,h]=a.useState(p),l=a.useMemo(()=>Math.ceil(Math.max(T,0)/(N||A))||w,[T,N]),M=a.useMemo(()=>s===S,[s]),q=a.useMemo(()=>s===l,[s,l]);a.useEffect(()=>{I(_(u,l))},[u,l]),a.useEffect(()=>{h(p)},[p]);const n=a.useCallback((o,b)=>{const k=_(o,l);I(k),P==null||P(k,b)},[P,l]),F=a.useCallback(o=>{const b=Number(o.target.value);if(o.target.value="",Number.isNaN(b)){o.preventDefault(),o.stopPropagation();return}const k=_(b,l);n(k,s)},[n,l,s]),G=a.useCallback(o=>{h(o),d==null||d(o),n(S,s)},[d,n,s]),v=a.useCallback(()=>n(1,s),[n,s]),B=a.useCallback(()=>n(l,s),[n,l,s]),$=a.useCallback(()=>n(s-1,s),[n,s]),R=a.useCallback(o=>n(o,s),[n,s]),U=a.useCallback(()=>n(s+1,s),[n,s]);return e.jsxs(x.DefaultPaginationWrapper,{className:Z(Q.PAGINATION_CLASS,r),$size:t,...y,children:[e.jsxs(x.DefaultPaginationContainer,{"aria-label":"pagination",children:[g&&e.jsxs(x.TotalItems,{children:[e.jsx(m,{size:t,children:c("total")}),e.jsx(m,{size:t,children:T}),e.jsx(m,{size:t,children:c("item",{count:T})})]}),e.jsxs(x.PaginationList,{children:[i&&e.jsx(D.FirstPageButton,{onClick:v,size:t,disabled:M,t:c}),e.jsx(D.PrevPageButton,{onClick:$,size:t,disabled:M,t:c}),e.jsx(K,{moreButton:C,onPageClick:R,size:t,t:c,currentPage:s,total:l}),e.jsx(D.NextPageButton,{onClick:U,size:t,disabled:q,t:c}),i&&e.jsx(D.LastPageButton,{onClick:B,size:t,disabled:q,t:c})]}),E&&e.jsx(V,{t:c,size:t,onChange:F})]}),e.jsxs(x.DefaultPaginationItemsPerPageContainer,{children:[e.jsx(m,{size:t,children:c("displayingItemsPerPage")}),e.jsx(x.Select,{size:t,value:N,onSelect:G,allowClear:!1,options:j.map(o=>({label:`${o}`,value:o}))}),e.jsx(m,{size:t,children:`${c("item",{count:4})} ${c("itemsPerPage")}`})]})]})};module.exports=Y;
+"use strict";const e=require("react/jsx-runtime"),t=require("react"),H=require("classnames"),J=require("../../react-base/src/consts/index.js"),Q=require("../../libs/i18next/hooks/useTranslation.js"),j=require("../Text/components/Label/Label.js"),g=require("./DefaultPagination.styles.js"),F=require("./utils/getPagesToDisplay.js"),C=require("./components/PaginationButtons.js"),w=require("./utils/numberFormatter.js"),O=require("../../react-base/src/consts/classes.js"),W=1,M=1,X=10,_=20,K=50,V=[X,_,K],Y=({moreButton:c,onPageClick:s,size:u,t:b,currentPage:i,total:d})=>{const[m,p]=t.useState(i);return t.useEffect(()=>{p(F.enforceInRange(i,d))},[i,d]),t.useMemo(()=>F.getPagesToDisplay(i,m,d,c),[c,m,d,i]).map(({page:P,current:E,more:x})=>x?e.jsx(C.PageButton,{onClick:T=>{T.preventDefault(),p(P)},page:P,more:x,size:u,t:b},`more-${x}`):e.jsx(C.PageButton,{page:P,current:E,onClick:T=>{T.preventDefault(),s(P)},more:!1,size:u,t:b},`page-${P}`))},z=({size:c,t:s,onChange:u})=>e.jsxs(g.QuickJumperContainer,{children:[e.jsx(j,{size:c,children:s("jumpTo")}),e.jsx(g.TextInput,{onBlur:u,placeholder:s("jumpToPagePlaceholder"),size:c})]}),N=(c,s)=>Math.min(Math.max(c,1),s),ee=({className:c,size:s=J.Sizes.Medium,current:u,quickJumper:b,startEndButtons:i,allowedPageSizes:d=V,pageSize:m=_,onPageSizeChange:p,totalItems:f,showTotalItems:P=!0,moreButton:E=!1,onPageChange:x,i18n:T,numberFormatter:L=w.defaultNumberFormatter(),...y})=>{const{t:r}=Q.useTranslation("pagination",{i18n:T}),[a,A]=t.useState(u),[k,S]=t.useState(m),l=t.useMemo(()=>Math.ceil(Math.max(f,0)/(k||_))||W,[f,k]),I=t.useMemo(()=>a===M,[a]),q=t.useMemo(()=>a===l,[a,l]);t.useEffect(()=>{A(N(u,l))},[u,l]),t.useEffect(()=>{S(m)},[m]);const n=t.useCallback((o,D)=>{const h=N(o,l);A(h),x?.(h,D)},[x,l]),G=t.useCallback(o=>{const D=Number(o.target.value);if(o.target.value="",Number.isNaN(D)){o.preventDefault(),o.stopPropagation();return}const h=N(D,l);n(h,a)},[n,l,a]),v=t.useCallback(o=>{S(o),p?.(o),n(M,a)},[p,n,a]),B=t.useCallback(()=>n(1,a),[n,a]),$=t.useCallback(()=>n(l,a),[n,l,a]),R=t.useCallback(()=>n(a-1,a),[n,a]),U=t.useCallback(o=>n(o,a),[n,a]),Z=t.useCallback(()=>n(a+1,a),[n,a]);return e.jsxs(g.DefaultPaginationWrapper,{className:H(O.PAGINATION_CLASS,c),$size:s,...y,children:[e.jsxs(g.DefaultPaginationContainer,{"aria-label":"pagination",children:[P&&e.jsxs(g.TotalItems,{children:[e.jsx(j,{size:s,children:r("total")}),e.jsx(j,{size:s,children:L.format(f)}),e.jsx(j,{size:s,children:r("item",{count:f})})]}),e.jsxs(g.PaginationList,{children:[i&&e.jsx(C.FirstPageButton,{onClick:B,size:s,disabled:I,t:r}),e.jsx(C.PrevPageButton,{onClick:R,size:s,disabled:I,t:r}),e.jsx(Y,{moreButton:E,onPageClick:U,size:s,t:r,currentPage:a,total:l}),e.jsx(C.NextPageButton,{onClick:Z,size:s,disabled:q,t:r}),i&&e.jsx(C.LastPageButton,{onClick:$,size:s,disabled:q,t:r})]}),b&&e.jsx(z,{t:r,size:s,onChange:G})]}),e.jsxs(g.DefaultPaginationItemsPerPageContainer,{children:[e.jsx(j,{size:s,children:r("displayingItemsPerPage")}),e.jsx(g.Select,{size:s,value:k,onSelect:v,allowClear:!1,options:d.map(o=>({label:`${o}`,value:o}))}),e.jsx(j,{size:s,children:`${r("item",{count:4})} ${r("itemsPerPage")}`})]})]})};module.exports=ee;
 //# sourceMappingURL=DefaultPagination.js.map

package/build/cjs/components/Pagination/DefaultPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultPagination.js","sources":["../../../../src/components/Pagination/DefaultPagination.tsx"],"sourcesContent":["import { type ChangeEventHandler, type ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { PAGINATION_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { PaginationTypes } from 'acinguiux-ds-react-base/components/Pagination';\nimport { useTranslation } from 'react-i18next';\nimport type { TFunction } from 'i18next';\n\nimport Label from '../Text/components/Label/Label';\nimport * as Styled from './DefaultPagination.styles';\nimport type { IDefaultPaginationProps } from './Pagination.types';\nimport { enforceInRange, getPagesToDisplay } from './utils/getPagesToDisplay';\nimport {\n  FirstPageButton,\n  LastPageButton,\n  NextPageButton,\n  PageButton,\n  PrevPageButton,\n} from './components/PaginationButtons';\n\ntype QuickJumperProps = {\n  size: PaginationTypes.Size;\n  t: TFunction<'pagination'>;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n};\n\nconst MIN_PAGES = 1;\nconst FIRST_PAGE = 1;\nconst DEFAULT_MIN_PAGE_SIZE = 10;\nconst DEFAULT_PAGE_SIZE = 20;\nconst DEFAULT_EXTENDED_PAGE_SIZE = 50;\n\nconst DEFAULT_PAGE_SIZES = [DEFAULT_MIN_PAGE_SIZE, DEFAULT_PAGE_SIZE, DEFAULT_EXTENDED_PAGE_SIZE];\n\ntype PagesProps = {\n  moreButton: boolean;\n  onPageClick: (pageNumber: number) => void;\n  size: PaginationTypes.Size;\n  t: TFunction<'pagination'>;\n  currentPage: number;\n  total: number;\n};\n\nconst Pages = ({ moreButton, onPageClick, size, t, currentPage, total }: PagesProps) => {\n  const [currentDisplayed, setCurrentDisplayed] = useState(currentPage);\n\n  useEffect(() => {\n    setCurrentDisplayed(enforceInRange(currentPage, total));\n  }, [currentPage, total]);\n\n  const pageToDisplay = useMemo(\n    () => getPagesToDisplay(currentPage, currentDisplayed, total, moreButton),\n    [moreButton, currentDisplayed, total, currentPage],\n  );\n\n  return pageToDisplay.map(({ page, current, more }) =>\n    more ? (\n      <PageButton\n        key={`more-${more}`}\n        onClick={(e) => {\n          e.preventDefault();\n          setCurrentDisplayed(page);\n        }}\n        page={page}\n        more={more}\n        size={size}\n        t={t}\n      />\n    ) : (\n      <PageButton\n        key={`page-${page}`}\n        page={page}\n        current={current}\n        onClick={(e) => {\n          e.preventDefault();\n          onPageClick(page);\n        }}\n        more={false}\n        size={size}\n        t={t}\n      />\n    ),\n  );\n};\n\nconst DefaultQuickJumper = ({ size, t, onChange }: QuickJumperProps) => (\n  <Styled.QuickJumperContainer>\n    <Label size={size}>{t('jumpTo')}</Label>\n    <Styled.TextInput onBlur={onChange} placeholder={t('jumpToPagePlaceholder')} size={size} />\n  </Styled.QuickJumperContainer>\n);\n\n// ensure page is > 1 and <= total\nconst ensurePageInRange = (page: number, total: number): number => Math.min(Math.max(page, 1), total);\n\nconst DefaultPagination = ({\n  className,\n  size = Sizes.Medium,\n  current,\n  quickJumper,\n  startEndButtons,\n  allowedPageSizes = DEFAULT_PAGE_SIZES,\n  pageSize = DEFAULT_PAGE_SIZE,\n  onPageSizeChange,\n  totalItems,\n  showTotalItems = true,\n  moreButton = false,\n  onPageChange,\n  i18n,\n  ...rest\n}: IDefaultPaginationProps): ReactElement => {\n  const { t } = useTranslation('pagination', { i18n });\n  const [currentPage, setCurrentPage] = useState(current);\n  const [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n  const total = useMemo(\n    // calculate total pages based on total items and current page size, totalItems >= 0, ensures MIN_PAGES minimum pages\n    () => Math.ceil(Math.max(totalItems, 0) / (currentPageSize || DEFAULT_PAGE_SIZE)) || MIN_PAGES,\n    [totalItems, currentPageSize],\n  );\n  const isFirstPage = useMemo(() => currentPage === FIRST_PAGE, [currentPage]);\n  const isLastPage = useMemo(() => currentPage === total, [currentPage, total]);\n\n  useEffect(() => {\n    setCurrentPage(ensurePageInRange(current, total));\n  }, [current, total]);\n\n  useEffect(() => {\n    setCurrentPageSize(pageSize);\n  }, [pageSize]);\n\n  const onPageChangeHandler = useCallback(\n    (page: number, prevPage: number) => {\n      const newPage = ensurePageInRange(page, total);\n      setCurrentPage(newPage);\n      onPageChange?.(newPage, prevPage);\n    },\n    [onPageChange, total],\n  );\n\n  const onQuickJumperChangeHandler = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const pageNumber = Number(event.target.value);\n\n      event.target.value = '';\n\n      if (Number.isNaN(pageNumber)) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        return;\n      }\n\n      const newPage = ensurePageInRange(pageNumber, total);\n\n      onPageChangeHandler(newPage, currentPage);\n    },\n    [onPageChangeHandler, total, currentPage],\n  );\n\n  const onPageSizeChangeHandler = useCallback(\n    (newPageSize: number) => {\n      setCurrentPageSize(newPageSize);\n      onPageSizeChange?.(newPageSize);\n      onPageChangeHandler(FIRST_PAGE, currentPage);\n    },\n    [onPageSizeChange, onPageChangeHandler, currentPage],\n  );\n\n  const goToFirstPage = useCallback(() => onPageChangeHandler(1, currentPage), [onPageChangeHandler, currentPage]);\n  const goToLastPage = useCallback(\n    () => onPageChangeHandler(total, currentPage),\n    [onPageChangeHandler, total, currentPage],\n  );\n  const goToPrevPage = useCallback(\n    () => onPageChangeHandler(currentPage - 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n  const goToPage = useCallback(\n    (pageNumber: number) => onPageChangeHandler(pageNumber, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n  const goToNextPage = useCallback(\n    () => onPageChangeHandler(currentPage + 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n\n  return (\n    <Styled.DefaultPaginationWrapper className={classNames(PAGINATION_CLASS, className)} $size={size} {...rest}>\n      <Styled.DefaultPaginationContainer aria-label=\"pagination\">\n        {showTotalItems && (\n          <Styled.TotalItems>\n            <Label size={size}>{t('total')}</Label>\n            <Label size={size}>{totalItems}</Label>\n            <Label size={size}>{t('item', { count: totalItems })}</Label>\n          </Styled.TotalItems>\n        )}\n        <Styled.PaginationList>\n          {startEndButtons && <FirstPageButton onClick={goToFirstPage} size={size} disabled={isFirstPage} t={t} />}\n          <PrevPageButton onClick={goToPrevPage} size={size} disabled={isFirstPage} t={t} />\n          <Pages\n            moreButton={moreButton}\n            onPageClick={goToPage}\n            size={size}\n            t={t}\n            currentPage={currentPage}\n            total={total}\n          />\n          <NextPageButton onClick={goToNextPage} size={size} disabled={isLastPage} t={t} />\n          {startEndButtons && <LastPageButton onClick={goToLastPage} size={size} disabled={isLastPage} t={t} />}\n        </Styled.PaginationList>\n        {quickJumper && <DefaultQuickJumper t={t} size={size} onChange={onQuickJumperChangeHandler} />}\n      </Styled.DefaultPaginationContainer>\n      <Styled.DefaultPaginationItemsPerPageContainer>\n        <Label size={size}>{t('displayingItemsPerPage')}</Label>\n        <Styled.Select\n          size={size}\n          value={currentPageSize}\n          onSelect={onPageSizeChangeHandler}\n          allowClear={false}\n          options={allowedPageSizes.map((pSize) => ({ label: `${pSize}`, value: pSize }))}\n        />\n        <Label size={size}>{`${t('item', { count: 4 })} ${t('itemsPerPage')}`}</Label>\n      </Styled.DefaultPaginationItemsPerPageContainer>\n    </Styled.DefaultPaginationWrapper>\n  );\n};\n\nexport default DefaultPagination;\n"],"names":["MIN_PAGES","FIRST_PAGE","DEFAULT_MIN_PAGE_SIZE","DEFAULT_PAGE_SIZE","DEFAULT_EXTENDED_PAGE_SIZE","DEFAULT_PAGE_SIZES","Pages","moreButton","onPageClick","size","t","currentPage","total","currentDisplayed","setCurrentDisplayed","useState","useEffect","enforceInRange","useMemo","getPagesToDisplay","page","current","more","jsx","PageButton","e","DefaultQuickJumper","onChange","jsxs","Styled.QuickJumperContainer","Label","Styled.TextInput","ensurePageInRange","DefaultPagination","className","Sizes","quickJumper","startEndButtons","allowedPageSizes","pageSize","onPageSizeChange","totalItems","showTotalItems","onPageChange","i18n","rest","useTranslation","setCurrentPage","currentPageSize","setCurrentPageSize","isFirstPage","isLastPage","onPageChangeHandler","useCallback","prevPage","newPage","onQuickJumperChangeHandler","event","pageNumber","onPageSizeChangeHandler","newPageSize","goToFirstPage","goToLastPage","goToPrevPage","goToPage","goToNextPage","Styled.DefaultPaginationWrapper","classNames","PAGINATION_CLASS","Styled.DefaultPaginationContainer","Styled.TotalItems","Styled.PaginationList","FirstPageButton","PrevPageButton","NextPageButton","LastPageButton","Styled.DefaultPaginationItemsPerPageContainer","Styled.Select","pSize"],"mappings":"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"}
+{"version":3,"file":"DefaultPagination.js","sources":["../../../../src/components/Pagination/DefaultPagination.tsx"],"sourcesContent":["import { type ChangeEventHandler, type ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { PAGINATION_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { PaginationTypes } from 'acinguiux-ds-react-base/components/Pagination';\n\nimport { useTranslation } from '../../libs/i18next/hooks/useTranslation';\nimport type { TFunction } from '../../libs/i18next/types';\nimport Label from '../Text/components/Label/Label';\nimport * as Styled from './DefaultPagination.styles';\nimport type { IDefaultPaginationProps } from './Pagination.types';\nimport { enforceInRange, getPagesToDisplay } from './utils/getPagesToDisplay';\nimport {\n  FirstPageButton,\n  LastPageButton,\n  NextPageButton,\n  PageButton,\n  PrevPageButton,\n} from './components/PaginationButtons';\nimport { defaultNumberFormatter } from './utils/numberFormatter';\n\ntype QuickJumperProps = {\n  size: PaginationTypes.Size;\n  t: TFunction<'pagination'>;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n};\n\nconst MIN_PAGES = 1;\nconst FIRST_PAGE = 1;\nconst DEFAULT_MIN_PAGE_SIZE = 10;\nconst DEFAULT_PAGE_SIZE = 20;\nconst DEFAULT_EXTENDED_PAGE_SIZE = 50;\n\nconst DEFAULT_PAGE_SIZES = [DEFAULT_MIN_PAGE_SIZE, DEFAULT_PAGE_SIZE, DEFAULT_EXTENDED_PAGE_SIZE];\n\ntype PagesProps = {\n  moreButton: boolean;\n  onPageClick: (pageNumber: number) => void;\n  size: PaginationTypes.Size;\n  t: TFunction<'pagination'>;\n  currentPage: number;\n  total: number;\n};\n\nconst Pages = ({ moreButton, onPageClick, size, t, currentPage, total }: PagesProps) => {\n  const [currentDisplayed, setCurrentDisplayed] = useState(currentPage);\n\n  useEffect(() => {\n    setCurrentDisplayed(enforceInRange(currentPage, total));\n  }, [currentPage, total]);\n\n  const pageToDisplay = useMemo(\n    () => getPagesToDisplay(currentPage, currentDisplayed, total, moreButton),\n    [moreButton, currentDisplayed, total, currentPage],\n  );\n\n  return pageToDisplay.map(({ page, current, more }) =>\n    more ? (\n      <PageButton\n        key={`more-${more}`}\n        onClick={(e) => {\n          e.preventDefault();\n          setCurrentDisplayed(page);\n        }}\n        page={page}\n        more={more}\n        size={size}\n        t={t}\n      />\n    ) : (\n      <PageButton\n        key={`page-${page}`}\n        page={page}\n        current={current}\n        onClick={(e) => {\n          e.preventDefault();\n          onPageClick(page);\n        }}\n        more={false}\n        size={size}\n        t={t}\n      />\n    ),\n  );\n};\n\nconst DefaultQuickJumper = ({ size, t, onChange }: QuickJumperProps) => (\n  <Styled.QuickJumperContainer>\n    <Label size={size}>{t('jumpTo')}</Label>\n    <Styled.TextInput onBlur={onChange} placeholder={t('jumpToPagePlaceholder')} size={size} />\n  </Styled.QuickJumperContainer>\n);\n\n// ensure page is > 1 and <= total\nconst ensurePageInRange = (page: number, total: number): number => Math.min(Math.max(page, 1), total);\n\nconst DefaultPagination = ({\n  className,\n  size = Sizes.Medium,\n  current,\n  quickJumper,\n  startEndButtons,\n  allowedPageSizes = DEFAULT_PAGE_SIZES,\n  pageSize = DEFAULT_PAGE_SIZE,\n  onPageSizeChange,\n  totalItems,\n  showTotalItems = true,\n  moreButton = false,\n  onPageChange,\n  i18n,\n  numberFormatter = defaultNumberFormatter(),\n  ...rest\n}: IDefaultPaginationProps): ReactElement => {\n  const { t } = useTranslation('pagination', { i18n });\n  const [currentPage, setCurrentPage] = useState(current);\n  const [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n  const total = useMemo(\n    // calculate total pages based on total items and current page size, totalItems >= 0, ensures MIN_PAGES minimum pages\n    () => Math.ceil(Math.max(totalItems, 0) / (currentPageSize || DEFAULT_PAGE_SIZE)) || MIN_PAGES,\n    [totalItems, currentPageSize],\n  );\n  const isFirstPage = useMemo(() => currentPage === FIRST_PAGE, [currentPage]);\n  const isLastPage = useMemo(() => currentPage === total, [currentPage, total]);\n\n  useEffect(() => {\n    setCurrentPage(ensurePageInRange(current, total));\n  }, [current, total]);\n\n  useEffect(() => {\n    setCurrentPageSize(pageSize);\n  }, [pageSize]);\n\n  const onPageChangeHandler = useCallback(\n    (page: number, prevPage: number) => {\n      const newPage = ensurePageInRange(page, total);\n      setCurrentPage(newPage);\n      onPageChange?.(newPage, prevPage);\n    },\n    [onPageChange, total],\n  );\n\n  const onQuickJumperChangeHandler = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const pageNumber = Number(event.target.value);\n\n      event.target.value = '';\n\n      if (Number.isNaN(pageNumber)) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        return;\n      }\n\n      const newPage = ensurePageInRange(pageNumber, total);\n\n      onPageChangeHandler(newPage, currentPage);\n    },\n    [onPageChangeHandler, total, currentPage],\n  );\n\n  const onPageSizeChangeHandler = useCallback(\n    (newPageSize: number) => {\n      setCurrentPageSize(newPageSize);\n      onPageSizeChange?.(newPageSize);\n      onPageChangeHandler(FIRST_PAGE, currentPage);\n    },\n    [onPageSizeChange, onPageChangeHandler, currentPage],\n  );\n\n  const goToFirstPage = useCallback(() => onPageChangeHandler(1, currentPage), [onPageChangeHandler, currentPage]);\n  const goToLastPage = useCallback(\n    () => onPageChangeHandler(total, currentPage),\n    [onPageChangeHandler, total, currentPage],\n  );\n  const goToPrevPage = useCallback(\n    () => onPageChangeHandler(currentPage - 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n  const goToPage = useCallback(\n    (pageNumber: number) => onPageChangeHandler(pageNumber, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n  const goToNextPage = useCallback(\n    () => onPageChangeHandler(currentPage + 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n\n  return (\n    <Styled.DefaultPaginationWrapper className={classNames(PAGINATION_CLASS, className)} $size={size} {...rest}>\n      <Styled.DefaultPaginationContainer aria-label=\"pagination\">\n        {showTotalItems && (\n          <Styled.TotalItems>\n            <Label size={size}>{t('total')}</Label>\n            <Label size={size}>{numberFormatter.format(totalItems)}</Label>\n            <Label size={size}>{t('item', { count: totalItems })}</Label>\n          </Styled.TotalItems>\n        )}\n        <Styled.PaginationList>\n          {startEndButtons && <FirstPageButton onClick={goToFirstPage} size={size} disabled={isFirstPage} t={t} />}\n          <PrevPageButton onClick={goToPrevPage} size={size} disabled={isFirstPage} t={t} />\n          <Pages\n            moreButton={moreButton}\n            onPageClick={goToPage}\n            size={size}\n            t={t}\n            currentPage={currentPage}\n            total={total}\n          />\n          <NextPageButton onClick={goToNextPage} size={size} disabled={isLastPage} t={t} />\n          {startEndButtons && <LastPageButton onClick={goToLastPage} size={size} disabled={isLastPage} t={t} />}\n        </Styled.PaginationList>\n        {quickJumper && <DefaultQuickJumper t={t} size={size} onChange={onQuickJumperChangeHandler} />}\n      </Styled.DefaultPaginationContainer>\n      <Styled.DefaultPaginationItemsPerPageContainer>\n        <Label size={size}>{t('displayingItemsPerPage')}</Label>\n        <Styled.Select\n          size={size}\n          value={currentPageSize}\n          onSelect={onPageSizeChangeHandler}\n          allowClear={false}\n          options={allowedPageSizes.map((pSize) => ({ label: `${pSize}`, value: pSize }))}\n        />\n        <Label size={size}>{`${t('item', { count: 4 })} ${t('itemsPerPage')}`}</Label>\n      </Styled.DefaultPaginationItemsPerPageContainer>\n    </Styled.DefaultPaginationWrapper>\n  );\n};\n\nexport default DefaultPagination;\n"],"names":["MIN_PAGES","FIRST_PAGE","DEFAULT_MIN_PAGE_SIZE","DEFAULT_PAGE_SIZE","DEFAULT_EXTENDED_PAGE_SIZE","DEFAULT_PAGE_SIZES","Pages","moreButton","onPageClick","size","t","currentPage","total","currentDisplayed","setCurrentDisplayed","useState","useEffect","enforceInRange","useMemo","getPagesToDisplay","page","current","more","jsx","PageButton","e","DefaultQuickJumper","onChange","jsxs","Styled.QuickJumperContainer","Label","Styled.TextInput","ensurePageInRange","DefaultPagination","className","Sizes","quickJumper","startEndButtons","allowedPageSizes","pageSize","onPageSizeChange","totalItems","showTotalItems","onPageChange","i18n","numberFormatter","defaultNumberFormatter","rest","useTranslation","setCurrentPage","currentPageSize","setCurrentPageSize","isFirstPage","isLastPage","onPageChangeHandler","useCallback","prevPage","newPage","onQuickJumperChangeHandler","event","pageNumber","onPageSizeChangeHandler","newPageSize","goToFirstPage","goToLastPage","goToPrevPage","goToPage","goToNextPage","Styled.DefaultPaginationWrapper","classNames","PAGINATION_CLASS","Styled.DefaultPaginationContainer","Styled.TotalItems","Styled.PaginationList","FirstPageButton","PrevPageButton","NextPageButton","LastPageButton","Styled.DefaultPaginationItemsPerPageContainer","Styled.Select","pSize"],"mappings":"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"}

package/build/cjs/components/Pagination/DefaultPagination.styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),e=require("../../react-base/src/components/Pagination/Pagination.consts.js"),u=require("../TextInput/TextInput.js"),d=require("../Select/Select.js"),a=require("./components/PaginationButtons.styles.js"),i=n.styled.ul`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),e=require("../../react-base/src/components/Pagination/Pagination.consts.js"),d=require("../TextInput/TextInput.js"),u=require("../Select/Select.js"),a=require("./components/PaginationButtons.styles.js"),i=n.styled.ul`
   display: flex;
   list-style: none;
   padding: 0;
@@ -11,7 +11,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-`,o=n.styled(u)``,l=n.styled(d)``,c=n.styled.div`
+`,o=n.styled(d)``,l=n.styled(u)``,c=n.styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,7 +51,10 @@
 
       & > ${a.PaginationListItem} {
         & > ${a.ToggleButton} {
-          width: ${e.consts[t].default.container.pagination.itemWidth}px;
+          min-width: ${e.consts[t].default.container.pagination.itemWidth}px;
+          & > div {
+            padding: 0;
+          }
         }
       }
     }

package/build/cjs/components/Pagination/DefaultPagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultPagination.styles.js","sources":["../../../../src/components/Pagination/DefaultPagination.styles.ts"],"sourcesContent":["import type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { styled } from 'styled-components';\nimport { PaginationConsts } from 'acinguiux-ds-react-base/components/Pagination';\n\nimport type { IDefaultPaginationProps } from './Pagination.types';\nimport _TextInput from '../TextInput/TextInput';\nimport _Select from '../Select/Select';\nimport { PaginationListItem, ToggleButton } from './components/PaginationButtons.styles';\n\nexport const PaginationList = styled.ul`\n  display: flex;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: nowrap;\n  width: fit-content;\n`;\n\nexport const QuickJumperContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const TextInput = styled(_TextInput)``;\nexport const Select = styled(_Select)``;\n\nexport const DefaultPaginationItemsPerPageContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const TotalItems = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DefaultPaginationContainer = styled.nav`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n`;\n\ntype DefaultPaginationWrapperProps = Required<PickTransient<IDefaultPaginationProps, 'size'>>;\nexport const DefaultPaginationWrapper = styled.div<DefaultPaginationWrapperProps>(\n  ({ $size }) => `\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: ${PaginationConsts.consts[$size].default.gap}px;\n\n  & > ${DefaultPaginationItemsPerPageContainer} {\n    gap: ${PaginationConsts.consts[$size].default.itemsPerPage.gap}px;\n\n    & > ${Select} {\n      min-width: 0;\n      width: ${PaginationConsts.consts[$size].default.itemsPerPage.selectWidth}px;\n    }\n  }\n\n  & > ${DefaultPaginationContainer} {\n    gap: ${PaginationConsts.consts[$size].default.container.gap}px;\n\n    & > ${TotalItems} {\n      gap: ${PaginationConsts.consts[$size].default.container.totalGap}px;\n    }\n\n    & > ${PaginationList} {\n      gap: ${PaginationConsts.consts[$size].default.container.pagination.gap}px;\n\n      & > ${PaginationListItem} {\n        & > ${ToggleButton} {\n          width: ${PaginationConsts.consts[$size].default.container.pagination.itemWidth}px;\n        }\n      }\n    }\n\n    & > ${QuickJumperContainer} {\n      gap: ${PaginationConsts.consts[$size].default.container.jumper.gap}px;\n\n      & > ${TextInput} {\n        width: ${PaginationConsts.consts[$size].default.container.jumper.inputWidth}px;\n      }\n    }\n  }\n`,\n);\n"],"names":["PaginationList","styled","QuickJumperContainer","TextInput","_TextInput","Select","_Select","DefaultPaginationItemsPerPageContainer","TotalItems","DefaultPaginationContainer","DefaultPaginationWrapper","$size","PaginationConsts.consts","PaginationListItem","ToggleButton"],"mappings":"4VASaA,EAAiBC,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBC,EAAuBD,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAM9BE,EAAYF,EAAAA,OAAOG,CAAU,IAC7BC,EAASJ,EAAAA,OAAOK,CAAO,IAEvBC,EAAyCN,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAMhDO,EAAaP,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAMpBQ,EAA6BR,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAOpCS,EAA2BT,EAAAA,OAAO,IAC7C,CAAC,CAAE,MAAAU,CAAA,IAAY;AAAA;AAAA;AAAA;AAAA;AAAA,SAKRC,SAAwBD,CAAK,EAAE,QAAQ,GAAG;AAAA;AAAA,QAE3CJ,CAAsC;AAAA,WACnCK,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,aAAa,GAAG;AAAA;AAAA,UAExDN,CAAM;AAAA;AAAA,eAEDO,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,aAAa,WAAW;AAAA;AAAA;AAAA;AAAA,QAItEF,CAA0B;AAAA,WACvBG,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,GAAG;AAAA;AAAA,UAErDH,CAAU;AAAA,aACPI,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,QAAQ;AAAA;AAAA;AAAA,UAG5DX,CAAc;AAAA,aACXY,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,WAAW,GAAG;AAAA;AAAA,YAEhEE,oBAAkB;AAAA,cAChBC,cAAY;AAAA,mBACPF,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,UAK9ET,CAAoB;AAAA,aACjBU,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,OAAO,GAAG;AAAA;AAAA,YAE5DR,CAAS;AAAA,iBACJS,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,CAKnF"}
+{"version":3,"file":"DefaultPagination.styles.js","sources":["../../../../src/components/Pagination/DefaultPagination.styles.ts"],"sourcesContent":["import type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { styled } from 'styled-components';\nimport { PaginationConsts } from 'acinguiux-ds-react-base/components/Pagination';\n\nimport type { IDefaultPaginationProps } from './Pagination.types';\nimport _TextInput from '../TextInput/TextInput';\nimport _Select from '../Select/Select';\nimport { PaginationListItem, ToggleButton } from './components/PaginationButtons.styles';\n\nexport const PaginationList = styled.ul`\n  display: flex;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: nowrap;\n  width: fit-content;\n`;\n\nexport const QuickJumperContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const TextInput = styled(_TextInput)``;\nexport const Select = styled(_Select)``;\n\nexport const DefaultPaginationItemsPerPageContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const TotalItems = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DefaultPaginationContainer = styled.nav`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n`;\n\ntype DefaultPaginationWrapperProps = Required<PickTransient<IDefaultPaginationProps, 'size'>>;\nexport const DefaultPaginationWrapper = styled.div<DefaultPaginationWrapperProps>(\n  ({ $size }) => `\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: ${PaginationConsts.consts[$size].default.gap}px;\n\n  & > ${DefaultPaginationItemsPerPageContainer} {\n    gap: ${PaginationConsts.consts[$size].default.itemsPerPage.gap}px;\n\n    & > ${Select} {\n      min-width: 0;\n      width: ${PaginationConsts.consts[$size].default.itemsPerPage.selectWidth}px;\n    }\n  }\n\n  & > ${DefaultPaginationContainer} {\n    gap: ${PaginationConsts.consts[$size].default.container.gap}px;\n\n    & > ${TotalItems} {\n      gap: ${PaginationConsts.consts[$size].default.container.totalGap}px;\n    }\n\n    & > ${PaginationList} {\n      gap: ${PaginationConsts.consts[$size].default.container.pagination.gap}px;\n\n      & > ${PaginationListItem} {\n        & > ${ToggleButton} {\n          min-width: ${PaginationConsts.consts[$size].default.container.pagination.itemWidth}px;\n          & > div {\n            padding: 0;\n          }\n        }\n      }\n    }\n\n    & > ${QuickJumperContainer} {\n      gap: ${PaginationConsts.consts[$size].default.container.jumper.gap}px;\n\n      & > ${TextInput} {\n        width: ${PaginationConsts.consts[$size].default.container.jumper.inputWidth}px;\n      }\n    }\n  }\n`,\n);\n"],"names":["PaginationList","styled","QuickJumperContainer","TextInput","_TextInput","Select","_Select","DefaultPaginationItemsPerPageContainer","TotalItems","DefaultPaginationContainer","DefaultPaginationWrapper","$size","PaginationConsts.consts","PaginationListItem","ToggleButton"],"mappings":"4VASaA,EAAiBC,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBC,EAAuBD,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAM9BE,EAAYF,EAAAA,OAAOG,CAAU,IAC7BC,EAASJ,EAAAA,OAAOK,CAAO,IAEvBC,EAAyCN,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAMhDO,EAAaP,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAMpBQ,EAA6BR,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAOpCS,EAA2BT,EAAAA,OAAO,IAC7C,CAAC,CAAE,MAAAU,CAAA,IAAY;AAAA;AAAA;AAAA;AAAA;AAAA,SAKRC,SAAwBD,CAAK,EAAE,QAAQ,GAAG;AAAA;AAAA,QAE3CJ,CAAsC;AAAA,WACnCK,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,aAAa,GAAG;AAAA;AAAA,UAExDN,CAAM;AAAA;AAAA,eAEDO,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,aAAa,WAAW;AAAA;AAAA;AAAA;AAAA,QAItEF,CAA0B;AAAA,WACvBG,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,GAAG;AAAA;AAAA,UAErDH,CAAU;AAAA,aACPI,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,QAAQ;AAAA;AAAA;AAAA,UAG5DX,CAAc;AAAA,aACXY,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,WAAW,GAAG;AAAA;AAAA,YAEhEE,oBAAkB;AAAA,cAChBC,cAAY;AAAA,uBACHF,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQlFT,CAAoB;AAAA,aACjBU,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,OAAO,GAAG;AAAA;AAAA,YAE5DR,CAAS;AAAA,iBACJS,EAAAA,OAAwBD,CAAK,EAAE,QAAQ,UAAU,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,CAKnF"}

package/build/cjs/components/Pagination/SimplePagination.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),i=require("react"),B=require("classnames"),p=require("../../react-base/src/consts/index.js"),J=require("react-i18next"),S=require("../Text/components/Label/Label.js"),l=require("./SimplePagination.styles.js"),m=require("./components/PaginationButtons.js"),Q=require("../../react-base/src/consts/classes.js"),v=({size:r,t,current:c,total:s,onChange:b})=>n.jsxs(l.QuickJumperPaginationListItem,{children:[n.jsx(l.TextInput,{value:c,onChange:b,size:r}),n.jsxs(l.QuickJumperText,{children:[n.jsx(S,{size:r,contrast:p.Contrasts.Subtle,children:t("ofTotal")}),n.jsx(S,{size:r,contrast:p.Contrasts.Subtle,children:s})]})]}),d=(r,t)=>Math.min(Math.max(r,1),t),A=({className:r,size:t=p.Sizes.Medium,current:c=1,total:s=1,quickJumper:b,startEndButtons:k,onPageChange:g,i18n:q,...T})=>{const{t:o}=J.useTranslation("pagination",{i18n:q}),[e,j]=i.useState(c),C=i.useMemo(()=>e===1,[e]),N=i.useMemo(()=>e===s,[e,s]);i.useEffect(()=>{j(d(c,s))},[c,s]);const a=i.useCallback((u,x)=>{const P=d(u,s);j(P),g==null||g(P,x)},[g,s]),L=i.useCallback(u=>{const x=Number(u.target.value);if(Number.isNaN(x)){u.preventDefault(),u.stopPropagation();return}const P=d(x,s);a(P,e)},[a,s,e]),h=i.useCallback(()=>a(1,e),[a,e]),I=i.useCallback(()=>a(s,e),[a,s,e]),f=i.useCallback(()=>a(e-1,e),[a,e]),M=i.useCallback(()=>a(e+1,e),[a,e]);return n.jsx(l.SimplePaginationContainer,{className:B(Q.PAGINATION_CLASS,r),$size:t,"aria-label":"pagination",...T,children:n.jsxs(l.PaginationList,{children:[k&&n.jsx(m.FirstPageButton,{onClick:h,size:t,disabled:C,t:o}),n.jsx(m.PrevPageButton,{onClick:f,size:t,disabled:C,t:o}),b&&n.jsx(v,{size:t,current:e,total:s,t:o,onChange:L}),n.jsx(m.NextPageButton,{onClick:M,size:t,disabled:N,t:o}),k&&n.jsx(m.LastPageButton,{onClick:I,size:t,disabled:N,t:o})]})})};module.exports=A;
+"use strict";const n=require("react/jsx-runtime"),r=require("react"),B=require("classnames"),C=require("../../react-base/src/consts/index.js"),J=require("../../libs/i18next/hooks/useTranslation.js"),h=require("../Text/components/Label/Label.js"),l=require("./SimplePagination.styles.js"),b=require("./components/PaginationButtons.js"),Q=require("./utils/numberFormatter.js"),v=require("../../react-base/src/consts/classes.js"),A=({size:i,t:a,current:o,total:s,onChange:x,numberFormatter:g})=>n.jsxs(l.QuickJumperPaginationListItem,{children:[n.jsx(l.TextInput,{value:o,onChange:x,size:i}),n.jsxs(l.QuickJumperText,{children:[n.jsx(h,{size:i,contrast:C.Contrasts.Subtle,children:a("ofTotal")}),n.jsx(h,{size:i,contrast:C.Contrasts.Subtle,children:g.format(s)})]})]}),d=(i,a)=>Math.min(Math.max(i,1),a),w=({className:i,size:a=C.Sizes.Medium,current:o=1,total:s=1,quickJumper:x,startEndButtons:g,onPageChange:p,i18n:q,numberFormatter:S=Q.defaultNumberFormatter(),...T})=>{const{t:u}=J.useTranslation("pagination",{i18n:q}),[e,k]=r.useState(o),j=r.useMemo(()=>e===1,[e]),N=r.useMemo(()=>e===s,[e,s]);r.useEffect(()=>{k(d(o,s))},[o,s]);const t=r.useCallback((c,m)=>{const P=d(c,s);k(P),p?.(P,m)},[p,s]),f=r.useCallback(c=>{const m=Number(c.target.value);if(Number.isNaN(m)){c.preventDefault(),c.stopPropagation();return}const P=d(m,s);t(P,e)},[t,s,e]),F=r.useCallback(()=>t(1,e),[t,e]),L=r.useCallback(()=>t(s,e),[t,s,e]),I=r.useCallback(()=>t(e-1,e),[t,e]),M=r.useCallback(()=>t(e+1,e),[t,e]);return n.jsx(l.SimplePaginationContainer,{className:B(v.PAGINATION_CLASS,i),$size:a,"aria-label":"pagination",...T,children:n.jsxs(l.PaginationList,{children:[g&&n.jsx(b.FirstPageButton,{onClick:F,size:a,disabled:j,t:u}),n.jsx(b.PrevPageButton,{onClick:I,size:a,disabled:j,t:u}),x&&n.jsx(A,{size:a,current:e,total:s,t:u,onChange:f,numberFormatter:S}),n.jsx(b.NextPageButton,{onClick:M,size:a,disabled:N,t:u}),g&&n.jsx(b.LastPageButton,{onClick:L,size:a,disabled:N,t:u})]})})};module.exports=w;
 //# sourceMappingURL=SimplePagination.js.map

package/build/cjs/components/Pagination/SimplePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimplePagination.js","sources":["../../../../src/components/Pagination/SimplePagination.tsx"],"sourcesContent":["import { type ChangeEventHandler, type ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { Contrasts, PAGINATION_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { PaginationTypes } from 'acinguiux-ds-react-base/components/Pagination';\nimport { useTranslation } from 'react-i18next';\nimport type { TFunction } from 'i18next';\n\nimport Label from '../Text/components/Label/Label';\nimport * as Styled from './SimplePagination.styles';\nimport type { ISimplePaginationProps } from './Pagination.types';\nimport { FirstPageButton, LastPageButton, NextPageButton, PrevPageButton } from './components/PaginationButtons';\n\ntype QuickJumperProps = {\n  size: PaginationTypes.Size;\n  t: TFunction<'pagination'>;\n  current: number;\n  total: number;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n};\n\nconst SimpleQuickJumper = ({ size, t, current, total, onChange }: QuickJumperProps) => (\n  <Styled.QuickJumperPaginationListItem>\n    <Styled.TextInput value={current} onChange={onChange} size={size} />\n    <Styled.QuickJumperText>\n      <Label size={size} contrast={Contrasts.Subtle}>\n        {t('ofTotal')}\n      </Label>\n      <Label size={size} contrast={Contrasts.Subtle}>\n        {total}\n      </Label>\n    </Styled.QuickJumperText>\n  </Styled.QuickJumperPaginationListItem>\n);\n\n// ensure page is > 1 and <= total\nconst ensurePageInRange = (page: number, total: number): number => Math.min(Math.max(page, 1), total);\n\nconst SimplePagination = ({\n  className,\n  size = Sizes.Medium,\n  current = 1,\n  total = 1,\n  quickJumper,\n  startEndButtons,\n  onPageChange,\n  i18n,\n  ...rest\n}: ISimplePaginationProps): ReactElement => {\n  const { t } = useTranslation('pagination', { i18n });\n  const [currentPage, setCurrentPage] = useState(current);\n  const isFirstPage = useMemo(() => currentPage === 1, [currentPage]);\n  const isLastPage = useMemo(() => currentPage === total, [currentPage, total]);\n\n  useEffect(() => {\n    setCurrentPage(ensurePageInRange(current, total));\n  }, [current, total]);\n\n  const onPageChangeHandler = useCallback(\n    (page: number, prevPage: number) => {\n      const newPage = ensurePageInRange(page, total);\n      setCurrentPage(newPage);\n      onPageChange?.(newPage, prevPage);\n    },\n    [onPageChange, total],\n  );\n\n  const onQuickJumperChangeHandler = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const pageNumber = Number(event.target.value);\n\n      if (Number.isNaN(pageNumber)) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        return;\n      }\n\n      const newPage = ensurePageInRange(pageNumber, total);\n\n      onPageChangeHandler(newPage, currentPage);\n    },\n    [onPageChangeHandler, total, currentPage],\n  );\n\n  const goToFirstPage = useCallback(() => onPageChangeHandler(1, currentPage), [onPageChangeHandler, currentPage]);\n  const goToLastPage = useCallback(\n    () => onPageChangeHandler(total, currentPage),\n    [onPageChangeHandler, total, currentPage],\n  );\n  const goToPrevPage = useCallback(\n    () => onPageChangeHandler(currentPage - 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n  const goToNextPage = useCallback(\n    () => onPageChangeHandler(currentPage + 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n\n  return (\n    <Styled.SimplePaginationContainer\n      className={classNames(PAGINATION_CLASS, className)}\n      $size={size}\n      aria-label=\"pagination\"\n      {...rest}\n    >\n      <Styled.PaginationList>\n        {startEndButtons && <FirstPageButton onClick={goToFirstPage} size={size} disabled={isFirstPage} t={t} />}\n        <PrevPageButton onClick={goToPrevPage} size={size} disabled={isFirstPage} t={t} />\n        {quickJumper && (\n          <SimpleQuickJumper\n            size={size}\n            current={currentPage}\n            total={total}\n            t={t}\n            onChange={onQuickJumperChangeHandler}\n          />\n        )}\n        <NextPageButton onClick={goToNextPage} size={size} disabled={isLastPage} t={t} />\n        {startEndButtons && <LastPageButton onClick={goToLastPage} size={size} disabled={isLastPage} t={t} />}\n      </Styled.PaginationList>\n    </Styled.SimplePaginationContainer>\n  );\n};\n\nexport default SimplePagination;\n"],"names":["SimpleQuickJumper","size","current","total","onChange","jsxs","Styled.QuickJumperPaginationListItem","jsx","Styled.TextInput","Styled.QuickJumperText","Label","Contrasts","ensurePageInRange","page","SimplePagination","className","Sizes","quickJumper","startEndButtons","onPageChange","i18n","rest","t","useTranslation","currentPage","setCurrentPage","useState","isFirstPage","useMemo","isLastPage","useEffect","onPageChangeHandler","useCallback","prevPage","newPage","onQuickJumperChangeHandler","event","pageNumber","goToFirstPage","goToLastPage","goToPrevPage","goToNextPage","Styled.SimplePaginationContainer","classNames","PAGINATION_CLASS","Styled.PaginationList","FirstPageButton","PrevPageButton","NextPageButton","LastPageButton"],"mappings":"sWAqBMA,EAAoB,CAAC,CAAE,KAAAC,EAAM,EAAG,QAAAC,EAAS,MAAAC,EAAO,SAAAC,KACpDC,EAAAA,KAACC,EAAAA,8BAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,UAAA,CAAiB,MAAON,EAAS,SAAAE,EAAoB,KAAAH,EAAY,EAClEI,OAACI,EAAAA,gBAAA,CACC,SAAA,CAAAF,EAAAA,IAACG,GAAM,KAAAT,EAAY,SAAUU,EAAAA,UAAU,OACpC,SAAA,EAAE,SAAS,EACd,QACCD,EAAA,CAAM,KAAAT,EAAY,SAAUU,EAAAA,UAAU,OACpC,SAAAR,CAAA,CACH,CAAA,CAAA,CACF,CAAA,EACF,EAIIS,EAAoB,CAACC,EAAcV,IAA0B,KAAK,IAAI,KAAK,IAAIU,EAAM,CAAC,EAAGV,CAAK,EAE9FW,EAAmB,CAAC,CACxB,UAAAC,EACA,KAAAd,EAAOe,EAAAA,MAAM,OACb,QAAAd,EAAU,EACV,MAAAC,EAAQ,EACR,YAAAc,EACA,gBAAAC,EACA,aAAAC,EACA,KAAAC,EACA,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAAC,CAAA,EAAMC,EAAAA,eAAe,aAAc,CAAE,KAAAH,EAAM,EAC7C,CAACI,EAAaC,CAAc,EAAIC,EAAAA,SAASxB,CAAO,EAChDyB,EAAcC,EAAAA,QAAQ,IAAMJ,IAAgB,EAAG,CAACA,CAAW,CAAC,EAC5DK,EAAaD,EAAAA,QAAQ,IAAMJ,IAAgBrB,EAAO,CAACqB,EAAarB,CAAK,CAAC,EAE5E2B,EAAAA,UAAU,IAAM,CACdL,EAAeb,EAAkBV,EAASC,CAAK,CAAC,CAClD,EAAG,CAACD,EAASC,CAAK,CAAC,EAEnB,MAAM4B,EAAsBC,EAAAA,YAC1B,CAACnB,EAAcoB,IAAqB,CAClC,MAAMC,EAAUtB,EAAkBC,EAAMV,CAAK,EAC7CsB,EAAeS,CAAO,EACtBf,GAAA,MAAAA,EAAee,EAASD,EAC1B,EACA,CAACd,EAAchB,CAAK,CAAA,EAGhBgC,EAA6BH,EAAAA,YAChCI,GAA+C,CAC9C,MAAMC,EAAa,OAAOD,EAAM,OAAO,KAAK,EAE5C,GAAI,OAAO,MAAMC,CAAU,EAAG,CAC5BD,EAAM,eAAA,EACNA,EAAM,gBAAA,EAEN,MACF,CAEA,MAAMF,EAAUtB,EAAkByB,EAAYlC,CAAK,EAEnD4B,EAAoBG,EAASV,CAAW,CAC1C,EACA,CAACO,EAAqB5B,EAAOqB,CAAW,CAAA,EAGpCc,EAAgBN,cAAY,IAAMD,EAAoB,EAAGP,CAAW,EAAG,CAACO,EAAqBP,CAAW,CAAC,EACzGe,EAAeP,EAAAA,YACnB,IAAMD,EAAoB5B,EAAOqB,CAAW,EAC5C,CAACO,EAAqB5B,EAAOqB,CAAW,CAAA,EAEpCgB,EAAeR,EAAAA,YACnB,IAAMD,EAAoBP,EAAc,EAAGA,CAAW,EACtD,CAACO,EAAqBP,CAAW,CAAA,EAE7BiB,EAAeT,EAAAA,YACnB,IAAMD,EAAoBP,EAAc,EAAGA,CAAW,EACtD,CAACO,EAAqBP,CAAW,CAAA,EAGnC,OACEjB,EAAAA,IAACmC,EAAAA,0BAAA,CACC,UAAWC,EAAWC,EAAAA,iBAAkB7B,CAAS,EACjD,MAAOd,EACP,aAAW,aACV,GAAGoB,EAEJ,SAAAhB,EAAAA,KAACwC,iBAAA,CACE,SAAA,CAAA3B,SAAoB4B,EAAAA,gBAAA,CAAgB,QAASR,EAAe,KAAArC,EAAY,SAAU0B,EAAa,EAAAL,EAAM,QACrGyB,EAAAA,eAAA,CAAe,QAASP,EAAc,KAAAvC,EAAY,SAAU0B,EAAa,EAAAL,EAAM,EAC/EL,GACCV,EAAAA,IAACP,EAAA,CACC,KAAAC,EACA,QAASuB,EACT,MAAArB,EACA,EAAAmB,EACA,SAAUa,CAAA,CAAA,QAGba,EAAAA,eAAA,CAAe,QAASP,EAAc,KAAAxC,EAAY,SAAU4B,EAAY,EAAAP,EAAM,EAC9EJ,SAAoB+B,EAAAA,eAAA,CAAe,QAASV,EAAc,KAAAtC,EAAY,SAAU4B,EAAY,EAAAP,CAAA,CAAM,CAAA,CAAA,CACrG,CAAA,CAAA,CAGN"}
+{"version":3,"file":"SimplePagination.js","sources":["../../../../src/components/Pagination/SimplePagination.tsx"],"sourcesContent":["import { type ChangeEventHandler, type ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { Contrasts, PAGINATION_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { PaginationTypes } from 'acinguiux-ds-react-base/components/Pagination';\n\nimport { useTranslation } from '../../libs/i18next/hooks/useTranslation';\nimport type { TFunction } from '../../libs/i18next/types';\nimport Label from '../Text/components/Label/Label';\nimport * as Styled from './SimplePagination.styles';\nimport type { ISimplePaginationProps } from './Pagination.types';\nimport { FirstPageButton, LastPageButton, NextPageButton, PrevPageButton } from './components/PaginationButtons';\nimport { defaultNumberFormatter } from './utils/numberFormatter';\n\ntype QuickJumperProps = {\n  size: PaginationTypes.Size;\n  t: TFunction<'pagination'>;\n  current: number;\n  total: number;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n  numberFormatter: Intl.NumberFormat;\n};\n\nconst SimpleQuickJumper = ({ size, t, current, total, onChange, numberFormatter }: QuickJumperProps) => (\n  <Styled.QuickJumperPaginationListItem>\n    <Styled.TextInput value={current} onChange={onChange} size={size} />\n    <Styled.QuickJumperText>\n      <Label size={size} contrast={Contrasts.Subtle}>\n        {t('ofTotal')}\n      </Label>\n      <Label size={size} contrast={Contrasts.Subtle}>\n        {numberFormatter.format(total)}\n      </Label>\n    </Styled.QuickJumperText>\n  </Styled.QuickJumperPaginationListItem>\n);\n\n// ensure page is > 1 and <= total\nconst ensurePageInRange = (page: number, total: number): number => Math.min(Math.max(page, 1), total);\n\nconst SimplePagination = ({\n  className,\n  size = Sizes.Medium,\n  current = 1,\n  total = 1,\n  quickJumper,\n  startEndButtons,\n  onPageChange,\n  i18n,\n  numberFormatter = defaultNumberFormatter(),\n  ...rest\n}: ISimplePaginationProps): ReactElement => {\n  const { t } = useTranslation('pagination', { i18n });\n  const [currentPage, setCurrentPage] = useState(current);\n  const isFirstPage = useMemo(() => currentPage === 1, [currentPage]);\n  const isLastPage = useMemo(() => currentPage === total, [currentPage, total]);\n\n  useEffect(() => {\n    setCurrentPage(ensurePageInRange(current, total));\n  }, [current, total]);\n\n  const onPageChangeHandler = useCallback(\n    (page: number, prevPage: number) => {\n      const newPage = ensurePageInRange(page, total);\n      setCurrentPage(newPage);\n      onPageChange?.(newPage, prevPage);\n    },\n    [onPageChange, total],\n  );\n\n  const onQuickJumperChangeHandler = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const pageNumber = Number(event.target.value);\n\n      if (Number.isNaN(pageNumber)) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        return;\n      }\n\n      const newPage = ensurePageInRange(pageNumber, total);\n\n      onPageChangeHandler(newPage, currentPage);\n    },\n    [onPageChangeHandler, total, currentPage],\n  );\n\n  const goToFirstPage = useCallback(() => onPageChangeHandler(1, currentPage), [onPageChangeHandler, currentPage]);\n  const goToLastPage = useCallback(\n    () => onPageChangeHandler(total, currentPage),\n    [onPageChangeHandler, total, currentPage],\n  );\n  const goToPrevPage = useCallback(\n    () => onPageChangeHandler(currentPage - 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n  const goToNextPage = useCallback(\n    () => onPageChangeHandler(currentPage + 1, currentPage),\n    [onPageChangeHandler, currentPage],\n  );\n\n  return (\n    <Styled.SimplePaginationContainer\n      className={classNames(PAGINATION_CLASS, className)}\n      $size={size}\n      aria-label=\"pagination\"\n      {...rest}\n    >\n      <Styled.PaginationList>\n        {startEndButtons && <FirstPageButton onClick={goToFirstPage} size={size} disabled={isFirstPage} t={t} />}\n        <PrevPageButton onClick={goToPrevPage} size={size} disabled={isFirstPage} t={t} />\n        {quickJumper && (\n          <SimpleQuickJumper\n            size={size}\n            current={currentPage}\n            total={total}\n            t={t}\n            onChange={onQuickJumperChangeHandler}\n            numberFormatter={numberFormatter}\n          />\n        )}\n        <NextPageButton onClick={goToNextPage} size={size} disabled={isLastPage} t={t} />\n        {startEndButtons && <LastPageButton onClick={goToLastPage} size={size} disabled={isLastPage} t={t} />}\n      </Styled.PaginationList>\n    </Styled.SimplePaginationContainer>\n  );\n};\n\nexport default SimplePagination;\n"],"names":["SimpleQuickJumper","size","t","current","total","onChange","numberFormatter","jsxs","Styled.QuickJumperPaginationListItem","jsx","Styled.TextInput","Styled.QuickJumperText","Label","Contrasts","ensurePageInRange","page","SimplePagination","className","Sizes","quickJumper","startEndButtons","onPageChange","i18n","defaultNumberFormatter","rest","useTranslation","currentPage","setCurrentPage","useState","isFirstPage","useMemo","isLastPage","useEffect","onPageChangeHandler","useCallback","prevPage","newPage","onQuickJumperChangeHandler","event","pageNumber","goToFirstPage","goToLastPage","goToPrevPage","goToNextPage","Styled.SimplePaginationContainer","classNames","PAGINATION_CLASS","Styled.PaginationList","FirstPageButton","PrevPageButton","NextPageButton","LastPageButton"],"mappings":"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"}

package/build/cjs/components/Pagination/utils/numberFormatter.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=()=>Intl.NumberFormat("en-GB",{style:"decimal"});exports.defaultNumberFormatter=e;
+//# sourceMappingURL=numberFormatter.js.map

package/build/cjs/components/Pagination/utils/numberFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberFormatter.js","sources":["../../../../../src/components/Pagination/utils/numberFormatter.ts"],"sourcesContent":["// eslint-disable-next-line new-cap\nexport const defaultNumberFormatter = () => Intl.NumberFormat('en-GB', { style: 'decimal' });\n"],"names":["defaultNumberFormatter"],"mappings":"4GACO,MAAMA,EAAyB,IAAM,KAAK,aAAa,QAAS,CAAE,MAAO,UAAW"}