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/Tabs.tsx.html ADDED Viewed

@@ -0,0 +1,610 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for Tabs.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> Tabs.tsx</h1>
+        <div class='clearfix'>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Statements</span>
+                <span class='fraction'>45/45</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Branches</span>
+                <span class='fraction'>49/49</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Functions</span>
+                <span class='fraction'>12/12</span>
+            </div>
+            <div class='fl pad1y space-right2'>
+                <span class="strong">100% </span>
+                <span class="quiet">Lines</span>
+                <span class='fraction'>41/41</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></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-yes">7x</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">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</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">111x</span>
+<span class="cline-any cline-yes">111x</span>
+<span class="cline-any cline-yes">111x</span>
+<span class="cline-any cline-yes">111x</span>
+<span class="cline-any cline-yes">111x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">111x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">111x</span>
+<span class="cline-any cline-yes">22x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">111x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">22x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">17x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">12x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</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-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">111x</span>
+<span class="cline-any cline-yes">29x</span>
+<span class="cline-any cline-yes">29x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">111x</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">331x</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">29x</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-yes">582x</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">27x</span>
+<span class="cline-any cline-yes">22x</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">331x</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">7x</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">/**
+ * Tabs component lets the developer split the UI into independent, reusable pieces, and think about each piece in isolation
+ * @returns JSX.Element
+ */
+&nbsp;
+import React, { useState, useRef, useCallback, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+&nbsp;
+interface VariantType {
+    [key: string]: {
+      container: string;
+      tab: string;
+      title: string;
+      active: string;
+      inactive: string;
+    };
+}
+&nbsp;
+// variant styling definition, both size and layout
+const variants: VariantType = {
+    default: {
+      container: 'flex border-b border-gray-200',
+      tab: 'text-[#092068]',
+      title: '',
+      active: 'border-b-2 border-[#092068] hover:border-b-2 hover:border-[#7392f3] hover:font-bold active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] focus:rounded-md',
+      inactive: 'hover:border-b-2 hover:border-[#7392f3] hover:font-bold',
+    },
+    outline: {
+      container: 'flex border-b border-gray-200',
+      tab: 'border-2 border-blue-500 text-blue-500',
+      title: '',
+      active: 'border-2 bg-[#092068] text-white hover:bg-[#d1dbfb] hover:text-[#092068] hover:font-bold active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1)]',
+      inactive: 'text-[#092068] hover:bg-[#d1dbfb] hover:font-bold',
+    },
+    transparent: {
+      container: 'flex border-b border-gray-200',
+      tab: 'text-[#092068]',
+      title: '',
+      active: 'border-b-2 border-[#092068] hover:border-b-2 hover:border-[#7392f3] hover:font-bold active:bg-[#9fc5f0] focus:shadow-[0px_0px_0px_3px_rgba(251,137,241,1.00)] focus:rounded-md',
+      inactive: 'hover:border-b-2 hover:border-[#7392f3] hover:font-bold',
+    },
+}
+&nbsp;
+export enum IconPosition {
+  Right = "right",
+  Left = "left",
+  IconOnly = "iconOnly",
+  None = "undefined"
+}
+&nbsp;
+interface Tab {
+  id: string;
+  label: string;
+  content: ReactNode;
+  activeIcon?: ReactNode | undefined;
+  inactiveIcon?: ReactNode | undefined; // Accepts any valid React element (e.g., image, icon component)
+  iconPosition?: IconPosition;
+}
+&nbsp;
+export interface TabsProps {
+  variant?: string;
+  className?: string;
+  classNameContainer?: string;
+  tabs: Tab[];
+}
+&nbsp;
+export const Tabs = ({ variant = 'default', tabs, className, classNameContainer}: TabsProps) =&gt; {
+  const [activeTab, setActiveTab] = useState(0);
+  const [hover, setHover] = useState(false);
+  const [currentTitle, setCurrentTitle] = useState('');
+  const tabRefs = useRef&lt;(HTMLButtonElement | null)[]&gt;([]);
+&nbsp;
+  if (variant === '') variant = 'default';  // empty variant, assign it value of 'default'
+&nbsp;
+  // Move focus to the active tab
+  const focusTab = useCallback((index: number) =&gt; {
+    tabRefs.current[index]?.focus();
+  }, []);
+&nbsp;
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent&lt;HTMLButtonElement&gt;, index: number) =&gt; {
+      if (event.key === "ArrowRight") {
+        const nextIndex = (index + 1) % tabs.length;
+        setActiveTab(nextIndex);
+        focusTab(nextIndex);
+      } else if (event.key === "ArrowLeft") {
+        const prevIndex = (index - 1 + tabs.length) % tabs.length;
+        setActiveTab(prevIndex);
+        focusTab(prevIndex);
+      } else if (event.key === "Home") {
+        setActiveTab(0);
+        focusTab(0);
+      } else if (event.key === "End") {
+        setActiveTab(tabs.length - 1);
+        focusTab(tabs.length - 1);
+      }
+    },
+    [tabs.length, focusTab]
+  );
+&nbsp;
+  const handleMouseOver = (title: string) =&gt; {
+    setHover(true);
+    setCurrentTitle(title);
+  };
+&nbsp;
+  return (
+    &lt;div className={twMerge('w-full', classNameContainer)}&gt;
+      {/* Tab List */}
+      &lt;div
+        role="tablist"
+        aria-label="Tabs"
+        className={twMerge(variants[variant].container, className)}
+      &gt;
+        {tabs.map((tab, index) =&gt; (
+          &lt;button
+            key={tab.id}
+            role="tab"
+            id={`tab-${tab.id}`}
+            onMouseEnter={() =&gt; handleMouseOver(tab.id)}
+            onMouseLeave={() =&gt; setHover(false)}
+            aria-selected={activeTab === index}
+            aria-controls={`panel-${tab.id}`}
+            tabIndex={activeTab === index ? 0 : -1}
+            ref={(el) =&gt; (tabRefs.current[index] = el)}
+            className={`flex px-6 py-3 md:py-[14px] lg:py-4 focus:outline-hidden ${(variant === "outline") ? (`border-[#092068] ${
+              index === 0
+                ? "border-l-2 border-t-2 border-b-2 rounded-l-md focus:rounded-l-md" // Left border for the first element
+                : index === tabs.length - 1
+                ? "border-r-2 border-t-2 border-b-2 rounded-r-md focus:rounded-r-md" // Right border for the last element
+                : "border-t-2 border-b-2" // Top and bottom borders for others
+            }`): ''} ${
+              activeTab === index
+                ? twMerge(variants[variant].active)
+                : twMerge(variants[variant].inactive)
+            }`}
+            onClick={() =&gt; setActiveTab(index)}
+            onKeyDown={(event) =&gt; handleKeyDown(event, index)}
+          &gt;
+            {tab.iconPosition === IconPosition.Left &amp;&amp; tab.activeIcon &amp;&amp; (
+              &lt;span className="icon-left mr-3 size-6 lg:mt-0.5"&gt;{activeTab === index ? (hover &amp;&amp; currentTitle === tab.id) ? tab.inactiveIcon : tab.activeIcon : tab.inactiveIcon}&lt;/span&gt;
+            )}
+            {
+              tab.iconPosition === "iconOnly" &amp;&amp; tab.activeIcon ?
+              (
+                &lt;span className="size-6 lg:mt-0.5"&gt;{activeTab === index ? (hover &amp;&amp; currentTitle === tab.id) ? tab.inactiveIcon : tab.activeIcon : tab.inactiveIcon}&lt;/span&gt;
+              )
+              :
+              (
+                &lt;span className='text-sm md:text-base lg:text-lg mt-0.5 md:mt-0'&gt;{tab.label}&lt;/span&gt;
+              )
+            }
+            {tab.iconPosition === "right" &amp;&amp; tab.activeIcon &amp;&amp; (
+              &lt;span className="icon-right ml-3 size-6 lg:mt-0.5"&gt;{activeTab === index ? (hover &amp;&amp; currentTitle === tab.id) ? tab.inactiveIcon : tab.activeIcon : tab.inactiveIcon}&lt;/span&gt;
+            )}
+          &lt;/button&gt;
+        ))}
+      &lt;/div&gt;
+&nbsp;
+      {/* Tab Panels */}
+      {tabs.map((tab, index) =&gt; (
+        &lt;div
+          key={tab.id}
+          role="tabpanel"
+          id={`panel-${tab.id}`}
+          aria-labelledby={`tab-${tab.id}`}
+          hidden={activeTab !== index}
+          //   className={`p-4 ${activeTab !== index ? 'hidden' : ''}`}
+          className="p-4"
+        &gt;
+          {tab.content}
+        &lt;/div&gt;
+      ))}
+    &lt;/div&gt;
+  );
+};
+&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>