diff --git a/figma.config.json b/figma.config.json
index 0a93bea2a..6b3059517 100644
--- a/figma.config.json
+++ b/figma.config.json
@@ -1,7 +1,7 @@
 {
   "codeConnect": {
     "include": [
-      "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,label-text,link,menu,page-header,pagination,primary-tabs,secondary-tabs,select-native,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
+      "src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,label-text,link,menu,page-header,pagination,primary-tabs,secondary-tabs,select-native,side-bar,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip,top-bar}/**/*.{tsx,jsx}"
     ],
     "importPaths": {
       "src/core/*": "@reapit/elements/core/*",
@@ -56,6 +56,12 @@
       "<PAGE_HEADER_SUPPLEMENTARY_INFO_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13349-12535",
       "<PAGE_HEADER_TITLE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13350-15766",
       "<PAGINATION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6364-9402",
+      "<SIDE_BAR_COLLAPSE_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35369",
+      "<SIDE_BAR_MENU_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35439",
+      "<SIDE_BAR_MENU_LIST_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35460",
+      "<SIDE_BAR_SUBMENU_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35359",
+      "<SIDE_BAR_SUBMENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35396",
+      "<SIDE_BAR_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35522",
       "<SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248",
       "<SPLIT_BUTTON_ACTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778",
       "<SPLIT_BUTTON_MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149",
@@ -71,7 +77,16 @@
       "<SUPPLEMENTARY_INFO_ITEM_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11918-14126",
       "<TAG_GROUP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=118-6272",
       "<TAG_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=55-982",
-      "<TOOLTIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381"
+      "<TOOLTIP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6462-8381",
+      "<TOP_BAR_AVATAR_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34995",
+      "<TOP_BAR_BRAND_LOGO_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12158-7298",
+      "<TOP_BAR_MAIN_NAV_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12255-8601",
+      "<TOP_BAR_NAV_DROPDOWN_BUTTON_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34964",
+      "<TOP_BAR_NAV_ICON_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34935",
+      "<TOP_BAR_NAV_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34950",
+      "<TOP_BAR_NAV_SEARCH_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-34981",
+      "<TOP_BAR_SECONDARY_NAV_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35003",
+      "<TOP_BAR_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12148-35070"
     }
   }
 }
diff --git a/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap b/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap
index 9f49fa58d..7d186f1ac 100644
--- a/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap
+++ b/src/core/checkbox-group/__tests__/__snapshots__/checkbox-group.test.tsx.snap
@@ -4,10 +4,10 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
 <DocumentFragment>
   <fieldset
     aria-orientation="vertical"
-    class="mocked-styled-3 el-checkbox-group"
+    class="mocked-styled-2 el-checkbox-group"
   >
     <legend
-      class="mocked-styled-2 el-legend"
+      class="mocked-styled-1 el-legend"
     >
       <span
         class="mocked-styled-0 el-label-text"
@@ -18,18 +18,18 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
       </span>
     </legend>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option1"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -40,7 +40,7 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -50,31 +50,31 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 1
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option2"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -85,7 +85,7 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -95,31 +95,31 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 2
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option3"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -130,7 +130,7 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -140,14 +140,14 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 3
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
@@ -160,37 +160,32 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup Label UI is re
 <DocumentFragment>
   <fieldset
     aria-orientation="vertical"
-    class="mocked-styled-3 el-checkbox-group"
+    class="mocked-styled-2 el-checkbox-group"
   >
     <legend
-      class="mocked-styled-2 el-legend"
+      class="mocked-styled-1 el-legend"
     >
       <span
         class="mocked-styled-0 el-label-text"
         data-size="medium"
         data-variant="soft"
       >
-        Select options
-        <span
-          class="mocked-styled-1 el-label-required-mark"
-        >
-          *
-        </span>
+        Select options *
       </span>
     </legend>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option1"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -201,7 +196,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup Label UI is re
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -211,31 +206,31 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup Label UI is re
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 1
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option2"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -246,7 +241,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup Label UI is re
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -256,31 +251,31 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup Label UI is re
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 2
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option3"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -291,7 +286,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup Label UI is re
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -301,14 +296,14 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup Label UI is re
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 3
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
@@ -321,10 +316,10 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
 <DocumentFragment>
   <fieldset
     aria-orientation="horizontal"
-    class="mocked-styled-3 el-checkbox-group"
+    class="mocked-styled-2 el-checkbox-group"
   >
     <legend
-      class="mocked-styled-2 el-legend"
+      class="mocked-styled-1 el-legend"
     >
       <span
         class="mocked-styled-0 el-label-text"
@@ -335,18 +330,18 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
       </span>
     </legend>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option1"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -357,7 +352,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -367,14 +362,14 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 1
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       >
@@ -382,18 +377,18 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
       </span>
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option2"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -404,7 +399,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -414,31 +409,31 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 2
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option3"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -449,7 +444,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -459,14 +454,14 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should not sho
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 3
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
@@ -479,10 +474,10 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
 <DocumentFragment>
   <fieldset
     aria-orientation="vertical"
-    class="mocked-styled-3 el-checkbox-group"
+    class="mocked-styled-2 el-checkbox-group"
   >
     <legend
-      class="mocked-styled-2 el-legend"
+      class="mocked-styled-1 el-legend"
     >
       <span
         class="mocked-styled-0 el-label-text"
@@ -493,18 +488,18 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
       </span>
     </legend>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option1"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -515,7 +510,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -525,14 +520,14 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 1
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       >
@@ -540,18 +535,18 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
       </span>
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option2"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -562,7 +557,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -572,31 +567,31 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 2
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option3"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -607,7 +602,7 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -617,14 +612,14 @@ exports[`CheckboxGroup > should match snapshot with CheckboxGroup should show su
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 3
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
@@ -637,10 +632,10 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
 <DocumentFragment>
   <fieldset
     aria-orientation="horizontal"
-    class="mocked-styled-3 el-checkbox-group"
+    class="mocked-styled-2 el-checkbox-group"
   >
     <legend
-      class="mocked-styled-2 el-legend"
+      class="mocked-styled-1 el-legend"
     >
       <span
         class="mocked-styled-0 el-label-text"
@@ -651,18 +646,18 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
       </span>
     </legend>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option1"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -673,7 +668,7 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -683,31 +678,31 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 1
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option2"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -718,7 +713,7 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -728,31 +723,31 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 2
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
     </label>
     <label
-      class="mocked-styled-7 el-checkbox"
+      class="mocked-styled-6 el-checkbox"
     >
       <input
         aria-hidden="true"
-        class="mocked-styled-8 el-checkbox-input"
+        class="mocked-styled-7 el-checkbox-input"
         name="options"
         type="checkbox"
         value="option3"
       />
       <svg
         aria-hidden="true"
-        class="mocked-styled-4 el-checkbox-svg-icon"
+        class="mocked-styled-3 el-checkbox-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -763,7 +758,7 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
       </svg>
       <svg
         aria-hidden="true"
-        class="mocked-styled-5 el-checkbox-selected-svg-icon"
+        class="mocked-styled-4 el-checkbox-selected-svg-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -773,14 +768,14 @@ exports[`CheckboxGroup > should match snapshot with horizontal CheckboxGroup 1`]
         />
       </svg>
       <span
-        class="mocked-styled-9 el-checkbox-label-text el-label-text"
+        class="mocked-styled-8 el-checkbox-label-text el-label-text"
         data-size="medium"
         data-variant="strong"
       >
         Option 3
       </span>
       <span
-        class="mocked-styled-10 el-checkbox-supplementary-info el-label-text"
+        class="mocked-styled-9 el-checkbox-supplementary-info el-label-text"
         data-size="small"
         data-variant="soft"
       />
diff --git a/src/core/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap b/src/core/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
index e32369276..017cca8b0 100644
--- a/src/core/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
+++ b/src/core/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
@@ -3,16 +3,16 @@
 exports[`CheckboxGroup > should match snapshot 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-5 el-checkbox"
+    class="mocked-styled-4 el-checkbox"
   >
     <input
       aria-hidden="true"
-      class="mocked-styled-6 el-checkbox-input"
+      class="mocked-styled-5 el-checkbox-input"
       type="checkbox"
     />
     <svg
       aria-hidden="true"
-      class="mocked-styled-2 el-checkbox-svg-icon"
+      class="mocked-styled-1 el-checkbox-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -23,7 +23,7 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-3 el-checkbox-selected-svg-icon"
+      class="mocked-styled-2 el-checkbox-selected-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -33,12 +33,12 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
       />
     </svg>
     <span
-      class="mocked-styled-7 el-checkbox-label-text el-label-text"
+      class="mocked-styled-6 el-checkbox-label-text el-label-text"
       data-size="medium"
       data-variant="strong"
     />
     <span
-      class="mocked-styled-8 el-checkbox-supplementary-info el-label-text"
+      class="mocked-styled-7 el-checkbox-supplementary-info el-label-text"
       data-size="small"
       data-variant="soft"
     />
@@ -49,16 +49,16 @@ exports[`CheckboxGroup > should match snapshot 1`] = `
 exports[`CheckboxGroup > should match snapshot with Checkbox with Label 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-5 el-checkbox"
+    class="mocked-styled-4 el-checkbox"
   >
     <input
       aria-hidden="true"
-      class="mocked-styled-6 el-checkbox-input"
+      class="mocked-styled-5 el-checkbox-input"
       type="checkbox"
     />
     <svg
       aria-hidden="true"
-      class="mocked-styled-2 el-checkbox-svg-icon"
+      class="mocked-styled-1 el-checkbox-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -69,7 +69,7 @@ exports[`CheckboxGroup > should match snapshot with Checkbox with Label 1`] = `
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-3 el-checkbox-selected-svg-icon"
+      class="mocked-styled-2 el-checkbox-selected-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -79,14 +79,14 @@ exports[`CheckboxGroup > should match snapshot with Checkbox with Label 1`] = `
       />
     </svg>
     <span
-      class="mocked-styled-7 el-checkbox-label-text el-label-text"
+      class="mocked-styled-6 el-checkbox-label-text el-label-text"
       data-size="medium"
       data-variant="strong"
     >
       Label
     </span>
     <span
-      class="mocked-styled-8 el-checkbox-supplementary-info el-label-text"
+      class="mocked-styled-7 el-checkbox-supplementary-info el-label-text"
       data-size="small"
       data-variant="soft"
     />
@@ -97,16 +97,16 @@ exports[`CheckboxGroup > should match snapshot with Checkbox with Label 1`] = `
 exports[`CheckboxGroup > should match snapshot with Checkbox with Label and Suppliemntary text 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-5 el-checkbox"
+    class="mocked-styled-4 el-checkbox"
   >
     <input
       aria-hidden="true"
-      class="mocked-styled-6 el-checkbox-input"
+      class="mocked-styled-5 el-checkbox-input"
       type="checkbox"
     />
     <svg
       aria-hidden="true"
-      class="mocked-styled-2 el-checkbox-svg-icon"
+      class="mocked-styled-1 el-checkbox-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -117,7 +117,7 @@ exports[`CheckboxGroup > should match snapshot with Checkbox with Label and Supp
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-3 el-checkbox-selected-svg-icon"
+      class="mocked-styled-2 el-checkbox-selected-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -127,14 +127,14 @@ exports[`CheckboxGroup > should match snapshot with Checkbox with Label and Supp
       />
     </svg>
     <span
-      class="mocked-styled-7 el-checkbox-label-text el-label-text"
+      class="mocked-styled-6 el-checkbox-label-text el-label-text"
       data-size="medium"
       data-variant="strong"
     >
       Label
     </span>
     <span
-      class="mocked-styled-8 el-checkbox-supplementary-info el-label-text"
+      class="mocked-styled-7 el-checkbox-supplementary-info el-label-text"
       data-size="small"
       data-variant="soft"
     >
@@ -147,17 +147,17 @@ exports[`CheckboxGroup > should match snapshot with Checkbox with Label and Supp
 exports[`CheckboxGroup > should match snapshot with disabled Checkbox 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-5 el-checkbox"
+    class="mocked-styled-4 el-checkbox"
   >
     <input
       aria-hidden="true"
-      class="mocked-styled-6 el-checkbox-input"
+      class="mocked-styled-5 el-checkbox-input"
       disabled=""
       type="checkbox"
     />
     <svg
       aria-hidden="true"
-      class="mocked-styled-2 el-checkbox-svg-icon"
+      class="mocked-styled-1 el-checkbox-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -168,7 +168,7 @@ exports[`CheckboxGroup > should match snapshot with disabled Checkbox 1`] = `
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-3 el-checkbox-selected-svg-icon"
+      class="mocked-styled-2 el-checkbox-selected-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -178,14 +178,14 @@ exports[`CheckboxGroup > should match snapshot with disabled Checkbox 1`] = `
       />
     </svg>
     <span
-      class="mocked-styled-7 el-checkbox-label-text el-label-text"
+      class="mocked-styled-6 el-checkbox-label-text el-label-text"
       data-size="medium"
       data-variant="strong"
     >
       Label
     </span>
     <span
-      class="mocked-styled-8 el-checkbox-supplementary-info el-label-text"
+      class="mocked-styled-7 el-checkbox-supplementary-info el-label-text"
       data-size="small"
       data-variant="soft"
     >
@@ -198,16 +198,16 @@ exports[`CheckboxGroup > should match snapshot with disabled Checkbox 1`] = `
 exports[`CheckboxGroup > should match snapshot with indeterminate Checkbox 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-5 el-checkbox"
+    class="mocked-styled-4 el-checkbox"
   >
     <input
       aria-hidden="true"
-      class="mocked-styled-6 el-checkbox-input"
+      class="mocked-styled-5 el-checkbox-input"
       type="checkbox"
     />
     <svg
       aria-hidden="true"
-      class="mocked-styled-2 el-checkbox-svg-icon"
+      class="mocked-styled-1 el-checkbox-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -218,7 +218,7 @@ exports[`CheckboxGroup > should match snapshot with indeterminate Checkbox 1`] =
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-3 el-checkbox-selected-svg-icon"
+      class="mocked-styled-2 el-checkbox-selected-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -229,7 +229,7 @@ exports[`CheckboxGroup > should match snapshot with indeterminate Checkbox 1`] =
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-4 el-checkbox-indeterminate-svg-icon"
+      class="mocked-styled-3 el-checkbox-indeterminate-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -243,14 +243,14 @@ exports[`CheckboxGroup > should match snapshot with indeterminate Checkbox 1`] =
       />
     </svg>
     <span
-      class="mocked-styled-7 el-checkbox-label-text el-label-text"
+      class="mocked-styled-6 el-checkbox-label-text el-label-text"
       data-size="medium"
       data-variant="strong"
     >
       Label
     </span>
     <span
-      class="mocked-styled-8 el-checkbox-supplementary-info el-label-text"
+      class="mocked-styled-7 el-checkbox-supplementary-info el-label-text"
       data-size="small"
       data-variant="soft"
     >
@@ -263,16 +263,16 @@ exports[`CheckboxGroup > should match snapshot with indeterminate Checkbox 1`] =
 exports[`CheckboxGroup > should match snapshot with required Checkbox 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-5 el-checkbox"
+    class="mocked-styled-4 el-checkbox"
   >
     <input
       aria-hidden="true"
-      class="mocked-styled-6 el-checkbox-input"
+      class="mocked-styled-5 el-checkbox-input"
       type="checkbox"
     />
     <svg
       aria-hidden="true"
-      class="mocked-styled-2 el-checkbox-svg-icon"
+      class="mocked-styled-1 el-checkbox-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -283,7 +283,7 @@ exports[`CheckboxGroup > should match snapshot with required Checkbox 1`] = `
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-3 el-checkbox-selected-svg-icon"
+      class="mocked-styled-2 el-checkbox-selected-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -293,19 +293,14 @@ exports[`CheckboxGroup > should match snapshot with required Checkbox 1`] = `
       />
     </svg>
     <span
-      class="mocked-styled-7 el-checkbox-label-text el-label-text"
+      class="mocked-styled-6 el-checkbox-label-text el-label-text"
       data-size="medium"
       data-variant="strong"
     >
-      Label
-      <span
-        class="mocked-styled-1 el-label-required-mark"
-      >
-        *
-      </span>
+      Label *
     </span>
     <span
-      class="mocked-styled-8 el-checkbox-supplementary-info el-label-text"
+      class="mocked-styled-7 el-checkbox-supplementary-info el-label-text"
       data-size="small"
       data-variant="soft"
     >
diff --git a/src/core/label-text/__tests__/__snapshots__/label.test.tsx.snap b/src/core/label-text/__tests__/__snapshots__/label.test.tsx.snap
index 73238c8a3..3e7d1c4c8 100644
--- a/src/core/label-text/__tests__/__snapshots__/label.test.tsx.snap
+++ b/src/core/label-text/__tests__/__snapshots__/label.test.tsx.snap
@@ -17,11 +17,7 @@ exports[`Label component > should match a snapshot if it required 1`] = `
     data-size="medium"
     data-variant="soft"
   >
-    <span
-      class="mocked-styled-1 el-label-required-mark"
-    >
-      *
-    </span>
+     *
   </span>
 </DocumentFragment>
 `;
diff --git a/src/core/side-bar/collapse-button/collapse-button.figma.tsx b/src/core/side-bar/collapse-button/collapse-button.figma.tsx
new file mode 100644
index 000000000..4db8fecf9
--- /dev/null
+++ b/src/core/side-bar/collapse-button/collapse-button.figma.tsx
@@ -0,0 +1,6 @@
+import figma from '@figma/code-connect'
+import { SideBar } from '../side-bar'
+
+figma.connect(SideBar.CollapseButton, '<SIDE_BAR_COLLAPSE_BUTTON_URL>', {
+  example: () => <SideBar.CollapseButton />,
+})
diff --git a/src/core/side-bar/collapse-button/collapse-button.tsx b/src/core/side-bar/collapse-button/collapse-button.tsx
index c00dc4452..b5bffe2ff 100644
--- a/src/core/side-bar/collapse-button/collapse-button.tsx
+++ b/src/core/side-bar/collapse-button/collapse-button.tsx
@@ -66,3 +66,5 @@ export function SideBarCollapseButton({ id, onClick, ...props }: SideBarCollapse
     </ElSideBarCollapseButton>
   )
 }
+
+SideBarCollapseButton.displayName = 'SideBar.CollapseButton'
diff --git a/src/core/side-bar/menu-list/menu-list-group.figma.tsx b/src/core/side-bar/menu-list/menu-list-group.figma.tsx
new file mode 100644
index 000000000..3a820783a
--- /dev/null
+++ b/src/core/side-bar/menu-list/menu-list-group.figma.tsx
@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect'
+import { SideBar } from '../side-bar'
+
+figma.connect(SideBar.MenuGroup, '<SIDE_BAR_MENU_ITEM_URL>', {
+  variant: { Type: 'Expandable' },
+  props: {
+    ariaCurrent: figma.enum('Selected', {
+      true: 'page',
+      false: false,
+    }),
+    children: figma.children('Submenu'),
+    expanded: figma.boolean('Expanded'),
+    summary: figma.nestedProps('Main item', {
+      label: figma.string('Label'),
+      icon: figma.instance('Icon'),
+    }),
+  },
+  example: (props) => (
+    <SideBar.MenuGroup
+      open={props.expanded}
+      summary={<SideBar.MenuGroupSummary icon={props.summary.icon}>{props.summary.label}</SideBar.MenuGroupSummary>}
+    >
+      {props.children}
+    </SideBar.MenuGroup>
+  ),
+})
diff --git a/src/core/side-bar/menu-list/menu-list-group.tsx b/src/core/side-bar/menu-list/menu-list-group.tsx
index 5279e0c81..b0cef62a2 100644
--- a/src/core/side-bar/menu-list/menu-list-group.tsx
+++ b/src/core/side-bar/menu-list/menu-list-group.tsx
@@ -26,4 +26,6 @@ export function SideBarMenuListGroup({ children, ...props }: SideBarMenuListGrou
   )
 }
 
+SideBarMenuListGroup.displayName = 'SideBar.MenuGroup'
+
 SideBarMenuListGroup.Summary = SideBarMenuGroup.Summary
diff --git a/src/core/side-bar/menu-list/menu-list-item.figma.tsx b/src/core/side-bar/menu-list/menu-list-item.figma.tsx
new file mode 100644
index 000000000..399da3678
--- /dev/null
+++ b/src/core/side-bar/menu-list/menu-list-item.figma.tsx
@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect'
+import { SideBar } from '../side-bar'
+
+figma.connect(SideBar.MenuItem, '<SIDE_BAR_MENU_ITEM_URL>', {
+  variant: { Type: 'Simple' },
+  props: {
+    ariaCurrent: figma.enum('Selected', {
+      true: 'page',
+      false: false,
+    }),
+    item: figma.nestedProps('Main item', {
+      label: figma.string('Label'),
+      icon: figma.instance('Icon'),
+    }),
+  },
+  example: (props) => (
+    <SideBar.MenuItem aria-current={props.ariaCurrent} href="#replace-me" icon={props.item.icon}>
+      {props.item.label}
+    </SideBar.MenuItem>
+  ),
+})
diff --git a/src/core/side-bar/menu-list/menu-list-item.tsx b/src/core/side-bar/menu-list/menu-list-item.tsx
index 98399eb8f..72cf63b67 100644
--- a/src/core/side-bar/menu-list/menu-list-item.tsx
+++ b/src/core/side-bar/menu-list/menu-list-item.tsx
@@ -25,3 +25,5 @@ export function SideBarMenuListItem({ children, ...props }: SideBarMenuListItem.
     </ElSideBarMenuListItem>
   )
 }
+
+SideBarMenuListItem.displayName = 'SideBar.MenuItem'
diff --git a/src/core/side-bar/menu-list/menu-list.figma.tsx b/src/core/side-bar/menu-list/menu-list.figma.tsx
new file mode 100644
index 000000000..ca825eb83
--- /dev/null
+++ b/src/core/side-bar/menu-list/menu-list.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { SideBar } from '../side-bar'
+
+figma.connect(SideBar.MenuList, '<SIDE_BAR_MENU_LIST_URL>', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <SideBar.MenuList>{props.children}</SideBar.MenuList>,
+})
diff --git a/src/core/side-bar/menu-list/menu-list.tsx b/src/core/side-bar/menu-list/menu-list.tsx
index 1d62f9f7c..b6199b750 100644
--- a/src/core/side-bar/menu-list/menu-list.tsx
+++ b/src/core/side-bar/menu-list/menu-list.tsx
@@ -22,6 +22,8 @@ export function SideBarMenuList({ children, ...rest }: SideBarMenuList.Props) {
   return <ElSideBarMenuList {...rest}>{children}</ElSideBarMenuList>
 }
 
+SideBarMenuList.displayName = 'SideBar.MenuList'
+
 SideBarMenuList.Item = SideBarMenuListItem
 SideBarMenuList.Group = SideBarMenuListGroup
 SideBarMenuList.GroupSummary = SideBarMenuListGroup.Summary
diff --git a/src/core/side-bar/side-bar.figma.tsx b/src/core/side-bar/side-bar.figma.tsx
new file mode 100644
index 000000000..bb9ca765e
--- /dev/null
+++ b/src/core/side-bar/side-bar.figma.tsx
@@ -0,0 +1,10 @@
+import figma from '@figma/code-connect'
+import { SideBar } from './side-bar'
+
+figma.connect(SideBar, '<SIDE_BAR_URL>', {
+  props: {
+    menuList: figma.children('Menu list'),
+    collapseButton: figma.children('Collapse button'),
+  },
+  example: (props) => <SideBar footer={props.collapseButton}>{props.menuList}</SideBar>,
+})
diff --git a/src/core/side-bar/submenu/submenu-list-item.figma.tsx b/src/core/side-bar/submenu/submenu-list-item.figma.tsx
new file mode 100644
index 000000000..a1a0244e5
--- /dev/null
+++ b/src/core/side-bar/submenu/submenu-list-item.figma.tsx
@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect'
+import { SideBar } from '../side-bar'
+
+figma.connect(SideBar.SubmenuItem, '<SIDE_BAR_SUBMENU_ITEM_URL>', {
+  props: {
+    ariaCurrent: figma.enum('State', {
+      Default: false,
+      Focus: false,
+      Hover: false,
+      Select: 'page',
+    }),
+    children: figma.string('Label'),
+  },
+  example: (props) => (
+    <SideBar.SubmenuItem aria-current={props.ariaCurrent} href="#replace-me">
+      {props.children}
+    </SideBar.SubmenuItem>
+  ),
+})
diff --git a/src/core/side-bar/submenu/submenu-list-item.tsx b/src/core/side-bar/submenu/submenu-list-item.tsx
index 6fa9e715d..630183cf0 100644
--- a/src/core/side-bar/submenu/submenu-list-item.tsx
+++ b/src/core/side-bar/submenu/submenu-list-item.tsx
@@ -25,3 +25,5 @@ export function SideBarSubmenuListItem({ children, ...props }: SideBarSubmenuLis
     </ElSideBarSubmenuListItem>
   )
 }
+
+SideBarSubmenuListItem.displayName = 'SideBar.SubmenuItem'
diff --git a/src/core/side-bar/submenu/submenu.figma.tsx b/src/core/side-bar/submenu/submenu.figma.tsx
new file mode 100644
index 000000000..07902bd65
--- /dev/null
+++ b/src/core/side-bar/submenu/submenu.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { SideBar } from '../side-bar'
+
+figma.connect(SideBar.Submenu, '<SIDE_BAR_SUBMENU_URL>', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <SideBar.Submenu>{props.children}</SideBar.Submenu>,
+})
diff --git a/src/core/side-bar/submenu/submenu.tsx b/src/core/side-bar/submenu/submenu.tsx
index 217025c79..7d847ea4f 100644
--- a/src/core/side-bar/submenu/submenu.tsx
+++ b/src/core/side-bar/submenu/submenu.tsx
@@ -24,4 +24,6 @@ export function SideBarSubmenu({ children, ...rest }: SideBarSubmenu.Props) {
   return <ElSideBarSubmenuList {...rest}>{children}</ElSideBarSubmenuList>
 }
 
+SideBarSubmenu.displayName = 'SideBar.Submenu'
+
 SideBarSubmenu.Item = SideBarSubmenuListItem
diff --git a/src/core/top-bar/avatar-button/avatar-button.tsx b/src/core/top-bar/avatar-button/avatar-button.tsx
index a652f7efa..faf285e2f 100644
--- a/src/core/top-bar/avatar-button/avatar-button.tsx
+++ b/src/core/top-bar/avatar-button/avatar-button.tsx
@@ -1,5 +1,5 @@
 import { cx } from '@linaria/core'
-import { Avatar } from '../../avatar/avatar'
+import { Avatar } from '#src/core/avatar'
 import { elTopBarAvatarButton } from './styles'
 
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
@@ -31,7 +31,7 @@ export function TopBarAvatarButton({
 }: TopBarAvatarButton.Props) {
   return (
     <button {...rest} aria-label={ariaLabel} className={cx(elTopBarAvatarButton, className)}>
-      <Avatar size="small" shape="circle" colour="purple">
+      <Avatar size="small" shape="circle" colour="primary">
         {children}
       </Avatar>
     </button>
diff --git a/src/core/top-bar/avatar-menu/avatar-menu.figma.tsx b/src/core/top-bar/avatar-menu/avatar-menu.figma.tsx
new file mode 100644
index 000000000..dc8b7de37
--- /dev/null
+++ b/src/core/top-bar/avatar-menu/avatar-menu.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.AvatarMenu, '<TOP_BAR_AVATAR_BUTTON_URL>', {
+  props: {
+    children: figma.string('Initials'),
+  },
+  example: (props) => <TopBar.AvatarMenu initials={props.children}>TODO: add menu items</TopBar.AvatarMenu>,
+})
diff --git a/src/core/top-bar/avatar-menu/avatar-menu.tsx b/src/core/top-bar/avatar-menu/avatar-menu.tsx
index 85bbfcb5d..267e78aa7 100644
--- a/src/core/top-bar/avatar-menu/avatar-menu.tsx
+++ b/src/core/top-bar/avatar-menu/avatar-menu.tsx
@@ -38,3 +38,5 @@ export function TopBarAvatarMenu({ children, id, initials, maxWidth, maxHeight,
     </>
   )
 }
+
+TopBarAvatarMenu.displayName = 'TopBar.AvatarMenu'
diff --git a/src/core/top-bar/brand-logo/brand-logo.figma.tsx b/src/core/top-bar/brand-logo/brand-logo.figma.tsx
new file mode 100644
index 000000000..11de24ef0
--- /dev/null
+++ b/src/core/top-bar/brand-logo/brand-logo.figma.tsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.BrandLogo, '<TOP_BAR_BRAND_LOGO_URL>', {
+  props: {
+    brand: figma.enum('Brand', {
+      Reapit: 'Reapit',
+      'Console Owner': 'Console Owner',
+      'Console Pay': 'Console Pay',
+      'Console Tenant': 'Console Tenant',
+      'Reapit Connect': 'Reapit Connect',
+      'Reapit Projector': 'Reapit Projector',
+      'Reapit Sales': 'Reapit Sales',
+      'Reapit Lettings': 'Reapit Lettings',
+      'Reapit PM': 'Reapit PM',
+      'PM Demo': 'PM Demo',
+      'PM Sales': 'PM Sales',
+      'PM Inspect': 'PM Inspect',
+      'Reapit Forms': 'Reapit Forms',
+      'Reapit Websites': 'Reapit Websites',
+      'Reapit Proposals': 'Reapit Proposals',
+      KeyWhere: 'KeyWhere',
+      'Auto Responder': 'Auto Responder',
+    }),
+  },
+  example: (props) => <TopBar.BrandLogo appName={props.brand} />,
+})
diff --git a/src/core/top-bar/brand-logo/brand-logo.tsx b/src/core/top-bar/brand-logo/brand-logo.tsx
index e760b59a1..9a503127b 100644
--- a/src/core/top-bar/brand-logo/brand-logo.tsx
+++ b/src/core/top-bar/brand-logo/brand-logo.tsx
@@ -24,3 +24,5 @@ export function BrandLogo({ appName, href = '/', ...rest }: BrandLogo.Props) {
     </ElBrandLogo>
   )
 }
+
+BrandLogo.displayName = 'TopBar.BrandLogo'
diff --git a/src/core/top-bar/main-nav/main-nav-list-item.figma.tsx b/src/core/top-bar/main-nav/main-nav-list-item.figma.tsx
new file mode 100644
index 000000000..7fd05b4b5
--- /dev/null
+++ b/src/core/top-bar/main-nav/main-nav-list-item.figma.tsx
@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.NavItem, '<TOP_BAR_NAV_ITEM_URL>', {
+  props: {
+    ariaCurrent: figma.enum('State', {
+      Default: false,
+      Focus: false,
+      Hover: false,
+      Select: 'page',
+    }),
+    label: figma.string('Label'),
+  },
+  example: (props) => (
+    <TopBar.NavItem aria-current={props.ariaCurrent} href="#replace-me">
+      {props.label}
+    </TopBar.NavItem>
+  ),
+})
diff --git a/src/core/top-bar/main-nav/main-nav-list-item.tsx b/src/core/top-bar/main-nav/main-nav-list-item.tsx
index 40ee8a1db..c529fd2dd 100644
--- a/src/core/top-bar/main-nav/main-nav-list-item.tsx
+++ b/src/core/top-bar/main-nav/main-nav-list-item.tsx
@@ -20,3 +20,5 @@ export function TopBarMainNavListItem(props: TopBarMainNavListItem.Props) {
     </ElTopBarMainNavListItem>
   )
 }
+
+TopBarMainNavListItem.displayName = 'TopBar.NavItem'
diff --git a/src/core/top-bar/main-nav/main-nav-menu-list-item.figma.tsx b/src/core/top-bar/main-nav/main-nav-menu-list-item.figma.tsx
new file mode 100644
index 000000000..00888b60d
--- /dev/null
+++ b/src/core/top-bar/main-nav/main-nav-menu-list-item.figma.tsx
@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.NavMenuItem, '<TOP_BAR_NAV_DROPDOWN_BUTTON_URL>', {
+  props: {
+    ariaCurrent: figma.enum('State', {
+      Default: false,
+      Focus: false,
+      Hover: false,
+      Select: 'page',
+    }),
+    label: figma.textContent('Label'),
+  },
+  example: (props) => (
+    <TopBar.NavMenuItem aria-current={props.ariaCurrent} label={props.label}>
+      TODO: Add menu items
+    </TopBar.NavMenuItem>
+  ),
+})
diff --git a/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx b/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx
index 650bf35bd..fdae25562 100644
--- a/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx
+++ b/src/core/top-bar/main-nav/main-nav-menu-list-item.tsx
@@ -35,3 +35,5 @@ export function TopBarMainNavMenuListItem({ children, id, label, ...rest }: TopB
     </ElTopBarMainNavListItem>
   )
 }
+
+TopBarMainNavMenuListItem.displayName = 'TopBar.NavMenuItem'
diff --git a/src/core/top-bar/main-nav/main-nav.figma.tsx b/src/core/top-bar/main-nav/main-nav.figma.tsx
new file mode 100644
index 000000000..e57a604e8
--- /dev/null
+++ b/src/core/top-bar/main-nav/main-nav.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.MainNav, '<TOP_BAR_MAIN_NAV_URL>', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <TopBar.MainNav>{props.children}</TopBar.MainNav>,
+})
diff --git a/src/core/top-bar/main-nav/main-nav.tsx b/src/core/top-bar/main-nav/main-nav.tsx
index 6c2a40633..479280702 100644
--- a/src/core/top-bar/main-nav/main-nav.tsx
+++ b/src/core/top-bar/main-nav/main-nav.tsx
@@ -31,5 +31,7 @@ export function TopBarMainNav({ 'aria-label': ariaLabel = 'Main navigation', chi
   )
 }
 
+TopBarMainNav.displayName = 'TopBar.MainNav'
+
 TopBarMainNav.Item = TopBarMainNavListItem
 TopBarMainNav.MenuItem = TopBarMainNavMenuListItem
diff --git a/src/core/top-bar/nav-search-button/nav-search-button.tsx b/src/core/top-bar/nav-search-button/nav-search-button.tsx
index c22b085e7..d63ab2ea0 100644
--- a/src/core/top-bar/nav-search-button/nav-search-button.tsx
+++ b/src/core/top-bar/nav-search-button/nav-search-button.tsx
@@ -48,3 +48,5 @@ export function TopBarNavSearchButton({ shortcut, onClick, ...rest }: TopBarNavS
     </ElTopBarNavSearchButton>
   )
 }
+
+TopBarNavSearchButton.displayName = 'TopBar.SearchButton'
diff --git a/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx b/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx
index f8f716fb9..432627e02 100644
--- a/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx
+++ b/src/core/top-bar/nav-search-icon-item/nav-search-icon-item.tsx
@@ -17,3 +17,5 @@ export namespace TopBarNavSearchIconItem {
 export function TopBarNavSearchIconItem({ 'aria-label': ariaLabel, ...rest }: TopBarNavSearchIconItem.Props) {
   return <TopBarNavIconItemBase {...rest} aria-label={ariaLabel ?? 'Search'} as="button" icon={<SearchIcon />} />
 }
+
+TopBarNavSearchIconItem.displayName = 'TopBar.SearchIconItem'
diff --git a/src/core/top-bar/nav-search/nav-search.figma.tsx b/src/core/top-bar/nav-search/nav-search.figma.tsx
new file mode 100644
index 000000000..6eac5a423
--- /dev/null
+++ b/src/core/top-bar/nav-search/nav-search.figma.tsx
@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.NavSearch, '<TOP_BAR_NAV_SEARCH_URL>', {
+  example: () => (
+    <TopBar.NavSearch
+      button={<TopBar.NavSearchButton onClick={() => {}} />}
+      iconItem={<TopBar.NavSearchIconItem aria-label="Search" onClick={() => {}} />}
+    />
+  ),
+})
diff --git a/src/core/top-bar/nav-search/nav-search.tsx b/src/core/top-bar/nav-search/nav-search.tsx
index f941285fb..f84c752d2 100644
--- a/src/core/top-bar/nav-search/nav-search.tsx
+++ b/src/core/top-bar/nav-search/nav-search.tsx
@@ -31,5 +31,7 @@ export function TopBarNavSearch({ button, iconItem, ...rest }: TopBarNavSearch.P
   )
 }
 
+TopBarNavSearch.displayName = 'TopBar.NavSearch'
+
 TopBarNavSearch.Button = TopBarNavSearchButton
 TopBarNavSearch.IconItem = TopBarNavSearchIconItem
diff --git a/src/core/top-bar/secondary-nav/secondary-nav-list-item.figma.tsx b/src/core/top-bar/secondary-nav/secondary-nav-list-item.figma.tsx
new file mode 100644
index 000000000..c0bbe8820
--- /dev/null
+++ b/src/core/top-bar/secondary-nav/secondary-nav-list-item.figma.tsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.NavIconItem, '<TOP_BAR_NAV_ICON_ITEM_URL>', {
+  props: {
+    ariaCurrent: figma.enum('State', {
+      Default: false,
+      Focus: false,
+      Hover: false,
+      Select: 'page',
+    }),
+    tooltip: figma.nestedProps('Tooltip', {
+      description: figma.string('Description'),
+    }),
+    hasBadge: figma.boolean('Badge'),
+    icon: figma.instance('Icon'),
+  },
+  example: (props) => (
+    <TopBar.NavIconItem
+      aria-current={props.ariaCurrent}
+      aria-label={props.tooltip.description}
+      hasBadge={props.hasBadge}
+      href="#replace-me"
+      icon={props.icon}
+    />
+  ),
+})
diff --git a/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx b/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx
index 6e36b7eee..43e6beeed 100644
--- a/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx
+++ b/src/core/top-bar/secondary-nav/secondary-nav-list-item.tsx
@@ -20,3 +20,5 @@ export function TopBarSecondaryNavListItem(props: TopBarSecondaryNavListItem.Pro
     </ElTopBarSecondaryNavListItem>
   )
 }
+
+TopBarSecondaryNavListItem.displayName = 'TopBar.NavIconItem'
diff --git a/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx b/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx
index 32893469c..7e372117b 100644
--- a/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx
+++ b/src/core/top-bar/secondary-nav/secondary-nav-menu-list-item.tsx
@@ -43,3 +43,5 @@ export function TopBarSecondaryNavMenuListItem({
     </ElTopBarSecondaryNavListItem>
   )
 }
+
+TopBarSecondaryNavMenuListItem.displayName = 'TopBar.NavIconMenuItem'
diff --git a/src/core/top-bar/secondary-nav/secondary-nav.figma.tsx b/src/core/top-bar/secondary-nav/secondary-nav.figma.tsx
new file mode 100644
index 000000000..94f94d8c2
--- /dev/null
+++ b/src/core/top-bar/secondary-nav/secondary-nav.figma.tsx
@@ -0,0 +1,9 @@
+import figma from '@figma/code-connect'
+import { TopBar } from '../top-bar'
+
+figma.connect(TopBar.SecondaryNav, '<TOP_BAR_SECONDARY_NAV_URL>', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <TopBar.SecondaryNav>{props.children}</TopBar.SecondaryNav>,
+})
diff --git a/src/core/top-bar/secondary-nav/secondary-nav.tsx b/src/core/top-bar/secondary-nav/secondary-nav.tsx
index a5ae214fe..069302495 100644
--- a/src/core/top-bar/secondary-nav/secondary-nav.tsx
+++ b/src/core/top-bar/secondary-nav/secondary-nav.tsx
@@ -35,5 +35,7 @@ export function TopBarSecondaryNav({
   )
 }
 
+TopBarSecondaryNav.displayName = 'TopBar.SecondaryNav'
+
 TopBarSecondaryNav.Item = TopBarSecondaryNavListItem
 TopBarSecondaryNav.MenuItem = TopBarSecondaryNavMenuListItem
diff --git a/src/core/top-bar/top-bar.figma.tsx b/src/core/top-bar/top-bar.figma.tsx
new file mode 100644
index 000000000..33fa85a00
--- /dev/null
+++ b/src/core/top-bar/top-bar.figma.tsx
@@ -0,0 +1,38 @@
+import { AppSwitcher } from '../app-switcher'
+import figma from '@figma/code-connect'
+import { TopBar } from './top-bar'
+
+figma.connect(TopBar, '<TOP_BAR_URL>', {
+  props: {
+    appSwitcher: figma.boolean('App switcher', {
+      true: <AppSwitcher>TODO: add app switcher menu content</AppSwitcher>,
+      false: undefined,
+    }),
+    avatarButton: figma.children('Avatar button'),
+    brandLogo: figma.children('Brand logo'),
+    mainNav: figma.children('Main nav'),
+    search: figma.boolean('Search', {
+      // NOTE: We do this instead of using figma.children because the search icon button in
+      // Figma is just a nav icon item and we can't differentiate it from the other nav icon
+      // item present as an instance layer in the top bar's XS breakpoint variant.
+      true: (
+        <TopBar.NavSearch
+          button={<TopBar.NavSearchButton onClick={() => {}} />}
+          iconItem={<TopBar.NavSearchIconItem aria-label="Search" onClick={() => {}} />}
+        />
+      ),
+      false: undefined,
+    }),
+    secondaryNav: figma.children('Secondary nav'),
+  },
+  example: (props) => (
+    <TopBar
+      appSwitcher={props.appSwitcher}
+      avatar={props.avatarButton}
+      logo={props.brandLogo}
+      mainNav={props.mainNav}
+      search={props.search}
+      secondaryNav={props.secondaryNav}
+    />
+  ),
+})
diff --git a/src/lab/table/table-row-selection/__tests__/__snapshots__/table-row-selection.test.tsx.snap b/src/lab/table/table-row-selection/__tests__/__snapshots__/table-row-selection.test.tsx.snap
index 3839b8b47..1be716c60 100644
--- a/src/lab/table/table-row-selection/__tests__/__snapshots__/table-row-selection.test.tsx.snap
+++ b/src/lab/table/table-row-selection/__tests__/__snapshots__/table-row-selection.test.tsx.snap
@@ -3,17 +3,17 @@
 exports[`TableRowSelection > should match snapshot 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-5 el-checkbox"
+    class="mocked-styled-4 el-checkbox"
   >
     <input
       aria-hidden="true"
       aria-label="Select row undefined"
-      class="mocked-styled-6 el-checkbox-input"
+      class="mocked-styled-5 el-checkbox-input"
       type="checkbox"
     />
     <svg
       aria-hidden="true"
-      class="mocked-styled-2 el-checkbox-svg-icon"
+      class="mocked-styled-1 el-checkbox-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -24,7 +24,7 @@ exports[`TableRowSelection > should match snapshot 1`] = `
     </svg>
     <svg
       aria-hidden="true"
-      class="mocked-styled-3 el-checkbox-selected-svg-icon"
+      class="mocked-styled-2 el-checkbox-selected-svg-icon"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -34,12 +34,12 @@ exports[`TableRowSelection > should match snapshot 1`] = `
       />
     </svg>
     <span
-      class="mocked-styled-7 el-checkbox-label-text el-label-text"
+      class="mocked-styled-6 el-checkbox-label-text el-label-text"
       data-size="medium"
       data-variant="strong"
     />
     <span
-      class="mocked-styled-8 el-checkbox-supplementary-info el-label-text"
+      class="mocked-styled-7 el-checkbox-supplementary-info el-label-text"
       data-size="small"
       data-variant="soft"
     />
diff --git a/src/storybook/changelog.mdx b/src/storybook/changelog.mdx
index ff5ec547e..39e5c25a5 100644
--- a/src/storybook/changelog.mdx
+++ b/src/storybook/changelog.mdx
@@ -29,6 +29,7 @@ Beta versions should be relatively stable but subject to occssional breaking cha
 - **feat:** Added Figma Code Connect for `Dialog`, `Drawer`, and `Menu`.
 - **feat:** Added Figma Code Connect for `LabelText`, `PageHeader` and `Pagination`. Includes the following breaking changes:
   - Renamed `breadcrumbs` prop on `PageHeader` to `navigation` to better align with Figma component.
+- **feat:** Added Figma Code Connect for `SideBr` and `TopBar`.
 
 ### **5.0.0-beta.51 - 12/09/25**