npm - @dhasdk/simple-ui - Versions diffs - 1.0.7 → 1.0.8 - Mend

@dhasdk/simple-ui 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (227) hide show

package/.babelrc +12 -0
package/.storybook/main.ts +35 -0
package/.storybook/preview.ts +4 -0
package/BAKpostcss.config.jsBAK +15 -0
package/BAKtailwind.config.mjsBAK +99 -0
package/README.md +464 -16
package/coverage/storybook/coverage-storybook.json +32411 -0
package/coverage/storybook/lcov-report/Accordion.tsx.html +805 -0
package/coverage/storybook/lcov-report/Badge.tsx.html +346 -0
package/coverage/storybook/lcov-report/Breadcrumbs.tsx.html +742 -0
package/coverage/storybook/lcov-report/Button.tsx.html +448 -0
package/coverage/storybook/lcov-report/ButtonGroup.tsx.html +403 -0
package/coverage/storybook/lcov-report/Card.tsx.html +292 -0
package/coverage/storybook/lcov-report/CharacterCounter.tsx.html +253 -0
package/coverage/storybook/lcov-report/CheckBox.tsx.html +1555 -0
package/coverage/storybook/lcov-report/DatePicker.tsx.html +826 -0
package/coverage/storybook/lcov-report/Input.tsx.html +1012 -0
package/coverage/storybook/lcov-report/List.tsx.html +364 -0
package/coverage/storybook/lcov-report/Modal.tsx.html +745 -0
package/coverage/storybook/lcov-report/Pill.tsx.html +358 -0
package/coverage/storybook/lcov-report/Search.tsx.html +997 -0
package/coverage/storybook/lcov-report/SearchContent.tsx.html +235 -0
package/coverage/storybook/lcov-report/SectionHeader.tsx.html +358 -0
package/coverage/storybook/lcov-report/Select.tsx.html +1012 -0
package/coverage/storybook/lcov-report/Shield.tsx.html +802 -0
package/coverage/storybook/lcov-report/SideBarNav.tsx.html +490 -0
package/coverage/storybook/lcov-report/Skeleton.tsx.html +394 -0
package/coverage/storybook/lcov-report/Slider.tsx.html +385 -0
package/coverage/storybook/lcov-report/Status.tsx.html +322 -0
package/coverage/storybook/lcov-report/Tabs.tsx.html +610 -0
package/coverage/storybook/lcov-report/Toggle.tsx.html +373 -0
package/coverage/storybook/lcov-report/Tooltip.tsx.html +496 -0
package/coverage/storybook/lcov-report/base.css +224 -0
package/coverage/storybook/lcov-report/block-navigation.js +87 -0
package/coverage/storybook/lcov-report/favicon.png +0 -0
package/coverage/storybook/lcov-report/index.html +476 -0
package/coverage/storybook/lcov-report/prettify.css +1 -0
package/coverage/storybook/lcov-report/prettify.js +2 -0
package/coverage/storybook/lcov-report/sort-arrow-sprite.png +0 -0
package/coverage/storybook/lcov-report/sorter.js +196 -0
package/coverage/storybook/lcov.info +2312 -0
package/dist/README.md +1815 -0
package/eslint.config.mjs +13 -0
package/package.json +6 -7
package/project.json +11 -0
package/src/assets/img/Frame.svg +5 -0
package/src/assets/img/backArrowRight.svg +10 -0
package/src/assets/img/bc-separator.png +0 -0
package/src/assets/img/calendar.png +0 -0
package/src/assets/img/calendar.svg +4 -0
package/src/assets/img/check.svg +5 -0
package/src/assets/img/check_box.svg +10 -0
package/src/assets/img/check_box_empty.svg +10 -0
package/src/assets/img/check_box_fill.svg +10 -0
package/src/assets/img/check_box_fill_empty.svg +10 -0
package/src/assets/img/chevron-down-white.svg +2 -0
package/src/assets/img/chevron-down.svg +2 -0
package/src/assets/img/chevron-left.svg +1 -0
package/src/assets/img/chevron-right-light.svg +4 -0
package/src/assets/img/chevron-right.svg +3 -0
package/src/assets/img/chevron-up-white.svg +1 -0
package/src/assets/img/chevron-up.svg +1 -0
package/src/assets/img/clock.svg +6 -0
package/src/assets/img/close.svg +1 -0
package/src/assets/img/close2.svg +6 -0
package/src/assets/img/closeModal.svg +10 -0
package/src/assets/img/close_icon_dark.svg +10 -0
package/src/assets/img/close_small.svg +3 -0
package/src/assets/img/emergency_home.svg +10 -0
package/src/assets/img/first-aid-kit.svg +7 -0
package/src/assets/img/heartbeat.svg +4 -0
package/src/assets/img/home-gray.svg +3 -0
package/src/assets/img/home.svg +3 -0
package/src/assets/img/hospital.jpg +0 -0
package/src/assets/img/indeterminate_check_box.svg +10 -0
package/src/assets/img/indeterminate_check_box_fill.svg +10 -0
package/src/assets/img/info_24_ 1d4ed8.svg +3 -0
package/src/assets/img/info_24_ 2c6441.svg +3 -0
package/src/assets/img/marker_check_by_default.svg +10 -0
package/src/assets/img/marker_check_by_default_fill.svg +10 -0
package/src/assets/img/minus-accordion.svg +5 -0
package/src/assets/img/minus.svg +3 -0
package/src/assets/img/open.svg +1 -0
package/src/assets/img/pill-white.svg +7 -0
package/src/assets/img/pill.svg +5 -0
package/src/assets/img/plus-accordion.svg +5 -0
package/src/assets/img/plus.svg +4 -0
package/src/assets/img/prescription.svg +6 -0
package/src/assets/img/search.svg +10 -0
package/src/assets/img/search_icon_light.svg +10 -0
package/src/assets/img/separator.svg +3 -0
package/src/assets/img/stethoscope-white.svg +8 -0
package/src/assets/img/stethoscope.svg +8 -0
package/src/assets/img/thumb_up.svg +10 -0
package/src/assets/img/vector.svg +3 -0
package/src/assets/img/warning-badge-disabled.svg +11 -0
package/src/assets/img/warning-badge-green.svg +11 -0
package/src/assets/img/warning-badge-red.svg +11 -0
package/src/assets/img/warning-badge-yellow.svg +11 -0
package/src/assets/img/warning.svg +10 -0
package/src/global.d.ts +13 -0
package/{index.d.ts → src/index.ts} +13 -5
package/src/lib/Accordian--Accordian.stories.tsx +312 -0
package/src/lib/Accordion.spec.tsx +384 -0
package/src/lib/Accordion.tsx +240 -0
package/src/lib/AppointmentPicker.spec.tsx +138 -0
package/src/lib/AppointmentPicker.tsx +97 -0
package/src/lib/Badge--Badge.stories.tsx +60 -0
package/src/lib/Badge.spec.tsx +70 -0
package/src/lib/Badge.tsx +87 -0
package/src/lib/Breadcrumbs-Breadcrumbs.stories.tsx +114 -0
package/src/lib/Breadcrumbs.spec.tsx +218 -0
package/src/lib/Breadcrumbs.tsx +219 -0
package/src/lib/Button--Button.stories.tsx +220 -0
package/src/lib/Button.spec.tsx +241 -0
package/src/lib/Button.tsx +121 -0
package/src/lib/ButtonGroup--ButtonGroup.stories.tsx +129 -0
package/src/lib/ButtonGroup.spec.tsx +89 -0
package/src/lib/ButtonGroup.tsx +107 -0
package/src/lib/Card--Card.stories.tsx +113 -0
package/src/lib/Card.spec.tsx +112 -0
package/src/lib/Card.tsx +69 -0
package/src/lib/CharacterCounter--CharacterCounter.stories.tsx +169 -0
package/src/lib/CharacterCounter.spec.tsx +123 -0
package/src/lib/CharacterCounter.tsx +56 -0
package/src/lib/CheckBox--CheckBox.stories.tsx +107 -0
package/src/lib/CheckBox.spec.tsx +412 -0
package/src/lib/CheckBox.tsx +491 -0
package/src/lib/DatePicker--DatePicker.stories.tsx +228 -0
package/src/lib/DatePicker.spec.tsx +424 -0
package/src/lib/DatePicker.tsx +247 -0
package/src/lib/Input--Input.stories.tsx +449 -0
package/src/lib/Input.spec.tsx +281 -0
package/src/lib/Input.tsx +309 -0
package/src/lib/List--List.stories.tsx +157 -0
package/src/lib/List.spec.tsx +211 -0
package/src/lib/List.tsx +93 -0
package/src/lib/Modal--Modal.stories.tsx +454 -0
package/src/lib/Modal.spec.tsx +202 -0
package/src/lib/Modal.tsx +220 -0
package/src/lib/Pill--Pill.stories.tsx +98 -0
package/src/lib/Pill.spec.tsx +103 -0
package/src/lib/Pill.tsx +91 -0
package/src/lib/ProgressBar.spec.tsx +106 -0
package/src/lib/ProgressBar.tsx +112 -0
package/src/lib/RadioGroup.spec.tsx +84 -0
package/src/lib/RadioGroup.tsx +74 -0
package/src/lib/RadioIcon.tsx +13 -0
package/src/lib/Search--Search.stories.tsx +67 -0
package/src/lib/Search.spec.tsx +182 -0
package/src/lib/Search.tsx +304 -0
package/src/lib/SearchContent.tsx +51 -0
package/src/lib/SectionHeader--SectionHeader.stories.tsx +98 -0
package/src/lib/SectionHeader.spec.tsx +60 -0
package/src/lib/SectionHeader.tsx +91 -0
package/src/lib/Select--Select.stories.tsx +387 -0
package/src/lib/Select.spec.tsx +493 -0
package/src/lib/Select.tsx +311 -0
package/src/lib/Shield--Shield.stories.tsx +196 -0
package/src/lib/Shield.spec.tsx +275 -0
package/src/lib/Shield.tsx +239 -0
package/src/lib/SideBarNav--SideBarNav.stories.tsx +136 -0
package/src/lib/SideBarNav.spec.tsx +178 -0
package/src/lib/SideBarNav.tsx +135 -0
package/src/lib/Skeleton--Skeleton.stories.tsx +77 -0
package/src/lib/Skeleton.module.css +16 -0
package/src/lib/Skeleton.spec.tsx +83 -0
package/src/lib/Skeleton.tsx +103 -0
package/src/lib/SkipLink.spec.tsx +76 -0
package/src/lib/SkipLink.tsx +48 -0
package/src/lib/Slider--Slider.stories.tsx +108 -0
package/src/lib/Slider.module.css +109 -0
package/src/lib/Slider.spec.tsx +67 -0
package/src/lib/Slider.tsx +101 -0
package/src/lib/Status--Status.stories.tsx +93 -0
package/src/lib/Status.spec.tsx +118 -0
package/src/lib/Status.tsx +79 -0
package/src/lib/Tabs--Tabs.stories.tsx +294 -0
package/src/lib/Tabs.spec.tsx +249 -0
package/src/lib/Tabs.tsx +188 -0
package/src/lib/Tester.spec.tsx +17 -0
package/src/lib/Toggle--Toggle.stories.tsx +162 -0
package/src/lib/Toggle.spec.tsx +122 -0
package/src/lib/Toggle.tsx +96 -0
package/src/lib/Tooltip--Tooltip.stories.tsx +315 -0
package/src/lib/Tooltip.spec.tsx +307 -0
package/src/lib/Tooltip.tsx +137 -0
package/src/lib/bak-simple-ui.stories.tsx-bak +24 -0
package/src/styles.css +190 -0
package/tsconfig.json +25 -0
package/tsconfig.lib.json +42 -0
package/tsconfig.spec.json +29 -0
package/tsconfig.storybook.json +36 -0
package/vite.config.mts +87 -0
package/vitest.setup.ts +12 -0
package/index.css +0 -1
package/index.js +0 -35
package/index.mjs +0 -4981
package/lib/Accordion.d.ts +0 -36
package/lib/AppointmentPicker.d.ts +0 -21
package/lib/Badge.d.ts +0 -11
package/lib/Breadcrumbs.d.ts +0 -13
package/lib/Button.d.ts +0 -15
package/lib/ButtonGroup.d.ts +0 -8
package/lib/Card.d.ts +0 -11
package/lib/CharacterCounter.d.ts +0 -11
package/lib/CheckBox.d.ts +0 -30
package/lib/DatePicker.d.ts +0 -7
package/lib/Input.d.ts +0 -16
package/lib/List.d.ts +0 -22
package/lib/Modal.d.ts +0 -18
package/lib/Pill.d.ts +0 -13
package/lib/ProgressBar.d.ts +0 -19
package/lib/RadioGroup.d.ts +0 -15
package/lib/Search.d.ts +0 -26
package/lib/SearchContent.d.ts +0 -6
package/lib/SectionHeader.d.ts +0 -18
package/lib/Select.d.ts +0 -19
package/lib/Shield.d.ts +0 -12
package/lib/SideBarNav.d.ts +0 -21
package/lib/Skeleton.d.ts +0 -15
package/lib/SkipLink.d.ts +0 -22
package/lib/Slider.d.ts +0 -14
package/lib/Status.d.ts +0 -10
package/lib/Tabs.d.ts +0 -23
package/lib/Toggle.d.ts +0 -11
package/lib/Tooltip.d.ts +0 -14

package/coverage/storybook/lcov-report/Breadcrumbs.tsx.html ADDED Viewed

@@ -0,0 +1,742 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for Breadcrumbs.tsx</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="prettify.css" />
+    <link rel="stylesheet" href="base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <h1><a href="index.html">All files</a> Breadcrumbs.tsx</h1>
+        <div class='clearfix'>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">84.78% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>39/46</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">62.96% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>17/27</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">91.66% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>11/12</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">86.04% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>37/43</span>
+            </div>
+        </div>
+        <p class="quiet">
+            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+        </p>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input type="search" id="fileSearch">
+            </div>
+        </template>
+    </div>
+    <div class='status-line high'></div>
+    <pre><table class="coverage">
+<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
+<a name='L2'></a><a href='#L2'>2</a>
+<a name='L3'></a><a href='#L3'>3</a>
+<a name='L4'></a><a href='#L4'>4</a>
+<a name='L5'></a><a href='#L5'>5</a>
+<a name='L6'></a><a href='#L6'>6</a>
+<a name='L7'></a><a href='#L7'>7</a>
+<a name='L8'></a><a href='#L8'>8</a>
+<a name='L9'></a><a href='#L9'>9</a>
+<a name='L10'></a><a href='#L10'>10</a>
+<a name='L11'></a><a href='#L11'>11</a>
+<a name='L12'></a><a href='#L12'>12</a>
+<a name='L13'></a><a href='#L13'>13</a>
+<a name='L14'></a><a href='#L14'>14</a>
+<a name='L15'></a><a href='#L15'>15</a>
+<a name='L16'></a><a href='#L16'>16</a>
+<a name='L17'></a><a href='#L17'>17</a>
+<a name='L18'></a><a href='#L18'>18</a>
+<a name='L19'></a><a href='#L19'>19</a>
+<a name='L20'></a><a href='#L20'>20</a>
+<a name='L21'></a><a href='#L21'>21</a>
+<a name='L22'></a><a href='#L22'>22</a>
+<a name='L23'></a><a href='#L23'>23</a>
+<a name='L24'></a><a href='#L24'>24</a>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a>
+<a name='L35'></a><a href='#L35'>35</a>
+<a name='L36'></a><a href='#L36'>36</a>
+<a name='L37'></a><a href='#L37'>37</a>
+<a name='L38'></a><a href='#L38'>38</a>
+<a name='L39'></a><a href='#L39'>39</a>
+<a name='L40'></a><a href='#L40'>40</a>
+<a name='L41'></a><a href='#L41'>41</a>
+<a name='L42'></a><a href='#L42'>42</a>
+<a name='L43'></a><a href='#L43'>43</a>
+<a name='L44'></a><a href='#L44'>44</a>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a>
+<a name='L47'></a><a href='#L47'>47</a>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</a>
+<a name='L66'></a><a href='#L66'>66</a>
+<a name='L67'></a><a href='#L67'>67</a>
+<a name='L68'></a><a href='#L68'>68</a>
+<a name='L69'></a><a href='#L69'>69</a>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</a>
+<a name='L72'></a><a href='#L72'>72</a>
+<a name='L73'></a><a href='#L73'>73</a>
+<a name='L74'></a><a href='#L74'>74</a>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</a>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<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>
+<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>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</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-yes">45x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">45x</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">5x</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">5x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-no">&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-yes">45x</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">30x</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">15x</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-yes">30x</span>
+<span class="cline-any cline-yes">45x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">45x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&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-no">&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-yes">30x</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">30x</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&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">30x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">30x</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">30x</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-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">90x</span>
+<span class="cline-any cline-no">&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">90x</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-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">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import * as React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocation, Link } from 'react-router-dom';
+import separatorSvg from '../assets/img/separator.svg';
+import home from '../assets/img/home-gray.svg';
+import { useEffect, useRef, useState, useMemo } from 'react';
+&nbsp;
+function prettify(name: string) {
+  return name
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, c =&gt; c.toUpperCase());
+}
+interface VariantType {
+  [key: string]: string;
+}
+&nbsp;
+// variant styling definition, both size and layout (portrait vs landscape)
+const variants: VariantType = {
+  default: 'overflow-x-auto w-full text-base md:text-lg', // image top
+  bold: 'overflow-x-auto font-bold w-full text-base md:text-lg',
+}
+&nbsp;
+export interface route {
+  name: string;
+  route: string;
+}
+&nbsp;
+export interface BreadcrumbsProps extends React.HTMLAttributes&lt;HTMLDivElement&gt; {
+  className?: string;
+  classNameContainer?: string;
+  variant?: string;
+  separator?: string; // i.e. &gt;&gt;, or --&gt;, etc.
+  routes?: route[];
+}
+&nbsp;
+export const Breadcrumbs = React.forwardRef&lt;HTMLDivElement, BreadcrumbsProps&gt;(
+  ({ classNameContainer, className, routes, variant = 'default',
+      separator = separatorSvg, ...props }, ref) =&gt; {
+    const containerRef = useRef&lt;HTMLDivElement&gt;(null);
+    const iconRef = useRef&lt;HTMLImageElement&gt;(null);
+    const [ellipsis, setEllipsis] = useState(false);
+    const [currentTime, setCurrentTime] = useState&lt;number&gt;();
+    const [reqContentWidth, setReqContentWidth] = useState&lt;number&gt;(0);  // content width required to display non-ellipsis breadcrumbs
+&nbsp;
+    // Define Routes
+    const { pathname } = useLocation();
+&nbsp;
+    const finalRoutes: route[] = useMemo(() =&gt; {
+      // if manualRoutes was passed in, use it
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (routes &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >routes.length &gt; 0) {</span>
+<span class="cstat-no" title="statement not covered" >        return routes;</span>
+      }
+&nbsp;
+      const segments = pathname
+        .split('/')
+        .filter(Boolean);
+&nbsp;
+      return segments.map((segment, idx, arr) =&gt; ({
+        name: prettify(decodeURIComponent(segment)),
+        route: '/' + arr.slice(0, idx + 1).join('/'),
+      }));
+    }, [routes, pathname]);
+&nbsp;
+&nbsp;
+    // measures containerWidth at page load
+    // should re-measure at home-icon swap
+    useEffect(() =&gt; {
+      const fullContainer = containerRef.current;
+      if (fullContainer) {
+        setReqContentWidth(fullContainer.offsetWidth);
+      }
+&nbsp;
+      // build auto-routes if manualRoutes not present
+    }, []);
+&nbsp;
+    const checkOverflow = () =&gt; {
+      const container = containerRef.current;
+&nbsp;
+      if ((container &amp;&amp; !currentTime) || (container &amp;&amp; currentTime &amp;&amp; Date.now() &gt; (currentTime + 200))) {
+&nbsp;
+        <span class="missing-if-branch" title="if path not taken" >I</span>if (ellipsis) {
+<span class="cstat-no" title="statement not covered" >          <span class="missing-if-branch" title="if path not taken" >I</span>if (container.clientWidth &gt; reqContentWidth) {</span>
+            // console.log('setting ellipsis false');
+<span class="cstat-no" title="statement not covered" >            setEllipsis(false);</span>
+          }
+        } else {
+          <span class="missing-if-branch" title="if path not taken" >I</span>if (container.scrollWidth &gt; container.clientWidth) {
+            // console.log('setting ellipsis true');
+<span class="cstat-no" title="statement not covered" >            setEllipsis(true);</span>
+          }
+        }
+&nbsp;
+        setCurrentTime(Date.now());
+      }
+    };
+&nbsp;
+    useEffect(() =&gt; {
+      // clientWidth = 0 for inline or w/o css, otherwise width of inner element in pixels
+      // scrollWidth = measurement of width of elements content
+      // console.log('breadcrumbs useEffect');
+&nbsp;
+      const container = containerRef.current;
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (!container) {
+        // console.log('no container - returning');
+<span class="cstat-no" title="statement not covered" >        return;</span>
+      }
+&nbsp;
+      // run once to set initial state
+      checkOverflow();
+&nbsp;
+      // whenever the container itself changes size, re-check
+      const ro = new ResizeObserver(checkOverflow);
+      ro.observe(container);
+      return () =&gt; { ro.disconnect(); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentTime, finalRoutes]);  // re‑run when the crumbs change
+&nbsp;
+    return (
+      &lt;nav
+        className={twMerge(variants[variant], classNameContainer)}
+        {...props}
+        ref={ref}
+        aria-label="Breadcrumbs"
+      &gt;
+        &lt;div
+          ref={containerRef}
+          className="flex list-none flex-nowrap text-clip overflow-hidden text-nowrap w-full"
+          &gt;
+          {/* First item / home page link */}
+          &lt;span className="breadcrumb-item inline-flex items-center flex-shrink-0"&gt;
+            &lt;Link
+              to="/"
+              className={twMerge(
+              "text-[#747476] hover:text-[#0000ff] md:hover:underline capitalize me-2 hidden md:inline-flex",
+              className
+            )}&gt;Homepage
+            &lt;/Link&gt;
+            &lt;Link
+              to="/"
+              className={twMerge(
+              "capitalize me-2 inline-flex md:hidden",
+              className
+            )}&gt;&lt;img src={home} ref={iconRef} alt='home icon'&gt;&lt;/img&gt;
+            &lt;/Link&gt;
+            {finalRoutes.length &gt; 0 ? &lt;span className={twMerge("me-2", className)}&gt;&lt;img src={separator} alt='vector'&gt;&lt;/img&gt;&lt;/span&gt; : <span class="branch-1 cbranch-no" title="branch not covered" >''}</span>
+          &lt;/span&gt;
+&nbsp;
+          &lt;span
+            className=''
+            // ref={ellipsisRef}
+            // ellipsisRef is used to measure size of container w/ content - may have to move to a different span
+            &gt;
+          {finalRoutes.map((part, index) =&gt; {
+            // Reconstruct the path up to the current segment
+            // const path = '/' + routes.slice(0, index + 1).join('/');
+&nbsp;
+            <span class="missing-if-branch" title="if path not taken" >I</span>if (ellipsis) {
+<span class="cstat-no" title="statement not covered" >              return (</span>
+                &lt;span key={index} className='inline-flex items-center flex-shrink-0 text-nowrap'&gt;
+                {index === finalRoutes.length - 1 ? (
+                  &lt;&gt;
+                  &lt;span className='text-nowrap me-3'&gt;...&lt;/span&gt;
+                  &lt;span className={twMerge("me-3", className)}&gt;&lt;img src={separator} alt='vector'&gt;&lt;/img&gt;&lt;/span&gt;
+                  &lt;span
+                      className="text-black font-bold capitalize text-nowrap"
+                      aria-current="page"
+                      &gt;
+                      {decodeURIComponent(part.name).replace(/-/g, ' ')}
+                  &lt;/span&gt;
+                  &lt;/&gt;
+                ) : (
+                  ''
+                )}
+                &lt;/span&gt;
+              );
+            } else {
+&nbsp;
+            return (
+              &lt;span
+                key={index}
+                className="breadcrumb-item inline-flex items-center flex-shrink-0"
+                &gt;
+&nbsp;
+                {index === finalRoutes.length - 1 ? (
+                  // Render the current page as plain text (last item in list)
+                  &lt;span
+                    className="text-black font-bold capitalize"
+                    aria-current="page"
+                    &gt;
+                    {decodeURIComponent(part.name).replace(/-/g, ' ')}
+                  &lt;/span&gt;
+                ) : (
+                  // Render intermediate items as links
+                  &lt;Link
+                    to={part.route}
+                    className={twMerge(
+                      "text-[#747476] hover:text-[#0000ff] md:hover:underline capitalize me-3",
+                      className
+                    )}
+                  &gt;
+                    {decodeURIComponent(part.name).replace(/-/g, ' ')}
+                  &lt;/Link&gt;
+                )}
+                {/* Separator for intermediate items */}
+                {index &lt; finalRoutes.length - 1 &amp;&amp; (
+                  &lt;span className={twMerge("me-3", className)}&gt;&lt;img src={separator} alt='vector'&gt;&lt;/img&gt;&lt;/span&gt;
+                )}
+              &lt;/span&gt;
+            );
+&nbsp;
+          }
+&nbsp;
+          })}
+          &lt;/span&gt;
+        &lt;/div&gt;
+      &lt;/nav&gt;
+    );
+  }
+)<span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >;</span></span>
+&nbsp;</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 2025-05-29T21:55:20.662Z
+            </div>
+        <script src="prettify.js"></script>
+        <script>
+            window.onload = function () {
+                prettyPrint();
+            };
+        </script>
+        <script src="sorter.js"></script>
+        <script src="block-navigation.js"></script>
+    </body>
+</html>