diff --git a/src/content/structured/components/buttons/code.mdx b/src/content/structured/components/buttons/code.mdx
index db7c066b2..a78821db7 100644
--- a/src/content/structured/components/buttons/code.mdx
+++ b/src/content/structured/components/buttons/code.mdx
@@ -19,7 +19,8 @@ tabs:
   ]
 ---
 
-import { IcButton } from "@ukic/react";
+import { IcButton, IcMenuGroup, IcMenuItem, IcPopoverMenu } from "@ukic/react";
+import { useState } from "react";
 
 ## Component demo
 
@@ -967,3 +968,263 @@ return (
     Upload multiple files
   </IcButton>
 </ComponentPreview>
+
+### Dropdown button with popover menu
+
+export const snippetsDropdownButton = [
+  {
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button
+  dropdown="true"
+  variant="primary"
+  id="dropdown-button-popover"
+  onclick="handleClick()"
+>
+  Actions
+</ic-button>
+<ic-popover-menu
+  anchor="dropdown-button-popover"
+  aria-label="popover"
+  id="dropdown-button-popover-menu"
+>
+  <ic-menu-group label="Sort">
+    <ic-menu-item label="Sort ascending">
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z"
+        />
+      </svg>
+    </ic-menu-item>
+    <ic-menu-item label="Sort descending">
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z" />
+      </svg>
+    </ic-menu-item>
+  </ic-menu-group>
+  <ic-menu-item label="Filter" variant="toggle">
+    <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z"
+      />
+    </svg>
+  </ic-menu-item>
+  <ic-menu-group label="Manage columns">
+    <ic-menu-item label="Hide column" variant="toggle">
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z"
+        />
+      </svg>
+    </ic-menu-item>
+    <ic-menu-item label="Column width">
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
+      </svg>
+    </ic-menu-item>
+  </ic-menu-group>
+</ic-popover-menu>`,
+      long: `{shortCode}
+<script>
+  let icPopover = document.querySelector('#dropdown-button-popover-menu');
+  let icButton = document.querySelector('#dropdown-button-popover');
+  function handleClick() {
+    icPopover.open = !icPopover.open;
+  }
+  icPopover.addEventListener('icPopoverClosed', (ev) => {
+    icButton.setAttribute('dropdown-expanded', false);
+  });
+</script>`,
+    },
+  },
+  {
+    technology: "React",
+    snippets: {
+      short: `<IcButton
+  dropdown
+  dropdownExpanded={popoverOpen}
+  variant="primary"
+  id="dropdown-button-popover"
+  onClick={handlePopoverToggled}
+>
+  Actions
+</IcButton>
+<IcPopoverMenu
+  anchor="dropdown-button-popover"
+  aria-label="popover"
+  open={popoverOpen}
+  onIcPopoverClosed={handlePopoverClosed}
+>
+  <IcMenuGroup label="Sort">
+    <IcMenuItem label="Sort ascending">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        path={mdiArrowUpThin}
+      />
+    </IcMenuItem>
+    <IcMenuItem label="Sort descending">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        path={mdiArrowDownThin}
+      />
+    </IcMenuItem>
+  </IcMenuGroup>
+  <IcMenuItem label="Filter" variant="toggle">
+    <SlottedSVG
+      slot="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      path={mdiFilterOffOutline}
+    />
+  </IcMenuItem>
+  <IcMenuGroup label="Manage columns">
+    <IcMenuItem label="Hide column" variant="toggle">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        path={mdiEyeOffOutline}
+      />
+    </IcMenuItem>
+    <IcMenuItem label="Column width">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        path={mdiSwapHorizontal}
+      />
+    </IcMenuItem>
+  </IcMenuGroup>
+</IcPopoverMenu>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
+return (
+  <>
+    {shortCode}
+  </>
+)`,
+        },
+        {
+          language: "Javascript",
+          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);
+const handlePopoverToggled = () => setPopoverOpen(value => !value);
+const handlePopoverClosed = () => setPopoverOpen(false);
+return (
+  <>
+    {shortCode}
+  </>
+)`,
+        },
+      ],
+    },
+  },
+];
+
+export const DropdownButtonPopover = () => {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const handlePopoverToggled = () => setPopoverOpen((value) => !value);
+  const handlePopoverClosed = () => setPopoverOpen(false);
+  return (
+    <>
+      <IcButton
+        dropdown
+        dropdownExpanded={popoverOpen}
+        variant="primary"
+        id="dropdown-button-popover"
+        onClick={handlePopoverToggled}
+      >
+        Actions
+      </IcButton>
+      <IcPopoverMenu
+        anchor="dropdown-button-popover"
+        aria-label="popover"
+        open={popoverOpen}
+        onIcPopoverClosed={handlePopoverClosed}
+      >
+        <IcMenuGroup label="Sort">
+          <IcMenuItem label="Sort ascending">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path d="M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z" />
+            </svg>
+          </IcMenuItem>
+          <IcMenuItem label="Sort descending">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path d="M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z" />
+            </svg>
+          </IcMenuItem>
+        </IcMenuGroup>
+        <IcMenuItem label="Filter" variant="toggle">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path d="M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z" />
+          </svg>
+        </IcMenuItem>
+        <IcMenuGroup label="Manage columns">
+          <IcMenuItem label="Hide column" variant="toggle">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z" />
+            </svg>
+          </IcMenuItem>
+          <IcMenuItem label="Column width">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
+            </svg>
+          </IcMenuItem>
+        </IcMenuGroup>
+      </IcPopoverMenu>
+    </>
+  );
+};
+
+<ComponentPreview
+  style={{
+    display: "flex",
+    justifyContent: "center",
+  }}
+  snippets={snippetsDropdownButton}
+>
+  <DropdownButtonPopover />
+</ComponentPreview>
diff --git a/src/icds-pages-data.json b/src/icds-pages-data.json
index f9e8f81b9..0072e53e0 100644
--- a/src/icds-pages-data.json
+++ b/src/icds-pages-data.json
@@ -26,8 +26,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/alt-text.mdx",
       "meta": {
         "relativePath": "accessibility/coding/alt-text.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1743,
         "formattedSize": "1.7 KB"
       }
@@ -43,8 +43,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/aria.mdx",
       "meta": {
         "relativePath": "accessibility/coding/aria.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 3652,
         "formattedSize": "3.6 KB"
       }
@@ -60,8 +60,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/css.mdx",
       "meta": {
         "relativePath": "accessibility/coding/css.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1389,
         "formattedSize": "1.4 KB"
       }
@@ -77,8 +77,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/index.mdx",
       "meta": {
         "relativePath": "accessibility/coding/doctype.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1342,
         "formattedSize": "1.3 KB"
       }
@@ -94,8 +94,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/document-structure.mdx",
       "meta": {
         "relativePath": "accessibility/coding/document-structure.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1833,
         "formattedSize": "1.8 KB"
       }
@@ -111,8 +111,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/headings.mdx",
       "meta": {
         "relativePath": "accessibility/coding/headings.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1295,
         "formattedSize": "1.3 KB"
       }
@@ -128,8 +128,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/index.mdx",
       "meta": {
         "relativePath": "accessibility/coding/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 2086,
         "formattedSize": "2.0 KB"
       }
@@ -145,8 +145,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/semantic-html.mdx",
       "meta": {
         "relativePath": "accessibility/coding/semantic-html.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1918,
         "formattedSize": "1.9 KB"
       }
@@ -162,8 +162,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/semantic-layout.mdx",
       "meta": {
         "relativePath": "accessibility/coding/semantic-layout.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1366,
         "formattedSize": "1.3 KB"
       }
@@ -179,8 +179,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/tables.mdx",
       "meta": {
         "relativePath": "accessibility/coding/tables.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 2533,
         "formattedSize": "2.5 KB"
       }
@@ -196,8 +196,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/title.mdx",
       "meta": {
         "relativePath": "accessibility/coding/title.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.416Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1265,
         "formattedSize": "1.2 KB"
       }
@@ -213,8 +213,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/definition.mdx",
       "meta": {
         "relativePath": "accessibility/definition.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 2149,
         "formattedSize": "2.1 KB"
       }
@@ -230,8 +230,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/discussing.mdx",
       "meta": {
         "relativePath": "accessibility/discussing.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 2005,
         "formattedSize": "2.0 KB"
       }
@@ -247,8 +247,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/accessibility-statements-guidance.mdx",
       "meta": {
         "relativePath": "accessibility/documenting/accessibility-statements-guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 10683,
         "formattedSize": "10.4 KB"
       }
@@ -264,8 +264,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/accessibility-statements.mdx",
       "meta": {
         "relativePath": "accessibility/documenting/accessibility-statements.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 2192,
         "formattedSize": "2.1 KB"
       }
@@ -281,8 +281,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/conformance-reports.mdx",
       "meta": {
         "relativePath": "accessibility/documenting/conformance-report.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 4056,
         "formattedSize": "4.0 KB"
       }
@@ -298,8 +298,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/index.mdx",
       "meta": {
         "relativePath": "accessibility/documenting/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1910,
         "formattedSize": "1.9 KB"
       }
@@ -315,8 +315,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/when-to-create-and-update.mdx",
       "meta": {
         "relativePath": "accessibility/documenting/when-to-create-and-update.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1691,
         "formattedSize": "1.7 KB"
       }
@@ -332,8 +332,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/index.mdx",
       "meta": {
         "relativePath": "accessibility/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 2213,
         "formattedSize": "2.2 KB"
       }
@@ -349,8 +349,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/introduction.mdx",
       "meta": {
         "relativePath": "accessibility/introduction.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 1739,
         "formattedSize": "1.7 KB"
       }
@@ -366,8 +366,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/auditory.mdx",
       "meta": {
         "relativePath": "accessibility/needs/auditory.mdx",
-        "createdAt": "2024-10-21T10:34:17.692Z",
-        "lastModified": "2024-10-21T10:34:17.692Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 3858,
         "formattedSize": "3.8 KB"
       }
@@ -383,8 +383,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/general.mdx",
       "meta": {
         "relativePath": "accessibility/needs/general.mdx",
-        "createdAt": "2024-10-21T10:33:58.636Z",
-        "lastModified": "2024-10-21T10:33:58.636Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.908Z",
         "size": 3980,
         "formattedSize": "3.9 KB"
       }
@@ -400,8 +400,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/index.mdx",
       "meta": {
         "relativePath": "accessibility/needs/index.mdx",
-        "createdAt": "2024-10-21T09:26:12.704Z",
-        "lastModified": "2024-10-21T09:26:12.704Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3652,
         "formattedSize": "3.6 KB"
       }
@@ -417,8 +417,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/invisible.mdx",
       "meta": {
         "relativePath": "accessibility/needs/invisible.mdx",
-        "createdAt": "2024-10-21T10:34:14.968Z",
-        "lastModified": "2024-10-21T10:34:14.968Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 5433,
         "formattedSize": "5.3 KB"
       }
@@ -434,8 +434,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/motor.mdx",
       "meta": {
         "relativePath": "accessibility/needs/motor.mdx",
-        "createdAt": "2024-10-21T10:34:11.208Z",
-        "lastModified": "2024-10-21T10:34:11.208Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 4775,
         "formattedSize": "4.7 KB"
       }
@@ -451,8 +451,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/neurodiversity.mdx",
       "meta": {
         "relativePath": "accessibility/needs/neurodiversity.mdx",
-        "createdAt": "2024-10-21T10:34:08.376Z",
-        "lastModified": "2024-10-21T10:34:08.376Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 8699,
         "formattedSize": "8.5 KB"
       }
@@ -468,8 +468,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/visual.mdx",
       "meta": {
         "relativePath": "accessibility/needs/visual.mdx",
-        "createdAt": "2024-10-21T10:34:03.944Z",
-        "lastModified": "2024-10-21T10:34:03.944Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 4733,
         "formattedSize": "4.6 KB"
       }
@@ -486,8 +486,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/index.mdx",
       "meta": {
         "relativePath": "accessibility/requirement/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3658,
         "formattedSize": "3.6 KB"
       }
@@ -504,8 +504,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/meeting-the-policy.mdx",
       "meta": {
         "relativePath": "accessibility/requirement/meeting-the-policy.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3969,
         "formattedSize": "3.9 KB"
       }
@@ -521,8 +521,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/subtitles-transcripts-captions.mdx",
       "meta": {
         "relativePath": "accessibility/requirement/subtitles-transcripts-captions.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 4335,
         "formattedSize": "4.2 KB"
       }
@@ -538,8 +538,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/wcag.mdx",
       "meta": {
         "relativePath": "accessibility/requirement/wcag.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.518Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3859,
         "formattedSize": "3.8 KB"
       }
@@ -555,8 +555,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/assistive-tech-testing.mdx",
       "meta": {
         "relativePath": "accessibility/testing/assistive-tech-testing.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 8622,
         "formattedSize": "8.4 KB"
       }
@@ -572,8 +572,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/automated-testing-limitation.mdx",
       "meta": {
         "relativePath": "accessibility/testing/automated-testing-limitation.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3718,
         "formattedSize": "3.6 KB"
       }
@@ -589,8 +589,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/automated-testing.mdx",
       "meta": {
         "relativePath": "accessibility/testing/automated-testing.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 6892,
         "formattedSize": "6.7 KB"
       }
@@ -606,8 +606,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/index.mdx",
       "meta": {
         "relativePath": "accessibility/testing/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3100,
         "formattedSize": "3.0 KB"
       }
@@ -623,8 +623,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/manual-testing.mdx",
       "meta": {
         "relativePath": "accessibility/testing/manual-testing.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 4498,
         "formattedSize": "4.4 KB"
       }
@@ -640,8 +640,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/contribute-criteria.mdx?at=develop",
       "meta": {
         "relativePath": "community/contribute-criteria.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 2845,
         "formattedSize": "2.8 KB"
       }
@@ -657,8 +657,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/contribute.mdx?at=develop",
       "meta": {
         "relativePath": "community/contribute.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3993,
         "formattedSize": "3.9 KB"
       }
@@ -674,8 +674,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/glossary-of-terms.mdx?at=develop",
       "meta": {
         "relativePath": "community/glossary-of-terms.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 11629,
         "formattedSize": "11.4 KB"
       }
@@ -690,8 +690,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/index.mdx",
       "meta": {
         "relativePath": "community/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 1850,
         "formattedSize": "1.8 KB"
       }
@@ -707,8 +707,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/roadmap.mdx",
       "meta": {
         "relativePath": "community/roadmap.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 1951,
         "formattedSize": "1.9 KB"
       }
@@ -738,8 +738,8 @@
       ],
       "meta": {
         "relativePath": "components/accordion/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 3260,
         "formattedSize": "3.2 KB"
       }
@@ -769,8 +769,8 @@
       ],
       "meta": {
         "relativePath": "components/accordion/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 12314,
         "formattedSize": "12.0 KB"
       }
@@ -811,8 +811,8 @@
       ],
       "meta": {
         "relativePath": "components/accordion/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 10009,
         "formattedSize": "9.8 KB"
       }
@@ -842,8 +842,8 @@
       ],
       "meta": {
         "relativePath": "components/alerts/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 2230,
         "formattedSize": "2.2 KB"
       }
@@ -873,8 +873,8 @@
       ],
       "meta": {
         "relativePath": "components/alerts/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 9736,
         "formattedSize": "9.5 KB"
       }
@@ -906,8 +906,8 @@
       "tags": ["Notification", "Feedback", "Message", "Banner", "Callout"],
       "meta": {
         "relativePath": "components/alerts/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.920Z",
         "size": 4693,
         "formattedSize": "4.6 KB"
       }
@@ -937,8 +937,8 @@
       ],
       "meta": {
         "relativePath": "components/back-to-top/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.522Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.924Z",
         "size": 3061,
         "formattedSize": "3.0 KB"
       }
@@ -968,8 +968,8 @@
       ],
       "meta": {
         "relativePath": "components/back-to-top/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.526Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.924Z",
         "size": 1619,
         "formattedSize": "1.6 KB"
       }
@@ -1001,8 +1001,8 @@
       "tags": ["Button", "Anchor", "Scroll to top"],
       "meta": {
         "relativePath": "components/back-to-top/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.526Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.924Z",
         "size": 5450,
         "formattedSize": "5.3 KB"
       }
@@ -1032,8 +1032,8 @@
       ],
       "meta": {
         "relativePath": "components/badge/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.526Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.924Z",
         "size": 2448,
         "formattedSize": "2.4 KB"
       }
@@ -1063,8 +1063,8 @@
       ],
       "meta": {
         "relativePath": "components/badge/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.526Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.924Z",
         "size": 22485,
         "formattedSize": "22.0 KB"
       }
@@ -1096,8 +1096,8 @@
       "tags": ["Tab", "Label", "Chip"],
       "meta": {
         "relativePath": "components/badge/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.526Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.924Z",
         "size": 12711,
         "formattedSize": "12.4 KB"
       }
@@ -1127,8 +1127,8 @@
       ],
       "meta": {
         "relativePath": "components/breadcrumbs/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.542Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.936Z",
         "size": 2389,
         "formattedSize": "2.3 KB"
       }
@@ -1158,8 +1158,8 @@
       ],
       "meta": {
         "relativePath": "components/breadcrumbs/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.542Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.936Z",
         "size": 11522,
         "formattedSize": "11.3 KB"
       }
@@ -1191,8 +1191,8 @@
       "tags": ["Breadcrumb trail"],
       "meta": {
         "relativePath": "components/breadcrumbs/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.542Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.936Z",
         "size": 5560,
         "formattedSize": "5.4 KB"
       }
@@ -1222,15 +1222,15 @@
       ],
       "meta": {
         "relativePath": "components/buttons/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.554Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.968Z",
         "size": 1688,
         "formattedSize": "1.6 KB"
       }
     },
     {
       "id": "components__buttons__codex",
-      "contents": "\nimport { IcButton } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button id='my-button' variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"secondary\">View coffees</ic-button>\n<ic-button variant=\"tertiary\">Find out more</ic-button>\n<ic-button variant=\"destructive\">Cancel order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>\n  <div class=\"parent-container\">\n    {shortCode}\n  </div>\n  <script>\n    const btn = document.querySelector('#my-button');\n    btn.addEventListener('click', (ev) => {\n      console.log(ev);\n    })\n  </script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>\n  Add to order\n</IcButton>\n<IcButton variant=\"secondary\">View coffees</IcButton>\n<IcButton variant=\"tertiary\">Find out more</IcButton>\n<IcButton variant=\"destructive\">Cancel order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsDefault}>\n  <IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>\n    Add to order\n  </IcButton>\n  <IcButton variant=\"secondary\">View coffees</IcButton>\n  <IcButton variant=\"tertiary\">Find out more</IcButton>\n  <IcButton variant=\"destructive\">Cancel order</IcButton>\n</ComponentPreview>\n\n## Button details\n\n<ComponentDetails component=\"ic-button\" />\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\" disabled=\"true\">Add to order</ic-button>\n<ic-button variant=\"secondary\" loading=\"true\">Loading button</ic-button>\n<ic-button variant=\"primary\" dropdown=\"true\">Add to order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" disabled>Add to order</IcButton>\n<IcButton variant=\"secondary\" loading>Loading button</IcButton>\n<IcButton variant=\"primary\" dropdown>Add to order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsOtherStates}>\n  <IcButton variant=\"primary\" disabled>\n    Add to order\n  </IcButton>\n  <IcButton variant=\"secondary\" loading>\n    Loading button\n  </IcButton>\n  <IcButton variant=\"primary\" dropdown>\n    Add to order\n  </IcButton>\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\">\n  <svg\n    slot=\"left-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n    >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n  Refresh order status\n</ic-button>`,\n      long: `.parent-container {\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\">\n  <SlottedSVG\n    slot=\"left-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n    >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </SlottedSVG>\n  Refresh order status\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsWithIcon}>\n  <IcButton variant=\"primary\">\n    Refresh order status\n    <svg\n      slot=\"left-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n</ComponentPreview>\n\n### Icon Button\n\nWhen using an icon button, refer to the guidance of using [tooltips](/components/tooltip/#when-to-use). When disabling tooltips, provide a suitable `aria-label` or `title` to provide context to screen readers.\n\nexport const snippetsIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  variant=\"icon-primary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button \n  variant=\"icon-secondary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button \n  variant=\"icon-tertiary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button \n  variant=\"icon-destructive\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button\n  variant=\"icon\"\n  aria-label=\"you can disable tooltips on icon buttons\"\n  disable-tooltip=\"true\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton \n  variant=\"icon-primary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton \n  variant=\"icon-secondary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton \n  variant=\"icon-tertiary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton \n  variant=\"icon-destructive\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton\n  variant=\"icon\"\n  aria-label=\"you can disable tooltips on icon buttons\"\n  disableTooltip\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path\n      d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n    />\n  </svg>\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsIcon}>\n  <IcButton variant=\"icon-primary\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton\n    variant=\"icon-secondary\"\n    aria-label=\"you can disable tooltips on icon buttons\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton variant=\"icon-tertiary\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton variant=\"icon-destructive\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton\n    variant=\"icon\"\n    aria-label=\"you can disable tooltips on icon buttons\"\n    disableTooltip\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n</ComponentPreview>\n\n### Tooltip\n\nexport const snippetsTooltip = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\" title=\"We can add tooltips to text buttons\">Button With Title</ic-button>\n<ic-button\n  variant=\"primary\"\n  title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n  tooltip-placement=\"right\"\n>\n  Different positions\n</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" title=\"We can add tooltips to text buttons\">\n  Button With Title\n</IcButton>\n<IcButton\n  variant=\"primary\"\n  title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n  tooltipPlacement=\"right\"\n>\n  Different positions\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview\n  style={{ gap: \"var(--ic-space-xs)\" }}\n  snippets={snippetsTooltip}\n>\n  <IcButton variant=\"primary\" title=\"We can add tooltips to text buttons\">\n    Button With Title\n  </IcButton>\n  <IcButton\n    variant=\"primary\"\n    title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n    tooltipPlacement=\"right\"\n  >\n    Different positions\n  </IcButton>\n</ComponentPreview>\n\n### Sizing\n\nexport const snippetsSizing = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\" size=\"small\">Add to order</ic-button>\n<ic-button variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"primary\" size=\"large\">Add to order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" size=\"small\">Add to order</IcButton>\n<IcButton variant=\"primary\">Add to order</IcButton>\n<IcButton variant=\"primary\" size=\"large\">Add to order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsSizing}>\n  <IcButton variant=\"primary\" size=\"small\">\n    Add to order\n  </IcButton>\n  <IcButton variant=\"primary\">Add to order</IcButton>\n  <IcButton variant=\"primary\" size=\"large\">\n    Add to order\n  </IcButton>\n</ComponentPreview>\n\n### Colour variants\n\nexport const snippetsColour = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"primary\" appearance=\"dark\">Add to order</ic-button>\n<ic-button variant=\"primary\" appearance=\"light\">Add to order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\">Add to order</IcButton>\n<IcButton variant=\"primary\" appearance=\"dark\">Add to order</IcButton>\n<IcButton variant=\"primary\" appearance=\"light\">Add to order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsColour}>\n  <IcButton variant=\"primary\">Add to order</IcButton>\n  <IcButton variant=\"primary\" appearance=\"dark\">\n    Add to order\n  </IcButton>\n  <IcButton variant=\"primary\" appearance=\"light\">\n    Add to order\n  </IcButton>\n</ComponentPreview>\n\n### File upload\n\nexport const snippetsFileUpload = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button\n  variant=\"primary\"\n  id=\"file-button-single\"\n  file-upload=\"true\"\n  accept=\".doc, text/plain, .json, .png\"\n>\n  Upload a file\n</ic-button>\n<ic-button\n  variant=\"primary\"\n  id=\"file-button-multiple\"\n  file-upload=\"true\"\n  multiple=\"true\"\n  accept=\".doc, text/plain, .json, .png\"\n>\n  Upload multiple files\n</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>\n  <script>\n    document\n      .querySelector(\"#file-button-single\")\n      .addEventListener(\"icFileSelection\", (ev) => {\n        console.log(\"Single file upload\", ev.detail);\n      });\n    document\n      .querySelector(\"#file-button-multiple\")\n      .addEventListener(\"icFileSelection\", (ev) => {\n        console.log(\"Multiple files upload\", ev.detail);\n      });\n  </script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"primary\"\n  fileUpload\n  accept=\".doc, text/plain, .json, .png\"\n  onIcFileSelection={(event) =>\n    console.log(\"Single file upload\", event.detail)\n  }\n>\n  Upload a file\n</IcButton>\n<IcButton\n  variant=\"primary\"\n  fileUpload\n  multiple\n  accept=\".doc, text/plain, .json, .png\"\n  onIcFileSelection={(event) =>\n    console.log(\"Multiple files upload\", event.detail)\n  }\n>\n  Upload multiple files\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview snippets={snippetsFileUpload} style={{ gap: \"0.5rem\" }}>\n  <IcButton\n    variant=\"primary\"\n    fileUpload\n    accept=\".doc, text/plain, .json, .png\"\n    onIcFileSelection={(event) =>\n      console.log(\"Single file upload\", event.detail)\n    }\n  >\n    Upload a file\n  </IcButton>\n  <IcButton\n    variant=\"primary\"\n    fileUpload\n    multiple\n    accept=\".doc, text/plain, .json, .png\"\n    onIcFileSelection={(event) =>\n      console.log(\"Multiple files upload\", event.detail)\n    }\n  >\n    Upload multiple files\n  </IcButton>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcButton, IcMenuGroup, IcMenuItem, IcPopoverMenu } from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button id='my-button' variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"secondary\">View coffees</ic-button>\n<ic-button variant=\"tertiary\">Find out more</ic-button>\n<ic-button variant=\"destructive\">Cancel order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>\n  <div class=\"parent-container\">\n    {shortCode}\n  </div>\n  <script>\n    const btn = document.querySelector('#my-button');\n    btn.addEventListener('click', (ev) => {\n      console.log(ev);\n    })\n  </script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>\n  Add to order\n</IcButton>\n<IcButton variant=\"secondary\">View coffees</IcButton>\n<IcButton variant=\"tertiary\">Find out more</IcButton>\n<IcButton variant=\"destructive\">Cancel order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsDefault}>\n  <IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>\n    Add to order\n  </IcButton>\n  <IcButton variant=\"secondary\">View coffees</IcButton>\n  <IcButton variant=\"tertiary\">Find out more</IcButton>\n  <IcButton variant=\"destructive\">Cancel order</IcButton>\n</ComponentPreview>\n\n## Button details\n\n<ComponentDetails component=\"ic-button\" />\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\" disabled=\"true\">Add to order</ic-button>\n<ic-button variant=\"secondary\" loading=\"true\">Loading button</ic-button>\n<ic-button variant=\"primary\" dropdown=\"true\">Add to order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" disabled>Add to order</IcButton>\n<IcButton variant=\"secondary\" loading>Loading button</IcButton>\n<IcButton variant=\"primary\" dropdown>Add to order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsOtherStates}>\n  <IcButton variant=\"primary\" disabled>\n    Add to order\n  </IcButton>\n  <IcButton variant=\"secondary\" loading>\n    Loading button\n  </IcButton>\n  <IcButton variant=\"primary\" dropdown>\n    Add to order\n  </IcButton>\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\">\n  <svg\n    slot=\"left-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n    >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n  Refresh order status\n</ic-button>`,\n      long: `.parent-container {\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\">\n  <SlottedSVG\n    slot=\"left-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n    >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </SlottedSVG>\n  Refresh order status\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsWithIcon}>\n  <IcButton variant=\"primary\">\n    Refresh order status\n    <svg\n      slot=\"left-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n</ComponentPreview>\n\n### Icon Button\n\nWhen using an icon button, refer to the guidance of using [tooltips](/components/tooltip/#when-to-use). When disabling tooltips, provide a suitable `aria-label` or `title` to provide context to screen readers.\n\nexport const snippetsIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  variant=\"icon-primary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button \n  variant=\"icon-secondary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button \n  variant=\"icon-tertiary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button \n  variant=\"icon-destructive\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>\n<ic-button\n  variant=\"icon\"\n  aria-label=\"you can disable tooltips on icon buttons\"\n  disable-tooltip=\"true\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton \n  variant=\"icon-primary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton \n  variant=\"icon-secondary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton \n  variant=\"icon-tertiary\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton \n  variant=\"icon-destructive\" \n  aria-label=\"refresh\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n  </svg>\n</IcButton>\n<IcButton\n  variant=\"icon\"\n  aria-label=\"you can disable tooltips on icon buttons\"\n  disableTooltip\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path\n      d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n    />\n  </svg>\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsIcon}>\n  <IcButton variant=\"icon-primary\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton\n    variant=\"icon-secondary\"\n    aria-label=\"you can disable tooltips on icon buttons\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton variant=\"icon-tertiary\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton variant=\"icon-destructive\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n  <IcButton\n    variant=\"icon\"\n    aria-label=\"you can disable tooltips on icon buttons\"\n    disableTooltip\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n    </svg>\n  </IcButton>\n</ComponentPreview>\n\n### Tooltip\n\nexport const snippetsTooltip = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\" title=\"We can add tooltips to text buttons\">Button With Title</ic-button>\n<ic-button\n  variant=\"primary\"\n  title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n  tooltip-placement=\"right\"\n>\n  Different positions\n</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" title=\"We can add tooltips to text buttons\">\n  Button With Title\n</IcButton>\n<IcButton\n  variant=\"primary\"\n  title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n  tooltipPlacement=\"right\"\n>\n  Different positions\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview\n  style={{ gap: \"var(--ic-space-xs)\" }}\n  snippets={snippetsTooltip}\n>\n  <IcButton variant=\"primary\" title=\"We can add tooltips to text buttons\">\n    Button With Title\n  </IcButton>\n  <IcButton\n    variant=\"primary\"\n    title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n    tooltipPlacement=\"right\"\n  >\n    Different positions\n  </IcButton>\n</ComponentPreview>\n\n### Sizing\n\nexport const snippetsSizing = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\" size=\"small\">Add to order</ic-button>\n<ic-button variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"primary\" size=\"large\">Add to order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" size=\"small\">Add to order</IcButton>\n<IcButton variant=\"primary\">Add to order</IcButton>\n<IcButton variant=\"primary\" size=\"large\">Add to order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsSizing}>\n  <IcButton variant=\"primary\" size=\"small\">\n    Add to order\n  </IcButton>\n  <IcButton variant=\"primary\">Add to order</IcButton>\n  <IcButton variant=\"primary\" size=\"large\">\n    Add to order\n  </IcButton>\n</ComponentPreview>\n\n### Colour variants\n\nexport const snippetsColour = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"primary\" appearance=\"dark\">Add to order</ic-button>\n<ic-button variant=\"primary\" appearance=\"light\">Add to order</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\">Add to order</IcButton>\n<IcButton variant=\"primary\" appearance=\"dark\">Add to order</IcButton>\n<IcButton variant=\"primary\" appearance=\"light\">Add to order</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsColour}>\n  <IcButton variant=\"primary\">Add to order</IcButton>\n  <IcButton variant=\"primary\" appearance=\"dark\">\n    Add to order\n  </IcButton>\n  <IcButton variant=\"primary\" appearance=\"light\">\n    Add to order\n  </IcButton>\n</ComponentPreview>\n\n### File upload\n\nexport const snippetsFileUpload = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button\n  variant=\"primary\"\n  id=\"file-button-single\"\n  file-upload=\"true\"\n  accept=\".doc, text/plain, .json, .png\"\n>\n  Upload a file\n</ic-button>\n<ic-button\n  variant=\"primary\"\n  id=\"file-button-multiple\"\n  file-upload=\"true\"\n  multiple=\"true\"\n  accept=\".doc, text/plain, .json, .png\"\n>\n  Upload multiple files\n</ic-button>`,\n      long: `.parent-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--ic-space-xs);\n    padding: var(--ic-space-md);\n  }\n</style>\n<body>  \n  <div class=\"parent-container\">\n    {shortCode}\n  </div>\n  <script>\n    document\n      .querySelector(\"#file-button-single\")\n      .addEventListener(\"icFileSelection\", (ev) => {\n        console.log(\"Single file upload\", ev.detail);\n      });\n    document\n      .querySelector(\"#file-button-multiple\")\n      .addEventListener(\"icFileSelection\", (ev) => {\n        console.log(\"Multiple files upload\", ev.detail);\n      });\n  </script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"primary\"\n  fileUpload\n  accept=\".doc, text/plain, .json, .png\"\n  onIcFileSelection={(event) =>\n    console.log(\"Single file upload\", event.detail)\n  }\n>\n  Upload a file\n</IcButton>\n<IcButton\n  variant=\"primary\"\n  fileUpload\n  multiple\n  accept=\".doc, text/plain, .json, .png\"\n  onIcFileSelection={(event) =>\n    console.log(\"Multiple files upload\", event.detail)\n  }\n>\n  Upload multiple files\n</IcButton>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const useStyles = createUseStyles({\n  parentContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: \"var(--ic-space-xs)\",\n    padding: \"var(--ic-space-md)\",\n  },\n});\nconst classes = useStyles();\nreturn (\n  <div className={classes.parentContainer}>\n    {shortCode}\n  </div>\n)`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview snippets={snippetsFileUpload} style={{ gap: \"0.5rem\" }}>\n  <IcButton\n    variant=\"primary\"\n    fileUpload\n    accept=\".doc, text/plain, .json, .png\"\n    onIcFileSelection={(event) =>\n      console.log(\"Single file upload\", event.detail)\n    }\n  >\n    Upload a file\n  </IcButton>\n  <IcButton\n    variant=\"primary\"\n    fileUpload\n    multiple\n    accept=\".doc, text/plain, .json, .png\"\n    onIcFileSelection={(event) =>\n      console.log(\"Multiple files upload\", event.detail)\n    }\n  >\n    Upload multiple files\n  </IcButton>\n</ComponentPreview>\n\n### Dropdown button with popover menu\n\nexport const snippetsDropdownButton = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button\n  dropdown=\"true\"\n  variant=\"primary\"\n  id=\"dropdown-button-popover\"\n  onclick=\"handleClick()\"\n>\n  Actions\n</ic-button>\n<ic-popover-menu\n  anchor=\"dropdown-button-popover\"\n  aria-label=\"popover\"\n  id=\"dropdown-button-popover-menu\"\n>\n  <ic-menu-group label=\"Sort\">\n    <ic-menu-item label=\"Sort ascending\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          d=\"M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z\"\n        />\n      </svg>\n    </ic-menu-item>\n    <ic-menu-item label=\"Sort descending\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z\" />\n      </svg>\n    </ic-menu-item>\n  </ic-menu-group>\n  <ic-menu-item label=\"Filter\" variant=\"toggle\">\n    <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path\n        d=\"M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z\"\n      />\n    </svg>\n  </ic-menu-item>\n  <ic-menu-group label=\"Manage columns\">\n    <ic-menu-item label=\"Hide column\" variant=\"toggle\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          d=\"M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z\"\n        />\n      </svg>\n    </ic-menu-item>\n    <ic-menu-item label=\"Column width\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z\" />\n      </svg>\n    </ic-menu-item>\n  </ic-menu-group>\n</ic-popover-menu>`,\n      long: `{shortCode}\n<script>\n  let icPopover = document.querySelector('#dropdown-button-popover-menu');\n  let icButton = document.querySelector('#dropdown-button-popover');\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n  icPopover.addEventListener('icPopoverClosed', (ev) => {\n    icButton.setAttribute('dropdown-expanded', false);\n  });\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  dropdown\n  dropdownExpanded={popoverOpen}\n  variant=\"primary\"\n  id=\"dropdown-button-popover\"\n  onClick={handlePopoverToggled}\n>\n  Actions\n</IcButton>\n<IcPopoverMenu\n  anchor=\"dropdown-button-popover\"\n  aria-label=\"popover\"\n  open={popoverOpen}\n  onIcPopoverClosed={handlePopoverClosed}\n>\n  <IcMenuGroup label=\"Sort\">\n    <IcMenuItem label=\"Sort ascending\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        path={mdiArrowUpThin}\n      />\n    </IcMenuItem>\n    <IcMenuItem label=\"Sort descending\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        path={mdiArrowDownThin}\n      />\n    </IcMenuItem>\n  </IcMenuGroup>\n  <IcMenuItem label=\"Filter\" variant=\"toggle\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      path={mdiFilterOffOutline}\n    />\n  </IcMenuItem>\n  <IcMenuGroup label=\"Manage columns\">\n    <IcMenuItem label=\"Hide column\" variant=\"toggle\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        path={mdiEyeOffOutline}\n      />\n    </IcMenuItem>\n    <IcMenuItem label=\"Column width\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        path={mdiSwapHorizontal}\n      />\n    </IcMenuItem>\n  </IcMenuGroup>\n</IcPopoverMenu>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n)`,\n        },\n      ],\n    },\n  },\n];\n\nexport const DropdownButtonPopover = () => {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n  const handlePopoverClosed = () => setPopoverOpen(false);\n  return (\n    <>\n      <IcButton\n        dropdown\n        dropdownExpanded={popoverOpen}\n        variant=\"primary\"\n        id=\"dropdown-button-popover\"\n        onClick={handlePopoverToggled}\n      >\n        Actions\n      </IcButton>\n      <IcPopoverMenu\n        anchor=\"dropdown-button-popover\"\n        aria-label=\"popover\"\n        open={popoverOpen}\n        onIcPopoverClosed={handlePopoverClosed}\n      >\n        <IcMenuGroup label=\"Sort\">\n          <IcMenuItem label=\"Sort ascending\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z\" />\n            </svg>\n          </IcMenuItem>\n          <IcMenuItem label=\"Sort descending\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z\" />\n            </svg>\n          </IcMenuItem>\n        </IcMenuGroup>\n        <IcMenuItem label=\"Filter\" variant=\"toggle\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path d=\"M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z\" />\n          </svg>\n        </IcMenuItem>\n        <IcMenuGroup label=\"Manage columns\">\n          <IcMenuItem label=\"Hide column\" variant=\"toggle\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z\" />\n            </svg>\n          </IcMenuItem>\n          <IcMenuItem label=\"Column width\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z\" />\n            </svg>\n          </IcMenuItem>\n        </IcMenuGroup>\n      </IcPopoverMenu>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippetsDropdownButton}\n>\n  <DropdownButtonPopover />\n</ComponentPreview>\n",
       "path": "/components/button/code",
       "date": "2024-05-31",
       "title": "Button",
@@ -1253,10 +1253,10 @@
       ],
       "meta": {
         "relativePath": "components/buttons/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.554Z",
-        "size": 24880,
-        "formattedSize": "24.3 KB"
+        "createdAt": "2024-11-06T14:48:03.255Z",
+        "lastModified": "2024-11-06T14:48:03.255Z",
+        "size": 33585,
+        "formattedSize": "32.8 KB"
       }
     },
     {
@@ -1285,8 +1285,8 @@
       ],
       "meta": {
         "relativePath": "components/buttons/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.554Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.968Z",
         "size": 15266,
         "formattedSize": "14.9 KB"
       }
@@ -1312,8 +1312,8 @@
       ],
       "meta": {
         "relativePath": "components/card-horizontal/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.562Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.968Z",
         "size": 54141,
         "formattedSize": "52.9 KB"
       }
@@ -1339,8 +1339,8 @@
       ],
       "meta": {
         "relativePath": "components/card-horizontal/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.562Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.968Z",
         "size": 3071,
         "formattedSize": "3.0 KB"
       }
@@ -1370,8 +1370,8 @@
       ],
       "meta": {
         "relativePath": "components/cards/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.562Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.968Z",
         "size": 3439,
         "formattedSize": "3.4 KB"
       }
@@ -1401,8 +1401,8 @@
       ],
       "meta": {
         "relativePath": "components/cards/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.562Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.968Z",
         "size": 56785,
         "formattedSize": "55.5 KB"
       }
@@ -1433,8 +1433,8 @@
       ],
       "meta": {
         "relativePath": "components/cards/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.562Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:18:59.968Z",
         "size": 10600,
         "formattedSize": "10.4 KB"
       }
@@ -1464,8 +1464,8 @@
       ],
       "meta": {
         "relativePath": "components/checkboxes/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.570Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.976Z",
         "size": 2745,
         "formattedSize": "2.7 KB"
       }
@@ -1495,8 +1495,8 @@
       ],
       "meta": {
         "relativePath": "components/checkboxes/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.570Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.976Z",
         "size": 18091,
         "formattedSize": "17.7 KB"
       }
@@ -1527,8 +1527,8 @@
       ],
       "meta": {
         "relativePath": "components/checkboxes/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.570Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.980Z",
         "size": 8556,
         "formattedSize": "8.4 KB"
       }
@@ -1558,8 +1558,8 @@
       ],
       "meta": {
         "relativePath": "components/chips/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.570Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.980Z",
         "size": 2777,
         "formattedSize": "2.7 KB"
       }
@@ -1589,8 +1589,8 @@
       ],
       "meta": {
         "relativePath": "components/chips/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.570Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.980Z",
         "size": 10153,
         "formattedSize": "9.9 KB"
       }
@@ -1622,8 +1622,8 @@
       "tags": ["Tags"],
       "meta": {
         "relativePath": "components/chips/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.570Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:18:59.980Z",
         "size": 6649,
         "formattedSize": "6.5 KB"
       }
@@ -1653,8 +1653,8 @@
       ],
       "meta": {
         "relativePath": "components/classification-banner/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.582Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.000Z",
         "size": 1188,
         "formattedSize": "1.2 KB"
       }
@@ -1684,8 +1684,8 @@
       ],
       "meta": {
         "relativePath": "components/classification-banner/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.582Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.000Z",
         "size": 3208,
         "formattedSize": "3.1 KB"
       }
@@ -1716,8 +1716,8 @@
       ],
       "meta": {
         "relativePath": "components/classification-banner/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.582Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.000Z",
         "size": 2020,
         "formattedSize": "2.0 KB"
       }
@@ -1747,8 +1747,8 @@
       ],
       "meta": {
         "relativePath": "components/data-entity/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.582Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.000Z",
         "size": 2202,
         "formattedSize": "2.2 KB"
       }
@@ -1778,8 +1778,8 @@
       ],
       "meta": {
         "relativePath": "components/data-entity/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.582Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.000Z",
         "size": 17951,
         "formattedSize": "17.5 KB"
       }
@@ -1810,8 +1810,8 @@
       ],
       "meta": {
         "relativePath": "components/data-entity/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.582Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.000Z",
         "size": 4762,
         "formattedSize": "4.7 KB"
       }
@@ -1836,8 +1836,8 @@
       ],
       "meta": {
         "relativePath": "components/data-table/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.004Z",
         "size": 81274,
         "formattedSize": "79.4 KB"
       }
@@ -1864,8 +1864,8 @@
       "tags": ["Table"],
       "meta": {
         "relativePath": "components/data-table/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.004Z",
         "size": 1735,
         "formattedSize": "1.7 KB"
       }
@@ -1894,8 +1894,8 @@
       ],
       "meta": {
         "relativePath": "components/date-input/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.004Z",
         "size": 3605,
         "formattedSize": "3.5 KB"
       }
@@ -1924,8 +1924,8 @@
       ],
       "meta": {
         "relativePath": "components/date-input/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.004Z",
         "size": 17301,
         "formattedSize": "16.9 KB"
       }
@@ -1955,8 +1955,8 @@
       ],
       "meta": {
         "relativePath": "components/date-input/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.004Z",
         "size": 8270,
         "formattedSize": "8.1 KB"
       }
@@ -1985,8 +1985,8 @@
       ],
       "meta": {
         "relativePath": "components/date-picker/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.008Z",
         "size": 3243,
         "formattedSize": "3.2 KB"
       }
@@ -2015,8 +2015,8 @@
       ],
       "meta": {
         "relativePath": "components/date-picker/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.008Z",
         "size": 30548,
         "formattedSize": "29.8 KB"
       }
@@ -2047,8 +2047,8 @@
       "tags": ["Calendar", "Datetime picker"],
       "meta": {
         "relativePath": "components/date-picker/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.586Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.008Z",
         "size": 5256,
         "formattedSize": "5.1 KB"
       }
@@ -2078,8 +2078,8 @@
       ],
       "meta": {
         "relativePath": "components/dialog/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.590Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.008Z",
         "size": 4110,
         "formattedSize": "4.0 KB"
       }
@@ -2109,8 +2109,8 @@
       ],
       "meta": {
         "relativePath": "components/dialog/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.590Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.008Z",
         "size": 46750,
         "formattedSize": "45.7 KB"
       }
@@ -2142,8 +2142,8 @@
       "tags": ["Popup", "Modal window"],
       "meta": {
         "relativePath": "components/dialog/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.590Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.008Z",
         "size": 8641,
         "formattedSize": "8.4 KB"
       }
@@ -2173,8 +2173,8 @@
       ],
       "meta": {
         "relativePath": "components/empty-state/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.594Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.012Z",
         "size": 1536,
         "formattedSize": "1.5 KB"
       }
@@ -2204,8 +2204,8 @@
       ],
       "meta": {
         "relativePath": "components/empty-state/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.594Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.012Z",
         "size": 21654,
         "formattedSize": "21.1 KB"
       }
@@ -2236,8 +2236,8 @@
       ],
       "meta": {
         "relativePath": "components/empty-state/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.594Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.012Z",
         "size": 10935,
         "formattedSize": "10.7 KB"
       }
@@ -2267,8 +2267,8 @@
       ],
       "meta": {
         "relativePath": "components/footer/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.606Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.028Z",
         "size": 2011,
         "formattedSize": "2.0 KB"
       }
@@ -2298,8 +2298,8 @@
       ],
       "meta": {
         "relativePath": "components/footer/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.606Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.032Z",
         "size": 18992,
         "formattedSize": "18.5 KB"
       }
@@ -2330,8 +2330,8 @@
       ],
       "meta": {
         "relativePath": "components/footer/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.606Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.032Z",
         "size": 7787,
         "formattedSize": "7.6 KB"
       }
@@ -2361,8 +2361,8 @@
       ],
       "meta": {
         "relativePath": "components/hero/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.618Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.048Z",
         "size": 2014,
         "formattedSize": "2.0 KB"
       }
@@ -2392,8 +2392,8 @@
       ],
       "meta": {
         "relativePath": "components/hero/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.618Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.048Z",
         "size": 17442,
         "formattedSize": "17.0 KB"
       }
@@ -2425,8 +2425,8 @@
       "tags": ["Banner"],
       "meta": {
         "relativePath": "components/hero/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.618Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.048Z",
         "size": 8391,
         "formattedSize": "8.2 KB"
       }
@@ -2441,8 +2441,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/components/index.mdx",
       "meta": {
         "relativePath": "components/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.634Z",
+        "createdAt": "2024-11-06T10:27:49.400Z",
+        "lastModified": "2024-11-06T10:19:00.064Z",
         "size": 597,
         "formattedSize": "597 Bytes"
       }
@@ -2472,8 +2472,8 @@
       ],
       "meta": {
         "relativePath": "components/links/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.634Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.064Z",
         "size": 1852,
         "formattedSize": "1.8 KB"
       }
@@ -2503,8 +2503,8 @@
       ],
       "meta": {
         "relativePath": "components/links/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.634Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.064Z",
         "size": 6799,
         "formattedSize": "6.6 KB"
       }
@@ -2536,8 +2536,8 @@
       "tags": ["Anchor", "Hyperlink"],
       "meta": {
         "relativePath": "components/links/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.634Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.064Z",
         "size": 6871,
         "formattedSize": "6.7 KB"
       }
@@ -2567,8 +2567,8 @@
       ],
       "meta": {
         "relativePath": "components/loading-indicators/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.634Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.072Z",
         "size": 2469,
         "formattedSize": "2.4 KB"
       }
@@ -2598,8 +2598,8 @@
       ],
       "meta": {
         "relativePath": "components/loading-indicators/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.634Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.072Z",
         "size": 7783,
         "formattedSize": "7.6 KB"
       }
@@ -2631,8 +2631,8 @@
       "tags": ["Progress bar", "Progress indicator", "Spinner"],
       "meta": {
         "relativePath": "components/loading-indicators/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.634Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.072Z",
         "size": 7001,
         "formattedSize": "6.8 KB"
       }
@@ -2657,8 +2657,8 @@
       ],
       "meta": {
         "relativePath": "components/multi-select/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.638Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.072Z",
         "size": 44849,
         "formattedSize": "43.8 KB"
       }
@@ -2685,8 +2685,8 @@
       "tags": ["Combobox", "Dropdown menu"],
       "meta": {
         "relativePath": "components/multi-select/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.638Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.076Z",
         "size": 1982,
         "formattedSize": "1.9 KB"
       }
@@ -2716,8 +2716,8 @@
       ],
       "meta": {
         "relativePath": "components/page-header/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.638Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.076Z",
         "size": 2399,
         "formattedSize": "2.3 KB"
       }
@@ -2747,8 +2747,8 @@
       ],
       "meta": {
         "relativePath": "components/page-header/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.638Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.076Z",
         "size": 19079,
         "formattedSize": "18.6 KB"
       }
@@ -2779,8 +2779,8 @@
       ],
       "meta": {
         "relativePath": "components/page-header/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.638Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.076Z",
         "size": 9062,
         "formattedSize": "8.8 KB"
       }
@@ -2810,8 +2810,8 @@
       ],
       "meta": {
         "relativePath": "components/pagination/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.642Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.088Z",
         "size": 3216,
         "formattedSize": "3.1 KB"
       }
@@ -2841,8 +2841,8 @@
       ],
       "meta": {
         "relativePath": "components/pagination/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.642Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.088Z",
         "size": 7202,
         "formattedSize": "7.0 KB"
       }
@@ -2873,8 +2873,8 @@
       ],
       "meta": {
         "relativePath": "components/pagination/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.642Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.088Z",
         "size": 9583,
         "formattedSize": "9.4 KB"
       }
@@ -2904,15 +2904,15 @@
       ],
       "meta": {
         "relativePath": "components/popover-menu/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.646Z",
+        "createdAt": "2024-11-06T10:27:49.400Z",
+        "lastModified": "2024-11-06T10:19:00.092Z",
         "size": 3359,
         "formattedSize": "3.3 KB"
       }
     },
     {
       "id": "components__popover-menu__codex",
-      "contents": "\nimport { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton } from \"@ukic/react\";\nimport { useRef } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  id=\"button-1\" \n  variant=\"icon\"\n  title=\"More information\" \n  onclick=\"handleClick()\"\n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </svg>\n</ic-button>\n<div>\n  <ic-popover-menu anchor=\"button-1\" aria-label=\"popover\" id=\"popover-menu\">\n    <ic-menu-item label=\"Copy code\"></ic-menu-item>\n    <ic-menu-item label=\"Paste code\"></ic-menu-item>\n    <ic-menu-item\n      label=\"Actions\"\n      submenu-trigger-for=\"actions\"\n    ></ic-menu-item>\n  </ic-popover-menu>\n  <ic-popover-menu submenu-id=\"actions\">\n    <ic-menu-item label=\"Edit\"></ic-menu-item>\n    <ic-menu-item label=\"Find\"></ic-menu-item>\n    <ic-menu-item label=\"Delete\" variant=\"destructive\"></ic-menu-item>\n  </ic-popover-menu>\n</div>`,\n      long: `{shortCode}\n<script>\n  var icPopover = document.querySelector(\"#popover-menu\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"icon\"\n  title=\"More information\"\n  id=\"button-1\"\n  onClick={handleClick}\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-1\" aria-label=\"popover\" ref={popoverEl}>\n  <IcMenuItem label=\"Copy code\" />\n  <IcMenuItem label=\"Paste code\" />\n  <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n</IcPopoverMenu>\n<IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n  <IcMenuItem label=\"Edit\" />\n  <IcMenuItem label=\"Find\" />\n  <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n</IcPopoverMenu>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n      ],\n    },\n  },\n];\n\nexport const DemoPopover = () => {\n  const popoverEl = useRef(null);\n  const handleClick = () => {\n    popoverEl.current.open = !popoverEl.current.open;\n  };\n  return (\n    <>\n      <IcButton\n        variant=\"icon\"\n        title=\"More information\"\n        id=\"button-1\"\n        onClick={handleClick}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          class=\"bi bi-three-dots-vertical\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n        </svg>\n      </IcButton>\n      <IcPopoverMenu anchor=\"button-1\" aria-label=\"popover\" ref={popoverEl}>\n        <IcMenuItem label=\"Copy code\" />\n        <IcMenuItem label=\"Paste code\" />\n        <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n      </IcPopoverMenu>\n      <IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n        <IcMenuItem label=\"Edit\" />\n        <IcMenuItem label=\"Find\" />\n        <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n      </IcPopoverMenu>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippets}\n>\n  <DemoPopover />\n</ComponentPreview>\n\n## Popover menu details\n\n<ComponentDetails component=\"ic-popover-menu\" />\n\n## Menu item details\n\n<ComponentDetails component=\"ic-menu-item\" />\n\n## Menu group details\n\n<ComponentDetails component=\"ic-menu-group\" />\n\n## Variants\n\n### With button variations\n\nexport const snippetsButtons = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  id=\"button-2\" \n  variant=\"icon\"\n  title=\"More information\" \n  onclick=\"handleClick()\"\n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </svg>\n</ic-button>\n<div>\n  <ic-popover-menu anchor=\"button-2\" aria-label=\"popover\" id=\"popover-menu-2\">\n    <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\n    <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\n    <ic-menu-item label=\"Edit\" description=\"This is used to edit the original.\"></ic-menu-item>\n    <ic-menu-item label=\"Show/Hide\" variant=\"toggle\"></ic-menu-item>\n    <ic-menu-item label=\"Find icons\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        width=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n        />\n      </svg>\n    </ic-menu-item>\n    <ic-menu-item label=\"Delete\" disabled=\"true\" variant=\"destructive\"></ic-menu-item>\n    <ic-menu-item label=\"Log out\" variant=\"destructive\"></ic-menu-item>\n  </ic-popover-menu>\n</div>`,\n      long: `{shortCode}\n<script>\n  var icPopover = document.querySelector(\"#popover-menu-2\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"icon\"\n  title=\"More information\"\n  id=\"button-2\"\n  onClick={handleClick}\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-2\" aria-label=\"popover\" ref={popoverEl}>\n  <IcMenuItem label=\"Copy\" disabled />\n  <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n  <IcMenuItem label=\"Edit\" description=\"This is used to edit the original.\" />\n  <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\n  <IcMenuItem label=\"Find icons\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path\n        d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n      />\n    </SlottedSVG>\n  </IcMenuItem>\n  <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\n  <IcMenuItem label=\"Log out\" variant=\"destructive\" />\n</IcPopoverMenu>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    {shortCode}\n  </>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    {shortCode}\n  </>\n)`,\n        },\n      ],\n    },\n  },\n];\n\nexport const ButtonsPopover = () => {\n  const popoverEl = useRef(null);\n  const handleClick = () => {\n    popoverEl.current.open = !popoverEl.current.open;\n  };\n  return (\n    <>\n      <IcButton\n        variant=\"icon\"\n        title=\"More information\"\n        id=\"button-2\"\n        onClick={handleClick}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          class=\"bi bi-three-dots-vertical\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n        </svg>\n      </IcButton>\n      <IcPopoverMenu anchor=\"button-2\" aria-label=\"popover\" ref={popoverEl}>\n        <IcMenuItem label=\"Copy\" disabled />\n        <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n        <IcMenuItem\n          label=\"Edit\"\n          description=\"This is used to edit the original.\"\n        />\n        <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\n        <IcMenuItem label=\"Find icons\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n          </svg>\n        </IcMenuItem>\n        <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\n        <IcMenuItem label=\"Log out\" variant=\"destructive\" />\n      </IcPopoverMenu>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippetsButtons}\n>\n  <ButtonsPopover />\n</ComponentPreview>\n\n### With menu groups\n\nexport const snippetsGroups = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  id=\"button-3\" \n  variant=\"icon\"\n  title=\"More information\" \n  onclick=\"handleClick()\"\n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </svg>\n</ic-button>\n<div>\n  <ic-popover-menu anchor=\"button-3\" aria-label=\"popover\" id=\"popover-menu-3\">\n    <ic-menu-group label=\"Edit options\">\n      <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\n      <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\n    </ic-menu-group>\n    <ic-menu-group>\n      <ic-menu-item label=\"Format\"></ic-menu-item>\n      <ic-menu-item label=\"Help\"></ic-menu-item>\n    <ic-menu-group>\n  </ic-popover-menu>\n</div>`,\n      long: `{shortCode}\n<script>\n  var icPopover = document.querySelector(\"#popover-menu-3\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"icon\"\n  title=\"More information\"\n  id=\"button-3\"\n  onClick={handleClick}\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-3\" aria-label=\"popover\" ref={popoverEl}>\n  <IcMenuGroup label=\"Edit options\">\n    <IcMenuItem label=\"Copy\" disabled />\n    <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n  </IcMenuGroup>\n  <IcMenuGroup>\n    <IcMenuItem label=\"Format\" />\n    <IcMenuItem label=\"Help\" />\n  </IcMenuGroup>\n</IcPopoverMenu>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const popoverEl = useRef<HTMLIcPopoverMenuElement | null>(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n      ],\n    },\n  },\n];\n\nexport const GroupsPopover = () => {\n  const popoverEl = useRef(null);\n  const handleClick = () => {\n    popoverEl.current.open = !popoverEl.current.open;\n  };\n  return (\n    <>\n      <IcButton\n        variant=\"icon\"\n        title=\"More information\"\n        id=\"button-3\"\n        onClick={handleClick}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          class=\"bi bi-three-dots-vertical\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n        </svg>\n      </IcButton>\n      <IcPopoverMenu anchor=\"button-3\" aria-label=\"popover\" ref={popoverEl}>\n        <IcMenuGroup label=\"Edit options\">\n          <IcMenuItem label=\"Copy\" disabled />\n          <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n        </IcMenuGroup>\n        <IcMenuGroup>\n          <IcMenuItem label=\"Format\" />\n          <IcMenuItem label=\"Help\" />\n        </IcMenuGroup>\n      </IcPopoverMenu>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippetsGroups}\n>\n  <GroupsPopover />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton } from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  id=\"button-1\" \n  variant=\"icon\"\n  title=\"More information\" \n  onclick=\"handleClick()\"\n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </svg>\n</ic-button>\n<div>\n  <ic-popover-menu anchor=\"button-1\" aria-label=\"popover\" id=\"popover-menu\">\n    <ic-menu-item label=\"Copy code\"></ic-menu-item>\n    <ic-menu-item label=\"Paste code\"></ic-menu-item>\n    <ic-menu-item\n      label=\"Actions\"\n      submenu-trigger-for=\"actions\"\n    ></ic-menu-item>\n  </ic-popover-menu>\n  <ic-popover-menu submenu-id=\"actions\">\n    <ic-menu-item label=\"Edit\"></ic-menu-item>\n    <ic-menu-item label=\"Find\"></ic-menu-item>\n    <ic-menu-item label=\"Delete\" variant=\"destructive\"></ic-menu-item>\n  </ic-popover-menu>\n</div>`,\n      long: `{shortCode}\n<script>\n  var icPopover = document.querySelector(\"#popover-menu\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"icon\"\n  title=\"More information\"\n  id=\"button-1\"\n  onClick={handlePopoverToggled}\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-1\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\n  <IcMenuItem label=\"Copy code\" />\n  <IcMenuItem label=\"Paste code\" />\n  <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n</IcPopoverMenu>\n<IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n  <IcMenuItem label=\"Edit\" />\n  <IcMenuItem label=\"Find\" />\n  <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n</IcPopoverMenu>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n      ],\n    },\n  },\n];\n\nexport const DemoPopover = () => {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n  const handlePopoverClosed = () => setPopoverOpen(false);\n  return (\n    <>\n      <IcButton\n        variant=\"icon\"\n        title=\"More information\"\n        id=\"button-1\"\n        onClick={handlePopoverToggled}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          class=\"bi bi-three-dots-vertical\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n        </svg>\n      </IcButton>\n      <IcPopoverMenu\n        anchor=\"button-1\"\n        aria-label=\"popover\"\n        open={popoverOpen}\n        onIcPopoverClosed={handlePopoverClosed}\n      >\n        <IcMenuItem label=\"Copy code\" />\n        <IcMenuItem label=\"Paste code\" />\n        <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n      </IcPopoverMenu>\n      <IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n        <IcMenuItem label=\"Edit\" />\n        <IcMenuItem label=\"Find\" />\n        <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n      </IcPopoverMenu>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippets}\n>\n  <DemoPopover />\n</ComponentPreview>\n\n## Popover menu details\n\n<ComponentDetails component=\"ic-popover-menu\" />\n\n## Menu item details\n\n<ComponentDetails component=\"ic-menu-item\" />\n\n## Menu group details\n\n<ComponentDetails component=\"ic-menu-group\" />\n\n## Variants\n\n### With button variations\n\nexport const snippetsButtons = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  id=\"button-2\" \n  variant=\"icon\"\n  title=\"More information\" \n  onclick=\"handleClick()\"\n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </svg>\n</ic-button>\n<div>\n  <ic-popover-menu anchor=\"button-2\" aria-label=\"popover\" id=\"popover-menu-2\">\n    <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\n    <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\n    <ic-menu-item label=\"Edit\" description=\"This is used to edit the original.\"></ic-menu-item>\n    <ic-menu-item label=\"Show/Hide\" variant=\"toggle\"></ic-menu-item>\n    <ic-menu-item label=\"Find icons\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        width=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n        />\n      </svg>\n    </ic-menu-item>\n    <ic-menu-item label=\"Delete\" disabled=\"true\" variant=\"destructive\"></ic-menu-item>\n    <ic-menu-item label=\"Log out\" variant=\"destructive\"></ic-menu-item>\n  </ic-popover-menu>\n</div>`,\n      long: `{shortCode}\n<script>\n  var icPopover = document.querySelector(\"#popover-menu-2\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"icon\"\n  title=\"More information\"\n  id=\"button-2\"\n  onClick={handlePopoverToggled}\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-2\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\n  <IcMenuItem label=\"Copy\" disabled />\n  <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n  <IcMenuItem label=\"Edit\" description=\"This is used to edit the original.\" />\n  <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\n  <IcMenuItem label=\"Find icons\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path\n        d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n      />\n    </SlottedSVG>\n  </IcMenuItem>\n  <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\n  <IcMenuItem label=\"Log out\" variant=\"destructive\" />\n</IcPopoverMenu>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n)`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n)`,\n        },\n      ],\n    },\n  },\n];\n\nexport const ButtonsPopover = () => {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n  const handlePopoverClosed = () => setPopoverOpen(false);\n  return (\n    <>\n      <IcButton\n        variant=\"icon\"\n        title=\"More information\"\n        id=\"button-2\"\n        onClick={handlePopoverToggled}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          class=\"bi bi-three-dots-vertical\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n        </svg>\n      </IcButton>\n      <IcPopoverMenu\n        anchor=\"button-2\"\n        aria-label=\"popover\"\n        open={popoverOpen}\n        onIcPopoverClosed={handlePopoverClosed}\n      >\n        <IcMenuItem label=\"Copy\" disabled />\n        <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n        <IcMenuItem\n          label=\"Edit\"\n          description=\"This is used to edit the original.\"\n        />\n        <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\n        <IcMenuItem label=\"Find icons\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n          </svg>\n        </IcMenuItem>\n        <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\n        <IcMenuItem label=\"Log out\" variant=\"destructive\" />\n      </IcPopoverMenu>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippetsButtons}\n>\n  <ButtonsPopover />\n</ComponentPreview>\n\n### With menu groups\n\nexport const snippetsGroups = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button \n  id=\"button-3\" \n  variant=\"icon\"\n  title=\"More information\" \n  onclick=\"handleClick()\"\n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </svg>\n</ic-button>\n<div>\n  <ic-popover-menu anchor=\"button-3\" aria-label=\"popover\" id=\"popover-menu-3\">\n    <ic-menu-group label=\"Edit options\">\n      <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\n      <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\n    </ic-menu-group>\n    <ic-menu-group>\n      <ic-menu-item label=\"Format\"></ic-menu-item>\n      <ic-menu-item label=\"Help\"></ic-menu-item>\n    <ic-menu-group>\n  </ic-popover-menu>\n</div>`,\n      long: `{shortCode}\n<script>\n  var icPopover = document.querySelector(\"#popover-menu-3\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton\n  variant=\"icon\"\n  title=\"More information\"\n  id=\"button-3\"\n  onClick={handlePopoverToggled}\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    fill=\"currentColor\"\n    class=\"bi bi-three-dots-vertical\"\n    viewBox=\"0 0 16 16\"\n  >\n    <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n  </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-3\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\n  <IcMenuGroup label=\"Edit options\">\n    <IcMenuItem label=\"Copy\" disabled />\n    <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n  </IcMenuGroup>\n  <IcMenuGroup>\n    <IcMenuItem label=\"Format\" />\n    <IcMenuItem label=\"Help\" />\n  </IcMenuGroup>\n</IcPopoverMenu>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n  <>\n    {shortCode}\n  </>\n);`,\n        },\n      ],\n    },\n  },\n];\n\nexport const GroupsPopover = () => {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n  const handlePopoverClosed = () => setPopoverOpen(false);\n  return (\n    <>\n      <IcButton\n        variant=\"icon\"\n        title=\"More information\"\n        id=\"button-3\"\n        onClick={handlePopoverToggled}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          class=\"bi bi-three-dots-vertical\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n        </svg>\n      </IcButton>\n      <IcPopoverMenu\n        anchor=\"button-3\"\n        aria-label=\"popover\"\n        open={popoverOpen}\n        onIcPopoverClosed={handlePopoverClosed}\n      >\n        <IcMenuGroup label=\"Edit options\">\n          <IcMenuItem label=\"Copy\" disabled />\n          <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n        </IcMenuGroup>\n        <IcMenuGroup>\n          <IcMenuItem label=\"Format\" />\n          <IcMenuItem label=\"Help\" />\n        </IcMenuGroup>\n      </IcPopoverMenu>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippetsGroups}\n>\n  <GroupsPopover />\n</ComponentPreview>\n",
       "path": "/components/popover-menu/code",
       "date": "2024-05-31",
       "title": "Popover menu",
@@ -2935,10 +2935,10 @@
       ],
       "meta": {
         "relativePath": "components/popover-menu/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.646Z",
-        "size": 14638,
-        "formattedSize": "14.3 KB"
+        "createdAt": "2024-11-06T10:36:50.788Z",
+        "lastModified": "2024-11-06T10:36:50.788Z",
+        "size": 15648,
+        "formattedSize": "15.3 KB"
       }
     },
     {
@@ -2967,8 +2967,8 @@
       ],
       "meta": {
         "relativePath": "components/popover-menu/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.646Z",
+        "createdAt": "2024-11-06T10:27:49.400Z",
+        "lastModified": "2024-11-06T10:19:00.092Z",
         "size": 11283,
         "formattedSize": "11.0 KB"
       }
@@ -2998,15 +2998,15 @@
       ],
       "meta": {
         "relativePath": "components/radio/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.658Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.112Z",
         "size": 3539,
         "formattedSize": "3.5 KB"
       }
     },
     {
       "id": "components__radio__codex",
-      "contents": "\nimport { IcRadioGroup, IcRadioOption, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-1\"\n  label=\"Add a free purchase with any hot drink\"\n>\n  <ic-radio-option value=\"crisps\" label=\"Crisps\"></ic-radio-option>\n  <ic-radio-option\n    value=\"cookie\"\n    label=\"Deluxe chocolate chip cookie (sold out)\"\n    disabled=\"true\"\n  >\n  </ic-radio-option>\n  <ic-radio-option value=\"fruit\" label=\"Banana\"></ic-radio-option>\n  <ic-radio-option\n    value=\"No item\"\n    label=\"No thanks, just my coffee\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}   \n<script>\n  const radioGroup = document.querySelector(\"[name='radio-group-1']\");\n  radioGroup.addEventListener('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup name='radio-group-1' label=\"Add a free purchase with any hot drink\" onIcChange={(ev) => console.log(ev.detail.value)}>\n  <IcRadioOption value=\"crisps\" label=\"Crisps\" />\n  <IcRadioOption\n    value=\"cookie\"\n    label=\"Deluxe chocolate chip cookie (sold out)\"\n    disabled\n  />\n  <IcRadioOption value=\"fruit\" label=\"Banana\" />\n  <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={snippets}>\n  <IcRadioGroup\n    name=\"radio-group-1\"\n    label=\"Add a free purchase with any hot drink\"\n    onIcChange={(ev) => console.log(ev.detail.value)}\n  >\n    <IcRadioOption value=\"crisps\" label=\"Crisps\" />\n    <IcRadioOption\n      value=\"cookie\"\n      label=\"Deluxe chocolate chip cookie (sold out)\"\n      disabled\n    />\n    <IcRadioOption value=\"fruit\" label=\"Banana\" />\n    <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n## Radio group details\n\n<ComponentDetails component=\"ic-radio-group\" />\n\n## Radio option details\n\n<ComponentDetails component=\"ic-radio-option\" />\n\n## Variants\n\n### Conditional\n\nexport const conditional = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-2\"\n  label=\"Do you have any special requests?\"\n>\n  <ic-radio-option value=\"request\" label=\"Yes, I want to modify my order\">\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please provide some additional information\"\n      placeholder=\"i.e Soya milk please\"\n    >\n    </ic-text-field>\n  </ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\n  name=\"radio-group-1\"\n  label=\"Add a free purchase with any hot drink\"\n  onIcChange={(ev) => console.log(ev.detail.value)}\n>\n  <IcRadioOption value=\"crisps\" label=\"Crisps\" />\n  <IcRadioOption\n    value=\"cookie\"\n    label=\"Deluxe chocolate chip cookie (sold out)\"\n    disabled\n  />\n  <IcRadioOption value=\"fruit\" label=\"Banana\" />\n  <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={conditional}>\n  <IcRadioGroup name=\"radio-group-2\" label=\"Do you have any special requests?\">\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\">\n      <IcTextField\n        slot=\"additional-field\"\n        label=\"Please provide some additional information\"\n        placeholder=\"i.e Soya milk please\"\n      />\n    </IcRadioOption>\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n### Conditional dynamic\n\nexport const conditionalDynamic = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-3\"\n  label=\"Do you have any special requests?\"\n>\n  <ic-radio-option \n    value=\"request\" \n    label=\"Yes, I want to modify my order\"\n    additional-field-display=\"dynamic\"\n  >\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please provide some additional information\"\n      placeholder=\"i.e Soya milk please\"\n    >\n    </ic-text-field>\n  </ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\n  name=\"radio-group-3\"\n  label=\"Do you have any special requests?\"\n>\n  <IcRadioOption \n    value=\"request\" \n    label=\"Yes, I want to modify my order\" \n    additionalFieldDisplay=\"dynamic\"\n  >\n    <IcTextField\n      slot=\"additional-field\"\n      label=\"Please provide some additional information\"\n      placeholder=\"i.e Soya milk please\"\n    />\n  </IcRadioOption>\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview snippets={conditionalDynamic}>\n  <div style={{ width: \"18.75rem\" }}>\n    <IcRadioGroup\n      name=\"radio-group-3\"\n      label=\"Do you have any special requests?\"\n    >\n      <IcRadioOption\n        additionalFieldDisplay=\"dynamic\"\n        value=\"request\"\n        label=\"Yes, I want to modify my order\"\n      >\n        <IcTextField\n          slot=\"additional-field\"\n          label=\"Please provide some additional information\"\n          placeholder=\"i.e Soya milk please\"\n        />\n      </IcRadioOption>\n      <IcRadioOption value=\"none\" label=\"No, standard please\" />\n    </IcRadioGroup>\n  </div>\n</ComponentPreview>\n\n### With helper text\n\nexport const withHelperText = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  label=\"Do you have any special requests?\"\n  helper-text=\"Let us know if you'd like an alternative to dairy milk.\"\n  name=\"radio-group-4\"\n>\n  <ic-radio-option\n    value=\"request\"\n    label=\"Yes, I want to modify my order\"\n  ></ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup \n  label=\"Do you have any special requests?\" \n  helperText=\"Let us know if you'd like an alternative to dairy milk.\"\n  name='radio-group-4'\n>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withHelperText}>\n  <IcRadioGroup\n    label=\"Do you have any special requests?\"\n    helperText=\"Let us know if you'd like an alternative to dairy milk.\"\n    name=\"radio-group-4\"\n  >\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n### Size small\n\nexport const smallSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  label=\"Do you have any special requests?\"\n  name=\"radio-group-5\"\n  size=\"small\"\n>\n  <ic-radio-option\n    value=\"request\"\n    label=\"Yes, I want to modify my order\"\n  ></ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\n  label=\"Do you have any special requests?\"\n  name=\"radio-group-5\"\n  size=\"small\"\n>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={smallSnippet}>\n  <IcRadioGroup\n    label=\"Do you have any special requests?\"\n    name=\"radio-group-5\"\n    size=\"small\"\n  >\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n### With validation\n\nexport const withValidation = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-6\"\n  label=\"Do you have any special requests?\"\n  validation-status=\"error\"\n  validation-text=\"An answer to this question is required\"\n  required=\"true\"\n>\n  <ic-radio-option\n    value=\"request\"\n    label=\"Yes, I want to modify my order\"\n  ></ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\n  name=\"radio-group-6\"\n  label=\"Do you have any special requests?\"\n  validationStatus=\"error\"\n  validationText=\"An answer to this question is required\"\n  required\n>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withValidation}>\n  <IcRadioGroup\n    label=\"Do you have any special requests?\"\n    validationStatus=\"error\"\n    validationText=\"An answer to this question is required\"\n    required\n    name=\"radio-group-6\"\n  >\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcRadioGroup, IcRadioOption, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-1\"\n  label=\"Add a free purchase with any hot drink\"\n>\n  <ic-radio-option value=\"crisps\" label=\"Crisps\"></ic-radio-option>\n  <ic-radio-option\n    value=\"cookie\"\n    label=\"Deluxe chocolate chip cookie (sold out)\"\n    disabled=\"true\"\n  >\n  </ic-radio-option>\n  <ic-radio-option value=\"fruit\" label=\"Banana\"></ic-radio-option>\n  <ic-radio-option\n    value=\"No item\"\n    label=\"No thanks, just my coffee\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}   \n<script>\n  const radioGroup = document.querySelector(\"[name='radio-group-1']\");\n  radioGroup.addEventListener('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup name='radio-group-1' label=\"Add a free purchase with any hot drink\" onIcChange={(ev) => console.log(ev.detail.value)}>\n  <IcRadioOption value=\"crisps\" label=\"Crisps\" />\n  <IcRadioOption\n    value=\"cookie\"\n    label=\"Deluxe chocolate chip cookie (sold out)\"\n    disabled\n  />\n  <IcRadioOption value=\"fruit\" label=\"Banana\" />\n  <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={snippets}>\n  <IcRadioGroup\n    name=\"radio-group-1\"\n    label=\"Add a free purchase with any hot drink\"\n    onIcChange={(ev) => console.log(ev.detail.value)}\n  >\n    <IcRadioOption value=\"crisps\" label=\"Crisps\" />\n    <IcRadioOption\n      value=\"cookie\"\n      label=\"Deluxe chocolate chip cookie (sold out)\"\n      disabled\n    />\n    <IcRadioOption value=\"fruit\" label=\"Banana\" />\n    <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n## Radio group details\n\n<ComponentDetails component=\"ic-radio-group\" />\n\n## Radio option details\n\n<ComponentDetails component=\"ic-radio-option\" />\n\n## Variants\n\n### Conditional\n\nexport const conditional = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-2\"\n  label=\"Do you have any special requests?\"\n>\n  <ic-radio-option value=\"request\" label=\"Yes, I want to modify my order\">\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please provide some additional information\"\n      placeholder=\"i.e Soya milk please\"\n    >\n    </ic-text-field>\n  </ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\nlabel=\"Do you have any special requests?\"\nname=\"radio-group-2\"\n>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\">\n    <IcTextField\n      slot=\"additional-field\"\n      label=\"Please provide some additional information\"\n      placeholder=\"i.e Soya milk please\"\n    />\n  </IcRadioOption>\n  <IcRadioOption \n    value=\"none\" \n    label=\"No, standard please\" \n  />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={conditional}>\n  <IcRadioGroup name=\"radio-group-2\" label=\"Do you have any special requests?\">\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\">\n      <IcTextField\n        slot=\"additional-field\"\n        label=\"Please provide some additional information\"\n        placeholder=\"i.e Soya milk please\"\n      />\n    </IcRadioOption>\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n### Conditional dynamic\n\nexport const conditionalDynamic = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-3\"\n  label=\"Do you have any special requests?\"\n>\n  <ic-radio-option \n    value=\"request\" \n    label=\"Yes, I want to modify my order\"\n    additional-field-display=\"dynamic\"\n  >\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please provide some additional information\"\n      placeholder=\"i.e Soya milk please\"\n    >\n    </ic-text-field>\n  </ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\n  name=\"radio-group-3\"\n  label=\"Do you have any special requests?\"\n>\n  <IcRadioOption \n    value=\"request\" \n    label=\"Yes, I want to modify my order\" \n    additionalFieldDisplay=\"dynamic\"\n  >\n    <IcTextField\n      slot=\"additional-field\"\n      label=\"Please provide some additional information\"\n      placeholder=\"i.e Soya milk please\"\n    />\n  </IcRadioOption>\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview snippets={conditionalDynamic}>\n  <div style={{ width: \"18.75rem\" }}>\n    <IcRadioGroup\n      name=\"radio-group-3\"\n      label=\"Do you have any special requests?\"\n    >\n      <IcRadioOption\n        additionalFieldDisplay=\"dynamic\"\n        value=\"request\"\n        label=\"Yes, I want to modify my order\"\n      >\n        <IcTextField\n          slot=\"additional-field\"\n          label=\"Please provide some additional information\"\n          placeholder=\"i.e Soya milk please\"\n        />\n      </IcRadioOption>\n      <IcRadioOption value=\"none\" label=\"No, standard please\" />\n    </IcRadioGroup>\n  </div>\n</ComponentPreview>\n\n### With helper text\n\nexport const withHelperText = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  label=\"Do you have any special requests?\"\n  helper-text=\"Let us know if you'd like an alternative to dairy milk.\"\n  name=\"radio-group-4\"\n>\n  <ic-radio-option\n    value=\"request\"\n    label=\"Yes, I want to modify my order\"\n  ></ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup \n  label=\"Do you have any special requests?\" \n  helperText=\"Let us know if you'd like an alternative to dairy milk.\"\n  name='radio-group-4'\n>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withHelperText}>\n  <IcRadioGroup\n    label=\"Do you have any special requests?\"\n    helperText=\"Let us know if you'd like an alternative to dairy milk.\"\n    name=\"radio-group-4\"\n  >\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n### Size small\n\nexport const smallSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  label=\"Do you have any special requests?\"\n  name=\"radio-group-5\"\n  size=\"small\"\n>\n  <ic-radio-option\n    value=\"request\"\n    label=\"Yes, I want to modify my order\"\n  ></ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\n  label=\"Do you have any special requests?\"\n  name=\"radio-group-5\"\n  size=\"small\"\n>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={smallSnippet}>\n  <IcRadioGroup\n    label=\"Do you have any special requests?\"\n    name=\"radio-group-5\"\n    size=\"small\"\n  >\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n\n### With validation\n\nexport const withValidation = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-radio-group\n  name=\"radio-group-6\"\n  label=\"Do you have any special requests?\"\n  validation-status=\"error\"\n  validation-text=\"An answer to this question is required\"\n  required=\"true\"\n>\n  <ic-radio-option\n    value=\"request\"\n    label=\"Yes, I want to modify my order\"\n  ></ic-radio-option>\n  <ic-radio-option\n    value=\"none\"\n    label=\"No, standard please\"\n  ></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup\n  name=\"radio-group-6\"\n  label=\"Do you have any special requests?\"\n  validationStatus=\"error\"\n  validationText=\"An answer to this question is required\"\n  required\n>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withValidation}>\n  <IcRadioGroup\n    label=\"Do you have any special requests?\"\n    validationStatus=\"error\"\n    validationText=\"An answer to this question is required\"\n    required\n    name=\"radio-group-6\"\n  >\n    <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n    <IcRadioOption value=\"none\" label=\"No, standard please\" />\n  </IcRadioGroup>\n</ComponentPreview>\n",
       "path": "/components/radio/code",
       "date": "2024-05-31",
       "title": "Radio button",
@@ -3029,9 +3029,9 @@
       ],
       "meta": {
         "relativePath": "components/radio/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.658Z",
-        "size": 11173,
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.112Z",
+        "size": 11155,
         "formattedSize": "10.9 KB"
       }
     },
@@ -3061,8 +3061,8 @@
       ],
       "meta": {
         "relativePath": "components/radio/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.658Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.112Z",
         "size": 8267,
         "formattedSize": "8.1 KB"
       }
@@ -3092,8 +3092,8 @@
       ],
       "meta": {
         "relativePath": "components/search-bar/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.662Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.112Z",
         "size": 3997,
         "formattedSize": "3.9 KB"
       }
@@ -3123,8 +3123,8 @@
       ],
       "meta": {
         "relativePath": "components/search-bar/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.662Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.112Z",
         "size": 23254,
         "formattedSize": "22.7 KB"
       }
@@ -3156,8 +3156,8 @@
       "tags": ["Search input"],
       "meta": {
         "relativePath": "components/search-bar/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.662Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.112Z",
         "size": 5859,
         "formattedSize": "5.7 KB"
       }
@@ -3187,8 +3187,8 @@
       ],
       "meta": {
         "relativePath": "components/section-container/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.662Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.116Z",
         "size": 1920,
         "formattedSize": "1.9 KB"
       }
@@ -3218,8 +3218,8 @@
       ],
       "meta": {
         "relativePath": "components/section-container/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.662Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.116Z",
         "size": 9524,
         "formattedSize": "9.3 KB"
       }
@@ -3250,8 +3250,8 @@
       ],
       "meta": {
         "relativePath": "components/section-container/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.662Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.116Z",
         "size": 5577,
         "formattedSize": "5.4 KB"
       }
@@ -3281,8 +3281,8 @@
       ],
       "meta": {
         "relativePath": "components/select/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.666Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.116Z",
         "size": 2736,
         "formattedSize": "2.7 KB"
       }
@@ -3312,8 +3312,8 @@
       ],
       "meta": {
         "relativePath": "components/select/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.666Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.116Z",
         "size": 51973,
         "formattedSize": "50.8 KB"
       }
@@ -3351,8 +3351,8 @@
       ],
       "meta": {
         "relativePath": "components/select/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.666Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.116Z",
         "size": 7642,
         "formattedSize": "7.5 KB"
       }
@@ -3382,8 +3382,8 @@
       ],
       "meta": {
         "relativePath": "components/side-nav/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.666Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.120Z",
         "size": 2967,
         "formattedSize": "2.9 KB"
       }
@@ -3413,8 +3413,8 @@
       ],
       "meta": {
         "relativePath": "components/side-nav/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.666Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.120Z",
         "size": 68691,
         "formattedSize": "67.1 KB"
       }
@@ -3446,8 +3446,8 @@
       "tags": ["Navigation bar"],
       "meta": {
         "relativePath": "components/side-nav/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.666Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.120Z",
         "size": 12206,
         "formattedSize": "11.9 KB"
       }
@@ -3477,8 +3477,8 @@
       ],
       "meta": {
         "relativePath": "components/skeleton/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.674Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.128Z",
         "size": 2797,
         "formattedSize": "2.7 KB"
       }
@@ -3508,8 +3508,8 @@
       ],
       "meta": {
         "relativePath": "components/skeleton/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.674Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.128Z",
         "size": 12649,
         "formattedSize": "12.4 KB"
       }
@@ -3540,8 +3540,8 @@
       ],
       "meta": {
         "relativePath": "components/skeleton/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.674Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.128Z",
         "size": 4677,
         "formattedSize": "4.6 KB"
       }
@@ -3571,8 +3571,8 @@
       ],
       "meta": {
         "relativePath": "components/status-tags/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.674Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.132Z",
         "size": 1948,
         "formattedSize": "1.9 KB"
       }
@@ -3602,8 +3602,8 @@
       ],
       "meta": {
         "relativePath": "components/status-tags/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.674Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.132Z",
         "size": 6654,
         "formattedSize": "6.5 KB"
       }
@@ -3635,8 +3635,8 @@
       "tags": ["Tags"],
       "meta": {
         "relativePath": "components/status-tags/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.674Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.132Z",
         "size": 6882,
         "formattedSize": "6.7 KB"
       }
@@ -3666,8 +3666,8 @@
       ],
       "meta": {
         "relativePath": "components/stepper/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.678Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.132Z",
         "size": 1730,
         "formattedSize": "1.7 KB"
       }
@@ -3697,8 +3697,8 @@
       ],
       "meta": {
         "relativePath": "components/stepper/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.678Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.132Z",
         "size": 8348,
         "formattedSize": "8.2 KB"
       }
@@ -3730,8 +3730,8 @@
       "tags": ["Progress indicator", "Steps", "Progress tracker"],
       "meta": {
         "relativePath": "components/stepper/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.678Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.132Z",
         "size": 7538,
         "formattedSize": "7.4 KB"
       }
@@ -3761,8 +3761,8 @@
       ],
       "meta": {
         "relativePath": "components/switch/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.678Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.136Z",
         "size": 3160,
         "formattedSize": "3.1 KB"
       }
@@ -3792,8 +3792,8 @@
       ],
       "meta": {
         "relativePath": "components/switch/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.678Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.136Z",
         "size": 5870,
         "formattedSize": "5.7 KB"
       }
@@ -3825,8 +3825,8 @@
       "tags": ["Toggle", "Lightswitch"],
       "meta": {
         "relativePath": "components/switch/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.678Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.136Z",
         "size": 6251,
         "formattedSize": "6.1 KB"
       }
@@ -3856,8 +3856,8 @@
       ],
       "meta": {
         "relativePath": "components/tabs/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.686Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.144Z",
         "size": 3352,
         "formattedSize": "3.3 KB"
       }
@@ -3887,8 +3887,8 @@
       ],
       "meta": {
         "relativePath": "components/tabs/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.686Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.144Z",
         "size": 16816,
         "formattedSize": "16.4 KB"
       }
@@ -3919,8 +3919,8 @@
       ],
       "meta": {
         "relativePath": "components/tabs/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.686Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.144Z",
         "size": 7075,
         "formattedSize": "6.9 KB"
       }
@@ -3950,8 +3950,8 @@
       ],
       "meta": {
         "relativePath": "components/text-field/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.686Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.144Z",
         "size": 2300,
         "formattedSize": "2.2 KB"
       }
@@ -3981,8 +3981,8 @@
       ],
       "meta": {
         "relativePath": "components/text-field/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.686Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.148Z",
         "size": 16709,
         "formattedSize": "16.3 KB"
       }
@@ -4014,8 +4014,8 @@
       "tags": ["Text input", "Text area"],
       "meta": {
         "relativePath": "components/text-field/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.686Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.148Z",
         "size": 6792,
         "formattedSize": "6.6 KB"
       }
@@ -4045,8 +4045,8 @@
       ],
       "meta": {
         "relativePath": "components/toasts/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.690Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.148Z",
         "size": 3405,
         "formattedSize": "3.3 KB"
       }
@@ -4076,8 +4076,8 @@
       ],
       "meta": {
         "relativePath": "components/toasts/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.690Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.148Z",
         "size": 28682,
         "formattedSize": "28.0 KB"
       }
@@ -4109,8 +4109,8 @@
       "tags": ["Snackbar"],
       "meta": {
         "relativePath": "components/toasts/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.690Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.148Z",
         "size": 7241,
         "formattedSize": "7.1 KB"
       }
@@ -4140,8 +4140,8 @@
       ],
       "meta": {
         "relativePath": "components/toggle-buttons/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.698Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.160Z",
         "size": 3707,
         "formattedSize": "3.6 KB"
       }
@@ -4171,8 +4171,8 @@
       ],
       "meta": {
         "relativePath": "components/toggle-buttons/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.698Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.160Z",
         "size": 30156,
         "formattedSize": "29.4 KB"
       }
@@ -4204,8 +4204,8 @@
       "tags": ["Segmented control"],
       "meta": {
         "relativePath": "components/toggle-buttons/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.698Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.160Z",
         "size": 11039,
         "formattedSize": "10.8 KB"
       }
@@ -4235,8 +4235,8 @@
       ],
       "meta": {
         "relativePath": "components/tooltips/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.698Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.160Z",
         "size": 2061,
         "formattedSize": "2.0 KB"
       }
@@ -4266,8 +4266,8 @@
       ],
       "meta": {
         "relativePath": "components/tooltips/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.698Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.160Z",
         "size": 12153,
         "formattedSize": "11.9 KB"
       }
@@ -4298,8 +4298,8 @@
       ],
       "meta": {
         "relativePath": "components/tooltips/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.698Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.160Z",
         "size": 5539,
         "formattedSize": "5.4 KB"
       }
@@ -4329,8 +4329,8 @@
       ],
       "meta": {
         "relativePath": "components/top-nav/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.698Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.164Z",
         "size": 3004,
         "formattedSize": "2.9 KB"
       }
@@ -4360,8 +4360,8 @@
       ],
       "meta": {
         "relativePath": "components/top-nav/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.702Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.164Z",
         "size": 41136,
         "formattedSize": "40.2 KB"
       }
@@ -4393,8 +4393,8 @@
       "tags": ["Navigation bar"],
       "meta": {
         "relativePath": "components/top-nav/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.702Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.164Z",
         "size": 11266,
         "formattedSize": "11.0 KB"
       }
@@ -4420,8 +4420,8 @@
       ],
       "meta": {
         "relativePath": "components/tree-view/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 29749,
         "formattedSize": "29.1 KB"
       }
@@ -4447,8 +4447,8 @@
       ],
       "meta": {
         "relativePath": "components/tree-view/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.404Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 1822,
         "formattedSize": "1.8 KB"
       }
@@ -4479,8 +4479,8 @@
       ],
       "meta": {
         "relativePath": "components/typography/accessibility.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 1497,
         "formattedSize": "1.5 KB"
       }
@@ -4511,8 +4511,8 @@
       ],
       "meta": {
         "relativePath": "components/typography/code.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 10522,
         "formattedSize": "10.3 KB"
       }
@@ -4545,8 +4545,8 @@
       "tags": ["Text", "Heading", "Label"],
       "meta": {
         "relativePath": "components/typography/guidance.mdx",
-        "createdAt": "2024-10-07T13:15:28.110Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 2216,
         "formattedSize": "2.2 KB"
       }
@@ -4561,8 +4561,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/a-design-system.mdx",
       "meta": {
         "relativePath": "get-started/a-design-system.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 2801,
         "formattedSize": "2.7 KB"
       }
@@ -4578,8 +4578,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/angular.mdx",
       "meta": {
         "relativePath": "get-started/angular.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 2897,
         "formattedSize": "2.8 KB"
       }
@@ -4595,8 +4595,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/custom-theme.mdx",
       "meta": {
         "relativePath": "get-started/custom-theme.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 1247,
         "formattedSize": "1.2 KB"
       }
@@ -4613,8 +4613,8 @@
       "hidden": false,
       "meta": {
         "relativePath": "get-started/design-principles.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 1681,
         "formattedSize": "1.6 KB"
       }
@@ -4630,8 +4630,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/figma.mdx",
       "meta": {
         "relativePath": "get-started/figma.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 3411,
         "formattedSize": "3.3 KB"
       }
@@ -4647,8 +4647,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/gatsby.mdx",
       "meta": {
         "relativePath": "get-started/gatsby.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.172Z",
         "size": 2610,
         "formattedSize": "2.5 KB"
       }
@@ -4664,8 +4664,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/index.mdx",
       "meta": {
         "relativePath": "get-started/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 1645,
         "formattedSize": "1.6 KB"
       }
@@ -4681,8 +4681,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/install-components.mdx",
       "meta": {
         "relativePath": "get-started/install-components.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 2015,
         "formattedSize": "2.0 KB"
       }
@@ -4698,8 +4698,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/nextJS.mdx",
       "meta": {
         "relativePath": "get-started/nextjs.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 1557,
         "formattedSize": "1.5 KB"
       }
@@ -4715,8 +4715,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/react.mdx",
       "meta": {
         "relativePath": "get-started/react.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 3030,
         "formattedSize": "3.0 KB"
       }
@@ -4731,8 +4731,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/releases-versioning.mdx",
       "meta": {
         "relativePath": "get-started/releases-versioning.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.706Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 5433,
         "formattedSize": "5.3 KB"
       }
@@ -4748,8 +4748,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/svelte.mdx",
       "meta": {
         "relativePath": "get-started/svelte.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 1907,
         "formattedSize": "1.9 KB"
       }
@@ -4765,8 +4765,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/test-components.mdx",
       "meta": {
         "relativePath": "get-started/test-components.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 2209,
         "formattedSize": "2.2 KB"
       }
@@ -4782,8 +4782,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/testing-with-cypress.mdx",
       "meta": {
         "relativePath": "get-started/testing-with-cypress.mdx",
-        "createdAt": "2024-10-14T09:54:06.784Z",
-        "lastModified": "2024-10-14T09:54:06.784Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 5707,
         "formattedSize": "5.6 KB"
       }
@@ -4799,8 +4799,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/testing-with-jest.mdx",
       "meta": {
         "relativePath": "get-started/testing-with-jest-and-rtl.mdx",
-        "createdAt": "2024-10-14T09:54:06.812Z",
-        "lastModified": "2024-10-14T09:54:06.812Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 5343,
         "formattedSize": "5.2 KB"
       }
@@ -4816,8 +4816,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/vue.mdx",
       "meta": {
         "relativePath": "get-started/vue.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 2731,
         "formattedSize": "2.7 KB"
       }
@@ -4833,8 +4833,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/web-components.mdx",
       "meta": {
         "relativePath": "get-started/web-components.mdx",
-        "createdAt": "2024-10-07T13:15:28.102Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 3482,
         "formattedSize": "3.4 KB"
       }
@@ -4848,8 +4848,8 @@
       "subTitle": "Accessibility Statement for the Intelligence Community Design System.",
       "meta": {
         "relativePath": "icds/accessibility-statement.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 5555,
         "formattedSize": "5.4 KB"
       }
@@ -4863,8 +4863,8 @@
       "subTitle": "Cookies Policy for the Intelligence Community Design System.",
       "meta": {
         "relativePath": "icds/cookies-policy.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 5488,
         "formattedSize": "5.4 KB"
       }
@@ -4879,8 +4879,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/icds/index.mdx",
       "meta": {
         "relativePath": "icds/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 671,
         "formattedSize": "671 Bytes"
       }
@@ -4894,8 +4894,8 @@
       "subTitle": "Privacy Policy for the Intelligence Community Design System.",
       "meta": {
         "relativePath": "icds/privacy-policy.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 3753,
         "formattedSize": "3.7 KB"
       }
@@ -4911,8 +4911,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-patterns/app-errors.mdx",
       "meta": {
         "relativePath": "patterns/app-errors.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 3932,
         "formattedSize": "3.8 KB"
       }
@@ -4928,8 +4928,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-pattern/form-layout.mdx",
       "meta": {
         "relativePath": "patterns/form-layout.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 3197,
         "formattedSize": "3.1 KB"
       }
@@ -4945,8 +4945,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-patterns/form-validation.mdx",
       "meta": {
         "relativePath": "patterns/form-validation.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.710Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.176Z",
         "size": 2283,
         "formattedSize": "2.2 KB"
       }
@@ -4962,8 +4962,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/index.mdx",
       "meta": {
         "relativePath": "patterns/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 955,
         "formattedSize": "955 Bytes"
       }
@@ -4979,8 +4979,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns.mdx",
       "meta": {
         "relativePath": "patterns/navigation-patterns.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 931,
         "formattedSize": "931 Bytes"
       }
@@ -4996,8 +4996,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns/side-navigation-layout.mdx",
       "meta": {
         "relativePath": "patterns/side-navigation-layout.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 83778,
         "formattedSize": "81.8 KB"
       }
@@ -5013,8 +5013,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-patterns/success.mdx",
       "meta": {
         "relativePath": "patterns/success.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 2984,
         "formattedSize": "2.9 KB"
       }
@@ -5030,8 +5030,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns/top-navigation-layout.mdx",
       "meta": {
         "relativePath": "patterns/top-navigation-layout.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.396Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 71978,
         "formattedSize": "70.3 KB"
       }
@@ -5046,8 +5046,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/colour.mdx",
       "meta": {
         "relativePath": "styles/colour.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 4250,
         "formattedSize": "4.2 KB"
       }
@@ -5062,8 +5062,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/content-style.mdx",
       "meta": {
         "relativePath": "styles/content-style.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 2018,
         "formattedSize": "2.0 KB"
       }
@@ -5078,8 +5078,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/elevation.mdx",
       "meta": {
         "relativePath": "styles/elevation.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 7068,
         "formattedSize": "6.9 KB"
       }
@@ -5094,8 +5094,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/focus-indicator.mdx",
       "meta": {
         "relativePath": "styles/focus-indicator.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 3026,
         "formattedSize": "3.0 KB"
       }
@@ -5111,8 +5111,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/grammar.mdx",
       "meta": {
         "relativePath": "styles/grammar.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 3324,
         "formattedSize": "3.2 KB"
       }
@@ -5127,8 +5127,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/icons.mdx",
       "meta": {
         "relativePath": "styles/icons.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.714Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:19:00.180Z",
         "size": 1720,
         "formattedSize": "1.7 KB"
       }
@@ -5144,8 +5144,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/inclusive-language.mdx",
       "meta": {
         "relativePath": "styles/inclusive-language.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 4718,
         "formattedSize": "4.6 KB"
       }
@@ -5161,8 +5161,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/index.mdx",
       "meta": {
         "relativePath": "styles/index.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 927,
         "formattedSize": "927 Bytes"
       }
@@ -5178,8 +5178,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/layout-spacing.mdx",
       "meta": {
         "relativePath": "styles/layout-spacing.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 10020,
         "formattedSize": "9.8 KB"
       }
@@ -5195,8 +5195,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/links.mdx",
       "meta": {
         "relativePath": "styles/links.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 1260,
         "formattedSize": "1.2 KB"
       }
@@ -5211,8 +5211,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/motion.mdx",
       "meta": {
         "relativePath": "styles/motion.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.412Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 5939,
         "formattedSize": "5.8 KB"
       }
@@ -5228,8 +5228,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/numbers-dates-time.mdx",
       "meta": {
         "relativePath": "styles/numbers-dates-time.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 2592,
         "formattedSize": "2.5 KB"
       }
@@ -5245,8 +5245,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/principles.mdx",
       "meta": {
         "relativePath": "styles/principles.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 1456,
         "formattedSize": "1.4 KB"
       }
@@ -5262,8 +5262,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/templates.mdx",
       "meta": {
         "relativePath": "styles/templates.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 4079,
         "formattedSize": "4.0 KB"
       }
@@ -5278,8 +5278,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/typography.mdx",
       "meta": {
         "relativePath": "styles/typography.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 1851,
         "formattedSize": "1.8 KB"
       }
@@ -5295,8 +5295,8 @@
       "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/voice-and-tone.mdx",
       "meta": {
         "relativePath": "styles/voice-and-tone.mdx",
-        "createdAt": "2024-10-07T13:15:28.090Z",
-        "lastModified": "2024-10-07T13:10:19.730Z",
+        "createdAt": "2024-11-06T10:27:49.408Z",
+        "lastModified": "2024-11-06T10:19:00.208Z",
         "size": 3749,
         "formattedSize": "3.7 KB"
       }