uikit-react-public 0.11.24 → 0.17.4

package/lib/components/Header/__tests__/__snapshots__/Header.test.tsx.snap

@@ -20,11 +20,11 @@ exports[`Header > snapshot: variant=avatar 1`] = `
       d="m 60.405678,1.52 v 25.62 c 0,1.74 -0.06,3.55 -1.6,5 -0.76,0.69 -2.12,1.45 -4.19,1.45 -1.53,0 -3.12,-0.4 -4.18,-1.51 -1.48,-1.39 -1.548529,-3.190021 -1.54,-4.94 V 1.52 h -13.22 v 24.63 c 0.13,4.22 0.25,8.72 4.31,12.6 0.47,0.45 0.841814,1.24 1.53,1.24 v 0 h 25.72 v 0 c 0,0 1.07,-0.8 1.54,-1.24 4.91,-4.59 4.88306,-10.690077 4.91,-15.4 V 1.52 Z m 48.710002,25.09 c -0.47,1.39 -2.3,6.73 -8.44,6.73 -6.500002,0 -8.800002,-5.75 -8.800002,-11.85 0,-1.64 0,-6.29 3.13,-9.24 0.88,-0.87 2.71,-2.21 5.610002,-2.21 5.54,0 7.54,4.36 8.61,6.8 l 11.03,-5.4 c -0.89,-1.62 -1.71,-3.01 -3.48,-4.82 -4.37,-4.41 -10.39,-6.62 -16.7,-6.62 -14.120002,0 -21.610002,11.21 -21.610002,22.25 0,6.71 2.74,13.61 8.56,17.74 h 26.450002 c 0.98,-0.65 1.92,-1.4 2.79,-2.23 1.99,-1.97 3,-3.83 4.06,-5.81 z M 11.167848,7.86 h -0.11 l -0.03,-0.03 V 7.71 l -0.03,-0.03 h -0.11 l -0.03,-0.03 V 7.54 c 0,0 0,-0.02 -0.03,-0.02 h -0.07 c 0,0 -0.04,-0.02 -0.05,-0.05 V 7.39 c 0,-0.29 0,-1.21 -0.52,-1.89 -0.44,-0.65 -1.05,-0.99 -1.39,-1.15 0,-0.12 -0.16,-0.17 -0.26,-0.21 -0.02,0 -0.03,0 -0.04,-0.02 -0.05,0 -0.09,-0.04 -0.09,-0.07 V 3.99 c 0,0 0.03,-0.06 0.1,-0.06 0.02,0 0.03,0 0.03,-0.03 V 3.78 c 0,0 0,-0.04 -0.04,-0.04 h -0.12 c 0,0 -0.05,-0.02 -0.05,-0.05 V 3.63 c 0,0 -0.03,-0.06 -0.05,-0.07 V 2.77 l 0.03,-0.02 v 0 c 0,0 0.02,0 0.02,-0.02 V 2.65 c 0,0 0,-0.02 -0.02,-0.02 h -0.04 c 0,0 -0.02,-0.02 -0.02,-0.06 0,-0.04 0,-0.05 0.02,-0.06 h 0.03 0.03 V 2.43 h -0.03 -0.03 c 0,0 -0.03,0 -0.06,-0.03 -0.13,-0.1 -0.27,-0.26 -0.27,-0.28 V 2.09 c 0,0 0,-0.05 -0.05,-0.05 -0.05,0 -0.03,-0.03 0,-0.03 V 1.98 1.93 l -0.06,-0.12 v 0 c 0,0 -0.07,0.1 -0.07,0.12 v 0.05 c 0,0 0,0.03 0.02,0.03 0.02,0 0.02,0.03 0,0.03 -0.04,0 -0.05,0.03 -0.05,0.05 v 0.03 c 0,0 -0.14,0.18 -0.28,0.28 0,0.02 -0.05,0.03 -0.04,0.03 h -0.04 -0.02 v 0.08 h 0.02 0.03 c 0,0 0.02,0.02 0.02,0.06 0,0.04 0,0.05 -0.02,0.06 h -0.04 c 0,0 -0.02,0 -0.02,0.02 v 0.08 c 0,0 0,0.02 0.02,0.02 h 0.02 c 0,0 0.026878,2.452e-4 0.03,0.02 v 0.79 0 c 0,0 -0.05,0.03 -0.05,0.07 v 0.06 c 0,0 0,0.05 -0.04,0.05 h -0.12 c 0,0 -0.05,0.02 -0.05,0.04 V 3.9 c 0,0 0.02,0.03 0.03,0.03 0.06,0 0.11,0.02 0.11,0.06 v 0.06 c 0,0 -0.05,0.06 -0.09,0.07 h -0.03 c -0.1,0.04 -0.27,0.1 -0.28,0.23 -0.34,0.16 -0.95,0.5 -1.39,1.15 -0.51,0.69 -0.52,1.62 -0.52,1.9 v 0.07 c 0,0 -0.09,0.05 -0.06,0.05 h -0.07 l -0.03,0.02 v 0.11 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.02 0.02,0.02 0.06,0 0.13,0.03 0.13,0.1 0,0.12 0.07,0.13 0.1,0.13 v 0.47 c 0,0.1 -0.08,0.15 -0.13,0.16 l -0.02,0.02 v 0.48 l 3.26,-0.71 v 0 l 3.26,0.71 V 8.91 c 0,0 0,-0.02 -0.02,-0.02 -0.05,0 -0.13,-0.05 -0.13,-0.16 V 8.27 c 0,0 0.1,-0.02 0.1,-0.14 0,-0.07 0.07,-0.1 0.1,-0.1 0.02,0 0.02,-1.35e-5 0.02,-0.02 V 7.89 l -0.03,-0.03 z m 3.62,10.3 v -0.94 h -0.56 v -0.52 0 h -0.07 v -0.03 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 0 c 0,0 0.0026,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 c 0,0 0.0082,-0.0039 0.02,-0.02 v -0.17 h 0.31 l 0.03,-0.03 0.11,-0.57 c 0.06,-0.12 0.18,-0.1 0.18,-0.1 h 0.02 l 0.11,-0.37 c 0,0 0.02,-0.03 -0.02,-0.04 -0.02,0 -7.13,-1.51 -7.13,-1.51 0,0 -7.10999996,1.51 -7.11999996,1.51 -0.04,0 -0.03,0.04 -0.03,0.04 l 0.1,0.36 v 0 c 0,0 0.12,0 0.18,0.09 l 0.1,0.58 c 0,0 0,0.03 0.05,0.03 h 0.31 v 0.18 h 0.02 0.04 c 0,0 0.02,0.02 0.02,0.05 0,0.03 0.02,0.16 0.12,0.25 0,0.02 0,0.05 -0.03,0.05 h -0.03 c 0,0 -0.03,0 -0.02,0.03 v 0.09 0.07 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0.1 h -0.02 -0.05 -0.02 V 17.2 H 0.87784804 v 0.94 h -0.55 v 0.95 H 15.297848 v -0.95 h -0.56 z m -10.86,-5.69 v 0.08 l 0.02,0.02 v 0 c 0,0 0.019368,10e-6 0.02,0.02 v 3.95 l -0.06,0.06 v 0 0.07 0.02 h -0.06 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 0 c 0,0 -0.04,-0.04 -0.05,-0.06 v -3.95 -0.02 0 c 0,0 0.00259,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.1,-0.22 0.1,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00816,-0.0039 0.02,-0.02 v -0.17 h 1.25 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 v 0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.05 v 0 0 -0.08 0 l -0.07,-0.08 V 12.6 12.58 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.03,-0.04 -0.03,-0.05 0.1,-0.08 0.12,-0.22 0.12,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.22 v 0.17 0.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.03,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.24 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.32,0 v 0.08 0.02 h 0.02 c 0,0 0.01937,10e-6 0.02,0.02 v 3.95 l -0.07,0.06 v 0.08 0.02 h -0.07 v 0.02 0.1 h -1.28 V 16.7 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 l 0.02,-0.02 v 0 c 0,0 0.02,-4e-5 0.02,-0.02 v -0.07 -0.09 -0.03 h -0.04 c 0,0 -0.03,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 V 12 11.83 h 1.22 V 12 c 0,0 0,0.02 0.02,0.02 h 0.04 c 0,0 0.03,0.02 0.03,0.04 0,0.03 0,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.03,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.35,0 v 0.08 c 0,0 0,0.02 0.02,0.02 v 0 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.03561,0.0075 -0.02,0.02 v 0.1 h -1.27 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 V 12.6 l 0.02,-0.02 v 0 c 0,0 0.0026,-0.01022 0.02,-0.02 V 12.49 12.4 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 v -0.02 -0.17 h 1.22 v 0.17 c 0,0 0.02,0.02 0.03,0.02 h 0.04 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.02,0.02 0,0.03 v 0.09 z M 67.235678,40 h -25.72 M 125.60568,39.99 V 1.46 h 13.16 v 30.29 h 17.08 v 8.24 h -30.25 z M 87.045678,40 v 0"
     />
   </svg>
-  <h1
+  <div
     class="css-bwc2r5"
   >
     LIDS
-  </h1>
+  </div>
 </header>
 `;
 
@@ -48,10 +48,10 @@ exports[`Header > snapshot: variant=breadcrumbs 1`] = `
       d="m 60.405678,1.52 v 25.62 c 0,1.74 -0.06,3.55 -1.6,5 -0.76,0.69 -2.12,1.45 -4.19,1.45 -1.53,0 -3.12,-0.4 -4.18,-1.51 -1.48,-1.39 -1.548529,-3.190021 -1.54,-4.94 V 1.52 h -13.22 v 24.63 c 0.13,4.22 0.25,8.72 4.31,12.6 0.47,0.45 0.841814,1.24 1.53,1.24 v 0 h 25.72 v 0 c 0,0 1.07,-0.8 1.54,-1.24 4.91,-4.59 4.88306,-10.690077 4.91,-15.4 V 1.52 Z m 48.710002,25.09 c -0.47,1.39 -2.3,6.73 -8.44,6.73 -6.500002,0 -8.800002,-5.75 -8.800002,-11.85 0,-1.64 0,-6.29 3.13,-9.24 0.88,-0.87 2.71,-2.21 5.610002,-2.21 5.54,0 7.54,4.36 8.61,6.8 l 11.03,-5.4 c -0.89,-1.62 -1.71,-3.01 -3.48,-4.82 -4.37,-4.41 -10.39,-6.62 -16.7,-6.62 -14.120002,0 -21.610002,11.21 -21.610002,22.25 0,6.71 2.74,13.61 8.56,17.74 h 26.450002 c 0.98,-0.65 1.92,-1.4 2.79,-2.23 1.99,-1.97 3,-3.83 4.06,-5.81 z M 11.167848,7.86 h -0.11 l -0.03,-0.03 V 7.71 l -0.03,-0.03 h -0.11 l -0.03,-0.03 V 7.54 c 0,0 0,-0.02 -0.03,-0.02 h -0.07 c 0,0 -0.04,-0.02 -0.05,-0.05 V 7.39 c 0,-0.29 0,-1.21 -0.52,-1.89 -0.44,-0.65 -1.05,-0.99 -1.39,-1.15 0,-0.12 -0.16,-0.17 -0.26,-0.21 -0.02,0 -0.03,0 -0.04,-0.02 -0.05,0 -0.09,-0.04 -0.09,-0.07 V 3.99 c 0,0 0.03,-0.06 0.1,-0.06 0.02,0 0.03,0 0.03,-0.03 V 3.78 c 0,0 0,-0.04 -0.04,-0.04 h -0.12 c 0,0 -0.05,-0.02 -0.05,-0.05 V 3.63 c 0,0 -0.03,-0.06 -0.05,-0.07 V 2.77 l 0.03,-0.02 v 0 c 0,0 0.02,0 0.02,-0.02 V 2.65 c 0,0 0,-0.02 -0.02,-0.02 h -0.04 c 0,0 -0.02,-0.02 -0.02,-0.06 0,-0.04 0,-0.05 0.02,-0.06 h 0.03 0.03 V 2.43 h -0.03 -0.03 c 0,0 -0.03,0 -0.06,-0.03 -0.13,-0.1 -0.27,-0.26 -0.27,-0.28 V 2.09 c 0,0 0,-0.05 -0.05,-0.05 -0.05,0 -0.03,-0.03 0,-0.03 V 1.98 1.93 l -0.06,-0.12 v 0 c 0,0 -0.07,0.1 -0.07,0.12 v 0.05 c 0,0 0,0.03 0.02,0.03 0.02,0 0.02,0.03 0,0.03 -0.04,0 -0.05,0.03 -0.05,0.05 v 0.03 c 0,0 -0.14,0.18 -0.28,0.28 0,0.02 -0.05,0.03 -0.04,0.03 h -0.04 -0.02 v 0.08 h 0.02 0.03 c 0,0 0.02,0.02 0.02,0.06 0,0.04 0,0.05 -0.02,0.06 h -0.04 c 0,0 -0.02,0 -0.02,0.02 v 0.08 c 0,0 0,0.02 0.02,0.02 h 0.02 c 0,0 0.026878,2.452e-4 0.03,0.02 v 0.79 0 c 0,0 -0.05,0.03 -0.05,0.07 v 0.06 c 0,0 0,0.05 -0.04,0.05 h -0.12 c 0,0 -0.05,0.02 -0.05,0.04 V 3.9 c 0,0 0.02,0.03 0.03,0.03 0.06,0 0.11,0.02 0.11,0.06 v 0.06 c 0,0 -0.05,0.06 -0.09,0.07 h -0.03 c -0.1,0.04 -0.27,0.1 -0.28,0.23 -0.34,0.16 -0.95,0.5 -1.39,1.15 -0.51,0.69 -0.52,1.62 -0.52,1.9 v 0.07 c 0,0 -0.09,0.05 -0.06,0.05 h -0.07 l -0.03,0.02 v 0.11 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.03 -0.03,0.03 h -0.11 c 0,0 -0.03,0 -0.03,0.03 v 0.12 c 0,0 0,0.02 0.02,0.02 0.06,0 0.13,0.03 0.13,0.1 0,0.12 0.07,0.13 0.1,0.13 v 0.47 c 0,0.1 -0.08,0.15 -0.13,0.16 l -0.02,0.02 v 0.48 l 3.26,-0.71 v 0 l 3.26,0.71 V 8.91 c 0,0 0,-0.02 -0.02,-0.02 -0.05,0 -0.13,-0.05 -0.13,-0.16 V 8.27 c 0,0 0.1,-0.02 0.1,-0.14 0,-0.07 0.07,-0.1 0.1,-0.1 0.02,0 0.02,-1.35e-5 0.02,-0.02 V 7.89 l -0.03,-0.03 z m 3.62,10.3 v -0.94 h -0.56 v -0.52 0 h -0.07 v -0.03 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 0 c 0,0 0.0026,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 c 0,0 0.0082,-0.0039 0.02,-0.02 v -0.17 h 0.31 l 0.03,-0.03 0.11,-0.57 c 0.06,-0.12 0.18,-0.1 0.18,-0.1 h 0.02 l 0.11,-0.37 c 0,0 0.02,-0.03 -0.02,-0.04 -0.02,0 -7.13,-1.51 -7.13,-1.51 0,0 -7.10999996,1.51 -7.11999996,1.51 -0.04,0 -0.03,0.04 -0.03,0.04 l 0.1,0.36 v 0 c 0,0 0.12,0 0.18,0.09 l 0.1,0.58 c 0,0 0,0.03 0.05,0.03 h 0.31 v 0.18 h 0.02 0.04 c 0,0 0.02,0.02 0.02,0.05 0,0.03 0.02,0.16 0.12,0.25 0,0.02 0,0.05 -0.03,0.05 h -0.03 c 0,0 -0.03,0 -0.02,0.03 v 0.09 0.07 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0.1 h -0.02 -0.05 -0.02 V 17.2 H 0.87784804 v 0.94 h -0.55 v 0.95 H 15.297848 v -0.95 h -0.56 z m -10.86,-5.69 v 0.08 l 0.02,0.02 v 0 c 0,0 0.019368,10e-6 0.02,0.02 v 3.95 l -0.06,0.06 v 0 0.07 0.02 h -0.06 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 0 c 0,0 -0.04,-0.04 -0.05,-0.06 v -3.95 -0.02 0 c 0,0 0.00259,-0.01024 0.02,-0.02 v -0.07 -0.09 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.1,-0.22 0.1,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00816,-0.0039 0.02,-0.02 v -0.17 h 1.25 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 v 0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.05 v 0 0 -0.08 0 l -0.07,-0.08 V 12.6 12.58 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.03,-0.04 -0.03,-0.05 0.1,-0.08 0.12,-0.22 0.12,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.22 v 0.17 0.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.34,0 v 0.08 0.02 h 0.02 v 0.02 3.95 l -0.06,0.06 v 0 0.09 h -0.07 c 0,0 -0.035609,0.0075 -0.02,0.02 v 0.1 h -1.28 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 -0.02 h 0.02 v -0.02 -0.07 c 0,0 0,-0.07 0.02,-0.09 0,-0.02 0,-0.03 -0.03,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.03,-0.04 h 0.04 c 0,0 0.00818,-0.0039 0.02,-0.02 v -0.17 h 1.24 V 12 12.02 h 0.05 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.03,0.02 -0.02,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.32,0 v 0.08 0.02 h 0.02 c 0,0 0.01937,10e-6 0.02,0.02 v 3.95 l -0.07,0.06 v 0.08 0.02 h -0.07 v 0.02 0.1 h -1.28 V 16.7 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 v -3.95 l 0.02,-0.02 v 0 c 0,0 0.02,-4e-5 0.02,-0.02 v -0.07 -0.09 -0.03 h -0.04 c 0,0 -0.03,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 V 12 11.83 h 1.22 V 12 c 0,0 0,0.02 0.02,0.02 h 0.04 c 0,0 0.03,0.02 0.03,0.04 0,0.03 0,0.17 0.11,0.26 0.02,0 0,0.04 -0.02,0.04 h -0.03 c 0,0 -0.03,0.02 -0.03,0.03 0,0.02 0.02,0.07 0.02,0.09 z m 2.35,0 v 0.08 c 0,0 0,0.02 0.02,0.02 v 0 0.02 3.95 l -0.07,0.07 v 0.09 h -0.07 c 0,0 -0.03561,0.0075 -0.02,0.02 v 0.1 h -1.27 v -0.11 0 h -0.06 v 0 -0.02 -0.06 -0.02 l -0.06,-0.06 V 12.6 l 0.02,-0.02 v 0 c 0,0 0.0026,-0.01022 0.02,-0.02 V 12.49 12.4 c 0,-0.02 0,-0.03 -0.02,-0.03 h -0.03 c 0,0 -0.04,-0.04 -0.02,-0.05 0.1,-0.08 0.11,-0.22 0.11,-0.25 0,-0.02 0,-0.04 0.02,-0.04 h 0.05 v -0.02 -0.17 h 1.22 v 0.17 c 0,0 0.02,0.02 0.03,0.02 h 0.04 c 0,0 0.02,0.02 0.02,0.04 0,0.03 0.02,0.17 0.12,0.26 0,0 0,0.04 -0.03,0.04 h -0.03 c 0,0 -0.02,0.02 0,0.03 v 0.09 z M 67.235678,40 h -25.72 M 125.60568,39.99 V 1.46 h 13.16 v 30.29 h 17.08 v 8.24 h -30.25 z M 87.045678,40 v 0"
     />
   </svg>
-  <h1
+  <div
     class="css-bwc2r5"
   >
     LIDS
-  </h1>
+  </div>
 </header>
 `;

package/lib/components/Heading/Documentation.mdx

@@ -53,7 +53,7 @@ All screens in UCL Experience apps should have a sensible semantic hierarchy. Th
 
 - `level`: A **number** from 1 to 4, corresponding to the level of the HTML heading element to be rendered. Default is 1, if otherwise unspecified.
 - `margins`: A **boolean** value. If `false`, the heading will have no margins. Default is `true`.
-- `testid`: A **string** value. If provided, the heading element will have a `data-testid` attribute with this value. The <a href="https://www.educative.io/answers/what-is-the-data-testid-attribute-in-testing" target="_blank">`data-testid` attribute</a> is used for identifying this element for testing. If unspecified, `ucl-heading` is used.
+- `testid`: A **string** value. If provided, the heading element will have a `data-testid` attribute with this value. The <a href="https://www.educative.io/answers/what-is-the-data-testid-attribute-in-testing" target="_blank">`data-testid` attribute</a> is used for identifying this element for testing. If unspecified, `ucl-uikit-heading` is used.
 
 Pass the text you want in the heading as children: `<Heading>My heading text</Heading>`.
 

package/lib/components/Heading/Heading.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Heading from './Heading';
 
 const meta = {
-  title: 'Components/Ready to use/Heading',
+  title: 'Components/Heading',
   component: Heading,
   parameters: {
     layout: 'centered',

package/lib/components/Heading/Heading.tsx

@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
-export const NAME = 'ucl-heading';
+export const NAME = 'ucl-uikit-heading';
 
 export interface HeadingBaseProps extends HTMLAttributes<HTMLHeadingElement> {
   level?: 1 | 2 | 3 | 4;

package/lib/components/Heading/__tests__/Heading.test.tsx

@@ -12,22 +12,16 @@ describe('Heading', () => {
         <Heading>This is a test</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: custom test id', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Heading testId='custom-test-id'>
-          This is a test
-        </Heading>
+        <Heading testId='custom-test-id'>This is a test</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: level', () => {
@@ -39,9 +33,7 @@ describe('Heading', () => {
         <Heading level={4}>Level 4</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: no margins', () => {
@@ -50,9 +42,7 @@ describe('Heading', () => {
         <Heading margins={false}>No margins</Heading>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('Test ID: Default', () => {
@@ -61,16 +51,14 @@ describe('Heading', () => {
         <Heading>This is a test</Heading>
       </ThemeContextProvider>
     );
-    const heading = screen.getByTestId('ucl-heading');
+    const heading = screen.getByTestId('ucl-uikit-heading');
     expect(heading).toBeDefined();
   });
 
   test('Test ID: Custom', () => {
     render(
       <ThemeContextProvider>
-        <Heading testId='custom-test-id'>
-          This is a test
-        </Heading>
+        <Heading testId='custom-test-id'>This is a test</Heading>
       </ThemeContextProvider>
     );
     const heading = screen.getByTestId('custom-test-id');

package/lib/components/Heading/__tests__/__snapshots__/Heading.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Heading > snapshot: custom test id 1`] = `
 <h1
-  class="ucl-heading css-1bjykaw"
+  class="ucl-uikit-heading css-1bjykaw"
   data-testid="custom-test-id"
 >
   This is a test
@@ -11,8 +11,8 @@ exports[`Heading > snapshot: custom test id 1`] = `
 
 exports[`Heading > snapshot: level 1`] = `
 <h1
-  class="ucl-heading css-1bjykaw"
-  data-testid="ucl-heading"
+  class="ucl-uikit-heading css-1bjykaw"
+  data-testid="ucl-uikit-heading"
 >
   Level 1
 </h1>
@@ -20,8 +20,8 @@ exports[`Heading > snapshot: level 1`] = `
 
 exports[`Heading > snapshot: minimal props 1`] = `
 <h1
-  class="ucl-heading css-1bjykaw"
-  data-testid="ucl-heading"
+  class="ucl-uikit-heading css-1bjykaw"
+  data-testid="ucl-uikit-heading"
 >
   This is a test
 </h1>
@@ -29,8 +29,8 @@ exports[`Heading > snapshot: minimal props 1`] = `
 
 exports[`Heading > snapshot: no margins 1`] = `
 <h1
-  class="ucl-heading css-x9klp3"
-  data-testid="ucl-heading"
+  class="ucl-uikit-heading css-x9klp3"
+  data-testid="ucl-uikit-heading"
 >
   No margins
 </h1>

package/lib/components/Icon/Icon.stories.tsx

@@ -3,7 +3,7 @@ import Icon from './Icon';
 import { ComponentType } from 'react';
 
 const meta: Meta = {
-  title: 'Components/Ready to use/Icon',
+  title: 'Components/Icon',
   component: Icon,
   parameters: {
     // Appearing automatically, due to composition

package/lib/components/IconButton/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import IconButton from './IconButton';
 import Icon from '../Icon/Icon';
 
 const meta: Meta = {
-  title: 'Components/Ready to use/IconButton',
+  title: 'Components/IconButton',
   component: IconButton,
   argTypes: {
     icon: {

package/lib/components/Input/Input.stories.tsx

@@ -3,7 +3,7 @@ import { Input } from '../../../lib';
 import { Icon } from '../../../lib';
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Ready to use/Input',
+  title: 'Components/Input',
   component: Input,
   parameters: {
     layout: 'centered',

package/lib/components/Label/Label.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Label from './Label';
 
 const meta = {
-  title: 'Components/Ready to use/Label',
+  title: 'Components/Label',
   component: Label,
 } satisfies Meta<typeof Label>;
 

package/lib/components/Label/Label.tsx

@@ -43,8 +43,6 @@ const Label = forwardRef<Ref, LabelProps>(
 
     const baseStyle = css`
       width: 100%;
-      min-width: 50px;
-      max-width: 660px;
       color: ${theme.color.neutral.grey90};
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};

package/lib/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Label > snapshot: Only required prop (text) 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -12,7 +12,7 @@ exports[`Label > snapshot: Only required prop (text) 1`] = `
 
 exports[`Label > snapshot: className prop 1`] = `
 <label
-  class="ucl-uikit-label test-class-name css-v576g6"
+  class="ucl-uikit-label test-class-name css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -22,7 +22,7 @@ exports[`Label > snapshot: className prop 1`] = `
 
 exports[`Label > snapshot: testId prop 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="test123"
   for=""
 >
@@ -32,7 +32,7 @@ exports[`Label > snapshot: testId prop 1`] = `
 
 exports[`Label > snapshot: type prop with explicit block value 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -42,7 +42,7 @@ exports[`Label > snapshot: type prop with explicit block value 1`] = `
 
 exports[`Label > snapshot: type prop with inline value 1`] = `
 <label
-  class="ucl-uikit-label css-qmiqiq"
+  class="ucl-uikit-label css-11raiub"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -52,7 +52,7 @@ exports[`Label > snapshot: type prop with inline value 1`] = `
 
 exports[`Label > snapshot: with disabled prop 1`] = `
 <label
-  class="ucl-uikit-label css-2pe9mc"
+  class="ucl-uikit-label css-19nek55"
   data-testid="ucl-uikit-label"
   for=""
 >
@@ -62,7 +62,7 @@ exports[`Label > snapshot: with disabled prop 1`] = `
 
 exports[`Label > snapshot: with optional prop 1`] = `
 <label
-  class="ucl-uikit-label css-v576g6"
+  class="ucl-uikit-label css-116lyj5"
   data-testid="ucl-uikit-label"
   for=""
 >

package/lib/components/Link/BaseLink.tsx

@@ -0,0 +1,84 @@
+import React, { AnchorHTMLAttributes, ElementType, forwardRef } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export interface BaseLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  component?: ElementType;
+  size?: 'small' | 'default';
+  noVisited?: boolean;
+  disabled?: boolean;
+  testId?: string;
+}
+
+const NAME = 'ucl-uikit-base-link';
+
+const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkProps>(
+  (
+    {
+      testId = NAME,
+      className,
+      children,
+      size = 'default',
+      disabled = false,
+      component: Component = 'a',
+      ...props
+    },
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const baseStyle = css`
+      font-family: ${theme.font.family.primary};
+      font-size: ${theme.font.size.f16};
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: ${theme.boxShadow.focus};
+      }
+    `;
+
+    const smallStyle = css`
+      font-size: ${theme.font.size.f14};
+    `;
+
+    const disabledStyle = css`
+      cursor: not-allowed;
+      color: ${theme.color.link.disabled};
+
+      &:hover {
+        color: ${theme.color.link.disabled};
+      }
+    `;
+
+    const style = cx(
+      NAME,
+      baseStyle,
+      size === 'small' && smallStyle,
+      disabled && disabledStyle,
+      className
+    );
+
+    return (
+      <Component
+        ref={ref}
+        className={style}
+        data-testid={testId}
+        disabled={disabled}
+        href={disabled ? undefined : props.href}
+        onClick={
+          disabled
+            ? (ev: React.MouseEvent) => {
+                ev.preventDefault();
+                return false;
+              }
+            : props.onClick
+        }
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+export default BaseLink;

package/lib/components/Link/Link.tsx

@@ -1,36 +1,23 @@
-import {
-  memo,
-  forwardRef,
-  AnchorHTMLAttributes,
-  ElementType,
-  ComponentPropsWithRef,
-} from 'react';
+import { forwardRef } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../../theme';
+import useTheme from '../../theme/useTheme';
+import BaseLink, { BaseLinkProps } from './BaseLink';
 
-export const NAME = 'ucl-link';
-
-export interface LinkBaseProps {
-  noVisited?: boolean;
-  testId?: string;
-  component?: ElementType;
+export interface LinkProps extends BaseLinkProps {
+  variant?: 'primary' | 'secondary';
 }
 
-export type LinkProps<C extends ElementType = 'a'> = LinkBaseProps &
-  (C extends 'a'
-    ? AnchorHTMLAttributes<HTMLAnchorElement>
-    : Omit<ComponentPropsWithRef<C>, keyof LinkBaseProps>);
-
-export type Ref = HTMLAnchorElement;
+const NAME = 'ucl-uikit-link';
 
-const Link = forwardRef<Ref, LinkProps>(
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (
     {
       noVisited = false,
+      variant = 'primary',
+      disabled = false,
       testId = NAME,
       className,
       children,
-      component: Component = 'a',
       ...props
     },
     ref
@@ -38,15 +25,24 @@ const Link = forwardRef<Ref, LinkProps>(
     const [theme] = useTheme();
 
     const baseStyle = css`
-      color: ${theme.color.link.default};
-      font-family: ${theme.font.family.primary};
+      text-decoration-skip-ink: none;
+      text-decoration-thickness: 10%;
+      text-underline-offset: 25%;
+      text-underline-position: from-font;
+    `;
 
-      &:hover {
+    const primaryStyle = css`
+      color: ${theme.color.link.default};
+      &:active {
         color: ${theme.color.link.hover};
       }
+    `;
+
+    const secondaryStyle = css`
+      color: ${theme.color.link.secondaryDefault};
 
       &:active {
-        color: ${theme.color.link.visited};
+        color: ${theme.color.link.secondaryHover};
       }
     `;
 
@@ -56,31 +52,75 @@ const Link = forwardRef<Ref, LinkProps>(
       }
     `;
 
-    const noVisitedStyle = css`
+    const primaryNoVisitedStyle = css`
       &:visited {
         color: ${theme.color.link.default};
       }
     `;
 
+    const secondaryNoVisitedStyle = css`
+      &:visited {
+        color: ${theme.color.link.secondaryDefault};
+      }
+    `;
+
+    const primaryHoverStyle = css`
+      &:hover {
+        color: ${theme.color.link.hover};
+      }
+    `;
+
+    const secondaryHoverStyle = css`
+      &:hover {
+        color: ${theme.color.link.secondaryHover};
+      }
+    `;
+
+    const disabledStyle = css`
+      cursor: not-allowed;
+      color: ${theme.color.link.disabled};
+
+      &:hover {
+        color: ${theme.color.link.disabled};
+      }
+    `;
+
+    let variantStyle = undefined;
+    if (variant === 'primary') {
+      variantStyle = cx(
+        primaryStyle,
+        noVisited && !disabled && primaryNoVisitedStyle,
+        !disabled && primaryHoverStyle
+      );
+    } else if (variant === 'secondary') {
+      variantStyle = cx(
+        secondaryStyle,
+        noVisited && !disabled && secondaryNoVisitedStyle,
+        !disabled && secondaryHoverStyle
+      );
+    }
+
     const style = cx(
       NAME,
       baseStyle,
-      !noVisited && visitedStyle,
-      noVisited && noVisitedStyle,
+      variantStyle,
+      !noVisited && !disabled && visitedStyle,
+      disabled && disabledStyle,
       className
     );
 
     return (
-      <Component
+      <BaseLink
         ref={ref}
         className={style}
         data-testid={testId}
+        disabled={disabled}
         {...props}
       >
         {children}
-      </Component>
+      </BaseLink>
     );
   }
 );
 
-export default memo(Link);
+export default Link;

package/lib/components/Link/__tests__/__snapshots__/link.test.tsx.snap

@@ -2,8 +2,8 @@
 
 exports[`Link > snapshot: no props 1`] = `
 <a
-  class="ucl-link css-f2zime"
-  data-testid="ucl-link"
+  class="ucl-uikit-base-link ucl-uikit-link css-145ds9b"
+  data-testid="ucl-uikit-link"
 >
   test
 </a>
@@ -11,7 +11,7 @@ exports[`Link > snapshot: no props 1`] = `
 
 exports[`Link > snapshot: testId prop 1`] = `
 <a
-  class="ucl-link css-f2zime"
+  class="ucl-uikit-base-link ucl-uikit-link css-145ds9b"
   data-testid="test123"
 >
    testidlink 

package/lib/components/Link/__tests__/link.test.tsx

@@ -12,9 +12,7 @@ describe('Link', () => {
         <Link>test</Link>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: testId prop', () => {
@@ -23,9 +21,7 @@ describe('Link', () => {
         <Link testId='test123'> testidlink </Link>
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   // // Interaction tests
@@ -36,7 +32,8 @@ describe('Link', () => {
         <Link> testidlink </Link>
       </ThemeContextProvider>
     );
-    const link = screen.getByTestId('ucl-link');
+
+    const link = screen.getByTestId('ucl-uikit-link');
     expect(link).toBeDefined();
   });
 
@@ -56,12 +53,8 @@ describe('Link', () => {
         <Link href='/testlink'>linktext</Link>
       </ThemeContextProvider>
     );
-    const link = screen.getByRole(
-      'link'
-    ) as HTMLAnchorElement;
+    const link = screen.getByRole('link') as HTMLAnchorElement;
     expect(link.textContent).toBe('linktext');
-    expect(link.href).toBe(
-      'http://localhost:3000/testlink'
-    );
+    expect(link.href).toBe('http://localhost:3000/testlink');
   });
 });

package/lib/components/Link/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Link';
-export type { LinkProps, LinkBaseProps } from './Link';
+export type { LinkProps } from './Link';

package/lib/components/Main/Main.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Main from './Main';
+
+const meta = {
+  title: 'Components/Utilities/Main',
+  component: Main,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Main>;
+
+export default meta;
+
+type Story = StoryObj<typeof Main>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLayout: Story = {
+  args: {
+    layout: true,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    children: (
+      <>
+        <h1>Main Content</h1>
+        <p>This is some content inside the Main component.</p>
+      </>
+    ),
+  },
+};