@madie/madie-design-system 1.0.39 → 1.0.41

package/coverage/lcov-report/index.jsx.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>9/9</span>
+                <span class='fraction'>11/11</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">66.66% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/6</span>
+                <span class='fraction'>14/14</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>3/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>9/9</span>
+                <span class='fraction'>11/11</span>
             </div>
         
             
@@ -184,7 +184,136 @@
 <a name='L119'></a><a href='#L119'>119</a>
 <a name='L120'></a><a href='#L120'>120</a>
 <a name='L121'></a><a href='#L121'>121</a>
-<a name='L122'></a><a href='#L122'>122</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a>
+<a name='L144'></a><a href='#L144'>144</a>
+<a name='L145'></a><a href='#L145'>145</a>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</a>
+<a name='L149'></a><a href='#L149'>149</a>
+<a name='L150'></a><a href='#L150'>150</a>
+<a name='L151'></a><a href='#L151'>151</a>
+<a name='L152'></a><a href='#L152'>152</a>
+<a name='L153'></a><a href='#L153'>153</a>
+<a name='L154'></a><a href='#L154'>154</a>
+<a name='L155'></a><a href='#L155'>155</a>
+<a name='L156'></a><a href='#L156'>156</a>
+<a name='L157'></a><a href='#L157'>157</a>
+<a name='L158'></a><a href='#L158'>158</a>
+<a name='L159'></a><a href='#L159'>159</a>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<a name='L169'></a><a href='#L169'>169</a>
+<a name='L170'></a><a href='#L170'>170</a>
+<a name='L171'></a><a href='#L171'>171</a>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -195,27 +324,41 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -239,9 +382,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -285,6 +428,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">18x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -304,136 +449,279 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from 'react';
-import { IconButton, Snackbar } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from "react";
+import PropTypes from "prop-types";
+import { visuallyHidden } from '@mui/utils';
 &nbsp;
-const Toast = ({
-    open,
-    message,
-    toastType, // 'danger | success, more later when mockups come out
-    autoHideDuration,
-    onClose,
-    testId,
-    toastKey,
-    ...rest
-}) =&gt; {
-    const dangerColor = '#D92F2F'
-    const successColor = '#4d7e23'
-    // we can map our colors and icons to make this reusable for multiple info types.
-    const colorMap = {
-        danger: dangerColor,
-        success: successColor
-    }
-    const iconMap = {
-        danger: ErrorOutlineIcon,
-        success: CheckCircleOutlineIcon
-    }
-    const selectedColor = colorMap[toastType];
-    const SelectedIcon = iconMap[toastType];
+import {
+    Pagination as PaginationComponent,
+    PaginationItem,
+    Select,
+    MenuItem,
+    Typography,
+} from "@mui/material";
+import { styled } from "@mui/system";
+&nbsp;
+// for ts later implemeentation.
+// interface PaginationProps {
+//     totalItems: number; // total items
+//     visibleItems: number; // returned by paging object in spring
+//     count: number; // page count
+//     limit: number; // items per page
+//     limitOptions: number[]; // limit options
+//     shape?: "rounded" | "circular"; // style
+//     page: number; // current page zer0 indexed
+//     siblingCount?: number;
+//     boundaryCount?: number;
+//     handlePageChange: (e: any, v: any) =&gt; void;
+//     handleLimitChange: (e: any) =&gt; void;
+//     hidePrevButton: boolean;
+//     hideNextButton: boolean;
+//   }
 &nbsp;
-    const Message = (
-    &lt;div className='messageCont'&gt;
-        &lt;div&gt;
-            &lt;div className='errorCont'&gt;
-            {SelectedIcon &amp;&amp; (
-                &lt;SelectedIcon
-                className='leftIcon'
-                /&gt;
-            )}
-            &lt;/div&gt;
-            &lt;p className='messageText' data-testid={testId}&gt;
-            {message}
-            &lt;/p&gt;
-        &lt;/div&gt;
-        &lt;div style={{display: 'block'}}&gt;
-            &lt;IconButton
-                className='icon-button'
-                aria-label="close"
-                color="inherit"
-                sx={{ p: 0}}
-                onClick={onClose}
-            &gt;
-                &lt;CloseIcon /&gt;
-            &lt;/IconButton&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    )
+const Container = styled("div")({
+    display: "flex",
+    flexGrow: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    minHeight: 90,
+    padding: "0px 24px",
+});
+const Row = styled("div")({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+});
+const Pagination = ({
+    totalItems = 0,
+    visibleItems = 0,
+    count = 1,
+    offset = 0,
+    shape = "rounded",
+    page = 0,
+    limit = 10,
+    limitOptions = [10, 25, 50],
+    handlePageChange,
+    handleLimitChange,
+    hidePrevButton = true,
+    hideNextButton = false,
+}) =&gt; {
     return (
-        &lt;Snackbar
-            key={toastKey ? toastKey : <span class="branch-1 cbranch-no" title="branch not covered" >undefined}</span>
-            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-            sx={{
-            overflow:'hidden',
-            color: selectedColor,
-            borderRadius: 1,
-            '&amp; .MuiPaper-root': {
-                backgroundColor: '#fff',
-                padding: 0,
-                color: selectedColor
-            },
-            '&amp; .MuiSvgIcon-root': {
-                color: '#242424'
-            },
-            '&amp; .MuiSnackbarContent-message': {
-                padding: 0,
-                flexGrow: 1,
-                '.messageCont': {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    flexGrow: 1,
-                    justifyContent: 'space-between',
-                    'div': {
-                        display: 'flex',
-                        '.messageText':{
-                            mb: 0,
-                            p: 2.375,
-                            fontFamily: 'Rubik',
-                            fontWeight: 500,
-                            fontSize: 14
+        &lt;Container&gt;
+            &lt;Row&gt;
+                {/*this span is only for screen reader*/}
+                &lt;span
+                    id="items-per-page"
+                    style={visuallyHidden}
+                &gt;
+                    Items per page {limit}.
+                &lt;/span&gt;
+                &lt;Typography
+                    fontSize={14}
+                    fontFamily="Rubik"
+                    sx={{
+                        color: "#333333",
+                    }}
+                &gt;
+                    Items per page
+                &lt;/Typography&gt;
+                &lt;Select
+                    size="small"
+                    sx={{
+                        margin: "0 11px",
+                        "&amp; .MuiOutlinedInput-notchedOutline": {
+                            "&amp; legend": {
+                                width: 0,
+                            },
                         },
-                        '.errorCont':{
-                            backgroundColor: selectedColor,
-                            '.leftIcon':{
-                                m: 2,
-                                color: '#fff'
-                            }
+                        "&amp; .MuiInputBase-input": {
+                            fontFamily: "Rubik",
+                            fontSize: 14,
+                            borderRadius: 3,
                         },
-                        '.icon-button':{
-                            m: 2,
-                            '&amp;. MuiSvgIcon-root': {
-                                color: '#242424'
-                            }
-                        }
+                    }}
+                    id="pagination-limit-select"
+                    value={limit}
+                    label={null}
+                    onChange={handleLimitChange}
+                    inputProps={{
+                        "aria-labelledby":"items-per-page",
+                        "aria-describedby": "items-per-page offset-of-total-items",
+                    }}
+                &gt;
+                    {limitOptions.map((val) =&gt; (
+                        &lt;MenuItem
+                            value={val}
+                            key={`limit-${val}`}
+                            data-testid="limit-option"
+                        &gt;
+                            {val}
+                        &lt;/MenuItem&gt;
+                    ))}
+                &lt;/Select&gt;
+                &lt;Typography
+                    fontSize={14}
+                    id="offset-of-total-items"
+                    sx={{
+                        color: "#757575",
+                    }}
+                    fontFamily="Rubik"
+                &gt;{`${offset + 1} - ${
+                    visibleItems + offset
+                } of ${totalItems}`}&lt;/Typography&gt;
+            &lt;/Row&gt;
+            &lt;PaginationComponent
+                sx={{
+                    "&amp; .MuiPagination-ul": {
+                        "&amp; .MuiPaginationItem-root": {
+                            color: "#0073C8",
+                            border: "solid 1px #CACACA",
+                            "&amp;:focus": {
+                                border: "0.0625rem solid #125496",
+                                borderRadius: "0.1875rem",
+                                boxShadow: "0 0 0 0.25rem #cbe4ff",
+                                outline: "none",
+                            },
+                        },
+                        "&amp; .Mui-selected": {
+                            color: "#fff",
+                            backgroundColor: "#0073C8 !important",
+                        },
+                        "&amp; .MuiPaginationItem-ellipsis": {
+                            border: "solid 1px transparent",
+                        },
+                        "&amp; .MuiPaginationItem-previousNext": {
+                            border: "solid 1px transparent",
+                        },
+                    },
+                }}
+                renderItem={(props) =&gt; {
+                    if (props.type === "next") {
+                        return (
+                            &lt;PaginationItem
+                                sx={{
+                                    border: "solid 1px transparent",
+                                    "&amp; .Mui-selected": {
+                                        backgroundColor: "#0073C8",
+                                        border: "solid 1px #0073C8",
+                                        color: "#fff",
+                                    },
+                                    "&amp;::before": {
+                                        content: '"Next  "',
+                                        marginRight: "5px",
+                                        fontSize: 14,
+                                        fontFamily: "Rubik",
+                                    },
+                                }}
+                                {...props}
+                            /&gt;
+                        );
                     }
-                },
-                '&amp; .MuiSvgIcon-root': {
-                    color: '#242424'
-&nbsp;
-                }
-            }
-        }}
+                    if (props.type === "previous") {
+                        return (
+                            &lt;PaginationItem
+                                sx={{
+                                    border: "solid 1px transparent",
+                                    "&amp; .Mui-selected": {},
+                                    "&amp;::after": {
+                                        content: '"  Previous"',
+                                        marginLeft: "5px",
+                                        fontSize: 14,
+                                        fontFamily: "Rubik",
+                                    },
+                                }}
+                                {...props}
+                            /&gt;
+                        );
+                    }
+                    return &lt;PaginationItem {...props} /&gt;;
+                }}
+                count={count}
+                page={page}
+                shape={shape}
+                siblingCount={2}
+                boundaryCount={0}
+                onChange={handlePageChange}
+                hidePrevButton={hidePrevButton}
+                hideNextButton={hideNextButton}
+            /&gt;
+        &lt;/Container&gt;
+    );
+};
 &nbsp;
-        autoHideDuration={autoHideDuration}
-        open={open}
-        onClose={onClose}
-        message={message ? Message : <span class="branch-1 cbranch-no" title="branch not covered" >undefined}</span>
-        {...rest}
-      /&gt;)
-}
+Pagination.propTypes = {
+    totalItems: PropTypes.number,
+    visibleItems: PropTypes.number,
+    count: PropTypes.number,
+    offset: PropTypes.number,
+    shape: PropTypes.string,
+    limit: PropTypes.number,
+    page: PropTypes.number,
+    limitOptions: PropTypes.array,
+    handlePageChange: PropTypes.func,
+    handleLimitChange: PropTypes.func,
+    hidePrevButton: PropTypes.bool,
+    hideNextButton: PropTypes.bool,
+    type: PropTypes.string,
+};
 &nbsp;
-export default Toast;
-&nbsp;</pre></td></tr></table></pre>
+export { Pagination };</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Apr 07 2022 13:16:51 GMT-0700 (Pacific Daylight Time)
+                at 2023-01-27T17:32:44.199Z
             </div>
         <script src="prettify.js"></script>
         <script>