diff --git a/src/components/CodePreview/index.css b/src/components/CodePreview/index.css
index d8f3a6e25..ad1436a6e 100644
--- a/src/components/CodePreview/index.css
+++ b/src/components/CodePreview/index.css
@@ -6,6 +6,10 @@
   justify-content: space-between;
 }
 
+.toggle-button-container {
+  margin: auto var(--ic-space-xs) auto 0;
+}
+
 .comp-preview {
   position: relative;
   border: 1px solid var(--ic-architectural-300);
@@ -71,12 +75,8 @@
 
 .snippet-container {
   display: flex;
-  justify-content: flex-end;
   background-color: var(--ic-architectural-40) !important;
   padding: var(--ic-space-xxs);
-}
-
-.snippet-container.pattern {
   justify-content: space-between;
 }
 
diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx
index 69d93ff85..948e1bc9e 100644
--- a/src/components/CodePreview/index.tsx
+++ b/src/components/CodePreview/index.tsx
@@ -16,19 +16,40 @@ import {
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import { SlottedSVG } from "@ukic/react";
+import {
+  IcButton,
+  IcTab,
+  IcTabContext,
+  IcTabGroup,
+  IcTabPanel,
+  IcToggleButton,
+  IcToggleButtonGroup,
+  SlottedSVG,
+} from "@ukic/react";
 import StackblitzButton, {
   StackblitzProps,
 } from "../../content/structured/patterns/components/StackblitzButton";
+import { useViewportWidth } from "../../utils/helpers";
 import PageMetadataContext from "../../context/PageMetadata";
 import "./index.css";
-import { useViewportWidth } from "../../utils/helpers";
+import {
+  createReactAppTsx,
+  createWebComponentsIndexHTML,
+} from "../../content/structured/patterns/components/StackblitzButton/stackblitz-helpers";
 
-interface Snippet {
-  language: string;
+interface LongCodeSnippet {
+  language: "jsx" | "tsx";
   snippet: string;
 }
 
+interface Snippet {
+  technology: string;
+  snippets: {
+    short?: string | undefined;
+    long: string | LongCodeSnippet[];
+  };
+}
+
 interface ComponentPreviewProps extends Partial<StackblitzProps> {
   snippets?: Snippet[];
   left?: boolean;
@@ -37,26 +58,35 @@ interface ComponentPreviewProps extends Partial<StackblitzProps> {
   children: ReactNode;
   style: CSSProperties;
   state: "none" | "good" | "bad";
+  showStackblitzBtn: boolean;
   type?: string;
 }
 
 interface CodeSnippetProps extends Partial<StackblitzProps> {
   code: string;
+  longCode: string;
   type?: string;
   show: boolean;
   setShow: Dispatch<SetStateAction<boolean>>;
+  showMore: boolean;
+  setShowMore: Dispatch<SetStateAction<boolean>>;
   showStackblitzBtn?: boolean;
+  selectedLanguage: "Typescript" | "Javascript";
 }
 
 const CodeSnippet: React.FC<CodeSnippetProps> = ({
   code,
+  longCode,
   isWebComponents,
   type,
   show,
   setShow,
+  showMore,
+  setShowMore,
   showStackblitzBtn,
   projectTitle,
   projectDescription,
+  selectedLanguage,
 }) => {
   const viewportWidth = useViewportWidth();
   const isLargeViewport: boolean = viewportWidth > 992;
@@ -85,9 +115,9 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
           )}
         </Highlight>
       )}
-      <div className={clsx(type === "pattern" && type, "snippet-container")}>
+      <div className="snippet-container">
         {type === "pattern" && (
-          <ic-button
+          <IcButton
             variant="tertiary"
             size={isLargeViewport ? "small" : "default"}
             appearance="dark"
@@ -101,18 +131,36 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
               height="24"
               path={!show ? mdiMenuDown : mdiMenuUp}
             />
-          </ic-button>
+          </IcButton>
+        )}
+        {type !== "pattern" && (
+          <IcButton
+            variant="tertiary"
+            size={isLargeViewport ? "small" : "default"}
+            appearance="dark"
+            onClick={() => setShowMore(!showMore)}
+          >
+            Show {showMore ? "less" : "full"} code
+            <SlottedSVG
+              slot="right-icon"
+              viewBox="0 0 24 24"
+              width="24"
+              height="24"
+              path={showMore ? mdiMenuUp : mdiMenuDown}
+            />
+          </IcButton>
         )}
         <div className="code-actions">
           {showStackblitzBtn && projectTitle !== undefined && (
             <StackblitzButton
-              codeSnippet={code}
+              codeSnippet={longCode}
               isWebComponents={isWebComponents}
               projectTitle={projectTitle}
               projectDescription={projectDescription}
+              isJSX={selectedLanguage === "Javascript"}
             />
           )}
-          <ic-button
+          <IcButton
             aria-label={isLargeViewport ? "" : "Copy code"}
             variant={isLargeViewport ? "tertiary" : "icon"}
             size={isLargeViewport ? "small" : "default"}
@@ -132,7 +180,7 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
               height="24"
             />
             {isLargeViewport && "Copy code"}
-          </ic-button>
+          </IcButton>
         </div>
       </div>
     </>
@@ -147,11 +195,28 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
   centered = true,
   style,
   state = "none",
+  showStackblitzBtn = true,
   projectTitle,
   projectDescription,
   type,
 }) => {
+  const viewportWidth = useViewportWidth();
+  const isLargeViewport: boolean = viewportWidth > 992;
+
+  // Show/hide functionality for pattern code previews
   const [show, setShow] = useState<boolean>(type !== "pattern");
+  // Show more/less functionality for component code previews
+  const [showMore, setShowMore] = useState<boolean>(false);
+  const [selectedTab, setSelectedTab] = useState<"Web component" | "React">(
+    "Web component"
+  );
+  const [selectedLanguage, setSelectedLanguage] = useState<
+    "Typescript" | "Javascript"
+  >("Typescript");
+
+  const tabSelectCallback = (ev: CustomEvent) => {
+    setSelectedTab(ev.detail.tabIndex === 0 ? "Web component" : "React");
+  };
 
   const pageMetadata = React.useContext(PageMetadataContext);
 
@@ -159,12 +224,78 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
     if (type === "pattern") {
       return " pattern";
     }
-    if (snippet.language === "React") {
+    if (snippet.technology === "React") {
       return " component";
     }
     return "";
   };
 
+  const getCodeSnippet = (snippet: Snippet) => {
+    const isLongCode = showMore || type === "pattern";
+    const longCodeIndex = selectedLanguage === "Typescript" ? 0 : 1;
+    let shortCodeSnippet: string | undefined = "";
+    let longCode = "";
+
+    if (type !== "pattern") shortCodeSnippet = snippet.snippets.short;
+    const lines = shortCodeSnippet?.split("\n");
+    if (lines && lines.length > 0) {
+      for (let i = 1; i < lines?.length; i += 1) {
+        lines[i] = `\t${lines[i]}`;
+      }
+    }
+    shortCodeSnippet = lines?.join("\n");
+
+    if (selectedTab === "Web component") {
+      if (
+        !Array.isArray(snippet.snippets.long) &&
+        typeof snippet.snippets.long === "string"
+      ) {
+        longCode = snippet.snippets.long.replace(
+          "{shortCode}",
+          `${shortCodeSnippet}`
+        );
+      }
+
+      let codeSnippet;
+      if (showMore) {
+        codeSnippet = createWebComponentsIndexHTML(longCode);
+      } else if (type === "pattern") {
+        if (typeof snippet.snippets.long === "string")
+          codeSnippet = createWebComponentsIndexHTML(snippet.snippets.long);
+      } else {
+        codeSnippet = snippet.snippets.short;
+      }
+
+      return {
+        longCode: createWebComponentsIndexHTML(longCode),
+        codeSnippet: codeSnippet || "",
+      };
+    }
+    if (Array.isArray(snippet.snippets.long)) {
+      if (
+        !Array.isArray(snippet.snippets.long[longCodeIndex].snippet) &&
+        typeof snippet.snippets.long[longCodeIndex].snippet === "string"
+      ) {
+        longCode = createReactAppTsx(
+          snippet.snippets.long[longCodeIndex].snippet.replace(
+            "{shortCode}",
+            `${shortCodeSnippet}`
+          ),
+          pageMetadata.pageTitle,
+          longCodeIndex === 0 ? "tsx" : "jsx"
+        );
+      }
+      return {
+        longCode,
+        codeSnippet: isLongCode ? longCode : snippet.snippets.short,
+      };
+    }
+    return {
+      longCode: "error",
+      codeSnippet: "error",
+    };
+  };
+
   return (
     <div className="comp-preview">
       <h4 className="offscreen">Interactive example</h4>
@@ -197,37 +328,92 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
         {children}
       </div>
       {snippets && (
-        <ic-tab-context>
+        <IcTabContext
+          onIcTabSelect={tabSelectCallback}
+          selectedTabIndex={selectedTab === "Web component" ? 0 : 1}
+        >
           <div className="link-zone">
-            <ic-tab-group inline label="Framework code snippets">
+            <IcTabGroup inline label="Framework code snippets">
               {snippets.map((snippet, index) => (
-                <ic-tab tab-position={index}>{snippet.language}</ic-tab>
+                <IcTab tab-position={index}>{snippet.technology}</IcTab>
               ))}
-            </ic-tab-group>
+            </IcTabGroup>
+            <div className="toggle-button-container">
+              {selectedTab === "React" && (
+                <IcToggleButtonGroup size="small">
+                  <IcToggleButton
+                    label="Typescript"
+                    size="small"
+                    variant={isLargeViewport ? "default" : "icon"}
+                    toggleChecked={selectedLanguage === "Typescript"}
+                    onIcToggleChecked={() =>
+                      setSelectedLanguage(
+                        selectedLanguage === "Typescript"
+                          ? "Javascript"
+                          : "Typescript"
+                      )
+                    }
+                  >
+                    <SlottedSVG
+                      slot="icon"
+                      viewBow="0 0 24 24"
+                      width="24"
+                      height="24"
+                    >
+                      <path d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z" />
+                    </SlottedSVG>
+                  </IcToggleButton>
+                  <IcToggleButton
+                    size="small"
+                    label="Javascript"
+                    variant={isLargeViewport ? "default" : "icon"}
+                    toggleChecked={selectedLanguage === "Javascript"}
+                    onIcToggleChecked={() =>
+                      setSelectedLanguage(
+                        selectedLanguage === "Typescript"
+                          ? "Javascript"
+                          : "Typescript"
+                      )
+                    }
+                  >
+                    <SlottedSVG
+                      slot="icon"
+                      viewBow="0 0 24 24"
+                      width="24"
+                      height="24"
+                    >
+                      <path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
+                    </SlottedSVG>
+                  </IcToggleButton>
+                </IcToggleButtonGroup>
+              )}
+            </div>
           </div>
           {snippets.map((snippet, index) => (
-            <ic-tab-panel tab-position={index}>
+            <IcTabPanel tab-position={index}>
               <CodeSnippet
                 type={type}
-                code={snippet.snippet}
+                code={getCodeSnippet(snippet)?.codeSnippet}
+                longCode={getCodeSnippet(snippet)?.longCode}
                 show={show}
                 setShow={setShow}
-                showStackblitzBtn={
-                  !!process.env.GATSBY_GA_TRACKING_ID && type === "pattern"
-                }
-                isWebComponents={snippet.language === "Web component"}
+                showMore={showMore}
+                setShowMore={setShowMore}
+                showStackblitzBtn={showStackblitzBtn}
+                isWebComponents={snippet.technology === "Web component"}
                 projectTitle={`${
                   projectTitle || startCase(pageMetadata.pageTitle)
-                } (${snippet.language}${getTypeOfProject(snippet)})`}
+                } (${snippet.technology}${getTypeOfProject(snippet)})`}
                 projectDescription={
                   projectDescription === undefined || projectDescription === ""
                     ? undefined
                     : projectDescription
                 }
+                selectedLanguage={selectedLanguage}
               />
-            </ic-tab-panel>
+            </IcTabPanel>
           ))}
-        </ic-tab-context>
+        </IcTabContext>
       )}
     </div>
   );
diff --git a/src/content/structured/components/accordion/code.mdx b/src/content/structured/components/accordion/code.mdx
index b4420e5a6..3e76b07f6 100644
--- a/src/content/structured/components/accordion/code.mdx
+++ b/src/content/structured/components/accordion/code.mdx
@@ -30,8 +30,9 @@ import {
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-accordion heading="English Breakfast">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-accordion heading="English Breakfast">
   <ic-typography variant="body">
     A blend of different black teas.
   </ic-typography>
@@ -40,12 +41,14 @@ export const snippets = [
   <ic-typography variant="body">
     A tea blend that has been flavoured with oil of bergamot.
   </ic-typography>
-</ic-accordion>
-`,
+</ic-accordion>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAccordion heading="English Breakfast">
+    technology: "React",
+    snippets: {
+      short: `<IcAccordion heading="English Breakfast">
   <IcTypography variant="body">
     A blend of different black teas.
   </IcTypography>
@@ -54,8 +57,22 @@ export const snippets = [
   <IcTypography variant="body">
     A tea blend that has been flavoured with oil of bergamot.
   </IcTypography>
-</IcAccordion>
-`,
+</IcAccordion>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `<>
+            {shortCode}
+            </>`,
+        },
+        {
+          language: "Javascript",
+          snippet: `<>
+            {shortCode}
+            </>`,
+        },
+      ],
+    },
   },
 ];
 
@@ -84,8 +101,9 @@ export const snippets = [
 
 export const withIcon = [
   {
-    language: "Web component",
-    snippet: `<ic-accordion heading="English Breakfast">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-accordion heading="English Breakfast">
       <svg
         slot="icon"
         width="24"
@@ -115,10 +133,13 @@ export const withIcon = [
       A tea blend that has been flavoured with oil of bergamot.
     </ic-typography>
   </ic-accordion>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAccordion heading="English Breakfast">
+    technology: "React",
+    snippets: {
+      short: `<IcAccordion heading="English Breakfast">
   <SlottedSVG
         slot="icon"
         width="24"
@@ -148,6 +169,17 @@ export const withIcon = [
       A tea blend that has been flavoured with oil of bergamot.
     </IcTypography>
   </IcAccordion>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -202,8 +234,9 @@ export const withIcon = [
 
 export const groupTitle = [
   {
-    language: "Web component",
-    snippet: `<ic-accordion-group group-title="Coffee">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-accordion-group group-title="Coffee">
   <ic-accordion heading="Cappuccino">
     <ic-typography variant="body">
       An espresso-based drink that is traditionally prepared with steamed milk foam.
@@ -215,10 +248,13 @@ export const groupTitle = [
     </ic-typography>
   </ic-accordion>
 </ic-accordion-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAccordionGroup groupTitle="Coffee">
+    technology: "React",
+    snippets: {
+      short: `<IcAccordionGroup groupTitle="Coffee">
   <IcAccordion heading="Cappucino">
     <IcTypography variant="body">
       An espresso-based drink that is traditionally prepared with steamed milk foam.
@@ -230,6 +266,17 @@ export const groupTitle = [
     </IcTypography>
   </IcAccordion>
 </IcAccordionGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -237,8 +284,9 @@ export const groupTitle = [
 
 export const snippetsNested = [
   {
-    language: "Web component",
-    snippet: `<ic-accordion-group group-title="Coffee">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-accordion-group group-title="Coffee">
   <ic-accordion heading="Cappuccino">
     <ic-typography variant="body">
       An espresso-based drink that is traditionally prepared with steamed milk foam.
@@ -257,10 +305,13 @@ export const snippetsNested = [
     </ic-accordion>
   </ic-accordion>
 </ic-accordion-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAccordionGroup groupTitle="Coffee">
+    technology: "React",
+    snippets: {
+      short: `<IcAccordionGroup groupTitle="Coffee">
   <IcAccordion heading="Cappucino">
     <IcTypography variant="body">
       An espresso-based drink that is traditionally prepared with steamed milk foam.
@@ -279,6 +330,17 @@ export const snippetsNested = [
     </IcAccordion>
   </IcAccordion>
 </IcAccordionGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/alerts/code.mdx b/src/content/structured/components/alerts/code.mdx
index 8b1e640a4..6d929b2a4 100644
--- a/src/content/structured/components/alerts/code.mdx
+++ b/src/content/structured/components/alerts/code.mdx
@@ -25,20 +25,35 @@ import { IcAlert, IcButton, IcLink } from "@ukic/react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-alert heading="Americano order" message="Preparation status is unavailable."></ic-alert>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-alert heading="Americano order" message="Preparation status is unavailable."></ic-alert>
 <ic-alert variant="info" heading="Did you know?" message="Coffee is a brewed drink prepared from roasted coffee beans."></ic-alert>
 <ic-alert variant="error" heading="Americano order error" message="Americano couldn't be made, we ran out of beans."></ic-alert>
 <ic-alert variant="warning" heading="Hot drink" message="Please be careful the drink is hot."></ic-alert>
 <ic-alert variant="success" heading="Americano order complete" message="Success, your coffee is good to go."></ic-alert>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAlert heading="Americano order" message="Preparation status is unavailable."/>
+    technology: "React",
+    snippets: {
+      short: `<IcAlert heading="Americano order" message="Preparation status is unavailable."/>
 <IcAlert variant="info" heading="Did you know?" message="Coffee is a brewed drink prepared from roasted coffee beans."/>
 <IcAlert variant="error" heading="Americano order error" message="Americano couldn't be made, we ran out of beans." />
 <IcAlert variant="warning" heading="Hot drink" message="Please be careful the drink is hot."/>
 <IcAlert variant="success" heading="Americano order complete" message="Success, your coffee is good to go." />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -84,12 +99,27 @@ export const snippetsDefault = [
 
 export const snippetsDismissible = [
   {
-    language: "Web component",
-    snippet: `<ic-alert heading="Americano order nearly ready" message="Your coffee is nearly ready. We'll send you another alert once it is complete." dismissible="true"></ic-alert>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-alert heading="Americano order nearly ready" message="Your coffee is nearly ready. We'll send you another alert once it is complete." dismissible="true"></ic-alert>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAlert heading="Americano order nearly ready" message="Your coffee is nearly ready. We'll send you another alert once it is complete." dismissible />`,
+    technology: "React",
+    snippets: {
+      short: `<IcAlert heading="Americano order nearly ready" message="Your coffee is nearly ready. We'll send you another alert once it is complete." dismissible />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -105,8 +135,9 @@ export const snippetsDismissible = [
 
 export const snippetsWithAction = [
   {
-    language: "Web component",
-    snippet: `<ic-alert variant="info" heading="Did you know?" message="There is a new range of coffees to try.">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-alert variant="info" heading="Did you know?" message="There is a new range of coffees to try.">
       <ic-button slot="action" variant="secondary" appearance="dark">View Drinks</ic-button>
 </ic-alert>
 <script>
@@ -115,12 +146,26 @@ export const snippetsWithAction = [
     console.log(ev)
   })
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAlert variant="info" heading="Did you know?" message="There is a new range of coffees to try.">
+    technology: "React",
+    snippets: {
+      short: `<IcAlert variant="info" heading="Did you know?" message="There is a new range of coffees to try.">
     <IcButton slot="action" variant="secondary" appearance="dark" onClick={(ev) => console.log(ev)}>View Drinks</IcButton>
 </IcAlert>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -145,21 +190,36 @@ export const snippetsWithAction = [
 
 export const snippetsTitleAbove = [
   {
-    language: "Web component",
-    snippet: `<ic-alert 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-alert 
     heading="What is Coffee?" 
     message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus." 
     title-above="true" 
     variant="info">
   </ic-alert>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAlert 
+    technology: "React",
+    snippets: {
+      short: `<IcAlert 
     heading="What is Coffee?" 
     message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus." 
     titleAbove 
     variant="info"/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -176,19 +236,34 @@ export const snippetsTitleAbove = [
 
 export const snippetsResponsiveTitle = [
   {
-    language: "Web component",
-    snippet: `<ic-alert 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-alert 
     heading="Here you can find out lots more information about the world's favourite hot drink." 
     message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee."
     variant="info">
     </ic-alert>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAlert 
+    technology: "React",
+    snippets: {
+      short: `<IcAlert 
     heading="Here you can find out lots more information about the world's favourite hot drink." 
     message="Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee." 
     variant="info"/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -204,16 +279,31 @@ export const snippetsResponsiveTitle = [
 
 export const snippetsCustomMessage = [
   {
-    language: "Web component",
-    snippet: `<ic-alert variant="info" heading="Want to know more about our coffee?">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-alert variant="info" heading="Want to know more about our coffee?">
   <span slot="message"> Go to our <ic-link href="/">coffee page</ic-link> to learn more.</span>
 </ic-alert>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcAlert variant="info" heading="Want to know more about our coffee?">
+    technology: "React",
+    snippets: {
+      short: `<IcAlert variant="info" heading="Want to know more about our coffee?">
   <span slot="message"> Go to our <IcLink href="/">coffee page</IcLink> to learn more.</span>
 </IcAlert>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/back-to-top/code.mdx b/src/content/structured/components/back-to-top/code.mdx
index e15eb5c69..6e3ededd0 100644
--- a/src/content/structured/components/back-to-top/code.mdx
+++ b/src/content/structured/components/back-to-top/code.mdx
@@ -23,12 +23,27 @@ import { IcButton } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-back-to-top target="main" />`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-back-to-top target="main" />`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcBackToTop target="main" />`,
+    technology: "React",
+    snippets: {
+      short: `<IcBackToTop target="main" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/badge/code.mdx b/src/content/structured/components/badge/code.mdx
index d5bccc12b..8842b43db 100644
--- a/src/content/structured/components/badge/code.mdx
+++ b/src/content/structured/components/badge/code.mdx
@@ -35,8 +35,9 @@ import { useState } from "react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="secondary" style="margin-right:16px">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="secondary" style="margin-right:16px">
   <ic-badge       
     text-label="1000"
     max-number="99"
@@ -46,10 +47,13 @@ export const snippetsDefault = [
   </ic-badge>
   Coffee orders
 </ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="secondary" style={{marginRight:"16px"}}>
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="secondary" style={{marginRight:"16px"}}>
   <IcBadge
     textLabel="1000"
     maxNumber="99"
@@ -58,6 +62,17 @@ export const snippetsDefault = [
   />
   Coffee orders
 </IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -78,9 +93,10 @@ export const snippetsDefault = [
 
 export const snippetsSizes = [
   {
-    language: "Web component",
-    snippet: `<ic-button size="small" variant="secondary" style="margin-right:16px">
-  <ic-badge size="small" text-label="8" slot="badge" variant="info"></ic-badge>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button size="small" variant="secondary" style="margin-right:16px">
+  <ic-badge text-label="8" slot="badge" variant="info"></ic-badge>
   Coffee orders
 </ic-button>
 <ic-button variant="secondary" style="margin-right:16px">
@@ -91,10 +107,13 @@ export const snippetsSizes = [
   <ic-badge size="large" text-label="8" slot="badge" variant="info"></ic-badge>
   Coffee orders
 </ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton size="small" variant="secondary">
+    technology: "React",
+    snippets: {
+      short: `<IcButton size="small" variant="secondary">
   <IcBadge size="small" textLabel="8" slot="badge" variant="info"/>
   Coffee orders
 </IcButton>
@@ -106,6 +125,17 @@ export const snippetsSizes = [
   <IcBadge size="large" textLabel="8" slot="badge" variant="info"/>
   Coffee orders
 </IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -128,8 +158,9 @@ export const snippetsSizes = [
 
 export const snippetsStatus = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="secondary" style="margin-right:16px">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="secondary" style="margin-right:16px">
   <ic-badge slot="badge" text-label="8" variant="neutral"></ic-badge>
   Coffee orders
 </ic-button>
@@ -145,10 +176,13 @@ export const snippetsStatus = [
   <ic-badge slot="badge" text-label="Available" variant="success"></ic-badge>
   Coffee orders
 </ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="secondary" style={{marginRight:"16px"}}>
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="secondary" style={{marginRight:"16px"}}>
   <IcBadge slot="badge" textLabel="8" variant="neutral"/>
   Coffee orders
 </IcButton>
@@ -164,6 +198,17 @@ export const snippetsStatus = [
   <IcBadge slot="badge" textLabel="Available" variant="success"/>
   Coffee orders
 </IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -190,8 +235,9 @@ export const snippetsStatus = [
 
 export const snippetsInformation = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="secondary" style="margin-right:16px">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="secondary" style="margin-right:16px">
   <ic-badge slot="badge" type="text" text-label="8" variant="info"></ic-badge>
   Coffee orders
 </ic-button>
@@ -217,10 +263,13 @@ export const snippetsInformation = [
 </ic-badge> 
   Coffee orders
 </ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="secondary" style={{marginRight:"16px"}}>
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="secondary" style={{marginRight:"16px"}}>
   <IcBadge slot="badge" type="text" textLabel="8" variant="info"/>
   Coffee orders
 </IcButton>
@@ -246,6 +295,17 @@ export const snippetsInformation = [
   </IcBadge>
   Coffee orders
 </IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -285,8 +345,9 @@ export const snippetsInformation = [
 
 export const snippetsMaxNumber = [
   {
-    language: "Web component",
-    snippet: `<div style="padding:16px;">
+    technology: "Web component",
+    snippets: {
+      short: `<div style="padding:16px;">
   <ic-button variant="secondary" style="margin-right:16px">
     <ic-badge 
       text-label="1000" 
@@ -298,10 +359,13 @@ export const snippetsMaxNumber = [
     Coffee orders
   </ic-button>
 </div>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<div style={{padding:"16px"}}>
+    technology: "React",
+    snippets: {
+      short: `<div style={{padding:"16px"}}>
   <IcButton variant="secondary" style={{marginRight:"16px"}}>
     <IcBadge
       textLabel="1000"
@@ -312,6 +376,17 @@ export const snippetsMaxNumber = [
     Coffee orders
   </IcButton>
 </div>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -328,8 +403,9 @@ export const snippetsMaxNumber = [
 
 export const snippetsNear = [
   {
-    language: "Web component",
-    snippet: `<div style="padding:16px;">
+    technology: "Web component",
+    snippets: {
+      short: `<div style="padding:16px;">
   <ic-chip label="Americano" style="margin-right:16px;">
     <ic-badge type="icon" slot="badge" position="near" variant="success">
       <svg
@@ -359,10 +435,13 @@ export const snippetsNear = [
     </ic-badge>
   </ic-chip>
 </div>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<div style={{padding:"16px"}}>
+    technology: "React",
+    snippets: {
+      short: `<div style={{padding:"16px"}}>
   <IcChip label="Americano" style={{marginRight:"16px"}}>
     <IcBadge type="icon" slot="badge" position="near" variant="success">
       <svg
@@ -392,6 +471,17 @@ export const snippetsNear = [
     </IcBadge> 
   </IcChip>
 </div>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -432,8 +522,9 @@ export const snippetsNear = [
 
 export const snippetsInline = [
   {
-    language: "Web component",
-    snippet: `<ic-tab-context>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tab-context>
   <ic-tab-group label="Example tab group">
     <ic-tab> About
     </ic-tab>
@@ -457,10 +548,13 @@ export const snippetsInline = [
   <ic-tab-panel>Ingredients page</ic-tab-panel>
   <ic-tab-panel>Orders page</ic-tab-panel>
 </ic-tab-context>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTabContext>
+    technology: "React",
+    snippets: {
+      short: `<IcTabContext>
   <IcTabGroup label="Example tab group">
     <IcTab>
     About
@@ -484,6 +578,17 @@ export const snippetsInline = [
   <IcTabPanel>Ingredients page</IcTabPanel>
   <IcTabPanel>Orders page</IcTabPanel>
 </IcTabContext>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -516,8 +621,15 @@ Click the button to hide and show the badge.
 
 export const snippetsHideBadge = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<div style="padding:16px;">
+  <ic-button variant="secondary" onclick="showHideBadge()">
+    <ic-badge text-label="8" slot="badge"></ic-badge>
+    Coffee orders
+  </ic-button>
+</div>
+<script>
   function showHideBadge() {
     badge = document.querySelector("ic-badge");
     if (badge.classList.contains("show")) {
@@ -526,17 +638,14 @@ export const snippetsHideBadge = [
       badge.visible = true;
     }
   }
-</script>
-<div style="padding:16px;">
-  <ic-button variant="secondary" onclick="showHideBadge()">
-    <ic-badge text-label="8" slot="badge"></ic-badge>
-    Coffee orders
-  </ic-button>
-</div> `,
+</script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `export const ToggleBadge = () => {
+    technology: "React",
+    snippets: {
+      short: `export const ToggleBadge = () => {
   const [showBadge, setShowBadge] = useState(false);
   const handleShowHideBadge = () => {
     setShowBadge(!showBadge);
@@ -555,6 +664,17 @@ export const snippetsHideBadge = [
     </div>
   );
 };`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -592,8 +712,9 @@ export const ToggleBadge = () => {
 
 export const snippetsAccessibleLabel = [
   {
-    language: "Web component",
-    snippet: `<div style="padding:16px;">
+    technology: "Web component",
+    snippets: {
+      short: `<div style="padding:16px;">
   <ic-button variant="secondary" style="margin-right:16px"> 
     <ic-badge
       text-label="8"
@@ -606,10 +727,13 @@ export const snippetsAccessibleLabel = [
     Coffee orders
   </ic-button>
 </div>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<div style={{padding:"16px"}}>
+    technology: "React",
+    snippets: {
+      short: `<div style={{padding:"16px"}}>
   <IcButton variant="secondary" style={{marginRight:"16px"}}>
     <IcBadge
       textLabel="8"
@@ -621,6 +745,17 @@ export const snippetsAccessibleLabel = [
     Coffee orders
   </IcButton>
 </div>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/breadcrumbs/code.mdx b/src/content/structured/components/breadcrumbs/code.mdx
index e95699712..71bed9f97 100644
--- a/src/content/structured/components/breadcrumbs/code.mdx
+++ b/src/content/structured/components/breadcrumbs/code.mdx
@@ -27,8 +27,9 @@ import { NavLink, MemoryRouter } from "react-router-dom";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-breadcrumb-group>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-breadcrumb-group>
   <ic-breadcrumb page-title="Home" href="#"></ic-breadcrumb>
   <ic-breadcrumb page-title="Beverages" href="#"></ic-breadcrumb>
   <ic-breadcrumb 
@@ -38,10 +39,13 @@ export const snippets = [
   >
   </ic-breadcrumb>
 </ic-breadcrumb-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcBreadcrumbGroup>
+    technology: "React",
+    snippets: {
+      short: `<IcBreadcrumbGroup>
   <IcBreadcrumb pageTitle="Home" href="#" />
   <IcBreadcrumb pageTitle="Beverages" href="#" />
   <IcBreadcrumb 
@@ -50,6 +54,17 @@ export const snippets = [
     href="#"
   />
 </IcBreadcrumbGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -88,8 +103,9 @@ export const snippets = [
 
 export const back = [
   {
-    language: "Web component",
-    snippet: `<ic-breadcrumb-group back-breadcrumb-only="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-breadcrumb-group back-breadcrumb-only="true">
   <ic-breadcrumb page-title="Home" href="#"></ic-breadcrumb>
   <ic-breadcrumb page-title="Beverages" href="#"></ic-breadcrumb>
   <ic-breadcrumb 
@@ -99,10 +115,13 @@ export const back = [
   >
   </ic-breadcrumb>
 </ic-breadcrumb-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcBreadcrumbGroup backBreadcrumbOnly>
+    technology: "React",
+    snippets: {
+      short: `<IcBreadcrumbGroup backBreadcrumbOnly>
   <IcBreadcrumb pageTitle="Home" href="#" />
   <IcBreadcrumb pageTitle="Beverages" href="#" />
   <IcBreadcrumb 
@@ -111,6 +130,17 @@ export const back = [
     href="#"
   />
 </IcBreadcrumbGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -139,8 +169,9 @@ export const back = [
 
 export const withIcons = [
   {
-    language: "Web component",
-    snippet: `<ic-breadcrumb-group>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-breadcrumb-group>
   <ic-breadcrumb page-title="Home" href="#">
     <svg
       slot="icon"
@@ -191,10 +222,13 @@ export const withIcons = [
     </svg>
   </ic-breadcrumb>
 </ic-breadcrumb-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcBreadcrumbGroup>
+    technology: "React",
+    snippets: {
+      short: `<IcBreadcrumbGroup>
   <IcBreadcrumb pageTitle="Home" href="#">
     <SlottedSVG
       slot="icon"
@@ -245,6 +279,17 @@ export const withIcons = [
     </SlottedSVG>
   </IcBreadcrumb>
 </IcBreadcrumbGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -311,8 +356,9 @@ export const withIcons = [
 
 export const collapsed = [
   {
-    language: "Web component",
-    snippet: ` <ic-breadcrumb-group collapsed="true">
+    technology: "Web component",
+    snippets: {
+      short: ` <ic-breadcrumb-group collapsed="true">
   <ic-breadcrumb page-title="Home" href="#"></ic-breadcrumb>
   <ic-breadcrumb page-title="Beverages" href="#"></ic-breadcrumb>
   <ic-breadcrumb 
@@ -322,10 +368,13 @@ export const collapsed = [
     >
     </ic-breadcrumb>
 </ic-breadcrumb-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcBreadcrumbGroup collapsed>
+    technology: "React",
+    snippets: {
+      short: `<IcBreadcrumbGroup collapsed>
     <IcBreadcrumb pageTitle="Home" href="#" />
     <IcBreadcrumb pageTitle="Beverages" href="#" />
     <IcBreadcrumb 
@@ -334,6 +383,17 @@ export const collapsed = [
       href="#"
     />
 </IcBreadcrumbGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -362,8 +422,9 @@ export const collapsed = [
 
 export const withReactRouter = [
   {
-    language: "React",
-    snippet: `<MemoryRouter initialEntries={["/"]}>
+    technology: "React",
+    snippets: {
+      short: `<MemoryRouter initialEntries={["/"]}>
   <IcBreadcrumbGroup>
     <IcBreadcrumb pageTitle="Home">
       <IcLink>
@@ -383,6 +444,17 @@ export const withReactRouter = [
   </IcBreadcrumbGroup>
 </MemoryRouter>
 `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/buttons/code.mdx b/src/content/structured/components/buttons/code.mdx
index c516f4ec6..25a1cdbb8 100644
--- a/src/content/structured/components/buttons/code.mdx
+++ b/src/content/structured/components/buttons/code.mdx
@@ -25,8 +25,9 @@ import { IcButton } from "@ukic/react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-button id='my-button' variant="primary">Add to order</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button id='my-button' variant="primary">Add to order</ic-button>
 <ic-button variant="secondary">View coffees</ic-button>
 <ic-button variant="tertiary">Find out more</ic-button>
 <ic-button variant="destructive">Cancel order</ic-button>
@@ -36,13 +37,27 @@ export const snippetsDefault = [
     console.log(ev);
   })
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="primary" onClick={(ev) => console.log(ev)}>Add to order</IcButton>
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="primary" onClick={(ev) => console.log(ev)}>Add to order</IcButton>
   <IcButton variant="secondary">View coffees</IcButton>
   <IcButton variant="tertiary">Find out more</IcButton>
   <IcButton variant="destructive">Cancel order</IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -65,16 +80,31 @@ export const snippetsDefault = [
 
 export const snippetsOtherStates = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="primary" disabled="true">Add to order</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="primary" disabled="true">Add to order</ic-button>
 <ic-button variant="secondary" loading="true">Loading button</ic-button>
 <ic-button variant="primary" dropdown="true">Add to order</ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="primary" disabled>Add to order</IcButton>
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="primary" disabled>Add to order</IcButton>
 <IcButton variant="secondary" loading>Loading button</IcButton>
 <IcButton variant="primary" dropdown>Add to order</IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -94,8 +124,9 @@ export const snippetsOtherStates = [
 
 export const snippetsWithIcon = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="primary">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="primary">
   <svg
     slot="left-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -108,10 +139,13 @@ export const snippetsWithIcon = [
     <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>
   </svg>Refresh order status
 </ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="primary">
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="primary">
   <SlottedSVG
     slot="left-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -125,6 +159,17 @@ export const snippetsWithIcon = [
   </SlottedSVG>
   Refresh order status
 </IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -149,8 +194,9 @@ export const snippetsWithIcon = [
 
 export const snippetsIcon = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="icon" aria-label="refresh">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="icon" aria-label="refresh">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height="24px"
@@ -162,10 +208,13 @@ export const snippetsIcon = [
     <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>
   </svg>
 </ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="icon" aria-label="refresh">
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="icon" aria-label="refresh">
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height="24px"
@@ -177,6 +226,17 @@ export const snippetsIcon = [
     <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>
   </svg>
 </IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -199,16 +259,31 @@ export const snippetsIcon = [
 
 export const snippetsSizing = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="primary" size="small">Add to order</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="primary" size="small">Add to order</ic-button>
 <ic-button variant="primary">Add to order</ic-button>
 <ic-button variant="primary" size="large">Add to order</ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="primary" size="small">Add to order</IcButton>
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="primary" size="small">Add to order</IcButton>
 <IcButton variant="primary">Add to order</IcButton>
 <IcButton variant="primary" size="large">Add to order</IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -226,20 +301,35 @@ export const snippetsSizing = [
 
 export const snippetsColour = [
   {
-    language: "Web component",
-    snippet: `<ic-button variant="primary">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button variant="primary">
     Add to order
     </ic-button>
 <ic-button variant="primary" appearance="dark">Add to order</ic-button>
 <ic-button variant="primary" appearance="light">Add to order</ic-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcButton variant="primary">
+    technology: "React",
+    snippets: {
+      short: `<IcButton variant="primary">
     Add to order
     </IcButton>
 <IcButton variant="primary" appearance="dark">Add to order</IcButton>
 <IcButton variant="primary" appearance="light">Add to order</IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -281,8 +371,9 @@ export const FileUpload = () => {
 
 export const snippetsFileUpload = [
   {
-    language: "Web component",
-    snippet: `<ic-button
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button
   variant="primary"
   id="file-button"
   file-upload="true"
@@ -303,10 +394,13 @@ export const snippetsFileUpload = [
       console.log(fileList.join(", "));
     });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `export const FileUpload = () => {
+    technology: "React",
+    snippets: {
+      short: `export const FileUpload = () => {
   function updateFileList(fileArray) {
     const fileList = [];
     Array.from(fileArray).forEach((file) => {
@@ -329,6 +423,17 @@ export const snippetsFileUpload = [
     </IcButton>
   ); 
 };`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/cards/code.mdx b/src/content/structured/components/cards/code.mdx
index 967c78174..b0b744dd3 100644
--- a/src/content/structured/components/cards/code.mdx
+++ b/src/content/structured/components/cards/code.mdx
@@ -60,8 +60,9 @@ export const InteractionIcon = () => (
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
     heading="Americano order" 
     subheading="Name: Michael" 
     message="Extras: Double espresso shot and oat milk."
@@ -125,10 +126,13 @@ export const snippets = [
       To cancel your order click cancel.
     </ic-typography>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
     heading="Americano order" 
     subheading="Name: Michael" 
     message="Extras: Double espresso shot and oat milk."
@@ -192,6 +196,17 @@ export const snippets = [
       To cancel your order click cancel.
     </IcTypography>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -271,12 +286,27 @@ export const snippets = [
 
 export const headingOnly = [
   {
-    language: "Web component",
-    snippet: `<ic-card heading="Americano order"></ic-card>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card heading="Americano order"></ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard heading="Americano order"></IcCard>`,
+    technology: "React",
+    snippets: {
+      short: `<IcCard heading="Americano order"></IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -288,8 +318,9 @@ export const headingOnly = [
 
 export const withIcon = [
   {
-    language: "Web component",
-    snippet: `<ic-card heading="Americano order">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card heading="Americano order">
   
   <svg
     slot="icon"
@@ -302,10 +333,13 @@ export const withIcon = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard heading="Americano order">
+    technology: "React",
+    snippets: {
+      short: `<IcCard heading="Americano order">
   <SlottedSVG     
     slot="icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -317,6 +351,17 @@ export const withIcon = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -339,8 +384,9 @@ export const withIcon = [
 
 export const withMessage = [
   {
-    language: "Web component",
-    snippet: `<ic-card heading="Americano order" message="Extras: Double espresso shot and oat milk.">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card heading="Americano order" message="Extras: Double espresso shot and oat milk.">
   <svg
     slot="icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -352,10 +398,13 @@ export const withMessage = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard heading="Americano order" message="Extras: Double espresso shot and oat milk.">
+    technology: "React",
+    snippets: {
+      short: `<IcCard heading="Americano order" message="Extras: Double espresso shot and oat milk.">
   <SlottedSVG     
     slot="icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -367,6 +416,17 @@ export const withMessage = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -392,8 +452,9 @@ export const withMessage = [
 
 export const withSubHeading = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -408,10 +469,13 @@ export const withSubHeading = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -426,6 +490,17 @@ export const withSubHeading = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
     </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -452,8 +527,9 @@ export const withSubHeading = [
 
 export const interactionButton = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -481,10 +557,13 @@ export const interactionButton = [
     </svg>
   </ic-button>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -511,6 +590,17 @@ export const interactionButton = [
     </SlottedSVG>
   </IcButton>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -540,8 +630,9 @@ export const interactionButton = [
 
 export const adornment = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -557,10 +648,13 @@ export const adornment = [
     </svg>
   <ic-status-tag slot="adornment" status="warning" label="In Progress" size="small"></ic-status-tag>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -576,6 +670,17 @@ export const adornment = [
     </SlottedSVG>
   <IcStatusTag slot="adornment" status="warning" label="In Progress" size="small" />
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -608,8 +713,9 @@ export const adornment = [
 
 export const topImage = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -664,10 +770,13 @@ export const topImage = [
     </ic-button>
   <ic-status-tag slot="adornment" status="warning" label="In Progress" size="small"></ic-status-tag>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -722,6 +831,17 @@ export const topImage = [
   </IcButton> 
   <IcStatusTag slot="adornment" status="warning" label="In Progress" size="small" />
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -783,8 +903,9 @@ export const topImage = [
 
 export const midImage = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -838,10 +959,13 @@ export const midImage = [
       <polygon fill="#880088" points="943 900 1210 900 971 687" />
     </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -895,6 +1019,17 @@ export const midImage = [
       <polygon fill="#880088" points="943 900 1210 900 971 687" />
     </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -955,8 +1090,9 @@ export const midImage = [
 
 export const interactionControls = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -976,10 +1112,13 @@ export const interactionControls = [
     <ic-button variant="secondary">Cancel</ic-button>
   </div>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk.">
@@ -999,6 +1138,17 @@ export const interactionControls = [
     <IcButton variant="secondary">Cancel</IcButton>
   </div>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1029,8 +1179,9 @@ export const interactionControls = [
 
 export const expandable = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1053,10 +1204,13 @@ export const expandable = [
     To cancel your order click cancel.
   </ic-typography>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1079,6 +1233,17 @@ export const expandable = [
     To cancel your order click cancel.
   </IcTypography>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1113,8 +1278,9 @@ export const expandable = [
 
 export const clickableLink = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1131,10 +1297,13 @@ export const clickableLink = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1151,6 +1320,17 @@ export const clickableLink = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1180,8 +1360,9 @@ export const clickableLink = [
 
 export const clickableBtn = [
   {
-    language: "Web component",
-    snippet: `<ic-card
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card
   id="clickable-card"
   heading="Americano order" 
   subheading="Name: Michael" 
@@ -1198,16 +1379,20 @@ export const clickableBtn = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>
+`,
+      long: `{shortCode}
 <script>
   const card = document.querySelector('#clickable-card');
   card.addEventListener('click', (ev) => {
     console.log(ev);
   })
 </script>`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk." 
@@ -1224,6 +1409,17 @@ export const clickableBtn = [
    <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1252,8 +1448,9 @@ export const clickableBtn = [
 
 export const withBadge = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1271,10 +1468,13 @@ export const withBadge = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk." 
@@ -1292,6 +1492,17 @@ export const withBadge = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1322,8 +1533,9 @@ export const withBadge = [
 
 export const disabled = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1340,10 +1552,13 @@ export const disabled = [
      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk." 
@@ -1360,6 +1575,17 @@ export const disabled = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1388,8 +1614,9 @@ export const disabled = [
 
 export const fullWidth = [
   {
-    language: "Web component",
-    snippet: `<ic-card 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-card 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1406,10 +1633,13 @@ export const fullWidth = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-card>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCard 
+    technology: "React",
+    snippets: {
+      short: `<IcCard 
   heading="Americano order" 
   subheading="Name: Michael" 
   message="Extras: Double espresso shot and oat milk."
@@ -1426,6 +1656,17 @@ export const fullWidth = [
      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcCard>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1454,8 +1695,9 @@ export const fullWidth = [
 
 export const wrapped = [
   {
-    language: "Web component",
-    snippet: `<a href="/">
+    technology: "Web component",
+    snippets: {
+      short: `<a href="/">
   <ic-card 
     heading="Americano order"
     subheading="Name: Michael"
@@ -1472,10 +1714,13 @@ export const wrapped = [
     </svg>
   </ic-card>
 </a>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<a href="/">
+    technology: "React",
+    snippets: {
+      short: `<a href="/">
   <IcCard 
     heading="Americano order"
     subheading="Name: Michael"
@@ -1492,6 +1737,17 @@ export const wrapped = [
     </svg>
   </IcCard>
 </a>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/checkboxes/code.mdx b/src/content/structured/components/checkboxes/code.mdx
index c6959d5ea..c8fed3e7b 100644
--- a/src/content/structured/components/checkboxes/code.mdx
+++ b/src/content/structured/components/checkboxes/code.mdx
@@ -25,8 +25,9 @@ import { IcCheckboxGroup, IcCheckbox, IcTextField } from "@ukic/react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Select your extras" name="default">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Select your extras" name="default">
   <ic-checkbox value="extra" label="Extra shot (50p)"></ic-checkbox>
   <ic-checkbox value="Soya milk" label="Soya milk" checked ></ic-checkbox>
   <ic-checkbox value="keep cup" label="Takeaway cup" disabled="true" ></ic-checkbox>
@@ -42,14 +43,28 @@ export const snippetsDefault = [
   })
 </script>
 `,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Select your extras" name="default" onIcChange={(ev) => console.log("onIcChange", ev.detail.value)}>
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Select your extras" name="default" onIcChange={(ev) => console.log("onIcChange", ev.detail.value)}>
   <IcCheckbox value="extra" label="Extra shot (50p)" onIcCheck={(ev) => console.log("onIcCheck", ev)} />
   <IcCheckbox value="Soya milk" label="Soya milk" checked />
   <IcCheckbox value="keep cup" label="Takeaway cup" disabled />
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -83,18 +98,33 @@ export const snippetsDefault = [
 
 export const snippetsHiddenLabel = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Select your extras" hide-label="true" name="1">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Select your extras" hide-label="true" name="1">
   <ic-checkbox value="valueName1" label="Extra shot (50p)"></ic-checkbox>
   <ic-checkbox value="valueName2" label="Soya milk" checked="true"></ic-checkbox>
 </ic-checkbox-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Select your extras" hideLabel name="1">
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Select your extras" hideLabel name="1">
   <IcCheckbox value="valueName1" label="Extra shot (50p)" />
   <IcCheckbox value="valueName2" label="Soya milk" checked />
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -109,18 +139,33 @@ export const snippetsHiddenLabel = [
 
 export const snippetsHelperText = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Select your extras" name="1" helper-text="Additional charges may apply.">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Select your extras" name="1" helper-text="Additional charges may apply.">
   <ic-checkbox value="valueName1" label="Extra shot (50p)"></ic-checkbox>
   <ic-checkbox value="valueName2" label="Soya milk" checked="true"></ic-checkbox>
 </ic-checkbox-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Select your extras" name="1" helperText="Additional charges may apply.">
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Select your extras" name="1" helperText="Additional charges may apply.">
   <IcCheckbox value="valueName1" label="Extra shot (50p)" />
   <IcCheckbox value="valueName2" label="Soya milk" checked />
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -139,8 +184,9 @@ export const snippetsHelperText = [
 
 export const snippetsSizes = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Select your extras" name="1" size="small">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Select your extras" name="1" size="small">
   <ic-checkbox value="valueName1" label="Extra shot (50p)"></ic-checkbox>
   <ic-checkbox value="valueName2" label="Soya milk" checked="true"></ic-checkbox>
 </ic-checkbox-group>
@@ -152,10 +198,13 @@ export const snippetsSizes = [
   <ic-checkbox value="valueName1" label="Extra shot (50p)"></ic-checkbox>
   <ic-checkbox value="valueName2" label="Soya milk" checked="true"></ic-checkbox>
 </ic-checkbox-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Select your extras" name="1" size="small">
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Select your extras" name="1" size="small">
   <IcCheckbox value="valueName1" label="Extra shot (50p)" />
   <IcCheckbox value="valueName2" label="Soya milk" checked />
 </IcCheckboxGroup>
@@ -167,6 +216,17 @@ export const snippetsSizes = [
   <IcCheckbox value="valueName1" label="Extra shot (50p)" />
   <IcCheckbox value="valueName2" label="Soya milk" checked />
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -189,16 +249,31 @@ export const snippetsSizes = [
 
 export const snippetsSettingEachCheckboxSize = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox value="valueName1" label="Extra shot (50p)" size="small" />
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox value="valueName1" label="Extra shot (50p)" size="small" />
 <ic-checkbox value="valueName2" label="Extra shot (50p)" />
 <ic-checkbox value="valueName3" label="Extra shot (50p)" size="large" />`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckbox value="valueName1" label="Extra shot (50p)" size="small" />
+    technology: "React",
+    snippets: {
+      short: `<IcCheckbox value="valueName1" label="Extra shot (50p)" size="small" />
 <IcCheckbox value="valueName2" label="Extra shot (50p)" />
 <IcCheckbox value="valueName3" label="Extra shot (50p)" size="large" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -220,8 +295,9 @@ export const snippetsSettingEachCheckboxSize = [
 
 export const snippetsConditional = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Which coffee do you like best?" name="conditional">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Which coffee do you like best?" name="conditional">
   <ic-checkbox value="americano" label="Americano"></ic-checkbox>
   <ic-checkbox value="espresso" label="Espresso"></ic-checkbox>
   <ic-checkbox value="flatwhite" label="Flat white"></ic-checkbox>
@@ -234,10 +310,13 @@ export const snippetsConditional = [
     ></ic-text-field>
   </ic-checkbox>
 </ic-checkbox-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Which coffee do you like best?" name="conditional">
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Which coffee do you like best?" name="conditional">
   <IcCheckbox value="americano" label="Americano" />
   <IcCheckbox value="espresso" label="Espresso" />
   <IcCheckbox value="flatwhite" label="Flat white" />
@@ -250,6 +329,17 @@ export const snippetsConditional = [
     />
   </IcCheckbox>
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -270,8 +360,9 @@ export const snippetsConditional = [
 
 export const snippetsConditionalDynamic = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Which coffee do you like best?" name="dynamic">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Which coffee do you like best?" name="dynamic">
   <ic-checkbox value="americano" label="Americano"></ic-checkbox>
   <ic-checkbox value="espresso" label="Espresso"></ic-checkbox>
   <ic-checkbox value="flatwhite" label="Flat white"></ic-checkbox>
@@ -284,10 +375,13 @@ export const snippetsConditionalDynamic = [
     ></ic-text-field>
   </ic-checkbox>
 </ic-checkbox-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Which coffee do you like best?" name="dynamic">
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Which coffee do you like best?" name="dynamic">
   <IcCheckbox value="americano" label="Americano" />
   <IcCheckbox value="espresso" label="Espresso" />
   <IcCheckbox value="flatwhite" label="Flat white" />
@@ -300,6 +394,17 @@ export const snippetsConditionalDynamic = [
     />
   </IcCheckbox>
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -325,18 +430,33 @@ export const snippetsConditionalDynamic = [
 
 export const snippetsValidation = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Select your extras" name="1" validation-status="error" validation-text="Sorry, this is currently unavailable.">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Select your extras" name="1" validation-status="error" validation-text="Sorry, this is currently unavailable.">
   <ic-checkbox value="valueName1" label="Extra shot (50p)"></ic-checkbox>
   <ic-checkbox value="valueName2" label="Soya milk" checked="true"></ic-checkbox>
 </ic-checkbox-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Select your extras" name="1" validationStatus="error" validationText="Sorry, this is currently unavailable.">
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Select your extras" name="1" validationStatus="error" validationText="Sorry, this is currently unavailable.">
   <IcCheckbox value="valueName1" label="Extra shot (50p)" />
   <IcCheckbox value="valueName2" label="Soya milk" checked />
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -356,8 +476,9 @@ export const snippetsValidation = [
 
 export const snippetsIndeterminate = [
   {
-    language: "Web component",
-    snippet: `<ic-checkbox-group label="Select your preferred drinks" name="1">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-checkbox-group label="Select your preferred drinks" name="1">
   <ic-checkbox value="drinks" label="Drinks" checked="true" indeterminate="true">
     <ic-checkbox-group label="Coffee" hide-label="true" slot="additional-field" name="2">
       <ic-checkbox value="tea" label="Tea"></ic-checkbox>
@@ -372,10 +493,13 @@ export const snippetsIndeterminate = [
     </ic-checkbox-group>
   </ic-checkbox>
 </ic-checkbox-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcCheckboxGroup label="Select your preferred drinks" name="1">
+    technology: "React",
+    snippets: {
+      short: `<IcCheckboxGroup label="Select your preferred drinks" name="1">
   <IcCheckbox value="drinks" label="Drinks" checked indeterminate>
     <IcCheckboxGroup name="2" label="Coffee" hideLabel slot="additional-field">
       <IcCheckbox value="tea" label="Tea" />
@@ -390,6 +514,17 @@ export const snippetsIndeterminate = [
     </IcCheckboxGroup>
   </IcCheckbox>
 </IcCheckboxGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/chips/code.mdx b/src/content/structured/components/chips/code.mdx
index 49beaaf31..8d377e366 100644
--- a/src/content/structured/components/chips/code.mdx
+++ b/src/content/structured/components/chips/code.mdx
@@ -25,8 +25,9 @@ import { IcChip } from "@ukic/react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-chip label="Americano" dismissible="true" id='my-chip'>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-chip label="Americano" dismissible="true" id='my-chip'>
   <svg
     slot="icon"
     viewBox="0 0 24 24"
@@ -48,10 +49,13 @@ export const snippetsDefault = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </svg>
 </ic-chip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcChip label="Americano" dismissible onIcDismiss={(ev) => console.log(ev)}>
+    technology: "React",
+    snippets: {
+      short: `<IcChip label="Americano" dismissible onIcDismiss={(ev) => console.log(ev)}>
   <SlottedSVG
     slot="icon"
     viewBox="0 0 24 24"
@@ -73,6 +77,17 @@ export const snippetsDefault = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcChip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -119,8 +134,9 @@ export const snippetsDefault = [
 
 export const snippetsOutline = [
   {
-    language: "Web component",
-    snippet: `<ic-chip label="Americano" variant="outlined">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-chip label="Americano" variant="outlined">
   <svg
     slot="icon"
     viewBox="0 0 24 24"
@@ -131,10 +147,13 @@ export const snippetsOutline = [
     <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
   </svg>
 </ic-chip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcChip label="Americano" variant="outlined">
+    technology: "React",
+    snippets: {
+      short: `<IcChip label="Americano" variant="outlined">
   <SlottedSVG
     slot="icon"
     viewBox="0 0 24 24"
@@ -145,6 +164,17 @@ export const snippetsOutline = [
     <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
   </SlottedSVG>
 </IcChip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -174,8 +204,9 @@ export const snippetsOutline = [
 
 export const snippetsDismissible = [
   {
-    language: "Web component",
-    snippet: `<ic-chip label="Americano" dismissible="true" id='my-chip'>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-chip label="Americano" dismissible="true" id='my-chip'>
   <svg
     slot="icon"
     viewBox="0 0 24 24"
@@ -190,10 +221,13 @@ export const snippetsDismissible = [
   const chip = document.querySelector('#my-chip');
   chip.addEventListener('icDismiss', (ev) => console.log(ev));
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcChip label="Americano" dismissible onIcDismiss={(ev) => console.log(ev)}>
+    technology: "React",
+    snippets: {
+      short: `<IcChip label="Americano" dismissible onIcDismiss={(ev) => console.log(ev)}>
   <SlottedSVG
     slot="icon"
     viewBox="0 0 24 24"
@@ -204,6 +238,17 @@ export const snippetsDismissible = [
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
   </SlottedSVG>
 </IcChip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -233,8 +278,9 @@ export const snippetsDismissible = [
 
 export const snippetsDisabled = [
   {
-    language: "Web component",
-    snippet: `<ic-chip label="Americano" dismissible="true" disabled="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-chip label="Americano" dismissible="true" disabled="true">
   <svg
     slot="icon"
     viewBox="0 0 24 24"
@@ -256,10 +302,13 @@ export const snippetsDisabled = [
     <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
   </svg>
 </ic-chip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcChip label="Americano" dismissible disabled>
+    technology: "React",
+    snippets: {
+      short: `<IcChip label="Americano" dismissible disabled>
   <SlottedSVG
     slot="icon"
     viewBox="0 0 24 24"
@@ -281,6 +330,17 @@ export const snippetsDisabled = [
     <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
   </SlottedSVG>
 </IcChip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/classification-banner/code.mdx b/src/content/structured/components/classification-banner/code.mdx
index afaec6fbd..441c5c5d2 100644
--- a/src/content/structured/components/classification-banner/code.mdx
+++ b/src/content/structured/components/classification-banner/code.mdx
@@ -26,20 +26,35 @@ import { IcClassificationBanner } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-classification-banner></ic-classification-banner>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-classification-banner></ic-classification-banner>
 <ic-classification-banner classification="official"></ic-classification-banner>
 <ic-classification-banner classification="official-sensitive"></ic-classification-banner>
 <ic-classification-banner classification="secret"></ic-classification-banner>
 <ic-classification-banner classification="top-secret"></ic-classification-banner>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcClassificationBanner inline />
+    technology: "React",
+    snippets: {
+      short: `<IcClassificationBanner inline />
 <IcClassificationBanner classification="official"/>
 <IcClassificationBanner classification="official-sensitive"/>
 <IcClassificationBanner classification="secret"/>
 <IcClassificationBanner classification="top-secret"/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -61,12 +76,27 @@ export const snippets = [
 
 export const snippetsVariants = [
   {
-    language: "Web component",
-    snippet: `<ic-classification-banner classification="official" up-to="true" country="us" additional-selectors="ukic"></ic-classification-banner>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-classification-banner classification="official" up-to="true" country="us" additional-selectors="ukic"></ic-classification-banner>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcClassificationBanner classification="official" upTo="true" country="us" additionalSelectors="ukic"/>`,
+    technology: "React",
+    snippets: {
+      short: `<IcClassificationBanner classification="official" upTo="true" country="us" additionalSelectors="ukic"/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/data-entity/code.mdx b/src/content/structured/components/data-entity/code.mdx
index 5eb21e012..7a8b48092 100644
--- a/src/content/structured/components/data-entity/code.mdx
+++ b/src/content/structured/components/data-entity/code.mdx
@@ -33,8 +33,9 @@ import {
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-data-entity heading="Order details">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-data-entity heading="Order details">
     <ic-data-row label="Order name" value="Michael">
       <ic-link href="#" slot="end-component">
         Edit
@@ -74,10 +75,13 @@ export const snippets = [
       </ic-button>
     </ic-data-row>
   </ic-data-entity>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `  <IcDataEntity heading="Order details">
+    technology: "React",
+    snippets: {
+      short: `  <IcDataEntity heading="Order details">
     <IcDataRow label="Order name" value="Michael">
       <IcLink href="#" slot="end-component">
         Edit
@@ -117,6 +121,17 @@ export const snippets = [
       </IcButton>
     </IcDataRow>
   </IcDataEntity>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -177,8 +192,9 @@ export const snippets = [
 
 export const withStatusTags = [
   {
-    language: "Web component",
-    snippet: `<ic-data-entity heading="Order details">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-data-entity heading="Order details">
     <ic-data-row label="Order name" value="Michael">
     </ic-data-row>
     <ic-data-row label="Drink" value="Americano">
@@ -204,10 +220,13 @@ export const withStatusTags = [
       />
     </ic-data-row>
   </ic-data-entity>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcDataEntity heading="Order details">
+    technology: "React",
+    snippets: {
+      short: `<IcDataEntity heading="Order details">
     <IcDataRow label="Order name" value="Michael">
     </IcDataRow>
     <IcDataRow label="Drink" value="Americano">
@@ -233,6 +252,17 @@ export const withStatusTags = [
       />
     </IcDataRow>
   </IcDataEntity>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -266,8 +296,9 @@ export const withStatusTags = [
 
 export const smallSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-data-entity heading="Personal details" size="small">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-data-entity heading="Personal details" size="small">
   <ic-data-row label="Name" value="Michael Johnson">
     <ic-status-tag
       status="success"
@@ -322,10 +353,13 @@ export const smallSnippet = [
     ></ic-status-tag>
   </ic-data-row>
 </ic-data-entity>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcDataEntity heading="Personal details" size="small">
+    technology: "React",
+    snippets: {
+      short: `<IcDataEntity heading="Personal details" size="small">
   <IcDataRow label="Name" value="Michael Johnson">
     <IcStatusTag
       status="success"
@@ -380,6 +414,17 @@ export const smallSnippet = [
     />
   </IcDataRow>
 </IcDataEntity>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -411,8 +456,9 @@ export const smallSnippet = [
 
 export const editableExample = [
   {
-    language: "Web component",
-    snippet: `<ic-data-entity heading="Order details">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-data-entity heading="Order details">
   <ic-data-row label="Order name"> 
     <ic-text-field 
       slot="value" 
@@ -485,10 +531,13 @@ export const editableExample = [
     });
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcDataEntity heading="Order details">
+    technology: "React",
+    snippets: {
+      short: `<IcDataEntity heading="Order details">
   <IcDataRow label="Order name">
     <IcTextField
       slot="value"
@@ -566,6 +615,17 @@ export const editableExample = [
 >
   Edit
 </IcButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/dialog/code.mdx b/src/content/structured/components/dialog/code.mdx
index cf473e3f6..c7922cb49 100644
--- a/src/content/structured/components/dialog/code.mdx
+++ b/src/content/structured/components/dialog/code.mdx
@@ -45,35 +45,39 @@ export const buttonProps = [
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<script>
-  const dialog = document.querySelector("#default-dialog");
-  function showDialog() {    
-    dialog.open = true;
-  }
-  // Used if dismiss button is clicked
-  function hideDialog() { 
-    if (dialog.open) {
-      dialog.open = false;
-    }   
-  }
-  function dialogConfirmed(ev) {
-    alert("Added to basket");
-    dialog.open = false;
-  }
-  dialog.addEventListener("icDialogConfirmed", dialogConfirmed);
-  dialog.addEventListener("icDialogClosed", hideDialog);
-</script>
-<ic-button onclick="showDialog()">Launch dialog</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="showDialog()">Launch dialog</ic-button>
 <ic-dialog id="default-dialog" heading="Are you sure?" label="Coffee order">
   <ic-typography>
     You are about to add 'Americano' to your basket. Are you sure you want to continue?
   </ic-typography>
 </ic-dialog>`,
+      long: `{shortCode}
+    <script>
+      const dialog = document.querySelector("#default-dialog");
+      function showDialog() {    
+        dialog.open = true;
+      }
+      // Used if dismiss button is clicked
+      function hideDialog() { 
+        if (dialog.open) {
+          dialog.open = false;
+        }   
+      }
+      function dialogConfirmed(ev) {
+        alert("Added to basket");
+        dialog.open = false;
+      }
+      dialog.addEventListener("icDialogConfirmed", dialogConfirmed);
+      dialog.addEventListener("icDialogClosed", hideDialog);
+    </script>`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openDialog, setOpenDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);
 const handleDialogClose = () => setOpenDialog(false);
 return (
@@ -96,6 +100,17 @@ return (
   </>
 )
     `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -137,8 +152,21 @@ export const DefaultDialog = () => {
 
 export const snippetsSizes = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="showDialog('#size-dialog')">Launch sizes dialog</ic-button>
+<ic-dialog
+  id="size-dialog"
+  size="large"
+  heading="Are you sure?"
+  label="Coffee order"
+>
+  <ic-typography>
+    You are about to add 'Americano' to your basket. Are you sure you want to continue?
+  </ic-typography>
+</ic-dialog>`,
+      long: `{shortCode}
+      <script>
   const dialog = document.querySelector("#size-dialog");
   function showDialog() {
     dialog.open = true;
@@ -156,21 +184,13 @@ export const snippetsSizes = [
   dialog.addEventListener("icDialogConfirmed", dialogConfirmed);
   dialog.addEventListener("icDialogClosed", hideDialog);
 </script>
-<ic-button onclick="showDialog('#size-dialog')">Launch sizes dialog</ic-button>
-<ic-dialog
-  id="size-dialog"
-  size="large" // "small" | "medium" | "large"
-  heading="Are you sure?"
-  label="Coffee order"
->
-  <ic-typography>
-    You are about to add 'Americano' to your basket. Are you sure you want to continue?
-  </ic-typography>
-</ic-dialog>`,
+`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openDialog, setOpenDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);
 const handleDialogClose = () => setOpenDialog(false);
 return (
@@ -192,6 +212,17 @@ return (
     </IcDialog>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -228,26 +259,9 @@ export const SizesDialogs = () => {
 
 export const snippetsAlert = [
   {
-    language: "Web component",
-    snippet: `<script>
-  const dialog = document.querySelector("#status-dialog");
-  function showDialog() {
-    dialog.open = true;
-  }
-  function hideDialog() {
-    if (dialog.open) {
-      dialog.open = false;
-    }
-  }
-  function dialogConfirmed(ev) {
-    alert("Added to basket");
-    dialog.open = false;
-  }
-  const dialog = document.querySelector("ic-dialog");
-  dialog.addEventListener("icDialogConfirmed", dialogConfirmed);
-  dialog.addEventListener("icDialogClosed", hideDialog);
-</script>
-<ic-button onclick="showDialog('#status-dialog')">Launch status dialog</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="showDialog('#status-dialog')">Launch status dialog</ic-button>
 <ic-dialog
   id="status-dialog"
   heading="Are you sure?"
@@ -266,10 +280,31 @@ export const snippetsAlert = [
     You are about to add 'Americano' to your basket. Are you sure you want to continue?
   </ic-typography>
 </ic-dialog>`,
+      long: `{shortCode}
+      <script>
+  const dialog = document.querySelector("#status-dialog");
+  function showDialog() {
+    dialog.open = true;
+  }
+  function hideDialog() {
+    if (dialog.open) {
+      dialog.open = false;
+    }
+  }
+  function dialogConfirmed(ev) {
+    alert("Added to basket");
+    dialog.open = false;
+  }
+  const dialog = document.querySelector("ic-dialog");
+  dialog.addEventListener("icDialogConfirmed", dialogConfirmed);
+  dialog.addEventListener("icDialogClosed", hideDialog);
+</script>`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openDialog, setOpenDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);
 const handleDialogClose = () => setOpenlDialog(false);
 return (
@@ -303,6 +338,17 @@ return (
     </IcDialog>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -358,39 +404,9 @@ export const AlertDialog = () => {
 
 export const snippetsCustomButtons = [
   {
-    language: "Web component",
-    snippet: `<script>
-  const singleButtonDialog = document.querySelector("#single-button-dialog");
-  const threeButtonsDialog = document.querySelector("#three-buttons-dialog");
-  const destructiveButtonDialog = document.querySelector("#destructive-dialog");
-  function showDialog(id) {
-    document.querySelector(id).open = true;
-  }
-  function hideDialog(ev) {
-    if (ev.target.open) {
-      ev.target.open = false;
-    }
-  }
-  function dialogConfirmed(ev) {
-    alert("Confirmed");
-    ev.target.open = false;
-  }
-  singleButtonDialog.buttonProps = [
-    { label: "Confirm", onclick: "alert('Confirmed');this.open = false;" },
-  ];
-  threeButtonsDialog.buttonProps = [
-    { label: "Cancel", onclick: "this.open = false;" },
-    { label: "Options", onclick: "alert('Options...');" },
-    { label: "Confirm", onclick: "alert('Confirmed'); this.open = false;" },
-  ];
-  destructiveButtonDialog.buttonProps = [
-    { label: "Confirm", onclick: "alert('Confirmed'); this.open = false;" },
-  ];
-  singleButtonDialog.addEventListener('icDialogClosed', hideDialog);
-  threeButtonsDialog.addEventListener('icDialogClosed', hideDialog);
-  destructiveButtonDialog.addEventListener('icDialogClosed', hideDialog);
-</script>
-  <ic-button onclick="showDialog('#no-button-dialog')">Launch no button dialog</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="showDialog('#no-button-dialog')">Launch no button dialog</ic-button>
   <ic-button onclick="showDialog('#single-button-dialog')">Launch single button dialog</ic-button>
   <ic-button onclick="showDialog('#three-buttons-dialog')">Launch three button dialog</ic-button>
   <ic-button onclick="showDialog('#destructive-dialog')">Launch destructive button dialog</ic-button>
@@ -421,10 +437,45 @@ export const snippetsCustomButtons = [
       You are about to cancel your order for an Americano. Are you sure you want to continue?
     </ic-typography>
   </ic-dialog>`,
+      long: `{shortCode}
+      <script>
+  const singleButtonDialog = document.querySelector("#single-button-dialog");
+  const threeButtonsDialog = document.querySelector("#three-buttons-dialog");
+  const destructiveButtonDialog = document.querySelector("#destructive-dialog");
+  function showDialog(id) {
+    document.querySelector(id).open = true;
+  }
+  function hideDialog(ev) {
+    if (ev.target.open) {
+      ev.target.open = false;
+    }
+  }
+  function dialogConfirmed(ev) {
+    alert("Confirmed");
+    ev.target.open = false;
+  }
+  singleButtonDialog.buttonProps = [
+    { label: "Confirm", onclick: "alert('Confirmed');this.open = false;" },
+  ];
+  threeButtonsDialog.buttonProps = [
+    { label: "Cancel", onclick: "this.open = false;" },
+    { label: "Options", onclick: "alert('Options...');" },
+    { label: "Confirm", onclick: "alert('Confirmed'); this.open = false;" },
+  ];
+  destructiveButtonDialog.buttonProps = [
+    { label: "Confirm", onclick: "alert('Confirmed'); this.open = false;" },
+  ];
+  singleButtonDialog.addEventListener('icDialogClosed', hideDialog);
+  threeButtonsDialog.addEventListener('icDialogClosed', hideDialog);
+  destructiveButtonDialog.addEventListener('icDialogClosed', hideDialog);
+</script>
+  `,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);
 const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);
 const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);
 const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);
@@ -521,6 +572,17 @@ return (
     </IcDialog>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -643,8 +705,9 @@ export const CustomButtonsDialog = () => {
 
 export const snippetsSlottedButtons = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<script>
   const dialog = document.querySelector("#slotted-dialog");
   function showDialog() {    
     dialog.open = true;
@@ -673,10 +736,13 @@ export const snippetsSlottedButtons = [
     Add to basket
   </ic-button>
 </ic-dialog>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openDialog, setOpenDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);
 const handleDialogClose = () => setOpenDialog(false);
 const handleAddToBasket = () => {
@@ -705,6 +771,17 @@ return (
     </IcDialog>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -752,8 +829,9 @@ export const SlottedButtonsDialog = () => {
 
 export const interactiveContentSnippet = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<script>
   const dialog = document.querySelector("#interactive-content-dialog");
   const checkGroup = document.querySelector("ic-checkbox-group");
   let termsAgreed = false;
@@ -795,10 +873,13 @@ export const interactiveContentSnippet = [
     <ic-checkbox label="I agree to the terms and conditions." value="agree"></ic-checkbox>
   </ic-checkbox-group>
 </ic-dialog>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [termsAgreed, setTermsAgreed] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [termsAgreed, setTermsAgreed] = useState(false);
 const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);
 const handleDialogClose = () => setOpenDialog(false);
@@ -839,6 +920,17 @@ return (
     </IcDialog>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -894,8 +986,9 @@ export const InteractiveContent = () => {
 
 export const noCloseSnippet = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<script>
   const dialog = document.querySelector("#no-close-dialog");
   function showDialog() {
     dialog.open = true;
@@ -924,10 +1017,13 @@ export const noCloseSnippet = [
     You are about to add 'Americano' to your basket. Are you sure you want to continue?
   </ic-typography>
 </ic-dialog>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openDialog, setOpenDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);    
 const handleDialogClose = () => setOpenDialog(false);    
 const handleConfirmDialog = (ev) => {    
@@ -952,6 +1048,17 @@ return (
     </IcDialog>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -992,8 +1099,9 @@ export const NoCloseContent = () => {
 
 export const eventsSnippet = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<script>
   const dialog = document.querySelector("#ev-dialog");
   function showDialog() {
     evDialog.open = true;
@@ -1042,10 +1150,13 @@ export const eventsSnippet = [
     Confirm
   </ic-button>
 </ic-dialog>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openDialog, setOpenDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);
 const handleDialogClose = () => setOpenDialog(false);
 const handleDialogOpened = () => alert("Dialog opened");
@@ -1095,6 +1206,17 @@ return (
     </IcDialog>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1164,8 +1286,9 @@ export const EventsContent = () => {
 
 export const popoutElements = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<script>
   const milkSelect = document.querySelector('ic-select');
   const dialog = document.querySelector('ic-dialog');
   milkSelect.options = [
@@ -1195,10 +1318,13 @@ export const popoutElements = [
   <ic-typography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</ic-typography><br/>
   <ic-select label='Please select a type of milk'></ic-select>
 </ic-dialog>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const [openDialog, setOpenDialog] = useState(false);
+    technology: "React",
+    snippets: {
+      short: `const [openDialog, setOpenDialog] = useState(false);
 const handleDialogOpen = () => setOpenDialog(true);
 const handleDialogClose = () => setOpenDialog(false);
 return (
@@ -1227,6 +1353,17 @@ return (
     </IcDialog>
   </>
 )`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/empty-state/code.mdx b/src/content/structured/components/empty-state/code.mdx
index 49b2ff75b..c13d7d957 100644
--- a/src/content/structured/components/empty-state/code.mdx
+++ b/src/content/structured/components/empty-state/code.mdx
@@ -25,8 +25,9 @@ import { IcEmptyState, IcButton, IcLink } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
     body="Take a look at our favourite coffees instead, there's much more of those.">
@@ -50,10 +51,13 @@ export const snippets = [
       Customer support
     </ic-link>
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
     body="Take a look at our favourite coffees instead, there's much more of those." 
@@ -78,6 +82,17 @@ export const snippets = [
       Customer support
     </IcLink>
   </IcEmptyState>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -119,8 +134,9 @@ export const snippets = [
 
 export const actionsSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
     body="Take a look at our favourite coffees instead, there's much more of those, or try again."
@@ -128,10 +144,13 @@ export const actionsSnippets = [
     <ic-button slot="actions">Go to favourite coffees</ic-button>
     <ic-link slot="actions" href="/">Customer support</ic-link>
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
     body="Take a look at our favourite coffees instead, there's much more of those, or try again."
@@ -139,6 +158,17 @@ export const actionsSnippets = [
     <IcButton slot="actions">Go to favourite coffees</IcButton>
     <IcLink slot="actions" href="/">Customer support</IcLink>
 </IcEmptyState>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -159,8 +189,9 @@ export const actionsSnippets = [
 
 export const imageSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
     body="Take a look at our favourite coffees instead, there's much more of those, or try again."
@@ -184,10 +215,13 @@ export const imageSnippets = [
       <polygon fill="#880088" points="943 900 1210 900 971 687" />
     </svg>
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
     body="Take a look at our favourite coffees instead, there's much more of those, or try again."
@@ -211,6 +245,17 @@ export const imageSnippets = [
       <polygon fill="#880088" points="943 900 1210 900 971 687" />
     </SlottedSVG>
 </IcEmptyState>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -242,8 +287,9 @@ export const imageSnippets = [
 
 export const imageLargeSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     image-size="large" 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
@@ -268,10 +314,13 @@ export const imageLargeSnippets = [
       <polygon fill="#880088" points="943 900 1210 900 971 687" />
     </svg>
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     imageSize="large" 
     heading="Hmm...there's nothing here" 
     subheading="We don't currently have any favourite teas, probably because coffee is much better." 
@@ -296,6 +345,17 @@ export const imageLargeSnippets = [
       <polygon fill="#880088" points="943 900 1210 900 971 687" />
     </SlottedSVG>
 </IcEmptyState>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -328,8 +388,9 @@ export const imageLargeSnippets = [
 
 export const iconSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those, or try again."
@@ -345,10 +406,13 @@ export const iconSnippets = [
     <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
   </svg>
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those, or try again."
@@ -364,6 +428,17 @@ export const iconSnippets = [
     <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
   </SlottedSVG>
 </IcEmptyState>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -390,22 +465,37 @@ export const iconSnippets = [
 
 export const rightSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     aligned="right" 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those, or try again.">
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     aligned="right" 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those, or try again." 
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -422,22 +512,37 @@ export const rightSnippets = [
 
 export const centreSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     aligned="center" 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those, or try again.">
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     aligned="center" 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those, or try again."
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -454,22 +559,37 @@ export const centreSnippets = [
 
 export const maxLinesSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-empty-state 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-empty-state 
     body-max-lines="1" 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.">
 </ic-empty-state>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcEmptyState 
+    technology: "React",
+    snippets: {
+      short: `<IcEmptyState 
     bodyMaxLines="1" 
     heading="Hmm...there's nothing here"
     subheading="We don't currently have any favourite teas, probably because coffee is much better."
     body="Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you."
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/footer/code.mdx b/src/content/structured/components/footer/code.mdx
index 3d46260a4..60d45ec69 100644
--- a/src/content/structured/components/footer/code.mdx
+++ b/src/content/structured/components/footer/code.mdx
@@ -27,8 +27,9 @@ import { NavLink, MemoryRouter } from "react-router-dom";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-footer
+    technology: "Web component",
+    snippets: {
+      short: `<ic-footer
     description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
     caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.">
     <ic-footer-link slot="link" href="/">
@@ -44,10 +45,13 @@ export const snippets = [
       Patterns
     </ic-footer-link>
 </ic-footer>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcFooter
+    technology: "React",
+    snippets: {
+      short: `<IcFooter
     description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
     caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.">
     <IcFooterLink slot="link" href="/">
@@ -63,6 +67,17 @@ export const snippets = [
       Patterns
     </IcFooterLink>
 </IcFooter>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -104,8 +119,9 @@ export const snippets = [
 
 export const snippetsGroupedLinks = [
   {
-    language: "Web component",
-    snippet: `<ic-footer
+    technology: "Web component",
+    snippets: {
+      short: `<ic-footer
     group-links="true"
     description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
           please get in touch.">
@@ -128,10 +144,13 @@ export const snippetsGroupedLinks = [
       <ic-footer-link href="/">Patterns</ic-footer-link>
     </ic-footer-link-group>
   </ic-footer>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcFooter
+    technology: "React",
+    snippets: {
+      short: `<IcFooter
     groupLinks
     description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
           please get in touch.">
@@ -154,6 +173,17 @@ export const snippetsGroupedLinks = [
       <IcFooterLink href="/">Patterns</IcFooterLink>
     </IcFooterLinkGroup>
   </IcFooter>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -188,8 +218,9 @@ export const snippetsGroupedLinks = [
 
 export const snippetsLogoLinks = [
   {
-    language: "Web component",
-    snippet: `<ic-footer description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-footer description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.">
   <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
   <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
   <ic-footer-link slot="link" href="/">Components</ic-footer-link>
@@ -224,10 +255,13 @@ export const snippetsLogoLinks = [
       </ic-footer-link>
     </div>
 </ic-footer>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcFooter description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.">
+    technology: "React",
+    snippets: {
+      short: `<IcFooter description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.">
   <IcFooterLink slot="link" href="/">Accessibility</IcFooterLink>
   <IcFooterLink slot="link" href="/">Styles</IcFooterLink>
   <IcFooterLink slot="link" href="/">Components</IcFooterLink>
@@ -263,6 +297,17 @@ export const snippetsLogoLinks = [
     </IcFooterLink>
   </div>
 </IcFooter>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -323,8 +368,9 @@ export const snippetsLogoLinks = [
 
 export const withReactRouter = [
   {
-    language: "React",
-    snippet: `<MemoryRouter initialEntries={["/"]}>
+    technology: "React",
+    snippets: {
+      short: `<MemoryRouter initialEntries={["/"]}>
   <Routes>
       <Route path="/" element={() => <IcTypography>This is the accessibility page</IcTypography>} />
       <Route path="/Styles" element={() => <IcTypography>This page is about styles</IcTypography>} />
@@ -351,6 +397,17 @@ export const withReactRouter = [
   </IcFooter>
 </MemoryRouter>
     `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -393,8 +450,9 @@ Adding a `minHeight` of `100vh` ensures the footer appears below the page fold.
 
 export const footerLayoutExample = [
   {
-    language: "Web component",
-    snippet: `<div class='footer-layout-root'>
+    technology: "Web component",
+    snippets: {
+      short: `<div class='footer-layout-root'>
   <div style="height: 100vh">  
     <ic-top-navigation appTitle="ICDS" status="alpha" version="v0.0.7">
       <svg
@@ -434,10 +492,13 @@ export const footerLayoutExample = [
   </ic-footer>
 </div>
     `,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<div className='footer-layout-root'>
+    technology: "React",
+    snippets: {
+      short: `<div className='footer-layout-root'>
   <div style={{minHeight:"100vh"}}>  
     <IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7">
       <SlottedSVG
@@ -476,6 +537,17 @@ export const footerLayoutExample = [
     <IcFooterLink slot="link" href="/">Patterns</IcFooterLink>
   </IcFooter>
 </div>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/hero/code.mdx b/src/content/structured/components/hero/code.mdx
index da66868f5..b657ddbd9 100644
--- a/src/content/structured/components/hero/code.mdx
+++ b/src/content/structured/components/hero/code.mdx
@@ -25,24 +25,39 @@ import { IcHero, IcButton, IcSearchBar, IcCard } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-hero
+    technology: "Web component",
+    snippets: {
+      short: `<ic-hero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press."
 >
   <ic-button variant="primary" slot="interaction">Explore</ic-button>
   <ic-button variant="secondary" slot="interaction">Check out our new drinks</ic-button>
 </ic-hero>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcHero
+    technology: "React",
+    snippets: {
+      short: `<IcHero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press."
 >
   <IcButton variant="primary" slot="interaction">Explore</IcButton>
   <IcButton variant="secondary" slot="interaction">Check out our new drinks</IcButton>
 </IcHero>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -70,24 +85,39 @@ export const snippets = [
 
 export const snippetsCentre = [
   {
-    language: "Web component",
-    snippet: `<ic-hero
+    technology: "Web component",
+    snippets: {
+      short: `<ic-hero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press." aligned="center"
 >
   <ic-button variant="primary" slot="interaction">Explore</ic-button>
   <ic-button variant="secondary" slot="interaction">Check out our new drinks</ic-button>
 </ic-hero>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcHero
+    technology: "React",
+    snippets: {
+      short: `<IcHero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press." aligned="center"
 >
   <IcButton variant="primary" slot="interaction">Explore</IcButton>
   <IcButton variant="secondary" slot="interaction">Check out our new drinks</IcButton>
 </IcHero>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -110,24 +140,39 @@ export const snippetsCentre = [
 
 export const snippetsContentCentre = [
   {
-    language: "Web component",
-    snippet: `<ic-hero
+    technology: "Web component",
+    snippets: {
+      short: `<ic-hero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press." aligned="center" content-aligned="center"
 >
   <ic-button variant="primary" slot="interaction">Explore</ic-button>
   <ic-button variant="secondary" slot="interaction">Check out our new drinks</ic-button>
 </ic-hero>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcHero
+    technology: "React",
+    snippets: {
+      short: `<IcHero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press." aligned="center" contentAligned="center"
 >
   <IcButton variant="primary" slot="interaction">Explore</IcButton>
   <IcButton variant="secondary" slot="interaction">Check out our new drinks</IcButton>
 </IcHero>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -151,8 +196,9 @@ export const snippetsContentCentre = [
 
 export const snippetsSmall = [
   {
-    language: "Web component",
-    snippet: `<ic-hero
+    technology: "Web component",
+    snippets: {
+      short: `<ic-hero
   heading="New coffee launches 14 September 2022"
   subheading="Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary."
   size="small"
@@ -160,10 +206,13 @@ export const snippetsSmall = [
   <ic-button variant="primary" slot="interaction" size="small">Order now</ic-button>
   <ic-button variant="secondary" slot="interaction" size="small">Submit new flavour</ic-button>
 </ic-hero>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcHero
+    technology: "React",
+    snippets: {
+      short: `<IcHero
   heading="New coffee launches 14 September 2022"
   subheading="Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary."
   size="small"
@@ -171,6 +220,17 @@ export const snippetsSmall = [
   <IcButton variant="primary" slot="interaction" size="small">Order now</IcButton>
   <IcButton variant="secondary" slot="interaction" size="small">Submit new flavour</IcButton>
 </IcHero>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -193,8 +253,9 @@ export const snippetsSmall = [
 
 export const snippetsSecondHeadingSearch = [
   {
-    language: "Web component",
-    snippet: `<ic-hero
+    technology: "Web component",
+    snippets: {
+      short: `<ic-hero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press."
   secondary-heading="The classics" 
@@ -202,10 +263,13 @@ export const snippetsSecondHeadingSearch = [
 >
   <ic-search-bar slot="interaction" label="Search for coffee" hide-label="true"></ic-search-bar>
 </ic-hero>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcHero
+    technology: "React",
+    snippets: {
+      short: `<IcHero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press."
   secondaryHeading="The classics" 
@@ -213,6 +277,17 @@ export const snippetsSecondHeadingSearch = [
 >
   <IcSearchBar slot="interaction" label="Search for coffee" hideLabel/>
 </IcHero>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -231,8 +306,9 @@ export const snippetsSecondHeadingSearch = [
 
 export const snippetsCard = [
   {
-    language: "Web component",
-    snippet: `<ic-hero 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-hero 
   heading="Everything I brew, I brew it for you" 
   subheading="This news is hot off the French press." 
   card-heading="Out now" 
@@ -254,10 +330,13 @@ export const snippetsCard = [
     }
   </style>
 </ic-hero>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcHero 
+    technology: "React",
+    snippets: {
+      short: `<IcHero 
   heading="Everything I brew, I brew it for you" 
   subheading="This news is hot off the French press." 
   cardHeading="Out now" 
@@ -277,6 +356,17 @@ export const snippetsCard = [
     }}
   />
 </IcHero>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -311,8 +401,9 @@ export const snippetsCard = [
 
 export const snippetsImage = [
   {
-    language: "Web component",
-    snippet: `<ic-hero
+    technology: "Web component",
+    snippets: {
+      short: `<ic-hero
   heading="Everything I brew, I brew it for you"
   subheading="This news is hot off the French press."
   aligned="full-width"
@@ -342,10 +433,13 @@ export const snippetsImage = [
     <polygon fill="#880088" points="943 900 1210 900 971 687" />
   </svg>
 </ic-hero>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcHero
+    technology: "React",
+    snippets: {
+      short: `<IcHero
     heading="Everything I brew, I brew it for you"
     subheading="This news is hot off the French press."
     aligned="full-width"
@@ -375,6 +469,17 @@ export const snippetsImage = [
       <polygon fill="#880088" points="943 900 1210 900 971 687" />
     </SlottedSVG>
   </IcHero>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/links/code.mdx b/src/content/structured/components/links/code.mdx
index 6752557ba..ff6b88a3f 100644
--- a/src/content/structured/components/links/code.mdx
+++ b/src/content/structured/components/links/code.mdx
@@ -25,12 +25,27 @@ import { MemoryRouter, NavLink } from "react-router-dom";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-link href="/components/link/code">About our coffees</ic-link>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-link href="/components/link/code">About our coffees</ic-link>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLink href="/components/link/code">About our coffees</IcLink>`,
+    technology: "React",
+    snippets: {
+      short: `<IcLink href="/components/link/code">About our coffees</IcLink>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -52,12 +67,27 @@ export const snippets = [
 
 export const snippetsIcon = [
   {
-    language: "Web component",
-    snippet: `<ic-link href="/" target="_blank">About our coffees</ic-link>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-link href="/" target="_blank">About our coffees</ic-link>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLink href="/" target="_blank">About our coffees</IcLink>`,
+    technology: "React",
+    snippets: {
+      short: `<IcLink href="/" target="_blank">About our coffees</IcLink>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -71,14 +101,29 @@ export const snippetsIcon = [
 
 export const snippetsLightDark = [
   {
-    language: "Web component",
-    snippet: `<ic-link href="/" appearance="dark" target="_blank">About our coffees</ic-link>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-link href="/" appearance="dark" target="_blank">About our coffees</ic-link>
 <ic-link href="/" appearance="light" target="_blank">About our coffees</ic-link>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLink href="/" appearance="dark" target="_blank">About our coffees</IcLink>
+    technology: "React",
+    snippets: {
+      short: `<IcLink href="/" appearance="dark" target="_blank">About our coffees</IcLink>
 <IcLink href="/" appearance="light" target="_blank">About our coffees</IcLink>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -108,8 +153,9 @@ export const snippetsLightDark = [
 
 export const withReactRouter = [
   {
-    language: "React",
-    snippet: `<MemoryRouter initialEntries={["/"]}>
+    technology: "React",
+    snippets: {
+      short: `<MemoryRouter initialEntries={["/"]}>
   <div style={{display: "flex", flexDirection: "row", gap: "8px"}}>
     <IcLink>
       <NavLink to="/" slot="router-item">Home</NavLink>
@@ -126,6 +172,17 @@ export const withReactRouter = [
   </IcSectionContainer>
 </MemoryRouter>
     `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/loading-indicators/code.mdx b/src/content/structured/components/loading-indicators/code.mdx
index d8d8f170a..dd04a8a5f 100644
--- a/src/content/structured/components/loading-indicators/code.mdx
+++ b/src/content/structured/components/loading-indicators/code.mdx
@@ -28,14 +28,29 @@ import { IcLoadingIndicator } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-loading-indicator type="circular" label="Loading..." />
+    technology: "Web component",
+    snippets: {
+      short: `<ic-loading-indicator type="circular" label="Loading..." />
 <ic-loading-indicator type="linear" label="Loading..." />`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLoadingIndicator type="circular" label="Loading..." />
+    technology: "React",
+    snippets: {
+      short: `<IcLoadingIndicator type="circular" label="Loading..." />
 <IcLoadingIndicator type="linear" label="Loading..." />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -57,18 +72,33 @@ export const snippets = [
 
 export const snippetsSizes = [
   {
-    language: "Web component",
-    snippet: `<ic-loading-indicator type="circular" label="Loading..." size="small"/>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-loading-indicator type="circular" label="Loading..." size="small"/>
 <ic-loading-indicator type="circular" label="Loading..." size="large"/>
 <ic-loading-indicator type="linear" label="Loading..." size="small"/>
 <ic-loading-indicator type="linear" label="Loading..." size="large"/>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLoadingIndicator type="circular" label="Loading..." size="small" />
+    technology: "React",
+    snippets: {
+      short: `<IcLoadingIndicator type="circular" label="Loading..." size="small" />
 <IcLoadingIndicator type="circular" label="Loading..." size="large" />
 <IcLoadingIndicator type="linear" label="Loading..." size="small" />
 <IcLoadingIndicator type="linear" label="Loading..." size="large" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -86,12 +116,27 @@ export const snippetsSizes = [
 
 export const snippetsIcon = [
   {
-    language: "Web component",
-    snippet: `<ic-loading-indicator size="icon"/>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-loading-indicator size="icon"/>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLoadingIndicator size="icon" />`,
+    technology: "React",
+    snippets: {
+      short: `<IcLoadingIndicator size="icon" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -103,14 +148,29 @@ export const snippetsIcon = [
 
 export const snippetsDeterminate = [
   {
-    language: "Web component",
-    snippet: `<ic-loading-indicator type="circular" label="Progress 30%" progress="30" min="0" max="100"/>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-loading-indicator type="circular" label="Progress 30%" progress="30" min="0" max="100"/>
 <ic-loading-indicator type="linear" label="Progress 30%" progress="30" min="0" max="100"/>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLoadingIndicator type="circular" label="Progress 30%" progress="30" min="0" max="100" />
+    technology: "React",
+    snippets: {
+      short: `<IcLoadingIndicator type="circular" label="Progress 30%" progress="30" min="0" max="100" />
 <IcLoadingIndicator type="linear" label="Progress 30%" progress="30" min="0" max="100" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -138,14 +198,29 @@ export const snippetsDeterminate = [
 
 export const snippetsLight = [
   {
-    language: "Web component",
-    snippet: `<ic-loading-indicator type="circular" name="Loading" appearance="light"></ic-loading-indicator>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-loading-indicator type="circular" name="Loading" appearance="light"></ic-loading-indicator>
 <ic-loading-indicator type="linear" name="Loading" appearance="light"></ic-loading-indicator>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLoadingIndicator type="circular" name="Loading" appearance="light" />
+    technology: "React",
+    snippets: {
+      short: `<IcLoadingIndicator type="circular" name="Loading" appearance="light" />
 <IcLoadingIndicator type="linear" name="Loading" appearance="light"/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -161,12 +236,27 @@ export const snippetsLight = [
 
 export const snippetsChangingLabel = [
   {
-    language: "Web component",
-    snippet: `<ic-loading-indicator type="circular" label="Loading.../Still loading..." label-duration="4000"></ic-loading-indicator>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-loading-indicator type="circular" label="Loading.../Still loading..." label-duration="4000"></ic-loading-indicator>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcLoadingIndicator type="circular" label="Loading.../Still loading..." labelDuration="4000" />`,
+    technology: "React",
+    snippets: {
+      short: `<IcLoadingIndicator type="circular" label="Loading.../Still loading..." labelDuration="4000" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/page-header/code.mdx b/src/content/structured/components/page-header/code.mdx
index 25d89d223..8657189d5 100644
--- a/src/content/structured/components/page-header/code.mdx
+++ b/src/content/structured/components/page-header/code.mdx
@@ -40,8 +40,9 @@ import { NavLink, MemoryRouter } from "react-router-dom";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-page-header heading="Latte recipe"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-page-header heading="Latte recipe"
     subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. "
     reverseOrder >
     <ic-chip slot="heading-adornment" label="BETA" size="large" />
@@ -67,10 +68,13 @@ export const snippets = [
       hideLabel
     />
     </ic-page-header>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPageHeader heading="Latte recipe"
+    technology: "React",
+    snippets: {
+      short: `<IcPageHeader heading="Latte recipe"
     subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. "
     reverseOrder 
   >
@@ -97,6 +101,17 @@ export const snippets = [
       hideLabel
     />
   </IcPageHeader>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -141,12 +156,27 @@ export const snippets = [
 
 export const snippetsSmall = [
   {
-    language: "Web component",
-    snippet: `<ic-page-header size="small" heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."></ic-page-header>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-page-header size="small" heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."></ic-page-header>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPageHeader size="small" heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." />`,
+    technology: "React",
+    snippets: {
+      short: `<IcPageHeader size="small" heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -162,8 +192,9 @@ export const snippetsSmall = [
 
 export const withBreadcrumbNavigation = [
   {
-    language: "Web component",
-    snippet: `<ic-page-header heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-page-header heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.">
   <ic-chip slot="heading-adornment" label="BETA" size="large"></ic-chip>
   <ic-breadcrumb-group slot="breadcrumbs">
     <ic-breadcrumb current="true" page-title="Drinks" href="#"></ic-breadcrumb>
@@ -176,10 +207,13 @@ export const withBreadcrumbNavigation = [
   </ic-breadcrumb-group>
 </ic-page-header>
     `,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPageHeader heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.">
+    technology: "React",
+    snippets: {
+      short: `<IcPageHeader heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.">
   <IcChip slot="heading-adornment" label="BETA" size="large" />
   <IcBreadcrumbGroup slot="breadcrumbs">
     <IcBreadcrumb pageTitle="Drinks" href="#" />
@@ -191,6 +225,17 @@ export const withBreadcrumbNavigation = [
   </IcBreadcrumbGroup>
 </IcPageHeader>
     `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -215,8 +260,9 @@ export const withBreadcrumbNavigation = [
 
 export const withActionsInputStepper = [
   {
-    language: "Web component",
-    snippet: `<ic-page-header heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." reverse-order="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-page-header heading="Latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." reverse-order="true">
   <ic-chip slot="heading-adornment" label="BETA" size="large"></ic-chip>
   <ic-button slot="actions" variant="primary">Create coffee</ic-button>
   <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
@@ -228,10 +274,13 @@ export const withActionsInputStepper = [
   <ic-text-field slot="input" placeholder="Search for ingredients…" label="Input" hide-label="true" />
 </ic-page-header>
     `,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPageHeader heading="latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." reverseOrder>
+    technology: "React",
+    snippets: {
+      short: `<IcPageHeader heading="latte recipe" subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." reverseOrder>
   <IcChip slot="heading-adornment" label="BETA" size="large" />
   <IcButton slot="actions" variant="primary">
     Create coffee
@@ -247,6 +296,17 @@ export const withActionsInputStepper = [
   <IcTextField slot="input" placeholder="Search for ingredients…" label="Input" hideLabel />
 </IcPageHeader>
     `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -288,8 +348,9 @@ export const withActionsInputStepper = [
 
 export const withActionsInputTabs = [
   {
-    language: "Web component",
-    snippet: `<ic-page-header 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-page-header 
   heading="Latte recipe" 
   subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." 
   reverse-order="true"
@@ -313,10 +374,13 @@ export const withActionsInputTabs = [
   </ic-navigation-item>
 </ic-page-header>
     `,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPageHeader 
+    technology: "React",
+    snippets: {
+      short: `<IcPageHeader 
   heading="Latte recipe" 
   subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam." 
   reverseOrder>
@@ -346,6 +410,17 @@ export const withActionsInputTabs = [
   />
 </IcPageHeader>
     `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -380,8 +455,9 @@ export const withActionsInputTabs = [
 
 export const withReactRouter = [
   {
-    language: "React",
-    snippet: `<MemoryRouter initialEntries={["/"]}>
+    technology: "React",
+    snippets: {
+      short: `<MemoryRouter initialEntries={["/"]}>
   <IcPageHeader
     heading="Latte recipe"
     subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."
@@ -427,6 +503,17 @@ export const withReactRouter = [
   </IcSectionContainer>
 </MemoryRouter>
     `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -486,8 +573,9 @@ export const withReactRouter = [
 
 export const withSlots = [
   {
-    language: "Web component",
-    snippet: `<ic-page-header>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-page-header>
   <ic-typography variant="h1" slot="heading">Latte recipe</ic-typography>
   <ic-typography slot="subheading">A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.</ic-typography>
   <ic-chip slot="heading-adornment" label="BETA" size="large"></ic-chip>
@@ -498,10 +586,13 @@ export const withSlots = [
   </ic-breadcrumb-group>
   <ic-text-field slot="input" placeholder="Search for ingredients…" label="Input" hide-label="true" />
 </ic-page-header>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPageHeader>
+    technology: "React",
+    snippets: {
+      short: `<IcPageHeader>
   <IcTypography variant="h1" slot="heading">
     Latte recipe
   </IcTypography>
@@ -522,6 +613,17 @@ export const withSlots = [
     hideLabel
   />
 </IcPageHeader>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/pagination/code.mdx b/src/content/structured/components/pagination/code.mdx
index d012bdd98..0ec066893 100644
--- a/src/content/structured/components/pagination/code.mdx
+++ b/src/content/structured/components/pagination/code.mdx
@@ -25,14 +25,29 @@ import { IcPagination } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination pages="15"></ic-pagination>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination pages="15"></ic-pagination>
 <ic-pagination pages="15" type="complex"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination pages={15} />
+    technology: "React",
+    snippets: {
+      short: `<IcPagination pages={15} />
 <IcPagination pages={15} type="complex" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -56,12 +71,27 @@ export const snippets = [
 
 export const hideFirstLast = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination hide-first-and-last-page-button="true" pages="15"></ic-pagination>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination hide-first-and-last-page-button="true" pages="15"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination hideFirstAndLastPageButton pages={15} />`,
+    technology: "React",
+    snippets: {
+      short: `<IcPagination hideFirstAndLastPageButton pages={15} />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -76,12 +106,27 @@ export const hideFirstLast = [
 
 export const hideCurrent = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination hide-current-page="true" pages="15"></ic-pagination>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination hide-current-page="true" pages="15"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination hideCurrentPage pages={15} />`,
+    technology: "React",
+    snippets: {
+      short: `<IcPagination hideCurrentPage pages={15} />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -96,14 +141,29 @@ export const hideCurrent = [
 
 export const appearance = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination appearance="dark" pages="15"></ic-pagination>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination appearance="dark" pages="15"></ic-pagination>
 <ic-pagination appearance="light" pages="15"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination appearance="dark" pages={15} />
+    technology: "React",
+    snippets: {
+      short: `<IcPagination appearance="dark" pages={15} />
 <IcPagination appearance="light" pages={15} />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -121,12 +181,27 @@ export const appearance = [
 
 export const boundaryAdjacent = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination type="complex" adjacent-count="2" boundary-count="2" pages="15"></ic-pagination>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination type="complex" adjacent-count="2" boundary-count="2" pages="15"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination type="complex" adjacentCount={2} boundaryCount={2} pages={15} />`,
+    technology: "React",
+    snippets: {
+      short: `<IcPagination type="complex" adjacentCount={2} boundaryCount={2} pages={15} />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -141,12 +216,27 @@ export const boundaryAdjacent = [
 
 export const disabled = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination type="complex" disabled="true" pages="12"></ic-pagination>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination type="complex" disabled="true" pages="12"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination type="complex" disabled pages={12} />`,
+    technology: "React",
+    snippets: {
+      short: `<IcPagination type="complex" disabled pages={12} />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -161,12 +251,27 @@ export const disabled = [
 
 export const label = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination label="Slide" pages="12"></ic-pagination>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination label="Slide" pages="12"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination label="Slide" pages={12} />`,
+    technology: "React",
+    snippets: {
+      short: `<IcPagination label="Slide" pages={12} />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -178,12 +283,27 @@ export const label = [
 
 export const defaultPage = [
   {
-    language: "Web component",
-    snippet: `<ic-pagination pages="12" default-page="4"></ic-pagination>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-pagination pages="12" default-page="4"></ic-pagination>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcPagination pages={12} defaultPage={4}/>`,
+    technology: "React",
+    snippets: {
+      short: `<IcPagination pages={12} defaultPage={4}/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/popover-menu/code.mdx b/src/content/structured/components/popover-menu/code.mdx
index fbbdd3912..96cb3d69a 100644
--- a/src/content/structured/components/popover-menu/code.mdx
+++ b/src/content/structured/components/popover-menu/code.mdx
@@ -26,8 +26,9 @@ import { useRef } from "react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-button 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button 
   id="button-1" 
   variant="icon"
   title="More information" 
@@ -66,10 +67,13 @@ export const snippets = [
     <ic-menu-item label="Delete" variant="destructive"></ic-menu-item>
   </ic-popover-menu>
 </div>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const popoverEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const popoverEl = useRef(null);
 const handleClick = () => {
   popoverEl.current.open = !popoverEl.current.open;
 };
@@ -105,6 +109,17 @@ return (
     </IcPopoverMenu>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -175,8 +190,9 @@ export const DemoPopover = () => {
 
 export const snippetsButtons = [
   {
-    language: "Web component",
-    snippet: `<ic-button 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button 
   id="button-2" 
   variant="icon"
   title="More information" 
@@ -224,10 +240,13 @@ export const snippetsButtons = [
     <ic-menu-item label="Log out" variant="destructive"></ic-menu-item>
   </ic-popover-menu>
 </div>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const popoverEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const popoverEl = useRef(null);
 const handleClick = () => {
   popoverEl.current.open = !popoverEl.current.open;
 };
@@ -275,6 +294,17 @@ return (
     </IcPopoverMenu>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -344,8 +374,9 @@ export const ButtonsPopover = () => {
 
 export const snippetsGroups = [
   {
-    language: "Web component",
-    snippet: `<ic-button 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button 
   id="button-3" 
   variant="icon"
   title="More information" 
@@ -381,10 +412,13 @@ export const snippetsGroups = [
     <ic-menu-group>
   </ic-popover-menu>
 </div>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const popoverEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const popoverEl = useRef(null);
 const handleClick = () => {
   popoverEl.current.open = !popoverEl.current.open;
 };
@@ -420,6 +454,17 @@ return (
     </IcPopoverMenu>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/radio/code.mdx b/src/content/structured/components/radio/code.mdx
index e981330f5..11d65f459 100644
--- a/src/content/structured/components/radio/code.mdx
+++ b/src/content/structured/components/radio/code.mdx
@@ -25,8 +25,9 @@ import { IcRadioGroup, IcRadioOption, IcTextField } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-radio-group name='radio-group-1' label="Add a free purchase with any hot drink">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-radio-group name='radio-group-1' label="Add a free purchase with any hot drink">
   <ic-radio-option value="crisps" label="Crisps"></ic-radio-option>
   <ic-radio-option
     value="cookie"
@@ -42,10 +43,13 @@ export const snippets = [
   const radioGroup = document.querySelector("[name='radio-group-1']");
   radioGroup.addEventListener('icChange', (ev) => console.log(ev.detail.value));
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcRadioGroup name='radio-group-1' label="Add a free purchase with any hot drink" onIcChange={(ev) => console.log(ev.detail.value)}>
+    technology: "React",
+    snippets: {
+      short: `<IcRadioGroup name='radio-group-1' label="Add a free purchase with any hot drink" onIcChange={(ev) => console.log(ev.detail.value)}>
   <IcRadioOption value="crisps" label="Crisps" />
   <IcRadioOption
     value="cookie"
@@ -56,6 +60,17 @@ export const snippets = [
   <IcRadioOption value="fruit" label="Banana" />
   <IcRadioOption value="No item" label="No thanks, just my coffee" />
 </IcRadioGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -91,8 +106,9 @@ export const snippets = [
 
 export const conditional = [
   {
-    language: "Web component",
-    snippet: `<ic-radio-group name='radio-group-2' label="Do you have any special requests?">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-radio-group name='radio-group-2' label="Do you have any special requests?">
     <ic-radio-option value="request" label="Yes, I want to modify my order">
       <ic-text-field
         slot="additional-field"
@@ -103,10 +119,13 @@ export const conditional = [
     </ic-radio-option>
     <ic-radio-option value="none" label="No, standard please"></ic-radio-option>
 </ic-radio-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcRadioGroup name='radio-group-2' label="Do you have any special requests?">
+    technology: "React",
+    snippets: {
+      short: `<IcRadioGroup name='radio-group-2' label="Do you have any special requests?">
     <IcRadioOption value="request" label="Yes, I want to modify my order">
       <IcTextField
         slot="additional-field"
@@ -116,6 +135,17 @@ export const conditional = [
     </IcRadioOption>
     <IcRadioOption value="none" label="No, standard please" />
 </IcRadioGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -136,8 +166,9 @@ export const conditional = [
 
 export const conditionalDynamic = [
   {
-    language: "Web component",
-    snippet: `<ic-radio-group name='radio-group-3' label="Do you have any special requests?">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-radio-group name='radio-group-3' label="Do you have any special requests?">
     <ic-radio-option value="request" label="Yes, I want to modify my order">
       <ic-text-field
         slot="additional-field"
@@ -148,10 +179,13 @@ export const conditionalDynamic = [
     </ic-radio-option>
     <ic-radio-option value="none" label="No, standard please"></ic-radio-option>
 </ic-radio-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcRadioGroup name='radio-group-3' label="Do you have any special requests?">
+    technology: "React",
+    snippets: {
+      short: `<IcRadioGroup name='radio-group-3' label="Do you have any special requests?">
     <IcRadioOption value="request" label="Yes, I want to modify my order">
       <IcTextField
         slot="additional-field"
@@ -161,6 +195,17 @@ export const conditionalDynamic = [
     </IcRadioOption>
     <IcRadioOption value="none" label="No, standard please" />
 </IcRadioGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -190,8 +235,9 @@ export const conditionalDynamic = [
 
 export const withHelperText = [
   {
-    language: "Web component",
-    snippet: `<ic-radio-group 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-radio-group 
   label="Do you have any special requests?" 
   helper-text="Let us know if you'd like an alternative to dairy milk."
   name='radio-group-4'
@@ -199,10 +245,13 @@ export const withHelperText = [
   <ic-radio-option value="request" label="Yes, I want to modify my order"></ic-radio-option>
   <ic-radio-option value="none" label="No, standard please"></ic-radio-option>
 </ic-radio-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcRadioGroup 
+    technology: "React",
+    snippets: {
+      short: `<IcRadioGroup 
     label="Do you have any special requests?" 
     helperText="Let us know if you'd like an alternative to dairy milk."
     name='radio-group-4'
@@ -210,6 +259,17 @@ export const withHelperText = [
   <IcRadioOption value="request" label="Yes, I want to modify my order" />
   <IcRadioOption value="none" label="No, standard please" />
 </IcRadioGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -228,8 +288,9 @@ export const withHelperText = [
 
 export const smallSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-radio-group 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-radio-group 
   label="Do you have any special requests?" 
   name='radio-group-5'
   size="small"
@@ -237,10 +298,13 @@ export const smallSnippet = [
   <ic-radio-option value="request" label="Yes, I want to modify my order"></ic-radio-option>
   <ic-radio-option value="none" label="No, standard please"></ic-radio-option>
 </ic-radio-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcRadioGroup 
+    technology: "React",
+    snippets: {
+      short: `<IcRadioGroup 
     label="Do you have any special requests?" 
     name='radio-group-5'
     size="small"
@@ -248,6 +312,17 @@ export const smallSnippet = [
   <IcRadioOption value="request" label="Yes, I want to modify my order" />
   <IcRadioOption value="none" label="No, standard please" />
 </IcRadioGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -266,18 +341,33 @@ export const smallSnippet = [
 
 export const withValidation = [
   {
-    language: "Web component",
-    snippet: `<ic-radio-group name='radio-group-6' label="Do you have any special requests?" validation-status="error" validation-text="An answer to this question is required" required="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-radio-group name='radio-group-6' label="Do you have any special requests?" validation-status="error" validation-text="An answer to this question is required" required="true">
   <ic-radio-option value="request" label="Yes, I want to modify my order"></ic-radio-option>
   <ic-radio-option value="none" label="No, standard please"></ic-radio-option>
 </ic-radio-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcRadioGroup name='radio-group-6' label="Do you have any special requests?" validationStatus="error" validationText="An answer to this question is required" required>
+    technology: "React",
+    snippets: {
+      short: `<IcRadioGroup name='radio-group-6' label="Do you have any special requests?" validationStatus="error" validationText="An answer to this question is required" required>
   <IcRadioOption value="request" label="Yes, I want to modify my order" />
   <IcRadioOption value="none" label="No, standard please" />
 </IcRadioGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/search-bar/code.mdx b/src/content/structured/components/search-bar/code.mdx
index 42b05ab6c..55fc401a3 100644
--- a/src/content/structured/components/search-bar/code.mdx
+++ b/src/content/structured/components/search-bar/code.mdx
@@ -25,8 +25,9 @@ import { IcSearchBar, IcTypography } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-search-bar label="What is your favourite coffee?"></ic-search-bar>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-search-bar label="What is your favourite coffee?"></ic-search-bar>
 <script>
   const searchBar = document.querySelector("ic-search-bar");
   searchBar.options = [
@@ -41,10 +42,13 @@ export const snippets = [
   searchBar.addEventListener('icSubmitSearch', (ev) => console.log(ev.detail.value))
   placeholder="Start typing to search…"
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSearchBar 
+    technology: "React",
+    snippets: {
+      short: `<IcSearchBar 
   label="What is your favourite coffee?"
   options={[
     { label: "Espresso", value: "espresso" },
@@ -58,6 +62,17 @@ export const snippets = [
   onIcSubmitSearch={(ev) => console.log(ev.detail.value)}
   placeholder="Start typing to search…"
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -88,8 +103,9 @@ export const snippets = [
 
 export const optionsNoFiltering = [
   {
-    language: "Web component",
-    snippet: `<ic-search-bar placeholder="Start typing to search…"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-search-bar placeholder="Start typing to search…"
   label="What is your favourite coffee?"
   disable-filter="true"
 >
@@ -108,10 +124,13 @@ export const optionsNoFiltering = [
     { label: "Mocha", value: "mocha" },
   ];
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSearchBar placeholder="Start typing to search…"
+    technology: "React",
+    snippets: {
+      short: `<IcSearchBar placeholder="Start typing to search…"
   label="What is your favourite coffee?"
   disableFilter
   options={[
@@ -125,6 +144,17 @@ export const optionsNoFiltering = [
 />
 <br/>
 <IcTypography>All options will be displayed as you type</IcTypography>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -155,8 +185,9 @@ export const optionsNoFiltering = [
 
 export const withHelperText = [
   {
-    language: "Web component",
-    snippet: `<ic-search-bar placeholder="Start typing to search…"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-search-bar placeholder="Start typing to search…"
   label="What is your favourite coffee?"
   helper-text="Coffee options will be displayed as you type."
 >
@@ -171,10 +202,13 @@ export const withHelperText = [
     { label: "Mocha", value: "mocha" },
   ];
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSearchBar placeholder="Start typing to search…"
+    technology: "React",
+    snippets: {
+      short: `<IcSearchBar placeholder="Start typing to search…"
   label="What is your favourite coffee?"
   helperText="Coffee options will be displayed as you type."
   options={[
@@ -186,6 +220,17 @@ export const withHelperText = [
     { label: "Mocha", value: "mocha" },
   ]}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -209,8 +254,9 @@ export const withHelperText = [
 
 export const withHiddenLabel = [
   {
-    language: "Web component",
-    snippet: `<ic-search-bar placeholder="Start typing to search…" label="What is your favourite coffee?" hide-label="true"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-search-bar placeholder="Start typing to search…" label="What is your favourite coffee?" hide-label="true"
 >
 </ic-search-bar>
 <script>
@@ -224,10 +270,13 @@ export const withHiddenLabel = [
     { label: "Mocha", value: "mocha" },
   ];
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSearchBar placeholder="Start typing to search…"
+    technology: "React",
+    snippets: {
+      short: `<IcSearchBar placeholder="Start typing to search…"
   label="What is your favourite coffee?"
   hideLabel
   options={[
@@ -239,6 +288,17 @@ export const withHiddenLabel = [
     { label: "Mocha", value: "mocha" },
   ]}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -262,8 +322,9 @@ export const withHiddenLabel = [
 
 export const disabled = [
   {
-    language: "Web component",
-    snippet: `<ic-search-bar label="What is your favourite coffee?" disabled="true"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-search-bar label="What is your favourite coffee?" disabled="true"
 >
 </ic-search-bar>
 <script>
@@ -277,10 +338,13 @@ export const disabled = [
     { label: "Mocha", value: "mocha" },
   ];
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSearchBar
+    technology: "React",
+    snippets: {
+      short: `<IcSearchBar
   label="What is your favourite coffee?"
   disabled
   options={[
@@ -292,6 +356,17 @@ export const disabled = [
     { label: "Mocha", value: "mocha" },
   ]}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -314,8 +389,9 @@ export const disabled = [
 
 export const sizeSmall = [
   {
-    language: "Web component",
-    snippet: `<ic-search-bar label="What is your favourite coffee?" size="small"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-search-bar label="What is your favourite coffee?" size="small"
 >
 </ic-search-bar>
 <script>
@@ -329,10 +405,13 @@ export const sizeSmall = [
     { label: "Mocha", value: "mocha" },
   ];
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSearchBar
+    technology: "React",
+    snippets: {
+      short: `<IcSearchBar
   label="What is your favourite coffee?"
   size="small"
   options={[
@@ -344,6 +423,17 @@ export const sizeSmall = [
     { label: "Mocha", value: "mocha" },
   ]}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -368,8 +458,9 @@ This example shows how to filter data asynchronously when the value in the input
 
 export const customFiltering = [
   {
-    language: "Web component",
-    snippet: `<ic-search-bar placeholder="Start typing to search…"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-search-bar placeholder="Start typing to search…"
   label="What is your favourite coffee?" 
   debounce="300" 
   disable-filter="true">
@@ -401,10 +492,13 @@ export const customFiltering = [
     }
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const mockData = [
+    technology: "React",
+    snippets: {
+      short: `const mockData = [
   { label: "Espresso", value: "espresso" },
   { label: "Double Espresso", value: "doubleespresso" },
   { label: "Flat White", value: "flatwhite" },
@@ -439,6 +533,17 @@ return(
   />
 </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/section-container/code.mdx b/src/content/structured/components/section-container/code.mdx
index 6efc6c4d2..a163c9218 100644
--- a/src/content/structured/components/section-container/code.mdx
+++ b/src/content/structured/components/section-container/code.mdx
@@ -28,24 +28,39 @@ import { IcChip, IcSectionContainer } from "@ukic/react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-section-container style="border:1px solid black">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-section-container style="border:1px solid black">
     <div style={{ display: "flex", justifyContent: "space-between", padding: "8px", gap: "8px" }}>
       <ic-chip label="Americano"/>
       <ic-chip label="Cappuccino"/>
       <ic-chip label="Latte"/>
     </div>
 </ic-section-container>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSectionContainer style={{ border: "1px solid black" }}>
+    technology: "React",
+    snippets: {
+      short: `<IcSectionContainer style={{ border: "1px solid black" }}>
     <div style={{ display: "flex", padding: "8px", gap: "8px" }}>
       <IcChip label="Americano"/>
       <IcChip label="Cappuccino"/>
       <IcChip label="Latte"/>
     </div>
 </IcSectionContainer>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -76,8 +91,9 @@ export const snippetsDefault = [
 
 export const snippetsCenter = [
   {
-    language: "Web component",
-    snippet: `<ic-section-container
+    technology: "Web component",
+    snippets: {
+      short: `<ic-section-container
   aligned="center"
   style="border:1px solid black"
 >
@@ -87,10 +103,13 @@ export const snippetsCenter = [
       <ic-chip label="Latte"/>
     </div>
 </ic-section-container>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSectionContainer
+    technology: "React",
+    snippets: {
+      short: `<IcSectionContainer
   aligned="center"
   style={{ border: "1px solid black" }}
 >
@@ -100,6 +119,17 @@ export const snippetsCenter = [
       <IcChip label="Latte"/>
   </div>
 </IcSectionContainer>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -124,8 +154,9 @@ export const snippetsCenter = [
 
 export const snippetsFullWidth = [
   {
-    language: "Web component",
-    snippet: `<ic-section-container
+    technology: "Web component",
+    snippets: {
+      short: `<ic-section-container
   aligned="full-width"
   style="border:1px solid black"
 >
@@ -135,10 +166,13 @@ export const snippetsFullWidth = [
       <ic-chip label="Latte"/>
   </div>
 </ic-section-container>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSectionContainer 
+    technology: "React",
+    snippets: {
+      short: `<IcSectionContainer 
   aligned="full-width"
   style={{ border: "1px solid black" }}
 >
@@ -148,6 +182,17 @@ export const snippetsFullWidth = [
       <IcChip label="Latte"/>
   </div>
 </IcSectionContainer>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -175,8 +220,9 @@ export const snippetsFullWidth = [
 
 export const snippetsFullHeight = [
   {
-    language: "Web component",
-    snippet: `<ic-section-container
+    technology: "Web component",
+    snippets: {
+      short: `<ic-section-container
   aligned="center"
   full-height="true"
   style="border:1px solid black"
@@ -187,10 +233,13 @@ export const snippetsFullHeight = [
       <ic-chip label="Latte"/>
   </div>
 </ic-section-container>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSectionContainer 
+    technology: "React",
+    snippets: {
+      short: `<IcSectionContainer 
   aligned="center"
   fullHeight
   style={{ border: "1px solid black" }}
@@ -201,6 +250,17 @@ export const snippetsFullHeight = [
       <IcChip label="Latte"/>
   </div>
 </IcSectionContainer>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/select/code.mdx b/src/content/structured/components/select/code.mdx
index 041b8c8f7..f1c5fa429 100644
--- a/src/content/structured/components/select/code.mdx
+++ b/src/content/structured/components/select/code.mdx
@@ -25,8 +25,9 @@ import { IcSelect } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option..." label="What is your favourite coffee?"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option..." label="What is your favourite coffee?"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -42,10 +43,13 @@ export const snippets = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option..." label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option..." label="What is your favourite coffee?"
   options={[
     { label: "Espresso", value: "espresso" },
     { label: "Double Espresso", value: "doubleespresso" },
@@ -56,6 +60,17 @@ export const snippets = [
   ]}
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -89,8 +104,9 @@ export const SelectExample = () => (
 
 export const snippetsWithExtras = [
   {
-    language: "Web component",
-    snippet: `<ic-select label="What is your favourite coffee?" placeholder="Select an option..." helper-text="Select one option from the list" show-clear-button="true" searchable="true"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select label="What is your favourite coffee?" placeholder="Select an option..." helper-text="Select one option from the list" show-clear-button="true" searchable="true"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -103,10 +119,13 @@ export const snippetsWithExtras = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect label="What is your favourite coffee?"
   options={[
     { label: "Cappuccino", value: "cappuccino", description: "Coffee frothed up with pressurised steam" },
     { label: "Americano", value: "americano", description: "Espresso coffee diluted with hot water" },
@@ -118,6 +137,17 @@ export const snippetsWithExtras = [
   searchable
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -157,8 +187,9 @@ export const SelectExampleWithExtras = () => (
 
 export const snippetsDisabled = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" disabled="true"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" disabled="true"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -171,10 +202,13 @@ export const snippetsDisabled = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
   options={[
     { label: "Cappuccino", value: "cappuccino" },
     { label: "Americano", value: "americano" },
@@ -183,6 +217,17 @@ export const snippetsDisabled = [
   disabled
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -208,8 +253,9 @@ export const SelectExampleDisabled = () => (
 
 export const snippetsOptionDisabled = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -222,10 +268,13 @@ export const snippetsOptionDisabled = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
   options={[
     { label: "Cappuccino", value: "cappuccino" },
     { label: "Americano", value: "americano", disabled: true },
@@ -233,6 +282,17 @@ export const snippetsOptionDisabled = [
   ]}
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -257,8 +317,9 @@ export const SelectExampleOptionsDisabled = () => (
 
 export const snippetsSmall = [
   {
-    language: "Web component",
-    snippet: `<ic-select label="What is your favourite coffee?" size="small"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select label="What is your favourite coffee?" size="small"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -274,10 +335,13 @@ export const snippetsSmall = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect label="What is your favourite coffee?"
   options={[
     { label: "Espresso", value: "espresso" },
     { label: "Double Espresso", value: "doubleespresso" },
@@ -289,6 +353,17 @@ export const snippetsSmall = [
   onIcChange={(event) => console.log(event.detail.value)}
   size="small"
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -316,8 +391,9 @@ export const SelectExampleSmall = () => (
 
 export const snippetsHideLabel = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" hide-label="true"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" hide-label="true"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -330,10 +406,13 @@ export const snippetsHideLabel = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
   options={[
     { label: "Espresso", value: "espresso" },
     { label: "Double Espresso", value: "doubleespresso" },
@@ -342,6 +421,17 @@ export const snippetsHideLabel = [
   hideLabel
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -367,8 +457,9 @@ export const SelectExampleHideLabel = () => (
 
 export const snippetsGroups = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -392,10 +483,13 @@ export const snippetsGroups = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
   options={[
     {
       label: "Fancy",
@@ -414,6 +508,17 @@ export const snippetsGroups = [
   ]}
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -449,8 +554,9 @@ export const SelectExampleGroups = () => (
 
 export const snippetsRecommended = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -466,10 +572,13 @@ export const snippetsRecommended = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
   options={[
     { label: "Espresso", value: "espresso" },
     { label: "Double Espresso", value: "doubleespresso", recommended: true },
@@ -480,6 +589,17 @@ export const snippetsRecommended = [
   ]}
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -511,8 +631,9 @@ export const SelectExampleRecommended = () => (
 
 export const snippetsValidation = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" 
     validation-status="success" 
     validation-text="Coffee available"
     value="americano"></ic-select>
@@ -569,10 +690,13 @@ export const snippetsValidation = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…" label="What is your favourite coffee?"
     value="americano"
   options={[
     { label: "Espresso", value: "espresso" },
@@ -614,6 +738,17 @@ export const snippetsValidation = [
   validationText="Coffee unavailable"
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -678,8 +813,9 @@ export const SelectExampleValidation = () => (
 
 export const snippetsSearchable = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" searchable="true"></ic-select>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…" label="What is your favourite coffee?" searchable="true"></ic-select>
 <script>
   const select = document.querySelector("ic-select");
   let option = "Cappuccino";
@@ -699,10 +835,13 @@ export const snippetsSearchable = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…"
   label="What is your favourite coffee?"
   options={[
     { label: "Cappuccino", value: "Cap" },
@@ -719,6 +858,17 @@ export const snippetsSearchable = [
   searchable
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -751,8 +901,9 @@ export const SearchableSelectExample = () => (
 
 export const snippetsSearchableWithDescriptions = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…"
   label="What is your favourite coffee?" 
   searchable="true" 
   include-description-in-search="true"
@@ -776,10 +927,13 @@ export const snippetsSearchableWithDescriptions = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…"
   label="What is your favourite coffee?"
   options={[
     { label: "Cappuccino", value: "Cap", description: "Coffee frothed up with pressurised steam" },
@@ -797,6 +951,17 @@ export const snippetsSearchableWithDescriptions = [
   includeDescriptionsInSearch
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -862,8 +1027,9 @@ export const SearchableSelectWithDescriptionsExample = () => (
 
 export const snippetsSearchableWithGroups = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…"
   label="What is your favourite coffee?" 
   searchable="true" 
   include-group-titles-in-search="true"
@@ -897,10 +1063,13 @@ export const snippetsSearchableWithGroups = [
     console.log(event.detail.value);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSelect placeholder="Select an option…"
+    technology: "React",
+    snippets: {
+      short: `<IcSelect placeholder="Select an option…"
   label="What is your favourite coffee?"
   options={[
     {
@@ -928,6 +1097,17 @@ export const snippetsSearchableWithGroups = [
   includeGroupTitlesInSearch
   onIcChange={(event) => console.log(event.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -973,8 +1153,9 @@ This example shows how to filter data asynchronously when the value in the selec
 
 export const customFiltering = [
   {
-    language: "Web component",
-    snippet: `<ic-select placeholder="Select an option…"
+    technology: "Web component",
+    snippets: {
+      short: `<ic-select placeholder="Select an option…"
   label="What is your favourite coffee?"
   searchable="true"
   debounce="300"
@@ -1024,10 +1205,13 @@ export const customFiltering = [
     }
   });            
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const mockData = [
+    technology: "React",
+    snippets: {
+      short: `const mockData = [
   { label: "Espresso", value: "Esp" },
   { label: "Double Espresso", value: "Dou" },
   { label: "Cappuccino", value: "Cap" },
@@ -1072,6 +1256,17 @@ return(
     />
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/side-nav/code.mdx b/src/content/structured/components/side-nav/code.mdx
index 296edc33d..175e15ff9 100644
--- a/src/content/structured/components/side-nav/code.mdx
+++ b/src/content/structured/components/side-nav/code.mdx
@@ -47,8 +47,9 @@ import { MemoryRouter, NavLink } from "react-router-dom";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-side-navigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-side-navigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
   <svg slot="app-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -85,10 +86,13 @@ export const snippetsDefault = [
     </svg>
   </ic-navigation-item>
 </ic-side-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
+    technology: "React",
+    snippets: {
+      short: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
   <SlottedSVG slot="app-icon" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -125,6 +129,17 @@ export const snippetsDefault = [
     </SlottedSVG>
   </IcNavigationItem>
 </IcSideNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -202,8 +217,9 @@ export const snippetsDefault = [
 
 export const snippetsStatic = [
   {
-    language: "Web component",
-    snippet: `<ic-side-navigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha" static="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-side-navigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha" static="true">
   <svg slot="app-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -240,10 +256,13 @@ export const snippetsStatic = [
     </svg>
   </ic-navigation-item>
 </ic-side-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha" static>
+    technology: "React",
+    snippets: {
+      short: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha" static>
   <SlottedSVG slot="app-icon" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -280,6 +299,17 @@ export const snippetsStatic = [
     </SlottedSVG>
   </IcNavigationItem>
 </IcSideNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -344,8 +374,9 @@ export const snippetsStatic = [
 
 export const snippetsExpanded = [
   {
-    language: "Web component",
-    snippet: `<ic-side-navigation
+    technology: "Web component",
+    snippets: {
+      short: `<ic-side-navigation
   app-title="ACME coffee shop"
   version="v0.0.7"
   status="Alpha"
@@ -386,10 +417,13 @@ export const snippetsExpanded = [
     </svg>
   </ic-navigation-item>
 </ic-side-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSideNavigation
+    technology: "React",
+    snippets: {
+      short: `<IcSideNavigation
   appTitle="ACME coffee shop"
   version="v0.0.7"
   status="Alpha"
@@ -429,6 +463,17 @@ export const snippetsExpanded = [
     </SlottedSVG>
   </IcNavigationItem>
 </IcSideNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -492,8 +537,9 @@ export const snippetsExpanded = [
 
 export const snippetsCollapsed = [
   {
-    language: "Web component",
-    snippet: `<ic-side-navigation app-title="ACME coffee shop" version="v0.0.0" status="Alpha" collapsed-icon-labels="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-side-navigation app-title="ACME coffee shop" version="v0.0.0" status="Alpha" collapsed-icon-labels="true">
   <svg slot="app-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -529,10 +575,13 @@ export const snippetsCollapsed = [
     </svg>
   </ic-navigation-item>
 </ic-side-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha" collapsedIconLabels>
+    technology: "React",
+    snippets: {
+      short: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha" collapsedIconLabels>
   <SlottedSVG slot="app-icon" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -568,6 +617,17 @@ export const snippetsCollapsed = [
     </SlottedSVG>
   </IcNavigationItem>
 </IcSideNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -630,8 +690,9 @@ export const snippetsCollapsed = [
 
 export const snippetsBadge = [
   {
-    language: "Web component",
-    snippet: `<ic-side-navigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-side-navigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
   <svg slot="app-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -670,10 +731,13 @@ export const snippetsBadge = [
     </svg>
   </ic-navigation-item>
 </ic-side-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
+    technology: "React",
+    snippets: {
+      short: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
   <SlottedSVG slot="app-icon" viewBox="0 0 24 24">
     <title>coffee-outline</title>
     <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
@@ -712,6 +776,17 @@ export const snippetsBadge = [
     </SlottedSVG>
   </IcNavigationItem>
 </IcSideNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -796,8 +871,9 @@ npm i @mdi/js
 
 export const withMDIicons = [
   {
-    language: "React",
-    snippet: `// importing Material Design icons
+    technology: "React",
+    snippets: {
+      short: `// importing Material Design icons
 import { 
   mdiCoffeeOutline, 
   mdiHome,
@@ -843,6 +919,17 @@ import {
     <SlottedSVG slot="icon" path={mdiCogOutline} viewBox="0 0 24 24" />
   </IcNavigationItem>
 </IcSideNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -905,8 +992,9 @@ The following example also demonstrates using a slotted app title link.
 
 export const withReactRouter = [
   {
-    language: "React",
-    snippet: `<MemoryRouter initialEntries={["/"]}>
+    technology: "React",
+    snippets: {
+      short: `<MemoryRouter initialEntries={["/"]}>
   <div style={{ display: "flex", flexDirection: "row"}}>
     <IcSideNavigation
     version="v0.0.7"
@@ -961,6 +1049,17 @@ export const withReactRouter = [
     </main>
   </div>
 </MemoryRouter>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -1066,8 +1165,9 @@ Fixed side navigation places the side navigation to the viewport.
 
 export const basicLayoutFixedViewport = [
   {
-    language: "Web component",
-    snippet: `// Inline styling added for verboseness
+    technology: "Web component",
+    snippets: {
+      short: `// Inline styling added for verboseness
 <div style="display: flex; height:100%;">
   <ic-side-navigation
     app-title="Application Name"
@@ -1165,10 +1265,13 @@ export const basicLayoutFixedViewport = [
     <ic-classification-banner classification="official"></ic-classification-banner>
   </div>
 </div>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `// Inline styling added for verboseness
+    technology: "React",
+    snippets: {
+      short: `// Inline styling added for verboseness
 <div style={{display: 'flex', height: '100%'}}>
   <IcSideNavigation
     appTitle="Application Name"
@@ -1266,6 +1369,17 @@ export const basicLayoutFixedViewport = [
     <IcClassificationBanner classification="official"></IcClassificationBanner>
   </div>
 </div>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/skeleton/code.mdx b/src/content/structured/components/skeleton/code.mdx
index 25046981f..89f500fd4 100644
--- a/src/content/structured/components/skeleton/code.mdx
+++ b/src/content/structured/components/skeleton/code.mdx
@@ -31,20 +31,35 @@ import {
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-skeleton variant="circle"></ic-skeleton>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-skeleton variant="circle"></ic-skeleton>
 <ic-typography variant="caption">
   <ic-skeleton variant="text"></ic-skeleton>
 </ic-typography>
 <ic-skeleton></ic-skeleton>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSkeleton variant="circle" />
+    technology: "React",
+    snippets: {
+      short: `<IcSkeleton variant="circle" />
 <IcTypography variant="caption">
   <IcSkeleton variant="text" />
 </IcTypography>
 <IcSkeleton />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -68,17 +83,32 @@ export const snippets = [
 
 export const snippetsInherited = [
   {
-    language: "Web component",
-    snippet: `<ic-skeleton><div style="height:200px;width:450px;">Test text</div></ic-skeleton>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-skeleton><div style="height:200px;width:450px;">Test text</div></ic-skeleton>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSkeleton>
+    technology: "React",
+    snippets: {
+      short: `<IcSkeleton>
   <div style={{
   height: "200px",
   width: "450px"
   }}>Test text</div>
 </IcSkeleton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -99,17 +129,21 @@ export const snippetsInherited = [
 
 export const snippetsSetWidthAndHeight = [
   {
-    language: "Web component",
-    snippet: `<ic-typography variant="h4">Height and width set with styles</ic-typography>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-typography variant="h4">Height and width set with styles</ic-typography>
 <ic-skeleton style="height:200px;width:200px;"></ic-skeleton>
 <ic-typography variant="h4">Height set with styles</ic-typography>
 <ic-skeleton style="height:75px;"></ic-skeleton>
 <ic-typography variant="h4">Width set with styles</ic-typography>
 <ic-skeleton style="width:450px;"></ic-skeleton>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTypography variant="h4">Height and width set with styles</IcTypography>
+    technology: "React",
+    snippets: {
+      short: `<IcTypography variant="h4">Height and width set with styles</IcTypography>
 <IcSkeleton style={{
 height: "200px",
 width: "200px"
@@ -122,6 +156,17 @@ width: "200px"
 <IcSkeleton style={{
   width: "450px"
 }} />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -153,20 +198,35 @@ width: "200px"
 
 export const snippetsLight = [
   {
-    language: "Web component",
-    snippet: `<ic-skeleton variant="circle" appearance="light"></ic-skeleton>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-skeleton variant="circle" appearance="light"></ic-skeleton>
 <ic-typography variant="caption">
   <ic-skeleton variant="text" appearance="light"></ic-skeleton>
 </ic-typography>
 <ic-skeleton appearance="light"></ic-skeleton>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSkeleton variant="circle" appearance="light" />
+    technology: "React",
+    snippets: {
+      short: `<IcSkeleton variant="circle" appearance="light" />
 <IcTypography variant="caption">
   <IcSkeleton variant="text" appearance="light" />
 </IcTypography>
 <IcSkeleton appearance="light" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -184,8 +244,9 @@ export const snippetsLight = [
 
 export const snippetsInCard = [
   {
-    language: "Web component",
-    snippet: `<div>
+    technology: "Web component",
+    snippets: {
+      short: `<div>
       <div id="content-container"></div>
       <br />
       <ic-button variant="primary" id="reload">
@@ -281,10 +342,13 @@ const loaded = () => {
         }, 3000);
       });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const loading = () => {
+    technology: "React",
+    snippets: {
+      short: `const loading = () => {
   return (
     <IcCard
       heading="Coffee"
@@ -401,6 +465,17 @@ const loaded = () => {
     </div>
   );
 };`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/status-tags/code.mdx b/src/content/structured/components/status-tags/code.mdx
index 9a6215a5c..18092a9c9 100644
--- a/src/content/structured/components/status-tags/code.mdx
+++ b/src/content/structured/components/status-tags/code.mdx
@@ -21,22 +21,35 @@ tabs:
 
 import { IcStatusTag } from "@ukic/react";
 
-## Component demo
-
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-status-tag label="Neutral" status="neutral"></ic-status-tag>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-status-tag label="Neutral" status="neutral"></ic-status-tag>
 <ic-status-tag label="Success" status="success"></ic-status-tag>
 <ic-status-tag label="Warning" status="warning"></ic-status-tag>
 <ic-status-tag label="Error" status="danger"></ic-status-tag>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStatusTag label="Neutral" status="neutral"/>
+    technology: "React",
+    snippets: {
+      short: `<IcStatusTag label="Neutral" status="neutral"/>
 <IcStatusTag label="Success" status="success"/>
 <IcStatusTag label="Warning" status="warning"/>
 <IcStatusTag label="Error" status="danger"/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -57,18 +70,33 @@ export const snippetsDefault = [
 
 export const snippetsEmphasis = [
   {
-    language: "Web component",
-    snippet: `<ic-status-tag label="Neutral" status="neutral" variant="outlined"></ic-status-tag>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-status-tag label="Neutral" status="neutral" variant="outlined"></ic-status-tag>
 <ic-status-tag label="Success" status="success" variant="outlined"></ic-status-tag>
 <ic-status-tag label="Warning" status="warning" variant="outlined"></ic-status-tag>
 <ic-status-tag label="Error" status="danger" variant="outlined"></ic-status-tag>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStatusTag label="Neutral" status="neutral" variant="outlined" />
+    technology: "React",
+    snippets: {
+      short: `<IcStatusTag label="Neutral" status="neutral" variant="outlined" />
 <IcStatusTag label="Success" status="success" variant="outlined" />
 <IcStatusTag label="Warning" status="warning" variant="outlined" />
 <IcStatusTag label="Error" status="danger" variant="outlined" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -83,18 +111,33 @@ export const snippetsEmphasis = [
 
 export const snippetsSmall = [
   {
-    language: "Web component",
-    snippet: `<ic-status-tag label="Neutral" status="neutral" size="small"></ic-status-tag>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-status-tag label="Neutral" status="neutral" size="small"></ic-status-tag>
 <ic-status-tag label="Success" status="success" size="small"></ic-status-tag>
 <ic-status-tag label="Warning" status="warning" size="small"></ic-status-tag>
 <ic-status-tag label="Error" status="danger" size="small"></ic-status-tag>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStatusTag label="Neutral" status="neutral" size="small" />
+    technology: "React",
+    snippets: {
+      short: `<IcStatusTag label="Neutral" status="neutral" size="small" />
 <IcStatusTag label="Success" status="success" size="small" />
 <IcStatusTag label="Warning" status="warning" size="small" />
 <IcStatusTag label="Error" status="danger" size="small" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/stepper/code.mdx b/src/content/structured/components/stepper/code.mdx
index bb1a53ce4..4fdf321fe 100644
--- a/src/content/structured/components/stepper/code.mdx
+++ b/src/content/structured/components/stepper/code.mdx
@@ -25,20 +25,35 @@ import { IcStepper, IcStep } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-stepper>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-stepper>
     <ic-step step-title="Order coffee" step-type="completed"></ic-step>
     <ic-step step-title="Pay for order" step-type="current"></ic-step>
     <ic-step step-title="Collect" step-type="disabled"></ic-step>
 </ic-stepper>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStepper>
+    technology: "React",
+    snippets: {
+      short: `<IcStepper>
     <IcStep stepTitle="Order coffee" stepType="completed" />
     <IcStep stepTitle="Pay for order" stepType="current" />
     <IcStep stepTitle="Collect" stepType="disabled" />
 </IcStepper>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -64,20 +79,35 @@ export const snippets = [
 
 export const compactStepper = [
   {
-    language: "Web component",
-    snippet: `<ic-stepper variant="compact">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-stepper variant="compact">
   <ic-step step-title="Order coffee" step-type="completed"></ic-step>
   <ic-step step-title="Pay for order" step-type="current"></ic-step>
   <ic-step step-title="Collect" step-type="disabled"></ic-step>
 </ic-stepper>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStepper variant="compact">
+    technology: "React",
+    snippets: {
+      short: `<IcStepper variant="compact">
   <IcStep stepTitle="Order coffee" stepType="completed" />
   <IcStep stepTitle="Pay for order" stepType="current" />
   <IcStep stepTitle="Collect" stepType="disabled" />
 </IcStepper>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -93,20 +123,35 @@ export const compactStepper = [
 
 export const leftAligned = [
   {
-    language: "Web component",
-    snippet: `<ic-stepper aligned="left">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-stepper aligned="left">
   <ic-step step-title="Order coffee" step-type="completed"></ic-step>
   <ic-step step-title="Pay for order" step-type="current"></ic-step>
   <ic-step step-title="Collect" step-type="disabled"></ic-step>
 </ic-stepper>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStepper aligned="left">
+    technology: "React",
+    snippets: {
+      short: `<IcStepper aligned="left">
   <IcStep stepTitle="Order coffee" stepType="completed" />
   <IcStep stepTitle="Pay for order" stepType="current" />
   <IcStep stepTitle="Collect" stepType="disabled" />
 </IcStepper>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -122,20 +167,35 @@ export const leftAligned = [
 
 export const hiddenStepInfo = [
   {
-    language: "Web component",
-    snippet: `<ic-stepper hide-step-info="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-stepper hide-step-info="true">
   <ic-step step-title="Order coffee" step-type="completed"></ic-step>
   <ic-step step-title="Pay for order" step-type="current"></ic-step>
   <ic-step step-title="Collect" step-type="disabled"></ic-step>
 </ic-stepper>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStepper hideStepInfo>
+    technology: "React",
+    snippets: {
+      short: `<IcStepper hideStepInfo>
   <IcStep stepTitle="Order coffee" stepType="completed" />
   <IcStep stepTitle="Pay for order" stepType="current" />
   <IcStep stepTitle="Collect" stepType="disabled" />
 </IcStepper>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -151,8 +211,9 @@ export const hiddenStepInfo = [
 
 export const withSubtitles = [
   {
-    language: "Web component",
-    snippet: `<ic-stepper>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-stepper>
   <ic-step step-title="Order coffee" step-type="completed"></ic-step>
   <ic-step 
     step-title="Customise your order" 
@@ -168,10 +229,13 @@ export const withSubtitles = [
   </ic-step>
   <ic-step step-title="Collect" step-type="disabled"></ic-step>
 </ic-stepper>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStepper>
+    technology: "React",
+    snippets: {
+      short: `<IcStepper>
   <IcStep stepTitle="Order coffee" stepType="completed" />
   <IcStep 
     stepTitle="Customise your order" 
@@ -185,6 +249,17 @@ export const withSubtitles = [
   />
   <IcStep stepTitle="Collect" stepType="disabled"/>
 </IcStepper>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -209,20 +284,35 @@ export const withSubtitles = [
 
 export const customConnectorWidth = [
   {
-    language: "Web component",
-    snippet: `<ic-stepper connector-width="150">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-stepper connector-width="150">
   <ic-step step-title="Order coffee" step-type="completed"></ic-step>
   <ic-step step-title="Pay for order" step-type="current"></ic-step>
   <ic-step step-title="Collect" step-type="disabled"></ic-step>
 </ic-stepper>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcStepper aligned="left" connectorWidth={150}>
+    technology: "React",
+    snippets: {
+      short: `<IcStepper aligned="left" connectorWidth={150}>
   <IcStep stepTitle="Order coffee" stepType="completed" />
   <IcStep stepTitle="Pay for order" stepType="current" />
   <IcStep stepTitle="Collect" stepType="disabled" />
 </IcStepper>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/switch/code.mdx b/src/content/structured/components/switch/code.mdx
index 22e75fe30..e5a3438af 100644
--- a/src/content/structured/components/switch/code.mdx
+++ b/src/content/structured/components/switch/code.mdx
@@ -25,8 +25,9 @@ import { IcSwitch } from "@ukic/react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-switch label="Coffee preferences"></ic-switch>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-switch label="Coffee preferences"></ic-switch>
 <script>
   const switchEl = document.querySelector('ic-switch');
   switchEl.addEventListener('icChange', (ev) => {
@@ -36,16 +37,30 @@ export const snippetsDefault = [
     })
   })
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSwitch
+    technology: "React",
+    snippets: {
+      short: `<IcSwitch
   label="Coffee preferences"
   onIcChange={(ev) => console.log({ 
     checked: ev.detail.checked, 
     value: ev.detail.value
   })}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -71,12 +86,27 @@ export const snippetsDefault = [
 
 export const snippetsState = [
   {
-    language: "Web component",
-    snippet: `<ic-switch label="Coffee preferences" show-state="true" ></ic-switch>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-switch label="Coffee preferences" show-state="true" ></ic-switch>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSwitch label="Coffee preferences" showState/>`,
+    technology: "React",
+    snippets: {
+      short: `<IcSwitch label="Coffee preferences" showState/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -88,12 +118,27 @@ export const snippetsState = [
 
 export const snippetsSmall = [
   {
-    language: "Web component",
-    snippet: `<ic-switch label="Coffee preferences" show-state="true" size="small"></ic-switch>`,
+    technology: "Web component",
+    snippets: {
+      short: `<ic-switch label="Coffee preferences" show-state="true" size="small"></ic-switch>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSwitch label="Coffee preferences" showState size="small"/>`,
+    technology: "React",
+    snippets: {
+      short: `<IcSwitch label="Coffee preferences" showState size="small"/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -105,14 +150,29 @@ export const snippetsSmall = [
 
 export const snippetsDisabled = [
   {
-    language: "Web component",
-    snippet: `<ic-switch label="Coffee preferences" show-state="true" disabled="true"></ic-switch>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-switch label="Coffee preferences" show-state="true" disabled="true"></ic-switch>
 <ic-switch label="Coffee preferences" show-state="true" disabled="true" checked="true"></ic-switch>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSwitch label="Coffee preferences" showState disabled/>
+    technology: "React",
+    snippets: {
+      short: `<IcSwitch label="Coffee preferences" showState disabled/>
 <IcSwitch label="Coffee preferences" showState disabled checked/>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -127,8 +187,9 @@ export const snippetsDisabled = [
 
 export const snippetsHelperAndAdornment = [
   {
-    language: "Web component",
-    snippet: `<ic-switch label="Coffee preferences" helper-text="Choose your coffee preferences">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-switch label="Coffee preferences" helper-text="Choose your coffee preferences">
   <svg
     slot="right-adornment"
     width="24"
@@ -140,10 +201,13 @@ export const snippetsHelperAndAdornment = [
      <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
   </svg>
 </ic-switch>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcSwitch label="Coffee preferences" helperText="Choose your coffee preferences">
+    technology: "React",
+    snippets: {
+      short: `<IcSwitch label="Coffee preferences" helperText="Choose your coffee preferences">
   <SlottedSVG
     slot="right-adornment"
     width="24"
@@ -155,6 +219,17 @@ export const snippetsHelperAndAdornment = [
     <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/>
   </SlottedSVG>
 </IcSwitch>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/tabs/code.mdx b/src/content/structured/components/tabs/code.mdx
index 113d0b8aa..633b0418f 100644
--- a/src/content/structured/components/tabs/code.mdx
+++ b/src/content/structured/components/tabs/code.mdx
@@ -25,8 +25,9 @@ import { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-tab-context>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tab-context>
   <ic-tab-group label="Example tab group">
     <ic-tab>Ingredients</ic-tab>
     <ic-tab>Method</ic-tab>
@@ -40,10 +41,13 @@ export const snippets = [
   const tabContext = document.querySelector('ic-tab-context');
   tabContext.addEventListener('icTabSelect', (ev) => console.log(ev.detail.tabIndex))
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTabContext onIcTabSelect={(ev) => console.log(ev.detail.tabIndex)}>
+    technology: "React",
+    snippets: {
+      short: `<IcTabContext onIcTabSelect={(ev) => console.log(ev.detail.tabIndex)}>
   <IcTabGroup label="Example tab group">
     <IcTab>Ingredients</IcTab>
     <IcTab>Method</IcTab>
@@ -53,6 +57,17 @@ export const snippets = [
   <IcTabPanel>Tab Two - Method</IcTabPanel>
   <IcTabPanel>Tab Three - History</IcTabPanel>
 </IcTabContext>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -91,8 +106,9 @@ export const snippets = [
 
 export const withIcons = [
   {
-    language: "Web component",
-    snippet: `<ic-tab-context>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tab-context>
   <ic-tab-group label="Example tab group">
     <ic-tab>
       Ingredients
@@ -138,10 +154,13 @@ export const withIcons = [
   <ic-tab-panel>Tab Two - Method</ic-tab-panel>
   <ic-tab-panel>Tab Three - History</ic-tab-panel>
 </ic-tab-context>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTabContext>
+    technology: "React",
+    snippets: {
+      short: `<IcTabContext>
     <IcTabGroup label="Example tab group">
       <IcTab>
         Ingredients
@@ -187,6 +206,17 @@ export const withIcons = [
     <IcTabPanel>Tab Two - Method</IcTabPanel>
     <IcTabPanel>Tab Three - History</IcTabPanel>
   </IcTabContext>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -243,8 +273,9 @@ export const withIcons = [
 
 export const disabled = [
   {
-    language: "Web component",
-    snippet: `<ic-tab-context>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tab-context>
   <ic-tab-group label="Example tab group">
     <ic-tab>Ingredients</ic-tab>
     <ic-tab disabled="true">Method</ic-tab>
@@ -254,10 +285,13 @@ export const disabled = [
   <ic-tab-panel>Tab Two - Method</ic-tab-panel>
   <ic-tab-panel>Tab Three - History</ic-tab-panel>
 </ic-tab-context>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTabContext>
+    technology: "React",
+    snippets: {
+      short: `<IcTabContext>
   <IcTabGroup label="Example tab group">
     <IcTab>Ingredients</IcTab>
     <IcTab disabled>Method</IcTab>
@@ -267,6 +301,17 @@ export const disabled = [
   <IcTabPanel>Tab Two - Method</IcTabPanel>
   <IcTabPanel>Tab Three - History</IcTabPanel>
 </IcTabContext>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -287,8 +332,9 @@ export const disabled = [
 
 export const light = [
   {
-    language: "Web component",
-    snippet: `<ic-tab-context appearance="light">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tab-context appearance="light">
   <ic-tab-group label="Example tab group">
     <ic-tab>Ingredients</ic-tab>
     <ic-tab>Method</ic-tab>
@@ -298,10 +344,13 @@ export const light = [
   <ic-tab-panel>Tab Two - Method</ic-tab-panel>
   <ic-tab-panel>Tab Three - History</ic-tab-panel>
 </ic-tab-context>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTabContext appearance="light">
+    technology: "React",
+    snippets: {
+      short: `<IcTabContext appearance="light">
   <IcTabGroup label="Example tab group">
     <IcTab>Ingredients</IcTab>
     <IcTab>Method</IcTab>
@@ -311,6 +360,17 @@ export const light = [
   <IcTabPanel>Tab Two - Method</IcTabPanel>
   <IcTabPanel>Tab Three - History</IcTabPanel>
 </IcTabContext>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -331,8 +391,9 @@ export const light = [
 
 export const compact = [
   {
-    language: "Web component",
-    snippet: `<ic-tab-context class="tabs">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tab-context class="tabs">
     <ic-tab-group label="Example tab group">
       <ic-tab>Ingredients</ic-tab>
       <ic-tab>Method</ic-tab>
@@ -354,10 +415,13 @@ export const compact = [
     }
   </style>
 </ic-tab-context>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const compactStyle = {
+    technology: "React",
+    snippets: {
+      short: `const compactStyle = {
       width: "60%",
       marginLeft: "auto",
       marginRight: "auto",
@@ -380,6 +444,17 @@ return (
     </IcTabContext>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -404,8 +479,9 @@ return (
 
 export const nested = [
   {
-    language: "Web component",
-    snippet: `<ic-tab-context>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tab-context>
   <ic-tab-group label="Example tab group">
     <ic-tab>Ingredients</ic-tab>
     <ic-tab>Method</ic-tab>
@@ -426,10 +502,13 @@ export const nested = [
   <ic-tab-panel>Outer Tab Panel Two - Method</ic-tab-panel>
   <ic-tab-panel>Outer Tab Panel Three - History</ic-tab-panel>
 </ic-tab-context>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTabContext>
+    technology: "React",
+    snippets: {
+      short: `<IcTabContext>
   <IcTabGroup label="Example tab group">
     <IcTab>Ingredients</IcTab>
     <IcTab>Method</IcTab>
@@ -450,6 +529,17 @@ export const nested = [
   <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>
   <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>
 </IcTabContext>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/text-field/code.mdx b/src/content/structured/components/text-field/code.mdx
index 72780e2b5..ebe25d97c 100644
--- a/src/content/structured/components/text-field/code.mdx
+++ b/src/content/structured/components/text-field/code.mdx
@@ -25,8 +25,9 @@ import { IcTextField } from "@ukic/react";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-text-field 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-text-field 
     label="What is your favourite coffee?" 
     placeholder="Please enter…" 
     helper-text="Such as Arabica, Robusta or Liberica">
@@ -35,15 +36,29 @@ export const snippetsDefault = [
   const textField = document.querySelector('ic-text-field');
   textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTextField 
+    technology: "React",
+    snippets: {
+      short: `<IcTextField 
   label="What is your favourite coffee?" 
   placeholder="Please enter…" 
   helperText="Such as Arabica, Robusta or Liberica"
   onIcChange={(ev) => console.log(ev.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -66,8 +81,9 @@ export const snippetsDefault = [
 
 export const snippetsIconValueMaxLength = [
   {
-    language: "Web component",
-    snippet: `<ic-text-field 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-text-field 
   max-length="25" 
   value="Arabica" 
   label="What is your favourite coffee?" 
@@ -86,10 +102,13 @@ export const snippetsIconValueMaxLength = [
     <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z" />
   </svg>
 </ic-text-field>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTextField 
+    technology: "React",
+    snippets: {
+      short: `<IcTextField 
   maxLength={25} 
   value="Arabica" 
   label="What is your favourite coffee?" 
@@ -108,6 +127,17 @@ export const snippetsIconValueMaxLength = [
     <path d="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z" />
   </SlottedSVG>
 </IcTextField>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -137,8 +167,9 @@ export const snippetsIconValueMaxLength = [
 
 export const snippetsDisabled = [
   {
-    language: "Web component",
-    snippet: `<ic-text-field 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-text-field 
     label="What is your favourite coffee?" 
     required="true" 
     placeholder="Please enter…" 
@@ -155,10 +186,13 @@ export const snippetsDisabled = [
     <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z" />
   </svg>
 </ic-text-field>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTextField 
+    technology: "React",
+    snippets: {
+      short: `<IcTextField 
     label="What is your favourite coffee?" 
     required 
     placeholder="Please enter…" 
@@ -175,6 +209,17 @@ export const snippetsDisabled = [
     <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z" />
   </SlottedSVG>
 </IcTextField>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -203,8 +248,9 @@ export const snippetsDisabled = [
 
 export const snippetsSmall = [
   {
-    language: "Web component",
-    snippet: `<ic-text-field 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-text-field 
     label="What is your favourite coffee?" 
     placeholder="Please enter…" 
     size="small">
@@ -213,15 +259,29 @@ export const snippetsSmall = [
   const textField = document.querySelector('ic-text-field');
   textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTextField 
+    technology: "React",
+    snippets: {
+      short: `<IcTextField 
   label="What is your favourite coffee?" 
   placeholder="Please enter…" 
   size="small"
   onIcChange={(ev) => console.log(ev.detail.value)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -238,8 +298,9 @@ export const snippetsSmall = [
 
 export const snippetsValidation = [
   {
-    language: "Web component",
-    snippet: `<ic-text-field 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-text-field 
     validation-status="success" 
     validation-text="Good choice!" 
     value="Arabica" max-length="25" 
@@ -277,10 +338,13 @@ export const snippetsValidation = [
   placeholder="Please enter…" 
   helper-text="Such as Arabica, Robusta or Liberica">
 </ic-text-field>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTextField 
+    technology: "React",
+    snippets: {
+      short: `<IcTextField 
     maxLength={25} 
     value="Arabica" 
     label="What is your favourite coffee?" 
@@ -317,6 +381,17 @@ export const snippetsValidation = [
   helperText="Such as Arabica, Robusta or Liberica" 
   validationStatus="error" 
   validationText="Now it has really gone to (coffee) pot" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -372,8 +447,9 @@ In this example, an error message will display when the input is either below th
 
 export const snippetsMinMax = [
   {
-    language: "Web component",
-    snippet: `<ic-text-field
+    technology: "Web component",
+    snippets: {
+      short: `<ic-text-field
   label="How many coffees do you want?"
   helper-text="Our coffee machines have a maximum capacity of 4 coffees at a time."
   placeholder="Please enter…" 
@@ -384,10 +460,13 @@ export const snippetsMinMax = [
   value="6"
 >
 </ic-text-field>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTextField
+    technology: "React",
+    snippets: {
+      short: `<IcTextField
   label="How many coffees do you want?"
   helperText="Our coffee machines have a maximum capacity of 4 coffees at a time."
   placeholder="Please enter…" 
@@ -397,6 +476,17 @@ export const snippetsMinMax = [
   max="4"
   value="6"
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -417,23 +507,38 @@ export const snippetsMinMax = [
 
 export const snippetsTextArea = [
   {
-    language: "Web component",
-    snippet: `<ic-text-field 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-text-field 
     rows="6"
     resize="true" 
     label="What is your favourite coffee?" 
     placeholder="Please enter…" 
     helper-text="Such as Arabica, Robusta or Liberica">
 </ic-text-field>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTextField 
+    technology: "React",
+    snippets: {
+      short: `<IcTextField 
     rows={6} 
     resize 
     label="What is your favourite coffee?" 
     placeholder="Please enter…" 
     helperText="Such as Arabica, Robusta or Liberica" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/toasts/code.mdx b/src/content/structured/components/toasts/code.mdx
index 11cc9d57d..3f47eec27 100644
--- a/src/content/structured/components/toasts/code.mdx
+++ b/src/content/structured/components/toasts/code.mdx
@@ -30,8 +30,9 @@ import { useRef } from "react";
 
 export const defaultSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-button onclick="displayToast()">Display toast</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="displayToast()">Display toast</ic-button>
 <ic-toast-region>
   <ic-toast id="toast-01" heading="Your coffee is ready"></ic-toast>
 </ic-toast-region>
@@ -42,10 +43,13 @@ export const defaultSnippet = [
     toastRegion.openToast = toast;
   }
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const toastRegionEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const toastRegionEl = useRef(null);
 const toastEl = useRef(null);
 const handleClick = () => {
   toastRegionEl.current.openToast = toastEl.current;
@@ -58,6 +62,17 @@ return (
     </IcToastRegion>
   </>
 )`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -103,8 +118,9 @@ To view the toasts queuing in the following example, click each button to open a
 
 export const queuingSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-button onclick="handleClick()">Display default toast</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="handleClick()">Display default toast</ic-button>
 <ic-button onclick="handleErrorClick()">Display error toast</ic-button>
 <ic-button onclick="handleAutoDismissClick()">Display auto dismiss toast</ic-button>
 <ic-toast-region>
@@ -127,10 +143,13 @@ export const queuingSnippet = [
     toastRegion.openToast = toast;
   }
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const toastRegionEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const toastRegionEl = useRef(null);
 const toastEl = useRef(null);
 const errorToastEl = useRef(null);
 const autoDismissToastEl = useRef(null);
@@ -157,6 +176,17 @@ return (
     </IcToastRegion>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -209,8 +239,9 @@ export const QueuingToast = () => {
 
 export const withVariantSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-button onclick="displayToast()">Display success toast</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="displayToast()">Display success toast</ic-button>
 <ic-toast-region>
   <ic-toast variant="success" id="toast-02" heading="Your coffee is ready" message="Please dismiss and collect"></ic-toast>
 </ic-toast-region>
@@ -221,10 +252,13 @@ export const withVariantSnippet = [
     toastRegion.openToast = successToast;
   }
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const toastRegionEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const toastRegionEl = useRef(null);
 const toastEl = useRef(null);
 const handleClick = () => {
  toastRegionEl.current.openToast = toastEl.current;
@@ -242,6 +276,17 @@ return (
     </IcToastRegion>
   </>
 )`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -274,8 +319,9 @@ export const WithVariantToast = () => {
 
 export const withMultilineSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-button onclick="displayToast()">Display multi-line toast</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="displayToast()">Display multi-line toast</ic-button>
 <ic-toast-region>
   <ic-toast id="toast-03" heading="Your coffee is ready" message="Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold."></ic-toast>
 </ic-toast-region>
@@ -286,10 +332,13 @@ export const withMultilineSnippet = [
     toastRegion.openToast = multilineToast;
   }
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const toastRegionEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const toastRegionEl = useRef(null);
 const toastEl = useRef(null);
 const handleClick = () => {
   toastRegionEl.current.openToast = toastEl.current;
@@ -306,6 +355,17 @@ return (
     </IcToastRegion>
   </>
 )`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -337,8 +397,9 @@ export const MultilineToast = () => {
 
 export const slottedActionsSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-button onclick="displayButtonToast()">Display slotted buttons toast</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="displayButtonToast()">Display slotted buttons toast</ic-button>
 <ic-button onclick="displayLinkToast()">Display slotted buttons toast</ic-button>
 <ic-toast-region>
   <ic-toast id="toast-04" heading="Your order could not be placed" message="Please try again" variant='warning'>
@@ -359,10 +420,13 @@ export const slottedActionsSnippet = [
     toastRegion.openToast = slottedLinkToast;
   }
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const toastRegionEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const toastRegionEl = useRef(null);
 const buttonToastEl = useRef(null);
 const linkToastEl = useRef(null);
 const handleButtonToastClick = () => {
@@ -397,6 +461,17 @@ return (
     </IcToastRegion>
   </>
 )`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -454,8 +529,9 @@ export const SlottedActionsToast = () => {
 
 export const autoDismissSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-button onclick="displayToast()">Display auto-dismiss toast</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="displayToast()">Display auto-dismiss toast</ic-button>
 <ic-toast-region>
   <ic-toast id="toast-06" heading="Your coffee is ready" dismiss-mode="automatic" auto-dismiss-timeout="10000" variant='info'></ic-toast>
 </ic-toast-region>
@@ -466,10 +542,13 @@ export const autoDismissSnippet = [
     toastRegion.openToast = toast;
   }
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const toastRegionEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const toastRegionEl = useRef(null);
 const toastEl = useRef(null);
 const handleClick = () => {
   toastRegionEl.current.openToast = toastEl.current;
@@ -482,6 +561,17 @@ return (
     </IcToastRegion>
   </>
 )`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -515,8 +605,9 @@ export const AutoDismissToast = () => {
 
 export const customIconAriaLabelsSnippet = [
   {
-    language: "Web component",
-    snippet: `<ic-button onclick="displayToast()">Display auto-dismiss toast</ic-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-button onclick="displayToast()">Display auto-dismiss toast</ic-button>
 <ic-toast-region>
   <ic-toast id="toast-07" heading="Your coffee is ready" variant='neutral' neutral-icon-aria-label="It is time to collect your coffee" dismiss-button-aria-label="Dismiss me">
     <svg xmlns="http://www.w3.org/2000/svg" slot='neutral-icon' viewBox="0 0 24 24">
@@ -532,10 +623,13 @@ export const customIconAriaLabelsSnippet = [
     toastRegion.openToast = toast;
   }
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `const toastRegionEl = useRef(null);
+    technology: "React",
+    snippets: {
+      short: `const toastRegionEl = useRef(null);
 const toastEl = useRef(null);
 const handleClick = () => {
   toastRegionEl.current.openToast = toastEl.current;
@@ -559,6 +653,17 @@ return (
     </IcToastRegion>
   </>
 )`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/toggle-buttons/code.mdx b/src/content/structured/components/toggle-buttons/code.mdx
index 9fea328d0..756f8242a 100644
--- a/src/content/structured/components/toggle-buttons/code.mdx
+++ b/src/content/structured/components/toggle-buttons/code.mdx
@@ -30,21 +30,36 @@ import {
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button id="toggle-btn" label="Switch to oat milk"></ic-toggle-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button id="toggle-btn" label="Switch to oat milk"></ic-toggle-button>
 <script>
   const btn = document.querySelector('#toggle-btn');
   btn.addEventListener("icToggleChecked", function (event) {
     console.log(event.detail.checked);
   });
 </script>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButton
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButton
     label="Switch to oat milk"
     onIcToggleChecked={(event) => console.log(event.detail.checked)}
 />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -69,18 +84,33 @@ export const snippetsDefault = [
 
 export const snippetsOtherStates = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk" disabled="true"></ic-toggle-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button label="Switch to oat milk" disabled="true"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" disabled="true" toggle-checked="true"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" loading="true"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" loading="true" toggle-checked="true"></ic-toggle-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk" disabled />
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButton label="Switch to oat milk" disabled />
 <IcToggleButton label="Switch to oat milk" disabled toggleChecked />
 <IcToggleButton label="Switch to oat milk" loading />
 <IcToggleButton label="Switch to oat milk" loading toggleChecked />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -95,14 +125,18 @@ export const snippetsOtherStates = [
 
 export const snippetsWithIcon = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button label="Switch to oat milk">
     <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" /></svg>
 </ic-toggle-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk">
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButton label="Switch to oat milk">
     <SlottedSVG
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
@@ -114,6 +148,17 @@ export const snippetsWithIcon = [
         <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
     </SlottedSVG>
 </IcToggleButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -136,16 +181,31 @@ export const snippetsWithIcon = [
 
 export const snippetsSizing = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk" size="small"></ic-toggle-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button label="Switch to oat milk" size="small"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" size="large"></ic-toggle-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk" size="small" />
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButton label="Switch to oat milk" size="small" />
 <IcToggleButton label="Switch to oat milk" size="default" />
 <IcToggleButton label="Switch to oat milk" size="large" />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -159,16 +219,31 @@ export const snippetsSizing = [
 
 export const snippetsWithBadge = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk">
-    <ic-badge textLabel="1" slot="badge" variant="success"></ic-badge>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button label="Switch to oat milk">
+    <ic-badge text-label="1" slot="badge" variant="success"></ic-badge>
 </ic-toggle-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk">
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButton label="Switch to oat milk">
     <IcBadge textLabel="1" slot="badge" variant="success" />
 </IcToggleButton>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -182,16 +257,31 @@ export const snippetsWithBadge = [
 
 export const snippetsDark = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk" appearance="dark"></ic-toggle-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button label="Switch to oat milk" appearance="dark"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" appearance="dark" loading="true"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" appearance="dark" loading="true" toggle-checked="true"></ic-toggle-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk" appearance="dark" />
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButton label="Switch to oat milk" appearance="dark" />
 <IcToggleButton label="Switch to oat milk" appearance="dark" loading />
 <IcToggleButton label="Switch to oat milk" appearance="dark" loading toggleChecked />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -210,16 +300,31 @@ export const snippetsDark = [
 
 export const snippetsLight = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk" appearance="light"></ic-toggle-button>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button label="Switch to oat milk" appearance="light"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" appearance="light" loading="true"></ic-toggle-button>
 <ic-toggle-button label="Switch to oat milk" appearance="light" loading="true" toggle-checked="true"></ic-toggle-button>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk" appearance="light" />
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButton label="Switch to oat milk" appearance="light" />
 <IcToggleButton label="Switch to oat milk" appearance="light" loading />
 <IcToggleButton label="Switch to oat milk" appearance="light" loading toggleChecked />`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -241,22 +346,37 @@ export const snippetsLight = [
 
 export const snippetsFullWidth = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button-group label="Milk selection" full-width="true" select-type="single">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button-group label="Milk selection" full-width="true" select-type="single">
   <ic-toggle-button label="Switch to oat milk" ></ic-toggle-button>
   <ic-toggle-button label="Switch to almond milk" ></ic-toggle-button>
   <ic-toggle-button label="Switch to coconut milk" ></ic-toggle-button>
   <ic-toggle-button label="Switch to rice milk" ></ic-toggle-button>
 </ic-toggle-button-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButtonGroup fullWidth selectType="single">
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButtonGroup fullWidth selectType="single">
   <IcToggleButton label="Switch to oat milk"/>
   <IcToggleButton label="Switch to almond milk"/>
   <IcToggleButton label="Switch to coconut milk"/>
   <IcToggleButton label="Switch to rice milk"/>
 </IcToggleButtonGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -273,8 +393,9 @@ export const snippetsFullWidth = [
 
 export const snippetsIconOnly = [
   {
-    language: "Web component",
-    snippet: `<ic-toggle-button-group label="Coffee icon variants" variant="icon">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-toggle-button-group label="Coffee icon variants" variant="icon">
     <ic-toggle-button accessibleLabel="Coffee icon" variant="icon">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -309,10 +430,13 @@ export const snippetsIconOnly = [
         </svg>
       </ic-toggle-button>
     </ic-toggle-button-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButtonGroup label="Coffee icon variants" variant="icon">
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButtonGroup label="Coffee icon variants" variant="icon">
       <IcToggleButton variant="icon" accessibleLabel="Coffee icon">
         <SlottedSVG
           xmlns="http://www.w3.org/2000/svg"
@@ -347,6 +471,17 @@ export const snippetsIconOnly = [
         </SlottedSVG>
       </IcToggleButton>
   </IcToggleButtonGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -392,8 +527,9 @@ export const snippetsIconOnly = [
 
 export const snippetsIconRight = [
   {
-    language: "Web component",
-    snippet: ` <ic-toggle-button-group label="Milk selection" icon-placement="right">
+    technology: "Web component",
+    snippets: {
+      short: ` <ic-toggle-button-group label="Milk selection" icon-placement="right">
   <ic-toggle-button label="Switch to oat milk">
      <svg
      slot="icon"
@@ -419,10 +555,13 @@ export const snippetsIconRight = [
     </svg>
   </ic-toggle-button>
 </ic-toggle-button-group>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcToggleButtonGroup label="Milk selection" iconPlacement="right">  
+    technology: "React",
+    snippets: {
+      short: `<IcToggleButtonGroup label="Milk selection" iconPlacement="right">  
   <IcToggleButton label="Switch to oat milk" iconPlacement="right">
     <SlottedSVG
      slot="icon"
@@ -449,6 +588,17 @@ export const snippetsIconRight = [
   </IcToggleButton>
 </IcToggleButtonGroup>
 `,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -485,8 +635,9 @@ export const snippetsIconRight = [
 
 export const snippetsIconTopGroup = [
   {
-    language: "Web component",
-    snippet: ` <ic-toggle-button-group label="milk selection" icon-placement="top">
+    technology: "Web component",
+    snippets: {
+      short: ` <ic-toggle-button-group label="milk selection" icon-placement="top">
     <ic-toggle-button label="Switch to oat milk" >
       <svg
         slot="icon"
@@ -513,10 +664,13 @@ export const snippetsIconTopGroup = [
     </ic-toggle-button>
     </ic-toggle-button-group>
 `,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: ` <IcToggleButtonGroup label="Milk selection" iconPlacement="top">
+    technology: "React",
+    snippets: {
+      short: ` <IcToggleButtonGroup label="Milk selection" iconPlacement="top">
     <IcToggleButton label="First toggle" iconPlacement="top">
       <SlottedSVG
         slot="icon"
@@ -544,6 +698,17 @@ export const snippetsIconTopGroup = [
       </SlottedSVG>
     </IcToggleButton>
   </IcToggleButtonGroup>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/tooltips/code.mdx b/src/content/structured/components/tooltips/code.mdx
index 47f4c5b79..186c401dd 100644
--- a/src/content/structured/components/tooltips/code.mdx
+++ b/src/content/structured/components/tooltips/code.mdx
@@ -26,22 +26,37 @@ import { useRef } from "react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-tooltip target="test-button-0" label="Add Americano to favourites" placement="top">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tooltip target="test-button-0" label="Add Americano to favourites" placement="top">
   <ic-button id="test-button-0" aria-describedby="ic-tooltip-test-button-0">Add</ic-button>
 </ic-tooltip>
 <ic-tooltip target="test-button-1" label="Remove Americano from favourites" placement="bottom">
   <ic-button id="test-button-1" aria-describedby="ic-tooltip-test-button-1">Remove</ic-button>
 </ic-tooltip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTooltip target="test-button-0" label="Add Americano to favourites" placement="top">
+    technology: "React",
+    snippets: {
+      short: `<IcTooltip target="test-button-0" label="Add Americano to favourites" placement="top">
   <IcButton id="test-button-0" aria-describedby="ic-tooltip-test-button-0">Add</IcButton>
 </IcTooltip>
 <IcTooltip target="test-button-1" label="Remove Americano from favourites" placement="bottom">
   <IcButton id="test-button-1" aria-describedby="ic-tooltip-test-button-1">Remove</IcButton>
 </IcTooltip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -78,16 +93,31 @@ export const snippets = [
 
 export const snippetsLeft = [
   {
-    language: "Web component",
-    snippet: `<ic-tooltip target="test-button" label="Add Americano to favourites" placement="left">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tooltip target="test-button" label="Add Americano to favourites" placement="left">
   <ic-button id="test-button" aria-describedby="ic-tooltip-test-button">Add</ic-button>
 </ic-tooltip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTooltip target="test-button" label="Add Americano to favourites" placement="left">
+    technology: "React",
+    snippets: {
+      short: `<IcTooltip target="test-button" label="Add Americano to favourites" placement="left">
   <IcButton id="test-button" aria-describedby="ic-tooltip-test-button">Add</IcButton>
 </IcTooltip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -113,16 +143,31 @@ export const snippetsLeft = [
 
 export const snippetsRight = [
   {
-    language: "Web component",
-    snippet: `<ic-tooltip target="test-button" label="Add Americano to favourites" placement="right">  
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tooltip target="test-button" label="Add Americano to favourites" placement="right">  
   <ic-button id="test-button" aria-describedby="ic-tooltip-test-button">Add</ic-button>
 </ic-tooltip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTooltip target="test-button" label="Add Americano to favourites" placement="right">
+    technology: "React",
+    snippets: {
+      short: `<IcTooltip target="test-button" label="Add Americano to favourites" placement="right">
   <IcButton id="test-button" aria-describedby="ic-tooltip-test-button">Add</IcButton>
 </IcTooltip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -148,24 +193,39 @@ export const snippetsRight = [
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-tooltip target="small-chip" label="An espresso-based drink"> 
+    technology: "Web component",
+    snippets: {
+      short: `<ic-tooltip target="small-chip" label="An espresso-based drink"> 
   <ic-chip id="small-chip" label="Americano" size="small">
     <svg slot="icon" width="26" height="26" viewBox="0 0 26 26" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
     </svg>
   </ic-chip>
 </ic-tooltip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTooltip target="small-chip" label="An espresso-based drink">
+    technology: "React",
+    snippets: {
+      short: `<IcTooltip target="small-chip" label="An espresso-based drink">
   <IcChip id="small-chip" label="Americano" size="small">
     <SlottedSVG slot="icon" width="26" height="26" viewBox="0 0 26 26" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
     </SlottedSVG>
     </IcChip>
 </IcTooltip>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -198,8 +258,9 @@ export const snippetsDefault = [
 
 export const snippetsProgrammatic = [
   {
-    language: "Web component",
-    snippet: `<script>
+    technology: "Web component",
+    snippets: {
+      short: `<script>
   let display = true;
   document
     .querySelector("#clickMe")
@@ -216,10 +277,13 @@ export const snippetsProgrammatic = [
     Add
   </ic-button>
 </ic-tooltip>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `let display = true;
+    technology: "React",
+    snippets: {
+      short: `let display = true;
 const tooltipEl = useRef(null);
 const handleDisplay = () => {
   tooltipEl.current.displayTooltip(display, display);
@@ -235,6 +299,17 @@ return (
     </IcTooltip>
   </>
 );`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/top-nav/code.mdx b/src/content/structured/components/top-nav/code.mdx
index 4823a76b7..2cdcedb57 100644
--- a/src/content/structured/components/top-nav/code.mdx
+++ b/src/content/structured/components/top-nav/code.mdx
@@ -38,8 +38,9 @@ import { MemoryRouter, NavLink } from "react-router-dom";
 
 export const snippetsDefault = [
   {
-    language: "Web component",
-    snippet: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7">
   <svg
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -70,10 +71,13 @@ export const snippetsDefault = [
   <ic-navigation-item slot="navigation" label="Components" href="#" selected="true"></ic-navigation-item>
   <ic-navigation-item slot="navigation" label="Patterns" href="#"></ic-navigation-item>
 </ic-top-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7">
+    technology: "React",
+    snippets: {
+      short: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7">
   <SlottedSVG
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -104,6 +108,17 @@ export const snippetsDefault = [
   <IcNavigationItem slot="navigation" label="Components" href="#" selected />
   <IcNavigationItem slot="navigation" label="Patterns" href="#" />
 </IcTopNavigation>`,
+      long: [
+        {
+          language: "Javascript",
+          snippet: `js import { IcTopNavigation, IcSearchBar, IcNavigationButton, IcNavigationItem, SlottedSVG } from "@ukic/react";`,
+        },
+        {
+          language: "Typescript",
+          snippet: `ts import { IcTopNavigation, IcSearchBar, IcNavigationButton, IcNavigationItem, SlottedSVG } from "@ukic/react";`,
+        },
+      ],
+    },
   },
 ];
 
@@ -189,8 +204,9 @@ export const snippetsDefault = [
 
 export const snippetsGroupedLinks = [
   {
-    language: "Web component",
-    snippet: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7">
   <svg
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -213,10 +229,13 @@ export const snippetsGroupedLinks = [
     <ic-navigation-item label="Accessibility Statement" href="#"></ic-navigation-item>
   </ic-navigation-group>
 </ic-top-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7">
+    technology: "React",
+    snippets: {
+      short: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7">
   <SlottedSVG
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -239,6 +258,17 @@ export const snippetsGroupedLinks = [
     <IcNavigationItem label="Accessibility statement" href="#" />
   </IcNavigationGroup>
 </IcTopNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -292,8 +322,9 @@ export const snippetsGroupedLinks = [
 
 export const snippetsCentreAligned = [
   {
-    language: "Web component",
-    snippet: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7" content-aligned="center">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7" content-aligned="center">
   <svg
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -324,10 +355,13 @@ export const snippetsCentreAligned = [
   <ic-navigation-item slot="navigation" label="Components" href="/" selected="true"></ic-navigation-item>
   <ic-navigation-item slot="navigation" label="Patterns" href="/"></ic-navigation-item>
 </ic-top-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7" contentAligned="center">
+    technology: "React",
+    snippets: {
+      short: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7" contentAligned="center">
   <SlottedSVG
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -358,6 +392,17 @@ export const snippetsCentreAligned = [
   <IcNavigationItem slot="navigation" label="Components" href="/" selected />
   <IcNavigationItem slot="navigation" label="Patterns" href="/" />
 </IcTopNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -430,8 +475,9 @@ export const snippetsCentreAligned = [
 
 export const snippetsLeftAligned = [
   {
-    language: "Web component",
-    snippet: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7" content-aligned="left">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7" content-aligned="left">
   <svg
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -463,10 +509,13 @@ export const snippetsLeftAligned = [
   <ic-navigation-item slot="navigation" label="Components" href="/" selected="true"></ic-navigation-item>
   <ic-navigation-item slot="navigation" label="Patterns" href="/"></ic-navigation-item>
 </ic-top-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7" contentAligned="left">
+    technology: "React",
+    snippets: {
+      short: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7" contentAligned="left">
   <SlottedSVG
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -498,6 +547,17 @@ export const snippetsLeftAligned = [
   <IcNavigationItem slot="navigation" label="Components" href="/" selected />
   <IcNavigationItem slot="navigation" label="Patterns" href="/" />
 </IcTopNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -571,8 +631,9 @@ export const snippetsLeftAligned = [
 
 export const snippetsBadge = [
   {
-    language: "Web component",
-    snippet: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-top-navigation app-title="ICDS" status="alpha" version="v0.0.7">
   <svg
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -604,10 +665,13 @@ export const snippetsBadge = [
   <ic-navigation-item slot="navigation" label="Components" href="#" selected="true"></ic-navigation-item>
   <ic-navigation-item slot="navigation" label="Patterns" href="#"></ic-navigation-item>
 </ic-top-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7">
+    technology: "React",
+    snippets: {
+      short: `<IcTopNavigation appTitle="ICDS" status="alpha" version="v0.0.7">
   <SlottedSVG
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -639,6 +703,17 @@ export const snippetsBadge = [
   <IcNavigationItem slot="navigation" label="Components" href="#" selected />
   <IcNavigationItem slot="navigation" label="Patterns" href="#" />
 </IcTopNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -709,8 +784,9 @@ View on a small screen size to display the short title in place of the app title
 
 export const snippetsShortTitle = [
   {
-    language: "Web component",
-    snippet: `<ic-top-navigation app-title="Intelligence Community Design System" short-app-title="ICDS" status="alpha" version="v0.0.7">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-top-navigation app-title="Intelligence Community Design System" short-app-title="ICDS" status="alpha" version="v0.0.7">
   <svg
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -728,10 +804,13 @@ export const snippetsShortTitle = [
   <ic-navigation-item slot="navigation" label="Components" href="/" selected="true"></ic-navigation-item>
   <ic-navigation-item slot="navigation" label="Patterns" href="/"></ic-navigation-item>
 </ic-top-navigation>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTopNavigation appTitle="Intelligence Community Design System" shortAppTitle="ICDS" status="alpha" version="v0.0.7">
+    technology: "React",
+    snippets: {
+      short: `<IcTopNavigation appTitle="Intelligence Community Design System" shortAppTitle="ICDS" status="alpha" version="v0.0.7">
   <SlottedSVG
     slot="app-icon"
     xmlns="http://www.w3.org/2000/svg"
@@ -749,6 +828,17 @@ export const snippetsShortTitle = [
     <IcNavigationItem slot="navigation" label="Components" href="#" selected />
     <IcNavigationItem slot="navigation" label="Patterns" href="#" />
 </IcTopNavigation>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -812,8 +902,9 @@ To guarantee the correct styling for non-svg content slotted into app-icon, set
 
 export const withReactRouter = [
   {
-    language: "React",
-    snippet: `<MemoryRouter initialEntries={["/"]}>
+    technology: "React",
+    snippets: {
+      short: `<MemoryRouter initialEntries={["/"]}>
   <IcTopNavigation version="v0.0.7">
     <NavLink to="/" slot="app-title">ICDS Title</NavLink>
     <NavLink to="/" slot="short-app-title">ICDS</NavLink>
@@ -858,8 +949,18 @@ export const withReactRouter = [
       </Routes>
     </IcSectionContainer>
   </main>
-</MemoryRouter>
-    `,
+</MemoryRouter>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
diff --git a/src/content/structured/components/typography/code.mdx b/src/content/structured/components/typography/code.mdx
index 1de1a1e01..f97f33a07 100644
--- a/src/content/structured/components/typography/code.mdx
+++ b/src/content/structured/components/typography/code.mdx
@@ -27,8 +27,9 @@ import { IcTypography } from "@ukic/react";
 
 export const snippets = [
   {
-    language: "Web component",
-    snippet: `<ic-typography variant="h1">H1</ic-typography>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-typography variant="h1">H1</ic-typography>
 <ic-typography variant="h2">H2</ic-typography>
 <ic-typography variant="h3">H3</ic-typography>
 <ic-typography variant="h4">H4</ic-typography>
@@ -42,10 +43,13 @@ export const snippets = [
 <ic-typography variant="code-large">Code large</ic-typography>
 <ic-typography variant="code-small">Code small</ic-typography>
 <ic-typography variant="code-extra-small">Code extra small</ic-typography>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTypography variant="h1">H1</IcTypography>
+    technology: "React",
+    snippets: {
+      short: `<IcTypography variant="h1">H1</IcTypography>
 <IcTypography variant="h2">H2</IcTypography>
 <IcTypography variant="h3">H3</IcTypography>
 <IcTypography variant="h4">H4</IcTypography>
@@ -59,6 +63,17 @@ export const snippets = [
 <IcTypography variant="code-large">Code large</IcTypography>
 <IcTypography variant="code-small">Code small</IcTypography>
 <IcTypography variant="code-extra-small">Code extra small</IcTypography>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -93,16 +108,31 @@ Add a variant to the typography element to change its style. This does not chang
 
 export const snippetsRestyled = [
   {
-    language: "Web component",
-    snippet: `<ic-typography variant="h2">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-typography variant="h2">
   <h5>H5 with H2 styling</h5>
 </ic-typography>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTypography variant="h2">
+    technology: "React",
+    snippets: {
+      short: `<IcTypography variant="h2">
   <h5>H5 with H2 styling</h5>
 </IcTypography>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -116,16 +146,31 @@ export const snippetsRestyled = [
 
 export const spacingSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-typography apply-vertical-margins="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-typography apply-vertical-margins="true">
   <h5>H5 with margins applied</h5>
 </ic-typography>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTypography applyVerticalMargins>
+    technology: "React",
+    snippets: {
+      short: `<IcTypography applyVerticalMargins>
   <h5>H5 with margins applied</h5>
 </IcTypography>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -139,16 +184,31 @@ export const spacingSnippets = [
 
 export const spacingRestyledSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-typography variant="h2" apply-vertical-margins="true">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-typography variant="h2" apply-vertical-margins="true">
   <h5>H5 with H2 styling and margins applied</h5>
 </ic-typography>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTypography variant="h2" applyVerticalMargins>
+    technology: "React",
+    snippets: {
+      short: `<IcTypography variant="h2" applyVerticalMargins>
   <h5>H5 with H2 styling and margins applied</h5>
 </IcTypography>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -164,8 +224,9 @@ Text can be truncated to a maximum number of lines when using `variant="body"`.
 
 export const truncationSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-typography max-lines="3" variant="body">
+    technology: "Web component",
+    snippets: {
+      short: `<ic-typography max-lines="3" variant="body">
   Body of text that is truncated to three lines. Click the 'See more' link
   to expand the text, then click 'See less' to truncate the text once
   more!
@@ -178,10 +239,13 @@ export const truncationSnippets = [
   dripper organic and foam id saucer, crema, black rich dark, grounds
   breve coffee steamed caramelization percolator.
 </ic-typography>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTypography maxLines="3" variant="body">
+    technology: "React",
+    snippets: {
+      short: `<IcTypography maxLines="3" variant="body">
   Body of text that is truncated to three lines. Click the 'See more' link
   to expand the text, then click 'See less' to truncate the text once
   more!
@@ -194,6 +258,17 @@ export const truncationSnippets = [
   dripper organic and foam id saucer, crema, black rich dark, grounds
   breve coffee steamed caramelization percolator.
 </IcTypography>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -216,18 +291,33 @@ export const truncationSnippets = [
 
 export const additionalStylingSnippets = [
   {
-    language: "Web component",
-    snippet: `<ic-typography variant="h4" bold="true">Bold</ic-typography>
+    technology: "Web component",
+    snippets: {
+      short: `<ic-typography variant="h4" bold="true">Bold</ic-typography>
 <ic-typography variant="h4" italic="true">Italic</ic-typography>
 <ic-typography variant="h4" underline="true">Underline</ic-typography>
 <ic-typography variant="h4" strikethrough="true">Strikethrough</ic-typography>`,
+      long: `{shortCode}`,
+    },
   },
   {
-    language: "React",
-    snippet: `<IcTypography variant="h4" bold>Bold</IcTypography>
+    technology: "React",
+    snippets: {
+      short: `<IcTypography variant="h4" bold>Bold</IcTypography>
 <IcTypography variant="h4" italic>Italic</IcTypography>
 <IcTypography variant="h4" underline>Underline</IcTypography>
 <IcTypography variant="h4" strikethrough>Strikethrough</IcTypography>`,
+      long: [
+        {
+          language: "Typescript",
+          snippet: `{shortCode}`,
+        },
+        {
+          language: "Javascript",
+          snippet: `{shortCode}`,
+        },
+      ],
+    },
   },
 ];
 
@@ -247,3 +337,4 @@ export const additionalStylingSnippets = [
     </IcTypography>
   </div>
 </ComponentPreview>
+import {createWebComponentsIndexHTML} from "../../patterns/components/StackblitzButton/stackblitz-helpers"
diff --git a/src/content/structured/patterns/components/StackblitzButton/index.tsx b/src/content/structured/patterns/components/StackblitzButton/index.tsx
index 1b4d99338..f0b298baf 100644
--- a/src/content/structured/patterns/components/StackblitzButton/index.tsx
+++ b/src/content/structured/patterns/components/StackblitzButton/index.tsx
@@ -16,6 +16,7 @@ export type StackblitzProps = {
   isWebComponents?: boolean;
   projectTitle: string;
   projectDescription?: string;
+  isJSX?: boolean;
 };
 
 const StackblitzButton: React.FC<StackblitzProps> = ({
@@ -23,6 +24,7 @@ const StackblitzButton: React.FC<StackblitzProps> = ({
   isWebComponents,
   projectTitle,
   projectDescription,
+  isJSX = true,
 }) => {
   const viewportWidth = useViewportWidth();
   const isLargeViewport: boolean = viewportWidth > 992;
@@ -31,7 +33,6 @@ const StackblitzButton: React.FC<StackblitzProps> = ({
     const files: { [key: string]: string } = {};
     const isWebComponentsInternal: boolean =
       isWebComponents !== undefined ? isWebComponents : true;
-    const isJSX: boolean = true;
     // Add functionality to manage whether Stackblitz project should use TypeScript or JavaScript
     const ext = isJSX ? "jsx" : "tsx";
 
diff --git a/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts b/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts
index e51fcb308..a95d6ddb2 100644
--- a/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts
+++ b/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts
@@ -118,7 +118,9 @@ export default defineConfig({
 `;
 
 export const createWebComponentsIndexHTML = (codeSnippet: string) => {
-  // write a function that checks the code snippet for instances of class="..." and add the relevant styling to the style tag
+  if (codeSnippet.includes('<html lang="en">')) {
+    return codeSnippet;
+  }
 
   const addStyling = (snippet: string) => {
     const styling: string[] = [];
@@ -178,11 +180,11 @@ export const createWebComponentsIndexHTML = (codeSnippet: string) => {
         "}"
       );
     }
-
-    styling[0] = `\t${styling[0]}`;
+    if (styling.length > 1) styling[0] = `\t${styling[0]}`;
     if (styling.length === 0) return "";
     return `\n${styling.join("\n\t")}`;
   };
+
   return `<html lang="en">
   <head>
     <title>Home</title>
@@ -201,13 +203,12 @@ export const createWebComponentsIndexHTML = (codeSnippet: string) => {
       import('https://unpkg.com/@ukic/web-components/loader').then((module) => {
         module.defineCustomElements();
       });
-      // The ICDS has types available if your JavaScript framework allows for use with Typescript
+      // The ICDS has types available if your JavaScript framework allows for use with TypeScript
       // Below is an example of how to import an ICDS type
       // import type { IcAlignment } from 'https://unpkg.com/@ukic/web-components/';
     </script>
   </body>
-</html>
-  `;
+</html>`;
 };
 
 export const createReactAppTsx = (
@@ -314,27 +315,27 @@ ${
   fileExtension === "tsx" && isPattern && getIcTypes.length > 0
     ? `import type { ${getIcTypes.join(", ")} } from '@ukic/web-components';`
     : ""
-}  
-${
-  sortedMDIcons.length > 0
-    ? `import { ${
-        sortedMDIcons.length > 3
-          ? `\n${sortedMDIcons.join(",\n  ")}\n`
-          : `${sortedMDIcons.join(", ")} `
-      }} from '@mdi/js';`
-    : ""
-}
-${
-  containsCreateUseStyles
-    ? `import { createUseStyles } from 'react-jss';
+}  ${
+    sortedMDIcons.length > 0
+      ? `\nimport { ${
+          sortedMDIcons.length > 3
+            ? `\n${sortedMDIcons.join(",\n  ")}\n`
+            : `${sortedMDIcons.join(", ")} `
+        }} from '@mdi/js';`
+      : ""
+  }${
+    containsCreateUseStyles
+      ? `\nimport { createUseStyles } from 'react-jss';
 `
-    : ""
-}
+      : ""
+  }
 import "@ukic/fonts/dist/fonts.css";
 import "@ukic/react/dist/core/core.css";
 import "@ukic/react/dist/core/normalize.css";
 
 const ${component}${fileExtension === "tsx" ? `: FC` : ""} = () => {
-  ${returnStatement}${codeSnippet}${containsReturn ? "" : `\n)`}};
+  ${returnStatement}${containsReturn ? "" : `\n`}${codeSnippet}${
+    containsReturn ? "" : `\n)`
+  }};
 export default ${component};`;
 };
diff --git a/src/content/structured/patterns/side-navigation-layout.mdx b/src/content/structured/patterns/side-navigation-layout.mdx
index 94818e43a..a27d8c45c 100644
--- a/src/content/structured/patterns/side-navigation-layout.mdx
+++ b/src/content/structured/patterns/side-navigation-layout.mdx
@@ -23,8 +23,8 @@ import sideNavigationPatternFig1 from "./images/fig-1-example-of-theming-applied
 
 export const snippetsSideNav = [
   {
-    language: "Web component",
-    snippet: createWebComponentsIndexHTML(`<div class="parent-div">
+    technology: "Web component",
+    snippets: createWebComponentsIndexHTML(`<div class="parent-div">
       <ic-classification-banner></ic-classification-banner>
       <ic-side-navigation
         app-title="[Enter your application name]"
@@ -282,8 +282,8 @@ export const snippetsSideNav = [
     </div>`),
   },
   {
-    language: "React",
-    snippet: createReactAppTsx(
+    technology: "React",
+    snippets: createReactAppTsx(
       `const useStyles = createUseStyles({
     contentDivContainer: {
       display: "flex",
@@ -583,8 +583,8 @@ For more information, see the [page header component](/components/page-header).
 
 export const snippetsSideNavWithPageHeader = [
   {
-    language: "Web component",
-    snippet: createWebComponentsIndexHTML(`<div class="parent-div">
+    technology: "Web component",
+    snippets: createWebComponentsIndexHTML(`<div class="parent-div">
       <ic-classification-banner></ic-classification-banner>
       <ic-side-navigation
         app-title="[Enter your application name]"
@@ -882,8 +882,8 @@ export const snippetsSideNavWithPageHeader = [
   </div>`),
   },
   {
-    language: "React",
-    snippet: createReactAppTsx(
+    technology: "React",
+    snippets: createReactAppTsx(
       `const useStyles = createUseStyles({
     contentDivContainer: {
       display: "flex",
@@ -1209,8 +1209,8 @@ For more information, see the [back to top component](/components/back-to-top).
 
 export const snippetsSideNavBackToTop = [
   {
-    language: "Web component",
-    snippet: createWebComponentsIndexHTML(`<div class="parent-div">
+    technology: "Web component",
+    snippets: createWebComponentsIndexHTML(`<div class="parent-div">
       <ic-classification-banner></ic-classification-banner>
       <ic-side-navigation
         app-title="[Enter your application name]"
@@ -1468,8 +1468,8 @@ export const snippetsSideNavBackToTop = [
   </div>`),
   },
   {
-    language: "React",
-    snippet: createReactAppTsx(
+    technology: "React",
+    snippets: createReactAppTsx(
       `const useStyles = createUseStyles({
     contentDivContainer: {
       display: "flex",
diff --git a/src/content/structured/patterns/top-navigation-layout.mdx b/src/content/structured/patterns/top-navigation-layout.mdx
index 5f36ad8d7..ae2e9138c 100644
--- a/src/content/structured/patterns/top-navigation-layout.mdx
+++ b/src/content/structured/patterns/top-navigation-layout.mdx
@@ -25,9 +25,9 @@ import topNavigationPatternFig1 from "./images/fig-1-example-of-theming-applied-
 
 export const snippetsTopNav = [
   {
-    language: "Web component",
-    snippet:
-      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>
+    technology: "Web component",
+    snippets: {
+      long: createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>
     <ic-top-navigation
       app-title="[Enter your application name]"
       status="alpha"
@@ -165,11 +165,16 @@ export const snippetsTopNav = [
         </svg>
       </ic-footer-link>
     </ic-footer>`),
+    },
   },
   {
-    language: "React",
-    snippet: createReactAppTsx(
-      `const alignment = "center";
+    technology: "React",
+    snippets: {
+      long: [
+        {
+          language: "Typescript",
+          snippet: createReactAppTsx(
+            `const alignment = "center";
   const useStyles = createUseStyles({
     main: { minHeight: "100vh", display: "flex" },
     mainContentDiv: {
@@ -297,10 +302,149 @@ export const snippetsTopNav = [
       </IcFooter>
     </>
   )`,
-      "TopNavigation",
-      "jsx",
-      true
-    ),
+            "TopNavigation",
+            "tsx",
+            true
+          ),
+        },
+        {
+          language: "Javascript",
+          snippet: createReactAppTsx(
+            `const alignment = "center";
+  const useStyles = createUseStyles({
+    main: { minHeight: "100vh", display: "flex" },
+    mainContentDiv: {
+      border: "var(--ic-border-width) dashed var(--ic-architectural-400)",
+      padding: "var(--ic-space-md)",
+      flex: 1,
+    },
+    mainSectionContainer: { display: "flex", flex: 1 },
+  });
+  const classes = useStyles(); 
+  return (
+    <>
+      <IcClassificationBanner />
+      <IcTopNavigation
+        appTitle="[Enter your application name]"
+        status="alpha"
+        version="v0.0.7"
+        contentAligned={alignment}
+      >
+        <SlottedSVG
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg" 
+          viewBox="0 0 24 24" 
+          fill="#000000"
+          width="24"
+          height="24" 
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
+        </SlottedSVG>
+        <IcSearchBar slot="search" placeholder="Search" label="Search" />
+        <IcNavigationButton label="Profile" slot="buttons">
+          <SlottedSVG
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24" 
+            path={mdiAccount}
+          />
+        </IcNavigationButton>
+        <IcNavigationButton label="Settings" slot="buttons">
+          <SlottedSVG
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24" 
+            path={mdiCog}
+          />
+        </IcNavigationButton>
+        <IcNavigationButton label="Edit" slot="buttons">
+          <SlottedSVG
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24" 
+            path={mdiPencil}
+          />
+        </IcNavigationButton>
+        <IcNavigationItem
+          slot="navigation"
+          label="[navigationOption]"
+          href="#"
+          selected
+        />
+        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
+        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
+        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
+        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
+        <IcNavigationItem slot="navigation" label="[navigationOption]" href="#" />
+      </IcTopNavigation>
+      <main className={classes.main}>
+        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>
+          <div className={classes.mainContentDiv}>
+            <IcTypography variant="h2">
+              <h2>Example heading</h2>
+            </IcTypography>
+            <IcTypography variant="subtitle-large">
+              <p>Example sub-heading</p>
+            </IcTypography>
+            <IcTypography>
+              <p>
+                Remove this div and add your custom content in IcSectionContainer.
+              </p>
+            </IcTypography>
+          </div>
+        </IcSectionContainer>
+      </main>
+      <IcFooter
+        aligned={alignment}
+        caption="This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation."
+        description="This pattern was built using the Intelligence Community Design System (ICDS)."
+      >
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="link" href="">
+          [footerLink]
+        </IcFooterLink>
+        <IcFooterLink slot="logo" href="/">
+          <SlottedSVG
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="#FFFFFF"
+            width="48"
+            height="48"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </SlottedSVG>
+        </IcFooterLink>
+      </IcFooter>
+    </>
+  )`,
+            "TopNavigation",
+            "jsx",
+            true
+          ),
+        },
+      ],
+    },
   },
 ];
 
@@ -369,8 +513,8 @@ For more information, see the [page header component](/components/page-header).
 
 export const snippetsTopNavPageHeader = [
   {
-    language: "Web component",
-    snippet:
+    technology: "Web component",
+    snippets:
       createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>
     <ic-top-navigation
       app-title="[Enter your application name]"
@@ -552,8 +696,8 @@ export const snippetsTopNavPageHeader = [
     </ic-footer>`),
   },
   {
-    language: "React",
-    snippet: createReactAppTsx(
+    technology: "React",
+    snippets: createReactAppTsx(
       `const alignment = "center";
   let pageHeaderAlignment;
   // pageHeaderAlignment = "center";
@@ -770,8 +914,8 @@ For more information, see the [mega-menu component](/components/top-navigation#m
 
 export const snippetsTopNavMegaMenu = [
   {
-    language: "Web component",
-    snippet:
+    technology: "Web component",
+    snippets:
       createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>
     <ic-top-navigation
       app-title="[Enter your application name]"
@@ -928,8 +1072,8 @@ export const snippetsTopNavMegaMenu = [
     </ic-footer>`),
   },
   {
-    language: "React",
-    snippet: createReactAppTsx(
+    technology: "React",
+    snippets: createReactAppTsx(
       `const alignment = "center";
   const useStyles = createUseStyles({
     main: { minHeight: "100vh", display: "flex" },
@@ -1107,8 +1251,8 @@ For more information, see the [back to top component](/components/back-to-top).
 
 export const snippetsTopNavBackToTop = [
   {
-    language: "Web component",
-    snippet:
+    technology: "Web component",
+    snippets:
       createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>
     <ic-top-navigation
       app-title="[Enter your application name]"
@@ -1250,8 +1394,8 @@ export const snippetsTopNavBackToTop = [
     </ic-footer>`),
   },
   {
-    language: "React",
-    snippet: createReactAppTsx(
+    technology: "React",
+    snippets: createReactAppTsx(
       `const alignment = "center";
   const useStyles = createUseStyles({
     main: { minHeight: "100vh", display: "flex" },
diff --git a/src/icds-pages-data.json b/src/icds-pages-data.json
index 78c6523b1..57160064e 100644
--- a/src/icds-pages-data.json
+++ b/src/icds-pages-data.json
@@ -729,7 +729,7 @@
     },
     {
       "id": "components__accordion__codex",
-      "contents": "\nimport {\n  IcAccordion,\n  IcAccordionGroup,\n  IcTypography,\n  SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-accordion heading=\"English Breakfast\">\n  <ic-typography variant=\"body\">\n    A blend of different black teas.\n  </ic-typography>\n</ic-accordion>\n<ic-accordion heading=\"Earl Grey\">\n  <ic-typography variant=\"body\">\n    A tea blend that has been flavoured with oil of bergamot.\n  </ic-typography>\n</ic-accordion>\n`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAccordion heading=\"English Breakfast\">\n  <IcTypography variant=\"body\">\n    A blend of different black teas.\n  </IcTypography>\n</IcAccordion>\n<IcAccordion heading=\"Earl Grey\">\n  <IcTypography variant=\"body\">\n    A tea blend that has been flavoured with oil of bergamot.\n  </IcTypography>\n</IcAccordion>\n`,\n  },\n];\n\n<ComponentPreview style={{ flexDirection: \"column\" }} snippets={snippets}>\n  <IcAccordion heading=\"English Breakfast\">\n    <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Earl Grey\">\n    <IcTypography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </IcTypography>\n  </IcAccordion>\n</ComponentPreview>\n\n## Accordion details\n\n<ComponentDetails component=\"ic-accordion\" />\n\n## Accordion group details\n\n<ComponentDetails component=\"ic-accordion-group\" />\n\n## Variants\n\n### With icon\n\nexport const withIcon = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-accordion heading=\"English Breakfast\">\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n  <ic-typography variant=\"body\">\n    A blend of different black teas.\n  </ic-typography>\n  </ic-accordion>\n  <ic-accordion heading=\"Earl Grey\">\n    <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    <ic-typography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </ic-typography>\n  </ic-accordion>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAccordion heading=\"English Breakfast\">\n  <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n  <IcTypography variant=\"body\">\n    A blend of different black teas.\n  </IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Earl Grey\">\n    <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    <IcTypography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </IcTypography>\n  </IcAccordion>`,\n  },\n];\n\n<ComponentPreview snippets={withIcon} style={{ flexDirection: \"column\" }}>\n  <IcAccordion heading=\"English Breakfast\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Earl Grey\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcTypography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </IcTypography>\n  </IcAccordion>\n</ComponentPreview>\n\n### With group title and see all / hide all button\n\n<ComponentPreview snippets={groupTitle} style={{ flexDirection: \"column\" }}>\n  <IcAccordionGroup group-title=\"Coffee\">\n    <IcAccordion heading=\"Cappuccino\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is traditionally prepared with steamed milk\n        foam.\n      </IcTypography>\n    </IcAccordion>\n    <IcAccordion heading=\"Americano\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is diluted with hot water.\n      </IcTypography>\n    </IcAccordion>\n  </IcAccordionGroup>\n</ComponentPreview>\n\nexport const groupTitle = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-accordion-group group-title=\"Coffee\">\n  <ic-accordion heading=\"Cappuccino\">\n    <ic-typography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </ic-typography>\n  </ic-accordion>\n  <ic-accordion heading=\"Americano\">\n    <ic-typography variant=\"body\">\n      An espresso-based drink that is diluted with hot water.\n    </ic-typography>\n  </ic-accordion>\n</ic-accordion-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAccordionGroup groupTitle=\"Coffee\">\n  <IcAccordion heading=\"Cappucino\">\n    <IcTypography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Americano\">\n    <IcTypography variant=\"body\">\n      An espresso-based drink that is diluted with hot water.\n    </IcTypography>\n  </IcAccordion>\n</IcAccordionGroup>`,\n  },\n];\n\n### With nested accordions\n\nexport const snippetsNested = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-accordion-group group-title=\"Coffee\">\n  <ic-accordion heading=\"Cappuccino\">\n    <ic-typography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </ic-typography>\n  </ic-accordion>\n  <ic-accordion heading=\"Other coffees\">\n    <ic-accordion heading=\"Americano\">\n      <ic-typography variant=\"body\">\n        An espresso-based drink that is diluted with hot water.\n      </ic-typography>\n    </ic-accordion>\n    <ic-accordion heading=\"Latte\">\n      <ic-typography variant=\"body\">\n        A milkier coffee than a cappuccino.\n      </ic-typography>\n    </ic-accordion>\n  </ic-accordion>\n</ic-accordion-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAccordionGroup groupTitle=\"Coffee\">\n  <IcAccordion heading=\"Cappucino\">\n    <IcTypography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Other coffees\">\n    <IcAccordion heading=\"Americano\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is diluted with hot water.\n      </IcTypography>\n    </IcAccordion>\n    <IcAccordion heading=\"Latte\">\n      <IcTypography variant=\"body\">\n        A milkier coffee than a cappuccino.\n      </IcTypography>\n    </IcAccordion>\n  </IcAccordion>\n</IcAccordionGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsNested} style={{ flexDirection: \"column\" }}>\n  <IcAccordionGroup group-title=\"Coffee\">\n    <IcAccordion heading=\"Cappuccino\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is traditionally prepared with steamed milk\n        foam.\n      </IcTypography>\n    </IcAccordion>\n    <IcAccordion heading=\"Other coffees\">\n      <IcAccordion heading=\"Americano\">\n        <IcTypography variant=\"body\">\n          An espresso-based drink that is diluted with hot water.\n        </IcTypography>\n      </IcAccordion>\n      <IcAccordion heading=\"Latte\">\n        <IcTypography variant=\"body\">\n          A milkier coffee than a cappuccino.\n        </IcTypography>\n      </IcAccordion>\n    </IcAccordion>\n  </IcAccordionGroup>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcAccordion,\n  IcAccordionGroup,\n  IcTypography,\n  SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-accordion heading=\"English Breakfast\">\n  <ic-typography variant=\"body\">\n    A blend of different black teas.\n  </ic-typography>\n</ic-accordion>\n<ic-accordion heading=\"Earl Grey\">\n  <ic-typography variant=\"body\">\n    A tea blend that has been flavoured with oil of bergamot.\n  </ic-typography>\n</ic-accordion>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAccordion heading=\"English Breakfast\">\n  <IcTypography variant=\"body\">\n    A blend of different black teas.\n  </IcTypography>\n</IcAccordion>\n<IcAccordion heading=\"Earl Grey\">\n  <IcTypography variant=\"body\">\n    A tea blend that has been flavoured with oil of bergamot.\n  </IcTypography>\n</IcAccordion>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `<>\n            {shortCode}\n            </>`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `<>\n            {shortCode}\n            </>`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ flexDirection: \"column\" }} snippets={snippets}>\n  <IcAccordion heading=\"English Breakfast\">\n    <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Earl Grey\">\n    <IcTypography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </IcTypography>\n  </IcAccordion>\n</ComponentPreview>\n\n## Accordion details\n\n<ComponentDetails component=\"ic-accordion\" />\n\n## Accordion group details\n\n<ComponentDetails component=\"ic-accordion-group\" />\n\n## Variants\n\n### With icon\n\nexport const withIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-accordion heading=\"English Breakfast\">\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n  <ic-typography variant=\"body\">\n    A blend of different black teas.\n  </ic-typography>\n  </ic-accordion>\n  <ic-accordion heading=\"Earl Grey\">\n    <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    <ic-typography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </ic-typography>\n  </ic-accordion>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAccordion heading=\"English Breakfast\">\n  <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n  <IcTypography variant=\"body\">\n    A blend of different black teas.\n  </IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Earl Grey\">\n    <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    <IcTypography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </IcTypography>\n  </IcAccordion>`,\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={withIcon} style={{ flexDirection: \"column\" }}>\n  <IcAccordion heading=\"English Breakfast\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Earl Grey\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcTypography variant=\"body\">\n      A tea blend that has been flavoured with oil of bergamot.\n    </IcTypography>\n  </IcAccordion>\n</ComponentPreview>\n\n### With group title and see all / hide all button\n\n<ComponentPreview snippets={groupTitle} style={{ flexDirection: \"column\" }}>\n  <IcAccordionGroup group-title=\"Coffee\">\n    <IcAccordion heading=\"Cappuccino\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is traditionally prepared with steamed milk\n        foam.\n      </IcTypography>\n    </IcAccordion>\n    <IcAccordion heading=\"Americano\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is diluted with hot water.\n      </IcTypography>\n    </IcAccordion>\n  </IcAccordionGroup>\n</ComponentPreview>\n\nexport const groupTitle = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-accordion-group group-title=\"Coffee\">\n  <ic-accordion heading=\"Cappuccino\">\n    <ic-typography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </ic-typography>\n  </ic-accordion>\n  <ic-accordion heading=\"Americano\">\n    <ic-typography variant=\"body\">\n      An espresso-based drink that is diluted with hot water.\n    </ic-typography>\n  </ic-accordion>\n</ic-accordion-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAccordionGroup groupTitle=\"Coffee\">\n  <IcAccordion heading=\"Cappucino\">\n    <IcTypography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Americano\">\n    <IcTypography variant=\"body\">\n      An espresso-based drink that is diluted with hot water.\n    </IcTypography>\n  </IcAccordion>\n</IcAccordionGroup>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n### With nested accordions\n\nexport const snippetsNested = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-accordion-group group-title=\"Coffee\">\n  <ic-accordion heading=\"Cappuccino\">\n    <ic-typography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </ic-typography>\n  </ic-accordion>\n  <ic-accordion heading=\"Other coffees\">\n    <ic-accordion heading=\"Americano\">\n      <ic-typography variant=\"body\">\n        An espresso-based drink that is diluted with hot water.\n      </ic-typography>\n    </ic-accordion>\n    <ic-accordion heading=\"Latte\">\n      <ic-typography variant=\"body\">\n        A milkier coffee than a cappuccino.\n      </ic-typography>\n    </ic-accordion>\n  </ic-accordion>\n</ic-accordion-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAccordionGroup groupTitle=\"Coffee\">\n  <IcAccordion heading=\"Cappucino\">\n    <IcTypography variant=\"body\">\n      An espresso-based drink that is traditionally prepared with steamed milk foam.\n    </IcTypography>\n  </IcAccordion>\n  <IcAccordion heading=\"Other coffees\">\n    <IcAccordion heading=\"Americano\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is diluted with hot water.\n      </IcTypography>\n    </IcAccordion>\n    <IcAccordion heading=\"Latte\">\n      <IcTypography variant=\"body\">\n        A milkier coffee than a cappuccino.\n      </IcTypography>\n    </IcAccordion>\n  </IcAccordion>\n</IcAccordionGroup>`,\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={snippetsNested} style={{ flexDirection: \"column\" }}>\n  <IcAccordionGroup group-title=\"Coffee\">\n    <IcAccordion heading=\"Cappuccino\">\n      <IcTypography variant=\"body\">\n        An espresso-based drink that is traditionally prepared with steamed milk\n        foam.\n      </IcTypography>\n    </IcAccordion>\n    <IcAccordion heading=\"Other coffees\">\n      <IcAccordion heading=\"Americano\">\n        <IcTypography variant=\"body\">\n          An espresso-based drink that is diluted with hot water.\n        </IcTypography>\n      </IcAccordion>\n      <IcAccordion heading=\"Latte\">\n        <IcTypography variant=\"body\">\n          A milkier coffee than a cappuccino.\n        </IcTypography>\n      </IcAccordion>\n    </IcAccordion>\n  </IcAccordionGroup>\n</ComponentPreview>\n",
       "path": "/components/accordion/code",
       "date": "2023-10-11",
       "title": "Accordion",
@@ -752,10 +752,10 @@
       ],
       "meta": {
         "relativePath": "components/accordion/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.492Z",
-        "lastModified": "2024-04-08T22:24:28.492Z",
-        "size": 9273,
-        "formattedSize": "9.1 KB"
+        "createdAt": "2024-04-08T22:26:50.748Z",
+        "lastModified": "2024-04-08T22:26:50.748Z",
+        "size": 10445,
+        "formattedSize": "10.2 KB"
       }
     },
     {
@@ -823,7 +823,7 @@
     },
     {
       "id": "components__alerts__codex",
-      "contents": "\n## Component demo\n\nimport { IcAlert, IcButton, IcLink } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-alert heading=\"Americano order\" message=\"Preparation status is unavailable.\"></ic-alert>\n<ic-alert variant=\"info\" heading=\"Did you know?\" message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"></ic-alert>\n<ic-alert variant=\"error\" heading=\"Americano order error\" message=\"Americano couldn't be made, we ran out of beans.\"></ic-alert>\n<ic-alert variant=\"warning\" heading=\"Hot drink\" message=\"Please be careful the drink is hot.\"></ic-alert>\n<ic-alert variant=\"success\" heading=\"Americano order complete\" message=\"Success, your coffee is good to go.\"></ic-alert>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAlert heading=\"Americano order\" message=\"Preparation status is unavailable.\"/>\n<IcAlert variant=\"info\" heading=\"Did you know?\" message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"/>\n<IcAlert variant=\"error\" heading=\"Americano order error\" message=\"Americano couldn't be made, we ran out of beans.\" />\n<IcAlert variant=\"warning\" heading=\"Hot drink\" message=\"Please be careful the drink is hot.\"/>\n<IcAlert variant=\"success\" heading=\"Americano order complete\" message=\"Success, your coffee is good to go.\" />`,\n  },\n];\n\n<ComponentPreview style={{ display: \"block\" }} snippets={snippetsDefault}>\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    heading=\"Americano order\"\n    message=\"Preparation status is unavailable.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"info\"\n    heading=\"Did you know?\"\n    message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"error\"\n    heading=\"Americano order error\"\n    message=\"Americano couldn't be made, we ran out of beans.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"warning\"\n    heading=\"Hot drink\"\n    message=\"Please be careful the drink is hot.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"success\"\n    heading=\"Americano order complete\"\n    message=\"Success, your coffee is good to go.\"\n  />\n</ComponentPreview>\n\n## Alert details\n\n<ComponentDetails component=\"ic-alert\" />\n\n## Variants\n\n### Dismissible\n\nexport const snippetsDismissible = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-alert heading=\"Americano order nearly ready\" message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\" dismissible=\"true\"></ic-alert>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAlert heading=\"Americano order nearly ready\" message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\" dismissible />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDismissible}>\n  <IcAlert\n    heading=\"Americano order nearly ready\"\n    message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\"\n    dismissible\n  />\n</ComponentPreview>\n\n### With action\n\nexport const snippetsWithAction = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-alert variant=\"info\" heading=\"Did you know?\" message=\"There is a new range of coffees to try.\">\n      <ic-button slot=\"action\" variant=\"secondary\" appearance=\"dark\">View Drinks</ic-button>\n</ic-alert>\n<script>\n  const btn = document.querySelector('ic-button');\n  btn.addEventListener('click', (ev) => {\n    console.log(ev)\n  })\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAlert variant=\"info\" heading=\"Did you know?\" message=\"There is a new range of coffees to try.\">\n    <IcButton slot=\"action\" variant=\"secondary\" appearance=\"dark\" onClick={(ev) => console.log(ev)}>View Drinks</IcButton>\n</IcAlert>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsWithAction}>\n  <IcAlert\n    variant=\"info\"\n    heading=\"Did you know?\"\n    message=\"There is a new range of coffees to try.\"\n  >\n    <IcButton\n      slot=\"action\"\n      variant=\"secondary\"\n      appearance=\"dark\"\n      onClick={(ev) => console.log(ev)}\n    >\n      View Drinks\n    </IcButton>\n  </IcAlert>\n</ComponentPreview>\n\n### Title above\n\nexport const snippetsTitleAbove = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-alert \n    heading=\"What is Coffee?\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \n    title-above=\"true\" \n    variant=\"info\">\n  </ic-alert>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAlert \n    heading=\"What is Coffee?\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \n    titleAbove \n    variant=\"info\"/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsTitleAbove}>\n  <IcAlert\n    heading=\"What is Coffee?\"\n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\"\n    titleAbove\n    variant=\"info\"\n  />\n</ComponentPreview>\n\n### Responsive title\n\nexport const snippetsResponsiveTitle = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-alert \n    heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\n    variant=\"info\">\n    </ic-alert>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAlert \n    heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\" \n    variant=\"info\"/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsResponsiveTitle}>\n  <IcAlert\n    heading=\"Here you can find out lots more information about the world's favourite hot drink.\"\n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\n    variant=\"info\"\n  />\n</ComponentPreview>\n\n### Custom message\n\nexport const snippetsCustomMessage = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-alert variant=\"info\" heading=\"Want to know more about our coffee?\">\n  <span slot=\"message\"> Go to our <ic-link href=\"/\">coffee page</ic-link> to learn more.</span>\n</ic-alert>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\n  <span slot=\"message\"> Go to our <IcLink href=\"/\">coffee page</IcLink> to learn more.</span>\n</IcAlert>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsCustomMessage}>\n  <IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\n    <span\n      slot=\"message\"\n      style={{\n        font: \"var(--ic-font-body)\",\n        letterSpacing: \"var(--ic-font-letter-spacing-0pt005)\",\n      }}\n    >\n      Got to our{\" \"}\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\n        coffee page\n      </IcLink>{\" \"}\n      to learn more.\n    </span>\n  </IcAlert>\n</ComponentPreview>\n",
+      "contents": "\n## Component demo\n\nimport { IcAlert, IcButton, IcLink } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-alert heading=\"Americano order\" message=\"Preparation status is unavailable.\"></ic-alert>\n<ic-alert variant=\"info\" heading=\"Did you know?\" message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"></ic-alert>\n<ic-alert variant=\"error\" heading=\"Americano order error\" message=\"Americano couldn't be made, we ran out of beans.\"></ic-alert>\n<ic-alert variant=\"warning\" heading=\"Hot drink\" message=\"Please be careful the drink is hot.\"></ic-alert>\n<ic-alert variant=\"success\" heading=\"Americano order complete\" message=\"Success, your coffee is good to go.\"></ic-alert>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAlert heading=\"Americano order\" message=\"Preparation status is unavailable.\"/>\n<IcAlert variant=\"info\" heading=\"Did you know?\" message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"/>\n<IcAlert variant=\"error\" heading=\"Americano order error\" message=\"Americano couldn't be made, we ran out of beans.\" />\n<IcAlert variant=\"warning\" heading=\"Hot drink\" message=\"Please be careful the drink is hot.\"/>\n<IcAlert variant=\"success\" heading=\"Americano order complete\" message=\"Success, your coffee is good to go.\" />`,\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={{ display: \"block\" }} snippets={snippetsDefault}>\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    heading=\"Americano order\"\n    message=\"Preparation status is unavailable.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"info\"\n    heading=\"Did you know?\"\n    message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"error\"\n    heading=\"Americano order error\"\n    message=\"Americano couldn't be made, we ran out of beans.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"warning\"\n    heading=\"Hot drink\"\n    message=\"Please be careful the drink is hot.\"\n  />\n  <IcAlert\n    style={{ marginBottom: \"16px\" }}\n    variant=\"success\"\n    heading=\"Americano order complete\"\n    message=\"Success, your coffee is good to go.\"\n  />\n</ComponentPreview>\n\n## Alert details\n\n<ComponentDetails component=\"ic-alert\" />\n\n## Variants\n\n### Dismissible\n\nexport const snippetsDismissible = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-alert heading=\"Americano order nearly ready\" message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\" dismissible=\"true\"></ic-alert>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAlert heading=\"Americano order nearly ready\" message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\" dismissible />`,\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={snippetsDismissible}>\n  <IcAlert\n    heading=\"Americano order nearly ready\"\n    message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\"\n    dismissible\n  />\n</ComponentPreview>\n\n### With action\n\nexport const snippetsWithAction = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-alert variant=\"info\" heading=\"Did you know?\" message=\"There is a new range of coffees to try.\">\n      <ic-button slot=\"action\" variant=\"secondary\" appearance=\"dark\">View Drinks</ic-button>\n</ic-alert>\n<script>\n  const btn = document.querySelector('ic-button');\n  btn.addEventListener('click', (ev) => {\n    console.log(ev)\n  })\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAlert variant=\"info\" heading=\"Did you know?\" message=\"There is a new range of coffees to try.\">\n    <IcButton slot=\"action\" variant=\"secondary\" appearance=\"dark\" onClick={(ev) => console.log(ev)}>View Drinks</IcButton>\n</IcAlert>`,\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={snippetsWithAction}>\n  <IcAlert\n    variant=\"info\"\n    heading=\"Did you know?\"\n    message=\"There is a new range of coffees to try.\"\n  >\n    <IcButton\n      slot=\"action\"\n      variant=\"secondary\"\n      appearance=\"dark\"\n      onClick={(ev) => console.log(ev)}\n    >\n      View Drinks\n    </IcButton>\n  </IcAlert>\n</ComponentPreview>\n\n### Title above\n\nexport const snippetsTitleAbove = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-alert \n    heading=\"What is Coffee?\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \n    title-above=\"true\" \n    variant=\"info\">\n  </ic-alert>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAlert \n    heading=\"What is Coffee?\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \n    titleAbove \n    variant=\"info\"/>`,\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={snippetsTitleAbove}>\n  <IcAlert\n    heading=\"What is Coffee?\"\n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\"\n    titleAbove\n    variant=\"info\"\n  />\n</ComponentPreview>\n\n### Responsive title\n\nexport const snippetsResponsiveTitle = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-alert \n    heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\n    variant=\"info\">\n    </ic-alert>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAlert \n    heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\" \n    variant=\"info\"/>`,\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={snippetsResponsiveTitle}>\n  <IcAlert\n    heading=\"Here you can find out lots more information about the world's favourite hot drink.\"\n    message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\n    variant=\"info\"\n  />\n</ComponentPreview>\n\n### Custom message\n\nexport const snippetsCustomMessage = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-alert variant=\"info\" heading=\"Want to know more about our coffee?\">\n  <span slot=\"message\"> Go to our <ic-link href=\"/\">coffee page</ic-link> to learn more.</span>\n</ic-alert>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\n  <span slot=\"message\"> Go to our <IcLink href=\"/\">coffee page</IcLink> to learn more.</span>\n</IcAlert>`,\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={snippetsCustomMessage}>\n  <IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\n    <span\n      slot=\"message\"\n      style={{\n        font: \"var(--ic-font-body)\",\n        letterSpacing: \"var(--ic-font-letter-spacing-0pt005)\",\n      }}\n    >\n      Got to our{\" \"}\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\n        coffee page\n      </IcLink>{\" \"}\n      to learn more.\n    </span>\n  </IcAlert>\n</ComponentPreview>\n",
       "path": "/components/alert/code",
       "date": "2024-02-02",
       "title": "Alert",
@@ -846,10 +846,10 @@
       ],
       "meta": {
         "relativePath": "components/alerts/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.492Z",
-        "lastModified": "2024-04-08T22:24:28.492Z",
-        "size": 7969,
-        "formattedSize": "7.8 KB"
+        "createdAt": "2024-04-08T22:26:50.756Z",
+        "lastModified": "2024-04-08T22:26:50.756Z",
+        "size": 9637,
+        "formattedSize": "9.4 KB"
       }
     },
     {
@@ -917,7 +917,7 @@
     },
     {
       "id": "components__back-to-top__codex",
-      "contents": "\nimport { IcButton } from \"@ukic/react\";\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-back-to-top target=\"main\" />`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcBackToTop target=\"main\" />`,\n  },\n];\n\n## Component demo\n\n<ComponentPreview snippets={snippets}>\n  <IcButton\n    variant=\"secondary\"\n    onClick={() => {\n      window.scrollTo(0, document.body.scrollHeight);\n    }}\n  >\n    Show Back to top\n  </IcButton>\n</ComponentPreview>\n\n## Back to top details\n\n<ComponentDetails component=\"ic-back-to-top\" />\n",
+      "contents": "\nimport { IcButton } from \"@ukic/react\";\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-back-to-top target=\"main\" />`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcBackToTop target=\"main\" />`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n## Component demo\n\n<ComponentPreview snippets={snippets}>\n  <IcButton\n    variant=\"secondary\"\n    onClick={() => {\n      window.scrollTo(0, document.body.scrollHeight);\n    }}\n  >\n    Show Back to top\n  </IcButton>\n</ComponentPreview>\n\n## Back to top details\n\n<ComponentDetails component=\"ic-back-to-top\" />\n",
       "path": "/components/back-to-top/code",
       "date": "2023-02-03",
       "title": "Back to top",
@@ -940,10 +940,10 @@
       ],
       "meta": {
         "relativePath": "components/back-to-top/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.492Z",
-        "lastModified": "2024-04-08T22:24:28.492Z",
-        "size": 1070,
-        "formattedSize": "1.0 KB"
+        "createdAt": "2024-04-08T22:26:50.756Z",
+        "lastModified": "2024-04-08T22:26:50.756Z",
+        "size": 1348,
+        "formattedSize": "1.3 KB"
       }
     },
     {
@@ -1011,7 +1011,7 @@
     },
     {
       "id": "components__badge__codex",
-      "contents": "\nimport {\n  IcButton,\n  IcBadge,\n  SlottedSVG,\n  IcChip,\n  IcTab,\n  IcTabPanel,\n  IcTabContext,\n  IcTabGroup,\n} from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge       \n    text-label=\"1000\"\n    max-number=\"99\"\n    slot=\"badge\"\n    variant=\"info\"\n  >\n  </ic-badge>\n  Coffee orders\n</ic-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge\n    textLabel=\"1000\"\n    maxNumber=\"99\"\n    slot=\"badge\"\n    variant=\"info\"\n  />\n  Coffee orders\n</IcButton>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge textLabel=\"1000\" maxNumber=\"99\" slot=\"badge\" variant=\"info\" />\n    Coffee orders\n  </IcButton>\n</ComponentPreview>\n\n## Badge details\n\n<ComponentDetails component=\"ic-badge\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button size=\"small\" variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge size=\"small\" text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button size=\"large\" variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge size=\"large\" text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcButton size=\"small\" variant=\"secondary\">\n  <IcBadge size=\"small\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n  <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton size=\"large\" variant=\"secondary\">\n  <IcBadge size=\"large\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n  Coffee orders\n</IcButton>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSizes}>\n  <IcButton size=\"small\" variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"small\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"default\" />\n    Coffee orders\n  </IcButton>\n  <IcButton size=\"large\" variant=\"secondary\">\n    <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"large\" />\n    Coffee orders\n  </IcButton>\n</ComponentPreview>\n\n### Status\n\nexport const snippetsStatus = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"8\" variant=\"neutral\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"New\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"Unavailable\" variant=\"error\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"Available\" variant=\"success\"></ic-badge>\n  Coffee orders\n</ic-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\"/>\n  Coffee orders\n</IcButton>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsStatus}>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\" />\n    Coffee orders\n  </IcButton>\n</ComponentPreview>\n\n### Types\n\nexport const snippetsInformation = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" type=\"text\" text-label=\"8\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" type=\"dot\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n<ic-badge type=\"icon\" slot=\"badge\" variant=\"info\">\n  <svg\n    slot=\"badge-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    aria-label=\"retry\"\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-badge> \n  Coffee orders\n</ic-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" type=\"text\" textLabel=\"8\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" type=\"dot\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\n    <svg\n      slot=\"badge-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      aria-label=\"retry\"\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  </IcBadge>\n  Coffee orders\n</IcButton>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsInformation}>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge textLabel=\"8\" slot=\"badge\" type=\"text\" variant=\"info\" />\n      Coffee orders\n    </IcButton>\n  </div>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge type=\"dot\" slot=\"badge\" variant=\"info\" />\n      Coffee orders\n    </IcButton>\n  </div>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\n        <SlottedSVG\n          width=\"24px\"\n          height=\"24px\"\n          slot=\"badge-icon\"\n          viewBox=\"0 0 24 24\"\n          aria-label=\"retry\"\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        </SlottedSVG>\n      </IcBadge>\n      Coffee orders\n    </IcButton>\n  </div>\n</ComponentPreview>\n\n### Max number\n\nexport const snippetsMaxNumber = [\n  {\n    language: \"Web component\",\n    snippet: `<div style=\"padding:16px;\">\n  <ic-button variant=\"secondary\" style=\"margin-right:16px\">\n    <ic-badge \n      text-label=\"1000\" \n      max-number=\"99\" \n      slot=\"badge\" \n      variant=\"info\"\n    >\n    </ic-badge>\n    Coffee orders\n  </ic-button>\n</div>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<div style={{padding:\"16px\"}}>\n  <IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n    <IcBadge\n      textLabel=\"1000\"\n      maxNumber=\"99\"\n      slot=\"badge\"\n      variant=\"info\"\n    />\n    Coffee orders\n  </IcButton>\n</div>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsMaxNumber}>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge textLabel=\"1000\" maxNumber=\"99\" slot=\"badge\" variant=\"info\" />\n      Coffee orders\n    </IcButton>\n  </div>\n</ComponentPreview>\n\n### Positioning\n\nexport const snippetsNear = [\n  {\n    language: \"Web component\",\n    snippet: `<div style=\"padding:16px;\">\n  <ic-chip label=\"Americano\" style=\"margin-right:16px;\">\n    <ic-badge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg> \n    </ic-badge>\n  </ic-chip>\n    <ic-chip label=\"Americano\" style=\"margin-right:16px;\">\n    <ic-badge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg> \n    </ic-badge>\n  </ic-chip>\n</div>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<div style={{padding:\"16px\"}}>\n  <IcChip label=\"Americano\" style={{marginRight:\"16px\"}}>\n    <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg> \n    </IcBadge>\n  </IcChip>\n    <IcChip label=\"Americano\" style={{marginRight:\"16px\"}}>\n    <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg>\n    </IcBadge> \n  </IcChip>\n</div>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsNear}>\n  <div style={{ display: \"grid\" }}>\n    <div style={{ padding: \"16px\" }}>\n      <IcChip label=\"Americano\" style={{ marginRight: \"16px\" }}>\n        <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n          <SlottedSVG\n            width=\"24px\"\n            height=\"24px\"\n            slot=\"badge-icon\"\n            viewBox=\"0 0 24 24\"\n            aria-label=\"success\"\n          >\n            <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n          </SlottedSVG>\n        </IcBadge>\n      </IcChip>\n      <IcChip label=\"Americano\" style={{ marginRight: \"16px\" }}>\n        <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n          <SlottedSVG\n            width=\"24px\"\n            height=\"24px\"\n            slot=\"badge-icon\"\n            viewBox=\"0 0 24 24\"\n            aria-label=\"success\"\n          >\n            <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n          </SlottedSVG>\n        </IcBadge>\n      </IcChip>\n    </div>\n  </div>\n</ComponentPreview>\n\n### Position inline\n\nexport const snippetsInline = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab> About\n    </ic-tab>\n    <ic-tab>\n    Ingredients\n    </ic-tab>\n    <ic-tab>\n    Orders\n      <ic-badge\n        text-label=\"8\"\n        slot=\"badge\"\n        position=\"inline\"\n        size=\"large\"\n        accessible-label=\"1 notification found\"\n        variant=\"info\"\n      >\n      </ic-badge>\n    </ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>About page</ic-tab-panel>\n  <ic-tab-panel>Ingredients page</ic-tab-panel>\n  <ic-tab-panel>Orders page</ic-tab-panel>\n</ic-tab-context>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTabContext>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>\n    About\n    </IcTab>\n    <IcTab>\n    Ingredients\n    </IcTab>\n    <IcTab>\n    Orders\n      <IcBadge\n        textLabel=\"8\"\n        slot=\"badge\"\n        position=\"inline\"\n        size=\"large\"\n        accessibleLabel=\"1 notification found\"\n        variant=\"info\"\n      />\n    </IcTab>\n  </IcTabGroup>\n  <IcTabPanel>About page</IcTabPanel>\n  <IcTabPanel>Ingredients page</IcTabPanel>\n  <IcTabPanel>Orders page</IcTabPanel>\n</IcTabContext>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsInline}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>About</IcTab>\n      <IcTab>Ingredients</IcTab>\n      <IcTab>\n        Orders\n        <IcBadge\n          textLabel=\"8\"\n          slot=\"badge\"\n          position=\"inline\"\n          size=\"large\"\n          accessibleLabel=\"1 notification found\"\n          variant=\"info\"\n        />\n      </IcTab>\n    </IcTabGroup>\n    <IcTabPanel>About page</IcTabPanel>\n    <IcTabPanel>Ingredients page</IcTabPanel>\n    <IcTabPanel>Orders page</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Hide and show badge\n\nClick the button to hide and show the badge.\n\nexport const snippetsHideBadge = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  function showHideBadge() {\n    badge = document.querySelector(\"ic-badge\");\n    if (badge.classList.contains(\"show\")) {\n      badge.visible = false;\n    } else {\n      badge.visible = true;\n    }\n  }\n</script>\n<div style=\"padding:16px;\">\n  <ic-button variant=\"secondary\" onclick=\"showHideBadge()\">\n    <ic-badge text-label=\"8\" slot=\"badge\"></ic-badge>\n    Coffee orders\n  </ic-button>\n</div> `,\n  },\n  {\n    language: \"React\",\n    snippet: `export const ToggleBadge = () => {\n  const [showBadge, setShowBadge] = useState(false);\n  const handleShowHideBadge = () => {\n    setShowBadge(!showBadge);\n  };\n  return (\n    <div style={{ padding: '16px' }}>\n      <IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\n        <IcBadge\n          variant=\"info\"\n          textLabel=\"8\"\n          slot=\"badge\"\n          visible={showBadge}\n        />\n        Coffee orders\n      </IcButton>\n    </div>\n  );\n};`,\n  },\n];\n\nexport const ToggleBadge = () => {\n  const [showBadge, setShowBadge] = useState(false);\n  const handleShowHideBadge = () => {\n    setShowBadge(!showBadge);\n  };\n  return (\n    <div style={{ padding: \"16px\" }}>\n      <IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\n        <IcBadge\n          variant=\"info\"\n          textLabel=\"8\"\n          slot=\"badge\"\n          visible={showBadge}\n        />\n        Coffee orders\n      </IcButton>\n    </div>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippetsHideBadge}\n>\n  <ToggleBadge />\n</ComponentPreview>\n\n### Accessible label\n\nexport const snippetsAccessibleLabel = [\n  {\n    language: \"Web component\",\n    snippet: `<div style=\"padding:16px;\">\n  <ic-button variant=\"secondary\" style=\"margin-right:16px\"> \n    <ic-badge\n      text-label=\"8\"\n      slot=\"badge\"\n      size=\"large\"\n      variant=\"info\"\n      accessible-label=\"8 coffee orders found\"\n    >\n    </ic-badge>\n    Coffee orders\n  </ic-button>\n</div>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<div style={{padding:\"16px\"}}>\n  <IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n    <IcBadge\n      textLabel=\"8\"\n      slot=\"badge\"\n      size=\"large\"\n      variant=\"info\"\n      accessibleLabel=\"8 coffee orders found\"\n    />\n    Coffee orders\n  </IcButton>\n</div>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsAccessibleLabel}>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge\n        textLabel=\"8\"\n        slot=\"badge\"\n        size=\"large\"\n        accessibleLabel=\"8 coffee orders found\"\n        variant=\"info\"\n      />\n      Coffee orders\n    </IcButton>\n  </div>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcButton,\n  IcBadge,\n  SlottedSVG,\n  IcChip,\n  IcTab,\n  IcTabPanel,\n  IcTabContext,\n  IcTabGroup,\n} 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 variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge       \n    text-label=\"1000\"\n    max-number=\"99\"\n    slot=\"badge\"\n    variant=\"info\"\n  >\n  </ic-badge>\n  Coffee orders\n</ic-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge\n    textLabel=\"1000\"\n    maxNumber=\"99\"\n    slot=\"badge\"\n    variant=\"info\"\n  />\n  Coffee orders\n</IcButton>`,\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={snippetsDefault}>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge textLabel=\"1000\" maxNumber=\"99\" slot=\"badge\" variant=\"info\" />\n    Coffee orders\n  </IcButton>\n</ComponentPreview>\n\n## Badge details\n\n<ComponentDetails component=\"ic-badge\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button size=\"small\" variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button size=\"large\" variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge size=\"large\" text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton size=\"small\" variant=\"secondary\">\n  <IcBadge size=\"small\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n  <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton size=\"large\" variant=\"secondary\">\n  <IcBadge size=\"large\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n  Coffee orders\n</IcButton>`,\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={snippetsSizes}>\n  <IcButton size=\"small\" variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"small\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"default\" />\n    Coffee orders\n  </IcButton>\n  <IcButton size=\"large\" variant=\"secondary\">\n    <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"large\" />\n    Coffee orders\n  </IcButton>\n</ComponentPreview>\n\n### Status\n\nexport const snippetsStatus = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"8\" variant=\"neutral\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"New\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"Unavailable\" variant=\"error\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" text-label=\"Available\" variant=\"success\"></ic-badge>\n  Coffee orders\n</ic-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\"/>\n  Coffee orders\n</IcButton>`,\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={snippetsStatus}>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\" />\n    Coffee orders\n  </IcButton>\n  <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n    <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\" />\n    Coffee orders\n  </IcButton>\n</ComponentPreview>\n\n### Types\n\nexport const snippetsInformation = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" type=\"text\" text-label=\"8\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n  <ic-badge slot=\"badge\" type=\"dot\" variant=\"info\"></ic-badge>\n  Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\" style=\"margin-right:16px\">\n<ic-badge type=\"icon\" slot=\"badge\" variant=\"info\">\n  <svg\n    slot=\"badge-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    aria-label=\"retry\"\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-badge> \n  Coffee orders\n</ic-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" type=\"text\" textLabel=\"8\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge slot=\"badge\" type=\"dot\" variant=\"info\"/>\n  Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n  <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\n    <svg\n      slot=\"badge-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      aria-label=\"retry\"\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  </IcBadge>\n  Coffee orders\n</IcButton>`,\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={snippetsInformation}>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge textLabel=\"8\" slot=\"badge\" type=\"text\" variant=\"info\" />\n      Coffee orders\n    </IcButton>\n  </div>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge type=\"dot\" slot=\"badge\" variant=\"info\" />\n      Coffee orders\n    </IcButton>\n  </div>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\n        <SlottedSVG\n          width=\"24px\"\n          height=\"24px\"\n          slot=\"badge-icon\"\n          viewBox=\"0 0 24 24\"\n          aria-label=\"retry\"\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        </SlottedSVG>\n      </IcBadge>\n      Coffee orders\n    </IcButton>\n  </div>\n</ComponentPreview>\n\n### Max number\n\nexport const snippetsMaxNumber = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<div style=\"padding:16px;\">\n  <ic-button variant=\"secondary\" style=\"margin-right:16px\">\n    <ic-badge \n      text-label=\"1000\" \n      max-number=\"99\" \n      slot=\"badge\" \n      variant=\"info\"\n    >\n    </ic-badge>\n    Coffee orders\n  </ic-button>\n</div>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<div style={{padding:\"16px\"}}>\n  <IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n    <IcBadge\n      textLabel=\"1000\"\n      maxNumber=\"99\"\n      slot=\"badge\"\n      variant=\"info\"\n    />\n    Coffee orders\n  </IcButton>\n</div>`,\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={snippetsMaxNumber}>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge textLabel=\"1000\" maxNumber=\"99\" slot=\"badge\" variant=\"info\" />\n      Coffee orders\n    </IcButton>\n  </div>\n</ComponentPreview>\n\n### Positioning\n\nexport const snippetsNear = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<div style=\"padding:16px;\">\n  <ic-chip label=\"Americano\" style=\"margin-right:16px;\">\n    <ic-badge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg> \n    </ic-badge>\n  </ic-chip>\n    <ic-chip label=\"Americano\" style=\"margin-right:16px;\">\n    <ic-badge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg> \n    </ic-badge>\n  </ic-chip>\n</div>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<div style={{padding:\"16px\"}}>\n  <IcChip label=\"Americano\" style={{marginRight:\"16px\"}}>\n    <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg> \n    </IcBadge>\n  </IcChip>\n    <IcChip label=\"Americano\" style={{marginRight:\"16px\"}}>\n    <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n      <svg\n        slot=\"badge-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        aria-label=\"success\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n      </svg>\n    </IcBadge> \n  </IcChip>\n</div>`,\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={snippetsNear}>\n  <div style={{ display: \"grid\" }}>\n    <div style={{ padding: \"16px\" }}>\n      <IcChip label=\"Americano\" style={{ marginRight: \"16px\" }}>\n        <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n          <SlottedSVG\n            width=\"24px\"\n            height=\"24px\"\n            slot=\"badge-icon\"\n            viewBox=\"0 0 24 24\"\n            aria-label=\"success\"\n          >\n            <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n          </SlottedSVG>\n        </IcBadge>\n      </IcChip>\n      <IcChip label=\"Americano\" style={{ marginRight: \"16px\" }}>\n        <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n          <SlottedSVG\n            width=\"24px\"\n            height=\"24px\"\n            slot=\"badge-icon\"\n            viewBox=\"0 0 24 24\"\n            aria-label=\"success\"\n          >\n            <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n          </SlottedSVG>\n        </IcBadge>\n      </IcChip>\n    </div>\n  </div>\n</ComponentPreview>\n\n### Position inline\n\nexport const snippetsInline = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab> About\n    </ic-tab>\n    <ic-tab>\n    Ingredients\n    </ic-tab>\n    <ic-tab>\n    Orders\n      <ic-badge\n        text-label=\"8\"\n        slot=\"badge\"\n        position=\"inline\"\n        size=\"large\"\n        accessible-label=\"1 notification found\"\n        variant=\"info\"\n      >\n      </ic-badge>\n    </ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>About page</ic-tab-panel>\n  <ic-tab-panel>Ingredients page</ic-tab-panel>\n  <ic-tab-panel>Orders page</ic-tab-panel>\n</ic-tab-context>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTabContext>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>\n    About\n    </IcTab>\n    <IcTab>\n    Ingredients\n    </IcTab>\n    <IcTab>\n    Orders\n      <IcBadge\n        textLabel=\"8\"\n        slot=\"badge\"\n        position=\"inline\"\n        size=\"large\"\n        accessibleLabel=\"1 notification found\"\n        variant=\"info\"\n      />\n    </IcTab>\n  </IcTabGroup>\n  <IcTabPanel>About page</IcTabPanel>\n  <IcTabPanel>Ingredients page</IcTabPanel>\n  <IcTabPanel>Orders page</IcTabPanel>\n</IcTabContext>`,\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={snippetsInline}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>About</IcTab>\n      <IcTab>Ingredients</IcTab>\n      <IcTab>\n        Orders\n        <IcBadge\n          textLabel=\"8\"\n          slot=\"badge\"\n          position=\"inline\"\n          size=\"large\"\n          accessibleLabel=\"1 notification found\"\n          variant=\"info\"\n        />\n      </IcTab>\n    </IcTabGroup>\n    <IcTabPanel>About page</IcTabPanel>\n    <IcTabPanel>Ingredients page</IcTabPanel>\n    <IcTabPanel>Orders page</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Hide and show badge\n\nClick the button to hide and show the badge.\n\nexport const snippetsHideBadge = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<div style=\"padding:16px;\">\n  <ic-button variant=\"secondary\" onclick=\"showHideBadge()\">\n    <ic-badge text-label=\"8\" slot=\"badge\"></ic-badge>\n    Coffee orders\n  </ic-button>\n</div>\n<script>\n  function showHideBadge() {\n    badge = document.querySelector(\"ic-badge\");\n    if (badge.classList.contains(\"show\")) {\n      badge.visible = false;\n    } else {\n      badge.visible = true;\n    }\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `export const ToggleBadge = () => {\n  const [showBadge, setShowBadge] = useState(false);\n  const handleShowHideBadge = () => {\n    setShowBadge(!showBadge);\n  };\n  return (\n    <div style={{ padding: '16px' }}>\n      <IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\n        <IcBadge\n          variant=\"info\"\n          textLabel=\"8\"\n          slot=\"badge\"\n          visible={showBadge}\n        />\n        Coffee orders\n      </IcButton>\n    </div>\n  );\n};`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const ToggleBadge = () => {\n  const [showBadge, setShowBadge] = useState(false);\n  const handleShowHideBadge = () => {\n    setShowBadge(!showBadge);\n  };\n  return (\n    <div style={{ padding: \"16px\" }}>\n      <IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\n        <IcBadge\n          variant=\"info\"\n          textLabel=\"8\"\n          slot=\"badge\"\n          visible={showBadge}\n        />\n        Coffee orders\n      </IcButton>\n    </div>\n  );\n};\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"center\",\n  }}\n  snippets={snippetsHideBadge}\n>\n  <ToggleBadge />\n</ComponentPreview>\n\n### Accessible label\n\nexport const snippetsAccessibleLabel = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<div style=\"padding:16px;\">\n  <ic-button variant=\"secondary\" style=\"margin-right:16px\"> \n    <ic-badge\n      text-label=\"8\"\n      slot=\"badge\"\n      size=\"large\"\n      variant=\"info\"\n      accessible-label=\"8 coffee orders found\"\n    >\n    </ic-badge>\n    Coffee orders\n  </ic-button>\n</div>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<div style={{padding:\"16px\"}}>\n  <IcButton variant=\"secondary\" style={{marginRight:\"16px\"}}>\n    <IcBadge\n      textLabel=\"8\"\n      slot=\"badge\"\n      size=\"large\"\n      variant=\"info\"\n      accessibleLabel=\"8 coffee orders found\"\n    />\n    Coffee orders\n  </IcButton>\n</div>`,\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={snippetsAccessibleLabel}>\n  <div style={{ padding: \"16px\" }}>\n    <IcButton variant=\"secondary\" style={{ marginRight: \"16px\" }}>\n      <IcBadge\n        textLabel=\"8\"\n        slot=\"badge\"\n        size=\"large\"\n        accessibleLabel=\"8 coffee orders found\"\n        variant=\"info\"\n      />\n      Coffee orders\n    </IcButton>\n  </div>\n</ComponentPreview>\n",
       "path": "/components/badge/code",
       "date": "2024-02-02",
       "title": "Badge",
@@ -1034,10 +1034,10 @@
       ],
       "meta": {
         "relativePath": "components/badge/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.504Z",
-        "lastModified": "2024-04-08T22:24:28.504Z",
-        "size": 17078,
-        "formattedSize": "16.7 KB"
+        "createdAt": "2024-04-08T22:29:54.448Z",
+        "lastModified": "2024-04-08T22:29:54.448Z",
+        "size": 19566,
+        "formattedSize": "19.1 KB"
       }
     },
     {
@@ -1105,7 +1105,7 @@
     },
     {
       "id": "components__breadcrumbs__codex",
-      "contents": "\nimport { IcBreadcrumbGroup, IcBreadcrumb, IcLink } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-breadcrumb-group>\n  <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb \n    current=\"true\" \n    page-title=\"Coffee\" \n    href=\"#\"\n  >\n  </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcBreadcrumbGroup>\n  <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n  <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n  <IcBreadcrumb \n    current \n    pageTitle=\"Coffee\"\n    href=\"#\"\n  />\n</IcBreadcrumbGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcBreadcrumbGroup>\n    <IcBreadcrumb\n      pageTitle=\"Home\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      current\n      pageTitle=\"Coffee\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n## Breadcrumb details\n\n<ComponentDetails component=\"ic-breadcrumb\" />\n\n## Breadcrumb group details\n\n<ComponentDetails component=\"ic-breadcrumb-group\" />\n\n## Variants\n\n### Back\n\nexport const back = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-breadcrumb-group back-breadcrumb-only=\"true\">\n  <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb \n    current=\"true\" \n    page-title=\"Coffee\" \n    href=\"#\"\n  >\n  </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcBreadcrumbGroup backBreadcrumbOnly>\n  <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n  <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n  <IcBreadcrumb \n    current \n    pageTitle=\"Coffee\"\n    href=\"#\"\n  />\n</IcBreadcrumbGroup>`,\n  },\n];\n\n<ComponentPreview snippets={back}>\n  <IcBreadcrumbGroup backBreadcrumbOnly>\n    <IcBreadcrumb\n      pageTitle=\"Home\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      current\n      pageTitle=\"Coffee\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### With icons\n\nexport const withIcons = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-breadcrumb-group>\n  <ic-breadcrumb page-title=\"Home\" href=\"#\">\n    <svg\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\">\n    <svg\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </ic-breadcrumb>\n  <ic-breadcrumb \n    current=\"true\" \n    page-title=\"Coffee\" \n    href=\"#\"\n  >\n    <svg\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcBreadcrumbGroup>\n  <IcBreadcrumb pageTitle=\"Home\" href=\"#\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n        fill=\"currentColor\"\n      />\n    </SlottedSVG>\n  </IcBreadcrumb>\n  <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n        fill=\"currentColor\"\n      />\n    </SlottedSVG>\n  </IcBreadcrumb>\n  <IcBreadcrumb \n    pageTitle=\"Coffee\" \n    current\n    href=\"#\"\n  >\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n        fill=\"currentColor\"\n      />\n    </SlottedSVG>\n  </IcBreadcrumb>\n</IcBreadcrumbGroup>`,\n  },\n];\n\n<ComponentPreview snippets={withIcons}>\n  <IcBreadcrumbGroup>\n    <IcBreadcrumb pageTitle=\"Home\" href=\"#\" onClick={(e) => e.preventDefault()}>\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </IcBreadcrumb>\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </IcBreadcrumb>\n    <IcBreadcrumb\n      pageTitle=\"Coffee\"\n      current\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </IcBreadcrumb>\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### Collapsed\n\nexport const collapsed = [\n  {\n    language: \"Web component\",\n    snippet: ` <ic-breadcrumb-group collapsed=\"true\">\n  <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb \n      current=\"true\" \n      page-title=\"Coffee\" \n      href=\"#\"\n    >\n    </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcBreadcrumbGroup collapsed>\n    <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n    <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n    <IcBreadcrumb \n      pageTitle=\"Coffee\" \n      current\n      href=\"#\"\n    />\n</IcBreadcrumbGroup>`,\n  },\n];\n\n<ComponentPreview snippets={collapsed}>\n  <IcBreadcrumbGroup collapsed>\n    <IcBreadcrumb\n      pageTitle=\"Home\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Coffee\"\n      current\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    language: \"React\",\n    snippet: `<MemoryRouter initialEntries={[\"/\"]}>\n  <IcBreadcrumbGroup>\n    <IcBreadcrumb pageTitle=\"Home\">\n      <IcLink>\n        <NavLink slot=\"router-item\" to=\"/\">Home</NavLink>\n      </IcLink>\n    </IcBreadcrumb>\n    <IcBreadcrumb pageTitle=\"Beverages\">\n      <IcLink>\n        <NavLink slot=\"router-item\" to=\"/\">Beverages</NavLink>\n      </IcLink>\n    </IcBreadcrumb>\n    <IcBreadcrumb pageTitle=\"Coffee\" current>\n      <IcLink>\n        <NavLink to=\"/\" slot=\"router-item\">Coffee</NavLink>\n      </IcLink>\n    </IcBreadcrumb>\n  </IcBreadcrumbGroup>\n</MemoryRouter>\n`,\n  },\n];\n\n<ComponentPreview snippets={withReactRouter}>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcBreadcrumbGroup>\n      <IcBreadcrumb pageTitle=\"Home\">\n        <IcLink>\n          <NavLink slot=\"router-item\" to=\"/\">\n            Home\n          </NavLink>\n        </IcLink>\n      </IcBreadcrumb>\n      <IcBreadcrumb pageTitle=\"Beverages\">\n        <IcLink>\n          <NavLink slot=\"router-item\" to=\"/\">\n            Beverages\n          </NavLink>\n        </IcLink>\n      </IcBreadcrumb>\n      <IcBreadcrumb pageTitle=\"Coffee\" current>\n        <IcLink>\n          <NavLink to=\"/\" slot=\"router-item\">\n            Coffee\n          </NavLink>\n        </IcLink>\n      </IcBreadcrumb>\n    </IcBreadcrumbGroup>\n  </MemoryRouter>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcBreadcrumbGroup, IcBreadcrumb, IcLink } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-breadcrumb-group>\n  <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb \n    current=\"true\" \n    page-title=\"Coffee\" \n    href=\"#\"\n  >\n  </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcBreadcrumbGroup>\n  <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n  <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n  <IcBreadcrumb \n    current \n    pageTitle=\"Coffee\"\n    href=\"#\"\n  />\n</IcBreadcrumbGroup>`,\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={snippets}>\n  <IcBreadcrumbGroup>\n    <IcBreadcrumb\n      pageTitle=\"Home\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      current\n      pageTitle=\"Coffee\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n## Breadcrumb details\n\n<ComponentDetails component=\"ic-breadcrumb\" />\n\n## Breadcrumb group details\n\n<ComponentDetails component=\"ic-breadcrumb-group\" />\n\n## Variants\n\n### Back\n\nexport const back = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-breadcrumb-group back-breadcrumb-only=\"true\">\n  <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb \n    current=\"true\" \n    page-title=\"Coffee\" \n    href=\"#\"\n  >\n  </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcBreadcrumbGroup backBreadcrumbOnly>\n  <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n  <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n  <IcBreadcrumb \n    current \n    pageTitle=\"Coffee\"\n    href=\"#\"\n  />\n</IcBreadcrumbGroup>`,\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={back}>\n  <IcBreadcrumbGroup backBreadcrumbOnly>\n    <IcBreadcrumb\n      pageTitle=\"Home\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      current\n      pageTitle=\"Coffee\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### With icons\n\nexport const withIcons = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-breadcrumb-group>\n  <ic-breadcrumb page-title=\"Home\" href=\"#\">\n    <svg\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\">\n    <svg\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </ic-breadcrumb>\n  <ic-breadcrumb \n    current=\"true\" \n    page-title=\"Coffee\" \n    href=\"#\"\n  >\n    <svg\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcBreadcrumbGroup>\n  <IcBreadcrumb pageTitle=\"Home\" href=\"#\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n        fill=\"currentColor\"\n      />\n    </SlottedSVG>\n  </IcBreadcrumb>\n  <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\">\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n        fill=\"currentColor\"\n      />\n    </SlottedSVG>\n  </IcBreadcrumb>\n  <IcBreadcrumb \n    pageTitle=\"Coffee\" \n    current\n    href=\"#\"\n  >\n    <SlottedSVG\n      slot=\"icon\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n        fill=\"currentColor\"\n      />\n    </SlottedSVG>\n  </IcBreadcrumb>\n</IcBreadcrumbGroup>`,\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={withIcons}>\n  <IcBreadcrumbGroup>\n    <IcBreadcrumb pageTitle=\"Home\" href=\"#\" onClick={(e) => e.preventDefault()}>\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </IcBreadcrumb>\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </IcBreadcrumb>\n    <IcBreadcrumb\n      pageTitle=\"Coffee\"\n      current\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </IcBreadcrumb>\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### Collapsed\n\nexport const collapsed = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: ` <ic-breadcrumb-group collapsed=\"true\">\n  <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n  <ic-breadcrumb \n      current=\"true\" \n      page-title=\"Coffee\" \n      href=\"#\"\n    >\n    </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcBreadcrumbGroup collapsed>\n    <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n    <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n    <IcBreadcrumb \n      pageTitle=\"Coffee\" \n      current\n      href=\"#\"\n    />\n</IcBreadcrumbGroup>`,\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={collapsed}>\n  <IcBreadcrumbGroup collapsed>\n    <IcBreadcrumb\n      pageTitle=\"Home\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Beverages\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcBreadcrumb\n      pageTitle=\"Coffee\"\n      current\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<MemoryRouter initialEntries={[\"/\"]}>\n  <IcBreadcrumbGroup>\n    <IcBreadcrumb pageTitle=\"Home\">\n      <IcLink>\n        <NavLink slot=\"router-item\" to=\"/\">Home</NavLink>\n      </IcLink>\n    </IcBreadcrumb>\n    <IcBreadcrumb pageTitle=\"Beverages\">\n      <IcLink>\n        <NavLink slot=\"router-item\" to=\"/\">Beverages</NavLink>\n      </IcLink>\n    </IcBreadcrumb>\n    <IcBreadcrumb pageTitle=\"Coffee\" current>\n      <IcLink>\n        <NavLink to=\"/\" slot=\"router-item\">Coffee</NavLink>\n      </IcLink>\n    </IcBreadcrumb>\n  </IcBreadcrumbGroup>\n</MemoryRouter>\n`,\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={withReactRouter}>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcBreadcrumbGroup>\n      <IcBreadcrumb pageTitle=\"Home\">\n        <IcLink>\n          <NavLink slot=\"router-item\" to=\"/\">\n            Home\n          </NavLink>\n        </IcLink>\n      </IcBreadcrumb>\n      <IcBreadcrumb pageTitle=\"Beverages\">\n        <IcLink>\n          <NavLink slot=\"router-item\" to=\"/\">\n            Beverages\n          </NavLink>\n        </IcLink>\n      </IcBreadcrumb>\n      <IcBreadcrumb pageTitle=\"Coffee\" current>\n        <IcLink>\n          <NavLink to=\"/\" slot=\"router-item\">\n            Coffee\n          </NavLink>\n        </IcLink>\n      </IcBreadcrumb>\n    </IcBreadcrumbGroup>\n  </MemoryRouter>\n</ComponentPreview>\n",
       "path": "/components/breadcrumb/code",
       "date": "2024-02-02",
       "title": "Breadcrumb",
@@ -1128,10 +1128,10 @@
       ],
       "meta": {
         "relativePath": "components/breadcrumbs/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.512Z",
-        "lastModified": "2024-04-08T22:24:28.512Z",
-        "size": 10210,
-        "formattedSize": "10.0 KB"
+        "createdAt": "2024-04-08T22:26:50.756Z",
+        "lastModified": "2024-04-08T22:26:50.756Z",
+        "size": 11548,
+        "formattedSize": "11.3 KB"
       }
     },
     {
@@ -1199,7 +1199,7 @@
     },
     {
       "id": "components__buttons__codex",
-      "contents": "\nimport { IcButton } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<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<script>\n  const btn = document.querySelector('#my-button');\n  btn.addEventListener('click', (ev) => {\n    console.log(ev);\n  })\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>Add to order</IcButton>\n  <IcButton variant=\"secondary\">View coffees</IcButton>\n  <IcButton variant=\"tertiary\">Find out more</IcButton>\n  <IcButton variant=\"destructive\">Cancel order</IcButton>`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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    language: \"Web component\",\n    snippet: `<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  },\n  {\n    language: \"React\",\n    snippet: `<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  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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    language: \"Web component\",\n    snippet: `<ic-button variant=\"primary\">\n  <svg\n    slot=\"left-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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>Refresh order status\n</ic-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcButton variant=\"primary\">\n  <SlottedSVG\n    slot=\"left-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\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\nexport const snippetsIcon = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button variant=\"icon\" aria-label=\"refresh\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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  },\n  {\n    language: \"React\",\n    snippet: `<IcButton variant=\"icon\" aria-label=\"refresh\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} snippets={snippetsIcon}>\n  <IcButton variant=\"icon\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\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### Sizing\n\nexport const snippetsSizing = [\n  {\n    language: \"Web component\",\n    snippet: `<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  },\n  {\n    language: \"React\",\n    snippet: `<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  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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    language: \"Web component\",\n    snippet: `<ic-button variant=\"primary\">\n    Add to order\n    </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  },\n  {\n    language: \"React\",\n    snippet: `<IcButton variant=\"primary\">\n    Add to order\n    </IcButton>\n<IcButton variant=\"primary\" appearance=\"dark\">Add to order</IcButton>\n<IcButton variant=\"primary\" appearance=\"light\">Add to order</IcButton>`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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 FileUpload = () => {\n  function updateFileList(fileArray) {\n    const fileList = [];\n    Array.from(fileArray).forEach((file) => {\n      fileList.push(file.name);\n    });\n    return fileList.join(\", \");\n  }\n  return (\n    <IcButton\n      variant=\"primary\"\n      fileUpload\n      accept=\".doc, text/plain, .json, .png\"\n      onClick={() =>\n        document.addEventListener(\"icFileSelection\", (event) =>\n          console.log(updateFileList(event.detail))\n        )\n      }\n    >\n      Upload File\n    </IcButton>\n  );\n};\n\nexport const snippetsFileUpload = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button\n  variant=\"primary\"\n  id=\"file-button\"\n  file-upload=\"true\"\n  accept=\".doc, text/plain, .json, .png\"\n>\n  Upload File\n</ic-button>\n<script>\n  var file;\n  onclick = document\n    .querySelector(\"#file-button\")\n    .addEventListener(\"icFileSelection\", (ev) => {\n      const fileArray = ev.detail;\n      const fileList = [];\n      Array.from(fileArray).forEach((file) => {\n        fileList.push(file.name);\n      });\n      console.log(fileList.join(\", \"));\n    });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `export const FileUpload = () => {\n  function updateFileList(fileArray) {\n    const fileList = [];\n    Array.from(fileArray).forEach((file) => {\n      fileList.push(file.name);\n    });\n    return fileList.join(\", \");\n  }\n  return (\n    <IcButton\n      variant=\"primary\"\n      fileUpload\n      accept=\".doc, text/plain, .json, .png\"\n      onClick={(event) =>\n        document.addEventListener(\"icFileSelection\", (event) =>\n          console.log(updateFileList(event.detail))\n        )\n      }\n    >\n      Upload File\n    </IcButton>\n  ); \n};`,\n  },\n];\n\n<ComponentPreview snippets={snippetsFileUpload}>\n  <FileUpload />\n</ComponentPreview>\n",
+      "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<script>\n  const btn = document.querySelector('#my-button');\n  btn.addEventListener('click', (ev) => {\n    console.log(ev);\n  })\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>Add to order</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: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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: `{shortCode}`,\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: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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>Refresh order status\n</ic-button>`,\n      long: `{shortCode}`,\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=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\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\nexport const snippetsIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button variant=\"icon\" aria-label=\"refresh\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"icon\" aria-label=\"refresh\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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      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={{ gap: \"8px\" }} snippets={snippetsIcon}>\n  <IcButton variant=\"icon\" aria-label=\"refresh\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\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### 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: `{shortCode}`,\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: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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\">\n    Add to order\n    </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: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcButton variant=\"primary\">\n    Add to order\n    </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: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} 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 FileUpload = () => {\n  function updateFileList(fileArray) {\n    const fileList = [];\n    Array.from(fileArray).forEach((file) => {\n      fileList.push(file.name);\n    });\n    return fileList.join(\", \");\n  }\n  return (\n    <IcButton\n      variant=\"primary\"\n      fileUpload\n      accept=\".doc, text/plain, .json, .png\"\n      onClick={() =>\n        document.addEventListener(\"icFileSelection\", (event) =>\n          console.log(updateFileList(event.detail))\n        )\n      }\n    >\n      Upload File\n    </IcButton>\n  );\n};\n\nexport const snippetsFileUpload = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button\n  variant=\"primary\"\n  id=\"file-button\"\n  file-upload=\"true\"\n  accept=\".doc, text/plain, .json, .png\"\n>\n  Upload File\n</ic-button>\n<script>\n  var file;\n  onclick = document\n    .querySelector(\"#file-button\")\n    .addEventListener(\"icFileSelection\", (ev) => {\n      const fileArray = ev.detail;\n      const fileList = [];\n      Array.from(fileArray).forEach((file) => {\n        fileList.push(file.name);\n      });\n      console.log(fileList.join(\", \"));\n    });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `export const FileUpload = () => {\n  function updateFileList(fileArray) {\n    const fileList = [];\n    Array.from(fileArray).forEach((file) => {\n      fileList.push(file.name);\n    });\n    return fileList.join(\", \");\n  }\n  return (\n    <IcButton\n      variant=\"primary\"\n      fileUpload\n      accept=\".doc, text/plain, .json, .png\"\n      onClick={(event) =>\n        document.addEventListener(\"icFileSelection\", (event) =>\n          console.log(updateFileList(event.detail))\n        )\n      }\n    >\n      Upload File\n    </IcButton>\n  ); \n};`,\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={snippetsFileUpload}>\n  <FileUpload />\n</ComponentPreview>\n",
       "path": "/components/button/code",
       "date": "2024-03-13",
       "title": "Button",
@@ -1222,10 +1222,10 @@
       ],
       "meta": {
         "relativePath": "components/buttons/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.516Z",
-        "lastModified": "2024-04-08T22:24:28.516Z",
-        "size": 9561,
-        "formattedSize": "9.3 KB"
+        "createdAt": "2024-04-08T22:26:50.760Z",
+        "lastModified": "2024-04-08T22:26:50.760Z",
+        "size": 11507,
+        "formattedSize": "11.2 KB"
       }
     },
     {
@@ -1293,7 +1293,7 @@
     },
     {
       "id": "components__cards__codex",
-      "contents": "\nimport {\n  IcCard,\n  IcStatusTag,\n  IcButton,\n  IcTypography,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\nexport const CardIcon = () => (\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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);\n\nexport const InteractionIcon = () => (\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);\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n    heading=\"Americano order\" \n    subheading=\"Name: Michael\" \n    message=\"Extras: Double espresso shot and oat milk.\"\n    style=\"width:360px;\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n  <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <ic-status-tag slot=\"adornment\" label=\"In Progress\" small=\"true\"></ic-status-tag>\n    <svg\n        slot=\"image-mid\"\n        style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n        viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <div \n      slot=\"interaction-controls\" \n      style={{ display: \"flex\", gap: \"16px\" \n      }}>\n      <ic-button variant=\"primary\">Accept</ic-button>\n      <ic-button variant=\"secondary\">Cancel</ic-button>\n    </div>\n    <ic-typography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </ic-typography>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n    heading=\"Americano order\" \n    subheading=\"Name: Michael\" \n    message=\"Extras: Double espresso shot and oat milk.\"\n    style={{width: \"360px\"}}>\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n  <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <IcStatusTag slot=\"adornment\" label=\"In Progress\" small />\n    <SlottedSVG\n      slot=\"image-mid\"\n      style={{\n      height: \"100%\",\n      width: \"100%\",\n      maxHeight: \"20.375rem\",\n      maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n  <div \n      slot=\"interaction-controls\" \n      style={{ display: \"flex\", gap: \"16px\" \n      }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n    <IcTypography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </IcTypography>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    expandable\n    style={{ width: \"360px\" }}\n  >\n    <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" small />\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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    <svg\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n    <IcTypography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </IcTypography>\n  </IcCard>\n</ComponentPreview>\n\n## Card details\n\n<ComponentDetails component=\"ic-card\" />\n\n## Variants\n\n### Heading only\n\nexport const headingOnly = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card heading=\"Americano order\"></ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard heading=\"Americano order\"></IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={headingOnly}>\n  <IcCard heading=\"Americano order\" />\n</ComponentPreview>\n\n### With icon\n\nexport const withIcon = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card heading=\"Americano order\">\n  \n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard heading=\"Americano order\">\n  <SlottedSVG     \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={withIcon}>\n  <IcCard heading=\"Americano order\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcCard>\n</ComponentPreview>\n\n### Message\n\nexport const withMessage = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\n  <SlottedSVG     \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={withMessage}>\n  <IcCard\n    heading=\"Americano order\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### With subheading\n\nexport const withSubHeading = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n  <SlottedSVG     \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={withSubHeading}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Interaction button\n\nexport const interactionButton = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <SlottedSVG     \n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n  <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n    <SlottedSVG 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</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={interactionButton}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n      <InteractionIcon />\n    </IcButton>\n  </IcCard>\n</ComponentPreview>\n\n### Adornment\n\nexport const adornment = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <SlottedSVG \n      slot=\"icon\"   \n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n  <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={adornment}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcStatusTag\n      slot=\"adornment\"\n      status=\"warning\"\n      label=\"In Progress\"\n      size=\"small\"\n    />\n  </IcCard>\n</ComponentPreview>\n\n### Top image\n\nexport const topImage = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style=\"width:360px;\">\n    <svg\n      slot=\"image-top\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n    <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style={{width: \"360px\"}}>\n    <SlottedSVG\n      slot=\"image-top\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={topImage}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    style={{ width: \"360px\" }}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcStatusTag\n      slot=\"adornment\"\n      status=\"warning\"\n      label=\"In Progress\"\n      size=\"small\"\n    />\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n      <InteractionIcon />\n    </IcButton>\n    <svg\n      slot=\"image-top\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Middle image\n\nexport const midImage = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style=\"width:360px;\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n  <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n    <svg\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style={{width: \"360px\"}}>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n  <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n    <SlottedSVG\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={midImage}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    style={{ width: \"360px\" }}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n      <InteractionIcon />\n    </IcButton>\n    <IcStatusTag\n      slot=\"adornment\"\n      status=\"warning\"\n      label=\"In Progress\"\n      size=\"small\"\n    />\n    <svg\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Interaction controls\n\nexport const interactionControls = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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  <div slot=\"interaction-controls\" style=\"display:flex;gap:16px;\">\n    <ic-button variant=\"primary\">Accept</ic-button>\n    <ic-button variant=\"secondary\">Cancel</ic-button>\n  </div>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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  </SlottedSVG>\n  <div slot=\"interaction-controls\" style={{display: \"flex\", gap: \"16px\"}}>\n    <IcButton variant=\"primary\">Accept</IcButton>\n    <IcButton variant=\"secondary\">Cancel</IcButton>\n  </div>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={interactionControls}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n  </IcCard>\n</ComponentPreview>\n\n### Expandable\n\nexport const expandable = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  expandable=\"true\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n  <div slot=\"interaction-controls\" style=\"display:flex;gap:16px;\">\n    <ic-button variant=\"primary\">Accept</ic-button>\n    <ic-button variant=\"secondary\">Cancel</ic-button>\n  </div>\n  <ic-typography slot=\"expanded-content\" variant=\"body\">\n    To cancel your order click cancel.\n  </ic-typography>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  expandable>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n  <div slot=\"interaction-controls\" style={{display: \"flex\", gap: \"16px\"}}>\n    <IcButton variant=\"primary\">Accept</IcButton>\n    <IcButton variant=\"secondary\">Cancel</IcButton>\n  </div>\n  <IcTypography slot=\"expanded-content\" variant=\"body\">\n    To cancel your order click cancel.\n  </IcTypography>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={expandable}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    expandable\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n    <IcTypography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </IcTypography>\n  </IcCard>\n</ComponentPreview>\n\n### Clickable link\n\nexport const clickableLink = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\"\n  href=\"#\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable\n  href=\"#\">\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={clickableLink}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    href=\"#\"\n    onClick={(e) => e.preventDefault()}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Clickable button\n\nexport const clickableBtn = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card\n  id=\"clickable-card\"\n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>\n<script>\n  const card = document.querySelector('#clickable-card');\n  card.addEventListener('click', (ev) => {\n    console.log(ev);\n  })\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\" \n  clickable\n  onClick={(ev) => console.log(ev)}>\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n   <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={clickableBtn}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    onClick={(ev) => console.log(ev)}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### With badge\n\nexport const withBadge = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\"\n  href=\"#\">\n <ic-badge text-label=\"New\" slot=\"badge\" variant=\"info\" size=\"large\"></ic-badge>\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\" \n  clickable\n  href=\"#\">\n <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\"/>\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={withBadge}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    href=\"#\"\n    onClick={(e) => e.preventDefault()}\n  >\n    <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\" />\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\" \n  disabled=\"true\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\" \n  clickable\n  disabled>\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={disabled}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable\n    disabled\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Full width\n\nexport const fullWidth = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  fullWidth=\"true\"\n  clickable=\"true\"> \n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  fullWidth\n  clickable>\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\n  },\n];\n\n<ComponentPreview snippets={fullWidth}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    fullWidth=\"true\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Wrapped by link\n\nexport const wrapped = [\n  {\n    language: \"Web component\",\n    snippet: `<a href=\"/\">\n  <ic-card \n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"> \n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  </ic-card>\n</a>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<a href=\"/\">\n  <IcCard \n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"> \n  <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  </IcCard>\n</a>`,\n  },\n];\n\n<ComponentPreview snippets={wrapped}>\n  <a\n    href=\"/\"\n    onClick={(e) => e.preventDefault()}\n    style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\n    aria-label=\"Americano order card\"\n  >\n    <IcCard\n      heading=\"Americano order\"\n      subheading=\"Name: Michael\"\n      message=\"Extras: Double espresso shot and oat milk.\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </IcCard>\n  </a>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcCard,\n  IcStatusTag,\n  IcButton,\n  IcTypography,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\nexport const CardIcon = () => (\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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);\n\nexport const InteractionIcon = () => (\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);\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n    heading=\"Americano order\" \n    subheading=\"Name: Michael\" \n    message=\"Extras: Double espresso shot and oat milk.\"\n    style=\"width:360px;\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n  <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <ic-status-tag slot=\"adornment\" label=\"In Progress\" small=\"true\"></ic-status-tag>\n    <svg\n        slot=\"image-mid\"\n        style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n        viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <div \n      slot=\"interaction-controls\" \n      style={{ display: \"flex\", gap: \"16px\" \n      }}>\n      <ic-button variant=\"primary\">Accept</ic-button>\n      <ic-button variant=\"secondary\">Cancel</ic-button>\n    </div>\n    <ic-typography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </ic-typography>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n    heading=\"Americano order\" \n    subheading=\"Name: Michael\" \n    message=\"Extras: Double espresso shot and oat milk.\"\n    style={{width: \"360px\"}}>\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n  <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <IcStatusTag slot=\"adornment\" label=\"In Progress\" small />\n    <SlottedSVG\n      slot=\"image-mid\"\n      style={{\n      height: \"100%\",\n      width: \"100%\",\n      maxHeight: \"20.375rem\",\n      maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n  <div \n      slot=\"interaction-controls\" \n      style={{ display: \"flex\", gap: \"16px\" \n      }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n    <IcTypography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </IcTypography>\n</IcCard>`,\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={snippets}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    expandable\n    style={{ width: \"360px\" }}\n  >\n    <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" small />\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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    <svg\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n    <IcTypography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </IcTypography>\n  </IcCard>\n</ComponentPreview>\n\n## Card details\n\n<ComponentDetails component=\"ic-card\" />\n\n## Variants\n\n### Heading only\n\nexport const headingOnly = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card heading=\"Americano order\"></ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard heading=\"Americano order\"></IcCard>`,\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={headingOnly}>\n  <IcCard heading=\"Americano order\" />\n</ComponentPreview>\n\n### With icon\n\nexport const withIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card heading=\"Americano order\">\n  \n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard heading=\"Americano order\">\n  <SlottedSVG     \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\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={withIcon}>\n  <IcCard heading=\"Americano order\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcCard>\n</ComponentPreview>\n\n### Message\n\nexport const withMessage = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\n  <SlottedSVG     \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\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={withMessage}>\n  <IcCard\n    heading=\"Americano order\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### With subheading\n\nexport const withSubHeading = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n  <SlottedSVG     \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n</IcCard>`,\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={withSubHeading}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Interaction button\n\nexport const interactionButton = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <SlottedSVG     \n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n  <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n    <SlottedSVG 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</IcCard>`,\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={interactionButton}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n      <InteractionIcon />\n    </IcButton>\n  </IcCard>\n</ComponentPreview>\n\n### Adornment\n\nexport const adornment = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n    <SlottedSVG \n      slot=\"icon\"   \n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n  <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n</IcCard>`,\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={adornment}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcStatusTag\n      slot=\"adornment\"\n      status=\"warning\"\n      label=\"In Progress\"\n      size=\"small\"\n    />\n  </IcCard>\n</ComponentPreview>\n\n### Top image\n\nexport const topImage = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style=\"width:360px;\">\n    <svg\n      slot=\"image-top\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n    <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style={{width: \"360px\"}}>\n    <SlottedSVG\n      slot=\"image-top\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n</IcCard>`,\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={topImage}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    style={{ width: \"360px\" }}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcStatusTag\n      slot=\"adornment\"\n      status=\"warning\"\n      label=\"In Progress\"\n      size=\"small\"\n    />\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n      <InteractionIcon />\n    </IcButton>\n    <svg\n      slot=\"image-top\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Middle image\n\nexport const midImage = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style=\"width:360px;\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n  <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n    <svg\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  style={{width: \"360px\"}}>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </SlottedSVG>\n  <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\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  <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n    <SlottedSVG\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n</IcCard>`,\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={midImage}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    style={{ width: \"360px\" }}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n      <InteractionIcon />\n    </IcButton>\n    <IcStatusTag\n      slot=\"adornment\"\n      status=\"warning\"\n      label=\"In Progress\"\n      size=\"small\"\n    />\n    <svg\n      slot=\"image-mid\"\n      style={{\n        height: \"100%\",\n        width: \"100%\",\n        maxHeight: \"20.375rem\",\n        maxWidth: \"20.375rem\",\n      }}\n      viewBox=\"0 0 1600 1250\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Interaction controls\n\nexport const interactionControls = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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  <div slot=\"interaction-controls\" style=\"display:flex;gap:16px;\">\n    <ic-button variant=\"primary\">Accept</ic-button>\n    <ic-button variant=\"secondary\">Cancel</ic-button>\n  </div>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\">\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\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  </SlottedSVG>\n  <div slot=\"interaction-controls\" style={{display: \"flex\", gap: \"16px\"}}>\n    <IcButton variant=\"primary\">Accept</IcButton>\n    <IcButton variant=\"secondary\">Cancel</IcButton>\n  </div>\n</IcCard>`,\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={interactionControls}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n  </IcCard>\n</ComponentPreview>\n\n### Expandable\n\nexport const expandable = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  expandable=\"true\">\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n  <div slot=\"interaction-controls\" style=\"display:flex;gap:16px;\">\n    <ic-button variant=\"primary\">Accept</ic-button>\n    <ic-button variant=\"secondary\">Cancel</ic-button>\n  </div>\n  <ic-typography slot=\"expanded-content\" variant=\"body\">\n    To cancel your order click cancel.\n  </ic-typography>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  expandable>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n  <div slot=\"interaction-controls\" style={{display: \"flex\", gap: \"16px\"}}>\n    <IcButton variant=\"primary\">Accept</IcButton>\n    <IcButton variant=\"secondary\">Cancel</IcButton>\n  </div>\n  <IcTypography slot=\"expanded-content\" variant=\"body\">\n    To cancel your order click cancel.\n  </IcTypography>\n</IcCard>`,\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={expandable}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    expandable\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n    <IcTypography slot=\"expanded-content\" variant=\"body\">\n      To cancel your order click cancel.\n    </IcTypography>\n  </IcCard>\n</ComponentPreview>\n\n### Clickable link\n\nexport const clickableLink = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\"\n  href=\"#\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable\n  href=\"#\">\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\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={clickableLink}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    href=\"#\"\n    onClick={(e) => e.preventDefault()}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Clickable button\n\nexport const clickableBtn = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card\n  id=\"clickable-card\"\n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>\n`,\n      long: `{shortCode}\n<script>\n  const card = document.querySelector('#clickable-card');\n  card.addEventListener('click', (ev) => {\n    console.log(ev);\n  })\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\" \n  clickable\n  onClick={(ev) => console.log(ev)}>\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n   <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\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={clickableBtn}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    onClick={(ev) => console.log(ev)}\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### With badge\n\nexport const withBadge = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\"\n  href=\"#\">\n <ic-badge text-label=\"New\" slot=\"badge\" variant=\"info\" size=\"large\"></ic-badge>\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\" \n  clickable\n  href=\"#\">\n <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\"/>\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\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={withBadge}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    href=\"#\"\n    onClick={(e) => e.preventDefault()}\n  >\n    <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\" />\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  clickable=\"true\" \n  disabled=\"true\">\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\" \n  clickable\n  disabled>\n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</IcCard>`,\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={disabled}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable\n    disabled\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Full width\n\nexport const fullWidth = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-card \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  fullWidth=\"true\"\n  clickable=\"true\"> \n <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-card>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCard \n  heading=\"Americano order\" \n  subheading=\"Name: Michael\" \n  message=\"Extras: Double espresso shot and oat milk.\"\n  fullWidth\n  clickable>\n <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n     <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcCard>`,\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={fullWidth}>\n  <IcCard\n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"\n    clickable=\"true\"\n    fullWidth=\"true\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcCard>\n</ComponentPreview>\n\n### Wrapped by link\n\nexport const wrapped = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<a href=\"/\">\n  <ic-card \n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"> \n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  </ic-card>\n</a>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<a href=\"/\">\n  <IcCard \n    heading=\"Americano order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: Double espresso shot and oat milk.\"> \n  <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n    </svg>\n  </IcCard>\n</a>`,\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={wrapped}>\n  <a\n    href=\"/\"\n    onClick={(e) => e.preventDefault()}\n    style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\n    aria-label=\"Americano order card\"\n  >\n    <IcCard\n      heading=\"Americano order\"\n      subheading=\"Name: Michael\"\n      message=\"Extras: Double espresso shot and oat milk.\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </IcCard>\n  </a>\n</ComponentPreview>\n",
       "path": "/components/card/code",
       "date": "2024-02-02",
       "title": "Card",
@@ -1316,10 +1316,10 @@
       ],
       "meta": {
         "relativePath": "components/cards/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.516Z",
-        "lastModified": "2024-04-08T22:24:28.516Z",
-        "size": 48132,
-        "formattedSize": "47.0 KB"
+        "createdAt": "2024-04-08T22:26:50.760Z",
+        "lastModified": "2024-04-08T22:26:50.760Z",
+        "size": 52859,
+        "formattedSize": "51.6 KB"
       }
     },
     {
@@ -1387,7 +1387,7 @@
     },
     {
       "id": "components__checkboxes__codex",
-      "contents": "\nimport { IcCheckboxGroup, IcCheckbox, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Select your extras\" name=\"default\">\n  <ic-checkbox value=\"extra\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"Soya milk\" label=\"Soya milk\" checked ></ic-checkbox>\n  <ic-checkbox value=\"keep cup\" label=\"Takeaway cup\" disabled=\"true\" ></ic-checkbox>\n</ic-checkbox-group>\n<script>\n  const checkboxGroup = document.querySelector('ic-checkbox-group');\n  checkboxGroup.addEventListener('icChange', (ev) => console.log('icChange', ev.detail.value));\n  const checkboxes = document.querySelector('ic-checkbox');\n  checkboxes.forEach((checkbox) => {\n    checkbox.addEventListener('icCheck', (ev) => {\n      console.log('icCheck', ev);\n    })\n  })\n</script>\n`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Select your extras\" name=\"default\" onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}>\n  <IcCheckbox value=\"extra\" label=\"Extra shot (50p)\" onIcCheck={(ev) => console.log(\"onIcCheck\", ev)} />\n  <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\n  <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup\n    label=\"Select your extras\"\n    name=\"default\"\n    onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\n  >\n    <IcCheckbox\n      value=\"extra\"\n      label=\"Extra shot (50p)\"\n      onIcCheck={(ev) => console.log(\"onIcCheck\", ev)}\n    />\n    <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\n    <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n## Checkbox group details\n\n<ComponentDetails component=\"ic-checkbox-group\" />\n\n## Checkbox details\n\n<ComponentDetails component=\"ic-checkbox\" />\n\n## Variants\n\n### Hidden label\n\nexport const snippetsHiddenLabel = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Select your extras\" hide-label=\"true\" name=\"1\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsHiddenLabel} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Helper text\n\nexport const snippetsHelperText = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" helper-text=\"Additional charges may apply.\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" helperText=\"Additional charges may apply.\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsHelperText} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup\n    label=\"Select your extras\"\n    name=\"1\"\n    helperText=\"Additional charges may apply.\"\n  >\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" size=\"small\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>\n<ic-checkbox-group label=\"Select your extras\" name=\"2\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>\n<ic-checkbox-group label=\"Select your extras\" name=\"3\" size=\"large\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>\n<IcCheckboxGroup label=\"Select your extras\" name=\"2\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>\n<IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSizes} style={{ gap: \"24px\" }}>\n  <IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n  <IcCheckboxGroup label=\"Select your extras\" name=\"2\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n  <IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Setting each checkbox size\n\nexport const snippetsSettingEachCheckboxSize = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n<ic-checkbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n<ic-checkbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n<IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n<IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSettingEachCheckboxSize}\n  style={{\n    gap: \"24px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n>\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n  <IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />\n</ComponentPreview>\n\n### Conditional\n\nexport const snippetsConditional = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"conditional\">\n  <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\n  <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\n  <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\n  <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\n  <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n  <ic-checkbox value=\"other\" label=\"Other\">\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    ></ic-text-field>\n  </ic-checkbox>\n</ic-checkbox-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\n  <IcCheckbox value=\"americano\" label=\"Americano\" />\n  <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n  <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n  <IcCheckbox value=\"latte\" label=\"Latte\" />\n  <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n  <IcCheckbox value=\"other\" label=\"Other\">\n    <IcTextField\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    />\n  </IcCheckbox>\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsConditional} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\n    <IcCheckbox value=\"americano\" label=\"Americano\" />\n    <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n    <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n    <IcCheckbox value=\"latte\" label=\"Latte\" />\n    <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n    <IcCheckbox value=\"other\" label=\"Other\">\n      <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\n    </IcCheckbox>\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Conditional dynamic\n\nexport const snippetsConditionalDynamic = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"dynamic\">\n  <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\n  <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\n  <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\n  <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\n  <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n  <ic-checkbox additional-field-display=\"dynamic\" value=\"other\" label=\"Other\">\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    ></ic-text-field>\n  </ic-checkbox>\n</ic-checkbox-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\n  <IcCheckbox value=\"americano\" label=\"Americano\" />\n  <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n  <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n  <IcCheckbox value=\"latte\" label=\"Latte\" />\n  <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n  <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\n    <IcTextField\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    />\n  </IcCheckbox>\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsConditionalDynamic}\n  style={{ marginRight: \"16px\" }}\n>\n  <div style={{ width: \"350px\" }}>\n    <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\n      <IcCheckbox value=\"americano\" label=\"Americano\" />\n      <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n      <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n      <IcCheckbox value=\"latte\" label=\"Latte\" />\n      <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n      <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\n        <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\n      </IcCheckbox>\n    </IcCheckboxGroup>\n  </div>\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" validation-status=\"error\" validation-text=\"Sorry, this is currently unavailable.\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" validationStatus=\"error\" validationText=\"Sorry, this is currently unavailable.\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsValidation} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup\n    label=\"Select your extras\"\n    name=\"1\"\n    validationStatus=\"error\"\n    validationText=\"Sorry, this is currently unavailable.\"\n  >\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Indeterminate\n\nexport const snippetsIndeterminate = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-checkbox-group label=\"Select your preferred drinks\" name=\"1\">\n  <ic-checkbox value=\"drinks\" label=\"Drinks\" checked=\"true\" indeterminate=\"true\">\n    <ic-checkbox-group label=\"Coffee\" hide-label=\"true\" slot=\"additional-field\" name=\"2\">\n      <ic-checkbox value=\"tea\" label=\"Tea\"></ic-checkbox>\n      <ic-checkbox value=\"coffee\" label=\"Coffee\" checked=\"true\" indeterminate=\"true\">\n        <ic-checkbox-group label=\"Coffees\" hide-label=\"true\" slot=\"additional-field\" name=\"3\">\n          <ic-checkbox value=\"mocha\" label=\"Mocha\"></ic-checkbox>\n          <ic-checkbox value=\"espresso\" label=\"Espresso\" checked=\"true\"></ic-checkbox>\n          <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n        </ic-checkbox-group>\n      </ic-checkbox>\n      <ic-checkbox value=\"juice\" label=\"Juice\"></ic-checkbox>\n    </ic-checkbox-group>\n  </ic-checkbox>\n</ic-checkbox-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\n  <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\n    <IcCheckboxGroup name=\"2\" label=\"Coffee\" hideLabel slot=\"additional-field\">\n      <IcCheckbox value=\"tea\" label=\"Tea\" />\n      <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\n        <IcCheckboxGroup label=\"Coffees\" hideLabel slot=\"additional-field\" name=\"3\">\n          <IcCheckbox value=\"mocha\" label=\"Mocha\" />\n          <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\n          <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n        </IcCheckboxGroup>\n      </IcCheckbox>\n      <IcCheckbox value=\"juice\" label=\"Juice\" />\n    </IcCheckboxGroup>\n  </IcCheckbox>\n</IcCheckboxGroup>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsIndeterminate}\n  style={{ marginTop: \"24px\" }}\n>\n  <IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\n    <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\n      <IcCheckboxGroup\n        name=\"2\"\n        label=\"Coffee\"\n        hideLabel\n        slot=\"additional-field\"\n      >\n        <IcCheckbox value=\"tea\" label=\"Tea\" />\n        <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\n          <IcCheckboxGroup\n            label=\"Coffees\"\n            hideLabel\n            slot=\"additional-field\"\n            name=\"3\"\n          >\n            <IcCheckbox value=\"mocha\" label=\"Mocha\" />\n            <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\n            <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n          </IcCheckboxGroup>\n        </IcCheckbox>\n        <IcCheckbox value=\"juice\" label=\"Juice\" />\n      </IcCheckboxGroup>\n    </IcCheckbox>\n  </IcCheckboxGroup>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcCheckboxGroup, IcCheckbox, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Select your extras\" name=\"default\">\n  <ic-checkbox value=\"extra\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"Soya milk\" label=\"Soya milk\" checked ></ic-checkbox>\n  <ic-checkbox value=\"keep cup\" label=\"Takeaway cup\" disabled=\"true\" ></ic-checkbox>\n</ic-checkbox-group>\n<script>\n  const checkboxGroup = document.querySelector('ic-checkbox-group');\n  checkboxGroup.addEventListener('icChange', (ev) => console.log('icChange', ev.detail.value));\n  const checkboxes = document.querySelector('ic-checkbox');\n  checkboxes.forEach((checkbox) => {\n    checkbox.addEventListener('icCheck', (ev) => {\n      console.log('icCheck', ev);\n    })\n  })\n</script>\n`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Select your extras\" name=\"default\" onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}>\n  <IcCheckbox value=\"extra\" label=\"Extra shot (50p)\" onIcCheck={(ev) => console.log(\"onIcCheck\", ev)} />\n  <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\n  <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\n</IcCheckboxGroup>`,\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={snippetsDefault} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup\n    label=\"Select your extras\"\n    name=\"default\"\n    onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\n  >\n    <IcCheckbox\n      value=\"extra\"\n      label=\"Extra shot (50p)\"\n      onIcCheck={(ev) => console.log(\"onIcCheck\", ev)}\n    />\n    <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\n    <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n## Checkbox group details\n\n<ComponentDetails component=\"ic-checkbox-group\" />\n\n## Checkbox details\n\n<ComponentDetails component=\"ic-checkbox\" />\n\n## Variants\n\n### Hidden label\n\nexport const snippetsHiddenLabel = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Select your extras\" hide-label=\"true\" name=\"1\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\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={snippetsHiddenLabel} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Helper text\n\nexport const snippetsHelperText = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" helper-text=\"Additional charges may apply.\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" helperText=\"Additional charges may apply.\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\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={snippetsHelperText} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup\n    label=\"Select your extras\"\n    name=\"1\"\n    helperText=\"Additional charges may apply.\"\n  >\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" size=\"small\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>\n<ic-checkbox-group label=\"Select your extras\" name=\"2\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>\n<ic-checkbox-group label=\"Select your extras\" name=\"3\" size=\"large\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>\n<IcCheckboxGroup label=\"Select your extras\" name=\"2\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>\n<IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\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={snippetsSizes} style={{ gap: \"24px\" }}>\n  <IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n  <IcCheckboxGroup label=\"Select your extras\" name=\"2\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n  <IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Setting each checkbox size\n\nexport const snippetsSettingEachCheckboxSize = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n<ic-checkbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n<ic-checkbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n<IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n<IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\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\n  snippets={snippetsSettingEachCheckboxSize}\n  style={{\n    gap: \"24px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n>\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n  <IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />\n</ComponentPreview>\n\n### Conditional\n\nexport const snippetsConditional = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"conditional\">\n  <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\n  <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\n  <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\n  <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\n  <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n  <ic-checkbox value=\"other\" label=\"Other\">\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    ></ic-text-field>\n  </ic-checkbox>\n</ic-checkbox-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\n  <IcCheckbox value=\"americano\" label=\"Americano\" />\n  <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n  <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n  <IcCheckbox value=\"latte\" label=\"Latte\" />\n  <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n  <IcCheckbox value=\"other\" label=\"Other\">\n    <IcTextField\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    />\n  </IcCheckbox>\n</IcCheckboxGroup>`,\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={snippetsConditional} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\n    <IcCheckbox value=\"americano\" label=\"Americano\" />\n    <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n    <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n    <IcCheckbox value=\"latte\" label=\"Latte\" />\n    <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n    <IcCheckbox value=\"other\" label=\"Other\">\n      <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\n    </IcCheckbox>\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Conditional dynamic\n\nexport const snippetsConditionalDynamic = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"dynamic\">\n  <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\n  <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\n  <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\n  <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\n  <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n  <ic-checkbox additional-field-display=\"dynamic\" value=\"other\" label=\"Other\">\n    <ic-text-field\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    ></ic-text-field>\n  </ic-checkbox>\n</ic-checkbox-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\n  <IcCheckbox value=\"americano\" label=\"Americano\" />\n  <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n  <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n  <IcCheckbox value=\"latte\" label=\"Latte\" />\n  <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n  <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\n    <IcTextField\n      slot=\"additional-field\"\n      label=\"Please let us know...\"\n    />\n  </IcCheckbox>\n</IcCheckboxGroup>`,\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\n  snippets={snippetsConditionalDynamic}\n  style={{ marginRight: \"16px\" }}\n>\n  <div style={{ width: \"350px\" }}>\n    <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\n      <IcCheckbox value=\"americano\" label=\"Americano\" />\n      <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n      <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n      <IcCheckbox value=\"latte\" label=\"Latte\" />\n      <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n      <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\n        <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\n      </IcCheckbox>\n    </IcCheckboxGroup>\n  </div>\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" validation-status=\"error\" validation-text=\"Sorry, this is currently unavailable.\">\n  <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n  <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" validationStatus=\"error\" validationText=\"Sorry, this is currently unavailable.\">\n  <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n  <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\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={snippetsValidation} style={{ marginTop: \"24px\" }}>\n  <IcCheckboxGroup\n    label=\"Select your extras\"\n    name=\"1\"\n    validationStatus=\"error\"\n    validationText=\"Sorry, this is currently unavailable.\"\n  >\n    <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n    <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n  </IcCheckboxGroup>\n</ComponentPreview>\n\n### Indeterminate\n\nexport const snippetsIndeterminate = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-checkbox-group label=\"Select your preferred drinks\" name=\"1\">\n  <ic-checkbox value=\"drinks\" label=\"Drinks\" checked=\"true\" indeterminate=\"true\">\n    <ic-checkbox-group label=\"Coffee\" hide-label=\"true\" slot=\"additional-field\" name=\"2\">\n      <ic-checkbox value=\"tea\" label=\"Tea\"></ic-checkbox>\n      <ic-checkbox value=\"coffee\" label=\"Coffee\" checked=\"true\" indeterminate=\"true\">\n        <ic-checkbox-group label=\"Coffees\" hide-label=\"true\" slot=\"additional-field\" name=\"3\">\n          <ic-checkbox value=\"mocha\" label=\"Mocha\"></ic-checkbox>\n          <ic-checkbox value=\"espresso\" label=\"Espresso\" checked=\"true\"></ic-checkbox>\n          <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n        </ic-checkbox-group>\n      </ic-checkbox>\n      <ic-checkbox value=\"juice\" label=\"Juice\"></ic-checkbox>\n    </ic-checkbox-group>\n  </ic-checkbox>\n</ic-checkbox-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\n  <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\n    <IcCheckboxGroup name=\"2\" label=\"Coffee\" hideLabel slot=\"additional-field\">\n      <IcCheckbox value=\"tea\" label=\"Tea\" />\n      <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\n        <IcCheckboxGroup label=\"Coffees\" hideLabel slot=\"additional-field\" name=\"3\">\n          <IcCheckbox value=\"mocha\" label=\"Mocha\" />\n          <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\n          <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n        </IcCheckboxGroup>\n      </IcCheckbox>\n      <IcCheckbox value=\"juice\" label=\"Juice\" />\n    </IcCheckboxGroup>\n  </IcCheckbox>\n</IcCheckboxGroup>`,\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\n  snippets={snippetsIndeterminate}\n  style={{ marginTop: \"24px\" }}\n>\n  <IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\n    <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\n      <IcCheckboxGroup\n        name=\"2\"\n        label=\"Coffee\"\n        hideLabel\n        slot=\"additional-field\"\n      >\n        <IcCheckbox value=\"tea\" label=\"Tea\" />\n        <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\n          <IcCheckboxGroup\n            label=\"Coffees\"\n            hideLabel\n            slot=\"additional-field\"\n            name=\"3\"\n          >\n            <IcCheckbox value=\"mocha\" label=\"Mocha\" />\n            <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\n            <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n          </IcCheckboxGroup>\n        </IcCheckbox>\n        <IcCheckbox value=\"juice\" label=\"Juice\" />\n      </IcCheckboxGroup>\n    </IcCheckbox>\n  </IcCheckboxGroup>\n</ComponentPreview>\n",
       "path": "/components/checkbox/code",
       "date": "2024-01-18",
       "title": "Checkbox",
@@ -1410,10 +1410,10 @@
       ],
       "meta": {
         "relativePath": "components/checkboxes/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.516Z",
-        "lastModified": "2024-04-08T22:24:28.516Z",
-        "size": 15524,
-        "formattedSize": "15.2 KB"
+        "createdAt": "2024-04-08T22:26:50.760Z",
+        "lastModified": "2024-04-08T22:26:50.760Z",
+        "size": 18026,
+        "formattedSize": "17.6 KB"
       }
     },
     {
@@ -1481,7 +1481,7 @@
     },
     {
       "id": "components__chips__codex",
-      "contents": "\nimport { IcChip } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>\n<ic-chip label=\"Cappuccino\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>\n<IcChip label=\"Cappuccino\">\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>`,\n  },\n];\n\n<ComponentPreview\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDefault}\n>\n  <IcChip label=\"Americano\" dismissible>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n  <IcChip label=\"Cappuccino\">\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n\n## Chip details\n\n<ComponentDetails component=\"ic-chip\" />\n\n## Variants\n\n### Outline\n\nexport const snippetsOutline = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-chip label=\"Americano\" variant=\"outlined\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </svg>\n</ic-chip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcChip label=\"Americano\" variant=\"outlined\">\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </SlottedSVG>\n</IcChip>`,\n  },\n];\n\n<ComponentPreview\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsOutline}\n>\n  <IcChip label=\"Americano\" variant=\"outlined\">\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n\n### Dismissible\n\nexport const snippetsDismissible = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>\n<script>\n  const chip = document.querySelector('#my-chip');\n  chip.addEventListener('icDismiss', (ev) => console.log(ev));\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>`,\n  },\n];\n\n<ComponentPreview\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDismissible}\n>\n  <IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-chip label=\"Americano\" dismissible=\"true\" disabled=\"true\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>\n<ic-chip label=\"Americano\" variant=\"outlined\" dismissible=\"true\" disabled=\"true\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </svg>\n</ic-chip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcChip label=\"Americano\" dismissible disabled>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>\n<IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </SlottedSVG>\n</IcChip>`,\n  },\n];\n\n<ComponentPreview\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDisabled}\n>\n  <IcChip label=\"Americano\" dismissible disabled>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n  <IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcChip } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>\n<ic-chip label=\"Cappuccino\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>\n<IcChip label=\"Cappuccino\">\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>`,\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\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDefault}\n>\n  <IcChip label=\"Americano\" dismissible>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n  <IcChip label=\"Cappuccino\">\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n\n## Chip details\n\n<ComponentDetails component=\"ic-chip\" />\n\n## Variants\n\n### Outline\n\nexport const snippetsOutline = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-chip label=\"Americano\" variant=\"outlined\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </svg>\n</ic-chip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcChip label=\"Americano\" variant=\"outlined\">\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </SlottedSVG>\n</IcChip>`,\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\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsOutline}\n>\n  <IcChip label=\"Americano\" variant=\"outlined\">\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n\n### Dismissible\n\nexport const snippetsDismissible = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>\n<script>\n  const chip = document.querySelector('#my-chip');\n  chip.addEventListener('icDismiss', (ev) => console.log(ev));\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>`,\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\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDismissible}\n>\n  <IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-chip label=\"Americano\" dismissible=\"true\" disabled=\"true\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </svg>\n</ic-chip>\n<ic-chip label=\"Americano\" variant=\"outlined\" dismissible=\"true\" disabled=\"true\">\n  <svg\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </svg>\n</ic-chip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcChip label=\"Americano\" dismissible disabled>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n  </SlottedSVG>\n</IcChip>\n<IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\n  <SlottedSVG\n    slot=\"icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"coffee\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </SlottedSVG>\n</IcChip>`,\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\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDisabled}\n>\n  <IcChip label=\"Americano\" dismissible disabled>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </IcChip>\n  <IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\n    <svg\n      slot=\"icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"coffee\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcChip>\n</ComponentPreview>\n",
       "path": "/components/chip/code",
       "date": "2024-02-28",
       "title": "Chip",
@@ -1504,10 +1504,10 @@
       ],
       "meta": {
         "relativePath": "components/chips/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.516Z",
-        "lastModified": "2024-04-08T22:24:28.516Z",
-        "size": 8993,
-        "formattedSize": "8.8 KB"
+        "createdAt": "2024-04-08T22:26:50.764Z",
+        "lastModified": "2024-04-08T22:26:50.764Z",
+        "size": 10105,
+        "formattedSize": "9.9 KB"
       }
     },
     {
@@ -1575,7 +1575,7 @@
     },
     {
       "id": "components__classification-banner__codex",
-      "contents": "\nimport { IcClassificationBanner } from \"@ukic/react\";\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-classification-banner></ic-classification-banner>\n<ic-classification-banner classification=\"official\"></ic-classification-banner>\n<ic-classification-banner classification=\"official-sensitive\"></ic-classification-banner>\n<ic-classification-banner classification=\"secret\"></ic-classification-banner>\n<ic-classification-banner classification=\"top-secret\"></ic-classification-banner>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcClassificationBanner inline />\n<IcClassificationBanner classification=\"official\"/>\n<IcClassificationBanner classification=\"official-sensitive\"/>\n<IcClassificationBanner classification=\"secret\"/>\n<IcClassificationBanner classification=\"top-secret\"/>`,\n  },\n];\n\n## Component demo\n\n<ComponentPreview snippets={snippets} style={{ gap: \"8px\" }}>\n  <IcClassificationBanner inline />\n  <IcClassificationBanner classification=\"official\" inline />\n  <IcClassificationBanner classification=\"official-sensitive\" inline />\n  <IcClassificationBanner classification=\"secret\" inline />\n  <IcClassificationBanner classification=\"top-secret\" inline />\n</ComponentPreview>\n\n## Classification banner details\n\n<ComponentDetails component=\"ic-classification-banner\" />\n\n## Variants\n\nexport const snippetsVariants = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-classification-banner classification=\"official\" up-to=\"true\" country=\"us\" additional-selectors=\"ukic\"></ic-classification-banner>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcClassificationBanner classification=\"official\" upTo=\"true\" country=\"us\" additionalSelectors=\"ukic\"/>`,\n  },\n];\n\n### Up to, country and additional selectors\n\n<ComponentPreview snippets={snippetsVariants} style={{ gap: \"8px\" }}>\n  <IcClassificationBanner\n    classification=\"official\"\n    inline\n    upTo=\"true\"\n    country=\"us\"\n    additionalSelectors=\"ukic\"\n  />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcClassificationBanner } from \"@ukic/react\";\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-classification-banner></ic-classification-banner>\n<ic-classification-banner classification=\"official\"></ic-classification-banner>\n<ic-classification-banner classification=\"official-sensitive\"></ic-classification-banner>\n<ic-classification-banner classification=\"secret\"></ic-classification-banner>\n<ic-classification-banner classification=\"top-secret\"></ic-classification-banner>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcClassificationBanner inline />\n<IcClassificationBanner classification=\"official\"/>\n<IcClassificationBanner classification=\"official-sensitive\"/>\n<IcClassificationBanner classification=\"secret\"/>\n<IcClassificationBanner classification=\"top-secret\"/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n## Component demo\n\n<ComponentPreview snippets={snippets} style={{ gap: \"8px\" }}>\n  <IcClassificationBanner inline />\n  <IcClassificationBanner classification=\"official\" inline />\n  <IcClassificationBanner classification=\"official-sensitive\" inline />\n  <IcClassificationBanner classification=\"secret\" inline />\n  <IcClassificationBanner classification=\"top-secret\" inline />\n</ComponentPreview>\n\n## Classification banner details\n\n<ComponentDetails component=\"ic-classification-banner\" />\n\n## Variants\n\nexport const snippetsVariants = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-classification-banner classification=\"official\" up-to=\"true\" country=\"us\" additional-selectors=\"ukic\"></ic-classification-banner>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcClassificationBanner classification=\"official\" upTo=\"true\" country=\"us\" additionalSelectors=\"ukic\"/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n### Up to, country and additional selectors\n\n<ComponentPreview snippets={snippetsVariants} style={{ gap: \"8px\" }}>\n  <IcClassificationBanner\n    classification=\"official\"\n    inline\n    upTo=\"true\"\n    country=\"us\"\n    additionalSelectors=\"ukic\"\n  />\n</ComponentPreview>\n",
       "path": "/components/classification-banner/code",
       "date": "2023-02-03",
       "title": "Classification banner",
@@ -1598,10 +1598,10 @@
       ],
       "meta": {
         "relativePath": "components/classification-banner/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.520Z",
-        "lastModified": "2024-04-08T22:24:28.520Z",
-        "size": 2608,
-        "formattedSize": "2.5 KB"
+        "createdAt": "2024-04-08T22:26:50.764Z",
+        "lastModified": "2024-04-08T22:26:50.764Z",
+        "size": 3164,
+        "formattedSize": "3.1 KB"
       }
     },
     {
@@ -1669,7 +1669,7 @@
     },
     {
       "id": "components__data-entity__codex",
-      "contents": "\nimport {\n  IcDataEntity,\n  IcDataRow,\n  IcLink,\n  IcTypography,\n  IcTextField,\n  IcButton,\n  IcStatusTag,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-data-entity heading=\"Order details\">\n    <ic-data-row label=\"Order name\" value=\"Michael\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Drink\" value=\"Americano\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Milk option\" value=\"Soya milk\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Price\" value=\"£3.25\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Payment method\">\n      <ic-typography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </ic-typography>\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n      <ic-button variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n        <svg viewBox=\"0 0 24 24\" height=\"24px\" width=\"24px\">\n          <path\n            d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-button>\n    </ic-data-row>\n  </ic-data-entity>`,\n  },\n  {\n    language: \"React\",\n    snippet: `  <IcDataEntity heading=\"Order details\">\n    <IcDataRow label=\"Order name\" value=\"Michael\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n      <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n        <SlottedSVG viewBox=\"0 0 24 24\" height=\"24px\" width=\"24px\">\n          <path\n            d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n            fill=\"currentColor\"\n          />\n        </SlottedSVG>\n      </IcButton>\n    </IcDataRow>\n  </IcDataEntity>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n    <IcDataRow label=\"Order name\" value=\"Michael\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n      <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n        <svg viewBox=\"0 0 24 24\" height=\"24px\" width=\"24px\">\n          <path\n            d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </IcButton>\n    </IcDataRow>\n  </IcDataEntity>\n</ComponentPreview>\n\n## Data row details\n\n<ComponentDetails component=\"ic-data-row\" />\n\n## Data entity details\n\n<ComponentDetails component=\"ic-data-entity\" />\n\n## Variants\n\n### With status tags\n\nexport const withStatusTags = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-data-entity heading=\"Order details\">\n    <ic-data-row label=\"Order name\" value=\"Michael\">\n    </ic-data-row>\n    <ic-data-row label=\"Drink\" value=\"Americano\">\n      <ic-status-tag\n        status=\"warning\"\n        label=\"In Progress\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </ic-data-row>\n    <ic-data-row label=\"Milk option\" value=\"Soya milk\">\n    </ic-data-row>\n    <ic-data-row label=\"Price\" value=\"£3.25\">\n    </ic-data-row>\n    <ic-data-row label=\"Payment method\">\n      <ic-typography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </ic-typography>\n      <ic-status-tag\n        label=\"Not Confirmed\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </ic-data-row>\n  </ic-data-entity>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcDataEntity heading=\"Order details\">\n    <IcDataRow label=\"Order name\" value=\"Michael\">\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcStatusTag\n        status=\"warning\"\n        label=\"In Progress\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcStatusTag\n        label=\"Not Confirmed\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n  </IcDataEntity>`,\n  },\n];\n\n<ComponentPreview snippets={withStatusTags}>\n  <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n    <IcDataRow label=\"Order name\" value=\"Michael\" />\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcStatusTag\n        status=\"warning\"\n        label=\"In Progress\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\" />\n    <IcDataRow label=\"Price\" value=\"£3.25\" />\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcStatusTag\n        label=\"Not Confirmed\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n  </IcDataEntity>\n</ComponentPreview>\n\n### Size small\n\nexport const smallSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-data-entity heading=\"Personal details\" size=\"small\">\n  <ic-data-row label=\"Name\" value=\"Michael Johnson\">\n    <ic-status-tag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Date of birth\" value=\"16 October 1995\">\n    <ic-status-tag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Telephone\" value=\"07449 7654873\">\n    <ic-status-tag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Email\" value=\"mjohnson@coffee.gov\">\n    <ic-status-tag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Address\">\n    <ic-typography variant=\"body\" slot=\"value\">\n      383 Coffee Drive\n      <br />\n      London\n      <br />\n      SW7 988\n      <br />\n      United Kingdom\n    </ic-typography>\n    <ic-status-tag\n      label=\"not confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n</ic-data-entity>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcDataEntity heading=\"Personal details\" size=\"small\">\n  <IcDataRow label=\"Name\" value=\"Michael Johnson\">\n    <IcStatusTag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Date of birth\" value=\"16 October 1995\">\n    <IcStatusTag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Telephone\" value=\"07449 7654873\">\n    <IcStatusTag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\">\n    <IcStatusTag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Address\">\n    <IcTypography variant=\"body\" slot=\"value\">\n      383 Coffee Drive\n      <br />\n      London\n      <br />\n      SW7 988\n      <br />\n      United Kingdom\n    </IcTypography>\n    <IcStatusTag\n      label=\"not confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n</IcDataEntity>`,\n  },\n];\n\n<ComponentPreview snippets={smallSnippet}>\n  <IcDataEntity\n    heading=\"Personal details\"\n    size=\"small\"\n    style={{ width: \"90%\" }}\n  >\n    <IcDataRow label=\"Name\" value=\"Michael Johnson\" />\n    <IcDataRow label=\"Date of birth\" value=\"16 October 1995\" />\n    <IcDataRow label=\"Telephone\" value=\"07449 7654873\" />\n    <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\" />\n    <IcDataRow label=\"Address\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        383 Coffee Drive\n        <br />\n        London\n        <br />\n        SW7 988\n        <br />\n        United Kingdom\n      </IcTypography>\n    </IcDataRow>\n  </IcDataEntity>\n</ComponentPreview>\n\n### Editable example\n\nexport const editableExample = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-data-entity heading=\"Order details\">\n  <ic-data-row label=\"Order name\"> \n    <ic-text-field \n      slot=\"value\" \n      label=\"Order name\" \n      value=\"Michael\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Drink\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Drink\" \n      value=\"Americano\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Milk option\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Milk option\" \n      value=\"Soya milk\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Price\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Price\" \n      value=\"£3.25\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Payment method\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Payment method\" \n      value=\"VISA ending 5896\"  \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n</ic-data-entity>\n<ic-button id='confirm-button' style=\"margin-right: var(--ic-space-md);margin-top: var(--ic-space-lg);\">\n  Confirm\n</ic-button>\n<ic-button id='edit-button' variant=\"secondary\" style=\"margin-top: var(--ic-space-lg);\">\n  Edit\n</ic-button>\n<script>\n  const textFields = document.querySelectorAll('ic-text-field');\n  const confirmBtn = document.querySelector('#confirm-button');\n  confirmBtn.addEventListener('click', () => {\n    textFields.forEach((textField) => {\n      textField.setAttribute('readonly', '');\n    });\n  });\n  const editBtn = document.querySelector('#edit-button');\n  editBtn.addEventListener('click', () => {\n    textFields.forEach((textField) => {\n      textField.removeAttribute('readonly');\n    });\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcDataEntity heading=\"Order details\">\n  <IcDataRow label=\"Order name\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Order name\"\n      value=\"Michael\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Drink\" value=\"Americano\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Drink\"\n      value=\"Americano\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Milk option\"\n      value=\"Soya milk\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Price\" value=\"£3.25\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Price\"\n      value=\"£3.25\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Payment method\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Payment method\"\n      value=\"VISA ending 5896\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n</IcDataEntity>\n<IcButton\n  onClick={() => {\n    const textFields = document.querySelectorAll('ic-text-field');\n    textFields.forEach((textField) => {\n      textField.setAttribute('readonly', '');\n    })\n  }}\n  style={{\n    marginRight: \"var(--ic-space-md)\",\n    marginTop: \"var(--ic-space-lg)\",\n  }}\n>\n  Confirm\n</IcButton>\n<IcButton\n  onClick={() => {\n    const textFields = document.querySelectorAll('ic-text-field');\n    textFields.forEach((textField) => {\n      textField.removeAttribute('readonly');\n    })\n  }}\n  variant=\"secondary\"\n  style={{ marginTop: \"var(--ic-space-lg)\" }}\n>\n  Edit\n</IcButton>`,\n  },\n];\n\n<ComponentPreview snippets={editableExample} style={{ display: \"block\" }}>\n  <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n    <IcDataRow label=\"Order name\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Order name\"\n        value=\"Michael\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Drink\"\n        value=\"Americano\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Milk option\"\n        value=\"Soya milk\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Price\"\n        value=\"£3.25\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Payment method\"\n        value=\"VISA ending 5896\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n  </IcDataEntity>\n  <IcButton\n    onClick={() => {\n      const textFields = document.querySelectorAll(\"ic-text-field\");\n      textFields.forEach((textField) => {\n        textField.setAttribute(\"readonly\", \"\");\n      });\n    }}\n    style={{\n      marginRight: \"var(--ic-space-md)\",\n      marginTop: \"var(--ic-space-lg)\",\n    }}\n  >\n    Confirm\n  </IcButton>\n  <IcButton\n    onClick={() => {\n      const textFields = document.querySelectorAll(\"ic-text-field\");\n      textFields.forEach((textField) => {\n        textField.removeAttribute(\"readonly\");\n      });\n    }}\n    variant=\"secondary\"\n    style={{ marginTop: \"var(--ic-space-lg)\" }}\n  >\n    Edit\n  </IcButton>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcDataEntity,\n  IcDataRow,\n  IcLink,\n  IcTypography,\n  IcTextField,\n  IcButton,\n  IcStatusTag,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-data-entity heading=\"Order details\">\n    <ic-data-row label=\"Order name\" value=\"Michael\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Drink\" value=\"Americano\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Milk option\" value=\"Soya milk\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Price\" value=\"£3.25\">\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Payment method\">\n      <ic-typography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </ic-typography>\n      <ic-link href=\"#\" slot=\"end-component\">\n        Edit\n      </ic-link>\n    </ic-data-row>\n    <ic-data-row label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n      <ic-button variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n        <svg viewBox=\"0 0 24 24\" height=\"24px\" width=\"24px\">\n          <path\n            d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-button>\n    </ic-data-row>\n  </ic-data-entity>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `  <IcDataEntity heading=\"Order details\">\n    <IcDataRow label=\"Order name\" value=\"Michael\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcLink href=\"#\" slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n      <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n        <SlottedSVG viewBox=\"0 0 24 24\" height=\"24px\" width=\"24px\">\n          <path\n            d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n            fill=\"currentColor\"\n          />\n        </SlottedSVG>\n      </IcButton>\n    </IcDataRow>\n  </IcDataEntity>`,\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={snippets}>\n  <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n    <IcDataRow label=\"Order name\" value=\"Michael\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n        Edit\n      </IcLink>\n    </IcDataRow>\n    <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n      <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n        <svg viewBox=\"0 0 24 24\" height=\"24px\" width=\"24px\">\n          <path\n            d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </IcButton>\n    </IcDataRow>\n  </IcDataEntity>\n</ComponentPreview>\n\n## Data row details\n\n<ComponentDetails component=\"ic-data-row\" />\n\n## Data entity details\n\n<ComponentDetails component=\"ic-data-entity\" />\n\n## Variants\n\n### With status tags\n\nexport const withStatusTags = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-data-entity heading=\"Order details\">\n    <ic-data-row label=\"Order name\" value=\"Michael\">\n    </ic-data-row>\n    <ic-data-row label=\"Drink\" value=\"Americano\">\n      <ic-status-tag\n        status=\"warning\"\n        label=\"In Progress\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </ic-data-row>\n    <ic-data-row label=\"Milk option\" value=\"Soya milk\">\n    </ic-data-row>\n    <ic-data-row label=\"Price\" value=\"£3.25\">\n    </ic-data-row>\n    <ic-data-row label=\"Payment method\">\n      <ic-typography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </ic-typography>\n      <ic-status-tag\n        label=\"Not Confirmed\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </ic-data-row>\n  </ic-data-entity>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcDataEntity heading=\"Order details\">\n    <IcDataRow label=\"Order name\" value=\"Michael\">\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcStatusTag\n        status=\"warning\"\n        label=\"In Progress\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcStatusTag\n        label=\"Not Confirmed\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n  </IcDataEntity>`,\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={withStatusTags}>\n  <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n    <IcDataRow label=\"Order name\" value=\"Michael\" />\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcStatusTag\n        status=\"warning\"\n        label=\"In Progress\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\" />\n    <IcDataRow label=\"Price\" value=\"£3.25\" />\n    <IcDataRow label=\"Payment method\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        VISA ending 5896\n      </IcTypography>\n      <IcStatusTag\n        label=\"Not Confirmed\"\n        variant=\"filled\"\n        slot=\"end-component\"\n      />\n    </IcDataRow>\n  </IcDataEntity>\n</ComponentPreview>\n\n### Size small\n\nexport const smallSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-data-entity heading=\"Personal details\" size=\"small\">\n  <ic-data-row label=\"Name\" value=\"Michael Johnson\">\n    <ic-status-tag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Date of birth\" value=\"16 October 1995\">\n    <ic-status-tag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Telephone\" value=\"07449 7654873\">\n    <ic-status-tag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Email\" value=\"mjohnson@coffee.gov\">\n    <ic-status-tag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n  <ic-data-row label=\"Address\">\n    <ic-typography variant=\"body\" slot=\"value\">\n      383 Coffee Drive\n      <br />\n      London\n      <br />\n      SW7 988\n      <br />\n      United Kingdom\n    </ic-typography>\n    <ic-status-tag\n      label=\"not confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    ></ic-status-tag>\n  </ic-data-row>\n</ic-data-entity>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcDataEntity heading=\"Personal details\" size=\"small\">\n  <IcDataRow label=\"Name\" value=\"Michael Johnson\">\n    <IcStatusTag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Date of birth\" value=\"16 October 1995\">\n    <IcStatusTag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Telephone\" value=\"07449 7654873\">\n    <IcStatusTag\n      status=\"warning\"\n      label=\"in review\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\">\n    <IcStatusTag\n      status=\"success\"\n      label=\"confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Address\">\n    <IcTypography variant=\"body\" slot=\"value\">\n      383 Coffee Drive\n      <br />\n      London\n      <br />\n      SW7 988\n      <br />\n      United Kingdom\n    </IcTypography>\n    <IcStatusTag\n      label=\"not confirmed\"\n      variant=\"filled\"\n      slot=\"end-component\"\n      size=\"small\"\n    />\n  </IcDataRow>\n</IcDataEntity>`,\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={smallSnippet}>\n  <IcDataEntity\n    heading=\"Personal details\"\n    size=\"small\"\n    style={{ width: \"90%\" }}\n  >\n    <IcDataRow label=\"Name\" value=\"Michael Johnson\" />\n    <IcDataRow label=\"Date of birth\" value=\"16 October 1995\" />\n    <IcDataRow label=\"Telephone\" value=\"07449 7654873\" />\n    <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\" />\n    <IcDataRow label=\"Address\">\n      <IcTypography variant=\"body\" slot=\"value\">\n        383 Coffee Drive\n        <br />\n        London\n        <br />\n        SW7 988\n        <br />\n        United Kingdom\n      </IcTypography>\n    </IcDataRow>\n  </IcDataEntity>\n</ComponentPreview>\n\n### Editable example\n\nexport const editableExample = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-data-entity heading=\"Order details\">\n  <ic-data-row label=\"Order name\"> \n    <ic-text-field \n      slot=\"value\" \n      label=\"Order name\" \n      value=\"Michael\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Drink\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Drink\" \n      value=\"Americano\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Milk option\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Milk option\" \n      value=\"Soya milk\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Price\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Price\" \n      value=\"£3.25\" \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n  <ic-data-row label=\"Payment method\">\n    <ic-text-field \n      slot=\"value\" \n      label=\"Payment method\" \n      value=\"VISA ending 5896\"  \n      readonly \n      hide-label \n      full-width\n    />\n  </ic-data-row>\n</ic-data-entity>\n<ic-button id='confirm-button' style=\"margin-right: var(--ic-space-md);margin-top: var(--ic-space-lg);\">\n  Confirm\n</ic-button>\n<ic-button id='edit-button' variant=\"secondary\" style=\"margin-top: var(--ic-space-lg);\">\n  Edit\n</ic-button>\n<script>\n  const textFields = document.querySelectorAll('ic-text-field');\n  const confirmBtn = document.querySelector('#confirm-button');\n  confirmBtn.addEventListener('click', () => {\n    textFields.forEach((textField) => {\n      textField.setAttribute('readonly', '');\n    });\n  });\n  const editBtn = document.querySelector('#edit-button');\n  editBtn.addEventListener('click', () => {\n    textFields.forEach((textField) => {\n      textField.removeAttribute('readonly');\n    });\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcDataEntity heading=\"Order details\">\n  <IcDataRow label=\"Order name\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Order name\"\n      value=\"Michael\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Drink\" value=\"Americano\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Drink\"\n      value=\"Americano\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Milk option\"\n      value=\"Soya milk\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Price\" value=\"£3.25\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Price\"\n      value=\"£3.25\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n  <IcDataRow label=\"Payment method\">\n    <IcTextField\n      slot=\"value\"\n      label=\"Payment method\"\n      value=\"VISA ending 5896\"\n      readonly\n      hide-label\n      full-width\n    />\n  </IcDataRow>\n</IcDataEntity>\n<IcButton\n  onClick={() => {\n    const textFields = document.querySelectorAll('ic-text-field');\n    textFields.forEach((textField) => {\n      textField.setAttribute('readonly', '');\n    })\n  }}\n  style={{\n    marginRight: \"var(--ic-space-md)\",\n    marginTop: \"var(--ic-space-lg)\",\n  }}\n>\n  Confirm\n</IcButton>\n<IcButton\n  onClick={() => {\n    const textFields = document.querySelectorAll('ic-text-field');\n    textFields.forEach((textField) => {\n      textField.removeAttribute('readonly');\n    })\n  }}\n  variant=\"secondary\"\n  style={{ marginTop: \"var(--ic-space-lg)\" }}\n>\n  Edit\n</IcButton>`,\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={editableExample} style={{ display: \"block\" }}>\n  <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n    <IcDataRow label=\"Order name\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Order name\"\n        value=\"Michael\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Drink\" value=\"Americano\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Drink\"\n        value=\"Americano\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Milk option\"\n        value=\"Soya milk\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Price\" value=\"£3.25\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Price\"\n        value=\"£3.25\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n    <IcDataRow label=\"Payment method\">\n      <IcTextField\n        slot=\"value\"\n        label=\"Payment method\"\n        value=\"VISA ending 5896\"\n        readonly\n        hide-label\n        full-width\n      />\n    </IcDataRow>\n  </IcDataEntity>\n  <IcButton\n    onClick={() => {\n      const textFields = document.querySelectorAll(\"ic-text-field\");\n      textFields.forEach((textField) => {\n        textField.setAttribute(\"readonly\", \"\");\n      });\n    }}\n    style={{\n      marginRight: \"var(--ic-space-md)\",\n      marginTop: \"var(--ic-space-lg)\",\n    }}\n  >\n    Confirm\n  </IcButton>\n  <IcButton\n    onClick={() => {\n      const textFields = document.querySelectorAll(\"ic-text-field\");\n      textFields.forEach((textField) => {\n        textField.removeAttribute(\"readonly\");\n      });\n    }}\n    variant=\"secondary\"\n    style={{ marginTop: \"var(--ic-space-lg)\" }}\n  >\n    Edit\n  </IcButton>\n</ComponentPreview>\n",
       "path": "/components/data-entity/code",
       "date": "2024-02-02",
       "title": "Data entity",
@@ -1692,10 +1692,10 @@
       ],
       "meta": {
         "relativePath": "components/data-entity/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.520Z",
-        "lastModified": "2024-04-08T22:24:28.520Z",
-        "size": 16312,
-        "formattedSize": "15.9 KB"
+        "createdAt": "2024-04-08T22:26:50.764Z",
+        "lastModified": "2024-04-08T22:26:50.764Z",
+        "size": 17424,
+        "formattedSize": "17.0 KB"
       }
     },
     {
@@ -1763,7 +1763,7 @@
     },
     {
       "id": "components__dialog__codex",
-      "contents": "\nimport {\n  IcAlert,\n  IcDialog,\n  IcButton,\n  IcCheckboxGroup,\n  IcCheckbox,\n  IcTypography,\n  IcSelect,\n} from \"@ukic/react\";\nimport { useRef, useState } from \"react\";\n\nexport const buttonProps = [\n  {\n    label: \"Go back\",\n    onclick: \"this.cancelDialog()\",\n  },\n  {\n    label: \"Continue\",\n    onclick: \"alert('Added to basket'); this.open = false;\",\n  },\n];\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const dialog = document.querySelector(\"#default-dialog\");\n  function showDialog() {    \n    dialog.open = true;\n  }\n  // Used if dismiss button is clicked\n  function hideDialog() { \n    if (dialog.open) {\n      dialog.open = false;\n    }   \n  }\n  function dialogConfirmed(ev) {\n    alert(\"Added to basket\");\n    dialog.open = false;\n  }\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"default-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      heading=\"Are you sure?\"\n      label=\"Coffee order\"\n      open={openDialog}\n      // Set state to false if dismiss button is clicked\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want\n        to continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n)\n    `,\n  },\n];\n\nexport const DefaultDialog = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        heading=\"Are you sure?\"\n        label=\"Coffee order\"\n        open={openDialog}\n        onIcDialogClosed={openDialog && handleDialogClose} // Event fired when dismiss button is clicked\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsDefault}>\n  <DefaultDialog />\n</ComponentPreview>\n\n## Dialog details\n\n<ComponentDetails component=\"ic-dialog\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const dialog = document.querySelector(\"#size-dialog\");\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Added to basket\");\n    dialog.open = false;\n  }\n  const dialog = document.querySelector(\"ic-dialog\");\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>\n<ic-button onclick=\"showDialog('#size-dialog')\">Launch sizes dialog</ic-button>\n<ic-dialog\n  id=\"size-dialog\"\n  size=\"large\" // \"small\" | \"medium\" | \"large\"\n  heading=\"Are you sure?\"\n  label=\"Coffee order\"\n>\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\n    <IcDialog\n      size=\"large\" // \"small\" | \"medium\" | \"large\"\n      open={openDialog}\n      label=\"Coffee order\" \n      heading=\"Are you sure?\"\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want to\n        continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n  },\n];\n\nexport const SizesDialogs = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\n      <IcDialog\n        size=\"large\"\n        open={openDialog}\n        label=\"Coffee order\"\n        heading=\"Are you sure?\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsSizes}>\n  <SizesDialogs />\n</ComponentPreview>\n\n### With status alerts\n\nexport const snippetsAlert = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const dialog = document.querySelector(\"#status-dialog\");\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Added to basket\");\n    dialog.open = false;\n  }\n  const dialog = document.querySelector(\"ic-dialog\");\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>\n<ic-button onclick=\"showDialog('#status-dialog')\">Launch status dialog</ic-button>\n<ic-dialog\n  id=\"status-dialog\"\n  heading=\"Are you sure?\"\n  label=\"Coffee order\"\n  size=\"medium\"\n>\n  <ic-alert\n    slot=\"alert\"\n    heading=\"They're both good\"\n    message=\"Some say tea is just as good as coffee.\"\n    variant=\"neutral\" // \"neutral\" | \"info\" | \"warn\" | \"error\" | \"success\"\n    title-above=\"true\"\n  >\n  </ic-alert>\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n  <>\n    <IcButton\n      variant=\"primary\"\n      onClick={handleDialogOpen}\n    >\n      Launch status dialog\n    </IcButton>\n    <IcDialog\n      open={openDialog}\n      heading=\"Are you sure?\"\n      label=\"Coffee order\"\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n      size=\"medium\"\n    >\n      <IcAlert\n        slot=\"alert\"\n        heading=\"They're both good\"\n        message=\"Some say tea is just as good as coffee.\"\n        variant=\"neutral\" // \"neutral\" | \"info\" | \"warn\" | \"error\" | \"success\" \n        titleAbove\n      />\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want\n        to continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n  },\n];\n\nexport const AlertDialog = () => {\n  const dialogEl = useRef(null);\n  const addTitleAboveAttribute = () => {\n    dialogEl.current\n      .querySelector(\"ic-alert\")\n      .setAttribute(\"title-above\", \"true\");\n  };\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => {\n    addTitleAboveAttribute();\n    setOpenDialog(true);\n  };\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton variant=\"primary\" onClick={handleDialogOpen}>\n        Launch dialog\n      </IcButton>\n      <IcDialog\n        ref={dialogEl}\n        open={openDialog}\n        heading=\"Are you sure?\"\n        label=\"Coffee order\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n        size=\"medium\"\n      >\n        <IcAlert\n          slot=\"alert\"\n          heading=\"They're both good\"\n          message=\"Some say tea is just as good as coffee.\"\n          variant=\"neutral\"\n          titleAbove\n        />\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsAlert}>\n  <AlertDialog />\n</ComponentPreview>\n\n### Button variations\n\nexport const snippetsCustomButtons = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const singleButtonDialog = document.querySelector(\"#single-button-dialog\");\n  const threeButtonsDialog = document.querySelector(\"#three-buttons-dialog\");\n  const destructiveButtonDialog = document.querySelector(\"#destructive-dialog\");\n  function showDialog(id) {\n    document.querySelector(id).open = true;\n  }\n  function hideDialog(ev) {\n    if (ev.target.open) {\n      ev.target.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Confirmed\");\n    ev.target.open = false;\n  }\n  singleButtonDialog.buttonProps = [\n    { label: \"Confirm\", onclick: \"alert('Confirmed');this.open = false;\" },\n  ];\n  threeButtonsDialog.buttonProps = [\n    { label: \"Cancel\", onclick: \"this.open = false;\" },\n    { label: \"Options\", onclick: \"alert('Options...');\" },\n    { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\n  ];\n  destructiveButtonDialog.buttonProps = [\n    { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\n  ];\n  singleButtonDialog.addEventListener('icDialogClosed', hideDialog);\n  threeButtonsDialog.addEventListener('icDialogClosed', hideDialog);\n  destructiveButtonDialog.addEventListener('icDialogClosed', hideDialog);\n</script>\n  <ic-button onclick=\"showDialog('#no-button-dialog')\">Launch no button dialog</ic-button>\n  <ic-button onclick=\"showDialog('#single-button-dialog')\">Launch single button dialog</ic-button>\n  <ic-button onclick=\"showDialog('#three-buttons-dialog')\">Launch three button dialog</ic-button>\n  <ic-button onclick=\"showDialog('#destructive-dialog')\">Launch destructive button dialog</ic-button>\n  <ic-dialog\n    id=\"no-button-dialog\"\n    buttons=\"false\"\n    label=\"None\"\n    heading=\"This dialog has no default buttons\"\n  >\n    Sorry, you cannot place orders at the moment. Please try again later.\n  </ic-dialog>\n  <ic-dialog id=\"single-button-dialog\" label=\"Single\" heading=\"This dialog has a single button\">\n    <ic-typography>\n      Your order for an Americano coffee has been placed.\n    </ic-typography>\n  </ic-dialog>\n  <ic-dialog id=\"three-buttons-dialog\" label=\"Three buttons\" heading=\"This dialog has three default buttons\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n    tempor incididunt ut labore et dolore magna aliqua.\n  </ic-dialog>\n  <ic-dialog\n    id=\"destructive-dialog\"\n    destructive=\"true\"\n    label=\"Destructive\" \n    heading=\"This dialog has a default destructive button\"\n  >\n    <ic-typography>\n      You are about to cancel your order for an Americano. Are you sure you want to continue?\n    </ic-typography>\n  </ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\nconst handleDialogClose = () => {\n  setOpenNoButtonDialog(false);\n  setOpenSingleButtonDialog(false);\n  setOpenThreeButtonsDialog(false);\n  setOpenDestructiveButtonDialog(false);\n}\nreturn (\n  <>\n    <div style={{ display: \"flex\", gap: \"8px\", flexWrap: \"wrap\" }}>\n      <IcButton onClick={handleNoButtonDialogOpen}>\n        Launch no button dialog\n      </IcButton>\n      <IcButton onClick={handleSingleButtonDialogOpen}>\n        Launch single button dialog\n      </IcButton>\n      <IcButton onClick={handleThreeButtonsDialogOpen}>\n        Launch three button dialog\n      </IcButton>\n      <IcButton onClick={handleDestructiveButtonDialogOpen}>\n        Launch destructive button dialog\n      </IcButton>\n    </div>\n    <IcDialog\n      open={openNoButtonDialog}\n      buttons={false}\n      label=\"None\"\n      heading=\"This dialog has no default buttons\"\n      onIcDialogClosed={openNoButtonDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n    <IcDialog\n      open={openSingleButtonDialog}\n      label=\"Single\"\n      heading=\"This dialog has a single button\"\n      buttonProps={[\n        { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n      ]}\n      onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n    <IcDialog\n      open={openThreeButtonsDialog}\n      label=\"Triple\"\n      heading=\"This dialog has three default buttons\"\n      buttonProps={[\n        { label: \"Close\", onclick: \"this.hideDialog()\" },\n        { label: \"Options\", onclick: \"alert('Options...')\" },\n        { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n      ]}\n      onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n    <IcDialog\n      open={openDestructiveButtonDialog}\n      destructive\n      label=\"Destructive\"\n      heading=\"This dialog has a default destructive button\"\n      buttonProps={[\n        { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n      ]}\n      onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n  },\n];\n\nexport const CustomButtonsDialog = () => {\n  const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\n  const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\n  const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\n  const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] =\n    useState(false);\n  const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\n  const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\n  const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\n  const handleDestructiveButtonDialogOpen = () =>\n    setOpenDestructiveButtonDialog(true);\n  const handleDialogClose = () => {\n    setOpenNoButtonDialog(false);\n    setOpenSingleButtonDialog(false);\n    setOpenThreeButtonsDialog(false);\n    setOpenDestructiveButtonDialog(false);\n  };\n  return (\n    <>\n      <div style={{ display: \"flex\", gap: \"8px\", flexWrap: \"wrap\" }}>\n        <IcButton onClick={handleNoButtonDialogOpen}>\n          Launch no button dialog\n        </IcButton>\n        <IcButton onClick={handleSingleButtonDialogOpen}>\n          Launch single button dialog\n        </IcButton>\n        <IcButton onClick={handleThreeButtonsDialogOpen}>\n          Launch three button dialog\n        </IcButton>\n        <IcButton onClick={handleDestructiveButtonDialogOpen}>\n          Launch destructive button dialog\n        </IcButton>\n      </div>\n      <IcDialog\n        open={openNoButtonDialog}\n        buttons={false}\n        label=\"None\"\n        heading=\"This dialog has no default buttons\"\n        onIcDialogClosed={openNoButtonDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n      <IcDialog\n        open={openSingleButtonDialog}\n        label=\"Single\"\n        heading=\"This dialog has a single button\"\n        buttonProps={[\n          {\n            label: \"Confirm\",\n            onclick: \"alert('Confirmed'); this.hideDialog()\",\n          },\n        ]}\n        onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n      <IcDialog\n        open={openThreeButtonsDialog}\n        label=\"Triple\"\n        heading=\"This dialog has three default buttons\"\n        buttonProps={[\n          { label: \"Close\", onclick: \"this.hideDialog()\" },\n          { label: \"Options\", onclick: \"alert('Options...')\" },\n          {\n            label: \"Confirm\",\n            onclick: \"alert('Confirmed'); this.hideDialog()\",\n          },\n        ]}\n        onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n      <IcDialog\n        open={openDestructiveButtonDialog}\n        destructive\n        label=\"Destructive\"\n        heading=\"This dialog has a default destructive button\"\n        buttonProps={[\n          {\n            label: \"Confirm\",\n            onclick: \"alert('Confirmed'); this.hideDialog()\",\n          },\n        ]}\n        onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsCustomButtons}>\n  <CustomButtonsDialog />\n</ComponentPreview>\n\n### Slotted buttons\n\nexport const snippetsSlottedButtons = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const dialog = document.querySelector(\"#slotted-dialog\");\n  function showDialog() {    \n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function addToBasket() {\n    alert(\"Added to basket\");\n    dialog.open = false;\n  }\n  dialog.addEventListener('icDialogClosed', hideDialog);\n  dialog.addEventListener('icDialogCancelled', hideDialog);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"slotted-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n  <ic-button slot=\"dialog-controls\" variant=\"secondary\" onclick=\"hideDialog()\">\n    Go back\n  </ic-button>\n  <ic-button slot=\"dialog-controls\" onclick=\"addToBasket()\">\n    Add to basket\n  </ic-button>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n  alert(\"Added to basket\");\n  setOpenDialog(false);\n}\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch slotted buttons dialog</IcButton>\n    <IcDialog\n      heading=\"Are you sure?\"\n      label=\"Coffee order\"\n      open={openDialog}\n      onIcDialogClosed={openDialog && handleDialogClose}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want\n        to continue?\n      </IcTypography>\n      <IcButton slot=\"dialog-controls\" variant=\"secondary\" onClick={handleDialogClose}>\n        Go back\n      </IcButton>\n      <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\n        Add to basket\n      </IcButton>\n    </IcDialog>\n  </>\n);`,\n  },\n];\n\nexport const SlottedButtonsDialog = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const handleAddToBasket = () => {\n    alert(\"Added to basket\");\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        heading=\"Are you sure?\"\n        label=\"Coffee order\"\n        open={openDialog}\n        onIcDialogClosed={openDialog && handleDialogClose}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n        <IcButton\n          slot=\"dialog-controls\"\n          variant=\"secondary\"\n          onClick={handleDialogClose}\n        >\n          Go back\n        </IcButton>\n        <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\n          Add to basket\n        </IcButton>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsSlottedButtons}>\n  <SlottedButtonsDialog />\n</ComponentPreview>\n\n### Interactive content\n\nexport const interactiveContentSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const dialog = document.querySelector(\"#interactive-content-dialog\");\n  const checkGroup = document.querySelector(\"ic-checkbox-group\");\n  let termsAgreed = false;\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function toggleTermsAgreed() {\n    termsAgreed = !termsAgreed;\n  }\n  function dialogConfirmed(ev) {\n    const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n    alert(message);\n    ev.target.open = false;\n  }\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n  checkGroup.addEventListener(\"icChange\", toggleTermsAgreed);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog \n  id=\"interactive-content-dialog\" \n  label=\"Coffee order\"\n  heading=\"Please agree to our terms and conditions\"\n>\n  <ic-typography>\n    Before continuing, please agree to our terms and conditions.\n  </ic-typography>\n  <ic-checkbox-group \n    name=\"terms\" \n    label=\"terms and conditions\" \n    hide-label=\"true\"\n    style=\"marginTop: 8px\"\n  >\n    <ic-checkbox label=\"I agree to the terms and conditions.\" value=\"agree\"></ic-checkbox>\n  </ic-checkbox-group>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [termsAgreed, setTermsAgreed] = useState(false);\nconst [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst toggleTermsAgreed = () => {\n  setTermsAgreed(!termsAgreed);\n}\nconst termsDialogConfirmed = (ev) => {\n  const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n  alert(message);\n  setOpenDialog(false);\n} \nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      open={openDialog}\n      label=\"Coffee order\"\n      heading=\"Please agree to our terms and conditions\"\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={termsDialogConfirmed}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Before continuing, please agree to our terms and conditions.\n      </IcTypography>\n      <IcCheckboxGroup \n        name=\"terms\" \n        label=\"terms and conditions\" \n        hideLabel\n        onIcChange={toggleTermsAgreed}\n        style={{ marginTop: \"8px\" }} \n      >\n        <IcCheckbox\n          label=\"I agree to the terms and conditions.\"\n          value=\"agree\"\n        />\n      </IcCheckboxGroup>\n    </IcDialog>\n  </>\n);`,\n  },\n];\n\nexport const InteractiveContent = () => {\n  const [termsAgreed, setTermsAgreed] = useState(false);\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const toggleTermsAgreed = () => {\n    setTermsAgreed(!termsAgreed);\n  };\n  const termsDialogConfirmed = () => {\n    const message = termsAgreed ? \"Terms agreed\" : \"Terms not agreed\";\n    alert(message);\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        open={openDialog}\n        label=\"Coffee order\"\n        heading=\"Please agree to our terms and conditions\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={termsDialogConfirmed}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Before continuing, please agree to our terms and conditions.\n        </IcTypography>\n        <IcCheckboxGroup\n          name=\"terms\"\n          label=\"terms and conditions\"\n          hideLabel\n          onIcChange={toggleTermsAgreed}\n          style={{ marginTop: \"8px\" }}\n        >\n          <IcCheckbox\n            label=\"I agree to the terms and conditions.\"\n            value=\"agree\"\n          />\n        </IcCheckboxGroup>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={interactiveContentSnippet}>\n  <InteractiveContent />\n</ComponentPreview>\n\n### Background close prevented\n\nexport const noCloseSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const dialog = document.querySelector(\"#no-close-dialog\");\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Confirmed!\");\n    ev.target.open = false;\n  }\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n  dialog.addEventListener(\"icDialogCancelled\", hideDialog);\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog\n  id=\"no-close-dialog\"\n  close-on-backdrop-click=\"false\" \n  label=\"Background close prevented\"\n  heading=\"This dialog can't be closed by clicking the background\"\n>\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);    \nconst handleDialogClose = () => setOpenDialog(false);    \nconst handleConfirmDialog = (ev) => {    \n  alert(\"Confirmed!\");\n  setOpenDialog(false);\n};\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      open={openDialog}\n      closeOnBackdropClick={false} \n      label=\"Background close prevented\"\n      heading=\"This dialog can't be closed by clicking the background\"\n      onIcDialogClosed={openDialog && handleDialogClose} \n      onIcDialogConfirmed={handleConfirmDialog} \n      onIcDialogCancelled={handleDialogClose} \n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want to continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n  },\n];\n\nexport const NoCloseContent = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const handleConfirmDialog = () => {\n    alert(\"Confirmed!\");\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        open={openDialog}\n        closeOnBackdropClick={false}\n        label=\"Background close prevented\"\n        heading=\"This dialog can't be closed by clicking the background\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleConfirmDialog}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={noCloseSnippet}>\n  <NoCloseContent />\n</ComponentPreview>\n\n### Events\n\nexport const eventsSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const dialog = document.querySelector(\"#ev-dialog\");\n  function showDialog() {\n    evDialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed() {          \n    alert(\"Dialog confirmed\");\n    dialog.open = false;\n  }\n  function dialogCancelled() {\n    alert(\"Dialog cancelled\");\n  }\n  function dialogOpened() {\n    alert(\"Dialog opened\");\n  }\n  function dialogClosed() {\n    alert(\"Dialog closed\");\n    hideDialog();\n  }\n  function cancelDialog(){\n    alert(\"Slotted cancel button\");\n    dialog.open = false;\n  }\n  function confirmDialog(){\n    alert(\"Slotted confirm button\");\n    dialog.open = false;\n  }\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogCancelled\", dialogCancelled);\n  dialog.addEventListener(\"icDialogOpened\", dialogOpened);\n  dialog.addEventListener(\"icDialogClosed\", dialogClosed);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"ev-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n  <ic-button variant=\"tertiary\" onclick=\"cancelDialog()\" slot=\"dialog-controls\">\n    Cancel\n  </ic-button>\n  <ic-button onclick=\"confirmDialog()\" slot=\"dialog-controls\">\n    Confirm\n  </ic-button>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleDialogOpened = () => alert(\"Dialog opened\");\nconst handleDialogClosed = () => {\n  alert(\"Dialog closed\");\n  if (openDialog) {\n    handleDialogClose();\n  }\n}\nconst handleDialogCancelled = () => {\n  alert(\"Dialog cancelled\");\n  setOpenDialog(false);\n}\nconst handleDialogConfirmed = () => {\n  alert(\"Dialog confirmed\");\n  setOpenDialog(false);\n};\nconst handleSlottedCancel = () => {\n  alert('Slotted cancel button');\n  setOpenDialog(false);\n};\nconst handleSlottedConfirm = () => {\n  alert('Slotted confirm button');\n  setOpenDialog(false);\n};\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      open={openDialog}\n      heading=\"This dialog utilises events\"\n      label=\"Events\"\n      onIcDialogOpened={handleDialogOpened}\n      onIcDialogConfirmed={handleDialogConfirmed}\n      onIcDialogCancelled={handleDialogCancelled}\n      onIcDialogClosed={handleDialogClosed}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want to continue?\n      </IcTypography>\n      <IcButton variant=\"tertiary\" onClick={handleSlottedCancel} slot=\"dialog-controls\">\n        Cancel\n      </IcButton>\n      <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\n        Confirm\n      </IcButton>\n    </IcDialog>\n  </>\n);`,\n  },\n];\n\nexport const EventsContent = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const handleDialogOpened = () => alert(\"Dialog opened\");\n  const handleDialogClosed = () => {\n    alert(\"Dialog closed\");\n    if (openDialog) {\n      handleDialogClose();\n    }\n  };\n  const handleDialogCancelled = () => {\n    alert(\"Dialog cancelled\");\n    setOpenDialog(false);\n  };\n  const handleDialogConfirmed = () => {\n    alert(\"Dialog confirmed\");\n    setOpenDialog(false);\n  };\n  const handleSlottedCancel = () => {\n    alert(\"Slotted cancel button\");\n    setOpenDialog(false);\n  };\n  const handleSlottedConfirm = () => {\n    alert(\"Slotted confirm button\");\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        open={openDialog}\n        heading=\"This dialog utilises events\"\n        label=\"Events\"\n        onIcDialogOpened={handleDialogOpened}\n        onIcDialogConfirmed={handleDialogConfirmed}\n        onIcDialogCancelled={handleDialogCancelled}\n        onIcDialogClosed={handleDialogClosed}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n        <IcButton\n          variant=\"tertiary\"\n          onClick={handleSlottedCancel}\n          slot=\"dialog-controls\"\n        >\n          Cancel\n        </IcButton>\n        <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\n          Confirm\n        </IcButton>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={eventsSnippet}>\n  <EventsContent />\n</ComponentPreview>\n\n### Disabled height constraint\n\nexport const popoutElements = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  const milkSelect = document.querySelector('ic-select');\n  const dialog = document.querySelector('ic-dialog');\n  milkSelect.options = [\n    { value: 'whole', label: 'Whole' },\n    { value: 'semiskinned', label: 'Semi Skinned' },\n    { value: 'oat', label: 'Oat' },\n    { value: 'almond', label: 'Almond' }\n  ];\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  dialog.addEventListener('icDialogClosed', hideDialog);\n  dialog.addEventListener('icDialogCancelled', hideDialog);\n</script>\n<ic-button onclick='showDialog()'>Launch disabled height constraint dialog</ic-button>\n<ic-dialog\n  label='Coffee order'\n  heading='Please add your milk?'\n  disable-height-constraint='true'\n>\n  <ic-typography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</ic-typography><br/>\n  <ic-typography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</ic-typography><br/>\n  <ic-select label='Please select a type of milk'></ic-select>\n</ic-dialog>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch disabled height constraint dialog</IcButton>\n    <IcDialog\n      label='Coffee order'\n      heading=\"Please add your milk\"\n      disableHeightConstraint \n      open={openDialog}\n      onIcDialogConfirmed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</IcTypography><br/>\n      <IcTypography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</IcTypography><br/>\n      <IcSelect \n        label='Select a type of milk'\n        options={[\n          { value: 'whole', label: 'Whole' },\n          { value: 'semiskinned', label: 'Semi Skinned' },\n          { value: 'oat', label: 'Oat' },\n          { value: 'almond', label: 'Almond' }\n        ]}\n      />\n    </IcDialog>\n  </>\n)`,\n  },\n];\n\nexport const DialogWithPopout = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>\n        Launch disabled height constraint dialog\n      </IcButton>\n      <IcDialog\n        label=\"Coffee order\"\n        heading=\"Please add your milk\"\n        disableHeightConstraint\n        open={openDialog}\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Sure, let's dive into the delightful world of milk, where dairy dreams\n          and coffee collide in the harmonious dance of a flat white. Picture\n          this: you stroll into your favorite coffee haunt, the aroma of freshly\n          ground beans tickling your senses. You approach the counter, ready to\n          make a crucial decision – what kind of milk will accompany your flat\n          white?\n        </IcTypography>\n        <br />\n        <IcTypography>\n          In the end, whether you go for the classic, embrace the trendy, or opt\n          for the exotic, the flat white remains a canvas waiting to be painted\n          with your milk of choice. So, next time you're at the coffee counter,\n          let your taste buds embark on a journey – a journey where milk and\n          coffee meet, and every sip tells a story, sprinkled with a dash of\n          humor and a whole lot of flavor. Cheers to the caffeinated adventure!\n        </IcTypography>\n        <br />\n        <IcSelect\n          label=\"Select a type of milk\"\n          options={[\n            { value: \"whole\", label: \"Whole\" },\n            { value: \"semiskinned\", label: \"Semi Skinned\" },\n            { value: \"oat\", label: \"Oat\" },\n            { value: \"almond\", label: \"Almond\" },\n          ]}\n        />\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={popoutElements}>\n  <DialogWithPopout />\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcAlert,\n  IcDialog,\n  IcButton,\n  IcCheckboxGroup,\n  IcCheckbox,\n  IcTypography,\n  IcSelect,\n} from \"@ukic/react\";\nimport { useRef, useState } from \"react\";\n\nexport const buttonProps = [\n  {\n    label: \"Go back\",\n    onclick: \"this.cancelDialog()\",\n  },\n  {\n    label: \"Continue\",\n    onclick: \"alert('Added to basket'); this.open = false;\",\n  },\n];\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"default-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n      long: `{shortCode}\n    <script>\n      const dialog = document.querySelector(\"#default-dialog\");\n      function showDialog() {    \n        dialog.open = true;\n      }\n      // Used if dismiss button is clicked\n      function hideDialog() { \n        if (dialog.open) {\n          dialog.open = false;\n        }   \n      }\n      function dialogConfirmed(ev) {\n        alert(\"Added to basket\");\n        dialog.open = false;\n      }\n      dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n      dialog.addEventListener(\"icDialogClosed\", hideDialog);\n    </script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      heading=\"Are you sure?\"\n      label=\"Coffee order\"\n      open={openDialog}\n      // Set state to false if dismiss button is clicked\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want\n        to continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n)\n    `,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const DefaultDialog = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        heading=\"Are you sure?\"\n        label=\"Coffee order\"\n        open={openDialog}\n        onIcDialogClosed={openDialog && handleDialogClose} // Event fired when dismiss button is clicked\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsDefault}>\n  <DefaultDialog />\n</ComponentPreview>\n\n## Dialog details\n\n<ComponentDetails component=\"ic-dialog\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"showDialog('#size-dialog')\">Launch sizes dialog</ic-button>\n<ic-dialog\n  id=\"size-dialog\"\n  size=\"large\"\n  heading=\"Are you sure?\"\n  label=\"Coffee order\"\n>\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n      long: `{shortCode}\n      <script>\n  const dialog = document.querySelector(\"#size-dialog\");\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Added to basket\");\n    dialog.open = false;\n  }\n  const dialog = document.querySelector(\"ic-dialog\");\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>\n`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\n    <IcDialog\n      size=\"large\" // \"small\" | \"medium\" | \"large\"\n      open={openDialog}\n      label=\"Coffee order\" \n      heading=\"Are you sure?\"\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want to\n        continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SizesDialogs = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\n      <IcDialog\n        size=\"large\"\n        open={openDialog}\n        label=\"Coffee order\"\n        heading=\"Are you sure?\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsSizes}>\n  <SizesDialogs />\n</ComponentPreview>\n\n### With status alerts\n\nexport const snippetsAlert = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"showDialog('#status-dialog')\">Launch status dialog</ic-button>\n<ic-dialog\n  id=\"status-dialog\"\n  heading=\"Are you sure?\"\n  label=\"Coffee order\"\n  size=\"medium\"\n>\n  <ic-alert\n    slot=\"alert\"\n    heading=\"They're both good\"\n    message=\"Some say tea is just as good as coffee.\"\n    variant=\"neutral\" // \"neutral\" | \"info\" | \"warn\" | \"error\" | \"success\"\n    title-above=\"true\"\n  >\n  </ic-alert>\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n      long: `{shortCode}\n      <script>\n  const dialog = document.querySelector(\"#status-dialog\");\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Added to basket\");\n    dialog.open = false;\n  }\n  const dialog = document.querySelector(\"ic-dialog\");\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n  <>\n    <IcButton\n      variant=\"primary\"\n      onClick={handleDialogOpen}\n    >\n      Launch status dialog\n    </IcButton>\n    <IcDialog\n      open={openDialog}\n      heading=\"Are you sure?\"\n      label=\"Coffee order\"\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n      size=\"medium\"\n    >\n      <IcAlert\n        slot=\"alert\"\n        heading=\"They're both good\"\n        message=\"Some say tea is just as good as coffee.\"\n        variant=\"neutral\" // \"neutral\" | \"info\" | \"warn\" | \"error\" | \"success\" \n        titleAbove\n      />\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want\n        to continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const AlertDialog = () => {\n  const dialogEl = useRef(null);\n  const addTitleAboveAttribute = () => {\n    dialogEl.current\n      .querySelector(\"ic-alert\")\n      .setAttribute(\"title-above\", \"true\");\n  };\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => {\n    addTitleAboveAttribute();\n    setOpenDialog(true);\n  };\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton variant=\"primary\" onClick={handleDialogOpen}>\n        Launch dialog\n      </IcButton>\n      <IcDialog\n        ref={dialogEl}\n        open={openDialog}\n        heading=\"Are you sure?\"\n        label=\"Coffee order\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n        size=\"medium\"\n      >\n        <IcAlert\n          slot=\"alert\"\n          heading=\"They're both good\"\n          message=\"Some say tea is just as good as coffee.\"\n          variant=\"neutral\"\n          titleAbove\n        />\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsAlert}>\n  <AlertDialog />\n</ComponentPreview>\n\n### Button variations\n\nexport const snippetsCustomButtons = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"showDialog('#no-button-dialog')\">Launch no button dialog</ic-button>\n  <ic-button onclick=\"showDialog('#single-button-dialog')\">Launch single button dialog</ic-button>\n  <ic-button onclick=\"showDialog('#three-buttons-dialog')\">Launch three button dialog</ic-button>\n  <ic-button onclick=\"showDialog('#destructive-dialog')\">Launch destructive button dialog</ic-button>\n  <ic-dialog\n    id=\"no-button-dialog\"\n    buttons=\"false\"\n    label=\"None\"\n    heading=\"This dialog has no default buttons\"\n  >\n    Sorry, you cannot place orders at the moment. Please try again later.\n  </ic-dialog>\n  <ic-dialog id=\"single-button-dialog\" label=\"Single\" heading=\"This dialog has a single button\">\n    <ic-typography>\n      Your order for an Americano coffee has been placed.\n    </ic-typography>\n  </ic-dialog>\n  <ic-dialog id=\"three-buttons-dialog\" label=\"Three buttons\" heading=\"This dialog has three default buttons\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n    tempor incididunt ut labore et dolore magna aliqua.\n  </ic-dialog>\n  <ic-dialog\n    id=\"destructive-dialog\"\n    destructive=\"true\"\n    label=\"Destructive\" \n    heading=\"This dialog has a default destructive button\"\n  >\n    <ic-typography>\n      You are about to cancel your order for an Americano. Are you sure you want to continue?\n    </ic-typography>\n  </ic-dialog>`,\n      long: `{shortCode}\n      <script>\n  const singleButtonDialog = document.querySelector(\"#single-button-dialog\");\n  const threeButtonsDialog = document.querySelector(\"#three-buttons-dialog\");\n  const destructiveButtonDialog = document.querySelector(\"#destructive-dialog\");\n  function showDialog(id) {\n    document.querySelector(id).open = true;\n  }\n  function hideDialog(ev) {\n    if (ev.target.open) {\n      ev.target.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Confirmed\");\n    ev.target.open = false;\n  }\n  singleButtonDialog.buttonProps = [\n    { label: \"Confirm\", onclick: \"alert('Confirmed');this.open = false;\" },\n  ];\n  threeButtonsDialog.buttonProps = [\n    { label: \"Cancel\", onclick: \"this.open = false;\" },\n    { label: \"Options\", onclick: \"alert('Options...');\" },\n    { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\n  ];\n  destructiveButtonDialog.buttonProps = [\n    { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\n  ];\n  singleButtonDialog.addEventListener('icDialogClosed', hideDialog);\n  threeButtonsDialog.addEventListener('icDialogClosed', hideDialog);\n  destructiveButtonDialog.addEventListener('icDialogClosed', hideDialog);\n</script>\n  `,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\nconst handleDialogClose = () => {\n  setOpenNoButtonDialog(false);\n  setOpenSingleButtonDialog(false);\n  setOpenThreeButtonsDialog(false);\n  setOpenDestructiveButtonDialog(false);\n}\nreturn (\n  <>\n    <div style={{ display: \"flex\", gap: \"8px\", flexWrap: \"wrap\" }}>\n      <IcButton onClick={handleNoButtonDialogOpen}>\n        Launch no button dialog\n      </IcButton>\n      <IcButton onClick={handleSingleButtonDialogOpen}>\n        Launch single button dialog\n      </IcButton>\n      <IcButton onClick={handleThreeButtonsDialogOpen}>\n        Launch three button dialog\n      </IcButton>\n      <IcButton onClick={handleDestructiveButtonDialogOpen}>\n        Launch destructive button dialog\n      </IcButton>\n    </div>\n    <IcDialog\n      open={openNoButtonDialog}\n      buttons={false}\n      label=\"None\"\n      heading=\"This dialog has no default buttons\"\n      onIcDialogClosed={openNoButtonDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n    <IcDialog\n      open={openSingleButtonDialog}\n      label=\"Single\"\n      heading=\"This dialog has a single button\"\n      buttonProps={[\n        { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n      ]}\n      onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n    <IcDialog\n      open={openThreeButtonsDialog}\n      label=\"Triple\"\n      heading=\"This dialog has three default buttons\"\n      buttonProps={[\n        { label: \"Close\", onclick: \"this.hideDialog()\" },\n        { label: \"Options\", onclick: \"alert('Options...')\" },\n        { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n      ]}\n      onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n    <IcDialog\n      open={openDestructiveButtonDialog}\n      destructive\n      label=\"Destructive\"\n      heading=\"This dialog has a default destructive button\"\n      buttonProps={[\n        { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n      ]}\n      onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const CustomButtonsDialog = () => {\n  const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\n  const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\n  const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\n  const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] =\n    useState(false);\n  const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\n  const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\n  const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\n  const handleDestructiveButtonDialogOpen = () =>\n    setOpenDestructiveButtonDialog(true);\n  const handleDialogClose = () => {\n    setOpenNoButtonDialog(false);\n    setOpenSingleButtonDialog(false);\n    setOpenThreeButtonsDialog(false);\n    setOpenDestructiveButtonDialog(false);\n  };\n  return (\n    <>\n      <div style={{ display: \"flex\", gap: \"8px\", flexWrap: \"wrap\" }}>\n        <IcButton onClick={handleNoButtonDialogOpen}>\n          Launch no button dialog\n        </IcButton>\n        <IcButton onClick={handleSingleButtonDialogOpen}>\n          Launch single button dialog\n        </IcButton>\n        <IcButton onClick={handleThreeButtonsDialogOpen}>\n          Launch three button dialog\n        </IcButton>\n        <IcButton onClick={handleDestructiveButtonDialogOpen}>\n          Launch destructive button dialog\n        </IcButton>\n      </div>\n      <IcDialog\n        open={openNoButtonDialog}\n        buttons={false}\n        label=\"None\"\n        heading=\"This dialog has no default buttons\"\n        onIcDialogClosed={openNoButtonDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n      <IcDialog\n        open={openSingleButtonDialog}\n        label=\"Single\"\n        heading=\"This dialog has a single button\"\n        buttonProps={[\n          {\n            label: \"Confirm\",\n            onclick: \"alert('Confirmed'); this.hideDialog()\",\n          },\n        ]}\n        onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n      <IcDialog\n        open={openThreeButtonsDialog}\n        label=\"Triple\"\n        heading=\"This dialog has three default buttons\"\n        buttonProps={[\n          { label: \"Close\", onclick: \"this.hideDialog()\" },\n          { label: \"Options\", onclick: \"alert('Options...')\" },\n          {\n            label: \"Confirm\",\n            onclick: \"alert('Confirmed'); this.hideDialog()\",\n          },\n        ]}\n        onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n      <IcDialog\n        open={openDestructiveButtonDialog}\n        destructive\n        label=\"Destructive\"\n        heading=\"This dialog has a default destructive button\"\n        buttonProps={[\n          {\n            label: \"Confirm\",\n            onclick: \"alert('Confirmed'); this.hideDialog()\",\n          },\n        ]}\n        onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsCustomButtons}>\n  <CustomButtonsDialog />\n</ComponentPreview>\n\n### Slotted buttons\n\nexport const snippetsSlottedButtons = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<script>\n  const dialog = document.querySelector(\"#slotted-dialog\");\n  function showDialog() {    \n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function addToBasket() {\n    alert(\"Added to basket\");\n    dialog.open = false;\n  }\n  dialog.addEventListener('icDialogClosed', hideDialog);\n  dialog.addEventListener('icDialogCancelled', hideDialog);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"slotted-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n  <ic-button slot=\"dialog-controls\" variant=\"secondary\" onclick=\"hideDialog()\">\n    Go back\n  </ic-button>\n  <ic-button slot=\"dialog-controls\" onclick=\"addToBasket()\">\n    Add to basket\n  </ic-button>\n</ic-dialog>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n  alert(\"Added to basket\");\n  setOpenDialog(false);\n}\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch slotted buttons dialog</IcButton>\n    <IcDialog\n      heading=\"Are you sure?\"\n      label=\"Coffee order\"\n      open={openDialog}\n      onIcDialogClosed={openDialog && handleDialogClose}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want\n        to continue?\n      </IcTypography>\n      <IcButton slot=\"dialog-controls\" variant=\"secondary\" onClick={handleDialogClose}>\n        Go back\n      </IcButton>\n      <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\n        Add to basket\n      </IcButton>\n    </IcDialog>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SlottedButtonsDialog = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const handleAddToBasket = () => {\n    alert(\"Added to basket\");\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        heading=\"Are you sure?\"\n        label=\"Coffee order\"\n        open={openDialog}\n        onIcDialogClosed={openDialog && handleDialogClose}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n        <IcButton\n          slot=\"dialog-controls\"\n          variant=\"secondary\"\n          onClick={handleDialogClose}\n        >\n          Go back\n        </IcButton>\n        <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\n          Add to basket\n        </IcButton>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={snippetsSlottedButtons}>\n  <SlottedButtonsDialog />\n</ComponentPreview>\n\n### Interactive content\n\nexport const interactiveContentSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<script>\n  const dialog = document.querySelector(\"#interactive-content-dialog\");\n  const checkGroup = document.querySelector(\"ic-checkbox-group\");\n  let termsAgreed = false;\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function toggleTermsAgreed() {\n    termsAgreed = !termsAgreed;\n  }\n  function dialogConfirmed(ev) {\n    const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n    alert(message);\n    ev.target.open = false;\n  }\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n  checkGroup.addEventListener(\"icChange\", toggleTermsAgreed);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog \n  id=\"interactive-content-dialog\" \n  label=\"Coffee order\"\n  heading=\"Please agree to our terms and conditions\"\n>\n  <ic-typography>\n    Before continuing, please agree to our terms and conditions.\n  </ic-typography>\n  <ic-checkbox-group \n    name=\"terms\" \n    label=\"terms and conditions\" \n    hide-label=\"true\"\n    style=\"marginTop: 8px\"\n  >\n    <ic-checkbox label=\"I agree to the terms and conditions.\" value=\"agree\"></ic-checkbox>\n  </ic-checkbox-group>\n</ic-dialog>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [termsAgreed, setTermsAgreed] = useState(false);\nconst [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst toggleTermsAgreed = () => {\n  setTermsAgreed(!termsAgreed);\n}\nconst termsDialogConfirmed = (ev) => {\n  const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n  alert(message);\n  setOpenDialog(false);\n} \nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      open={openDialog}\n      label=\"Coffee order\"\n      heading=\"Please agree to our terms and conditions\"\n      onIcDialogClosed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={termsDialogConfirmed}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>\n        Before continuing, please agree to our terms and conditions.\n      </IcTypography>\n      <IcCheckboxGroup \n        name=\"terms\" \n        label=\"terms and conditions\" \n        hideLabel\n        onIcChange={toggleTermsAgreed}\n        style={{ marginTop: \"8px\" }} \n      >\n        <IcCheckbox\n          label=\"I agree to the terms and conditions.\"\n          value=\"agree\"\n        />\n      </IcCheckboxGroup>\n    </IcDialog>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const InteractiveContent = () => {\n  const [termsAgreed, setTermsAgreed] = useState(false);\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const toggleTermsAgreed = () => {\n    setTermsAgreed(!termsAgreed);\n  };\n  const termsDialogConfirmed = () => {\n    const message = termsAgreed ? \"Terms agreed\" : \"Terms not agreed\";\n    alert(message);\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        open={openDialog}\n        label=\"Coffee order\"\n        heading=\"Please agree to our terms and conditions\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={termsDialogConfirmed}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Before continuing, please agree to our terms and conditions.\n        </IcTypography>\n        <IcCheckboxGroup\n          name=\"terms\"\n          label=\"terms and conditions\"\n          hideLabel\n          onIcChange={toggleTermsAgreed}\n          style={{ marginTop: \"8px\" }}\n        >\n          <IcCheckbox\n            label=\"I agree to the terms and conditions.\"\n            value=\"agree\"\n          />\n        </IcCheckboxGroup>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={interactiveContentSnippet}>\n  <InteractiveContent />\n</ComponentPreview>\n\n### Background close prevented\n\nexport const noCloseSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<script>\n  const dialog = document.querySelector(\"#no-close-dialog\");\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed(ev) {\n    alert(\"Confirmed!\");\n    ev.target.open = false;\n  }\n  dialog.addEventListener(\"icDialogClosed\", hideDialog);\n  dialog.addEventListener(\"icDialogCancelled\", hideDialog);\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog\n  id=\"no-close-dialog\"\n  close-on-backdrop-click=\"false\" \n  label=\"Background close prevented\"\n  heading=\"This dialog can't be closed by clicking the background\"\n>\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n</ic-dialog>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);    \nconst handleDialogClose = () => setOpenDialog(false);    \nconst handleConfirmDialog = (ev) => {    \n  alert(\"Confirmed!\");\n  setOpenDialog(false);\n};\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      open={openDialog}\n      closeOnBackdropClick={false} \n      label=\"Background close prevented\"\n      heading=\"This dialog can't be closed by clicking the background\"\n      onIcDialogClosed={openDialog && handleDialogClose} \n      onIcDialogConfirmed={handleConfirmDialog} \n      onIcDialogCancelled={handleDialogClose} \n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want to continue?\n      </IcTypography>\n    </IcDialog>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const NoCloseContent = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const handleConfirmDialog = () => {\n    alert(\"Confirmed!\");\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        open={openDialog}\n        closeOnBackdropClick={false}\n        label=\"Background close prevented\"\n        heading=\"This dialog can't be closed by clicking the background\"\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleConfirmDialog}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </IcTypography>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={noCloseSnippet}>\n  <NoCloseContent />\n</ComponentPreview>\n\n### Events\n\nexport const eventsSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<script>\n  const dialog = document.querySelector(\"#ev-dialog\");\n  function showDialog() {\n    evDialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  function dialogConfirmed() {          \n    alert(\"Dialog confirmed\");\n    dialog.open = false;\n  }\n  function dialogCancelled() {\n    alert(\"Dialog cancelled\");\n  }\n  function dialogOpened() {\n    alert(\"Dialog opened\");\n  }\n  function dialogClosed() {\n    alert(\"Dialog closed\");\n    hideDialog();\n  }\n  function cancelDialog(){\n    alert(\"Slotted cancel button\");\n    dialog.open = false;\n  }\n  function confirmDialog(){\n    alert(\"Slotted confirm button\");\n    dialog.open = false;\n  }\n  dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n  dialog.addEventListener(\"icDialogCancelled\", dialogCancelled);\n  dialog.addEventListener(\"icDialogOpened\", dialogOpened);\n  dialog.addEventListener(\"icDialogClosed\", dialogClosed);\n</script>\n<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"ev-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n  <ic-typography>\n    You are about to add 'Americano' to your basket. Are you sure you want to continue?\n  </ic-typography>\n  <ic-button variant=\"tertiary\" onclick=\"cancelDialog()\" slot=\"dialog-controls\">\n    Cancel\n  </ic-button>\n  <ic-button onclick=\"confirmDialog()\" slot=\"dialog-controls\">\n    Confirm\n  </ic-button>\n</ic-dialog>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleDialogOpened = () => alert(\"Dialog opened\");\nconst handleDialogClosed = () => {\n  alert(\"Dialog closed\");\n  if (openDialog) {\n    handleDialogClose();\n  }\n}\nconst handleDialogCancelled = () => {\n  alert(\"Dialog cancelled\");\n  setOpenDialog(false);\n}\nconst handleDialogConfirmed = () => {\n  alert(\"Dialog confirmed\");\n  setOpenDialog(false);\n};\nconst handleSlottedCancel = () => {\n  alert('Slotted cancel button');\n  setOpenDialog(false);\n};\nconst handleSlottedConfirm = () => {\n  alert('Slotted confirm button');\n  setOpenDialog(false);\n};\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n    <IcDialog\n      open={openDialog}\n      heading=\"This dialog utilises events\"\n      label=\"Events\"\n      onIcDialogOpened={handleDialogOpened}\n      onIcDialogConfirmed={handleDialogConfirmed}\n      onIcDialogCancelled={handleDialogCancelled}\n      onIcDialogClosed={handleDialogClosed}\n    >\n      <IcTypography>\n        You are about to add 'Americano' to your basket. Are you sure you want to continue?\n      </IcTypography>\n      <IcButton variant=\"tertiary\" onClick={handleSlottedCancel} slot=\"dialog-controls\">\n        Cancel\n      </IcButton>\n      <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\n        Confirm\n      </IcButton>\n    </IcDialog>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const EventsContent = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  const handleDialogOpened = () => alert(\"Dialog opened\");\n  const handleDialogClosed = () => {\n    alert(\"Dialog closed\");\n    if (openDialog) {\n      handleDialogClose();\n    }\n  };\n  const handleDialogCancelled = () => {\n    alert(\"Dialog cancelled\");\n    setOpenDialog(false);\n  };\n  const handleDialogConfirmed = () => {\n    alert(\"Dialog confirmed\");\n    setOpenDialog(false);\n  };\n  const handleSlottedCancel = () => {\n    alert(\"Slotted cancel button\");\n    setOpenDialog(false);\n  };\n  const handleSlottedConfirm = () => {\n    alert(\"Slotted confirm button\");\n    setOpenDialog(false);\n  };\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n      <IcDialog\n        open={openDialog}\n        heading=\"This dialog utilises events\"\n        label=\"Events\"\n        onIcDialogOpened={handleDialogOpened}\n        onIcDialogConfirmed={handleDialogConfirmed}\n        onIcDialogCancelled={handleDialogCancelled}\n        onIcDialogClosed={handleDialogClosed}\n      >\n        <IcTypography>\n          You are about to add 'Americano' to your basket. Are you sure you want\n          to continue?\n        </IcTypography>\n        <IcButton\n          variant=\"tertiary\"\n          onClick={handleSlottedCancel}\n          slot=\"dialog-controls\"\n        >\n          Cancel\n        </IcButton>\n        <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\n          Confirm\n        </IcButton>\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={eventsSnippet}>\n  <EventsContent />\n</ComponentPreview>\n\n### Disabled height constraint\n\nexport const popoutElements = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<script>\n  const milkSelect = document.querySelector('ic-select');\n  const dialog = document.querySelector('ic-dialog');\n  milkSelect.options = [\n    { value: 'whole', label: 'Whole' },\n    { value: 'semiskinned', label: 'Semi Skinned' },\n    { value: 'oat', label: 'Oat' },\n    { value: 'almond', label: 'Almond' }\n  ];\n  function showDialog() {\n    dialog.open = true;\n  }\n  function hideDialog() {\n    if (dialog.open) {\n      dialog.open = false;\n    }\n  }\n  dialog.addEventListener('icDialogClosed', hideDialog);\n  dialog.addEventListener('icDialogCancelled', hideDialog);\n</script>\n<ic-button onclick='showDialog()'>Launch disabled height constraint dialog</ic-button>\n<ic-dialog\n  label='Coffee order'\n  heading='Please add your milk?'\n  disable-height-constraint='true'\n>\n  <ic-typography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</ic-typography><br/>\n  <ic-typography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</ic-typography><br/>\n  <ic-select label='Please select a type of milk'></ic-select>\n</ic-dialog>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n  <>\n    <IcButton onClick={handleDialogOpen}>Launch disabled height constraint dialog</IcButton>\n    <IcDialog\n      label='Coffee order'\n      heading=\"Please add your milk\"\n      disableHeightConstraint \n      open={openDialog}\n      onIcDialogConfirmed={openDialog && handleDialogClose}\n      onIcDialogConfirmed={handleDialogClose}\n      onIcDialogCancelled={handleDialogClose}\n    >\n      <IcTypography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</IcTypography><br/>\n      <IcTypography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</IcTypography><br/>\n      <IcSelect \n        label='Select a type of milk'\n        options={[\n          { value: 'whole', label: 'Whole' },\n          { value: 'semiskinned', label: 'Semi Skinned' },\n          { value: 'oat', label: 'Oat' },\n          { value: 'almond', label: 'Almond' }\n        ]}\n      />\n    </IcDialog>\n  </>\n)`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const DialogWithPopout = () => {\n  const [openDialog, setOpenDialog] = useState(false);\n  const handleDialogOpen = () => setOpenDialog(true);\n  const handleDialogClose = () => setOpenDialog(false);\n  return (\n    <>\n      <IcButton onClick={handleDialogOpen}>\n        Launch disabled height constraint dialog\n      </IcButton>\n      <IcDialog\n        label=\"Coffee order\"\n        heading=\"Please add your milk\"\n        disableHeightConstraint\n        open={openDialog}\n        onIcDialogClosed={openDialog && handleDialogClose}\n        onIcDialogConfirmed={handleDialogClose}\n        onIcDialogCancelled={handleDialogClose}\n      >\n        <IcTypography>\n          Sure, let's dive into the delightful world of milk, where dairy dreams\n          and coffee collide in the harmonious dance of a flat white. Picture\n          this: you stroll into your favorite coffee haunt, the aroma of freshly\n          ground beans tickling your senses. You approach the counter, ready to\n          make a crucial decision – what kind of milk will accompany your flat\n          white?\n        </IcTypography>\n        <br />\n        <IcTypography>\n          In the end, whether you go for the classic, embrace the trendy, or opt\n          for the exotic, the flat white remains a canvas waiting to be painted\n          with your milk of choice. So, next time you're at the coffee counter,\n          let your taste buds embark on a journey – a journey where milk and\n          coffee meet, and every sip tells a story, sprinkled with a dash of\n          humor and a whole lot of flavor. Cheers to the caffeinated adventure!\n        </IcTypography>\n        <br />\n        <IcSelect\n          label=\"Select a type of milk\"\n          options={[\n            { value: \"whole\", label: \"Whole\" },\n            { value: \"semiskinned\", label: \"Semi Skinned\" },\n            { value: \"oat\", label: \"Oat\" },\n            { value: \"almond\", label: \"Almond\" },\n          ]}\n        />\n      </IcDialog>\n    </>\n  );\n};\n\n<ComponentPreview snippets={popoutElements}>\n  <DialogWithPopout />\n</ComponentPreview>\n",
       "path": "/components/dialog/code",
       "date": "2023-10-26",
       "title": "Dialog",
@@ -1786,10 +1786,10 @@
       ],
       "meta": {
         "relativePath": "components/dialog/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.520Z",
-        "lastModified": "2024-04-08T22:24:28.520Z",
-        "size": 41011,
-        "formattedSize": "40.0 KB"
+        "createdAt": "2024-04-08T22:26:50.768Z",
+        "lastModified": "2024-04-08T22:26:50.768Z",
+        "size": 43573,
+        "formattedSize": "42.6 KB"
       }
     },
     {
@@ -1857,7 +1857,7 @@
     },
     {
       "id": "components__empty-state__codex",
-      "contents": "\nimport { IcEmptyState, IcButton, IcLink } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those.\">\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <ic-button slot=\"actions\">Go to favourite coffees</ic-button>\n    <ic-link slot=\"actions\" href=\"/\">\n      Customer support\n    </ic-link>\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those.\" \n    >\n    <SlottedSVG slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"/\">\n      Customer support\n    </IcLink>\n  </IcEmptyState>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those.\"\n  >\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\n      Customer support\n    </IcLink>\n  </IcEmptyState>\n</ComponentPreview>\n\n## Empty state details\n\n<ComponentDetails component=\"ic-empty-state\" />\n\n## Variants\n\n### Actions slot\n\nexport const actionsSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <ic-button slot=\"actions\">Go to favourite coffees</ic-button>\n    <ic-link slot=\"actions\" href=\"/\">Customer support</ic-link>\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"/\">Customer support</IcLink>\n</IcEmptyState>`,\n  },\n];\n\n<ComponentPreview snippets={actionsSnippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\n      Customer support\n    </IcLink>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Image slot\n\nexport const imageSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <svg\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <SlottedSVG\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n</IcEmptyState>`,\n  },\n];\n\n<ComponentPreview snippets={imageSnippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Image size\n\nexport const imageLargeSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    image-size=\"large\" \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <svg\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    imageSize=\"large\" \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <SlottedSVG\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n</IcEmptyState>`,\n  },\n];\n\n<ComponentPreview snippets={imageLargeSnippets}>\n  <IcEmptyState\n    imageSize=\"large\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Icon in the image slot\n\nexport const iconSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n  <svg\n    slot=\"image\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#D07932\"\n  >\n    <title id=\"warning-title\">Warning</title>\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n  </svg>\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n  <SlottedSVG\n    slot=\"image\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#D07932\"\n  >\n    <title id=\"warning-title\">Warning</title>\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n  </SlottedSVG>\n</IcEmptyState>`,\n  },\n];\n\n<ComponentPreview snippets={iconSnippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <svg\n      slot=\"image\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#D07932\"\n    >\n      <title id=\"warning-title\">Warning</title>\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n    </svg>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Right aligned\n\nexport const rightSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    aligned=\"right\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\">\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    aligned=\"right\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\" \n/>`,\n  },\n];\n\n<ComponentPreview snippets={rightSnippets}>\n  <IcEmptyState\n    aligned=\"right\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  />\n</ComponentPreview>\n\n### Center aligned\n\nexport const centreSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    aligned=\"center\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\">\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    aligned=\"center\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n/>`,\n  },\n];\n\n<ComponentPreview snippets={centreSnippets}>\n  <IcEmptyState\n    aligned=\"center\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  />\n</ComponentPreview>\n\n### Max lines\n\nexport const maxLinesSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-empty-state \n    body-max-lines=\"1\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\">\n</ic-empty-state>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcEmptyState \n    bodyMaxLines=\"1\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\n/>`,\n  },\n];\n\n<ComponentPreview snippets={maxLinesSnippets}>\n  <IcEmptyState\n    bodyMaxLines=\"1\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\n  />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcEmptyState, IcButton, IcLink } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those.\">\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <ic-button slot=\"actions\">Go to favourite coffees</ic-button>\n    <ic-link slot=\"actions\" href=\"/\">\n      Customer support\n    </ic-link>\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those.\" \n    >\n    <SlottedSVG slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"/\">\n      Customer support\n    </IcLink>\n  </IcEmptyState>`,\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={snippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those.\"\n  >\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\n      Customer support\n    </IcLink>\n  </IcEmptyState>\n</ComponentPreview>\n\n## Empty state details\n\n<ComponentDetails component=\"ic-empty-state\" />\n\n## Variants\n\n### Actions slot\n\nexport const actionsSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <ic-button slot=\"actions\">Go to favourite coffees</ic-button>\n    <ic-link slot=\"actions\" href=\"/\">Customer support</ic-link>\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"/\">Customer support</IcLink>\n</IcEmptyState>`,\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={actionsSnippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n    <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\n      Customer support\n    </IcLink>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Image slot\n\nexport const imageSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <svg\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <SlottedSVG\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n</IcEmptyState>`,\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={imageSnippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Image size\n\nexport const imageLargeSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    image-size=\"large\" \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <svg\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    imageSize=\"large\" \n    heading=\"Hmm...there's nothing here\" \n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n    <SlottedSVG\n      slot=\"image\"\n      viewBox=\"0 0 1600 1600\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n</IcEmptyState>`,\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={imageLargeSnippets}>\n  <IcEmptyState\n    imageSize=\"large\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Icon in the image slot\n\nexport const iconSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n  <svg\n    slot=\"image\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#D07932\"\n  >\n    <title id=\"warning-title\">Warning</title>\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n  </svg>\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n  <SlottedSVG\n    slot=\"image\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"#D07932\"\n  >\n    <title id=\"warning-title\">Warning</title>\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n  </SlottedSVG>\n</IcEmptyState>`,\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={iconSnippets}>\n  <IcEmptyState\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  >\n    <svg\n      slot=\"image\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"#D07932\"\n    >\n      <title id=\"warning-title\">Warning</title>\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n    </svg>\n  </IcEmptyState>\n</ComponentPreview>\n\n### Right aligned\n\nexport const rightSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    aligned=\"right\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\">\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    aligned=\"right\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\" \n/>`,\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={rightSnippets}>\n  <IcEmptyState\n    aligned=\"right\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  />\n</ComponentPreview>\n\n### Center aligned\n\nexport const centreSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    aligned=\"center\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\">\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    aligned=\"center\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n/>`,\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={centreSnippets}>\n  <IcEmptyState\n    aligned=\"center\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n  />\n</ComponentPreview>\n\n### Max lines\n\nexport const maxLinesSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-empty-state \n    body-max-lines=\"1\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\">\n</ic-empty-state>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcEmptyState \n    bodyMaxLines=\"1\" \n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\n/>`,\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={maxLinesSnippets}>\n  <IcEmptyState\n    bodyMaxLines=\"1\"\n    heading=\"Hmm...there's nothing here\"\n    subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n    body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\n  />\n</ComponentPreview>\n",
       "path": "/components/empty-state/code",
       "date": "2023-08-09",
       "title": "Empty state",
@@ -1880,10 +1880,10 @@
       ],
       "meta": {
         "relativePath": "components/empty-state/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.532Z",
-        "lastModified": "2024-04-08T22:24:28.532Z",
-        "size": 19759,
-        "formattedSize": "19.3 KB"
+        "createdAt": "2024-04-08T22:26:50.768Z",
+        "lastModified": "2024-04-08T22:26:50.768Z",
+        "size": 21983,
+        "formattedSize": "21.5 KB"
       }
     },
     {
@@ -1951,7 +1951,7 @@
     },
     {
       "id": "components__footer__codex",
-      "contents": "\nimport { IcFooter, IcLink, IcFooterLink, IcFooterLinkGroup } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-footer\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Accessibility\n    </ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Styles\n    </ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Components\n    </ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Patterns\n    </ic-footer-link>\n</ic-footer>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcFooter\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Accessibility\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Styles\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Components\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Patterns\n    </IcFooterLink>\n</IcFooter>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcFooter\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n  >\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Accessibility\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Styles\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Components\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Patterns\n    </IcFooterLink>\n  </IcFooter>\n</ComponentPreview>\n\n## Footer details\n\n<ComponentDetails component=\"ic-footer\" />\n\n## Footer link details\n\n<ComponentDetails component=\"ic-footer-link\" />\n\n## Footer link group details\n\n<ComponentDetails component=\"ic-footer-link-group\" />\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-footer\n    group-links=\"true\"\n    description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\">\n    <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n      <ic-footer-link href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link href=\"/\">Styles</ic-footer-link>\n      <ic-footer-link href=\"/\">Components</ic-footer-link>\n      <ic-footer-link href=\"/\">Patterns</ic-footer-link>\n    </ic-footer-link-group>\n    <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n      <ic-footer-link href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link href=\"/\">Styles</ic-footer-link>\n      <ic-footer-link href=\"/\">Components</ic-footer-link>\n      <ic-footer-link href=\"/\">Patterns</ic-footer-link>\n    </ic-footer-link-group>\n    <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n      <ic-footer-link href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link href=\"/\">Styles</ic-footer-link>\n      <ic-footer-link href=\"/\">Components</ic-footer-link>\n      <ic-footer-link href=\"/\">Patterns</ic-footer-link>\n    </ic-footer-link-group>\n  </ic-footer>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcFooter\n    groupLinks\n    description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\">\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n  </IcFooter>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsGroupedLinks}>\n  <IcFooter\n    groupLinks\n    description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\"\n  >\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n  </IcFooter>\n</ComponentPreview>\n\n### Logo links\n\nexport const snippetsLogoLinks = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-footer description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\">\n  <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n  <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n  <ic-footer-link slot=\"link\" href=\"/\">Components</ic-footer-link>\n  <ic-footer-link slot=\"link\" href=\"/\">Patterns</ic-footer-link>\n    <div slot=\"logo\">\n      <ic-footer-link href=\"/\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n      </svg>\n      </ic-footer-link>\n      <ic-footer-link href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </div>\n</ic-footer>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcFooter description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\">\n  <IcFooterLink slot=\"link\" href=\"/\">Accessibility</IcFooterLink>\n  <IcFooterLink slot=\"link\" href=\"/\">Styles</IcFooterLink>\n  <IcFooterLink slot=\"link\" href=\"/\">Components</IcFooterLink>\n  <IcFooterLink slot=\"link\" href=\"/\">Patterns</IcFooterLink>\n  <div slot=\"logo\">\n    <IcFooterLink href=\"/\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"48px\"\n        viewBox=\"0 0 24 24\"\n        width=\"48px\"\n        fill=\"#FFFFFF\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcFooterLink>\n    <IcFooterLink href=\"/\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"48px\"\n        viewBox=\"0 0 24 24\"\n        width=\"48px\"\n        fill=\"#FFFFFF\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcFooterLink>\n  </div>\n</IcFooter>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsLogoLinks}>\n  <IcFooter description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\">\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Accessibility\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Styles\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Components\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Patterns\n    </IcFooterLink>\n    <div\n      slot=\"logo\"\n      style={{\n        display: \"flex\",\n        gap: \"var(--ic-space-lg)\",\n      }}\n    >\n      <IcFooterLink href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </IcFooterLink>\n      <IcFooterLink href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </IcFooterLink>\n    </div>\n  </IcFooter>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    language: \"React\",\n    snippet: `<MemoryRouter initialEntries={[\"/\"]}>\n  <Routes>\n      <Route path=\"/\" element={() => <IcTypography>This is the accessibility page</IcTypography>} />\n      <Route path=\"/Styles\" element={() => <IcTypography>This page is about styles</IcTypography>} />\n  </Routes>\n  <IcFooter description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\" caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\" \n  > \n    <IcFooterLink slot=\"link\">\n      <NavLink to=\"/\">Accessibility</NavLink>\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\">\n      <NavLink to=\"/Styles\">Styles</NavLink>\n    </IcFooterLink>\n    <div slot=\"logo\" style={{\n    width: \"100px\",\n    height: \"100px\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    backgroundColor: \"var(--ic-theme-primary)\",\n    color: \"var(--ic-theme-text)\"\n  }}>\n      Logo\n    </div>\n  </IcFooter>\n</MemoryRouter>\n    `,\n  },\n];\n\n<ComponentPreview\n  snippets={withReactRouter}\n  style={{ flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcFooter\n      description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n    >\n      <IcFooterLink slot=\"link\">\n        <NavLink to=\"/\">Accessibility</NavLink>\n      </IcFooterLink>\n      <IcFooterLink slot=\"link\">\n        <NavLink to=\"/Styles\">Styles</NavLink>\n      </IcFooterLink>\n      <div\n        slot=\"logo\"\n        style={{\n          width: \"100px\",\n          height: \"100px\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: \"var(--ic-theme-primary)\",\n          color: \"var(--ic-theme-text)\",\n        }}\n      >\n        Logo\n      </div>\n    </IcFooter>\n  </MemoryRouter>\n</ComponentPreview>\n\n## Layout example\n\nAdding a `minHeight` of `100vh` ensures the footer appears below the page fold.\n\nexport const footerLayoutExample = [\n  {\n    language: \"Web component\",\n    snippet: `<div class='footer-layout-root'>\n  <div style=\"height: 100vh\">  \n    <ic-top-navigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </svg>\n    </ic-top-navigation>\n    <main>\n      <ic-section-container>\n        <ic-typography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n          vestibulum venenatis facilisis. Nam tortor felis, auctor vel\n          ante quis, tempor interdum libero. In dictum sodales velit, eu\n          egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\n          laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\n          lectus magna interdum risus, vel fringilla libero ex eu dui.\n          Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\n          nisl, vitae congue ligula rutrum id.\n        </ic-typography>\n      </ic-section-container>\n    </main>\n  </div>\n  <ic-footer\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">Components</ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">Patterns</ic-footer-link>\n  </ic-footer>\n</div>\n    `,\n  },\n  {\n    language: \"React\",\n    snippet: `<div className='footer-layout-root'>\n  <div style={{minHeight:\"100vh\"}}>  \n    <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n      <SlottedSVG\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </SlottedSVG>\n    </IcTopNavigation>\n    <main>\n      <IcSectionContainer>\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n          vestibulum venenatis facilisis. Nam tortor felis, auctor vel\n          ante quis, tempor interdum libero. In dictum sodales velit, eu\n          egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\n          laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\n          lectus magna interdum risus, vel fringilla libero ex eu dui.\n          Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\n          nisl, vitae congue ligula rutrum id.\n        </IcTypography>\n      </IcSectionContainer>\n    </main>\n  </div>\n  <IcFooter\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <IcFooterLink slot=\"link\" href=\"/\">Accessibility</IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">Styles</IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">Components</IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">Patterns</IcFooterLink>\n  </IcFooter>\n</div>`,\n  },\n];\n\n<ComponentPreview snippets={footerLayoutExample}>\n  <IcLink href=\"/footer-layout\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcFooter, IcLink, IcFooterLink, IcFooterLinkGroup } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-footer\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Accessibility\n    </ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Styles\n    </ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Components\n    </ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">\n      Patterns\n    </ic-footer-link>\n</ic-footer>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcFooter\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Accessibility\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Styles\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Components\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Patterns\n    </IcFooterLink>\n</IcFooter>`,\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={snippets}>\n  <IcFooter\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n  >\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Accessibility\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Styles\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Components\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Patterns\n    </IcFooterLink>\n  </IcFooter>\n</ComponentPreview>\n\n## Footer details\n\n<ComponentDetails component=\"ic-footer\" />\n\n## Footer link details\n\n<ComponentDetails component=\"ic-footer-link\" />\n\n## Footer link group details\n\n<ComponentDetails component=\"ic-footer-link-group\" />\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-footer\n    group-links=\"true\"\n    description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\">\n    <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n      <ic-footer-link href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link href=\"/\">Styles</ic-footer-link>\n      <ic-footer-link href=\"/\">Components</ic-footer-link>\n      <ic-footer-link href=\"/\">Patterns</ic-footer-link>\n    </ic-footer-link-group>\n    <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n      <ic-footer-link href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link href=\"/\">Styles</ic-footer-link>\n      <ic-footer-link href=\"/\">Components</ic-footer-link>\n      <ic-footer-link href=\"/\">Patterns</ic-footer-link>\n    </ic-footer-link-group>\n    <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n      <ic-footer-link href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link href=\"/\">Styles</ic-footer-link>\n      <ic-footer-link href=\"/\">Components</ic-footer-link>\n      <ic-footer-link href=\"/\">Patterns</ic-footer-link>\n    </ic-footer-link-group>\n  </ic-footer>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcFooter\n    groupLinks\n    description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\">\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n  </IcFooter>`,\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={snippetsGroupedLinks}>\n  <IcFooter\n    groupLinks\n    description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, \n          please get in touch.\"\n  >\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n    <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n      <IcFooterLink href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink href=\"/\">Styles</IcFooterLink>\n      <IcFooterLink href=\"/\">Components</IcFooterLink>\n      <IcFooterLink href=\"/\">Patterns</IcFooterLink>\n    </IcFooterLinkGroup>\n  </IcFooter>\n</ComponentPreview>\n\n### Logo links\n\nexport const snippetsLogoLinks = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-footer description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\">\n  <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n  <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n  <ic-footer-link slot=\"link\" href=\"/\">Components</ic-footer-link>\n  <ic-footer-link slot=\"link\" href=\"/\">Patterns</ic-footer-link>\n    <div slot=\"logo\">\n      <ic-footer-link href=\"/\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n      </svg>\n      </ic-footer-link>\n      <ic-footer-link href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </div>\n</ic-footer>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcFooter description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\">\n  <IcFooterLink slot=\"link\" href=\"/\">Accessibility</IcFooterLink>\n  <IcFooterLink slot=\"link\" href=\"/\">Styles</IcFooterLink>\n  <IcFooterLink slot=\"link\" href=\"/\">Components</IcFooterLink>\n  <IcFooterLink slot=\"link\" href=\"/\">Patterns</IcFooterLink>\n  <div slot=\"logo\">\n    <IcFooterLink href=\"/\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"48px\"\n        viewBox=\"0 0 24 24\"\n        width=\"48px\"\n        fill=\"#FFFFFF\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcFooterLink>\n    <IcFooterLink href=\"/\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"48px\"\n        viewBox=\"0 0 24 24\"\n        width=\"48px\"\n        fill=\"#FFFFFF\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcFooterLink>\n  </div>\n</IcFooter>`,\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={snippetsLogoLinks}>\n  <IcFooter description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\">\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Accessibility\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Styles\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Components\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">\n      Patterns\n    </IcFooterLink>\n    <div\n      slot=\"logo\"\n      style={{\n        display: \"flex\",\n        gap: \"var(--ic-space-lg)\",\n      }}\n    >\n      <IcFooterLink href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </IcFooterLink>\n      <IcFooterLink href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"48px\"\n          viewBox=\"0 0 24 24\"\n          width=\"48px\"\n          fill=\"#FFFFFF\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </IcFooterLink>\n    </div>\n  </IcFooter>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<MemoryRouter initialEntries={[\"/\"]}>\n  <Routes>\n      <Route path=\"/\" element={() => <IcTypography>This is the accessibility page</IcTypography>} />\n      <Route path=\"/Styles\" element={() => <IcTypography>This page is about styles</IcTypography>} />\n  </Routes>\n  <IcFooter description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\" caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\" \n  > \n    <IcFooterLink slot=\"link\">\n      <NavLink to=\"/\">Accessibility</NavLink>\n    </IcFooterLink>\n    <IcFooterLink slot=\"link\">\n      <NavLink to=\"/Styles\">Styles</NavLink>\n    </IcFooterLink>\n    <div slot=\"logo\" style={{\n    width: \"100px\",\n    height: \"100px\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    backgroundColor: \"var(--ic-theme-primary)\",\n    color: \"var(--ic-theme-text)\"\n  }}>\n      Logo\n    </div>\n  </IcFooter>\n</MemoryRouter>\n    `,\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\n  snippets={withReactRouter}\n  style={{ flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcFooter\n      description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n    >\n      <IcFooterLink slot=\"link\">\n        <NavLink to=\"/\">Accessibility</NavLink>\n      </IcFooterLink>\n      <IcFooterLink slot=\"link\">\n        <NavLink to=\"/Styles\">Styles</NavLink>\n      </IcFooterLink>\n      <div\n        slot=\"logo\"\n        style={{\n          width: \"100px\",\n          height: \"100px\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: \"var(--ic-theme-primary)\",\n          color: \"var(--ic-theme-text)\",\n        }}\n      >\n        Logo\n      </div>\n    </IcFooter>\n  </MemoryRouter>\n</ComponentPreview>\n\n## Layout example\n\nAdding a `minHeight` of `100vh` ensures the footer appears below the page fold.\n\nexport const footerLayoutExample = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<div class='footer-layout-root'>\n  <div style=\"height: 100vh\">  \n    <ic-top-navigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </svg>\n    </ic-top-navigation>\n    <main>\n      <ic-section-container>\n        <ic-typography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n          vestibulum venenatis facilisis. Nam tortor felis, auctor vel\n          ante quis, tempor interdum libero. In dictum sodales velit, eu\n          egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\n          laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\n          lectus magna interdum risus, vel fringilla libero ex eu dui.\n          Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\n          nisl, vitae congue ligula rutrum id.\n        </ic-typography>\n      </ic-section-container>\n    </main>\n  </div>\n  <ic-footer\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">Components</ic-footer-link>\n    <ic-footer-link slot=\"link\" href=\"/\">Patterns</ic-footer-link>\n  </ic-footer>\n</div>\n    `,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<div className='footer-layout-root'>\n  <div style={{minHeight:\"100vh\"}}>  \n    <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n      <SlottedSVG\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </SlottedSVG>\n    </IcTopNavigation>\n    <main>\n      <IcSectionContainer>\n        <IcTypography>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n          vestibulum venenatis facilisis. Nam tortor felis, auctor vel\n          ante quis, tempor interdum libero. In dictum sodales velit, eu\n          egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\n          laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\n          lectus magna interdum risus, vel fringilla libero ex eu dui.\n          Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\n          nisl, vitae congue ligula rutrum id.\n        </IcTypography>\n      </IcSectionContainer>\n    </main>\n  </div>\n  <IcFooter\n    description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n    caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n    <IcFooterLink slot=\"link\" href=\"/\">Accessibility</IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">Styles</IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">Components</IcFooterLink>\n    <IcFooterLink slot=\"link\" href=\"/\">Patterns</IcFooterLink>\n  </IcFooter>\n</div>`,\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={footerLayoutExample}>\n  <IcLink href=\"/footer-layout\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n",
       "path": "/components/footer/code",
       "date": "2024-02-02",
       "title": "Footer",
@@ -1974,10 +1974,10 @@
       ],
       "meta": {
         "relativePath": "components/footer/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.532Z",
-        "lastModified": "2024-04-08T22:24:28.532Z",
-        "size": 17352,
-        "formattedSize": "16.9 KB"
+        "createdAt": "2024-04-08T22:26:50.768Z",
+        "lastModified": "2024-04-08T22:26:50.768Z",
+        "size": 18690,
+        "formattedSize": "18.3 KB"
       }
     },
     {
@@ -2045,7 +2045,7 @@
     },
     {
       "id": "components__hero__codex",
-      "contents": "\nimport { IcHero, IcButton, IcSearchBar, IcCard } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n</ic-hero>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n</IcHero>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n## Hero details\n\n<ComponentDetails component=\"ic-hero\" />\n\n## Variants\n\n### Centre aligned\n\nexport const snippetsCentre = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n</ic-hero>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n</IcHero>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsCentre}>\n  <IcHero\n    aligned=\"center\"\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n### Content centre aligned\n\nexport const snippetsContentCentre = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\" content-aligned=\"center\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n</ic-hero>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\" contentAligned=\"center\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n</IcHero>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsContentCentre}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    aligned=\"center\"\n    contentAligned=\"center\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-hero\n  heading=\"New coffee launches 14 September 2022\"\n  subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n  size=\"small\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\" size=\"small\">Order now</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\" size=\"small\">Submit new flavour</ic-button>\n</ic-hero>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcHero\n  heading=\"New coffee launches 14 September 2022\"\n  subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n  size=\"small\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">Order now</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">Submit new flavour</IcButton>\n</IcHero>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n  <IcHero\n    heading=\"New coffee launches 14 September 2022\"\n    subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n    size=\"small\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">\n      Order now\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">\n      Submit new flavour\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n### Secondary heading and search\n\nexport const snippetsSecondHeadingSearch = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n  secondary-heading=\"The classics\" \n  secondary-subheading=\"Try our original flavours.\"\n>\n  <ic-search-bar slot=\"interaction\" label=\"Search for coffee\" hide-label=\"true\"></ic-search-bar>\n</ic-hero>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n  secondaryHeading=\"The classics\" \n  secondarySubheading=\"Try our original flavours.\"\n>\n  <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel/>\n</IcHero>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSecondHeadingSearch}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    secondaryHeading=\"The classics\"\n    secondarySubheading=\"Try our original flavours.\"\n  >\n    <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel />\n  </IcHero>\n</ComponentPreview>\n\n### Card right content\n\nexport const snippetsCard = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-hero \n  heading=\"Everything I brew, I brew it for you\" \n  subheading=\"This news is hot off the French press.\" \n  card-heading=\"Out now\" \n  card-message=\"Try our new strawberry infused tea.\" \n  aligned=\"full-width\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n  <ic-card\n    heading=\"Out now\"\n    message=\"Try our new strawberry infused tea.\"\n    slot=\"secondary\"\n    class=\"hero-card\"\n  ></ic-card>\n  <style>\n    .hero-card {\n      color: var(--ic-theme-text);\n      width: 300px;\n    }\n  </style>\n</ic-hero>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcHero \n  heading=\"Everything I brew, I brew it for you\" \n  subheading=\"This news is hot off the French press.\" \n  cardHeading=\"Out now\" \n  cardMessage=\"Try our new strawberry infused tea.\" \n  aligned=\"full-width\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n  <IcCard\n    heading=\"Out now\"\n    message=\"Try our new strawberry infused tea.\"\n    slot=\"secondary\"\n    class=\"hero-card\"\n    style={{\n      color: \"var(--ic-theme-text)\",\n      width: \"300px\"\n    }}\n  />\n</IcHero>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsCard}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    cardHeading=\"Out now\"\n    cardMessage=\"Try our new strawberry infused tea.\"\n    aligned=\"full-width\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n    <IcCard\n      heading=\"Out now\"\n      message=\"Try our new strawberry infused tea.\"\n      slot=\"secondary\"\n      class=\"hero-card\"\n      style={{\n        color: \"var--ic-theme-text\",\n        width: \"300px\",\n      }}\n    />\n  </IcHero>\n</ComponentPreview>\n\n### Image right content\n\nexport const snippetsImage = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n  aligned=\"full-width\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n  <svg\n    slot=\"secondary\"\n    style={{\n      width: \"300px\",\n    }}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 1600 900\"\n  >\n    <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\n    <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n    <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n    <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n    <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n    <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n    <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n    <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n    <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n    <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n    <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n    <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n    <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n  </svg>\n</ic-hero>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    aligned=\"full-width\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n    <SlottedSVG\n      slot=\"secondary\"\n      style={{\n        width: \"300px\",\n      }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 1600 900\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n  </IcHero>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsImage}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    aligned=\"full-width\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n    <svg\n      slot=\"secondary\"\n      style={{\n        width: \"300px\",\n      }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 1600 900\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcHero>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcHero, IcButton, IcSearchBar, IcCard } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n</ic-hero>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n</IcHero>`,\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={snippets}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n## Hero details\n\n<ComponentDetails component=\"ic-hero\" />\n\n## Variants\n\n### Centre aligned\n\nexport const snippetsCentre = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n</ic-hero>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n</IcHero>`,\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={snippetsCentre}>\n  <IcHero\n    aligned=\"center\"\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n### Content centre aligned\n\nexport const snippetsContentCentre = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\" content-aligned=\"center\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n</ic-hero>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\" aligned=\"center\" contentAligned=\"center\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n</IcHero>`,\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={snippetsContentCentre}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    aligned=\"center\"\n    contentAligned=\"center\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-hero\n  heading=\"New coffee launches 14 September 2022\"\n  subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n  size=\"small\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\" size=\"small\">Order now</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\" size=\"small\">Submit new flavour</ic-button>\n</ic-hero>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcHero\n  heading=\"New coffee launches 14 September 2022\"\n  subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n  size=\"small\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">Order now</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">Submit new flavour</IcButton>\n</IcHero>`,\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={snippetsSmall}>\n  <IcHero\n    heading=\"New coffee launches 14 September 2022\"\n    subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n    size=\"small\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">\n      Order now\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">\n      Submit new flavour\n    </IcButton>\n  </IcHero>\n</ComponentPreview>\n\n### Secondary heading and search\n\nexport const snippetsSecondHeadingSearch = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n  secondary-heading=\"The classics\" \n  secondary-subheading=\"Try our original flavours.\"\n>\n  <ic-search-bar slot=\"interaction\" label=\"Search for coffee\" hide-label=\"true\"></ic-search-bar>\n</ic-hero>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcHero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n  secondaryHeading=\"The classics\" \n  secondarySubheading=\"Try our original flavours.\"\n>\n  <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel/>\n</IcHero>`,\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={snippetsSecondHeadingSearch}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    secondaryHeading=\"The classics\"\n    secondarySubheading=\"Try our original flavours.\"\n  >\n    <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel />\n  </IcHero>\n</ComponentPreview>\n\n### Card right content\n\nexport const snippetsCard = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-hero \n  heading=\"Everything I brew, I brew it for you\" \n  subheading=\"This news is hot off the French press.\" \n  card-heading=\"Out now\" \n  card-message=\"Try our new strawberry infused tea.\" \n  aligned=\"full-width\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n  <ic-card\n    heading=\"Out now\"\n    message=\"Try our new strawberry infused tea.\"\n    slot=\"secondary\"\n    class=\"hero-card\"\n  ></ic-card>\n  <style>\n    .hero-card {\n      color: var(--ic-theme-text);\n      width: 300px;\n    }\n  </style>\n</ic-hero>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcHero \n  heading=\"Everything I brew, I brew it for you\" \n  subheading=\"This news is hot off the French press.\" \n  cardHeading=\"Out now\" \n  cardMessage=\"Try our new strawberry infused tea.\" \n  aligned=\"full-width\"\n>\n  <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n  <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n  <IcCard\n    heading=\"Out now\"\n    message=\"Try our new strawberry infused tea.\"\n    slot=\"secondary\"\n    class=\"hero-card\"\n    style={{\n      color: \"var(--ic-theme-text)\",\n      width: \"300px\"\n    }}\n  />\n</IcHero>`,\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={snippetsCard}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    cardHeading=\"Out now\"\n    cardMessage=\"Try our new strawberry infused tea.\"\n    aligned=\"full-width\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n    <IcCard\n      heading=\"Out now\"\n      message=\"Try our new strawberry infused tea.\"\n      slot=\"secondary\"\n      class=\"hero-card\"\n      style={{\n        color: \"var--ic-theme-text\",\n        width: \"300px\",\n      }}\n    />\n  </IcHero>\n</ComponentPreview>\n\n### Image right content\n\nexport const snippetsImage = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-hero\n  heading=\"Everything I brew, I brew it for you\"\n  subheading=\"This news is hot off the French press.\"\n  aligned=\"full-width\"\n>\n  <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n  <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n  <svg\n    slot=\"secondary\"\n    style={{\n      width: \"300px\",\n    }}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 1600 900\"\n  >\n    <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\n    <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n    <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n    <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n    <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n    <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n    <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n    <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n    <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n    <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n    <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n    <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n    <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n  </svg>\n</ic-hero>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    aligned=\"full-width\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n    <SlottedSVG\n      slot=\"secondary\"\n      style={{\n        width: \"300px\",\n      }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 1600 900\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </SlottedSVG>\n  </IcHero>`,\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={snippetsImage}>\n  <IcHero\n    heading=\"Everything I brew, I brew it for you\"\n    subheading=\"This news is hot off the French press.\"\n    aligned=\"full-width\"\n  >\n    <IcButton variant=\"primary\" slot=\"interaction\">\n      Explore\n    </IcButton>\n    <IcButton variant=\"secondary\" slot=\"interaction\">\n      Check out our new drinks\n    </IcButton>\n    <svg\n      slot=\"secondary\"\n      style={{\n        width: \"300px\",\n      }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 1600 900\"\n    >\n      <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\n      <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n      <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n      <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n      <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n      <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n      <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n      <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n      <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n      <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n      <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n      <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n      <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n    </svg>\n  </IcHero>\n</ComponentPreview>\n",
       "path": "/components/hero/code",
       "date": "2023-10-25",
       "title": "Hero",
@@ -2068,10 +2068,10 @@
       ],
       "meta": {
         "relativePath": "components/hero/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.532Z",
-        "lastModified": "2024-04-08T22:24:28.532Z",
-        "size": 12993,
-        "formattedSize": "12.7 KB"
+        "createdAt": "2024-04-08T22:26:50.768Z",
+        "lastModified": "2024-04-08T22:26:50.768Z",
+        "size": 14939,
+        "formattedSize": "14.6 KB"
       }
     },
     {
@@ -2155,7 +2155,7 @@
     },
     {
       "id": "components__links__codex",
-      "contents": "\nimport { IcLink } from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-link href=\"/components/link/code\">About our coffees</ic-link>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLink href=\"/components/link/code\">About our coffees</IcLink>`,\n  },\n];\n\n## Component demo\n\n<ComponentPreview snippets={snippets}>\n  <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\n    About our coffees\n  </IcLink>\n</ComponentPreview>\n\n## Link details\n\n<ComponentDetails component=\"ic-link\" />\n\n## Variants\n\n### With icon\n\nexport const snippetsIcon = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-link href=\"/\" target=\"_blank\">About our coffees</ic-link>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLink href=\"/\" target=\"_blank\">About our coffees</IcLink>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsIcon}>\n  <IcLink href=\"/\" target=\"_blank\">\n    About our coffees\n  </IcLink>\n</ComponentPreview>\n\n### Light and dark\n\nexport const snippetsLightDark = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-link href=\"/\" appearance=\"dark\" target=\"_blank\">About our coffees</ic-link>\n<ic-link href=\"/\" appearance=\"light\" target=\"_blank\">About our coffees</ic-link>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">About our coffees</IcLink>\n<IcLink href=\"/\" appearance=\"light\" target=\"_blank\">About our coffees</IcLink>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsLightDark}>\n  <div\n    style={{\n      padding: \"8px\",\n    }}\n  >\n    <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\n      About our coffees\n    </IcLink>\n  </div>\n  <div\n    style={{\n      background: \"#333333\",\n      padding: \"8px\",\n    }}\n  >\n    <IcLink href=\"/\" appearance=\"light\" target=\"_blank\">\n      About our coffees\n    </IcLink>\n  </div>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    language: \"React\",\n    snippet: `<MemoryRouter initialEntries={[\"/\"]}>\n  <div style={{display: \"flex\", flexDirection: \"row\", gap: \"8px\"}}>\n    <IcLink>\n      <NavLink to=\"/\" slot=\"router-item\">Home</NavLink>\n    </IcLink>\n    <IcLink>\n      <NavLink to=\"/daily-tippers\" slot=\"router-item\">Beverages</NavLink>\n    </IcLink>\n  </div>\n  <IcSectionContainer>\n    <Routes>\n      <Route path=\"/\" element={() => <IcTypography>This is the home page</IcTypography>} />\n      <Route path=\"/daily-tippers\" element={() => <IcTypography>This page is about beverages</IcTypography>} />\n    </Routes>\n  </IcSectionContainer>\n</MemoryRouter>\n    `,\n  },\n];\n\n<ComponentPreview\n  snippets={withReactRouter}\n  style={{ flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"8px\",\n      }}\n    >\n      <IcLink>\n        <NavLink to=\"/\" slot=\"router-item\">\n          Home\n        </NavLink>\n      </IcLink>\n      <IcLink>\n        <NavLink to=\"/daily-tippers\" slot=\"router-item\">\n          Beverages\n        </NavLink>\n      </IcLink>\n    </div>\n  </MemoryRouter>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcLink } from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-link href=\"/components/link/code\">About our coffees</ic-link>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLink href=\"/components/link/code\">About our coffees</IcLink>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n## Component demo\n\n<ComponentPreview snippets={snippets}>\n  <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\n    About our coffees\n  </IcLink>\n</ComponentPreview>\n\n## Link details\n\n<ComponentDetails component=\"ic-link\" />\n\n## Variants\n\n### With icon\n\nexport const snippetsIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-link href=\"/\" target=\"_blank\">About our coffees</ic-link>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLink href=\"/\" target=\"_blank\">About our coffees</IcLink>`,\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={snippetsIcon}>\n  <IcLink href=\"/\" target=\"_blank\">\n    About our coffees\n  </IcLink>\n</ComponentPreview>\n\n### Light and dark\n\nexport const snippetsLightDark = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-link href=\"/\" appearance=\"dark\" target=\"_blank\">About our coffees</ic-link>\n<ic-link href=\"/\" appearance=\"light\" target=\"_blank\">About our coffees</ic-link>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">About our coffees</IcLink>\n<IcLink href=\"/\" appearance=\"light\" target=\"_blank\">About our coffees</IcLink>`,\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={snippetsLightDark}>\n  <div\n    style={{\n      padding: \"8px\",\n    }}\n  >\n    <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\n      About our coffees\n    </IcLink>\n  </div>\n  <div\n    style={{\n      background: \"#333333\",\n      padding: \"8px\",\n    }}\n  >\n    <IcLink href=\"/\" appearance=\"light\" target=\"_blank\">\n      About our coffees\n    </IcLink>\n  </div>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<MemoryRouter initialEntries={[\"/\"]}>\n  <div style={{display: \"flex\", flexDirection: \"row\", gap: \"8px\"}}>\n    <IcLink>\n      <NavLink to=\"/\" slot=\"router-item\">Home</NavLink>\n    </IcLink>\n    <IcLink>\n      <NavLink to=\"/daily-tippers\" slot=\"router-item\">Beverages</NavLink>\n    </IcLink>\n  </div>\n  <IcSectionContainer>\n    <Routes>\n      <Route path=\"/\" element={() => <IcTypography>This is the home page</IcTypography>} />\n      <Route path=\"/daily-tippers\" element={() => <IcTypography>This page is about beverages</IcTypography>} />\n    </Routes>\n  </IcSectionContainer>\n</MemoryRouter>\n    `,\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\n  snippets={withReactRouter}\n  style={{ flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"8px\",\n      }}\n    >\n      <IcLink>\n        <NavLink to=\"/\" slot=\"router-item\">\n          Home\n        </NavLink>\n      </IcLink>\n      <IcLink>\n        <NavLink to=\"/daily-tippers\" slot=\"router-item\">\n          Beverages\n        </NavLink>\n      </IcLink>\n    </div>\n  </MemoryRouter>\n</ComponentPreview>\n",
       "path": "/components/link/code",
       "date": "2023-07-27",
       "title": "Link",
@@ -2178,10 +2178,10 @@
       ],
       "meta": {
         "relativePath": "components/links/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.536Z",
-        "lastModified": "2024-04-08T22:24:28.536Z",
-        "size": 3608,
-        "formattedSize": "3.5 KB"
+        "createdAt": "2024-04-08T22:26:50.772Z",
+        "lastModified": "2024-04-08T22:26:50.772Z",
+        "size": 4668,
+        "formattedSize": "4.6 KB"
       }
     },
     {
@@ -2249,7 +2249,7 @@
     },
     {
       "id": "components__loading-indicators__codex",
-      "contents": "\nimport { IcLoadingIndicator } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-loading-indicator type=\"circular\" label=\"Loading...\" />\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" />`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" />`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippets}\n  style={{ flexDirection: \"column\", gap: \"8px\" }}\n>\n  <IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\n  <IcLoadingIndicator type=\"linear\" label=\"Loading...\" />\n</ComponentPreview>\n\n## Loading indicator details\n\n<ComponentDetails component=\"ic-loading-indicator\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"small\"/>\n<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"large\"/>\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"small\"/>\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"large\"/>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\n<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSizes}\n  style={{ flexDirection: \"column\", gap: \"8px\" }}\n>\n  <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\n  <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\n  <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\n  <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />\n</ComponentPreview>\n\n### Icon\n\nexport const snippetsIcon = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-loading-indicator size=\"icon\"/>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLoadingIndicator size=\"icon\" />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsIcon}>\n  <IcLoadingIndicator size=\"icon\" />\n</ComponentPreview>\n\n### Determinate\n\nexport const snippetsDeterminate = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-loading-indicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"/>\n<ic-loading-indicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"/>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLoadingIndicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />\n<IcLoadingIndicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsDeterminate}\n  style={{ flexDirection: \"column\", gap: \"8px\" }}\n>\n  <IcLoadingIndicator\n    type=\"circular\"\n    label=\"Progress 30%\"\n    progress=\"30\"\n    min=\"0\"\n    max=\"100\"\n  />\n  <IcLoadingIndicator\n    type=\"linear\"\n    label=\"Progress 30%\"\n    progress=\"30\"\n    min=\"0\"\n    max=\"100\"\n  />\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-loading-indicator type=\"circular\" name=\"Loading\" appearance=\"light\"></ic-loading-indicator>\n<ic-loading-indicator type=\"linear\" name=\"Loading\" appearance=\"light\"></ic-loading-indicator>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLoadingIndicator type=\"circular\" name=\"Loading\" appearance=\"light\" />\n<IcLoadingIndicator type=\"linear\" name=\"Loading\" appearance=\"light\"/>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsLight}\n  style={{ flexDirection: \"column\", gap: \"8px\", background: \"#333333\" }}\n>\n  <IcLoadingIndicator type=\"circular\" name=\"Loading\" appearance=\"light\" />\n  <IcLoadingIndicator type=\"linear\" name=\"Loading\" appearance=\"light\" />\n</ComponentPreview>\n\n### Changing label\n\nexport const snippetsChangingLabel = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-loading-indicator type=\"circular\" label=\"Loading.../Still loading...\" label-duration=\"4000\"></ic-loading-indicator>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcLoadingIndicator type=\"circular\" label=\"Loading.../Still loading...\" labelDuration=\"4000\" />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsChangingLabel}>\n  <IcLoadingIndicator\n    type=\"circular\"\n    label=\"Loading.../Still loading...\"\n    labelDuration=\"4000\"\n  />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcLoadingIndicator } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-loading-indicator type=\"circular\" label=\"Loading...\" />\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" />`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" />`,\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\n  snippets={snippets}\n  style={{ flexDirection: \"column\", gap: \"8px\" }}\n>\n  <IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\n  <IcLoadingIndicator type=\"linear\" label=\"Loading...\" />\n</ComponentPreview>\n\n## Loading indicator details\n\n<ComponentDetails component=\"ic-loading-indicator\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"small\"/>\n<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"large\"/>\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"small\"/>\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"large\"/>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\n<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />`,\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\n  snippets={snippetsSizes}\n  style={{ flexDirection: \"column\", gap: \"8px\" }}\n>\n  <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\n  <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\n  <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\n  <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />\n</ComponentPreview>\n\n### Icon\n\nexport const snippetsIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-loading-indicator size=\"icon\"/>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLoadingIndicator size=\"icon\" />`,\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={snippetsIcon}>\n  <IcLoadingIndicator size=\"icon\" />\n</ComponentPreview>\n\n### Determinate\n\nexport const snippetsDeterminate = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-loading-indicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"/>\n<ic-loading-indicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"/>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLoadingIndicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />\n<IcLoadingIndicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />`,\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\n  snippets={snippetsDeterminate}\n  style={{ flexDirection: \"column\", gap: \"8px\" }}\n>\n  <IcLoadingIndicator\n    type=\"circular\"\n    label=\"Progress 30%\"\n    progress=\"30\"\n    min=\"0\"\n    max=\"100\"\n  />\n  <IcLoadingIndicator\n    type=\"linear\"\n    label=\"Progress 30%\"\n    progress=\"30\"\n    min=\"0\"\n    max=\"100\"\n  />\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-loading-indicator type=\"circular\" name=\"Loading\" appearance=\"light\"></ic-loading-indicator>\n<ic-loading-indicator type=\"linear\" name=\"Loading\" appearance=\"light\"></ic-loading-indicator>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLoadingIndicator type=\"circular\" name=\"Loading\" appearance=\"light\" />\n<IcLoadingIndicator type=\"linear\" name=\"Loading\" appearance=\"light\"/>`,\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\n  snippets={snippetsLight}\n  style={{ flexDirection: \"column\", gap: \"8px\", background: \"#333333\" }}\n>\n  <IcLoadingIndicator type=\"circular\" name=\"Loading\" appearance=\"light\" />\n  <IcLoadingIndicator type=\"linear\" name=\"Loading\" appearance=\"light\" />\n</ComponentPreview>\n\n### Changing label\n\nexport const snippetsChangingLabel = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-loading-indicator type=\"circular\" label=\"Loading.../Still loading...\" label-duration=\"4000\"></ic-loading-indicator>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcLoadingIndicator type=\"circular\" label=\"Loading.../Still loading...\" labelDuration=\"4000\" />`,\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={snippetsChangingLabel}>\n  <IcLoadingIndicator\n    type=\"circular\"\n    label=\"Loading.../Still loading...\"\n    labelDuration=\"4000\"\n  />\n</ComponentPreview>\n",
       "path": "/components/loading-indicator/code",
       "date": "2023-02-03",
       "title": "Loading indicator",
@@ -2272,10 +2272,10 @@
       ],
       "meta": {
         "relativePath": "components/loading-indicators/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.536Z",
-        "lastModified": "2024-04-08T22:24:28.536Z",
-        "size": 5056,
-        "formattedSize": "4.9 KB"
+        "createdAt": "2024-04-08T22:26:50.772Z",
+        "lastModified": "2024-04-08T22:26:50.772Z",
+        "size": 6724,
+        "formattedSize": "6.6 KB"
       }
     },
     {
@@ -2343,7 +2343,7 @@
     },
     {
       "id": "components__page-header__codex",
-      "contents": "\nimport {\n  IcPageHeader,\n  IcButton,\n  IcStepper,\n  IcStep,\n  SlottedSVG,\n  IcTextField,\n  IcNavigationItem,\n  IcBreadcrumb,\n  IcBreadcrumbGroup,\n  IcSectionContainer,\n  IcChip,\n  IcTypography,\n} from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-page-header heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n    reverseOrder >\n    <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <ic-button slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </ic-button>\n    <ic-button slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </ic-button>\n    <ic-stepper slot=\"stepper\">\n      <ic-step stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <ic-step\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <ic-step stepTitle=\"Pour milk\" stepType=\"current\" />\n    </ic-stepper>\n    <ic-text-field\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n    </ic-page-header>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPageHeader heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n    reverseOrder \n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcStepper slot=\"stepper\">\n      <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <IcStep\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n    </IcStepper>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>`,\n  },\n];\n\n<ComponentPreview snippets={snippets} style={{ flexDirection: \"column\" }}>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcStepper slot=\"stepper\">\n      <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <IcStep\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n    </IcStepper>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>\n</ComponentPreview>\n\n## Page header details\n\n<ComponentDetails component=\"ic-page-header\" />\n\n## Variants\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-page-header size=\"small\" heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"></ic-page-header>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPageHeader size=\"small\" heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSmall} style={{ flexDirection: \"column\" }}>\n  <IcPageHeader\n    size=\"small\"\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n  />\n</ComponentPreview>\n\n### With breadcrumb navigation\n\nexport const withBreadcrumbNavigation = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-breadcrumb-group slot=\"breadcrumbs\">\n    <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\n    <ic-breadcrumb\n      page-title=\"Coffees\" \n      href=\"#\"\n    >\n    </ic-breadcrumb>\n    <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\n  </ic-breadcrumb-group>\n</ic-page-header>\n    `,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPageHeader heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcBreadcrumbGroup slot=\"breadcrumbs\">\n    <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n    <IcBreadcrumb \n      pageTitle=\"Coffees\" \n      href=\"#\"\n    />\n    <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n  </IcBreadcrumbGroup>\n</IcPageHeader>\n    `,\n  },\n];\n\n<ComponentPreview\n  snippets={withBreadcrumbNavigation}\n  style={{ flexDirection: \"column\" }}\n>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcBreadcrumbGroup slot=\"breadcrumbs\">\n      <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n      <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n      <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n    </IcBreadcrumbGroup>\n  </IcPageHeader>\n</ComponentPreview>\n\n### With actions, input and stepper\n\nexport const withActionsInputStepper = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" reverse-order=\"true\">\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\n  <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n  <ic-stepper slot=\"stepper\">\n    <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n    <ic-step step-title=\"Warm milk\" step-subtitle=\"Optional\" step-type=\"completed\"></ic-step>\n    <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n  </ic-stepper>\n  <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\n</ic-page-header>\n    `,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPageHeader heading=\"latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" reverseOrder>\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcButton slot=\"actions\" variant=\"primary\">\n    Create coffee\n  </IcButton>\n  <IcButton slot=\"actions\" variant=\"tertiary\">\n    Filter coffee\n  </IcButton>\n  <IcStepper slot=\"stepper\">\n    <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Warm milk\" stepSubtitle=\"Optional\" stepType=\"completed\" />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n  </IcStepper>\n  <IcTextField slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hideLabel />\n</IcPageHeader>\n    `,\n  },\n];\n\n<ComponentPreview\n  snippets={withActionsInputStepper}\n  style={{ flexDirection: \"column\" }}\n>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcStepper slot=\"stepper\">\n      <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <IcStep\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n    </IcStepper>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>\n</ComponentPreview>\n\n### With actions, input and tabs\n\nexport const withActionsInputTabs = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-page-header \n  heading=\"Latte recipe\" \n  subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \n  reverse-order=\"true\"\n>\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\n  <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n  <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\"></ic-text-field>\n  <ic-navigation-item \n    slot=\"tabs\" \n    label=\"Method\" \n    href=\"#\" \n    selected=\"true\"\n  >\n  </ic-navigation-item>\n  <ic-navigation-item \n    slot=\"tabs\" \n    label=\"Ingredients\" \n    href=\"#\"\n  >\n  </ic-navigation-item>\n</ic-page-header>\n    `,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPageHeader \n  heading=\"Latte recipe\" \n  subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \n  reverseOrder>\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcButton slot=\"actions\" variant=\"primary\">\n    Create coffee\n  </IcButton>\n  <IcButton slot=\"actions\" variant=\"tertiary\">\n    Filter coffee\n  </IcButton>\n  <IcTextField \n    slot=\"input\" \n    placeholder=\"Search for ingredients…\"\n    label=\"Input\" \n    hideLabel \n  />\n  <IcNavigationItem \n    slot=\"tabs\" \n    label=\"Method\" \n    href=\"#\" \n    selected \n  />\n  <IcNavigationItem \n    slot=\"tabs\" \n    label=\"Ingredients\" \n    href=\"#\" \n  />\n</IcPageHeader>\n    `,\n  },\n];\n\n<ComponentPreview\n  snippets={withActionsInputTabs}\n  style={{ flexDirection: \"column\" }}\n>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n    <IcNavigationItem slot=\"tabs\" label=\"Method\" href=\"#\" selected />\n    <IcNavigationItem slot=\"tabs\" label=\"Ingredients\" href=\"#\" />\n  </IcPageHeader>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    language: \"React\",\n    snippet: `<MemoryRouter initialEntries={[\"/\"]}>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"/>\n    <IcButton slot=\"actions\" variant=\"primary\"\n      >Create coffee\n      <SlottedSVG \n        slot=\"icon\" \n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">Filter coffee</IcButton>\n    <IcNavigationItem slot=\"tabs\" selected>\n      <NavLink slot=\"navigation-item\" to=\"/\">Method</NavLink>\n    </IcNavigationItem>        \n    <IcNavigationItem slot=\"tabs\">\n      <NavLink slot=\"navigation-item\" to=\"/favourites\">Ingredients</NavLink>\n    </IcNavigationItem>\n    <IcTextField \n      slot=\"input\" \n      placeholder=\"Search for ingredients…\"\n      label=\"Input\" \n      hideLabel \n      style={{'@media (maxWidth: 576px)':{width: \"280px\"}}}\n    />\n  </IcPageHeader>\n  <IcSectionContainer>\n      <Routes>\n        <Route path=\"/\" element={() => <IcTypography>This page is about our Latte making methods</IcTypography>}/>\n        <Route path=\"/favourites\" element={() => <IcTypography>This page is about the ingredients used in our Latte</IcTypography>}/>\n      </Routes>\n  </IcSectionContainer>\n</MemoryRouter>\n    `,\n  },\n];\n\n<ComponentPreview\n  snippets={withReactRouter}\n  style={{ flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcPageHeader\n      heading=\"Latte recipe\"\n      subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n      reverseOrder\n    >\n      <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n      <IcButton slot=\"actions\" variant=\"primary\">\n        Create coffee\n        <SlottedSVG\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n            fill=\"currentColor\"\n          />\n        </SlottedSVG>\n      </IcButton>\n      <IcButton slot=\"actions\" variant=\"tertiary\">\n        Filter coffee\n      </IcButton>\n      <IcNavigationItem slot=\"tabs\" selected>\n        <NavLink slot=\"navigation-item\" to=\"/\">\n          Method\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"tabs\">\n        <NavLink slot=\"navigation-item\" to=\"/favourites\">\n          Ingredients\n        </NavLink>\n      </IcNavigationItem>\n      <IcTextField\n        slot=\"input\"\n        placeholder=\"Search for ingredients…\"\n        label=\"Input\"\n        hideLabel\n        style={{ \"@media (maxWidth: 576px)\": { width: \"280px\" } }}\n      />\n    </IcPageHeader>\n    <IcSectionContainer />\n  </MemoryRouter>\n</ComponentPreview>\n\n### With Slots\n\nexport const withSlots = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-page-header>\n  <ic-typography variant=\"h1\" slot=\"heading\">Latte recipe</ic-typography>\n  <ic-typography slot=\"subheading\">A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.</ic-typography>\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-breadcrumb-group slot=\"breadcrumbs\">\n    <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\n    <ic-breadcrumb page-title=\"Coffees\" href=\"#\"></ic-breadcrumb>\n    <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\n  </ic-breadcrumb-group>\n  <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\n</ic-page-header>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPageHeader>\n  <IcTypography variant=\"h1\" slot=\"heading\">\n    Latte recipe\n  </IcTypography>\n  <IcTypography slot=\"subheading\">\n    A Latte is a popular Italian coffee, made with espresso, steamed milk and\n    a thin layer of foam.\n  </IcTypography>\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcBreadcrumbGroup slot=\"breadcrumbs\">\n    <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n    <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n    <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n  </IcBreadcrumbGroup>\n  <IcTextField\n    slot=\"input\"\n    placeholder=\"Search for ingredients…\"\n    label=\"Input\"\n    hideLabel\n  />\n</IcPageHeader>`,\n  },\n];\n\n<ComponentPreview snippets={withSlots} style={{ flexDirection: \"column\" }}>\n  <IcPageHeader>\n    <IcTypography variant=\"h1\" slot=\"heading\">\n      Latte recipe\n    </IcTypography>\n    <IcTypography slot=\"subheading\">\n      A Latte is a popular Italian coffee, made with espresso, steamed milk and\n      a thin layer of foam.\n    </IcTypography>\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcBreadcrumbGroup slot=\"breadcrumbs\">\n      <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n      <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n      <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n    </IcBreadcrumbGroup>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcPageHeader,\n  IcButton,\n  IcStepper,\n  IcStep,\n  SlottedSVG,\n  IcTextField,\n  IcNavigationItem,\n  IcBreadcrumb,\n  IcBreadcrumbGroup,\n  IcSectionContainer,\n  IcChip,\n  IcTypography,\n} from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-page-header heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n    reverseOrder >\n    <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <ic-button slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </ic-button>\n    <ic-button slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </ic-button>\n    <ic-stepper slot=\"stepper\">\n      <ic-step stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <ic-step\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <ic-step stepTitle=\"Pour milk\" stepType=\"current\" />\n    </ic-stepper>\n    <ic-text-field\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n    </ic-page-header>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPageHeader heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n    reverseOrder \n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcStepper slot=\"stepper\">\n      <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <IcStep\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n    </IcStepper>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>`,\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={snippets} style={{ flexDirection: \"column\" }}>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcStepper slot=\"stepper\">\n      <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <IcStep\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n    </IcStepper>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>\n</ComponentPreview>\n\n## Page header details\n\n<ComponentDetails component=\"ic-page-header\" />\n\n## Variants\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-page-header size=\"small\" heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"></ic-page-header>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPageHeader size=\"small\" heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" />`,\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={snippetsSmall} style={{ flexDirection: \"column\" }}>\n  <IcPageHeader\n    size=\"small\"\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n  />\n</ComponentPreview>\n\n### With breadcrumb navigation\n\nexport const withBreadcrumbNavigation = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-breadcrumb-group slot=\"breadcrumbs\">\n    <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\n    <ic-breadcrumb\n      page-title=\"Coffees\" \n      href=\"#\"\n    >\n    </ic-breadcrumb>\n    <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\n  </ic-breadcrumb-group>\n</ic-page-header>\n    `,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPageHeader heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcBreadcrumbGroup slot=\"breadcrumbs\">\n    <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n    <IcBreadcrumb \n      pageTitle=\"Coffees\" \n      href=\"#\"\n    />\n    <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n  </IcBreadcrumbGroup>\n</IcPageHeader>\n    `,\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\n  snippets={withBreadcrumbNavigation}\n  style={{ flexDirection: \"column\" }}\n>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcBreadcrumbGroup slot=\"breadcrumbs\">\n      <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n      <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n      <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n    </IcBreadcrumbGroup>\n  </IcPageHeader>\n</ComponentPreview>\n\n### With actions, input and stepper\n\nexport const withActionsInputStepper = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" reverse-order=\"true\">\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\n  <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n  <ic-stepper slot=\"stepper\">\n    <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n    <ic-step step-title=\"Warm milk\" step-subtitle=\"Optional\" step-type=\"completed\"></ic-step>\n    <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n  </ic-stepper>\n  <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\n</ic-page-header>\n    `,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPageHeader heading=\"latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" reverseOrder>\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcButton slot=\"actions\" variant=\"primary\">\n    Create coffee\n  </IcButton>\n  <IcButton slot=\"actions\" variant=\"tertiary\">\n    Filter coffee\n  </IcButton>\n  <IcStepper slot=\"stepper\">\n    <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Warm milk\" stepSubtitle=\"Optional\" stepType=\"completed\" />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n  </IcStepper>\n  <IcTextField slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hideLabel />\n</IcPageHeader>\n    `,\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\n  snippets={withActionsInputStepper}\n  style={{ flexDirection: \"column\" }}\n>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcStepper slot=\"stepper\">\n      <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n      <IcStep\n        stepTitle=\"Warm milk\"\n        stepSubtitle=\"Optional\"\n        stepType=\"completed\"\n      />\n      <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n    </IcStepper>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>\n</ComponentPreview>\n\n### With actions, input and tabs\n\nexport const withActionsInputTabs = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-page-header \n  heading=\"Latte recipe\" \n  subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \n  reverse-order=\"true\"\n>\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\n  <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n  <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\"></ic-text-field>\n  <ic-navigation-item \n    slot=\"tabs\" \n    label=\"Method\" \n    href=\"#\" \n    selected=\"true\"\n  >\n  </ic-navigation-item>\n  <ic-navigation-item \n    slot=\"tabs\" \n    label=\"Ingredients\" \n    href=\"#\"\n  >\n  </ic-navigation-item>\n</ic-page-header>\n    `,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPageHeader \n  heading=\"Latte recipe\" \n  subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \n  reverseOrder>\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcButton slot=\"actions\" variant=\"primary\">\n    Create coffee\n  </IcButton>\n  <IcButton slot=\"actions\" variant=\"tertiary\">\n    Filter coffee\n  </IcButton>\n  <IcTextField \n    slot=\"input\" \n    placeholder=\"Search for ingredients…\"\n    label=\"Input\" \n    hideLabel \n  />\n  <IcNavigationItem \n    slot=\"tabs\" \n    label=\"Method\" \n    href=\"#\" \n    selected \n  />\n  <IcNavigationItem \n    slot=\"tabs\" \n    label=\"Ingredients\" \n    href=\"#\" \n  />\n</IcPageHeader>\n    `,\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\n  snippets={withActionsInputTabs}\n  style={{ flexDirection: \"column\" }}\n>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcButton slot=\"actions\" variant=\"primary\">\n      Create coffee\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">\n      Filter coffee\n    </IcButton>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n    <IcNavigationItem slot=\"tabs\" label=\"Method\" href=\"#\" selected />\n    <IcNavigationItem slot=\"tabs\" label=\"Ingredients\" href=\"#\" />\n  </IcPageHeader>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<MemoryRouter initialEntries={[\"/\"]}>\n  <IcPageHeader\n    heading=\"Latte recipe\"\n    subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n    reverseOrder\n  >\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"/>\n    <IcButton slot=\"actions\" variant=\"primary\"\n      >Create coffee\n      <SlottedSVG \n        slot=\"icon\" \n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcButton>\n    <IcButton slot=\"actions\" variant=\"tertiary\">Filter coffee</IcButton>\n    <IcNavigationItem slot=\"tabs\" selected>\n      <NavLink slot=\"navigation-item\" to=\"/\">Method</NavLink>\n    </IcNavigationItem>        \n    <IcNavigationItem slot=\"tabs\">\n      <NavLink slot=\"navigation-item\" to=\"/favourites\">Ingredients</NavLink>\n    </IcNavigationItem>\n    <IcTextField \n      slot=\"input\" \n      placeholder=\"Search for ingredients…\"\n      label=\"Input\" \n      hideLabel \n      style={{'@media (maxWidth: 576px)':{width: \"280px\"}}}\n    />\n  </IcPageHeader>\n  <IcSectionContainer>\n      <Routes>\n        <Route path=\"/\" element={() => <IcTypography>This page is about our Latte making methods</IcTypography>}/>\n        <Route path=\"/favourites\" element={() => <IcTypography>This page is about the ingredients used in our Latte</IcTypography>}/>\n      </Routes>\n  </IcSectionContainer>\n</MemoryRouter>\n    `,\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\n  snippets={withReactRouter}\n  style={{ flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcPageHeader\n      heading=\"Latte recipe\"\n      subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n      reverseOrder\n    >\n      <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n      <IcButton slot=\"actions\" variant=\"primary\">\n        Create coffee\n        <SlottedSVG\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n            fill=\"currentColor\"\n          />\n        </SlottedSVG>\n      </IcButton>\n      <IcButton slot=\"actions\" variant=\"tertiary\">\n        Filter coffee\n      </IcButton>\n      <IcNavigationItem slot=\"tabs\" selected>\n        <NavLink slot=\"navigation-item\" to=\"/\">\n          Method\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"tabs\">\n        <NavLink slot=\"navigation-item\" to=\"/favourites\">\n          Ingredients\n        </NavLink>\n      </IcNavigationItem>\n      <IcTextField\n        slot=\"input\"\n        placeholder=\"Search for ingredients…\"\n        label=\"Input\"\n        hideLabel\n        style={{ \"@media (maxWidth: 576px)\": { width: \"280px\" } }}\n      />\n    </IcPageHeader>\n    <IcSectionContainer />\n  </MemoryRouter>\n</ComponentPreview>\n\n### With Slots\n\nexport const withSlots = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-page-header>\n  <ic-typography variant=\"h1\" slot=\"heading\">Latte recipe</ic-typography>\n  <ic-typography slot=\"subheading\">A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.</ic-typography>\n  <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n  <ic-breadcrumb-group slot=\"breadcrumbs\">\n    <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\n    <ic-breadcrumb page-title=\"Coffees\" href=\"#\"></ic-breadcrumb>\n    <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\n  </ic-breadcrumb-group>\n  <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\n</ic-page-header>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPageHeader>\n  <IcTypography variant=\"h1\" slot=\"heading\">\n    Latte recipe\n  </IcTypography>\n  <IcTypography slot=\"subheading\">\n    A Latte is a popular Italian coffee, made with espresso, steamed milk and\n    a thin layer of foam.\n  </IcTypography>\n  <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n  <IcBreadcrumbGroup slot=\"breadcrumbs\">\n    <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n    <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n    <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n  </IcBreadcrumbGroup>\n  <IcTextField\n    slot=\"input\"\n    placeholder=\"Search for ingredients…\"\n    label=\"Input\"\n    hideLabel\n  />\n</IcPageHeader>`,\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={withSlots} style={{ flexDirection: \"column\" }}>\n  <IcPageHeader>\n    <IcTypography variant=\"h1\" slot=\"heading\">\n      Latte recipe\n    </IcTypography>\n    <IcTypography slot=\"subheading\">\n      A Latte is a popular Italian coffee, made with espresso, steamed milk and\n      a thin layer of foam.\n    </IcTypography>\n    <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n    <IcBreadcrumbGroup slot=\"breadcrumbs\">\n      <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n      <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n      <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n    </IcBreadcrumbGroup>\n    <IcTextField\n      slot=\"input\"\n      placeholder=\"Search for ingredients…\"\n      label=\"Input\"\n      hideLabel\n    />\n  </IcPageHeader>\n</ComponentPreview>\n",
       "path": "/components/page-header/code",
       "date": "2023-10-25",
       "title": "Page header",
@@ -2366,10 +2366,10 @@
       ],
       "meta": {
         "relativePath": "components/page-header/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.536Z",
-        "lastModified": "2024-04-08T22:24:28.536Z",
-        "size": 16912,
-        "formattedSize": "16.5 KB"
+        "createdAt": "2024-04-08T22:26:50.772Z",
+        "lastModified": "2024-04-08T22:26:50.772Z",
+        "size": 18806,
+        "formattedSize": "18.4 KB"
       }
     },
     {
@@ -2437,7 +2437,7 @@
     },
     {
       "id": "components__pagination__codex",
-      "contents": "\nimport { IcPagination } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination pages=\"15\"></ic-pagination>\n<ic-pagination pages=\"15\" type=\"complex\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination pages={15} />\n<IcPagination pages={15} type=\"complex\" />`,\n  },\n];\n\n<ComponentPreview\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={snippets}\n>\n  <div style={{ width: \"fit-content\", margin: \"auto\" }}>\n    <IcPagination pages={15} />\n  </div>\n  <IcPagination pages={15} type=\"complex\" />\n</ComponentPreview>\n\n## Pagination details\n\n<ComponentDetails component=\"ic-pagination\" />\n\n## Variants\n\n### Hide first and last page buttons\n\nexport const hideFirstLast = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination hide-first-and-last-page-button=\"true\" pages=\"15\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination hideFirstAndLastPageButton pages={15} />`,\n  },\n];\n\n<ComponentPreview\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={hideFirstLast}\n>\n  <IcPagination hideFirstAndLastPageButton pages={15} />\n</ComponentPreview>\n\n### Hide current page (only in 'simple' type)\n\nexport const hideCurrent = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination hide-current-page=\"true\" pages=\"15\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination hideCurrentPage pages={15} />`,\n  },\n];\n\n<ComponentPreview\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={hideCurrent}\n>\n  <IcPagination hideCurrentPage pages={15} />\n</ComponentPreview>\n\n### Appearance\n\nexport const appearance = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination appearance=\"dark\" pages=\"15\"></ic-pagination>\n<ic-pagination appearance=\"light\" pages=\"15\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination appearance=\"dark\" pages={15} />\n<IcPagination appearance=\"light\" pages={15} />`,\n  },\n];\n\n<ComponentPreview\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={appearance}\n>\n  <IcPagination appearance=\"dark\" pages={15} />\n  <div style={{ backgroundColor: \"#000\", marginBottom: \"0.75rem\" }}>\n    <IcPagination appearance=\"light\" pages={15} />\n  </div>\n</ComponentPreview>\n\n### Boundary and Adjacent items set\n\nexport const boundaryAdjacent = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination type=\"complex\" adjacent-count=\"2\" boundary-count=\"2\" pages=\"15\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination type=\"complex\" adjacentCount={2} boundaryCount={2} pages={15} />`,\n  },\n];\n\n<ComponentPreview\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={boundaryAdjacent}\n>\n  <IcPagination type=\"complex\" adjacentCount={2} boundaryCount={2} pages={15} />\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination type=\"complex\" disabled=\"true\" pages=\"12\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination type=\"complex\" disabled pages={12} />`,\n  },\n];\n\n<ComponentPreview\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={disabled}\n>\n  <IcPagination type=\"complex\" disabled pages={12} />\n</ComponentPreview>\n\n### Label\n\nexport const label = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination label=\"Slide\" pages=\"12\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination label=\"Slide\" pages={12} />`,\n  },\n];\n\n<ComponentPreview style={{ display: \"block\", margin: \"auto\" }} snippets={label}>\n  <IcPagination label=\"Slide\" pages={12} />\n</ComponentPreview>\n\n### Default page\n\nexport const defaultPage = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-pagination pages=\"12\" default-page=\"4\"></ic-pagination>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcPagination pages={12} defaultPage={4}/>`,\n  },\n];\n\n<ComponentPreview\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={defaultPage}\n>\n  <IcPagination pages={12} defaultPage={4} />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcPagination } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination pages=\"15\"></ic-pagination>\n<ic-pagination pages=\"15\" type=\"complex\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination pages={15} />\n<IcPagination pages={15} type=\"complex\" />`,\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\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={snippets}\n>\n  <div style={{ width: \"fit-content\", margin: \"auto\" }}>\n    <IcPagination pages={15} />\n  </div>\n  <IcPagination pages={15} type=\"complex\" />\n</ComponentPreview>\n\n## Pagination details\n\n<ComponentDetails component=\"ic-pagination\" />\n\n## Variants\n\n### Hide first and last page buttons\n\nexport const hideFirstLast = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination hide-first-and-last-page-button=\"true\" pages=\"15\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination hideFirstAndLastPageButton pages={15} />`,\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\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={hideFirstLast}\n>\n  <IcPagination hideFirstAndLastPageButton pages={15} />\n</ComponentPreview>\n\n### Hide current page (only in 'simple' type)\n\nexport const hideCurrent = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination hide-current-page=\"true\" pages=\"15\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination hideCurrentPage pages={15} />`,\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\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={hideCurrent}\n>\n  <IcPagination hideCurrentPage pages={15} />\n</ComponentPreview>\n\n### Appearance\n\nexport const appearance = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination appearance=\"dark\" pages=\"15\"></ic-pagination>\n<ic-pagination appearance=\"light\" pages=\"15\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination appearance=\"dark\" pages={15} />\n<IcPagination appearance=\"light\" pages={15} />`,\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\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={appearance}\n>\n  <IcPagination appearance=\"dark\" pages={15} />\n  <div style={{ backgroundColor: \"#000\", marginBottom: \"0.75rem\" }}>\n    <IcPagination appearance=\"light\" pages={15} />\n  </div>\n</ComponentPreview>\n\n### Boundary and Adjacent items set\n\nexport const boundaryAdjacent = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination type=\"complex\" adjacent-count=\"2\" boundary-count=\"2\" pages=\"15\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination type=\"complex\" adjacentCount={2} boundaryCount={2} pages={15} />`,\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\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={boundaryAdjacent}\n>\n  <IcPagination type=\"complex\" adjacentCount={2} boundaryCount={2} pages={15} />\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination type=\"complex\" disabled=\"true\" pages=\"12\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination type=\"complex\" disabled pages={12} />`,\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\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={disabled}\n>\n  <IcPagination type=\"complex\" disabled pages={12} />\n</ComponentPreview>\n\n### Label\n\nexport const label = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination label=\"Slide\" pages=\"12\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination label=\"Slide\" pages={12} />`,\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={{ display: \"block\", margin: \"auto\" }} snippets={label}>\n  <IcPagination label=\"Slide\" pages={12} />\n</ComponentPreview>\n\n### Default page\n\nexport const defaultPage = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-pagination pages=\"12\" default-page=\"4\"></ic-pagination>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcPagination pages={12} defaultPage={4}/>`,\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\n  style={{ display: \"block\", margin: \"auto\" }}\n  snippets={defaultPage}\n>\n  <IcPagination pages={12} defaultPage={4} />\n</ComponentPreview>\n",
       "path": "/components/pagination/code",
       "date": "2023-05-05",
       "title": "Pagination",
@@ -2460,10 +2460,10 @@
       ],
       "meta": {
         "relativePath": "components/pagination/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.536Z",
-        "lastModified": "2024-04-08T22:24:28.536Z",
-        "size": 4638,
-        "formattedSize": "4.5 KB"
+        "createdAt": "2024-04-08T22:26:50.776Z",
+        "lastModified": "2024-04-08T22:26:50.776Z",
+        "size": 6862,
+        "formattedSize": "6.7 KB"
       }
     },
     {
@@ -2531,7 +2531,7 @@
     },
     {
       "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    language: \"Web component\",\n    snippet: `<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<script>\n  var icPopover = document.querySelector(\"#popover-menu\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>\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  },\n  {\n    language: \"React\",\n    snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    <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  </>\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    language: \"Web component\",\n    snippet: `<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<script>\n  var icPopover = document.querySelector(\"#popover-menu-2\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>\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=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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  },\n  {\n    language: \"React\",\n    snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    <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=\"24px\"\n              viewBox=\"0 0 24 24\"\n              width=\"24px\"\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  </>\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=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\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    language: \"Web component\",\n    snippet: `<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<script>\n  var icPopover = document.querySelector(\"#popover-menu-3\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>\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  },\n  {\n    language: \"React\",\n    snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    <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  </>\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 { 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<script>\n  var icPopover = document.querySelector(\"#popover-menu\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>\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    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    <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  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\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<script>\n  var icPopover = document.querySelector(\"#popover-menu-2\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>\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=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    <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=\"24px\"\n              viewBox=\"0 0 24 24\"\n              width=\"24px\"\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  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\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=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\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<script>\n  var icPopover = document.querySelector(\"#popover-menu-3\");\n  function handleClick() {\n    icPopover.open = !icPopover.open;\n  }\n</script>\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    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const popoverEl = useRef(null);\nconst handleClick = () => {\n  popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n  <>\n    <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  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\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",
       "path": "/components/popover-menu/code",
       "date": "2023-07-31",
       "title": "Popover menu",
@@ -2554,10 +2554,10 @@
       ],
       "meta": {
         "relativePath": "components/popover-menu/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.540Z",
-        "lastModified": "2024-04-08T22:24:28.540Z",
-        "size": 13771,
-        "formattedSize": "13.4 KB"
+        "createdAt": "2024-04-08T22:26:50.776Z",
+        "lastModified": "2024-04-08T22:26:50.776Z",
+        "size": 14605,
+        "formattedSize": "14.3 KB"
       }
     },
     {
@@ -2625,7 +2625,7 @@
     },
     {
       "id": "components__radio__codex",
-      "contents": "\nimport { IcRadioGroup, IcRadioOption, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-radio-group name='radio-group-1' label=\"Add a free purchase with any hot drink\">\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    inactive=\"true\" \n  >\n  </ic-radio-option>\n  <ic-radio-option value=\"fruit\" label=\"Banana\"></ic-radio-option>\n  <ic-radio-option value=\"No item\" label=\"No thanks, just my coffee\"></ic-radio-option>\n</ic-radio-group>\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    language: \"React\",\n    snippet: `<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    inactive\n  />\n  <IcRadioOption value=\"fruit\" label=\"Banana\" />\n  <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n</IcRadioGroup>`,\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"24px\" }} 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      inactive\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    language: \"Web component\",\n    snippet: `<ic-radio-group name='radio-group-2' label=\"Do you have any special requests?\">\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 value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<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  },\n];\n\n<ComponentPreview style={{ marginTop: \"24px\" }} 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    language: \"Web component\",\n    snippet: `<ic-radio-group name='radio-group-3' label=\"Do you have any special requests?\">\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 value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcRadioGroup name='radio-group-3' 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  },\n];\n\n<ComponentPreview snippets={conditionalDynamic}>\n  <div style={{ width: \"300px\" }}>\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    language: \"Web component\",\n    snippet: `<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 value=\"request\" label=\"Yes, I want to modify my order\"></ic-radio-option>\n  <ic-radio-option value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<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  },\n];\n\n<ComponentPreview style={{ marginTop: \"24px\" }} 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    language: \"Web component\",\n    snippet: `<ic-radio-group \n  label=\"Do you have any special requests?\" \n  name='radio-group-5'\n  size=\"small\"\n>\n  <ic-radio-option value=\"request\" label=\"Yes, I want to modify my order\"></ic-radio-option>\n  <ic-radio-option value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<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  },\n];\n\n<ComponentPreview style={{ marginTop: \"24px\" }} 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    language: \"Web component\",\n    snippet: `<ic-radio-group name='radio-group-6' label=\"Do you have any special requests?\" validation-status=\"error\" validation-text=\"An answer to this question is required\" required=\"true\">\n  <ic-radio-option value=\"request\" label=\"Yes, I want to modify my order\"></ic-radio-option>\n  <ic-radio-option value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcRadioGroup name='radio-group-6' label=\"Do you have any special requests?\" validationStatus=\"error\" validationText=\"An answer to this question is required\" required>\n  <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n  <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n  },\n];\n\n<ComponentPreview style={{ marginTop: \"24px\" }} 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 name='radio-group-1' label=\"Add a free purchase with any hot drink\">\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    inactive=\"true\" \n  >\n  </ic-radio-option>\n  <ic-radio-option value=\"fruit\" label=\"Banana\"></ic-radio-option>\n  <ic-radio-option value=\"No item\" label=\"No thanks, just my coffee\"></ic-radio-option>\n</ic-radio-group>\n<script>\n  const radioGroup = document.querySelector(\"[name='radio-group-1']\");\n  radioGroup.addEventListener('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n      long: `{shortCode}`,\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    inactive\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: \"24px\" }} 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      inactive\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 name='radio-group-2' label=\"Do you have any special requests?\">\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 value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<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      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: \"24px\" }} 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 name='radio-group-3' label=\"Do you have any special requests?\">\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 value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup name='radio-group-3' 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      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: \"300px\" }}>\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 value=\"request\" label=\"Yes, I want to modify my order\"></ic-radio-option>\n  <ic-radio-option value=\"none\" label=\"No, standard please\"></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: \"24px\" }} 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 value=\"request\" label=\"Yes, I want to modify my order\"></ic-radio-option>\n  <ic-radio-option value=\"none\" label=\"No, standard please\"></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: \"24px\" }} 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 name='radio-group-6' label=\"Do you have any special requests?\" validation-status=\"error\" validation-text=\"An answer to this question is required\" required=\"true\">\n  <ic-radio-option value=\"request\" label=\"Yes, I want to modify my order\"></ic-radio-option>\n  <ic-radio-option value=\"none\" label=\"No, standard please\"></ic-radio-option>\n</ic-radio-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcRadioGroup name='radio-group-6' label=\"Do you have any special requests?\" validationStatus=\"error\" validationText=\"An answer to this question is required\" required>\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: \"24px\" }} 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-01-18",
       "title": "Radio button",
@@ -2648,10 +2648,10 @@
       ],
       "meta": {
         "relativePath": "components/radio/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.540Z",
-        "lastModified": "2024-04-08T22:24:28.540Z",
-        "size": 9346,
-        "formattedSize": "9.1 KB"
+        "createdAt": "2024-04-08T22:26:50.776Z",
+        "lastModified": "2024-04-08T22:26:50.776Z",
+        "size": 11014,
+        "formattedSize": "10.8 KB"
       }
     },
     {
@@ -2719,7 +2719,7 @@
     },
     {
       "id": "components__search-bar__codex",
-      "contents": "\nimport { IcSearchBar, IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-search-bar label=\"What is your favourite coffee?\"></ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  searchBar.addEventListener('icChange', (ev) => console.log(ev.detail.value));\n  searchBar.addEventListener('icSubmitSearch', (ev) => console.log(ev.detail.value))\n  placeholder=\"Start typing to search…\"\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSearchBar \n  label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(ev) => console.log(ev.detail.value)}\n  onIcSubmitSearch={(ev) => console.log(ev.detail.value)}\n  placeholder=\"Start typing to search…\"\n/>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcSearchBar\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\n    onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\n    placeholder=\"Start typing to search…\"\n  />\n</ComponentPreview>\n\n## Search bar details\n\n<ComponentDetails component=\"ic-search-bar\" />\n\n## Variants\n\n### With options (no filtering)\n\nexport const optionsNoFiltering = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-search-bar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  disable-filter=\"true\"\n>\n</ic-search-bar>\n<br>\n<ic-typography>\n  All options will be displayed as you type\n</ic-typography>\n<script>\n  document.querySelector(\"ic-search-bar\").options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSearchBar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  disableFilter\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>\n<br/>\n<IcTypography>All options will be displayed as you type</IcTypography>`,\n  },\n];\n\n<ComponentPreview\n  snippets={optionsNoFiltering}\n  style={{ flexDirection: \"column\", alignItems: \"center\" }}\n>\n  <IcSearchBar\n    placeholder=\"Start typing to search…\"\n    label=\"What is your favourite coffee?\"\n    disableFilter\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n  <br />\n  <IcTypography variant=\"p\">\n    All options will be displayed as you type\n  </IcTypography>\n</ComponentPreview>\n\n### With helper text\n\nexport const withHelperText = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-search-bar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  helper-text=\"Coffee options will be displayed as you type.\"\n>\n</ic-search-bar>\n<script>\n  document.querySelector(\"ic-search-bar\").options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSearchBar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  helperText=\"Coffee options will be displayed as you type.\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={withHelperText}>\n  <IcSearchBar\n    placeholder=\"Start typing to search…\"\n    label=\"What is your favourite coffee?\"\n    helperText=\"Coffee options will be displayed as you type.\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n### With hidden label\n\nexport const withHiddenLabel = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-search-bar placeholder=\"Start typing to search…\" label=\"What is your favourite coffee?\" hide-label=\"true\"\n>\n</ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSearchBar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  hideLabel\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={withHiddenLabel}>\n  <IcSearchBar\n    placeholder=\"Start typing to search…\"\n    label=\"What is your favourite coffee?\"\n    hideLabel\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-search-bar label=\"What is your favourite coffee?\" disabled=\"true\"\n>\n</ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSearchBar\n  label=\"What is your favourite coffee?\"\n  disabled\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={disabled}>\n  <IcSearchBar\n    label=\"What is your favourite coffee?\"\n    disabled\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n### Size small\n\nexport const sizeSmall = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-search-bar label=\"What is your favourite coffee?\" size=\"small\"\n>\n</ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSearchBar\n  label=\"What is your favourite coffee?\"\n  size=\"small\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={sizeSmall}>\n  <IcSearchBar\n    label=\"What is your favourite coffee?\"\n    size=\"small\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n## Custom filtering example\n\nThis example shows how to filter data asynchronously when the value in the input field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-search-bar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\" \n  debounce=\"300\" \n  disable-filter=\"true\">\n</ic-search-bar>\n<script>\n  var mockData = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappucino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  var select = document.querySelector(\"ic-search-bar\");\n  select.addEventListener(\"icChange\", function (event) {\n    const searchFor = event.detail.value;\n    if (searchFor.length > 1) {\n      mockAPI = (query) => {\n        filteredResults = mockData.filter((item) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        );\n        return new Promise((resolve) => {\n          setTimeout(() => resolve(filteredResults), 1000)\n        });\n      };\n      mockAPI(searchFor).then((newResults) => { select.options = newResults });\n    } else {\n      select.options = [];\n    }\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const mockData = [\n  { label: \"Espresso\", value: \"espresso\" },\n  { label: \"Double Espresso\", value: \"doubleespresso\" },\n  { label: \"Flat White\", value: \"flatwhite\" },\n  { label: \"Cappuccino\", value: \"cappucino\" },\n  { label: \"Americano\", value: \"americano\" },\n  { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState([]);\nconst changeHandler = (event) =>{\n  const searchFor = event.detail.value;\n  if (searchFor.length > 1) {\n    const mockAPI = (query) => {\n      const filteredResults = mockData.filter((item) =>\n        item.label.toLowerCase().includes(query.toLowerCase())\n      );\n      return new Promise((resolve) => {\n        setTimeout(() => resolve(filteredResults), 1000);\n      });\n    };\n    mockAPI(searchFor).then((newResults) => setResults(newResults));\n  } else {\n    setResults([]);\n  }\n}\nreturn(\n<>\n  <IcSearchBar placeholder=\"Start typing to search…\" label=\"What is your favourite coffee?\"\n    debounce=\"300\"\n    disableFilter\n    options={results}\n    onIcChange={changeHandler}\n  />\n</>\n);`,\n  },\n];\n\nexport const CustomFilterExample = () => {\n  const mockData = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappucino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  const [results, setResults] = React.useState([]);\n  const changeHandler = (event) => {\n    const searchFor = event.detail.value;\n    if (searchFor.length > 1) {\n      const mockAPI = (query) => {\n        const filteredResults = mockData.filter((item) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        );\n        return new Promise((resolve) => {\n          setTimeout(() => resolve(filteredResults), 1000);\n        });\n      };\n      mockAPI(searchFor).then((newResults) => setResults(newResults));\n    } else {\n      setResults([]);\n    }\n  };\n  return (\n    <IcSearchBar\n      placeholder=\"Start typing to search…\"\n      label=\"What is your favourite coffee?\"\n      debounce=\"300\"\n      disableFilter\n      options={results}\n      onIcChange={changeHandler}\n    />\n  );\n};\n\n<ComponentPreview snippets={customFiltering}>\n  <CustomFilterExample />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcSearchBar, IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-search-bar label=\"What is your favourite coffee?\"></ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  searchBar.addEventListener('icChange', (ev) => console.log(ev.detail.value));\n  searchBar.addEventListener('icSubmitSearch', (ev) => console.log(ev.detail.value))\n  placeholder=\"Start typing to search…\"\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSearchBar \n  label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(ev) => console.log(ev.detail.value)}\n  onIcSubmitSearch={(ev) => console.log(ev.detail.value)}\n  placeholder=\"Start typing to search…\"\n/>`,\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={snippets}>\n  <IcSearchBar\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\n    onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\n    placeholder=\"Start typing to search…\"\n  />\n</ComponentPreview>\n\n## Search bar details\n\n<ComponentDetails component=\"ic-search-bar\" />\n\n## Variants\n\n### With options (no filtering)\n\nexport const optionsNoFiltering = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-search-bar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  disable-filter=\"true\"\n>\n</ic-search-bar>\n<br>\n<ic-typography>\n  All options will be displayed as you type\n</ic-typography>\n<script>\n  document.querySelector(\"ic-search-bar\").options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSearchBar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  disableFilter\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>\n<br/>\n<IcTypography>All options will be displayed as you type</IcTypography>`,\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\n  snippets={optionsNoFiltering}\n  style={{ flexDirection: \"column\", alignItems: \"center\" }}\n>\n  <IcSearchBar\n    placeholder=\"Start typing to search…\"\n    label=\"What is your favourite coffee?\"\n    disableFilter\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n  <br />\n  <IcTypography variant=\"p\">\n    All options will be displayed as you type\n  </IcTypography>\n</ComponentPreview>\n\n### With helper text\n\nexport const withHelperText = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-search-bar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  helper-text=\"Coffee options will be displayed as you type.\"\n>\n</ic-search-bar>\n<script>\n  document.querySelector(\"ic-search-bar\").options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSearchBar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  helperText=\"Coffee options will be displayed as you type.\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\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={withHelperText}>\n  <IcSearchBar\n    placeholder=\"Start typing to search…\"\n    label=\"What is your favourite coffee?\"\n    helperText=\"Coffee options will be displayed as you type.\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n### With hidden label\n\nexport const withHiddenLabel = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-search-bar placeholder=\"Start typing to search…\" label=\"What is your favourite coffee?\" hide-label=\"true\"\n>\n</ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSearchBar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\"\n  hideLabel\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\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={withHiddenLabel}>\n  <IcSearchBar\n    placeholder=\"Start typing to search…\"\n    label=\"What is your favourite coffee?\"\n    hideLabel\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-search-bar label=\"What is your favourite coffee?\" disabled=\"true\"\n>\n</ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSearchBar\n  label=\"What is your favourite coffee?\"\n  disabled\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\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={disabled}>\n  <IcSearchBar\n    label=\"What is your favourite coffee?\"\n    disabled\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n### Size small\n\nexport const sizeSmall = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-search-bar label=\"What is your favourite coffee?\" size=\"small\"\n>\n</ic-search-bar>\n<script>\n  const searchBar = document.querySelector(\"ic-search-bar\");\n  searchBar.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSearchBar\n  label=\"What is your favourite coffee?\"\n  size=\"small\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n/>`,\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={sizeSmall}>\n  <IcSearchBar\n    label=\"What is your favourite coffee?\"\n    size=\"small\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n  />\n</ComponentPreview>\n\n## Custom filtering example\n\nThis example shows how to filter data asynchronously when the value in the input field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-search-bar placeholder=\"Start typing to search…\"\n  label=\"What is your favourite coffee?\" \n  debounce=\"300\" \n  disable-filter=\"true\">\n</ic-search-bar>\n<script>\n  var mockData = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappucino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  var select = document.querySelector(\"ic-search-bar\");\n  select.addEventListener(\"icChange\", function (event) {\n    const searchFor = event.detail.value;\n    if (searchFor.length > 1) {\n      mockAPI = (query) => {\n        filteredResults = mockData.filter((item) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        );\n        return new Promise((resolve) => {\n          setTimeout(() => resolve(filteredResults), 1000)\n        });\n      };\n      mockAPI(searchFor).then((newResults) => { select.options = newResults });\n    } else {\n      select.options = [];\n    }\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const mockData = [\n  { label: \"Espresso\", value: \"espresso\" },\n  { label: \"Double Espresso\", value: \"doubleespresso\" },\n  { label: \"Flat White\", value: \"flatwhite\" },\n  { label: \"Cappuccino\", value: \"cappucino\" },\n  { label: \"Americano\", value: \"americano\" },\n  { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState([]);\nconst changeHandler = (event) =>{\n  const searchFor = event.detail.value;\n  if (searchFor.length > 1) {\n    const mockAPI = (query) => {\n      const filteredResults = mockData.filter((item) =>\n        item.label.toLowerCase().includes(query.toLowerCase())\n      );\n      return new Promise((resolve) => {\n        setTimeout(() => resolve(filteredResults), 1000);\n      });\n    };\n    mockAPI(searchFor).then((newResults) => setResults(newResults));\n  } else {\n    setResults([]);\n  }\n}\nreturn(\n<>\n  <IcSearchBar placeholder=\"Start typing to search…\" label=\"What is your favourite coffee?\"\n    debounce=\"300\"\n    disableFilter\n    options={results}\n    onIcChange={changeHandler}\n  />\n</>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const CustomFilterExample = () => {\n  const mockData = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappucino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  const [results, setResults] = React.useState([]);\n  const changeHandler = (event) => {\n    const searchFor = event.detail.value;\n    if (searchFor.length > 1) {\n      const mockAPI = (query) => {\n        const filteredResults = mockData.filter((item) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        );\n        return new Promise((resolve) => {\n          setTimeout(() => resolve(filteredResults), 1000);\n        });\n      };\n      mockAPI(searchFor).then((newResults) => setResults(newResults));\n    } else {\n      setResults([]);\n    }\n  };\n  return (\n    <IcSearchBar\n      placeholder=\"Start typing to search…\"\n      label=\"What is your favourite coffee?\"\n      debounce=\"300\"\n      disableFilter\n      options={results}\n      onIcChange={changeHandler}\n    />\n  );\n};\n\n<ComponentPreview snippets={customFiltering}>\n  <CustomFilterExample />\n</ComponentPreview>\n",
       "path": "/components/search-bar/code",
       "date": "2024-02-02",
       "title": "Search bar",
@@ -2742,10 +2742,10 @@
       ],
       "meta": {
         "relativePath": "components/search-bar/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.540Z",
-        "lastModified": "2024-04-08T22:24:28.540Z",
-        "size": 14707,
-        "formattedSize": "14.4 KB"
+        "createdAt": "2024-04-08T22:26:50.776Z",
+        "lastModified": "2024-04-08T22:26:50.776Z",
+        "size": 16653,
+        "formattedSize": "16.3 KB"
       }
     },
     {
@@ -2813,7 +2813,7 @@
     },
     {
       "id": "components__section-container__codex",
-      "contents": "\nimport { IcChip, IcSectionContainer } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-section-container style=\"border:1px solid black\">\n    <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n    </div>\n</ic-section-container>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSectionContainer style={{ border: \"1px solid black\" }}>\n    <div style={{ display: \"flex\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n    </div>\n</IcSectionContainer>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault} style={{ display: \"contents\" }}>\n  <IcSectionContainer style={{ border: \"1px solid black\" }}>\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n\n## Section container details\n\n<ComponentDetails component=\"ic-section-container\" />\n\n## Variants\n\n### Center align\n\nexport const snippetsCenter = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-section-container\n  aligned=\"center\"\n  style=\"border:1px solid black\"\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n    </div>\n</ic-section-container>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSectionContainer\n  aligned=\"center\"\n  style={{ border: \"1px solid black\" }}\n>\n  <div style={{ display: \"flex\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n  </div>\n</IcSectionContainer>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsCenter}>\n  <IcSectionContainer aligned=\"center\" style={{ border: \"1px solid black\" }}>\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n\n### Full-width align\n\nexport const snippetsFullWidth = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-section-container\n  aligned=\"full-width\"\n  style=\"border:1px solid black\"\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n  </div>\n</ic-section-container>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSectionContainer \n  aligned=\"full-width\"\n  style={{ border: \"1px solid black\" }}\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n  </div>\n</IcSectionContainer>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsFullWidth} style={{ display: \"block\" }}>\n  <IcSectionContainer\n    style={{ border: \"1px solid black\" }}\n    aligned=\"full-width\"\n  >\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n\n### Full height\n\nexport const snippetsFullHeight = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-section-container\n  aligned=\"center\"\n  full-height=\"true\"\n  style=\"border:1px solid black\"\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n  </div>\n</ic-section-container>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSectionContainer \n  aligned=\"center\"\n  fullHeight\n  style={{ border: \"1px solid black\" }}\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n  </div>\n</IcSectionContainer>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsFullHeight}>\n  <IcSectionContainer\n    aligned=\"center\"\n    fullHeight\n    style={{ border: \"1px solid black\" }}\n  >\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcChip, IcSectionContainer } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-section-container style=\"border:1px solid black\">\n    <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n    </div>\n</ic-section-container>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSectionContainer style={{ border: \"1px solid black\" }}>\n    <div style={{ display: \"flex\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n    </div>\n</IcSectionContainer>`,\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={snippetsDefault} style={{ display: \"contents\" }}>\n  <IcSectionContainer style={{ border: \"1px solid black\" }}>\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n\n## Section container details\n\n<ComponentDetails component=\"ic-section-container\" />\n\n## Variants\n\n### Center align\n\nexport const snippetsCenter = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-section-container\n  aligned=\"center\"\n  style=\"border:1px solid black\"\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n    </div>\n</ic-section-container>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSectionContainer\n  aligned=\"center\"\n  style={{ border: \"1px solid black\" }}\n>\n  <div style={{ display: \"flex\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n  </div>\n</IcSectionContainer>`,\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={snippetsCenter}>\n  <IcSectionContainer aligned=\"center\" style={{ border: \"1px solid black\" }}>\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n\n### Full-width align\n\nexport const snippetsFullWidth = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-section-container\n  aligned=\"full-width\"\n  style=\"border:1px solid black\"\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n  </div>\n</ic-section-container>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSectionContainer \n  aligned=\"full-width\"\n  style={{ border: \"1px solid black\" }}\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n  </div>\n</IcSectionContainer>`,\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={snippetsFullWidth} style={{ display: \"block\" }}>\n  <IcSectionContainer\n    style={{ border: \"1px solid black\" }}\n    aligned=\"full-width\"\n  >\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n\n### Full height\n\nexport const snippetsFullHeight = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-section-container\n  aligned=\"center\"\n  full-height=\"true\"\n  style=\"border:1px solid black\"\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <ic-chip label=\"Americano\"/>\n      <ic-chip label=\"Cappuccino\"/>\n      <ic-chip label=\"Latte\"/>\n  </div>\n</ic-section-container>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSectionContainer \n  aligned=\"center\"\n  fullHeight\n  style={{ border: \"1px solid black\" }}\n>\n  <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px\", gap: \"8px\" }}>\n      <IcChip label=\"Americano\"/>\n      <IcChip label=\"Cappuccino\"/>\n      <IcChip label=\"Latte\"/>\n  </div>\n</IcSectionContainer>`,\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={snippetsFullHeight}>\n  <IcSectionContainer\n    aligned=\"center\"\n    fullHeight\n    style={{ border: \"1px solid black\" }}\n  >\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        padding: \"8px\",\n        gap: \"8px\",\n      }}\n    >\n      <IcChip label=\"Americano\" />\n      <IcChip label=\"Cappuccino\" />\n      <IcChip label=\"Latte\" />\n    </div>\n  </IcSectionContainer>\n</ComponentPreview>\n",
       "path": "/components/section-container/code",
       "date": "2024-02-02",
       "title": "Section container",
@@ -2836,10 +2836,10 @@
       ],
       "meta": {
         "relativePath": "components/section-container/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.544Z",
-        "lastModified": "2024-04-08T22:24:28.544Z",
-        "size": 5598,
-        "formattedSize": "5.5 KB"
+        "createdAt": "2024-04-08T22:26:50.780Z",
+        "lastModified": "2024-04-08T22:26:50.780Z",
+        "size": 6710,
+        "formattedSize": "6.6 KB"
       }
     },
     {
@@ -2907,7 +2907,7 @@
     },
     {
       "id": "components__select__codex",
-      "contents": "\nimport { IcSelect } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option...\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option...\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExample = () => (\n  <IcSelect\n    placeholder=\"Select an option...\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippets}>\n  <SelectExample />\n</ComponentPreview>\n\n## Select details\n\n<ComponentDetails component=\"ic-select\" />\n\n## Variants\n\n### With clear button, descriptions, helper text and custom placeholder\n\nexport const snippetsWithExtras = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select label=\"What is your favourite coffee?\" placeholder=\"Select an option...\" helper-text=\"Select one option from the list\" show-clear-button=\"true\" searchable=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n  ]}\n  placeholder=\"Select an option…\"\n  helperText=\"Select one option from the list\"\n  showClearButton\n  searchable\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExampleWithExtras = () => (\n  <IcSelect\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Cappuccino\",\n        value: \"cappuccino\",\n        description: \"Coffee frothed up with pressurised steam\",\n      },\n      {\n        label: \"Americano\",\n        value: \"americano\",\n        description: \"Espresso coffee diluted with hot water\",\n      },\n      {\n        label: \"Mocha\",\n        value: \"mocha\",\n        description: \"Coffee with chocolate\",\n      },\n    ]}\n    placeholder=\"Select an option…\"\n    helperText=\"Select one option from the list\"\n    showClearButton\n    searchable\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsWithExtras}>\n  <SelectExampleWithExtras />\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" disabled=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  disabled\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExampleDisabled = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    disabled\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsDisabled}>\n  <SelectExampleDisabled />\n</ComponentPreview>\n\n### Options disabled\n\nexport const snippetsOptionDisabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", disabled: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", disabled: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExampleOptionsDisabled = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\", disabled: true },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsOptionDisabled}>\n  <SelectExampleOptionsDisabled />\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select label=\"What is your favourite coffee?\" size=\"small\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n  size=\"small\"\n/>`,\n  },\n];\n\nexport const SelectExampleSmall = () => (\n  <IcSelect\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n    size=\"small\"\n  />\n);\n\n<ComponentPreview snippets={snippetsSmall}>\n  <SelectExampleSmall />\n</ComponentPreview>\n\n### Hidden label\n\nexport const snippetsHideLabel = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" hide-label=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n  ]}\n  hideLabel\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExampleHideLabel = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n    ]}\n    hideLabel\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsHideLabel}>\n  <SelectExampleHideLabel />\n</ComponentPreview>\n\n### Groups\n\nexport const snippetsGroups = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n            {\n              label: \"Fancy\",\n              children: [\n                { label: \"Cappuccino\", value: \"Cap\" },\n                { label: \"Flat white\", value: \"Flat\" },\n              ],\n            },\n            {\n              label: \"Boring\",\n              children: [\n                { label: \"Filter\", value: \"Fil\" },\n                { label: \"Latte\", value: \"Lat\" },\n              ],\n            },\n          ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    {\n      label: \"Fancy\",\n      children: [\n        { label: \"Cappuccino\", value: \"Cap\" },\n        { label: \"Flat white\", value: \"Flat\" },\n      ],\n    },\n    {\n      label: \"Boring\",\n      children: [\n        { label: \"Filter\", value: \"Fil\" },\n        { label: \"Latte\", value: \"Lat\" },\n      ],\n    },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExampleGroups = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Fancy\",\n        children: [\n          { label: \"Cappuccino\", value: \"Cap\" },\n          { label: \"Flat white\", value: \"Flat\" },\n        ],\n      },\n      {\n        label: \"Boring\",\n        children: [\n          { label: \"Filter\", value: \"Fil\" },\n          { label: \"Latte\", value: \"Lat\" },\n        ],\n      },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsGroups}>\n  <SelectExampleGroups />\n</ComponentPreview>\n\n### Recommended\n\nexport const snippetsRecommended = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", recommended: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", recommended: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExampleRecommended = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      {\n        label: \"Double Espresso\",\n        value: \"doubleespresso\",\n        recommended: true,\n      },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\", recommended: true },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsRecommended}>\n  <SelectExampleRecommended />\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n    validation-status=\"success\" \n    validation-text=\"Coffee available\"\n    value=\"americano\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>\n<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n    validation-status=\"warning\" \n    validation-text=\"Only a few left\"\n    value=\"cappuccino\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>\n<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n    validation-status=\"error\" \n    validation-text=\"Coffee unavailable\"\n    value=\"mocha\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n    value=\"americano\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  validationStatus=\"success\"\n  validationText=\"Coffee available\"\n  onIcChange={(event) => console.log(event.detail.value)}\n/>\n  <IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  value=\"cappuccino\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  validationStatus=\"warning\" \n  validationText=\"Only a few left\"\n  onIcChange={(event) => console.log(event.detail.value)}\n/>\n  <IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  value=\"mocha\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  validationStatus=\"error\" \n  validationText=\"Coffee unavailable\"\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SelectExampleValidation = () => (\n  <div>\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      value=\"americano\"\n      options={[\n        { label: \"Espresso\", value: \"espresso\" },\n        { label: \"Double Espresso\", value: \"doubleespresso\" },\n        { label: \"Flat White\", value: \"flatwhite\" },\n        { label: \"Cappuccino\", value: \"cappuccino\" },\n        { label: \"Americano\", value: \"americano\" },\n        { label: \"Mocha\", value: \"mocha\" },\n      ]}\n      validationStatus=\"success\"\n      validationText=\"Coffee available\"\n      onIcChange={(event) => console.log(event.detail.value)}\n    />\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      value=\"cappuccino\"\n      options={[\n        { label: \"Espresso\", value: \"espresso\" },\n        { label: \"Double Espresso\", value: \"doubleespresso\" },\n        { label: \"Flat White\", value: \"flatwhite\" },\n        { label: \"Cappuccino\", value: \"cappuccino\" },\n        { label: \"Americano\", value: \"americano\" },\n        { label: \"Mocha\", value: \"mocha\" },\n      ]}\n      validationStatus=\"warning\"\n      validationText=\"Only a few left\"\n      onIcChange={(event) => console.log(event.detail.value)}\n    />\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      value=\"mocha\"\n      options={[\n        { label: \"Espresso\", value: \"espresso\" },\n        { label: \"Double Espresso\", value: \"doubleespresso\" },\n        { label: \"Flat White\", value: \"flatwhite\" },\n        { label: \"Cappuccino\", value: \"cappuccino\" },\n        { label: \"Americano\", value: \"americano\" },\n        { label: \"Mocha\", value: \"mocha\" },\n      ]}\n      validationStatus=\"error\"\n      validationText=\"Coffee unavailable\"\n      onIcChange={(event) => console.log(event.detail.value)}\n    />\n  </div>\n);\n\n<ComponentPreview snippets={snippetsValidation}>\n  <SelectExampleValidation />\n</ComponentPreview>\n\n### Searchable\n\nexport const snippetsSearchable = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" searchable=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n    { label: \"Café au lait\", value: \"Caf\" },\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Cortado\", value: \"Cor\" },\n    { label: \"Latte macchiato\", value: \"Lam\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n    { label: \"Café au lait\", value: \"Caf\" },\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Cortado\", value: \"Cor\" },\n    { label: \"Latte macchiato\", value: \"Lam\" },\n  ]}\n  searchable\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SearchableSelectExample = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Cappuccino\", value: \"Cap\" },\n      { label: \"Latte\", value: \"Lat\" },\n      { label: \"Americano\", value: \"Ame\" },\n      { label: \"Flat white\", value: \"Fla\" },\n      { label: \"Mocha\", value: \"Moc\" },\n      { label: \"Macchiato\", value: \"Mac\" },\n      { label: \"Café au lait\", value: \"Caf\" },\n      { label: \"Espresso\", value: \"Esp\" },\n      { label: \"Cortado\", value: \"Cor\" },\n      { label: \"Latte macchiato\", value: \"Lam\" },\n    ]}\n    searchable\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsSearchable}>\n  <SearchableSelectExample />\n</ComponentPreview>\n\n### Searchable - with descriptions included in search\n\nexport const snippetsSearchableWithDescriptions = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\" \n  searchable=\"true\" \n  include-description-in-search=\"true\"\n></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n    { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n    { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n    { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n    { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n    { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n    { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n    { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n    { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n    { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n    { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n    { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n    { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n    { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n    { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n  ]}\n  searchable\n  includeDescriptionsInSearch\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SearchableSelectWithDescriptionsExample = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Cappuccino\",\n        value: \"Cap\",\n        description: \"Coffee frothed up with pressurised steam\",\n      },\n      {\n        label: \"Americano\",\n        value: \"Ame\",\n        description: \"Espresso coffee diluted with hot water\",\n      },\n      { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n      {\n        label: \"Latte\",\n        value: \"Lat\",\n        description: \"Milky coffee with one or two shots of espresso\",\n      },\n      {\n        label: \"Flat white\",\n        value: \"Fla\",\n        description: \"Coffee with frothed milk poured over espresso\",\n      },\n      {\n        label: \"Macchiato\",\n        value: \"Mac\",\n        description: \"Espresso coffee topped with steamed milk\",\n      },\n      {\n        label: \"Café au lait\",\n        value: \"Caf\",\n        description: \"Brewed coffee with steamed milk\",\n      },\n      {\n        label: \"Espresso\",\n        value: \"Esp\",\n        description: \"Concentrated form of coffee\",\n      },\n      { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n      {\n        label: \"Latte macchiato\",\n        value: \"Lam\",\n        description: \"Espresso coffee with milk and a spoonful of foamed milk\",\n      },\n    ]}\n    searchable\n    includeDescriptionsInSearch\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsSearchableWithDescriptions}>\n  <SearchableSelectWithDescriptionsExample />\n</ComponentPreview>\n\n### Searchable - with group titles included in search\n\nexport const snippetsSearchableWithGroups = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\" \n  searchable=\"true\" \n  include-group-titles-in-search=\"true\"\n></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    {\n      label: \"Fancy\",\n      children: [\n        { label: \"Cappuccino\", value: \"Cap\" },\n        { label: \"Flat white\", value: \"Flat\" },\n        { label: \"Mocha\", value: \"Moc\" },\n        { label: \"Macchiato\", value: \"Mac\" },\n        { label: \"Cortado\", value: \"Cor\" },\n        { label: \"Latte macchiato\", value: \"Lam\" },\n      ],\n    },\n    {\n      label: \"Boring\",\n      children: [\n        { label: \"Filter\", value: \"Fil\" },\n        { label: \"Latte\", value: \"Lat\" },\n        { label: \"Americano\", value: \"Ame\" },\n        { label: \"Espresso\", value: \"Esp\" },\n      ],\n    },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSelect placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  options={[\n    {\n      label: \"Fancy\",\n      children: [\n        { label: \"Cappuccino\", value: \"Cap\" },\n        { label: \"Flat white\", value: \"Flat\" },\n        { label: \"Mocha\", value: \"Moc\" },\n        { label: \"Macchiato\", value: \"Mac\" },\n        { label: \"Cortado\", value: \"Cor\" },\n        { label: \"Latte macchiato\", value: \"Lam\" },\n      ],\n    },\n    {\n      label: \"Boring\",\n      children: [\n        { label: \"Filter\", value: \"Fil\" },\n        { label: \"Latte\", value: \"Lat\" },\n        { label: \"Americano\", value: \"Ame\" },\n        { label: \"Espresso\", value: \"Esp\" },\n      ],\n    },\n  ]}\n  searchable\n  includeGroupTitlesInSearch\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n  },\n];\n\nexport const SearchableSelectWithGroupsExample = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Fancy\",\n        children: [\n          { label: \"Cappuccino\", value: \"Cap\" },\n          { label: \"Flat white\", value: \"Flat\" },\n          { label: \"Mocha\", value: \"Moc\" },\n          { label: \"Macchiato\", value: \"Mac\" },\n          { label: \"Cortado\", value: \"Cor\" },\n          { label: \"Latte macchiato\", value: \"Lam\" },\n        ],\n      },\n      {\n        label: \"Boring\",\n        children: [\n          { label: \"Filter\", value: \"Fil\" },\n          { label: \"Latte\", value: \"Lat\" },\n          { label: \"Americano\", value: \"Ame\" },\n          { label: \"Espresso\", value: \"Esp\" },\n        ],\n      },\n    ]}\n    searchable\n    includeGroupTitlesInSearch\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsSearchableWithGroups}>\n  <SearchableSelectWithGroupsExample />\n</ComponentPreview>\n\n## Custom filtering example\n\nThis example shows how to filter data asynchronously when the value in the select field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-select placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  searchable=\"true\"\n  debounce=\"300\"\n  disable-filter=\"true\"\n  id=\"external-filter-select\"\n  characters-until-suggestions=\"2\"\n></ic-select>\n<script>\n  const mockData = [\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Double Espresso\", value: \"Dou\" },\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Filter\", value: \"Fil\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n  ];\n  const select = document.querySelector(\"#external-filter-select\");\n  let selectedValue = \"\";\n  select.addEventListener(\"icClear\", function (event) {\n    select.options = [];\n  });\n  select.addEventListener(\"icOptionSelect\", function (event) {\n    selectedValue = event.detail.value;\n  });\n  select.addEventListener(\"icChange\", function (event) {\n    const value = event.detail.value;\n    console.log(value);\n    if (value !== selectedValue) {\n      if (value && value.length > 1) {\n        mockAPI = (query) => {\n          filteredResults = mockData.filter((item) =>\n            item.label.toLowerCase().includes(query.toLowerCase())\n          );\n          return new Promise((resolve) =>\n            setTimeout(() => resolve(filteredResults), 1000)\n          );\n        };\n        mockAPI(value).then((results) => {\n          select.options = results;\n        });\n      } else {\n        select.options = [];\n      }\n    }\n  });            \n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const mockData = [\n  { label: \"Espresso\", value: \"Esp\" },\n  { label: \"Double Espresso\", value: \"Dou\" },\n  { label: \"Cappuccino\", value: \"Cap\" },\n  { label: \"Latte\", value: \"Lat\" },\n  { label: \"Americano\", value: \"Ame\" },\n  { label: \"Filter\", value: \"Fil\" },\n  { label: \"Flat white\", value: \"Fla\" },\n  { label: \"Mocha\", value: \"Moc\" },\n  { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n  const newValue = event.detail.value;\n  console.log(newValue);\n  if (newValue !== selectedValue) {\n    if (newValue && newValue.length > 1) {\n      const mockAPI = (query) => {\n        const filteredResults = mockData.filter((item) => \n          item.label.toLowerCase().includes(query.toLowerCase()));\n        return new Promise(resolve => { \n          setTimeout(() => resolve(filteredResults), 1000)\n        });\n      };\n      mockAPI(newValue).then((results) => setResults(results));\n    } else {\n      setResults([]);\n    }\n  }  \n}\nreturn(\n  <>\n    <IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n      debounce=\"300\"\n      searchable\n      disableFilter\n      charactersUntilSuggestions=\"2\"\n      options={results} \n      onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\n      onIcClear={() => setResults([])}\n      onIcChange={changeHandler}\n    />\n  </>\n);`,\n  },\n];\n\nexport const CustomFilterExample = () => {\n  const mockData = [\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Double Espresso\", value: \"Dou\" },\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Filter\", value: \"Fil\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n  ];\n  const [results, setResults] = React.useState([]);\n  const [selectedValue, setSelectedValue] = React.useState(\"\");\n  const changeHandler = (event) => {\n    const newValue = event.detail.value;\n    console.log(newValue);\n    if (newValue !== selectedValue) {\n      if (newValue && newValue.length > 1) {\n        const mockAPI = (query) => {\n          const filteredResults = mockData.filter((item) =>\n            item.label.toLowerCase().includes(query.toLowerCase())\n          );\n          return new Promise((resolve) => {\n            setTimeout(() => resolve(filteredResults), 1000);\n          });\n        };\n        mockAPI(newValue).then((newResults) => setResults(newResults));\n      } else {\n        setResults([]);\n      }\n    }\n  };\n  return (\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      debounce=\"300\"\n      searchable\n      disableFilter\n      charactersUntilSuggestions=\"2\"\n      options={results}\n      onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\n      onIcClear={() => setResults([])}\n      onIcChange={changeHandler}\n    />\n  );\n};\n\n<ComponentPreview snippets={customFiltering}>\n  <CustomFilterExample />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcSelect } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option...\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option...\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExample = () => (\n  <IcSelect\n    placeholder=\"Select an option...\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippets}>\n  <SelectExample />\n</ComponentPreview>\n\n## Select details\n\n<ComponentDetails component=\"ic-select\" />\n\n## Variants\n\n### With clear button, descriptions, helper text and custom placeholder\n\nexport const snippetsWithExtras = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select label=\"What is your favourite coffee?\" placeholder=\"Select an option...\" helper-text=\"Select one option from the list\" show-clear-button=\"true\" searchable=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n  ]}\n  placeholder=\"Select an option…\"\n  helperText=\"Select one option from the list\"\n  showClearButton\n  searchable\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleWithExtras = () => (\n  <IcSelect\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Cappuccino\",\n        value: \"cappuccino\",\n        description: \"Coffee frothed up with pressurised steam\",\n      },\n      {\n        label: \"Americano\",\n        value: \"americano\",\n        description: \"Espresso coffee diluted with hot water\",\n      },\n      {\n        label: \"Mocha\",\n        value: \"mocha\",\n        description: \"Coffee with chocolate\",\n      },\n    ]}\n    placeholder=\"Select an option…\"\n    helperText=\"Select one option from the list\"\n    showClearButton\n    searchable\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsWithExtras}>\n  <SelectExampleWithExtras />\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" disabled=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  disabled\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleDisabled = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    disabled\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsDisabled}>\n  <SelectExampleDisabled />\n</ComponentPreview>\n\n### Options disabled\n\nexport const snippetsOptionDisabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", disabled: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", disabled: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleOptionsDisabled = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\", disabled: true },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsOptionDisabled}>\n  <SelectExampleOptionsDisabled />\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select label=\"What is your favourite coffee?\" size=\"small\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n  size=\"small\"\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleSmall = () => (\n  <IcSelect\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\" },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n    size=\"small\"\n  />\n);\n\n<ComponentPreview snippets={snippetsSmall}>\n  <SelectExampleSmall />\n</ComponentPreview>\n\n### Hidden label\n\nexport const snippetsHideLabel = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" hide-label=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n  ]}\n  hideLabel\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleHideLabel = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      { label: \"Double Espresso\", value: \"doubleespresso\" },\n      { label: \"Flat White\", value: \"flatwhite\" },\n    ]}\n    hideLabel\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsHideLabel}>\n  <SelectExampleHideLabel />\n</ComponentPreview>\n\n### Groups\n\nexport const snippetsGroups = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n            {\n              label: \"Fancy\",\n              children: [\n                { label: \"Cappuccino\", value: \"Cap\" },\n                { label: \"Flat white\", value: \"Flat\" },\n              ],\n            },\n            {\n              label: \"Boring\",\n              children: [\n                { label: \"Filter\", value: \"Fil\" },\n                { label: \"Latte\", value: \"Lat\" },\n              ],\n            },\n          ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    {\n      label: \"Fancy\",\n      children: [\n        { label: \"Cappuccino\", value: \"Cap\" },\n        { label: \"Flat white\", value: \"Flat\" },\n      ],\n    },\n    {\n      label: \"Boring\",\n      children: [\n        { label: \"Filter\", value: \"Fil\" },\n        { label: \"Latte\", value: \"Lat\" },\n      ],\n    },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleGroups = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Fancy\",\n        children: [\n          { label: \"Cappuccino\", value: \"Cap\" },\n          { label: \"Flat white\", value: \"Flat\" },\n        ],\n      },\n      {\n        label: \"Boring\",\n        children: [\n          { label: \"Filter\", value: \"Fil\" },\n          { label: \"Latte\", value: \"Lat\" },\n        ],\n      },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsGroups}>\n  <SelectExampleGroups />\n</ComponentPreview>\n\n### Recommended\n\nexport const snippetsRecommended = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", recommended: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\", recommended: true },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleRecommended = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Espresso\", value: \"espresso\" },\n      {\n        label: \"Double Espresso\",\n        value: \"doubleespresso\",\n        recommended: true,\n      },\n      { label: \"Flat White\", value: \"flatwhite\" },\n      { label: \"Cappuccino\", value: \"cappuccino\" },\n      { label: \"Americano\", value: \"americano\", recommended: true },\n      { label: \"Mocha\", value: \"mocha\" },\n    ]}\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsRecommended}>\n  <SelectExampleRecommended />\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n    validation-status=\"success\" \n    validation-text=\"Coffee available\"\n    value=\"americano\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>\n<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n    validation-status=\"warning\" \n    validation-text=\"Only a few left\"\n    value=\"cappuccino\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>\n<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n    validation-status=\"error\" \n    validation-text=\"Coffee unavailable\"\n    value=\"mocha\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n    value=\"americano\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  validationStatus=\"success\"\n  validationText=\"Coffee available\"\n  onIcChange={(event) => console.log(event.detail.value)}\n/>\n  <IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  value=\"cappuccino\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  validationStatus=\"warning\" \n  validationText=\"Only a few left\"\n  onIcChange={(event) => console.log(event.detail.value)}\n/>\n  <IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\"\n  value=\"mocha\"\n  options={[\n    { label: \"Espresso\", value: \"espresso\" },\n    { label: \"Double Espresso\", value: \"doubleespresso\" },\n    { label: \"Flat White\", value: \"flatwhite\" },\n    { label: \"Cappuccino\", value: \"cappuccino\" },\n    { label: \"Americano\", value: \"americano\" },\n    { label: \"Mocha\", value: \"mocha\" },\n  ]}\n  validationStatus=\"error\" \n  validationText=\"Coffee unavailable\"\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SelectExampleValidation = () => (\n  <div>\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      value=\"americano\"\n      options={[\n        { label: \"Espresso\", value: \"espresso\" },\n        { label: \"Double Espresso\", value: \"doubleespresso\" },\n        { label: \"Flat White\", value: \"flatwhite\" },\n        { label: \"Cappuccino\", value: \"cappuccino\" },\n        { label: \"Americano\", value: \"americano\" },\n        { label: \"Mocha\", value: \"mocha\" },\n      ]}\n      validationStatus=\"success\"\n      validationText=\"Coffee available\"\n      onIcChange={(event) => console.log(event.detail.value)}\n    />\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      value=\"cappuccino\"\n      options={[\n        { label: \"Espresso\", value: \"espresso\" },\n        { label: \"Double Espresso\", value: \"doubleespresso\" },\n        { label: \"Flat White\", value: \"flatwhite\" },\n        { label: \"Cappuccino\", value: \"cappuccino\" },\n        { label: \"Americano\", value: \"americano\" },\n        { label: \"Mocha\", value: \"mocha\" },\n      ]}\n      validationStatus=\"warning\"\n      validationText=\"Only a few left\"\n      onIcChange={(event) => console.log(event.detail.value)}\n    />\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      value=\"mocha\"\n      options={[\n        { label: \"Espresso\", value: \"espresso\" },\n        { label: \"Double Espresso\", value: \"doubleespresso\" },\n        { label: \"Flat White\", value: \"flatwhite\" },\n        { label: \"Cappuccino\", value: \"cappuccino\" },\n        { label: \"Americano\", value: \"americano\" },\n        { label: \"Mocha\", value: \"mocha\" },\n      ]}\n      validationStatus=\"error\"\n      validationText=\"Coffee unavailable\"\n      onIcChange={(event) => console.log(event.detail.value)}\n    />\n  </div>\n);\n\n<ComponentPreview snippets={snippetsValidation}>\n  <SelectExampleValidation />\n</ComponentPreview>\n\n### Searchable\n\nexport const snippetsSearchable = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" searchable=\"true\"></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n    { label: \"Café au lait\", value: \"Caf\" },\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Cortado\", value: \"Cor\" },\n    { label: \"Latte macchiato\", value: \"Lam\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n    { label: \"Café au lait\", value: \"Caf\" },\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Cortado\", value: \"Cor\" },\n    { label: \"Latte macchiato\", value: \"Lam\" },\n  ]}\n  searchable\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SearchableSelectExample = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      { label: \"Cappuccino\", value: \"Cap\" },\n      { label: \"Latte\", value: \"Lat\" },\n      { label: \"Americano\", value: \"Ame\" },\n      { label: \"Flat white\", value: \"Fla\" },\n      { label: \"Mocha\", value: \"Moc\" },\n      { label: \"Macchiato\", value: \"Mac\" },\n      { label: \"Café au lait\", value: \"Caf\" },\n      { label: \"Espresso\", value: \"Esp\" },\n      { label: \"Cortado\", value: \"Cor\" },\n      { label: \"Latte macchiato\", value: \"Lam\" },\n    ]}\n    searchable\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsSearchable}>\n  <SearchableSelectExample />\n</ComponentPreview>\n\n### Searchable - with descriptions included in search\n\nexport const snippetsSearchableWithDescriptions = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\" \n  searchable=\"true\" \n  include-description-in-search=\"true\"\n></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n    { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n    { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n    { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n    { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n    { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n    { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n    { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  options={[\n    { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n    { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n    { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n    { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n    { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n    { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n    { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n    { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n    { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n    { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n  ]}\n  searchable\n  includeDescriptionsInSearch\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SearchableSelectWithDescriptionsExample = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Cappuccino\",\n        value: \"Cap\",\n        description: \"Coffee frothed up with pressurised steam\",\n      },\n      {\n        label: \"Americano\",\n        value: \"Ame\",\n        description: \"Espresso coffee diluted with hot water\",\n      },\n      { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n      {\n        label: \"Latte\",\n        value: \"Lat\",\n        description: \"Milky coffee with one or two shots of espresso\",\n      },\n      {\n        label: \"Flat white\",\n        value: \"Fla\",\n        description: \"Coffee with frothed milk poured over espresso\",\n      },\n      {\n        label: \"Macchiato\",\n        value: \"Mac\",\n        description: \"Espresso coffee topped with steamed milk\",\n      },\n      {\n        label: \"Café au lait\",\n        value: \"Caf\",\n        description: \"Brewed coffee with steamed milk\",\n      },\n      {\n        label: \"Espresso\",\n        value: \"Esp\",\n        description: \"Concentrated form of coffee\",\n      },\n      { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n      {\n        label: \"Latte macchiato\",\n        value: \"Lam\",\n        description: \"Espresso coffee with milk and a spoonful of foamed milk\",\n      },\n    ]}\n    searchable\n    includeDescriptionsInSearch\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsSearchableWithDescriptions}>\n  <SearchableSelectWithDescriptionsExample />\n</ComponentPreview>\n\n### Searchable - with group titles included in search\n\nexport const snippetsSearchableWithGroups = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\" \n  searchable=\"true\" \n  include-group-titles-in-search=\"true\"\n></ic-select>\n<script>\n  const select = document.querySelector(\"ic-select\");\n  let option = \"Cappuccino\";\n  select.options = [\n    {\n      label: \"Fancy\",\n      children: [\n        { label: \"Cappuccino\", value: \"Cap\" },\n        { label: \"Flat white\", value: \"Flat\" },\n        { label: \"Mocha\", value: \"Moc\" },\n        { label: \"Macchiato\", value: \"Mac\" },\n        { label: \"Cortado\", value: \"Cor\" },\n        { label: \"Latte macchiato\", value: \"Lam\" },\n      ],\n    },\n    {\n      label: \"Boring\",\n      children: [\n        { label: \"Filter\", value: \"Fil\" },\n        { label: \"Latte\", value: \"Lat\" },\n        { label: \"Americano\", value: \"Ame\" },\n        { label: \"Espresso\", value: \"Esp\" },\n      ],\n    },\n  ];\n  select.addEventListener(\"icChange\", function (event) {\n    console.log(event.detail.value);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSelect placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  options={[\n    {\n      label: \"Fancy\",\n      children: [\n        { label: \"Cappuccino\", value: \"Cap\" },\n        { label: \"Flat white\", value: \"Flat\" },\n        { label: \"Mocha\", value: \"Moc\" },\n        { label: \"Macchiato\", value: \"Mac\" },\n        { label: \"Cortado\", value: \"Cor\" },\n        { label: \"Latte macchiato\", value: \"Lam\" },\n      ],\n    },\n    {\n      label: \"Boring\",\n      children: [\n        { label: \"Filter\", value: \"Fil\" },\n        { label: \"Latte\", value: \"Lat\" },\n        { label: \"Americano\", value: \"Ame\" },\n        { label: \"Espresso\", value: \"Esp\" },\n      ],\n    },\n  ]}\n  searchable\n  includeGroupTitlesInSearch\n  onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SearchableSelectWithGroupsExample = () => (\n  <IcSelect\n    placeholder=\"Select an option…\"\n    label=\"What is your favourite coffee?\"\n    options={[\n      {\n        label: \"Fancy\",\n        children: [\n          { label: \"Cappuccino\", value: \"Cap\" },\n          { label: \"Flat white\", value: \"Flat\" },\n          { label: \"Mocha\", value: \"Moc\" },\n          { label: \"Macchiato\", value: \"Mac\" },\n          { label: \"Cortado\", value: \"Cor\" },\n          { label: \"Latte macchiato\", value: \"Lam\" },\n        ],\n      },\n      {\n        label: \"Boring\",\n        children: [\n          { label: \"Filter\", value: \"Fil\" },\n          { label: \"Latte\", value: \"Lat\" },\n          { label: \"Americano\", value: \"Ame\" },\n          { label: \"Espresso\", value: \"Esp\" },\n        ],\n      },\n    ]}\n    searchable\n    includeGroupTitlesInSearch\n    onIcChange={(event) => console.log(event.detail.value)}\n  />\n);\n\n<ComponentPreview snippets={snippetsSearchableWithGroups}>\n  <SearchableSelectWithGroupsExample />\n</ComponentPreview>\n\n## Custom filtering example\n\nThis example shows how to filter data asynchronously when the value in the select field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-select placeholder=\"Select an option…\"\n  label=\"What is your favourite coffee?\"\n  searchable=\"true\"\n  debounce=\"300\"\n  disable-filter=\"true\"\n  id=\"external-filter-select\"\n  characters-until-suggestions=\"2\"\n></ic-select>\n<script>\n  const mockData = [\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Double Espresso\", value: \"Dou\" },\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Filter\", value: \"Fil\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n  ];\n  const select = document.querySelector(\"#external-filter-select\");\n  let selectedValue = \"\";\n  select.addEventListener(\"icClear\", function (event) {\n    select.options = [];\n  });\n  select.addEventListener(\"icOptionSelect\", function (event) {\n    selectedValue = event.detail.value;\n  });\n  select.addEventListener(\"icChange\", function (event) {\n    const value = event.detail.value;\n    console.log(value);\n    if (value !== selectedValue) {\n      if (value && value.length > 1) {\n        mockAPI = (query) => {\n          filteredResults = mockData.filter((item) =>\n            item.label.toLowerCase().includes(query.toLowerCase())\n          );\n          return new Promise((resolve) =>\n            setTimeout(() => resolve(filteredResults), 1000)\n          );\n        };\n        mockAPI(value).then((results) => {\n          select.options = results;\n        });\n      } else {\n        select.options = [];\n      }\n    }\n  });            \n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const mockData = [\n  { label: \"Espresso\", value: \"Esp\" },\n  { label: \"Double Espresso\", value: \"Dou\" },\n  { label: \"Cappuccino\", value: \"Cap\" },\n  { label: \"Latte\", value: \"Lat\" },\n  { label: \"Americano\", value: \"Ame\" },\n  { label: \"Filter\", value: \"Fil\" },\n  { label: \"Flat white\", value: \"Fla\" },\n  { label: \"Mocha\", value: \"Moc\" },\n  { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n  const newValue = event.detail.value;\n  console.log(newValue);\n  if (newValue !== selectedValue) {\n    if (newValue && newValue.length > 1) {\n      const mockAPI = (query) => {\n        const filteredResults = mockData.filter((item) => \n          item.label.toLowerCase().includes(query.toLowerCase()));\n        return new Promise(resolve => { \n          setTimeout(() => resolve(filteredResults), 1000)\n        });\n      };\n      mockAPI(newValue).then((results) => setResults(results));\n    } else {\n      setResults([]);\n    }\n  }  \n}\nreturn(\n  <>\n    <IcSelect placeholder=\"Select an option…\" label=\"What is your favourite coffee?\" \n      debounce=\"300\"\n      searchable\n      disableFilter\n      charactersUntilSuggestions=\"2\"\n      options={results} \n      onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\n      onIcClear={() => setResults([])}\n      onIcChange={changeHandler}\n    />\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const CustomFilterExample = () => {\n  const mockData = [\n    { label: \"Espresso\", value: \"Esp\" },\n    { label: \"Double Espresso\", value: \"Dou\" },\n    { label: \"Cappuccino\", value: \"Cap\" },\n    { label: \"Latte\", value: \"Lat\" },\n    { label: \"Americano\", value: \"Ame\" },\n    { label: \"Filter\", value: \"Fil\" },\n    { label: \"Flat white\", value: \"Fla\" },\n    { label: \"Mocha\", value: \"Moc\" },\n    { label: \"Macchiato\", value: \"Mac\" },\n  ];\n  const [results, setResults] = React.useState([]);\n  const [selectedValue, setSelectedValue] = React.useState(\"\");\n  const changeHandler = (event) => {\n    const newValue = event.detail.value;\n    console.log(newValue);\n    if (newValue !== selectedValue) {\n      if (newValue && newValue.length > 1) {\n        const mockAPI = (query) => {\n          const filteredResults = mockData.filter((item) =>\n            item.label.toLowerCase().includes(query.toLowerCase())\n          );\n          return new Promise((resolve) => {\n            setTimeout(() => resolve(filteredResults), 1000);\n          });\n        };\n        mockAPI(newValue).then((newResults) => setResults(newResults));\n      } else {\n        setResults([]);\n      }\n    }\n  };\n  return (\n    <IcSelect\n      placeholder=\"Select an option…\"\n      label=\"What is your favourite coffee?\"\n      debounce=\"300\"\n      searchable\n      disableFilter\n      charactersUntilSuggestions=\"2\"\n      options={results}\n      onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\n      onIcClear={() => setResults([])}\n      onIcChange={changeHandler}\n    />\n  );\n};\n\n<ComponentPreview snippets={customFiltering}>\n  <CustomFilterExample />\n</ComponentPreview>\n",
       "path": "/components/select/code",
       "date": "2024-02-02",
       "title": "Select",
@@ -2930,10 +2930,10 @@
       ],
       "meta": {
         "relativePath": "components/select/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.544Z",
-        "lastModified": "2024-04-08T22:24:28.544Z",
-        "size": 35528,
-        "formattedSize": "34.7 KB"
+        "createdAt": "2024-04-08T22:26:50.780Z",
+        "lastModified": "2024-04-08T22:26:50.780Z",
+        "size": 39142,
+        "formattedSize": "38.2 KB"
       }
     },
     {
@@ -3001,7 +3001,7 @@
     },
     {
       "id": "components__side-nav__codex",
-      "contents": "\nimport {\n  IcSideNavigation,\n  IcNavigationItem,\n  IcNavigationGroup,\n  IcDivider,\n  IcLink,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\nimport {\n  mdiHome,\n  mdiCoffeeOutline,\n  mdiMagnify,\n  mdiCoffeeMakerOutline,\n  mdiCogOutline,\n  mdiTeaOutline,\n} from \"@mdi/js\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-side-navigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-divider slot=\"primary-navigation\"></ic-divider>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\"></IcDivider>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsDefault}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n## Side navigation details\n\n<ComponentDetails component=\"ic-side-navigation\" />\n\n## Navigation group details\n\n<ComponentDetails component=\"ic-navigation-group\" />\n\n## Navigation item details\n\n<ComponentDetails component=\"ic-navigation-item\" />\n\n## Variants\n\n### Static\n\nexport const snippetsStatic = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-side-navigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\" static=\"true\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-divider slot=\"primary-navigation\"></ic-divider>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\" static>\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\"></IcDivider>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsStatic}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n    static\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### Expanded on default\n\nexport const snippetsExpanded = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-side-navigation\n  app-title=\"ACME coffee shop\"\n  version=\"v0.0.7\"\n  status=\"Alpha\"\n  expanded\n>\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSideNavigation\n  appTitle=\"ACME coffee shop\"\n  version=\"v0.0.7\"\n  status=\"Alpha\"\n  expanded\n>\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title><path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsExpanded}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    expanded\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### Collapsed labels\n\nexport const snippetsCollapsed = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-side-navigation app-title=\"ACME coffee shop\" version=\"v0.0.0\" status=\"Alpha\" collapsed-icon-labels=\"true\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\" collapsedIconLabels>\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsCollapsed}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.0\"\n    status=\"Alpha\"\n    collapsedIconLabels\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### With badges on navigation items\n\nexport const snippetsBadge = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-side-navigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-divider slot=\"primary-navigation\"></ic-divider>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <ic-badge type=\"dot\" slot=\"badge\" variant=\"error\" position=\"far\" size=\"large\"></ic-badge>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <ic-badge type=\"dot\" slot=\"badge\" variant=\"success\" position=\"far\" size=\"large\"></ic-badge>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\"></IcDivider>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <IcBadge type=\"dot\" slot=\"badge\" variant=\"error\" position=\"far\" size=\"large\"/>\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <IcBadge type=\"dot\" slot=\"badge\" variant=\"success\" position=\"far\" size=\"large\"/>\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsBadge}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <IcBadge\n        type=\"dot\"\n        slot=\"badge\"\n        variant=\"error\"\n        position=\"far\"\n        size=\"large\"\n      />\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <IcBadge\n        type=\"dot\"\n        slot=\"badge\"\n        variant=\"success\"\n        position=\"far\"\n        size=\"large\"\n      />\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### With Material Design icons in SlottedSVG\n\n[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in `<SlottedSVG>`.\nTo scale the icons, use the ['viewBox' attribute](https://css-tricks.com/scale-svg/#aa-the-viewbox-attribute)\n\n```bash\nnpm i @mdi/js\n```\n\nexport const withMDIicons = [\n  {\n    language: \"React\",\n    snippet: `// importing Material Design icons\nimport { \n  mdiCoffeeOutline, \n  mdiHome,\n  mdiMagnify,\n  mdiCoffeeMakerOutline,\n  mdiCogOutline,\n  mdiTeaOutline\n} from \"@mdi/js\";\n...\n<IcSideNavigation\n  appTitle=\"ACME coffee Shop\"\n  version=\"v0.0.7\"\n  status=\"Alpha\"\n>\n  <SlottedSVG slot=\"app-icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" />\n  <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n    <SlottedSVG slot=\"icon\" path={mdiHome} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\" />\n  <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Search\">\n    <SlottedSVG slot=\"icon\" path={mdiMagnify} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n  <IcNavigationGroup\n    slot=\"primary-navigation\"\n    label=\"Teas\"\n    expandable=\"true\"\n  >\n    <IcNavigationItem label=\"English breakfast\" href=\"/\">\n      <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n    <IcNavigationItem label=\"Chai\" href=\"/\">\n      <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n  </IcNavigationGroup>\n  <IcNavigationItem\n    slot=\"primary-navigation\"\n    href=\"/\"\n    label=\"All other types of teas which you feel can be added.\"\n  >\n    <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"/\" label=\"Settings\">\n    <SlottedSVG slot=\"icon\" path={mdiCogOutline} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n</IcSideNavigation>`,\n  },\n];\n\n<ComponentPreview\n  snippets={withMDIicons}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" path={mdiHome} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" path={mdiMagnify} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n    <IcNavigationGroup slot=\"primary-navigation\" label=\"Teas\" expandable=\"true\">\n      <IcNavigationItem label=\"English breakfast\" href=\"/\">\n        <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n      </IcNavigationItem>\n      <IcNavigationItem label=\"Chai\" href=\"/\">\n        <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n      </IcNavigationItem>\n      <IcNavigationItem\n        href=\"/\"\n        label=\"All other types of teas which can be added.\"\n      >\n        <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n      </IcNavigationItem>\n    </IcNavigationGroup>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Equipment\">\n      <SlottedSVG\n        slot=\"icon\"\n        path={mdiCoffeeMakerOutline}\n        viewBox=\"0 0 24 24\"\n      />\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"/\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" path={mdiCogOutline} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### With React Router and Material Design Icons (using slots)\n\nThe following example also demonstrates using a slotted app title link.\n\nexport const withReactRouter = [\n  {\n    language: \"React\",\n    snippet: `<MemoryRouter initialEntries={[\"/\"]}>\n  <div style={{ display: \"flex\", flexDirection: \"row\"}}>\n    <IcSideNavigation\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    appTitle=\"ACME coffee shop\"\n    >\n      <NavLink to=\"/\" slot=\"app-title\">ACME coffee shop</NavLink>\n      <SlottedSVG slot=\"app-icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" />\n      <IcNavigationItem\n        slot=\"primary-navigation\"\n      >\n        <NavLink to=\"/\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiHome} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Home\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"primary-navigation\">\n        <NavLink to=\"/search\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiMagnify} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Search\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"primary-navigation\">\n        <NavLink to=\"/drinks\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Drinks\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"primary-navigation\">\n        <NavLink to=\"/coffee-maker\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiCoffeeMakerOutline} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Equipment\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"secondary-navigation\">\n        <NavLink to=\"/settings\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiCogOutline} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Settings\n        </NavLink>\n      </IcNavigationItem>\n    </IcSideNavigation>\n    <main>\n      <IcSectionContainer>\n        <Routes>\n          <Route path=\"/\" element={() => <IcTypography>This is the home page</IcTypography>} />\n          <Route path=\"/search\" element={() => <IcTypography>Search</IcTypography>} />\n          <Route path=\"/drinks\" element={() => <IcTypography>Drinks</IcTypography>} />\n          <Route path=\"/coffee-maker\" element={() => <IcTypography>Coffee Maker</IcTypography>} />\n          <Route path=\"/settings\" element={() => <IcTypography>Settings</IcTypography>} />\n        </Routes>\n      </IcSectionContainer>\n    </main>\n  </div>\n</MemoryRouter>`,\n  },\n];\n\n<ComponentPreview\n  snippets={withReactRouter}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <div style={{ display: \"flex\", flexDirection: \"row\" }}>\n      <IcSideNavigation\n        appTitle=\"ACME coffee shop\"\n        version=\"v0.0.7\"\n        status=\"Alpha\"\n      >\n        <NavLink to=\"/\" slot=\"app-title\">\n          ACME coffee shop\n        </NavLink>\n        <SlottedSVG\n          slot=\"app-icon\"\n          path={mdiCoffeeOutline}\n          viewBox=\"0 0 24 24\"\n        />\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiHome}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Home\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/search\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiMagnify}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Search\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/drinks\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiCoffeeOutline}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Drinks\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/coffee-maker\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiCoffeeMakerOutline}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Equipment\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"secondary-navigation\">\n          <NavLink to=\"/settings\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiCogOutline}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Settings\n          </NavLink>\n        </IcNavigationItem>\n      </IcSideNavigation>\n    </div>\n  </MemoryRouter>\n</ComponentPreview>\n\n## Layout example\n\nFixed side navigation places the side navigation to the viewport.\n\nexport const basicLayoutFixedViewport = [\n  {\n    language: \"Web component\",\n    snippet: `// Inline styling added for verboseness\n<div style=\"display: flex; height:100%;\">\n  <ic-side-navigation\n    app-title=\"Application Name\"\n    version=\"v0.0.0\"\n    status=\"BETA\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n      />\n    </svg>\n    <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>\n    <ic-navigation-item\n      slot=\"primary-navigation\"\n      href=\"/\"\n      label=\"Search\"\n      selected=\"true\"\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>\n    <ic-navigation-item\n      slot=\"secondary-navigation\"\n      href=\"/\"\n      label=\"Settings\"\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>\n  </ic-side-navigation>\n  <div style=\"display:flex; flex-direction: column; flex-grow: 1;\">\n    <main style=\"height: 100vh;\">\n      <ic-section-container>\n        <ic-typography>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.</p>\n        </ic-typography>\n        <ic-typography>\n          <p>Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.</p>\n        </ic-typography>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,\n        please get in touch.\"\n      caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n    >\n      <ic-footer-link slot=\"link\" href=\"/\">Get Started</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n    </ic-footer>\n    <ic-classification-banner classification=\"official\"></ic-classification-banner>\n  </div>\n</div>`,\n  },\n  {\n    language: \"React\",\n    snippet: `// Inline styling added for verboseness\n<div style={{display: 'flex', height: '100%'}}>\n  <IcSideNavigation\n    appTitle=\"Application Name\"\n    version=\"v0.0.0\"\n    status=\"BETA\"\n  >\n    <SlottedSVG\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n      />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n      <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem\n      slot=\"primary-navigation\"\n      href=\"/\"\n      label=\"Search\"\n      selected\n    >\n      <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem\n      slot=\"secondary-navigation\"\n      href=\"/\"\n      label=\"Settings\"\n    >\n      <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n  <div style={{display: 'flex', flexDirection: 'column', flexGrow: '1'}}>\n    <main style={{height: '100vh'}}>\n      <IcSectionContainer>\n        <IcTypography>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.</p>\n        </IcTypography>\n        <IcTypography>\n          <p>Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.</p>\n        </IcTypography>\n      </IcSectionContainer>\n    </main>\n    <IcFooter\n      description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,\n        please get in touch.\"\n      caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n    >\n      <IcFooterLink slot=\"link\" href=\"/\">Get Started</IcFooterLink>\n      <IcFooterLink slot=\"link\" href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink slot=\"link\" href=\"/\">Styles</IcFooterLink>\n    </IcFooter>\n    <IcClassificationBanner classification=\"official\"></IcClassificationBanner>\n  </div>\n</div>`,\n  },\n];\n\n<ComponentPreview\n  snippets={basicLayoutFixedViewport}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/side-navigation-layout\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcSideNavigation,\n  IcNavigationItem,\n  IcNavigationGroup,\n  IcDivider,\n  IcLink,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\nimport {\n  mdiHome,\n  mdiCoffeeOutline,\n  mdiMagnify,\n  mdiCoffeeMakerOutline,\n  mdiCogOutline,\n  mdiTeaOutline,\n} from \"@mdi/js\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-side-navigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-divider slot=\"primary-navigation\"></ic-divider>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\"></IcDivider>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\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\n  snippets={snippetsDefault}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n## Side navigation details\n\n<ComponentDetails component=\"ic-side-navigation\" />\n\n## Navigation group details\n\n<ComponentDetails component=\"ic-navigation-group\" />\n\n## Navigation item details\n\n<ComponentDetails component=\"ic-navigation-item\" />\n\n## Variants\n\n### Static\n\nexport const snippetsStatic = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-side-navigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\" static=\"true\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-divider slot=\"primary-navigation\"></ic-divider>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\" static>\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\"></IcDivider>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\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\n  snippets={snippetsStatic}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n    static\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### Expanded on default\n\nexport const snippetsExpanded = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-side-navigation\n  app-title=\"ACME coffee shop\"\n  version=\"v0.0.7\"\n  status=\"Alpha\"\n  expanded\n>\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSideNavigation\n  appTitle=\"ACME coffee shop\"\n  version=\"v0.0.7\"\n  status=\"Alpha\"\n  expanded\n>\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title><path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\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\n  snippets={snippetsExpanded}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    expanded\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### Collapsed labels\n\nexport const snippetsCollapsed = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-side-navigation app-title=\"ACME coffee shop\" version=\"v0.0.0\" status=\"Alpha\" collapsed-icon-labels=\"true\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\" collapsedIconLabels>\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\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\n  snippets={snippetsCollapsed}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.0\"\n    status=\"Alpha\"\n    collapsedIconLabels\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### With badges on navigation items\n\nexport const snippetsBadge = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-side-navigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </svg>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </svg> \n  </ic-navigation-item>\n  <ic-divider slot=\"primary-navigation\"></ic-divider>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <ic-badge type=\"dot\" slot=\"badge\" variant=\"error\" position=\"far\" size=\"large\"></ic-badge>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <ic-badge type=\"dot\" slot=\"badge\" variant=\"success\" position=\"far\" size=\"large\"></ic-badge>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </svg>\n  </ic-navigation-item>\n  <ic-navigation-item slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </svg>\n  </ic-navigation-item>\n</ic-side-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSideNavigation appTitle=\"ACME coffee shop\" version=\"v0.0.7\" status=\"Alpha\">\n  <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n    <title>coffee-outline</title>\n    <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n  </SlottedSVG>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>home</title>\n      <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n    </SlottedSVG> \n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\"></IcDivider>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>magnify</title>\n      <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n    <IcBadge type=\"dot\" slot=\"badge\" variant=\"error\" position=\"far\" size=\"large\"/>\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n    <IcBadge type=\"dot\" slot=\"badge\" variant=\"success\" position=\"far\" size=\"large\"/>\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>coffee-maker-outline</title>\n      <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n    <SlottedSVG slot='icon' viewBox=\"0 0 24 24\">\n      <title>cog-outline</title>\n      <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n    </SlottedSVG>\n  </IcNavigationItem>\n</IcSideNavigation>`,\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\n  snippets={snippetsBadge}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>home</title>\n        <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>magnify</title>\n        <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n      <IcBadge\n        type=\"dot\"\n        slot=\"badge\"\n        variant=\"error\"\n        position=\"far\"\n        size=\"large\"\n      />\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-outline</title>\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n      <IcBadge\n        type=\"dot\"\n        slot=\"badge\"\n        variant=\"success\"\n        position=\"far\"\n        size=\"large\"\n      />\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>coffee-maker-outline</title>\n        <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" viewBox=\"0 0 24 24\">\n        <title>cog-outline</title>\n        <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### With Material Design icons in SlottedSVG\n\n[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in `<SlottedSVG>`.\nTo scale the icons, use the ['viewBox' attribute](https://css-tricks.com/scale-svg/#aa-the-viewbox-attribute)\n\n```bash\nnpm i @mdi/js\n```\n\nexport const withMDIicons = [\n  {\n    technology: \"React\",\n    snippets: {\n      short: `// importing Material Design icons\nimport { \n  mdiCoffeeOutline, \n  mdiHome,\n  mdiMagnify,\n  mdiCoffeeMakerOutline,\n  mdiCogOutline,\n  mdiTeaOutline\n} from \"@mdi/js\";\n...\n<IcSideNavigation\n  appTitle=\"ACME coffee Shop\"\n  version=\"v0.0.7\"\n  status=\"Alpha\"\n>\n  <SlottedSVG slot=\"app-icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" />\n  <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n    <SlottedSVG slot=\"icon\" path={mdiHome} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n  <IcDivider slot=\"primary-navigation\" />\n  <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Search\">\n    <SlottedSVG slot=\"icon\" path={mdiMagnify} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n  <IcNavigationGroup\n    slot=\"primary-navigation\"\n    label=\"Teas\"\n    expandable=\"true\"\n  >\n    <IcNavigationItem label=\"English breakfast\" href=\"/\">\n      <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n    <IcNavigationItem label=\"Chai\" href=\"/\">\n      <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n  </IcNavigationGroup>\n  <IcNavigationItem\n    slot=\"primary-navigation\"\n    href=\"/\"\n    label=\"All other types of teas which you feel can be added.\"\n  >\n    <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n  <IcNavigationItem slot=\"secondary-navigation\" href=\"/\" label=\"Settings\">\n    <SlottedSVG slot=\"icon\" path={mdiCogOutline} viewBox=\"0 0 24 24\" />\n  </IcNavigationItem>\n</IcSideNavigation>`,\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\n  snippets={withMDIicons}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <IcSideNavigation\n    appTitle=\"ACME coffee shop\"\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    disableAutoParentStyling\n    inline\n  >\n    <SlottedSVG slot=\"app-icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n      <SlottedSVG slot=\"icon\" path={mdiHome} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n    <IcDivider slot=\"primary-navigation\" />\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Search\">\n      <SlottedSVG slot=\"icon\" path={mdiMagnify} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n    <IcNavigationGroup slot=\"primary-navigation\" label=\"Teas\" expandable=\"true\">\n      <IcNavigationItem label=\"English breakfast\" href=\"/\">\n        <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n      </IcNavigationItem>\n      <IcNavigationItem label=\"Chai\" href=\"/\">\n        <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n      </IcNavigationItem>\n      <IcNavigationItem\n        href=\"/\"\n        label=\"All other types of teas which can be added.\"\n      >\n        <SlottedSVG slot=\"icon\" path={mdiTeaOutline} viewBox=\"0 0 24 24\" />\n      </IcNavigationItem>\n    </IcNavigationGroup>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Equipment\">\n      <SlottedSVG\n        slot=\"icon\"\n        path={mdiCoffeeMakerOutline}\n        viewBox=\"0 0 24 24\"\n      />\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"secondary-navigation\" href=\"/\" label=\"Settings\">\n      <SlottedSVG slot=\"icon\" path={mdiCogOutline} viewBox=\"0 0 24 24\" />\n    </IcNavigationItem>\n  </IcSideNavigation>\n</ComponentPreview>\n\n### With React Router and Material Design Icons (using slots)\n\nThe following example also demonstrates using a slotted app title link.\n\nexport const withReactRouter = [\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<MemoryRouter initialEntries={[\"/\"]}>\n  <div style={{ display: \"flex\", flexDirection: \"row\"}}>\n    <IcSideNavigation\n    version=\"v0.0.7\"\n    status=\"Alpha\"\n    appTitle=\"ACME coffee shop\"\n    >\n      <NavLink to=\"/\" slot=\"app-title\">ACME coffee shop</NavLink>\n      <SlottedSVG slot=\"app-icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" />\n      <IcNavigationItem\n        slot=\"primary-navigation\"\n      >\n        <NavLink to=\"/\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiHome} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Home\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"primary-navigation\">\n        <NavLink to=\"/search\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiMagnify} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Search\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"primary-navigation\">\n        <NavLink to=\"/drinks\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiCoffeeOutline} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Drinks\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"primary-navigation\">\n        <NavLink to=\"/coffee-maker\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiCoffeeMakerOutline} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Equipment\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"secondary-navigation\">\n        <NavLink to=\"/settings\" slot=\"navigation-item\">\n          <SlottedSVG slot=\"icon\" path={mdiCogOutline} viewBox=\"0 0 24 24\" height=\"1.5rem\" width=\"1.5rem\" fill=\"currentcolor\" />\n          Settings\n        </NavLink>\n      </IcNavigationItem>\n    </IcSideNavigation>\n    <main>\n      <IcSectionContainer>\n        <Routes>\n          <Route path=\"/\" element={() => <IcTypography>This is the home page</IcTypography>} />\n          <Route path=\"/search\" element={() => <IcTypography>Search</IcTypography>} />\n          <Route path=\"/drinks\" element={() => <IcTypography>Drinks</IcTypography>} />\n          <Route path=\"/coffee-maker\" element={() => <IcTypography>Coffee Maker</IcTypography>} />\n          <Route path=\"/settings\" element={() => <IcTypography>Settings</IcTypography>} />\n        </Routes>\n      </IcSectionContainer>\n    </main>\n  </div>\n</MemoryRouter>`,\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\n  snippets={withReactRouter}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"flex-start\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    padding: \"0px\",\n  }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <div style={{ display: \"flex\", flexDirection: \"row\" }}>\n      <IcSideNavigation\n        appTitle=\"ACME coffee shop\"\n        version=\"v0.0.7\"\n        status=\"Alpha\"\n      >\n        <NavLink to=\"/\" slot=\"app-title\">\n          ACME coffee shop\n        </NavLink>\n        <SlottedSVG\n          slot=\"app-icon\"\n          path={mdiCoffeeOutline}\n          viewBox=\"0 0 24 24\"\n        />\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiHome}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Home\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/search\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiMagnify}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Search\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/drinks\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiCoffeeOutline}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Drinks\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"primary-navigation\">\n          <NavLink to=\"/coffee-maker\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiCoffeeMakerOutline}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Equipment\n          </NavLink>\n        </IcNavigationItem>\n        <IcNavigationItem slot=\"secondary-navigation\">\n          <NavLink to=\"/settings\" slot=\"navigation-item\">\n            <SlottedSVG\n              slot=\"icon\"\n              path={mdiCogOutline}\n              viewBox=\"0 0 24 24\"\n              height=\"1.5rem\"\n              width=\"1.5rem\"\n              fill=\"currentcolor\"\n            />\n            Settings\n          </NavLink>\n        </IcNavigationItem>\n      </IcSideNavigation>\n    </div>\n  </MemoryRouter>\n</ComponentPreview>\n\n## Layout example\n\nFixed side navigation places the side navigation to the viewport.\n\nexport const basicLayoutFixedViewport = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `// Inline styling added for verboseness\n<div style=\"display: flex; height:100%;\">\n  <ic-side-navigation\n    app-title=\"Application Name\"\n    version=\"v0.0.0\"\n    status=\"BETA\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n      />\n    </svg>\n    <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>\n    <ic-navigation-item\n      slot=\"primary-navigation\"\n      href=\"/\"\n      label=\"Search\"\n      selected=\"true\"\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>\n    <ic-navigation-item\n      slot=\"secondary-navigation\"\n      href=\"/\"\n      label=\"Settings\"\n    >\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>\n  </ic-side-navigation>\n  <div style=\"display:flex; flex-direction: column; flex-grow: 1;\">\n    <main style=\"height: 100vh;\">\n      <ic-section-container>\n        <ic-typography>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.</p>\n        </ic-typography>\n        <ic-typography>\n          <p>Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.</p>\n        </ic-typography>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,\n        please get in touch.\"\n      caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n    >\n      <ic-footer-link slot=\"link\" href=\"/\">Get Started</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"/\">Accessibility</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"/\">Styles</ic-footer-link>\n    </ic-footer>\n    <ic-classification-banner classification=\"official\"></ic-classification-banner>\n  </div>\n</div>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `// Inline styling added for verboseness\n<div style={{display: 'flex', height: '100%'}}>\n  <IcSideNavigation\n    appTitle=\"Application Name\"\n    version=\"v0.0.0\"\n    status=\"BETA\"\n  >\n    <SlottedSVG\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n      />\n    </SlottedSVG>\n    <IcNavigationItem slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n      <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem\n      slot=\"primary-navigation\"\n      href=\"/\"\n      label=\"Search\"\n      selected\n    >\n      <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcNavigationItem>\n    <IcNavigationItem\n      slot=\"secondary-navigation\"\n      href=\"/\"\n      label=\"Settings\"\n    >\n      <SlottedSVG\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n          fill=\"currentColor\"\n        />\n      </SlottedSVG>\n    </IcNavigationItem>\n  </IcSideNavigation>\n  <div style={{display: 'flex', flexDirection: 'column', flexGrow: '1'}}>\n    <main style={{height: '100vh'}}>\n      <IcSectionContainer>\n        <IcTypography>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.</p>\n        </IcTypography>\n        <IcTypography>\n          <p>Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.</p>\n        </IcTypography>\n      </IcSectionContainer>\n    </main>\n    <IcFooter\n      description=\"The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,\n        please get in touch.\"\n      caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n    >\n      <IcFooterLink slot=\"link\" href=\"/\">Get Started</IcFooterLink>\n      <IcFooterLink slot=\"link\" href=\"/\">Accessibility</IcFooterLink>\n      <IcFooterLink slot=\"link\" href=\"/\">Styles</IcFooterLink>\n    </IcFooter>\n    <IcClassificationBanner classification=\"official\"></IcClassificationBanner>\n  </div>\n</div>`,\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\n  snippets={basicLayoutFixedViewport}\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/side-navigation-layout\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n",
       "path": "/components/side-navigation/code",
       "date": "2023-10-11",
       "title": "Side navigation",
@@ -3024,10 +3024,10 @@
       ],
       "meta": {
         "relativePath": "components/side-nav/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.548Z",
-        "lastModified": "2024-04-08T22:24:28.548Z",
-        "size": 75440,
-        "formattedSize": "73.7 KB"
+        "createdAt": "2024-04-08T22:26:50.784Z",
+        "lastModified": "2024-04-08T22:26:50.784Z",
+        "size": 77560,
+        "formattedSize": "75.7 KB"
       }
     },
     {
@@ -3095,7 +3095,7 @@
     },
     {
       "id": "components__skeleton__codex",
-      "contents": "\nimport {\n  IcSkeleton,\n  IcTypography,\n  IcCard,\n  IcButton,\n  SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-skeleton variant=\"circle\"></ic-skeleton>\n<ic-typography variant=\"caption\">\n  <ic-skeleton variant=\"text\"></ic-skeleton>\n</ic-typography>\n<ic-skeleton></ic-skeleton>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSkeleton variant=\"circle\" />\n<IcTypography variant=\"caption\">\n  <IcSkeleton variant=\"text\" />\n</IcTypography>\n<IcSkeleton />`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcSkeleton variant=\"circle\" />\n    <IcTypography variant=\"caption\">\n      <IcSkeleton variant=\"text\" />\n    </IcTypography>\n    <IcSkeleton />\n  </div>\n</ComponentPreview>\n\n## Skeleton details\n\n<ComponentDetails component=\"ic-skeleton\" />\n\n## Variants\n\n### Inherited size from child\n\nexport const snippetsInherited = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-skeleton><div style=\"height:200px;width:450px;\">Test text</div></ic-skeleton>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSkeleton>\n  <div style={{\n  height: \"200px\",\n  width: \"450px\"\n  }}>Test text</div>\n</IcSkeleton>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsInherited}>\n  <IcSkeleton>\n    <div\n      style={{\n        height: \"200px\",\n        width: \"450px\",\n      }}\n    >\n      Test text\n    </div>\n  </IcSkeleton>\n</ComponentPreview>\n\n### Set width and height\n\nexport const snippetsSetWidthAndHeight = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-typography variant=\"h4\">Height and width set with styles</ic-typography>\n<ic-skeleton style=\"height:200px;width:200px;\"></ic-skeleton>\n<ic-typography variant=\"h4\">Height set with styles</ic-typography>\n<ic-skeleton style=\"height:75px;\"></ic-skeleton>\n<ic-typography variant=\"h4\">Width set with styles</ic-typography>\n<ic-skeleton style=\"width:450px;\"></ic-skeleton>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTypography variant=\"h4\">Height and width set with styles</IcTypography>\n<IcSkeleton style={{\nheight: \"200px\",\nwidth: \"200px\"\n}} />\n<IcTypography variant=\"h4\">Height set with styles</IcTypography>\n<IcSkeleton style={{\n  height: \"75px\"\n}} />\n<IcTypography variant=\"h4\">Width set with styles</IcTypography>\n<IcSkeleton style={{\n  width: \"450px\"\n}} />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSetWidthAndHeight}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcTypography variant=\"h4\">Height and width set with styles</IcTypography>\n    <IcSkeleton\n      style={{\n        height: \"200px\",\n        width: \"200px\",\n      }}\n    />\n    <IcTypography variant=\"h4\">Height set with styles</IcTypography>\n    <IcSkeleton\n      style={{\n        height: \"75px\",\n      }}\n    />\n    <IcTypography variant=\"h4\">Width set with styles</IcTypography>\n    <IcSkeleton\n      style={{\n        width: \"450px\",\n      }}\n    />\n  </div>\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-skeleton variant=\"circle\" appearance=\"light\"></ic-skeleton>\n<ic-typography variant=\"caption\">\n  <ic-skeleton variant=\"text\" appearance=\"light\"></ic-skeleton>\n</ic-typography>\n<ic-skeleton appearance=\"light\"></ic-skeleton>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSkeleton variant=\"circle\" appearance=\"light\" />\n<IcTypography variant=\"caption\">\n  <IcSkeleton variant=\"text\" appearance=\"light\" />\n</IcTypography>\n<IcSkeleton appearance=\"light\" />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsLight}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcSkeleton variant=\"circle\" appearance=\"light\" />\n    <IcTypography variant=\"caption\">\n      <IcSkeleton variant=\"text\" appearance=\"light\" />\n    </IcTypography>\n    <IcSkeleton appearance=\"light\" />\n  </div>\n</ComponentPreview>\n\n### Within IcCard component\n\nexport const snippetsInCard = [\n  {\n    language: \"Web component\",\n    snippet: `<div>\n      <div id=\"content-container\"></div>\n      <br />\n      <ic-button variant=\"primary\" id=\"reload\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\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          ></path>\n        </svg>\n        Reload\n      </ic-button>\n    </div>\n    <script>\n     window.onload = function () {\n        document.getElementById(\"content-container\").innerHTML = loading();\n      };\n   const loading = () => {\n        return (\n          <ic-card\n            heading=\"Coffee\"\n            subheading=\"What is coffee?\"\n            message=\"Coffee is a brewed drink.\"\n          >\n            <ic-skeleton\n              slot=\"icon\"\n              variant=\"circle\"\n              style=\"height: 32px; width: 32px;\"\n            />\n            <ic-skeleton\n              slot=\"heading\"\n              variant=\"rectangle\"\n              style=\"height: 32px; width: 130px;\"\n            />\n            <ic-skeleton\n              slot=\"subheading\"\n              variant=\"text\"\n              style=\"height: 18px;  width: 150px;\"\n            />\n            <ic-skeleton\n              slot=\"message\"\n              variant=\"rectangle\"\n              style=\"height: 24px; width: 500px;\"\n            />\n            <ic-skeleton\n              slot=\"interaction-controls\"\n              variant=\"rectangle\"\n              style=\"height: 40px; width: 110px;\"\n            />\n            <ic-skeleton\n              slot=\"interaction-controls\"\n              variant=\"rectangle\"\n              style=\"height: 40px; width: 110px;\"\n            />\n          </ic-card>\n        );\n      };\nconst loaded = () => {\n        return (\n          <ic-card\n            heading=\"Coffee\"\n            subheading=\"What is coffee?\"\n            message=\"Coffee is a brewed drink.\"\n          >\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24px\"\n              viewBox=\"0 0 24 24\"\n              width=\"24px\"\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            <div slot=\"interaction-controls\" style=\"display: flex; gap: 16px;\">\n              <ic-button variant=\"primary\">Learn more</ic-button>\n              <ic-button variant=\"secondary\">Hide</ic-button>\n            </div>\n          </ic-card>\n        );\n      };\n  const btn = document.querySelector(\"#reload\");\n      btn.addEventListener(\"click\", (ev) => {\n        setTimeout(() => {\n          document.getElementById(\"content-container\").innerHTML = loaded();\n        }, 3000);\n      });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const loading = () => {\n  return (\n    <IcCard\n      heading=\"Coffee\"\n      subheading=\"What is coffee?\"\n      message=\"Coffee is a brewed drink.\"\n    >\n      <IcSkeleton\n        slot=\"icon\"\n        variant=\"circle\"\n        style={{\n          height: \"32px\",\n          width: \"32px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"heading\"\n        variant=\"rectangle\"\n        style={{\n          height: \"32px\",\n          width: \"130px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"subheading\"\n        variant=\"text\"\n        style={{\n          height: \"18px\",\n          width: \"150px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"message\"\n        variant=\"rectangle\"\n        style={{\n          height: \"24px\",\n          width: \"500px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"interaction-controls\"\n        variant=\"rectangle\"\n        style={{\n          height: \"40px\",\n          width: \"110px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"interaction-controls\"\n        variant=\"rectangle\"\n        style={{\n          height: \"40px\",\n          width: \"110px\",\n        }}\n      />\n    </IcCard>\n  );\n};\nconst loaded = () => {\n  return (\n    <IcCard\n      heading=\"Coffee\"\n      subheading=\"What is coffee?\"\n      message=\"Coffee is a brewed drink.\"\n    >\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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      </SlottedSVG>\n      <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n        <IcButton variant=\"primary\">Learn more</IcButton>\n        <IcButton variant=\"secondary\">Hide</IcButton>\n      </div>\n    </IcCard>\n  );\n};\n const ContentFunction = () => {\n  const [content, setContent] = React.useState(loading);\n  const loadFunc = () => {\n    setContent(loading);\n    setTimeout(() => {\n      setContent(loaded);\n    }, 3000);\n  };\n  return (\n    <div>\n      {content}\n      <br />\n      <IcButton\n        variant=\"primary\"\n        onClick={() => {\n          loadFunc();\n        }}\n      >\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\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\n      </IcButton>\n    </div>\n  );\n};`,\n  },\n];\n\nexport const loading = () => (\n  <IcCard heading=\"Americano Order\" subheading=\"Name: Michael\">\n    <IcSkeleton\n      slot=\"icon\"\n      variant=\"circle\"\n      style={{\n        height: \"32px\",\n        width: \"32px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"heading\"\n      variant=\"rectangle\"\n      style={{\n        height: \"32px\",\n        width: \"130px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"subheading\"\n      variant=\"text\"\n      style={{\n        height: \"18px\",\n        width: \"150px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"message\"\n      variant=\"rectangle\"\n      style={{\n        height: \"24px\",\n        width: \"500px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"interaction-controls\"\n      variant=\"rectangle\"\n      style={{\n        height: \"40px\",\n        width: \"110px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"interaction-controls\"\n      variant=\"rectangle\"\n      style={{\n        height: \"40px\",\n        width: \"110px\",\n      }}\n    />\n  </IcCard>\n);\n\nexport const loaded = () => (\n  <IcCard\n    heading=\"Americano Order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: double espresso shot & oat milk\"\n  >\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n  </IcCard>\n);\n\nexport const ContentFunction = () => {\n  const [content, setContent] = React.useState(loaded);\n  const loadFunc = () => {\n    setContent(loading);\n    setTimeout(() => {\n      setContent(loaded);\n    }, 3000);\n  };\n  return (\n    <div>\n      {content}\n      <br />\n      <IcButton\n        variant=\"primary\"\n        onClick={() => {\n          loadFunc();\n        }}\n      >\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\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        </SlottedSVG>\n        Refresh\n      </IcButton>\n    </div>\n  );\n};\n\n<ComponentPreview snippets={snippetsInCard}>\n  <ContentFunction />\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcSkeleton,\n  IcTypography,\n  IcCard,\n  IcButton,\n  SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-skeleton variant=\"circle\"></ic-skeleton>\n<ic-typography variant=\"caption\">\n  <ic-skeleton variant=\"text\"></ic-skeleton>\n</ic-typography>\n<ic-skeleton></ic-skeleton>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSkeleton variant=\"circle\" />\n<IcTypography variant=\"caption\">\n  <IcSkeleton variant=\"text\" />\n</IcTypography>\n<IcSkeleton />`,\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={snippets}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcSkeleton variant=\"circle\" />\n    <IcTypography variant=\"caption\">\n      <IcSkeleton variant=\"text\" />\n    </IcTypography>\n    <IcSkeleton />\n  </div>\n</ComponentPreview>\n\n## Skeleton details\n\n<ComponentDetails component=\"ic-skeleton\" />\n\n## Variants\n\n### Inherited size from child\n\nexport const snippetsInherited = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-skeleton><div style=\"height:200px;width:450px;\">Test text</div></ic-skeleton>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSkeleton>\n  <div style={{\n  height: \"200px\",\n  width: \"450px\"\n  }}>Test text</div>\n</IcSkeleton>`,\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={snippetsInherited}>\n  <IcSkeleton>\n    <div\n      style={{\n        height: \"200px\",\n        width: \"450px\",\n      }}\n    >\n      Test text\n    </div>\n  </IcSkeleton>\n</ComponentPreview>\n\n### Set width and height\n\nexport const snippetsSetWidthAndHeight = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-typography variant=\"h4\">Height and width set with styles</ic-typography>\n<ic-skeleton style=\"height:200px;width:200px;\"></ic-skeleton>\n<ic-typography variant=\"h4\">Height set with styles</ic-typography>\n<ic-skeleton style=\"height:75px;\"></ic-skeleton>\n<ic-typography variant=\"h4\">Width set with styles</ic-typography>\n<ic-skeleton style=\"width:450px;\"></ic-skeleton>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTypography variant=\"h4\">Height and width set with styles</IcTypography>\n<IcSkeleton style={{\nheight: \"200px\",\nwidth: \"200px\"\n}} />\n<IcTypography variant=\"h4\">Height set with styles</IcTypography>\n<IcSkeleton style={{\n  height: \"75px\"\n}} />\n<IcTypography variant=\"h4\">Width set with styles</IcTypography>\n<IcSkeleton style={{\n  width: \"450px\"\n}} />`,\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={snippetsSetWidthAndHeight}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcTypography variant=\"h4\">Height and width set with styles</IcTypography>\n    <IcSkeleton\n      style={{\n        height: \"200px\",\n        width: \"200px\",\n      }}\n    />\n    <IcTypography variant=\"h4\">Height set with styles</IcTypography>\n    <IcSkeleton\n      style={{\n        height: \"75px\",\n      }}\n    />\n    <IcTypography variant=\"h4\">Width set with styles</IcTypography>\n    <IcSkeleton\n      style={{\n        width: \"450px\",\n      }}\n    />\n  </div>\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-skeleton variant=\"circle\" appearance=\"light\"></ic-skeleton>\n<ic-typography variant=\"caption\">\n  <ic-skeleton variant=\"text\" appearance=\"light\"></ic-skeleton>\n</ic-typography>\n<ic-skeleton appearance=\"light\"></ic-skeleton>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSkeleton variant=\"circle\" appearance=\"light\" />\n<IcTypography variant=\"caption\">\n  <IcSkeleton variant=\"text\" appearance=\"light\" />\n</IcTypography>\n<IcSkeleton appearance=\"light\" />`,\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={snippetsLight}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcSkeleton variant=\"circle\" appearance=\"light\" />\n    <IcTypography variant=\"caption\">\n      <IcSkeleton variant=\"text\" appearance=\"light\" />\n    </IcTypography>\n    <IcSkeleton appearance=\"light\" />\n  </div>\n</ComponentPreview>\n\n### Within IcCard component\n\nexport const snippetsInCard = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<div>\n      <div id=\"content-container\"></div>\n      <br />\n      <ic-button variant=\"primary\" id=\"reload\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\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          ></path>\n        </svg>\n        Reload\n      </ic-button>\n    </div>\n    <script>\n     window.onload = function () {\n        document.getElementById(\"content-container\").innerHTML = loading();\n      };\n   const loading = () => {\n        return (\n          <ic-card\n            heading=\"Coffee\"\n            subheading=\"What is coffee?\"\n            message=\"Coffee is a brewed drink.\"\n          >\n            <ic-skeleton\n              slot=\"icon\"\n              variant=\"circle\"\n              style=\"height: 32px; width: 32px;\"\n            />\n            <ic-skeleton\n              slot=\"heading\"\n              variant=\"rectangle\"\n              style=\"height: 32px; width: 130px;\"\n            />\n            <ic-skeleton\n              slot=\"subheading\"\n              variant=\"text\"\n              style=\"height: 18px;  width: 150px;\"\n            />\n            <ic-skeleton\n              slot=\"message\"\n              variant=\"rectangle\"\n              style=\"height: 24px; width: 500px;\"\n            />\n            <ic-skeleton\n              slot=\"interaction-controls\"\n              variant=\"rectangle\"\n              style=\"height: 40px; width: 110px;\"\n            />\n            <ic-skeleton\n              slot=\"interaction-controls\"\n              variant=\"rectangle\"\n              style=\"height: 40px; width: 110px;\"\n            />\n          </ic-card>\n        );\n      };\nconst loaded = () => {\n        return (\n          <ic-card\n            heading=\"Coffee\"\n            subheading=\"What is coffee?\"\n            message=\"Coffee is a brewed drink.\"\n          >\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24px\"\n              viewBox=\"0 0 24 24\"\n              width=\"24px\"\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            <div slot=\"interaction-controls\" style=\"display: flex; gap: 16px;\">\n              <ic-button variant=\"primary\">Learn more</ic-button>\n              <ic-button variant=\"secondary\">Hide</ic-button>\n            </div>\n          </ic-card>\n        );\n      };\n  const btn = document.querySelector(\"#reload\");\n      btn.addEventListener(\"click\", (ev) => {\n        setTimeout(() => {\n          document.getElementById(\"content-container\").innerHTML = loaded();\n        }, 3000);\n      });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const loading = () => {\n  return (\n    <IcCard\n      heading=\"Coffee\"\n      subheading=\"What is coffee?\"\n      message=\"Coffee is a brewed drink.\"\n    >\n      <IcSkeleton\n        slot=\"icon\"\n        variant=\"circle\"\n        style={{\n          height: \"32px\",\n          width: \"32px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"heading\"\n        variant=\"rectangle\"\n        style={{\n          height: \"32px\",\n          width: \"130px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"subheading\"\n        variant=\"text\"\n        style={{\n          height: \"18px\",\n          width: \"150px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"message\"\n        variant=\"rectangle\"\n        style={{\n          height: \"24px\",\n          width: \"500px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"interaction-controls\"\n        variant=\"rectangle\"\n        style={{\n          height: \"40px\",\n          width: \"110px\",\n        }}\n      />\n      <IcSkeleton\n        slot=\"interaction-controls\"\n        variant=\"rectangle\"\n        style={{\n          height: \"40px\",\n          width: \"110px\",\n        }}\n      />\n    </IcCard>\n  );\n};\nconst loaded = () => {\n  return (\n    <IcCard\n      heading=\"Coffee\"\n      subheading=\"What is coffee?\"\n      message=\"Coffee is a brewed drink.\"\n    >\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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      </SlottedSVG>\n      <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n        <IcButton variant=\"primary\">Learn more</IcButton>\n        <IcButton variant=\"secondary\">Hide</IcButton>\n      </div>\n    </IcCard>\n  );\n};\n const ContentFunction = () => {\n  const [content, setContent] = React.useState(loading);\n  const loadFunc = () => {\n    setContent(loading);\n    setTimeout(() => {\n      setContent(loaded);\n    }, 3000);\n  };\n  return (\n    <div>\n      {content}\n      <br />\n      <IcButton\n        variant=\"primary\"\n        onClick={() => {\n          loadFunc();\n        }}\n      >\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\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\n      </IcButton>\n    </div>\n  );\n};`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const loading = () => (\n  <IcCard heading=\"Americano Order\" subheading=\"Name: Michael\">\n    <IcSkeleton\n      slot=\"icon\"\n      variant=\"circle\"\n      style={{\n        height: \"32px\",\n        width: \"32px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"heading\"\n      variant=\"rectangle\"\n      style={{\n        height: \"32px\",\n        width: \"130px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"subheading\"\n      variant=\"text\"\n      style={{\n        height: \"18px\",\n        width: \"150px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"message\"\n      variant=\"rectangle\"\n      style={{\n        height: \"24px\",\n        width: \"500px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"interaction-controls\"\n      variant=\"rectangle\"\n      style={{\n        height: \"40px\",\n        width: \"110px\",\n      }}\n    />\n    <IcSkeleton\n      slot=\"interaction-controls\"\n      variant=\"rectangle\"\n      style={{\n        height: \"40px\",\n        width: \"110px\",\n      }}\n    />\n  </IcCard>\n);\n\nexport const loaded = () => (\n  <IcCard\n    heading=\"Americano Order\"\n    subheading=\"Name: Michael\"\n    message=\"Extras: double espresso shot & oat milk\"\n  >\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"16px\" }}>\n      <IcButton variant=\"primary\">Accept</IcButton>\n      <IcButton variant=\"secondary\">Cancel</IcButton>\n    </div>\n  </IcCard>\n);\n\nexport const ContentFunction = () => {\n  const [content, setContent] = React.useState(loaded);\n  const loadFunc = () => {\n    setContent(loading);\n    setTimeout(() => {\n      setContent(loaded);\n    }, 3000);\n  };\n  return (\n    <div>\n      {content}\n      <br />\n      <IcButton\n        variant=\"primary\"\n        onClick={() => {\n          loadFunc();\n        }}\n      >\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\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        </SlottedSVG>\n        Refresh\n      </IcButton>\n    </div>\n  );\n};\n\n<ComponentPreview snippets={snippetsInCard}>\n  <ContentFunction />\n</ComponentPreview>\n",
       "path": "/components/skeleton/code",
       "date": "2023-10-24",
       "title": "Skeleton",
@@ -3118,10 +3118,10 @@
       ],
       "meta": {
         "relativePath": "components/skeleton/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.552Z",
-        "lastModified": "2024-04-08T22:24:28.552Z",
-        "size": 13492,
-        "formattedSize": "13.2 KB"
+        "createdAt": "2024-04-08T22:26:50.784Z",
+        "lastModified": "2024-04-08T22:26:50.784Z",
+        "size": 14882,
+        "formattedSize": "14.5 KB"
       }
     },
     {
@@ -3189,7 +3189,7 @@
     },
     {
       "id": "components__status-tags__codex",
-      "contents": "\nimport { IcStatusTag } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-status-tag label=\"Neutral\" status=\"neutral\"></ic-status-tag>\n<ic-status-tag label=\"Success\" status=\"success\"></ic-status-tag>\n<ic-status-tag label=\"Warning\" status=\"warning\"></ic-status-tag>\n<ic-status-tag label=\"Error\" status=\"danger\"></ic-status-tag>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStatusTag label=\"Neutral\" status=\"neutral\"/>\n<IcStatusTag label=\"Success\" status=\"success\"/>\n<IcStatusTag label=\"Warning\" status=\"warning\"/>\n<IcStatusTag label=\"Error\" status=\"danger\"/>`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} snippets={snippetsDefault}>\n  <IcStatusTag label=\"Neutral\" status=\"neutral\" />\n  <IcStatusTag label=\"Success\" status=\"success\" />\n  <IcStatusTag label=\"Warning\" status=\"warning\" />\n  <IcStatusTag label=\"Error\" status=\"danger\" />\n</ComponentPreview>\n\n## Status tag details\n\n<ComponentDetails component=\"ic-status-tag\" />\n\n## Variants\n\n### Emphasis\n\nexport const snippetsEmphasis = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-status-tag label=\"Neutral\" status=\"neutral\" variant=\"outlined\"></ic-status-tag>\n<ic-status-tag label=\"Success\" status=\"success\" variant=\"outlined\"></ic-status-tag>\n<ic-status-tag label=\"Warning\" status=\"warning\" variant=\"outlined\"></ic-status-tag>\n<ic-status-tag label=\"Error\" status=\"danger\" variant=\"outlined\"></ic-status-tag>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\n<IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\n<IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\n<IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} snippets={snippetsEmphasis}>\n  <IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\n  <IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\n  <IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\n  <IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />\n</ComponentPreview>\n\n### Small\n\nexport const snippetsSmall = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-status-tag label=\"Neutral\" status=\"neutral\" size=\"small\"></ic-status-tag>\n<ic-status-tag label=\"Success\" status=\"success\" size=\"small\"></ic-status-tag>\n<ic-status-tag label=\"Warning\" status=\"warning\" size=\"small\"></ic-status-tag>\n<ic-status-tag label=\"Error\" status=\"danger\" size=\"small\"></ic-status-tag>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\n<IcStatusTag label=\"Success\" status=\"success\" size=\"small\" />\n<IcStatusTag label=\"Warning\" status=\"warning\" size=\"small\" />\n<IcStatusTag label=\"Error\" status=\"danger\" size=\"small\" />`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} snippets={snippetsSmall}>\n  <IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\n  <IcStatusTag label=\"Success\" status=\"success\" size=\"small\" />\n  <IcStatusTag label=\"Warning\" status=\"warning\" size=\"small\" />\n  <IcStatusTag label=\"Error\" status=\"danger\" size=\"small\" />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcStatusTag } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-status-tag label=\"Neutral\" status=\"neutral\"></ic-status-tag>\n<ic-status-tag label=\"Success\" status=\"success\"></ic-status-tag>\n<ic-status-tag label=\"Warning\" status=\"warning\"></ic-status-tag>\n<ic-status-tag label=\"Error\" status=\"danger\"></ic-status-tag>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStatusTag label=\"Neutral\" status=\"neutral\"/>\n<IcStatusTag label=\"Success\" status=\"success\"/>\n<IcStatusTag label=\"Warning\" status=\"warning\"/>\n<IcStatusTag label=\"Error\" status=\"danger\"/>`,\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={{ gap: \"8px\" }} snippets={snippetsDefault}>\n  <IcStatusTag label=\"Neutral\" status=\"neutral\" />\n  <IcStatusTag label=\"Success\" status=\"success\" />\n  <IcStatusTag label=\"Warning\" status=\"warning\" />\n  <IcStatusTag label=\"Error\" status=\"danger\" />\n</ComponentPreview>\n\n## Status tag details\n\n<ComponentDetails component=\"ic-status-tag\" />\n\n## Variants\n\n### Emphasis\n\nexport const snippetsEmphasis = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-status-tag label=\"Neutral\" status=\"neutral\" variant=\"outlined\"></ic-status-tag>\n<ic-status-tag label=\"Success\" status=\"success\" variant=\"outlined\"></ic-status-tag>\n<ic-status-tag label=\"Warning\" status=\"warning\" variant=\"outlined\"></ic-status-tag>\n<ic-status-tag label=\"Error\" status=\"danger\" variant=\"outlined\"></ic-status-tag>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\n<IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\n<IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\n<IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />`,\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={{ gap: \"8px\" }} snippets={snippetsEmphasis}>\n  <IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\n  <IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\n  <IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\n  <IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />\n</ComponentPreview>\n\n### Small\n\nexport const snippetsSmall = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-status-tag label=\"Neutral\" status=\"neutral\" size=\"small\"></ic-status-tag>\n<ic-status-tag label=\"Success\" status=\"success\" size=\"small\"></ic-status-tag>\n<ic-status-tag label=\"Warning\" status=\"warning\" size=\"small\"></ic-status-tag>\n<ic-status-tag label=\"Error\" status=\"danger\" size=\"small\"></ic-status-tag>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\n<IcStatusTag label=\"Success\" status=\"success\" size=\"small\" />\n<IcStatusTag label=\"Warning\" status=\"warning\" size=\"small\" />\n<IcStatusTag label=\"Error\" status=\"danger\" size=\"small\" />`,\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={{ gap: \"8px\" }} snippets={snippetsSmall}>\n  <IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\n  <IcStatusTag label=\"Success\" status=\"success\" size=\"small\" />\n  <IcStatusTag label=\"Warning\" status=\"warning\" size=\"small\" />\n  <IcStatusTag label=\"Error\" status=\"danger\" size=\"small\" />\n</ComponentPreview>\n",
       "path": "/components/status-tag/code",
       "date": "2023-10-24",
       "title": "Status tag",
@@ -3212,10 +3212,10 @@
       ],
       "meta": {
         "relativePath": "components/status-tags/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.552Z",
-        "lastModified": "2024-04-08T22:24:28.552Z",
-        "size": 3729,
-        "formattedSize": "3.6 KB"
+        "createdAt": "2024-04-08T22:26:50.784Z",
+        "lastModified": "2024-04-08T22:26:50.784Z",
+        "size": 4544,
+        "formattedSize": "4.4 KB"
       }
     },
     {
@@ -3283,7 +3283,7 @@
     },
     {
       "id": "components__stepper__codex",
-      "contents": "\nimport { IcStepper, IcStep } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-stepper>\n    <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n    <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n    <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStepper>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcStepper>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n## Step details\n\n<ComponentDetails component=\"ic-step\" />\n\n## Stepper details\n\n<ComponentDetails component=\"ic-stepper\" />\n\n## Variants\n\n### Compact stepper\n\nexport const compactStepper = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-stepper variant=\"compact\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStepper variant=\"compact\">\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n  },\n];\n\n<ComponentPreview snippets={compactStepper}>\n  <IcStepper variant=\"compact\">\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### Left-aligned\n\nexport const leftAligned = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-stepper aligned=\"left\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStepper aligned=\"left\">\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n  },\n];\n\n<ComponentPreview snippets={leftAligned}>\n  <IcStepper aligned=\"left\">\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### With hidden step information\n\nexport const hiddenStepInfo = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-stepper hide-step-info=\"true\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStepper hideStepInfo>\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n  },\n];\n\n<ComponentPreview snippets={hiddenStepInfo}>\n  <IcStepper hideStepInfo>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### With subtitles\n\nexport const withSubtitles = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-stepper>\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step \n    step-title=\"Customise your order\" \n    step-subtitle=\"Optional\" \n    step-type=\"completed\" \n  >\n  </ic-step>\n  <ic-step \n    step-title=\"Pay for order\" \n    step-subtitle=\"We accept all major debit/credit cards\" \n    step-type=\"current\" \n  >\n  </ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStepper>\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep \n    stepTitle=\"Customise your order\" \n    stepSubtitle=\"Optional\" \n    stepType=\"completed\" \n    />\n  <IcStep \n    stepTitle=\"Pay for order\" \n    stepSubtitle=\"We accept all major debit/credit cards\" \n    stepType=\"current\" \n  />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\"/>\n</IcStepper>`,\n  },\n];\n\n<ComponentPreview snippets={withSubtitles}>\n  <IcStepper>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep\n      stepTitle=\"Customise your order\"\n      stepSubtitle=\"Optional\"\n      stepType=\"completed\"\n    />\n    <IcStep\n      stepTitle=\"Pay for order\"\n      stepSubtitle=\"We accept all major debit/credit cards\"\n      stepType=\"current\"\n    />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### Custom connector width\n\nexport const customConnectorWidth = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-stepper connector-width=\"150\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcStepper aligned=\"left\" connectorWidth={150}>\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n  },\n];\n\n<ComponentPreview snippets={customConnectorWidth}>\n  <IcStepper aligned=\"left\" connectorWidth={150}>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcStepper, IcStep } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-stepper>\n    <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n    <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n    <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStepper>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\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={snippets}>\n  <IcStepper>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n## Step details\n\n<ComponentDetails component=\"ic-step\" />\n\n## Stepper details\n\n<ComponentDetails component=\"ic-stepper\" />\n\n## Variants\n\n### Compact stepper\n\nexport const compactStepper = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-stepper variant=\"compact\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStepper variant=\"compact\">\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\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={compactStepper}>\n  <IcStepper variant=\"compact\">\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### Left-aligned\n\nexport const leftAligned = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-stepper aligned=\"left\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStepper aligned=\"left\">\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\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={leftAligned}>\n  <IcStepper aligned=\"left\">\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### With hidden step information\n\nexport const hiddenStepInfo = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-stepper hide-step-info=\"true\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStepper hideStepInfo>\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\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={hiddenStepInfo}>\n  <IcStepper hideStepInfo>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### With subtitles\n\nexport const withSubtitles = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-stepper>\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step \n    step-title=\"Customise your order\" \n    step-subtitle=\"Optional\" \n    step-type=\"completed\" \n  >\n  </ic-step>\n  <ic-step \n    step-title=\"Pay for order\" \n    step-subtitle=\"We accept all major debit/credit cards\" \n    step-type=\"current\" \n  >\n  </ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStepper>\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep \n    stepTitle=\"Customise your order\" \n    stepSubtitle=\"Optional\" \n    stepType=\"completed\" \n    />\n  <IcStep \n    stepTitle=\"Pay for order\" \n    stepSubtitle=\"We accept all major debit/credit cards\" \n    stepType=\"current\" \n  />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\"/>\n</IcStepper>`,\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={withSubtitles}>\n  <IcStepper>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep\n      stepTitle=\"Customise your order\"\n      stepSubtitle=\"Optional\"\n      stepType=\"completed\"\n    />\n    <IcStep\n      stepTitle=\"Pay for order\"\n      stepSubtitle=\"We accept all major debit/credit cards\"\n      stepType=\"current\"\n    />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n\n### Custom connector width\n\nexport const customConnectorWidth = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-stepper connector-width=\"150\">\n  <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n  <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n  <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcStepper aligned=\"left\" connectorWidth={150}>\n  <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n  <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n  <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\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={customConnectorWidth}>\n  <IcStepper aligned=\"left\" connectorWidth={150}>\n    <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n    <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n    <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n  </IcStepper>\n</ComponentPreview>\n",
       "path": "/components/stepper/code",
       "date": "2023-02-03",
       "title": "Stepper",
@@ -3306,10 +3306,10 @@
       ],
       "meta": {
         "relativePath": "components/stepper/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.552Z",
-        "lastModified": "2024-04-08T22:24:28.552Z",
-        "size": 6694,
-        "formattedSize": "6.5 KB"
+        "createdAt": "2024-04-08T22:26:50.784Z",
+        "lastModified": "2024-04-08T22:26:50.784Z",
+        "size": 8362,
+        "formattedSize": "8.2 KB"
       }
     },
     {
@@ -3377,7 +3377,7 @@
     },
     {
       "id": "components__switch__codex",
-      "contents": "\nimport { IcSwitch } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-switch label=\"Coffee preferences\"></ic-switch>\n<script>\n  const switchEl = document.querySelector('ic-switch');\n  switchEl.addEventListener('icChange', (ev) => {\n    console.log({\n      checked: ev.detail.checked,\n      value: ev.detail.value\n    })\n  })\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSwitch\n  label=\"Coffee preferences\"\n  onIcChange={(ev) => console.log({ \n    checked: ev.detail.checked, \n    value: ev.detail.value\n  })}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n  <IcSwitch\n    label=\"Coffee preferences\"\n    onIcChange={(ev) =>\n      console.log({\n        checked: ev.detail.checked,\n        value: ev.detail.value,\n      })\n    }\n  />\n</ComponentPreview>\n\n## Switch details\n\n<ComponentDetails component=\"ic-switch\" />\n\n## Variants\n\n### State\n\nexport const snippetsState = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-switch label=\"Coffee preferences\" show-state=\"true\" ></ic-switch>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSwitch label=\"Coffee preferences\" showState/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsState}>\n  <IcSwitch label=\"Coffee preferences\" showState />\n</ComponentPreview>\n\n### Small\n\nexport const snippetsSmall = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-switch label=\"Coffee preferences\" show-state=\"true\" size=\"small\"></ic-switch>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSwitch label=\"Coffee preferences\" showState size=\"small\"/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n  <IcSwitch label=\"Coffee preferences\" showState size=\"small\" />\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-switch label=\"Coffee preferences\" show-state=\"true\" disabled=\"true\"></ic-switch>\n<ic-switch label=\"Coffee preferences\" show-state=\"true\" disabled=\"true\" checked=\"true\"></ic-switch>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSwitch label=\"Coffee preferences\" showState disabled/>\n<IcSwitch label=\"Coffee preferences\" showState disabled checked/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDisabled}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcSwitch label=\"Coffee preferences\" showState disabled />\n    <IcSwitch label=\"Coffee preferences\" showState disabled checked />\n  </div>\n</ComponentPreview>\n\n### Helper text and right adornment\n\nexport const snippetsHelperAndAdornment = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-switch label=\"Coffee preferences\" helper-text=\"Choose your coffee preferences\">\n  <svg\n    slot=\"right-adornment\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n     <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </svg>\n</ic-switch>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcSwitch label=\"Coffee preferences\" helperText=\"Choose your coffee preferences\">\n  <SlottedSVG\n    slot=\"right-adornment\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </SlottedSVG>\n</IcSwitch>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsHelperAndAdornment}>\n  <IcSwitch\n    label=\"Coffee preferences\"\n    helperText=\"Choose your coffee preferences\"\n  >\n    <svg\n      slot=\"right-adornment\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcSwitch>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcSwitch } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-switch label=\"Coffee preferences\"></ic-switch>\n<script>\n  const switchEl = document.querySelector('ic-switch');\n  switchEl.addEventListener('icChange', (ev) => {\n    console.log({\n      checked: ev.detail.checked,\n      value: ev.detail.value\n    })\n  })\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSwitch\n  label=\"Coffee preferences\"\n  onIcChange={(ev) => console.log({ \n    checked: ev.detail.checked, \n    value: ev.detail.value\n  })}\n/>`,\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={snippetsDefault}>\n  <IcSwitch\n    label=\"Coffee preferences\"\n    onIcChange={(ev) =>\n      console.log({\n        checked: ev.detail.checked,\n        value: ev.detail.value,\n      })\n    }\n  />\n</ComponentPreview>\n\n## Switch details\n\n<ComponentDetails component=\"ic-switch\" />\n\n## Variants\n\n### State\n\nexport const snippetsState = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-switch label=\"Coffee preferences\" show-state=\"true\" ></ic-switch>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSwitch label=\"Coffee preferences\" showState/>`,\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={snippetsState}>\n  <IcSwitch label=\"Coffee preferences\" showState />\n</ComponentPreview>\n\n### Small\n\nexport const snippetsSmall = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-switch label=\"Coffee preferences\" show-state=\"true\" size=\"small\"></ic-switch>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSwitch label=\"Coffee preferences\" showState size=\"small\"/>`,\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={snippetsSmall}>\n  <IcSwitch label=\"Coffee preferences\" showState size=\"small\" />\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-switch label=\"Coffee preferences\" show-state=\"true\" disabled=\"true\"></ic-switch>\n<ic-switch label=\"Coffee preferences\" show-state=\"true\" disabled=\"true\" checked=\"true\"></ic-switch>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSwitch label=\"Coffee preferences\" showState disabled/>\n<IcSwitch label=\"Coffee preferences\" showState disabled checked/>`,\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={snippetsDisabled}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcSwitch label=\"Coffee preferences\" showState disabled />\n    <IcSwitch label=\"Coffee preferences\" showState disabled checked />\n  </div>\n</ComponentPreview>\n\n### Helper text and right adornment\n\nexport const snippetsHelperAndAdornment = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-switch label=\"Coffee preferences\" helper-text=\"Choose your coffee preferences\">\n  <svg\n    slot=\"right-adornment\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n     <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </svg>\n</ic-switch>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcSwitch label=\"Coffee preferences\" helperText=\"Choose your coffee preferences\">\n  <SlottedSVG\n    slot=\"right-adornment\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n  </SlottedSVG>\n</IcSwitch>`,\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={snippetsHelperAndAdornment}>\n  <IcSwitch\n    label=\"Coffee preferences\"\n    helperText=\"Choose your coffee preferences\"\n  >\n    <svg\n      slot=\"right-adornment\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcSwitch>\n</ComponentPreview>\n",
       "path": "/components/switch/code",
       "date": "2023-10-24",
       "title": "Switch",
@@ -3400,10 +3400,10 @@
       ],
       "meta": {
         "relativePath": "components/switch/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.552Z",
-        "lastModified": "2024-04-08T22:24:28.552Z",
-        "size": 4428,
-        "formattedSize": "4.3 KB"
+        "createdAt": "2024-04-08T22:26:50.788Z",
+        "lastModified": "2024-04-08T22:26:50.788Z",
+        "size": 5818,
+        "formattedSize": "5.7 KB"
       }
     },
     {
@@ -3471,7 +3471,7 @@
     },
     {
       "id": "components__tabs__codex",
-      "contents": "\nimport { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab>Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>\n<script>\n  const tabContext = document.querySelector('ic-tab-context');\n  tabContext.addEventListener('icTabSelect', (ev) => console.log(ev.detail.tabIndex))\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTabContext onIcTabSelect={(ev) => console.log(ev.detail.tabIndex)}>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n  <IcTabPanel>Tab Two - Method</IcTabPanel>\n  <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <IcTabContext onIcTabSelect={(ev) => console.log(ev.detail.tabIndex)}>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n## Tab details\n\n<ComponentDetails component=\"ic-tab\" />\n\n## Tab context details\n\n<ComponentDetails component=\"ic-tab-context\" />\n\n## Tab list details\n\n<ComponentDetails component=\"ic-tab-group\" />\n\n## Tab panel details\n\n<ComponentDetails component=\"ic-tab-panel\" />\n\n## Variants\n\n### With icons\n\nexport const withIcons = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>\n      Ingredients\n      <svg \n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n      </svg>\n    </ic-tab>\n    <ic-tab>\n      Method\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n      </svg>\n    </ic-tab>\n    <ic-tab>\n      History\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n      </svg>\n    </ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>\n        Ingredients\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n        </SlottedSVG>\n      </IcTab>\n      <IcTab>\n        Method\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n        </SlottedSVG>\n      </IcTab>\n      <IcTab>\n        History\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n        </SlottedSVG>\n      </IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>`,\n  },\n];\n\n<ComponentPreview snippets={withIcons}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>\n        Ingredients\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n        </svg>\n      </IcTab>\n      <IcTab>\n        Method\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n        </svg>\n      </IcTab>\n      <IcTab>\n        History\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n        </svg>\n      </IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab disabled=\"true\">Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTabContext>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab disabled>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n  <IcTabPanel>Tab Two - Method</IcTabPanel>\n  <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\n  },\n];\n\n<ComponentPreview snippets={disabled}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab disabled>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Light\n\nexport const light = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tab-context appearance=\"light\">\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab>Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTabContext appearance=\"light\">\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n  <IcTabPanel>Tab Two - Method</IcTabPanel>\n  <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\n  },\n];\n\n<ComponentPreview snippets={light} style={{ backgroundColor: \"#2c2f34\" }}>\n  <IcTabContext appearance=\"light\">\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Compact\n\nexport const compact = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tab-context class=\"tabs\">\n    <ic-tab-group label=\"Example tab group\">\n      <ic-tab>Ingredients</ic-tab>\n      <ic-tab>Method</ic-tab>\n      <ic-tab>History</ic-tab>\n      <ic-tab>Drinks</ic-tab>\n      <ic-tab>Recipes</ic-tab>\n    </ic-tab-group>\n    <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n    <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n    <ic-tab-panel>Tab Three - History</ic-tab-panel>\n    <ic-tab-panel>Tab Four - Drinks</ic-tab-panel>\n    <ic-tab-panel>Tab Five - Recipes</ic-tab-panel>\n  <style>\n    .tabs ic-tab-group,\n    .tabs ic-tab-panel {\n      width: 60%;\n      margin-left: auto;\n      margin-right: auto;\n    }\n  </style>\n</ic-tab-context>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const compactStyle = {\n      width: \"60%\",\n      marginLeft: \"auto\",\n      marginRight: \"auto\",\n    }\nreturn (\n  <>\n    <IcTabContext style={compactStyle}>\n        <IcTabGroup label=\"Example tab group\">\n          <IcTab>Ingredients</IcTab>\n          <IcTab>Method</IcTab>\n          <IcTab>History</IcTab>\n          <IcTab>Drinks</IcTab>\n          <IcTab>Recipes</IcTab>\n        </IcTabGroup>\n        <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n        <IcTabPanel>Tab Two - Method</IcTabPanel>\n        <IcTabPanel>Tab Three - History</IcTabPanel>\n        <IcTabPanel>Tab Four - Drinks</IcTabPanel>\n        <IcTabPanel>Tab Five - Recipes</IcTabPanel>\n    </IcTabContext>\n  </>\n);`,\n  },\n];\n\n<ComponentPreview snippets={compact}>\n  <IcTabContext class=\"tabs\">\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n      <IcTab>Drinks</IcTab>\n      <IcTab>Recipes</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n    <IcTabPanel>Tab Four - Drinks</IcTabPanel>\n    <IcTabPanel>Tab Five - Recipes</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Nested Tabs\n\nexport const nested = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab>Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>\n    <ic-tab-context context-id=\"context-nested\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>Espresso</ic-tab>\n        <ic-tab>Water</ic-tab>\n        <ic-tab>Milk</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Nested Tab Panel One - Espresso</ic-tab-panel>\n      <ic-tab-panel>Nested Tab Panel Two - Water</ic-tab-panel>\n      <ic-tab-panel>Nested Tab Panel Three - Milk</ic-tab-panel>\n    </ic-tab-context>\n  </ic-tab-panel>\n  <ic-tab-panel>Outer Tab Panel Two - Method</ic-tab-panel>\n  <ic-tab-panel>Outer Tab Panel Three - History</ic-tab-panel>\n</ic-tab-context>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTabContext>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>\n    <IcTabContext contextId=\"context-nested\">\n      <IcTabGroup label=\"Example tab group\">\n        <IcTab>Espresso</IcTab>\n        <IcTab>Water</IcTab>\n        <IcTab>Milk</IcTab>\n      </IcTabGroup>\n      <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\n      <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\n      <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\n    </IcTabContext>\n  </IcTabPanel>\n  <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\n  <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\n</IcTabContext>`,\n  },\n];\n\n<ComponentPreview snippets={nested}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>\n      <IcTabContext contextId=\"context-nested\">\n        <IcTabGroup label=\"Example tab group\">\n          <IcTab>Espresso</IcTab>\n          <IcTab>Water</IcTab>\n          <IcTab>Milk</IcTab>\n        </IcTabGroup>\n        <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\n        <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\n        <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\n      </IcTabContext>\n    </IcTabPanel>\n    <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\n    <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab>Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>\n<script>\n  const tabContext = document.querySelector('ic-tab-context');\n  tabContext.addEventListener('icTabSelect', (ev) => console.log(ev.detail.tabIndex))\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTabContext onIcTabSelect={(ev) => console.log(ev.detail.tabIndex)}>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n  <IcTabPanel>Tab Two - Method</IcTabPanel>\n  <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\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={snippets}>\n  <IcTabContext onIcTabSelect={(ev) => console.log(ev.detail.tabIndex)}>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n## Tab details\n\n<ComponentDetails component=\"ic-tab\" />\n\n## Tab context details\n\n<ComponentDetails component=\"ic-tab-context\" />\n\n## Tab list details\n\n<ComponentDetails component=\"ic-tab-group\" />\n\n## Tab panel details\n\n<ComponentDetails component=\"ic-tab-panel\" />\n\n## Variants\n\n### With icons\n\nexport const withIcons = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>\n      Ingredients\n      <svg \n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n      </svg>\n    </ic-tab>\n    <ic-tab>\n      Method\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n      </svg>\n    </ic-tab>\n    <ic-tab>\n      History\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n      </svg>\n    </ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>\n        Ingredients\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n        </SlottedSVG>\n      </IcTab>\n      <IcTab>\n        Method\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n        </SlottedSVG>\n      </IcTab>\n      <IcTab>\n        History\n        <SlottedSVG\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n        </SlottedSVG>\n      </IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>`,\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={withIcons}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>\n        Ingredients\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n        </svg>\n      </IcTab>\n      <IcTab>\n        Method\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n        </svg>\n      </IcTab>\n      <IcTab>\n        History\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n        </svg>\n      </IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab disabled=\"true\">Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTabContext>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab disabled>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n  <IcTabPanel>Tab Two - Method</IcTabPanel>\n  <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\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={disabled}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab disabled>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Light\n\nexport const light = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tab-context appearance=\"light\">\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab>Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n  <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n  <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTabContext appearance=\"light\">\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n  <IcTabPanel>Tab Two - Method</IcTabPanel>\n  <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\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={light} style={{ backgroundColor: \"#2c2f34\" }}>\n  <IcTabContext appearance=\"light\">\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Compact\n\nexport const compact = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tab-context class=\"tabs\">\n    <ic-tab-group label=\"Example tab group\">\n      <ic-tab>Ingredients</ic-tab>\n      <ic-tab>Method</ic-tab>\n      <ic-tab>History</ic-tab>\n      <ic-tab>Drinks</ic-tab>\n      <ic-tab>Recipes</ic-tab>\n    </ic-tab-group>\n    <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n    <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n    <ic-tab-panel>Tab Three - History</ic-tab-panel>\n    <ic-tab-panel>Tab Four - Drinks</ic-tab-panel>\n    <ic-tab-panel>Tab Five - Recipes</ic-tab-panel>\n  <style>\n    .tabs ic-tab-group,\n    .tabs ic-tab-panel {\n      width: 60%;\n      margin-left: auto;\n      margin-right: auto;\n    }\n  </style>\n</ic-tab-context>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const compactStyle = {\n      width: \"60%\",\n      marginLeft: \"auto\",\n      marginRight: \"auto\",\n    }\nreturn (\n  <>\n    <IcTabContext style={compactStyle}>\n        <IcTabGroup label=\"Example tab group\">\n          <IcTab>Ingredients</IcTab>\n          <IcTab>Method</IcTab>\n          <IcTab>History</IcTab>\n          <IcTab>Drinks</IcTab>\n          <IcTab>Recipes</IcTab>\n        </IcTabGroup>\n        <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n        <IcTabPanel>Tab Two - Method</IcTabPanel>\n        <IcTabPanel>Tab Three - History</IcTabPanel>\n        <IcTabPanel>Tab Four - Drinks</IcTabPanel>\n        <IcTabPanel>Tab Five - Recipes</IcTabPanel>\n    </IcTabContext>\n  </>\n);`,\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={compact}>\n  <IcTabContext class=\"tabs\">\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n      <IcTab>Drinks</IcTab>\n      <IcTab>Recipes</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n    <IcTabPanel>Tab Two - Method</IcTabPanel>\n    <IcTabPanel>Tab Three - History</IcTabPanel>\n    <IcTabPanel>Tab Four - Drinks</IcTabPanel>\n    <IcTabPanel>Tab Five - Recipes</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n\n### Nested Tabs\n\nexport const nested = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tab-context>\n  <ic-tab-group label=\"Example tab group\">\n    <ic-tab>Ingredients</ic-tab>\n    <ic-tab>Method</ic-tab>\n    <ic-tab>History</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>\n    <ic-tab-context context-id=\"context-nested\">\n      <ic-tab-group label=\"Example tab group\">\n        <ic-tab>Espresso</ic-tab>\n        <ic-tab>Water</ic-tab>\n        <ic-tab>Milk</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Nested Tab Panel One - Espresso</ic-tab-panel>\n      <ic-tab-panel>Nested Tab Panel Two - Water</ic-tab-panel>\n      <ic-tab-panel>Nested Tab Panel Three - Milk</ic-tab-panel>\n    </ic-tab-context>\n  </ic-tab-panel>\n  <ic-tab-panel>Outer Tab Panel Two - Method</ic-tab-panel>\n  <ic-tab-panel>Outer Tab Panel Three - History</ic-tab-panel>\n</ic-tab-context>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTabContext>\n  <IcTabGroup label=\"Example tab group\">\n    <IcTab>Ingredients</IcTab>\n    <IcTab>Method</IcTab>\n    <IcTab>History</IcTab>\n  </IcTabGroup>\n  <IcTabPanel>\n    <IcTabContext contextId=\"context-nested\">\n      <IcTabGroup label=\"Example tab group\">\n        <IcTab>Espresso</IcTab>\n        <IcTab>Water</IcTab>\n        <IcTab>Milk</IcTab>\n      </IcTabGroup>\n      <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\n      <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\n      <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\n    </IcTabContext>\n  </IcTabPanel>\n  <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\n  <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\n</IcTabContext>`,\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={nested}>\n  <IcTabContext>\n    <IcTabGroup label=\"Example tab group\">\n      <IcTab>Ingredients</IcTab>\n      <IcTab>Method</IcTab>\n      <IcTab>History</IcTab>\n    </IcTabGroup>\n    <IcTabPanel>\n      <IcTabContext contextId=\"context-nested\">\n        <IcTabGroup label=\"Example tab group\">\n          <IcTab>Espresso</IcTab>\n          <IcTab>Water</IcTab>\n          <IcTab>Milk</IcTab>\n        </IcTabGroup>\n        <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\n        <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\n        <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\n      </IcTabContext>\n    </IcTabPanel>\n    <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\n    <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\n  </IcTabContext>\n</ComponentPreview>\n",
       "path": "/components/tabs/code",
       "date": "2024-02-02",
       "title": "Tabs",
@@ -3494,10 +3494,10 @@
       ],
       "meta": {
         "relativePath": "components/tabs/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.552Z",
-        "lastModified": "2024-04-08T22:24:28.552Z",
-        "size": 14285,
-        "formattedSize": "14.0 KB"
+        "createdAt": "2024-04-08T22:26:50.788Z",
+        "lastModified": "2024-04-08T22:26:50.788Z",
+        "size": 15953,
+        "formattedSize": "15.6 KB"
       }
     },
     {
@@ -3565,7 +3565,7 @@
     },
     {
       "id": "components__text-field__codex",
-      "contents": "\nimport { IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-text-field \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<script>\n  const textField = document.querySelector('ic-text-field');\n  textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTextField \n  label=\"What is your favourite coffee?\" \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\"\n  onIcChange={(ev) => console.log(ev.detail.value)}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n  <IcTextField\n    label=\"What is your favourite coffee?\"\n    placeholder=\"Please enter…\"\n    helperText=\"Such as Arabica, Robusta or Liberica\"\n    onIcChange={(ev) => console.log(ev.detail.value)}\n  />\n</ComponentPreview>\n\n## Text field details\n\n<ComponentDetails component=\"ic-text-field\" />\n\n## Variants\n\n### With icon, value and max length\n\nexport const snippetsIconValueMaxLength = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-text-field \n  max-length=\"25\" \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" \n  placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\" \n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n  </svg>\n</ic-text-field>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTextField \n  maxLength={25} \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\"\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n  </SlottedSVG>\n</IcTextField>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsIconValueMaxLength}>\n  <IcTextField\n    maxLength={25}\n    value=\"Arabica\"\n    label=\"What is your favourite coffee?\"\n    required\n    placeholder=\"Please enter…\"\n    helperText=\"Such as Arabica, Robusta or Liberica\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcTextField>\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-text-field \n    label=\"What is your favourite coffee?\" \n    required=\"true\" \n    placeholder=\"Please enter…\" \n    disabled=\"true\">\n    <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n  </svg>\n</ic-text-field>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTextField \n    label=\"What is your favourite coffee?\" \n    required \n    placeholder=\"Please enter…\" \n    disabled>\n  <SlottedSVG \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n  </SlottedSVG>\n</IcTextField>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDisabled}>\n  <IcTextField\n    label=\"What is your favourite coffee?\"\n    required\n    placeholder=\"Please enter…\"\n    disabled\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n    </svg>\n  </IcTextField>\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-text-field \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    size=\"small\">\n</ic-text-field>\n<script>\n  const textField = document.querySelector('ic-text-field');\n  textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTextField \n  label=\"What is your favourite coffee?\" \n  placeholder=\"Please enter…\" \n  size=\"small\"\n  onIcChange={(ev) => console.log(ev.detail.value)}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n  <IcTextField\n    label=\"What is your favourite coffee?\"\n    placeholder=\"Please enter…\"\n    size=\"small\"\n    onIcChange={(ev) => console.log(ev.detail.value)}\n  />\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-text-field \n    validation-status=\"success\" \n    validation-text=\"Good choice!\" \n    value=\"Arabica\" max-length=\"25\" \n    label=\"What is your favourite coffee?\" \n    required=\"true\" placeholder=\"Please enter…\" \n    helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<ic-text-field \n  validation-status=\"success\" \n  validation-text=\"Good choice!\" \n  validation-inline=\"true\" \n  value=\"Arabica\" \n  max-length=\"25\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<ic-text-field \n  validation-status=\"warning\" \n  validation-text=\"There’s only a few left! Order now to avoid missing out.\" \n  value=\"Arabica\"\n  max-length=\"25\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" \n  placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<ic-text-field \n  validation-status=\"error\" \n  validation-text=\"now it has really gone to (coffee) pot\" \n  value=\"Tea\" \n  max-length=\"25\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" \n  placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTextField \n    maxLength={25} \n    value=\"Arabica\" \n    label=\"What is your favourite coffee?\" \n    required \n    placeholder=\"Please enter…\" \n    helperText=\"Such as Arabica, Robusta or Liberica\" \n    validationStatus=\"success\" \n    validationText=\"Good choice!\" />\n<IcTextField \n  maxLength={25} \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\" \n  validationStatus=\"success\" \n  validationText=\"Good choice!\" \n  validationInline />\n<IcTextField \n  maxLength={25} \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\" \n  validationStatus=\"warning\" \n  validationText=\"There’s only a few left! Order now to avoid missing out.\" />\n<IcTextField \n  maxLength={25} \n  value=\"Tea\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\" \n  validationStatus=\"error\" \n  validationText=\"Now it has really gone to (coffee) pot\" />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsValidation}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcTextField\n      maxLength={25}\n      value=\"Arabica\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"success\"\n      validationText=\"Good choice!\"\n    />\n    <IcTextField\n      maxLength={25}\n      value=\"Arabica\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"success\"\n      validationText=\"Good choice!\"\n      validationInline\n    />\n    <IcTextField\n      maxLength={25}\n      value=\"Arabica\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"warning\"\n      validationText=\"There’s only a few left! Order now to avoid missing out.\"\n    />\n    <IcTextField\n      maxLength={25}\n      value=\"Tea\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"error\"\n      validationText=\"Now it has really gone to (coffee) pot\"\n    />\n  </div>\n</ComponentPreview>\n\n### With min and max values\n\nIn this example, an error message will display when the input is either below the min value or above the max value. This only affects numeric input fields.\n\nexport const snippetsMinMax = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-text-field\n  label=\"How many coffees do you want?\"\n  helper-text=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n  placeholder=\"Please enter…\" \n  type=\"number\"\n  inputmode=\"numeric\"\n  min=\"1\"\n  max=\"4\"\n  value=\"6\"\n>\n</ic-text-field>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTextField\n  label=\"How many coffees do you want?\"\n  helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n  placeholder=\"Please enter…\" \n  type=\"number\"\n  inputmode=\"numeric\"\n  min=\"1\"\n  max=\"4\"\n  value=\"6\"\n/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsMinMax}>\n  <IcTextField\n    label=\"How many coffees do you want?\"\n    helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n    placeholder=\"Please enter…\"\n    type=\"number\"\n    inputmode=\"numeric\"\n    min=\"1\"\n    max=\"4\"\n    value=\"6\"\n  />\n</ComponentPreview>\n\n### Text area with resize\n\nexport const snippetsTextArea = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-text-field \n    rows=\"6\"\n    resize=\"true\" \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTextField \n    rows={6} \n    resize \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    helperText=\"Such as Arabica, Robusta or Liberica\" />`,\n  },\n];\n\n<ComponentPreview snippets={snippetsTextArea}>\n  <IcTextField\n    rows={6}\n    resize\n    label=\"What is your favourite coffee?\"\n    placeholder=\"Please enter…\"\n    helperText=\"Such as Arabica, Robusta or Liberica\"\n  />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-text-field \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<script>\n  const textField = document.querySelector('ic-text-field');\n  textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTextField \n  label=\"What is your favourite coffee?\" \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\"\n  onIcChange={(ev) => console.log(ev.detail.value)}\n/>`,\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={snippetsDefault}>\n  <IcTextField\n    label=\"What is your favourite coffee?\"\n    placeholder=\"Please enter…\"\n    helperText=\"Such as Arabica, Robusta or Liberica\"\n    onIcChange={(ev) => console.log(ev.detail.value)}\n  />\n</ComponentPreview>\n\n## Text field details\n\n<ComponentDetails component=\"ic-text-field\" />\n\n## Variants\n\n### With icon, value and max length\n\nexport const snippetsIconValueMaxLength = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-text-field \n  max-length=\"25\" \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" \n  placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\" \n>\n  <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n  </svg>\n</ic-text-field>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTextField \n  maxLength={25} \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\"\n>\n  <SlottedSVG\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n  </SlottedSVG>\n</IcTextField>`,\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={snippetsIconValueMaxLength}>\n  <IcTextField\n    maxLength={25}\n    value=\"Arabica\"\n    label=\"What is your favourite coffee?\"\n    required\n    placeholder=\"Please enter…\"\n    helperText=\"Such as Arabica, Robusta or Liberica\"\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n    </svg>\n  </IcTextField>\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-text-field \n    label=\"What is your favourite coffee?\" \n    required=\"true\" \n    placeholder=\"Please enter…\" \n    disabled=\"true\">\n    <svg\n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n  </svg>\n</ic-text-field>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTextField \n    label=\"What is your favourite coffee?\" \n    required \n    placeholder=\"Please enter…\" \n    disabled>\n  <SlottedSVG \n    slot=\"icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n    <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n  </SlottedSVG>\n</IcTextField>`,\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={snippetsDisabled}>\n  <IcTextField\n    label=\"What is your favourite coffee?\"\n    required\n    placeholder=\"Please enter…\"\n    disabled\n  >\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n    </svg>\n  </IcTextField>\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-text-field \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    size=\"small\">\n</ic-text-field>\n<script>\n  const textField = document.querySelector('ic-text-field');\n  textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTextField \n  label=\"What is your favourite coffee?\" \n  placeholder=\"Please enter…\" \n  size=\"small\"\n  onIcChange={(ev) => console.log(ev.detail.value)}\n/>`,\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={snippetsSmall}>\n  <IcTextField\n    label=\"What is your favourite coffee?\"\n    placeholder=\"Please enter…\"\n    size=\"small\"\n    onIcChange={(ev) => console.log(ev.detail.value)}\n  />\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-text-field \n    validation-status=\"success\" \n    validation-text=\"Good choice!\" \n    value=\"Arabica\" max-length=\"25\" \n    label=\"What is your favourite coffee?\" \n    required=\"true\" placeholder=\"Please enter…\" \n    helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<ic-text-field \n  validation-status=\"success\" \n  validation-text=\"Good choice!\" \n  validation-inline=\"true\" \n  value=\"Arabica\" \n  max-length=\"25\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<ic-text-field \n  validation-status=\"warning\" \n  validation-text=\"There’s only a few left! Order now to avoid missing out.\" \n  value=\"Arabica\"\n  max-length=\"25\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" \n  placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>\n<ic-text-field \n  validation-status=\"error\" \n  validation-text=\"now it has really gone to (coffee) pot\" \n  value=\"Tea\" \n  max-length=\"25\" \n  label=\"What is your favourite coffee?\" \n  required=\"true\" \n  placeholder=\"Please enter…\" \n  helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTextField \n    maxLength={25} \n    value=\"Arabica\" \n    label=\"What is your favourite coffee?\" \n    required \n    placeholder=\"Please enter…\" \n    helperText=\"Such as Arabica, Robusta or Liberica\" \n    validationStatus=\"success\" \n    validationText=\"Good choice!\" />\n<IcTextField \n  maxLength={25} \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\" \n  validationStatus=\"success\" \n  validationText=\"Good choice!\" \n  validationInline />\n<IcTextField \n  maxLength={25} \n  value=\"Arabica\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\" \n  validationStatus=\"warning\" \n  validationText=\"There’s only a few left! Order now to avoid missing out.\" />\n<IcTextField \n  maxLength={25} \n  value=\"Tea\" \n  label=\"What is your favourite coffee?\" \n  required \n  placeholder=\"Please enter…\" \n  helperText=\"Such as Arabica, Robusta or Liberica\" \n  validationStatus=\"error\" \n  validationText=\"Now it has really gone to (coffee) pot\" />`,\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={snippetsValidation}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcTextField\n      maxLength={25}\n      value=\"Arabica\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"success\"\n      validationText=\"Good choice!\"\n    />\n    <IcTextField\n      maxLength={25}\n      value=\"Arabica\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"success\"\n      validationText=\"Good choice!\"\n      validationInline\n    />\n    <IcTextField\n      maxLength={25}\n      value=\"Arabica\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"warning\"\n      validationText=\"There’s only a few left! Order now to avoid missing out.\"\n    />\n    <IcTextField\n      maxLength={25}\n      value=\"Tea\"\n      label=\"What is your favourite coffee?\"\n      required\n      placeholder=\"Please enter…\"\n      helperText=\"Such as Arabica, Robusta or Liberica\"\n      validationStatus=\"error\"\n      validationText=\"Now it has really gone to (coffee) pot\"\n    />\n  </div>\n</ComponentPreview>\n\n### With min and max values\n\nIn this example, an error message will display when the input is either below the min value or above the max value. This only affects numeric input fields.\n\nexport const snippetsMinMax = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-text-field\n  label=\"How many coffees do you want?\"\n  helper-text=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n  placeholder=\"Please enter…\" \n  type=\"number\"\n  inputmode=\"numeric\"\n  min=\"1\"\n  max=\"4\"\n  value=\"6\"\n>\n</ic-text-field>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTextField\n  label=\"How many coffees do you want?\"\n  helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n  placeholder=\"Please enter…\" \n  type=\"number\"\n  inputmode=\"numeric\"\n  min=\"1\"\n  max=\"4\"\n  value=\"6\"\n/>`,\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={snippetsMinMax}>\n  <IcTextField\n    label=\"How many coffees do you want?\"\n    helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n    placeholder=\"Please enter…\"\n    type=\"number\"\n    inputmode=\"numeric\"\n    min=\"1\"\n    max=\"4\"\n    value=\"6\"\n  />\n</ComponentPreview>\n\n### Text area with resize\n\nexport const snippetsTextArea = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-text-field \n    rows=\"6\"\n    resize=\"true\" \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    helper-text=\"Such as Arabica, Robusta or Liberica\">\n</ic-text-field>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTextField \n    rows={6} \n    resize \n    label=\"What is your favourite coffee?\" \n    placeholder=\"Please enter…\" \n    helperText=\"Such as Arabica, Robusta or Liberica\" />`,\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={snippetsTextArea}>\n  <IcTextField\n    rows={6}\n    resize\n    label=\"What is your favourite coffee?\"\n    placeholder=\"Please enter…\"\n    helperText=\"Such as Arabica, Robusta or Liberica\"\n  />\n</ComponentPreview>\n",
       "path": "/components/text-field/code",
       "date": "2023-10-25",
       "title": "Text field",
@@ -3588,10 +3588,10 @@
       ],
       "meta": {
         "relativePath": "components/text-field/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.556Z",
-        "lastModified": "2024-04-08T22:24:28.556Z",
-        "size": 11660,
-        "formattedSize": "11.4 KB"
+        "createdAt": "2024-04-08T22:26:50.788Z",
+        "lastModified": "2024-04-08T22:26:50.788Z",
+        "size": 13606,
+        "formattedSize": "13.3 KB"
       }
     },
     {
@@ -3659,7 +3659,7 @@
     },
     {
       "id": "components__toasts__codex",
-      "contents": "\nimport {\n  IcToast,\n  IcToastRegion,\n  IcButton,\n  IcLink,\n  SlottedSVG,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\n\nexport const defaultSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button onclick=\"displayToast()\">Display toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    var toast = document.querySelector(\"#toast-01\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display toast component</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast heading='Your coffee is ready' ref={toastEl} />\n    </IcToastRegion>\n  </>\n)`,\n  },\n];\n\n## Component demo\n\nexport const DefaultToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display toast component</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={defaultSnippet}>\n  <DefaultToast />\n</ComponentPreview>\n\n## Toast region details\n\n<ComponentDetails component=\"ic-toast-region\" />\n\n## Toast details\n\n<ComponentDetails component=\"ic-toast\" />\n\n## Variants\n\n### Displaying toasts\n\nUse the `openToast` prop on the toast region component to display a toast message. Do not use the `setVisible` method on the toast component as this does not work with the toast queuing functionality.\n\n### Queuing toasts\n\nTo view the toasts queuing in the following example, click each button to open a toast and then the dismiss button on the visible toast. Each toast will appear one after the other.\n\nexport const queuingSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button onclick=\"handleClick()\">Display default toast</ic-button>\n<ic-button onclick=\"handleErrorClick()\">Display error toast</ic-button>\n<ic-button onclick=\"handleAutoDismissClick()\">Display auto dismiss toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\n  <ic-toast id=\"toast-02\" heading=\"There is no coffee left\" variant=\"error\"></ic-toast>\n  <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function handleClick() {\n    var toast = document.querySelector(\"#toast-01\");\n    toastRegion.openToast = toast;\n  }\n  function handleErrorClick() {\n    var toast = document.querySelector(\"#toast-02\");\n    toastRegion.openToast = toast;\n  }\n  function handleAutoDismissClick() {\n    var toast = document.querySelector(\"#toast-03\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n};\nconst handleErrorClick = () => {\n  toastRegionEl.current.openToast = errorToastEl.current;\n};\nconst handleAutoDismissClick = () => {\n  toastRegionEl.current.openToast = autoDismissToastEl.current;\n};\nreturn (\n  <>\n    <div style={{ display: \"flex\", gap: \"8px\" }}>\n    <IcButton onClick={handleClick}>Display default toast</IcButton>\n    <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n    <IcButton onClick={handleAutoDismissClick}>Display auto dismiss toast</IcButton>\n    </div>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n      <IcToast heading=\"There is no coffee left\" variant=\"error\" ref={errorToastEl} />\n      <IcToast heading=\"Your coffee is ready\" dismissMode=\"automatic\" autoDismissTimeout={10000} ref={autoDismissToastEl} />\n    </IcToastRegion>\n  </>\n);`,\n  },\n];\n\nexport const QueuingToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const errorToastEl = useRef(null);\n  const autoDismissToastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  const handleErrorClick = () => {\n    toastRegionEl.current.openToast = errorToastEl.current;\n  };\n  const handleAutoDismissClick = () => {\n    toastRegionEl.current.openToast = autoDismissToastEl.current;\n  };\n  return (\n    <>\n      <div style={{ display: \"flex\", gap: \"8px\" }}>\n        <IcButton onClick={handleClick}>Display default toast</IcButton>\n        <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n        <IcButton onClick={handleAutoDismissClick}>\n          Display auto dismiss toast\n        </IcButton>\n      </div>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n        <IcToast\n          heading=\"There is no coffee left\"\n          variant=\"error\"\n          ref={errorToastEl}\n        />\n        <IcToast\n          heading=\"Your coffee is ready\"\n          dismissMode=\"automatic\"\n          autoDismissTimeout={10000}\n          ref={autoDismissToastEl}\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={queuingSnippet}>\n  <QueuingToast />\n</ComponentPreview>\n\n### Status variant\n\nexport const withVariantSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button onclick=\"displayToast()\">Display success toast</ic-button>\n<ic-toast-region>\n  <ic-toast variant=\"success\" id=\"toast-02\" heading=\"Your coffee is ready\" message=\"Please dismiss and collect\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    const successToast = document.querySelector(\"#toast-02\");\n    toastRegion.openToast = successToast;\n  }\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display success toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your coffee is ready'\n        ref={toastEl}\n        message='Please dismiss and collect'\n        variant='success'\n      />\n    </IcToastRegion>\n  </>\n)`,\n  },\n];\n\nexport const WithVariantToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display success toast</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          message=\"Please dismiss and collect\"\n          variant=\"success\"\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={withVariantSnippet}>\n  <WithVariantToast />\n</ComponentPreview>\n\n### Multi-line\n\nexport const withMultilineSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button onclick=\"displayToast()\">Display multi-line toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    const multilineToast = document.querySelector(\"#toast-03\");\n    toastRegion.openToast = multilineToast;\n  }\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display multi-line toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your coffee is ready'\n        ref={toastEl}\n        message='Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.'\n      />\n    </IcToastRegion>\n  </>\n)`,\n  },\n];\n\nexport const MultilineToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display multi-line toast</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={withMultilineSnippet}>\n  <MultilineToast />\n</ComponentPreview>\n\n### Slotted 'action' toast\n\nexport const slottedActionsSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button onclick=\"displayButtonToast()\">Display slotted buttons toast</ic-button>\n<ic-button onclick=\"displayLinkToast()\">Display slotted buttons toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-04\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\n    <ic-button slot='action' appearance='light'>Retry</ic-button>\n  </ic-toast>\n  <ic-toast id=\"toast-05\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\n    <ic-link slot='action' appearance='light'>Retry</ic-link>\n  </ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayButtonToast() {\n    const slottedButtonToast = document.querySelector(\"#toast-04\");\n    toastRegion.openToast = slottedButtonToast;\n  }\n  function displayLinkToast() {\n    const slottedLinkToast = document.querySelector(\"#toast-05\");\n    toastRegion.openToast = slottedLinkToast;\n  }\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n  toastRegionEl.current.openToast = buttonToastEl.current;\n}\nconst handleLinkToastClick = () => {\n  toastRegionEl.current.openToast = linkToastEl.current;\n}\nreturn (\n  <>\n    <div style={{'display': 'flex', 'gap': '8px'}}>\n      <IcButton onClick={handleButtonToastClick}>Display slotted button toast</IcButton>\n      <IcButton onClick={handleLinkToastClick}>Display slotted link toast</IcButton>\n    </div>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your order could not be placed'\n        ref={buttonToastEl}\n        message='Please try again'\n        variant='warning'\n      >\n        <IcButton slot='action' appearance='light'>Retry</IcButton>\n      </IcToast>\n      <IcToast\n        heading='Your order could not be placed'\n        ref={linkToastEl}\n        message='Please try again'\n        variant='warning'\n      >\n        <IcLink href=\"#\" slot=\"action\" appearance=\"light\">Retry</IcLink>\n      </IcToast>\n    </IcToastRegion>\n  </>\n)`,\n  },\n];\n\nexport const SlottedActionsToast = () => {\n  const toastRegionEl = useRef(null);\n  const buttonToastEl = useRef(null);\n  const linkToastEl = useRef(null);\n  const handleButtonToastClick = () => {\n    toastRegionEl.current.openToast = buttonToastEl.current;\n  };\n  const handleLinkToastClick = () => {\n    toastRegionEl.current.openToast = linkToastEl.current;\n  };\n  return (\n    <>\n      <div style={{ display: \"flex\", gap: \"8px\" }}>\n        <IcButton onClick={handleButtonToastClick}>\n          Display slotted button toast\n        </IcButton>\n        <IcButton onClick={handleLinkToastClick}>\n          Display slotted link toast\n        </IcButton>\n      </div>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your order could not be placed\"\n          ref={buttonToastEl}\n          message=\"Please try again\"\n          variant=\"warning\"\n        >\n          <IcButton slot=\"action\" appearance=\"light\">\n            Retry\n          </IcButton>\n        </IcToast>\n        <IcToast\n          heading=\"Your order could not be placed\"\n          ref={linkToastEl}\n          message=\"Please try again\"\n          variant=\"warning\"\n        >\n          <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\n            Retry\n          </IcLink>\n        </IcToast>\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={slottedActionsSnippet}>\n  <SlottedActionsToast />\n</ComponentPreview>\n\n### Auto-dismiss\n\nexport const autoDismissSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-06\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\" variant='info'></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    var toast = document.querySelector(\"#toast-06\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast heading='Your coffee is ready' ref={toastEl} dismissMode=\"automatic\" autoDismissTimeout={10000} variant='info' />\n    </IcToastRegion>\n  </>\n)`,\n  },\n];\n\nexport const AutoDismissToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          dismissMode=\"automatic\"\n          autoDismissTimeout={10000}\n          variant=\"info\"\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={autoDismissSnippet}>\n  <AutoDismissToast />\n</ComponentPreview>\n\n### Custom neutral icon and aria-labels\n\nexport const customIconAriaLabelsSnippet = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-07\" heading=\"Your coffee is ready\" variant='neutral' neutral-icon-aria-label=\"It is time to collect your coffee\" dismiss-button-aria-label=\"Dismiss me\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='neutral-icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    var toast = document.querySelector(\"#toast-07\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display custom icon and aria-label toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your coffee is ready'\n        ref={toastEl}\n        variant='neutral'\n        neutralIconAriaLabel=\"It is time to collect your coffee\"\n        dismissButtonAriaLabel=\"Dismiss me\"\n      >\n        <SlottedSVG slot='neutral-icon'>\n          <title>coffee-outline</title>\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToast>\n    </IcToastRegion>\n  </>\n)`,\n  },\n];\n\nexport const CustomIconAriaLabels = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>\n        Display custom icon and aria-labels toast\n      </IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          variant=\"neutral\"\n          neutralIconAriaLabel=\"It is time to collect your coffee\"\n          dismissButtonAriaLabel=\"Dismiss me\"\n        >\n          <SlottedSVG slot=\"neutral-icon\">\n            <title>coffee-outline</title>\n            <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n          </SlottedSVG>\n        </IcToast>\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={customIconAriaLabelsSnippet}>\n  <CustomIconAriaLabels />\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcToast,\n  IcToastRegion,\n  IcButton,\n  IcLink,\n  SlottedSVG,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\n\nexport const defaultSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"displayToast()\">Display toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    var toast = document.querySelector(\"#toast-01\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display toast component</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast heading='Your coffee is ready' ref={toastEl} />\n    </IcToastRegion>\n  </>\n)`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\n## Component demo\n\nexport const DefaultToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display toast component</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={defaultSnippet}>\n  <DefaultToast />\n</ComponentPreview>\n\n## Toast region details\n\n<ComponentDetails component=\"ic-toast-region\" />\n\n## Toast details\n\n<ComponentDetails component=\"ic-toast\" />\n\n## Variants\n\n### Displaying toasts\n\nUse the `openToast` prop on the toast region component to display a toast message. Do not use the `setVisible` method on the toast component as this does not work with the toast queuing functionality.\n\n### Queuing toasts\n\nTo view the toasts queuing in the following example, click each button to open a toast and then the dismiss button on the visible toast. Each toast will appear one after the other.\n\nexport const queuingSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"handleClick()\">Display default toast</ic-button>\n<ic-button onclick=\"handleErrorClick()\">Display error toast</ic-button>\n<ic-button onclick=\"handleAutoDismissClick()\">Display auto dismiss toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\n  <ic-toast id=\"toast-02\" heading=\"There is no coffee left\" variant=\"error\"></ic-toast>\n  <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function handleClick() {\n    var toast = document.querySelector(\"#toast-01\");\n    toastRegion.openToast = toast;\n  }\n  function handleErrorClick() {\n    var toast = document.querySelector(\"#toast-02\");\n    toastRegion.openToast = toast;\n  }\n  function handleAutoDismissClick() {\n    var toast = document.querySelector(\"#toast-03\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n};\nconst handleErrorClick = () => {\n  toastRegionEl.current.openToast = errorToastEl.current;\n};\nconst handleAutoDismissClick = () => {\n  toastRegionEl.current.openToast = autoDismissToastEl.current;\n};\nreturn (\n  <>\n    <div style={{ display: \"flex\", gap: \"8px\" }}>\n    <IcButton onClick={handleClick}>Display default toast</IcButton>\n    <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n    <IcButton onClick={handleAutoDismissClick}>Display auto dismiss toast</IcButton>\n    </div>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n      <IcToast heading=\"There is no coffee left\" variant=\"error\" ref={errorToastEl} />\n      <IcToast heading=\"Your coffee is ready\" dismissMode=\"automatic\" autoDismissTimeout={10000} ref={autoDismissToastEl} />\n    </IcToastRegion>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const QueuingToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const errorToastEl = useRef(null);\n  const autoDismissToastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  const handleErrorClick = () => {\n    toastRegionEl.current.openToast = errorToastEl.current;\n  };\n  const handleAutoDismissClick = () => {\n    toastRegionEl.current.openToast = autoDismissToastEl.current;\n  };\n  return (\n    <>\n      <div style={{ display: \"flex\", gap: \"8px\" }}>\n        <IcButton onClick={handleClick}>Display default toast</IcButton>\n        <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n        <IcButton onClick={handleAutoDismissClick}>\n          Display auto dismiss toast\n        </IcButton>\n      </div>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n        <IcToast\n          heading=\"There is no coffee left\"\n          variant=\"error\"\n          ref={errorToastEl}\n        />\n        <IcToast\n          heading=\"Your coffee is ready\"\n          dismissMode=\"automatic\"\n          autoDismissTimeout={10000}\n          ref={autoDismissToastEl}\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={queuingSnippet}>\n  <QueuingToast />\n</ComponentPreview>\n\n### Status variant\n\nexport const withVariantSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"displayToast()\">Display success toast</ic-button>\n<ic-toast-region>\n  <ic-toast variant=\"success\" id=\"toast-02\" heading=\"Your coffee is ready\" message=\"Please dismiss and collect\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    const successToast = document.querySelector(\"#toast-02\");\n    toastRegion.openToast = successToast;\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display success toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your coffee is ready'\n        ref={toastEl}\n        message='Please dismiss and collect'\n        variant='success'\n      />\n    </IcToastRegion>\n  </>\n)`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const WithVariantToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display success toast</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          message=\"Please dismiss and collect\"\n          variant=\"success\"\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={withVariantSnippet}>\n  <WithVariantToast />\n</ComponentPreview>\n\n### Multi-line\n\nexport const withMultilineSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"displayToast()\">Display multi-line toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    const multilineToast = document.querySelector(\"#toast-03\");\n    toastRegion.openToast = multilineToast;\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display multi-line toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your coffee is ready'\n        ref={toastEl}\n        message='Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.'\n      />\n    </IcToastRegion>\n  </>\n)`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const MultilineToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display multi-line toast</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={withMultilineSnippet}>\n  <MultilineToast />\n</ComponentPreview>\n\n### Slotted 'action' toast\n\nexport const slottedActionsSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"displayButtonToast()\">Display slotted buttons toast</ic-button>\n<ic-button onclick=\"displayLinkToast()\">Display slotted buttons toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-04\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\n    <ic-button slot='action' appearance='light'>Retry</ic-button>\n  </ic-toast>\n  <ic-toast id=\"toast-05\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\n    <ic-link slot='action' appearance='light'>Retry</ic-link>\n  </ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayButtonToast() {\n    const slottedButtonToast = document.querySelector(\"#toast-04\");\n    toastRegion.openToast = slottedButtonToast;\n  }\n  function displayLinkToast() {\n    const slottedLinkToast = document.querySelector(\"#toast-05\");\n    toastRegion.openToast = slottedLinkToast;\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n  toastRegionEl.current.openToast = buttonToastEl.current;\n}\nconst handleLinkToastClick = () => {\n  toastRegionEl.current.openToast = linkToastEl.current;\n}\nreturn (\n  <>\n    <div style={{'display': 'flex', 'gap': '8px'}}>\n      <IcButton onClick={handleButtonToastClick}>Display slotted button toast</IcButton>\n      <IcButton onClick={handleLinkToastClick}>Display slotted link toast</IcButton>\n    </div>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your order could not be placed'\n        ref={buttonToastEl}\n        message='Please try again'\n        variant='warning'\n      >\n        <IcButton slot='action' appearance='light'>Retry</IcButton>\n      </IcToast>\n      <IcToast\n        heading='Your order could not be placed'\n        ref={linkToastEl}\n        message='Please try again'\n        variant='warning'\n      >\n        <IcLink href=\"#\" slot=\"action\" appearance=\"light\">Retry</IcLink>\n      </IcToast>\n    </IcToastRegion>\n  </>\n)`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const SlottedActionsToast = () => {\n  const toastRegionEl = useRef(null);\n  const buttonToastEl = useRef(null);\n  const linkToastEl = useRef(null);\n  const handleButtonToastClick = () => {\n    toastRegionEl.current.openToast = buttonToastEl.current;\n  };\n  const handleLinkToastClick = () => {\n    toastRegionEl.current.openToast = linkToastEl.current;\n  };\n  return (\n    <>\n      <div style={{ display: \"flex\", gap: \"8px\" }}>\n        <IcButton onClick={handleButtonToastClick}>\n          Display slotted button toast\n        </IcButton>\n        <IcButton onClick={handleLinkToastClick}>\n          Display slotted link toast\n        </IcButton>\n      </div>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your order could not be placed\"\n          ref={buttonToastEl}\n          message=\"Please try again\"\n          variant=\"warning\"\n        >\n          <IcButton slot=\"action\" appearance=\"light\">\n            Retry\n          </IcButton>\n        </IcToast>\n        <IcToast\n          heading=\"Your order could not be placed\"\n          ref={linkToastEl}\n          message=\"Please try again\"\n          variant=\"warning\"\n        >\n          <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\n            Retry\n          </IcLink>\n        </IcToast>\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={slottedActionsSnippet}>\n  <SlottedActionsToast />\n</ComponentPreview>\n\n### Auto-dismiss\n\nexport const autoDismissSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-06\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\" variant='info'></ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    var toast = document.querySelector(\"#toast-06\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast heading='Your coffee is ready' ref={toastEl} dismissMode=\"automatic\" autoDismissTimeout={10000} variant='info' />\n    </IcToastRegion>\n  </>\n)`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const AutoDismissToast = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          dismissMode=\"automatic\"\n          autoDismissTimeout={10000}\n          variant=\"info\"\n        />\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={autoDismissSnippet}>\n  <AutoDismissToast />\n</ComponentPreview>\n\n### Custom neutral icon and aria-labels\n\nexport const customIconAriaLabelsSnippet = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\n<ic-toast-region>\n  <ic-toast id=\"toast-07\" heading=\"Your coffee is ready\" variant='neutral' neutral-icon-aria-label=\"It is time to collect your coffee\" dismiss-button-aria-label=\"Dismiss me\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" slot='neutral-icon' viewBox=\"0 0 24 24\">\n      <title>coffee-outline</title>\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-toast>\n</ic-toast-region>\n<script>\n  const toastRegion = document.querySelector(\"ic-toast-region\");\n  function displayToast() {\n    var toast = document.querySelector(\"#toast-07\");\n    toastRegion.openToast = toast;\n  }\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n  toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n  <>\n    <IcButton onClick={handleClick}>Display custom icon and aria-label toast</IcButton>\n    <IcToastRegion ref={toastRegionEl}>\n      <IcToast\n        heading='Your coffee is ready'\n        ref={toastEl}\n        variant='neutral'\n        neutralIconAriaLabel=\"It is time to collect your coffee\"\n        dismissButtonAriaLabel=\"Dismiss me\"\n      >\n        <SlottedSVG slot='neutral-icon'>\n          <title>coffee-outline</title>\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToast>\n    </IcToastRegion>\n  </>\n)`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const CustomIconAriaLabels = () => {\n  const toastRegionEl = useRef(null);\n  const toastEl = useRef(null);\n  const handleClick = () => {\n    toastRegionEl.current.openToast = toastEl.current;\n  };\n  return (\n    <>\n      <IcButton onClick={handleClick}>\n        Display custom icon and aria-labels toast\n      </IcButton>\n      <IcToastRegion ref={toastRegionEl}>\n        <IcToast\n          heading=\"Your coffee is ready\"\n          ref={toastEl}\n          variant=\"neutral\"\n          neutralIconAriaLabel=\"It is time to collect your coffee\"\n          dismissButtonAriaLabel=\"Dismiss me\"\n        >\n          <SlottedSVG slot=\"neutral-icon\">\n            <title>coffee-outline</title>\n            <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n          </SlottedSVG>\n        </IcToast>\n      </IcToastRegion>\n    </>\n  );\n};\n\n<ComponentPreview snippets={customIconAriaLabelsSnippet}>\n  <CustomIconAriaLabels />\n</ComponentPreview>\n",
       "path": "/components/toast/code",
       "date": "2023-11-09",
       "title": "Toast",
@@ -3682,10 +3682,10 @@
       ],
       "meta": {
         "relativePath": "components/toasts/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.556Z",
-        "lastModified": "2024-04-08T22:24:28.556Z",
-        "size": 18111,
-        "formattedSize": "17.7 KB"
+        "createdAt": "2024-04-08T22:26:50.788Z",
+        "lastModified": "2024-04-08T22:26:50.788Z",
+        "size": 20057,
+        "formattedSize": "19.6 KB"
       }
     },
     {
@@ -3753,7 +3753,7 @@
     },
     {
       "id": "components__toggle-buttons__codex",
-      "contents": "\nimport {\n  IcToggleButton,\n  IcToggleButtonGroup,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button id=\"toggle-btn\" label=\"Switch to oat milk\"></ic-toggle-button>\n<script>\n  const btn = document.querySelector('#toggle-btn');\n  btn.addEventListener(\"icToggleChecked\", function (event) {\n    console.log(event.detail.checked);\n  });\n</script>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButton\n    label=\"Switch to oat milk\"\n    onIcToggleChecked={(event) => console.log(event.detail.checked)}\n/>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n  <IcToggleButton\n    label=\"Switch to oat milk\"\n    onIcToggleChecked={(event) => console.log(event.detail.checked)}\n  />\n</ComponentPreview>\n\n## Toggle button details\n\n<ComponentDetails component=\"ic-toggle-button\" />\n\n## Toggle button group details\n\n<ComponentDetails component=\"ic-toggle-button-group\" />\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button label=\"Switch to oat milk\" disabled=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" disabled=\"true\" toggle-checked=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" loading=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButton label=\"Switch to oat milk\" disabled />\n<IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\n<IcToggleButton label=\"Switch to oat milk\" loading />\n<IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} snippets={snippetsOtherStates}>\n  <IcToggleButton label=\"Switch to oat milk\" disabled />\n  <IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\n  <IcToggleButton label=\"Switch to oat milk\" loading />\n  <IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button label=\"Switch to oat milk\">\n    <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" /></svg>\n</ic-toggle-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButton label=\"Switch to oat milk\">\n    <SlottedSVG\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n</IcToggleButton>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsWithIcon}>\n  <IcToggleButton label=\"Switch to oat milk\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcToggleButton>\n</ComponentPreview>\n\n### Sizing\n\nexport const snippetsSizing = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button label=\"Switch to oat milk\" size=\"small\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" size=\"large\"></ic-toggle-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\n<IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\n<IcToggleButton label=\"Switch to oat milk\" size=\"large\" />`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} snippets={snippetsSizing}>\n  <IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\n  <IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\n  <IcToggleButton label=\"Switch to oat milk\" size=\"large\" />\n</ComponentPreview>\n\n### With badge\n\nexport const snippetsWithBadge = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button label=\"Switch to oat milk\">\n    <ic-badge textLabel=\"1\" slot=\"badge\" variant=\"success\"></ic-badge>\n</ic-toggle-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButton label=\"Switch to oat milk\">\n    <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\n</IcToggleButton>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsWithBadge}>\n  <IcToggleButton label=\"Switch to oat milk\">\n    <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\n  </IcToggleButton>\n</ComponentPreview>\n\n### Dark\n\nexport const snippetsDark = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button label=\"Switch to oat milk\" appearance=\"dark\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"dark\" loading=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"dark\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading toggleChecked />`,\n  },\n];\n\n<ComponentPreview style={{ gap: \"8px\" }} snippets={snippetsDark}>\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\n  <IcToggleButton\n    label=\"Switch to oat milk\"\n    appearance=\"dark\"\n    loading\n    toggleChecked\n  />\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading toggleChecked />`,\n  },\n];\n\n<ComponentPreview\n  style={{ backgroundColor: \"#2c2f34\", gap: \"8px\" }}\n  snippets={snippetsLight}\n>\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\n  <IcToggleButton\n    label=\"Switch to oat milk\"\n    appearance=\"light\"\n    loading\n    toggleChecked\n  />\n</ComponentPreview>\n\n### Full width\n\nexport const snippetsFullWidth = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button-group label=\"Milk selection\" full-width=\"true\" select-type=\"single\">\n  <ic-toggle-button label=\"Switch to oat milk\" ></ic-toggle-button>\n  <ic-toggle-button label=\"Switch to almond milk\" ></ic-toggle-button>\n  <ic-toggle-button label=\"Switch to coconut milk\" ></ic-toggle-button>\n  <ic-toggle-button label=\"Switch to rice milk\" ></ic-toggle-button>\n</ic-toggle-button-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButtonGroup fullWidth selectType=\"single\">\n  <IcToggleButton label=\"Switch to oat milk\"/>\n  <IcToggleButton label=\"Switch to almond milk\"/>\n  <IcToggleButton label=\"Switch to coconut milk\"/>\n  <IcToggleButton label=\"Switch to rice milk\"/>\n</IcToggleButtonGroup>`,\n  },\n];\n\n<ComponentPreview style={{ display: \"block\" }} snippets={snippetsFullWidth}>\n  <IcToggleButtonGroup fullWidth selectType=\"single\">\n    <IcToggleButton label=\"Switch to oat milk\" />\n    <IcToggleButton label=\"Switch to almond milk\" />\n    <IcToggleButton label=\"Switch to coconut milk\" />\n    <IcToggleButton label=\"Switch to rice milk\" />\n  </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon only\n\nexport const snippetsIconOnly = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-toggle-button-group label=\"Coffee icon variants\" variant=\"icon\">\n    <ic-toggle-button accessibleLabel=\"Coffee icon\" variant=\"icon\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n      </ic-toggle-button>\n      <ic-toggle-button accessibleLabel=\"Loading coffee\" variant=\"icon\" loading=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </svg>\n      </ic-toggle-button>\n      <ic-toggle-button accessibleLabel=\"Disabled coffee\" variant=\"icon\"  disabled=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </svg>\n      </ic-toggle-button>\n    </ic-toggle-button-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButtonGroup label=\"Coffee icon variants\" variant=\"icon\">\n      <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\n        <SlottedSVG\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToggleButton>\n      <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\n        <SlottedSVG\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToggleButton>\n      <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\n        <SlottedSVG\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToggleButton>\n  </IcToggleButtonGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsIconOnly}>\n  <IcToggleButtonGroup label=\"Coffee icon variants\" variant=\"icon\">\n    <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon right\n\nexport const snippetsIconRight = [\n  {\n    language: \"Web component\",\n    snippet: ` <ic-toggle-button-group label=\"Milk selection\" icon-placement=\"right\">\n  <ic-toggle-button label=\"Switch to oat milk\">\n     <svg\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-toggle-button>\n  <ic-toggle-button label=\"Switch to almond milk\">\n     <svg\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-toggle-button>\n</ic-toggle-button-group>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"right\">  \n  <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\n    <SlottedSVG\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n</IcToggleButton>\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\n    <SlottedSVG\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcToggleButton>\n</IcToggleButtonGroup>\n`,\n  },\n];\n\n<ComponentPreview snippets={snippetsIconRight}>\n  <IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"right\">\n    <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon top\n\nexport const snippetsIconTopGroup = [\n  {\n    language: \"Web component\",\n    snippet: ` <ic-toggle-button-group label=\"milk selection\" icon-placement=\"top\">\n    <ic-toggle-button label=\"Switch to oat milk\" >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n        >\n            <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </ic-toggle-button>\n    <ic-toggle-button label=\"Switch to almond milk\" >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n        >\n            <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </ic-toggle-button>\n    </ic-toggle-button-group>\n`,\n  },\n  {\n    language: \"React\",\n    snippet: ` <IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"top\">\n    <IcToggleButton label=\"First toggle\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton label=\"Second toggle\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsIconTopGroup}>\n  <IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"top\">\n    <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcToggleButton,\n  IcToggleButtonGroup,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button id=\"toggle-btn\" label=\"Switch to oat milk\"></ic-toggle-button>\n<script>\n  const btn = document.querySelector('#toggle-btn');\n  btn.addEventListener(\"icToggleChecked\", function (event) {\n    console.log(event.detail.checked);\n  });\n</script>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButton\n    label=\"Switch to oat milk\"\n    onIcToggleChecked={(event) => console.log(event.detail.checked)}\n/>`,\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={snippetsDefault}>\n  <IcToggleButton\n    label=\"Switch to oat milk\"\n    onIcToggleChecked={(event) => console.log(event.detail.checked)}\n  />\n</ComponentPreview>\n\n## Toggle button details\n\n<ComponentDetails component=\"ic-toggle-button\" />\n\n## Toggle button group details\n\n<ComponentDetails component=\"ic-toggle-button-group\" />\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button label=\"Switch to oat milk\" disabled=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" disabled=\"true\" toggle-checked=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" loading=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButton label=\"Switch to oat milk\" disabled />\n<IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\n<IcToggleButton label=\"Switch to oat milk\" loading />\n<IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />`,\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={{ gap: \"8px\" }} snippets={snippetsOtherStates}>\n  <IcToggleButton label=\"Switch to oat milk\" disabled />\n  <IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\n  <IcToggleButton label=\"Switch to oat milk\" loading />\n  <IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button label=\"Switch to oat milk\">\n    <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" /></svg>\n</ic-toggle-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButton label=\"Switch to oat milk\">\n    <SlottedSVG\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n</IcToggleButton>`,\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={snippetsWithIcon}>\n  <IcToggleButton label=\"Switch to oat milk\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcToggleButton>\n</ComponentPreview>\n\n### Sizing\n\nexport const snippetsSizing = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button label=\"Switch to oat milk\" size=\"small\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" size=\"large\"></ic-toggle-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\n<IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\n<IcToggleButton label=\"Switch to oat milk\" size=\"large\" />`,\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={{ gap: \"8px\" }} snippets={snippetsSizing}>\n  <IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\n  <IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\n  <IcToggleButton label=\"Switch to oat milk\" size=\"large\" />\n</ComponentPreview>\n\n### With badge\n\nexport const snippetsWithBadge = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button label=\"Switch to oat milk\">\n    <ic-badge text-label=\"1\" slot=\"badge\" variant=\"success\"></ic-badge>\n</ic-toggle-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButton label=\"Switch to oat milk\">\n    <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\n</IcToggleButton>`,\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={snippetsWithBadge}>\n  <IcToggleButton label=\"Switch to oat milk\">\n    <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\n  </IcToggleButton>\n</ComponentPreview>\n\n### Dark\n\nexport const snippetsDark = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button label=\"Switch to oat milk\" appearance=\"dark\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"dark\" loading=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"dark\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading toggleChecked />`,\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={{ gap: \"8px\" }} snippets={snippetsDark}>\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\n  <IcToggleButton\n    label=\"Switch to oat milk\"\n    appearance=\"dark\"\n    loading\n    toggleChecked\n  />\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading toggleChecked />`,\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\n  style={{ backgroundColor: \"#2c2f34\", gap: \"8px\" }}\n  snippets={snippetsLight}\n>\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\n  <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\n  <IcToggleButton\n    label=\"Switch to oat milk\"\n    appearance=\"light\"\n    loading\n    toggleChecked\n  />\n</ComponentPreview>\n\n### Full width\n\nexport const snippetsFullWidth = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button-group label=\"Milk selection\" full-width=\"true\" select-type=\"single\">\n  <ic-toggle-button label=\"Switch to oat milk\" ></ic-toggle-button>\n  <ic-toggle-button label=\"Switch to almond milk\" ></ic-toggle-button>\n  <ic-toggle-button label=\"Switch to coconut milk\" ></ic-toggle-button>\n  <ic-toggle-button label=\"Switch to rice milk\" ></ic-toggle-button>\n</ic-toggle-button-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButtonGroup fullWidth selectType=\"single\">\n  <IcToggleButton label=\"Switch to oat milk\"/>\n  <IcToggleButton label=\"Switch to almond milk\"/>\n  <IcToggleButton label=\"Switch to coconut milk\"/>\n  <IcToggleButton label=\"Switch to rice milk\"/>\n</IcToggleButtonGroup>`,\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={{ display: \"block\" }} snippets={snippetsFullWidth}>\n  <IcToggleButtonGroup fullWidth selectType=\"single\">\n    <IcToggleButton label=\"Switch to oat milk\" />\n    <IcToggleButton label=\"Switch to almond milk\" />\n    <IcToggleButton label=\"Switch to coconut milk\" />\n    <IcToggleButton label=\"Switch to rice milk\" />\n  </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon only\n\nexport const snippetsIconOnly = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-toggle-button-group label=\"Coffee icon variants\" variant=\"icon\">\n    <ic-toggle-button accessibleLabel=\"Coffee icon\" variant=\"icon\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n      </ic-toggle-button>\n      <ic-toggle-button accessibleLabel=\"Loading coffee\" variant=\"icon\" loading=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </svg>\n      </ic-toggle-button>\n      <ic-toggle-button accessibleLabel=\"Disabled coffee\" variant=\"icon\"  disabled=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </svg>\n      </ic-toggle-button>\n    </ic-toggle-button-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButtonGroup label=\"Coffee icon variants\" variant=\"icon\">\n      <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\n        <SlottedSVG\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToggleButton>\n      <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\n        <SlottedSVG\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToggleButton>\n      <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\n        <SlottedSVG\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n        </SlottedSVG>\n      </IcToggleButton>\n  </IcToggleButtonGroup>`,\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={snippetsIconOnly}>\n  <IcToggleButtonGroup label=\"Coffee icon variants\" variant=\"icon\">\n    <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon right\n\nexport const snippetsIconRight = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: ` <ic-toggle-button-group label=\"Milk selection\" icon-placement=\"right\">\n  <ic-toggle-button label=\"Switch to oat milk\">\n     <svg\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-toggle-button>\n  <ic-toggle-button label=\"Switch to almond milk\">\n     <svg\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-toggle-button>\n</ic-toggle-button-group>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"right\">  \n  <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\n    <SlottedSVG\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n</IcToggleButton>\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\n    <SlottedSVG\n     slot=\"icon\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     height=\"24px\"\n     viewBox=\"0 0 24 24\"\n     width=\"24px\"\n     fill=\"#000000\"\n    >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n  </IcToggleButton>\n</IcToggleButtonGroup>\n`,\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={snippetsIconRight}>\n  <IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"right\">\n    <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon top\n\nexport const snippetsIconTopGroup = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: ` <ic-toggle-button-group label=\"milk selection\" icon-placement=\"top\">\n    <ic-toggle-button label=\"Switch to oat milk\" >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n        >\n            <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </ic-toggle-button>\n    <ic-toggle-button label=\"Switch to almond milk\" >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n        >\n            <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </ic-toggle-button>\n    </ic-toggle-button-group>\n`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: ` <IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"top\">\n    <IcToggleButton label=\"First toggle\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton label=\"Second toggle\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\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      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>`,\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={snippetsIconTopGroup}>\n  <IcToggleButtonGroup label=\"Milk selection\" iconPlacement=\"top\">\n    <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n    <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"top\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </SlottedSVG>\n    </IcToggleButton>\n  </IcToggleButtonGroup>\n</ComponentPreview>\n",
       "path": "/components/toggle-button/code",
       "date": "2024-03-08",
       "title": "Toggle button",
@@ -3776,10 +3776,10 @@
       ],
       "meta": {
         "relativePath": "components/toggle-buttons/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.556Z",
-        "lastModified": "2024-04-08T22:24:28.556Z",
-        "size": 20281,
-        "formattedSize": "19.8 KB"
+        "createdAt": "2024-04-08T22:30:28.888Z",
+        "lastModified": "2024-04-08T22:30:28.888Z",
+        "size": 23340,
+        "formattedSize": "22.8 KB"
       }
     },
     {
@@ -3847,7 +3847,7 @@
     },
     {
       "id": "components__tooltips__codex",
-      "contents": "\nimport { IcTooltip, IcButton, IcChip } from \"@ukic/react\";\nimport { useRef } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tooltip target=\"test-button-0\" label=\"Add Americano to favourites\" placement=\"top\">\n  <ic-button id=\"test-button-0\" aria-describedby=\"ic-tooltip-test-button-0\">Add</ic-button>\n</ic-tooltip>\n<ic-tooltip target=\"test-button-1\" label=\"Remove Americano from favourites\" placement=\"bottom\">\n  <ic-button id=\"test-button-1\" aria-describedby=\"ic-tooltip-test-button-1\">Remove</ic-button>\n</ic-tooltip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTooltip target=\"test-button-0\" label=\"Add Americano to favourites\" placement=\"top\">\n  <IcButton id=\"test-button-0\" aria-describedby=\"ic-tooltip-test-button-0\">Add</IcButton>\n</IcTooltip>\n<IcTooltip target=\"test-button-1\" label=\"Remove Americano from favourites\" placement=\"bottom\">\n  <IcButton id=\"test-button-1\" aria-describedby=\"ic-tooltip-test-button-1\">Remove</IcButton>\n</IcTooltip>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcTooltip\n      label=\"Add Americano to favourites\"\n      target=\"test-button-0\"\n      placement=\"top\"\n    >\n      <IcButton id=\"test-button-0\" aria-describedby=\"ic-tooltip-test-button-0\">\n        Add\n      </IcButton>\n    </IcTooltip>\n    <IcTooltip\n      label=\"Remove Americano from favourites\"\n      target=\"test-button-1\"\n      placement=\"bottom\"\n    >\n      <IcButton id=\"test-button-1\" aria-describedby=\"ic-tooltip-test-button-1\">\n        Remove\n      </IcButton>\n    </IcTooltip>\n  </div>\n</ComponentPreview>\n\n## Tooltip details\n\n<ComponentDetails component=\"ic-tooltip\" />\n\n## Variants\n\n### Left placement\n\nexport const snippetsLeft = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"left\">\n  <ic-button id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</ic-button>\n</ic-tooltip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"left\">\n  <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</IcButton>\n</IcTooltip>`,\n  },\n];\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n  }}\n  snippets={snippetsLeft}\n>\n  <IcTooltip\n    label=\"Add Americano to favourites\"\n    target=\"test-button\"\n    placement=\"left\"\n  >\n    <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n      Add\n    </IcButton>\n  </IcTooltip>\n</ComponentPreview>\n\n### Right placement\n\nexport const snippetsRight = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"right\">  \n  <ic-button id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</ic-button>\n</ic-tooltip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"right\">\n  <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</IcButton>\n</IcTooltip>`,\n  },\n];\n\n<ComponentPreview\n  style={{\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n  }}\n  snippets={snippetsRight}\n>\n  <IcTooltip\n    label=\"Add Americano to favourites\"\n    target=\"test-button\"\n    placement=\"right\"\n  >\n    <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n      Add\n    </IcButton>\n  </IcTooltip>\n</ComponentPreview>\n\n### Chip\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-tooltip target=\"small-chip\" label=\"An espresso-based drink\"> \n  <ic-chip id=\"small-chip\" label=\"Americano\" size=\"small\">\n    <svg slot=\"icon\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-chip>\n</ic-tooltip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTooltip target=\"small-chip\" label=\"An espresso-based drink\">\n  <IcChip id=\"small-chip\" label=\"Americano\" size=\"small\">\n    <SlottedSVG slot=\"icon\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    </IcChip>\n</IcTooltip>`,\n  },\n];\n\n<ComponentPreview\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDefault}\n>\n  <IcTooltip target=\"small-chip\" label=\"An espresso-based drink\">\n    <IcChip id=\"small-chip\" label=\"Americano\" size=\"small\">\n      <svg\n        slot=\"icon\"\n        width=\"26\"\n        height=\"26\"\n        viewBox=\"0 0 26 26\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </IcChip>\n  </IcTooltip>\n</ComponentPreview>\n\n### Programmatic trigger\n\nexport const snippetsProgrammatic = [\n  {\n    language: \"Web component\",\n    snippet: `<script>\n  let display = true;\n  document\n    .querySelector(\"#clickMe\")\n    .addEventListener(\"click\", handleDisplay);\n  const tooltip = document.querySelector(\"#targetTooltip\");\n  function handleDisplay() {\n    tooltip.displayTooltip(display, display);\n    display = !display;\n  }\n</script>\n<ic-button id=\"clickMe\">Show tooltip</ic-button>\n<ic-tooltip id=\"targetTooltip\" label=\"Add Americano to favourites\" target=\"test-button\">\n  <ic-button id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n    Add\n  </ic-button>\n</ic-tooltip>`,\n  },\n  {\n    language: \"React\",\n    snippet: `let display = true;\nconst tooltipEl = useRef(null);\nconst handleDisplay = () => {\n  tooltipEl.current.displayTooltip(display, display);\n  display = !display;\n}\nreturn (\n  <>\n    <IcButton onClick={handleDisplay}>Show tooltip</IcButton>\n    <IcTooltip ref={tooltipEl} label=\"Add Americano to favourites\" target=\"test-button\">\n      <IcButton aria-describedby=\"ic-tooltip-test-button\" id=\"test-button\">\n        Add\n      </IcButton>\n    </IcTooltip>\n  </>\n);`,\n  },\n];\n\nexport const TriggerExample = () => {\n  let display = true;\n  const tooltipEl = useRef(null);\n  const handleDisplay = () => {\n    tooltipEl.current.displayTooltip(display, display);\n    display = !display;\n  };\n  return (\n    <>\n      <IcButton onClick={handleDisplay}>Show tooltip</IcButton>\n      <IcTooltip\n        ref={tooltipEl}\n        target=\"test-button\"\n        label=\"Add Americano to favourites\"\n      >\n        <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n          Add\n        </IcButton>\n      </IcTooltip>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsProgrammatic}\n>\n  <TriggerExample />\n</ComponentPreview>\n",
+      "contents": "\nimport { IcTooltip, IcButton, IcChip } 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-tooltip target=\"test-button-0\" label=\"Add Americano to favourites\" placement=\"top\">\n  <ic-button id=\"test-button-0\" aria-describedby=\"ic-tooltip-test-button-0\">Add</ic-button>\n</ic-tooltip>\n<ic-tooltip target=\"test-button-1\" label=\"Remove Americano from favourites\" placement=\"bottom\">\n  <ic-button id=\"test-button-1\" aria-describedby=\"ic-tooltip-test-button-1\">Remove</ic-button>\n</ic-tooltip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTooltip target=\"test-button-0\" label=\"Add Americano to favourites\" placement=\"top\">\n  <IcButton id=\"test-button-0\" aria-describedby=\"ic-tooltip-test-button-0\">Add</IcButton>\n</IcTooltip>\n<IcTooltip target=\"test-button-1\" label=\"Remove Americano from favourites\" placement=\"bottom\">\n  <IcButton id=\"test-button-1\" aria-describedby=\"ic-tooltip-test-button-1\">Remove</IcButton>\n</IcTooltip>`,\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={snippets}>\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n    <IcTooltip\n      label=\"Add Americano to favourites\"\n      target=\"test-button-0\"\n      placement=\"top\"\n    >\n      <IcButton id=\"test-button-0\" aria-describedby=\"ic-tooltip-test-button-0\">\n        Add\n      </IcButton>\n    </IcTooltip>\n    <IcTooltip\n      label=\"Remove Americano from favourites\"\n      target=\"test-button-1\"\n      placement=\"bottom\"\n    >\n      <IcButton id=\"test-button-1\" aria-describedby=\"ic-tooltip-test-button-1\">\n        Remove\n      </IcButton>\n    </IcTooltip>\n  </div>\n</ComponentPreview>\n\n## Tooltip details\n\n<ComponentDetails component=\"ic-tooltip\" />\n\n## Variants\n\n### Left placement\n\nexport const snippetsLeft = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"left\">\n  <ic-button id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</ic-button>\n</ic-tooltip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"left\">\n  <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</IcButton>\n</IcTooltip>`,\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\n  style={{\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n  }}\n  snippets={snippetsLeft}\n>\n  <IcTooltip\n    label=\"Add Americano to favourites\"\n    target=\"test-button\"\n    placement=\"left\"\n  >\n    <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n      Add\n    </IcButton>\n  </IcTooltip>\n</ComponentPreview>\n\n### Right placement\n\nexport const snippetsRight = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"right\">  \n  <ic-button id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</ic-button>\n</ic-tooltip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTooltip target=\"test-button\" label=\"Add Americano to favourites\" placement=\"right\">\n  <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">Add</IcButton>\n</IcTooltip>`,\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\n  style={{\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n  }}\n  snippets={snippetsRight}\n>\n  <IcTooltip\n    label=\"Add Americano to favourites\"\n    target=\"test-button\"\n    placement=\"right\"\n  >\n    <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n      Add\n    </IcButton>\n  </IcTooltip>\n</ComponentPreview>\n\n### Chip\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-tooltip target=\"small-chip\" label=\"An espresso-based drink\"> \n  <ic-chip id=\"small-chip\" label=\"Americano\" size=\"small\">\n    <svg slot=\"icon\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </svg>\n  </ic-chip>\n</ic-tooltip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTooltip target=\"small-chip\" label=\"An espresso-based drink\">\n  <IcChip id=\"small-chip\" label=\"Americano\" size=\"small\">\n    <SlottedSVG slot=\"icon\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n    </SlottedSVG>\n    </IcChip>\n</IcTooltip>`,\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\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsDefault}\n>\n  <IcTooltip target=\"small-chip\" label=\"An espresso-based drink\">\n    <IcChip id=\"small-chip\" label=\"Americano\" size=\"small\">\n      <svg\n        slot=\"icon\"\n        width=\"26\"\n        height=\"26\"\n        viewBox=\"0 0 26 26\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n      </svg>\n    </IcChip>\n  </IcTooltip>\n</ComponentPreview>\n\n### Programmatic trigger\n\nexport const snippetsProgrammatic = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<script>\n  let display = true;\n  document\n    .querySelector(\"#clickMe\")\n    .addEventListener(\"click\", handleDisplay);\n  const tooltip = document.querySelector(\"#targetTooltip\");\n  function handleDisplay() {\n    tooltip.displayTooltip(display, display);\n    display = !display;\n  }\n</script>\n<ic-button id=\"clickMe\">Show tooltip</ic-button>\n<ic-tooltip id=\"targetTooltip\" label=\"Add Americano to favourites\" target=\"test-button\">\n  <ic-button id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n    Add\n  </ic-button>\n</ic-tooltip>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `let display = true;\nconst tooltipEl = useRef(null);\nconst handleDisplay = () => {\n  tooltipEl.current.displayTooltip(display, display);\n  display = !display;\n}\nreturn (\n  <>\n    <IcButton onClick={handleDisplay}>Show tooltip</IcButton>\n    <IcTooltip ref={tooltipEl} label=\"Add Americano to favourites\" target=\"test-button\">\n      <IcButton aria-describedby=\"ic-tooltip-test-button\" id=\"test-button\">\n        Add\n      </IcButton>\n    </IcTooltip>\n  </>\n);`,\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: `{shortCode}`,\n        },\n        {\n          language: \"Javascript\",\n          snippet: `{shortCode}`,\n        },\n      ],\n    },\n  },\n];\n\nexport const TriggerExample = () => {\n  let display = true;\n  const tooltipEl = useRef(null);\n  const handleDisplay = () => {\n    tooltipEl.current.displayTooltip(display, display);\n    display = !display;\n  };\n  return (\n    <>\n      <IcButton onClick={handleDisplay}>Show tooltip</IcButton>\n      <IcTooltip\n        ref={tooltipEl}\n        target=\"test-button\"\n        label=\"Add Americano to favourites\"\n      >\n        <IcButton id=\"test-button\" aria-describedby=\"ic-tooltip-test-button\">\n          Add\n        </IcButton>\n      </IcTooltip>\n    </>\n  );\n};\n\n<ComponentPreview\n  style={{\n    gap: \"8px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  }}\n  snippets={snippetsProgrammatic}\n>\n  <TriggerExample />\n</ComponentPreview>\n",
       "path": "/components/tooltip/code",
       "date": "2024-02-02",
       "title": "Tooltip",
@@ -3870,10 +3870,10 @@
       ],
       "meta": {
         "relativePath": "components/tooltips/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.556Z",
-        "lastModified": "2024-04-08T22:24:28.556Z",
-        "size": 7782,
-        "formattedSize": "7.6 KB"
+        "createdAt": "2024-04-08T22:26:50.792Z",
+        "lastModified": "2024-04-08T22:26:50.792Z",
+        "size": 9172,
+        "formattedSize": "9.0 KB"
       }
     },
     {
@@ -3941,7 +3941,7 @@
     },
     {
       "id": "components__top-nav__codex",
-      "contents": "\nimport {\n  IcTopNavigation,\n  IcSearchBar,\n  IcNavigationButton,\n  IcNavigationItem,\n  IcNavigationGroup,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"#\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"#\"></ic-navigation-item>\n</ic-top-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n  <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n    <SlottedSVG\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n      </SlottedSVG>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n## Top navigation details\n\n<ComponentDetails component=\"ic-top-navigation\" />\n\n## Navigation group details\n\n<ComponentDetails component=\"ic-navigation-group\" />\n\n## Navigation item details\n\n<ComponentDetails component=\"ic-navigation-item\" />\n\n## Navigation button details\n\n<ComponentDetails component=\"ic-navigation-button\" />\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-group slot=\"navigation\" label=\"Get started\">\n    <ic-navigation-item label=\"Tests\" href=\"#\"></ic-navigation-item>\n    <ic-navigation-item label=\"Theme\" href=\"#\"></ic-navigation-item>\n    <ic-navigation-item label=\"Design\" href=\"#\"></ic-navigation-item>\n  </ic-navigation-group>\n  <ic-navigation-group slot=\"navigation\" label=\"Accessibility\">\n    <ic-navigation-item label=\"Introduction\" href=\"#\"></ic-navigation-item>\n    <ic-navigation-item label=\"Accessibility Statement\" href=\"#\"></ic-navigation-item>\n  </ic-navigation-group>\n</ic-top-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationGroup slot=\"navigation\" label=\"Get started\" expandable>\n    <IcNavigationItem label=\"Tests\" href=\"#\" />\n    <IcNavigationItem label=\"Theme\" href=\"#\" />\n    <IcNavigationItem label=\"Design\" href=\"#\" />\n  </IcNavigationGroup>\n  <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\" expandable>\n    <IcNavigationItem label=\"Introduction\" href=\"#\" />\n    <IcNavigationItem label=\"Accessibility statement\" href=\"#\" />\n  </IcNavigationGroup>\n</IcTopNavigation>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsGroupedLinks} style={{ zIndex: \"1\" }}>\n  <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationGroup slot=\"navigation\" label=\"Get started\">\n      <IcNavigationItem\n        label=\"Tests\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n      <IcNavigationItem\n        label=\"Theme\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n      <IcNavigationItem\n        label=\"Design\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n    </IcNavigationGroup>\n    <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\">\n      <IcNavigationItem\n        label=\"Introduction\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n      <IcNavigationItem\n        label=\"Accessibility statement\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n    </IcNavigationGroup>\n  </IcTopNavigation>\n</ComponentPreview>\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" content-aligned=\"center\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-navigation-button label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"/\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"/\"></ic-navigation-item>\n</ic-top-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" contentAligned=\"center\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"/\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\n</IcTopNavigation>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsCentreAligned}>\n  <IcTopNavigation\n    appTitle=\"ICDS\"\n    status=\"alpha\"\n    version=\"v0.0.7\"\n    contentAligned=\"center\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </svg>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### Left aligned\n\nexport const snippetsLeftAligned = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" content-aligned=\"left\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-button label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"/\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"/\"></ic-navigation-item>\n</ic-top-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" contentAligned=\"left\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"/\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\n</IcTopNavigation>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsLeftAligned}>\n  <IcTopNavigation\n    appTitle=\"ICDS\"\n    status=\"alpha\"\n    version=\"v0.0.7\"\n    contentAligned=\"left\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </svg>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### With badge on navigation button\n\nexport const snippetsBadge = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\n    <ic-badge text-label=\"4\" slot=\"badge\" variant=\"light\" position=\"near\"></ic-badge>\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"#\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"#\"></ic-navigation-item>\n</ic-top-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n    <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\"/>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsBadge}>\n  <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n    <SlottedSVG\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n      <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\" />\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n      </SlottedSVG>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### With short app title\n\nView on a small screen size to display the short title in place of the app title.\n\nexport const snippetsShortTitle = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-top-navigation app-title=\"Intelligence Community Design System\" short-app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"/\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"/\"></ic-navigation-item>\n</ic-top-navigation>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTopNavigation appTitle=\"Intelligence Community Design System\" shortAppTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n    <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n    <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n    <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n    <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\n    <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsShortTitle}>\n  <IcTopNavigation\n    appTitle=\"Intelligence Community Design System\"\n    status=\"alpha\"\n    version=\"v0.0.7\"\n    shortAppTitle=\"ICDS\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### With React Router (using slots)\n\nThe following example also demonstrates using a slotted link for app title, short app title, and app icon.\n\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\n\nexport const withReactRouter = [\n  {\n    language: \"React\",\n    snippet: `<MemoryRouter initialEntries={[\"/\"]}>\n  <IcTopNavigation version=\"v0.0.7\">\n    <NavLink to=\"/\" slot=\"app-title\">ICDS Title</NavLink>\n    <NavLink to=\"/\" slot=\"short-app-title\">ICDS</NavLink>\n    <NavLink to=\"/\" slot=\"app-icon\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"inherit\"\n        viewBox=\"0 0 24 24\"\n        width=\"inherit\"\n        fill=\"inherit\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </SlottedSVG>\n    </NavLink>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"button1\" slot=\"buttons\" onClick={() => alert('test')}>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n    </IcNavigationButton>\n    <IcNavigationItem slot=\"navigation\">\n      <NavLink to=\"/\" slot=\"navigation-item\">Get started</NavLink>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"navigation\">\n      <NavLink to=\"/accessibility\" slot=\"navigation-item\">Accessibility</NavLink>\n    </IcNavigationItem>\n  </IcTopNavigation>\n  <main>\n    <IcSectionContainer style={{padding: \"16px\"}}>\n      <Routes>\n        <Route path=\"/\" element={() => <IcTypography>This is the get started page</IcTypography>} />\n        <Route path=\"/accessibility\" element={() => <IcTypography>This page is about accessibility</IcTypography>} />\n      </Routes>\n    </IcSectionContainer>\n  </main>\n</MemoryRouter>\n    `,\n  },\n];\n\n<ComponentPreview\n  snippets={withReactRouter}\n  style={{ display: \"flex\", flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcTopNavigation version=\"v0.0.7\">\n      <NavLink to=\"/\" slot=\"app-title\">\n        ICDS Title\n      </NavLink>\n      <NavLink to=\"/\" slot=\"short-app-title\">\n        ICDS\n      </NavLink>\n      <NavLink to=\"/\" slot=\"app-icon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"inherit\"\n          viewBox=\"0 0 24 24\"\n          width=\"inherit\"\n          fill=\"inherit\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </svg>\n      </NavLink>\n      <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n      <IcNavigationButton\n        label=\"button1\"\n        slot=\"buttons\"\n        onClick={() => alert(\"test\")}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </svg>\n      </IcNavigationButton>\n      <IcNavigationItem slot=\"navigation\">\n        <NavLink to=\"/\" slot=\"navigation-item\">\n          Get started\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"navigation\">\n        <NavLink to=\"/accessibility\" slot=\"navigation-item\">\n          Accessibility\n        </NavLink>\n      </IcNavigationItem>\n    </IcTopNavigation>\n  </MemoryRouter>\n</ComponentPreview>\n",
+      "contents": "\nimport {\n  IcTopNavigation,\n  IcSearchBar,\n  IcNavigationButton,\n  IcNavigationItem,\n  IcNavigationGroup,\n  SlottedSVG,\n  IcBadge,\n} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"#\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"#\"></ic-navigation-item>\n</ic-top-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\n      long: [\n        {\n          language: \"Javascript\",\n          snippet: `js import { IcTopNavigation, IcSearchBar, IcNavigationButton, IcNavigationItem, SlottedSVG } from \"@ukic/react\";`,\n        },\n        {\n          language: \"Typescript\",\n          snippet: `ts import { IcTopNavigation, IcSearchBar, IcNavigationButton, IcNavigationItem, SlottedSVG } from \"@ukic/react\";`,\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n  <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n    <SlottedSVG\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n      </SlottedSVG>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n## Top navigation details\n\n<ComponentDetails component=\"ic-top-navigation\" />\n\n## Navigation group details\n\n<ComponentDetails component=\"ic-navigation-group\" />\n\n## Navigation item details\n\n<ComponentDetails component=\"ic-navigation-item\" />\n\n## Navigation button details\n\n<ComponentDetails component=\"ic-navigation-button\" />\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-group slot=\"navigation\" label=\"Get started\">\n    <ic-navigation-item label=\"Tests\" href=\"#\"></ic-navigation-item>\n    <ic-navigation-item label=\"Theme\" href=\"#\"></ic-navigation-item>\n    <ic-navigation-item label=\"Design\" href=\"#\"></ic-navigation-item>\n  </ic-navigation-group>\n  <ic-navigation-group slot=\"navigation\" label=\"Accessibility\">\n    <ic-navigation-item label=\"Introduction\" href=\"#\"></ic-navigation-item>\n    <ic-navigation-item label=\"Accessibility Statement\" href=\"#\"></ic-navigation-item>\n  </ic-navigation-group>\n</ic-top-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationGroup slot=\"navigation\" label=\"Get started\" expandable>\n    <IcNavigationItem label=\"Tests\" href=\"#\" />\n    <IcNavigationItem label=\"Theme\" href=\"#\" />\n    <IcNavigationItem label=\"Design\" href=\"#\" />\n  </IcNavigationGroup>\n  <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\" expandable>\n    <IcNavigationItem label=\"Introduction\" href=\"#\" />\n    <IcNavigationItem label=\"Accessibility statement\" href=\"#\" />\n  </IcNavigationGroup>\n</IcTopNavigation>`,\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={snippetsGroupedLinks} style={{ zIndex: \"1\" }}>\n  <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationGroup slot=\"navigation\" label=\"Get started\">\n      <IcNavigationItem\n        label=\"Tests\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n      <IcNavigationItem\n        label=\"Theme\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n      <IcNavigationItem\n        label=\"Design\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n    </IcNavigationGroup>\n    <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\">\n      <IcNavigationItem\n        label=\"Introduction\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n      <IcNavigationItem\n        label=\"Accessibility statement\"\n        href=\"#\"\n        onClick={(e) => e.preventDefault()}\n      />\n    </IcNavigationGroup>\n  </IcTopNavigation>\n</ComponentPreview>\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" content-aligned=\"center\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-navigation-button label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"/\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"/\"></ic-navigation-item>\n</ic-top-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" contentAligned=\"center\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"/\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\n</IcTopNavigation>`,\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={snippetsCentreAligned}>\n  <IcTopNavigation\n    appTitle=\"ICDS\"\n    status=\"alpha\"\n    version=\"v0.0.7\"\n    contentAligned=\"center\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </svg>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### Left aligned\n\nexport const snippetsLeftAligned = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" content-aligned=\"left\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-button label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"/\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"/\"></ic-navigation-item>\n</ic-top-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\" contentAligned=\"left\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"/\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\n</IcTopNavigation>`,\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={snippetsLeftAligned}>\n  <IcTopNavigation\n    appTitle=\"ICDS\"\n    status=\"alpha\"\n    version=\"v0.0.7\"\n    contentAligned=\"left\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationButton label=\"button1\" slot=\"buttons\" onclick=\"alert('test')\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </svg>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### With badge on navigation button\n\nexport const snippetsBadge = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-search-bar slot=\"search\" placeholder=\"Search\" label=\"Search\"></ic-search-bar>\n  <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\n    <ic-badge text-label=\"4\" slot=\"badge\" variant=\"light\" position=\"near\"></ic-badge>\n    <svg\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </svg>\n  </ic-navigation-button>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"#\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"#\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"#\"></ic-navigation-item>\n</ic-top-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n    <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\"/>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n    </SlottedSVG>\n  </IcNavigationButton>\n  <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n  <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\n  <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\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={snippetsBadge}>\n  <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n    <SlottedSVG\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n    <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n    <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n      <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\" />\n      <SlottedSVG\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n      </SlottedSVG>\n    </IcNavigationButton>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### With short app title\n\nView on a small screen size to display the short title in place of the app title.\n\nexport const snippetsShortTitle = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-top-navigation app-title=\"Intelligence Community Design System\" short-app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <svg\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </svg>\n  <ic-navigation-item slot=\"navigation\" label=\"Get started\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Accessibility\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Styles\" href=\"/\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Components\" href=\"/\" selected=\"true\"></ic-navigation-item>\n  <ic-navigation-item slot=\"navigation\" label=\"Patterns\" href=\"/\"></ic-navigation-item>\n</ic-top-navigation>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTopNavigation appTitle=\"Intelligence Community Design System\" shortAppTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n  <SlottedSVG\n    slot=\"app-icon\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"#000000\"\n  >\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n  </SlottedSVG>\n    <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n    <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n    <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n    <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\n    <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\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={snippetsShortTitle}>\n  <IcTopNavigation\n    appTitle=\"Intelligence Community Design System\"\n    status=\"alpha\"\n    version=\"v0.0.7\"\n    shortAppTitle=\"ICDS\"\n  >\n    <svg\n      slot=\"app-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </svg>\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Get started\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Accessibility\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Styles\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Components\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n      selected\n    />\n    <IcNavigationItem\n      slot=\"navigation\"\n      label=\"Patterns\"\n      href=\"#\"\n      onClick={(e) => e.preventDefault()}\n    />\n  </IcTopNavigation>\n</ComponentPreview>\n\n### With React Router (using slots)\n\nThe following example also demonstrates using a slotted link for app title, short app title, and app icon.\n\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\n\nexport const withReactRouter = [\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<MemoryRouter initialEntries={[\"/\"]}>\n  <IcTopNavigation version=\"v0.0.7\">\n    <NavLink to=\"/\" slot=\"app-title\">ICDS Title</NavLink>\n    <NavLink to=\"/\" slot=\"short-app-title\">ICDS</NavLink>\n    <NavLink to=\"/\" slot=\"app-icon\">\n      <SlottedSVG\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"inherit\"\n        viewBox=\"0 0 24 24\"\n        width=\"inherit\"\n        fill=\"inherit\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n      </SlottedSVG>\n    </NavLink>\n  <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n  <IcNavigationButton label=\"button1\" slot=\"buttons\" onClick={() => alert('test')}>\n    <SlottedSVG\n      slot=\"icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      fill=\"#000000\"\n    >\n      <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n    </SlottedSVG>\n    </IcNavigationButton>\n    <IcNavigationItem slot=\"navigation\">\n      <NavLink to=\"/\" slot=\"navigation-item\">Get started</NavLink>\n    </IcNavigationItem>\n    <IcNavigationItem slot=\"navigation\">\n      <NavLink to=\"/accessibility\" slot=\"navigation-item\">Accessibility</NavLink>\n    </IcNavigationItem>\n  </IcTopNavigation>\n  <main>\n    <IcSectionContainer style={{padding: \"16px\"}}>\n      <Routes>\n        <Route path=\"/\" element={() => <IcTypography>This is the get started page</IcTypography>} />\n        <Route path=\"/accessibility\" element={() => <IcTypography>This page is about accessibility</IcTypography>} />\n      </Routes>\n    </IcSectionContainer>\n  </main>\n</MemoryRouter>`,\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\n  snippets={withReactRouter}\n  style={{ display: \"flex\", flexDirection: \"column\" }}\n>\n  <MemoryRouter initialEntries={[\"/\"]}>\n    <IcTopNavigation version=\"v0.0.7\">\n      <NavLink to=\"/\" slot=\"app-title\">\n        ICDS Title\n      </NavLink>\n      <NavLink to=\"/\" slot=\"short-app-title\">\n        ICDS\n      </NavLink>\n      <NavLink to=\"/\" slot=\"app-icon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"inherit\"\n          viewBox=\"0 0 24 24\"\n          width=\"inherit\"\n          fill=\"inherit\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </svg>\n      </NavLink>\n      <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n      <IcNavigationButton\n        label=\"button1\"\n        slot=\"buttons\"\n        onClick={() => alert(\"test\")}\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </svg>\n      </IcNavigationButton>\n      <IcNavigationItem slot=\"navigation\">\n        <NavLink to=\"/\" slot=\"navigation-item\">\n          Get started\n        </NavLink>\n      </IcNavigationItem>\n      <IcNavigationItem slot=\"navigation\">\n        <NavLink to=\"/accessibility\" slot=\"navigation-item\">\n          Accessibility\n        </NavLink>\n      </IcNavigationItem>\n    </IcTopNavigation>\n  </MemoryRouter>\n</ComponentPreview>\n",
       "path": "/components/top-navigation/code",
       "date": "2024-02-02",
       "title": "Top navigation",
@@ -3964,10 +3964,10 @@
       ],
       "meta": {
         "relativePath": "components/top-nav/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.560Z",
-        "lastModified": "2024-04-08T22:24:28.560Z",
-        "size": 34621,
-        "formattedSize": "33.8 KB"
+        "createdAt": "2024-04-08T22:26:50.792Z",
+        "lastModified": "2024-04-08T22:26:50.792Z",
+        "size": 36712,
+        "formattedSize": "35.9 KB"
       }
     },
     {
@@ -4036,7 +4036,7 @@
     },
     {
       "id": "components__typography__codex",
-      "contents": "\nimport { IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-typography variant=\"h1\">H1</ic-typography>\n<ic-typography variant=\"h2\">H2</ic-typography>\n<ic-typography variant=\"h3\">H3</ic-typography>\n<ic-typography variant=\"h4\">H4</ic-typography>\n<ic-typography>Body</ic-typography>\n<ic-typography variant=\"subtitle-large\">Subtitle large</ic-typography>\n<ic-typography variant=\"subtitle-small\">Subtitle small</ic-typography>\n<ic-typography variant=\"label\">Label</ic-typography>\n<ic-typography variant=\"label-uppercase\">Label uppercase</ic-typography>\n<ic-typography variant=\"caption\">Caption</ic-typography>\n<ic-typography variant=\"caption-uppercase\">Caption uppercase</ic-typography>\n<ic-typography variant=\"code-large\">Code large</ic-typography>\n<ic-typography variant=\"code-small\">Code small</ic-typography>\n<ic-typography variant=\"code-extra-small\">Code extra small</ic-typography>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTypography variant=\"h1\">H1</IcTypography>\n<IcTypography variant=\"h2\">H2</IcTypography>\n<IcTypography variant=\"h3\">H3</IcTypography>\n<IcTypography variant=\"h4\">H4</IcTypography>\n<IcTypography>Body</IcTypography>\n<IcTypography variant=\"subtitle-large\">Subtitle large</IcTypography>\n<IcTypography variant=\"subtitle-small\">Subtitle small</IcTypography>\n<IcTypography variant=\"label\">Label</IcTypography>\n<IcTypography variant=\"label-uppercase\">Label uppercase</IcTypography>\n<IcTypography variant=\"caption\">Caption</IcTypography>\n<IcTypography variant=\"caption-uppercase\">Caption uppercase</IcTypography>\n<IcTypography variant=\"code-large\">Code large</IcTypography>\n<IcTypography variant=\"code-small\">Code small</IcTypography>\n<IcTypography variant=\"code-extra-small\">Code extra small</IcTypography>`,\n  },\n];\n\n<ComponentPreview snippets={snippets}>\n  <div>\n    <IcTypography variant=\"h1\">H1</IcTypography>\n    <IcTypography variant=\"h2\">H2</IcTypography>\n    <IcTypography variant=\"h3\">H3</IcTypography>\n    <IcTypography variant=\"h4\">H4</IcTypography>\n    <IcTypography>Body</IcTypography>\n    <IcTypography variant=\"subtitle-large\">Subtitle large</IcTypography>\n    <IcTypography variant=\"subtitle-small\">Subtitle small</IcTypography>\n    <IcTypography variant=\"label\">Label</IcTypography>\n    <IcTypography variant=\"label-uppercase\">Label uppercase</IcTypography>\n    <IcTypography variant=\"caption\">Caption</IcTypography>\n    <IcTypography variant=\"caption-uppercase\">Caption uppercase</IcTypography>\n    <IcTypography variant=\"code-large\">Code large</IcTypography>\n    <IcTypography variant=\"code-small\">Code small</IcTypography>\n    <IcTypography variant=\"code-extra-small\">Code extra small</IcTypography>\n  </div>\n</ComponentPreview>\n\n## Typography details\n\n<ComponentDetails component=\"ic-typography\" />\n\n## Variants\n\n### Re-styled typography\n\nAdd a variant to the typography element to change its style. This does not change the semantic level of the typography element.\n\nexport const snippetsRestyled = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-typography variant=\"h2\">\n  <h5>H5 with H2 styling</h5>\n</ic-typography>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTypography variant=\"h2\">\n  <h5>H5 with H2 styling</h5>\n</IcTypography>`,\n  },\n];\n\n<ComponentPreview snippets={snippetsRestyled}>\n  <IcTypography variant=\"h2\">\n    <h5>H5 with H2 styling</h5>\n  </IcTypography>\n</ComponentPreview>\n\n### Vertical margins applied\n\nexport const spacingSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-typography apply-vertical-margins=\"true\">\n  <h5>H5 with margins applied</h5>\n</ic-typography>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTypography applyVerticalMargins>\n  <h5>H5 with margins applied</h5>\n</IcTypography>`,\n  },\n];\n\n<ComponentPreview snippets={spacingSnippets}>\n  <IcTypography applyVerticalMargins>\n    <h5>H5 with margins applied</h5>\n  </IcTypography>\n</ComponentPreview>\n\n### Vertical margins applied on re-styled typography\n\nexport const spacingRestyledSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-typography variant=\"h2\" apply-vertical-margins=\"true\">\n  <h5>H5 with H2 styling and margins applied</h5>\n</ic-typography>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTypography variant=\"h2\" applyVerticalMargins>\n  <h5>H5 with H2 styling and margins applied</h5>\n</IcTypography>`,\n  },\n];\n\n<ComponentPreview snippets={spacingRestyledSnippets}>\n  <IcTypography variant=\"h2\" applyVerticalMargins>\n    <h5>H5 with H2 styling and margins applied</h5>\n  </IcTypography>\n</ComponentPreview>\n\n### Truncation\n\nText can be truncated to a maximum number of lines when using `variant=\"body\"`.\n\nexport const truncationSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-typography max-lines=\"3\" variant=\"body\">\n  Body of text that is truncated to three lines. Click the 'See more' link\n  to expand the text, then click 'See less' to truncate the text once\n  more!\n  <br />\n  Dripper caramelization java saucer grounds galão, mocha, and robusta\n  kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n  lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n  milk seasonal saucer grinder spoon that cultivar strong redeye\n  frappuccino barista extraction redeye mazagran. Grounds, french press\n  dripper organic and foam id saucer, crema, black rich dark, grounds\n  breve coffee steamed caramelization percolator.\n</ic-typography>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTypography maxLines=\"3\" variant=\"body\">\n  Body of text that is truncated to three lines. Click the 'See more' link\n  to expand the text, then click 'See less' to truncate the text once\n  more!\n  <br />\n  Dripper caramelization java saucer grounds galão, mocha, and robusta\n  kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n  lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n  milk seasonal saucer grinder spoon that cultivar strong redeye\n  frappuccino barista extraction redeye mazagran. Grounds, french press\n  dripper organic and foam id saucer, crema, black rich dark, grounds\n  breve coffee steamed caramelization percolator.\n</IcTypography>`,\n  },\n];\n\n<ComponentPreview snippets={truncationSnippets}>\n  <IcTypography maxLines=\"3\" variant=\"body\">\n    Body of text that is truncated to three lines. Click the 'See more' link to\n    expand the text, then click 'See less' to truncate the text once more!\n    <br />\n    Dripper caramelization java saucer grounds galão, mocha, and robusta\n    kopi-luwak, percolator, instant, qui saucer latte in brewed café au lait.\n    Con panna, cup, cream, body americano affogato cup espresso, rich milk\n    seasonal saucer grinder spoon that cultivar strong redeye frappuccino\n    barista extraction redeye mazagran. Grounds, french press dripper organic\n    and foam id saucer, crema, black rich dark, grounds breve coffee steamed\n    caramelization percolator.\n  </IcTypography>\n</ComponentPreview>\n\n### Additional styling\n\nexport const additionalStylingSnippets = [\n  {\n    language: \"Web component\",\n    snippet: `<ic-typography variant=\"h4\" bold=\"true\">Bold</ic-typography>\n<ic-typography variant=\"h4\" italic=\"true\">Italic</ic-typography>\n<ic-typography variant=\"h4\" underline=\"true\">Underline</ic-typography>\n<ic-typography variant=\"h4\" strikethrough=\"true\">Strikethrough</ic-typography>`,\n  },\n  {\n    language: \"React\",\n    snippet: `<IcTypography variant=\"h4\" bold>Bold</IcTypography>\n<IcTypography variant=\"h4\" italic>Italic</IcTypography>\n<IcTypography variant=\"h4\" underline>Underline</IcTypography>\n<IcTypography variant=\"h4\" strikethrough>Strikethrough</IcTypography>`,\n  },\n];\n\n<ComponentPreview snippets={additionalStylingSnippets}>\n  <div>\n    <IcTypography variant=\"h4\" bold>\n      Bold\n    </IcTypography>\n    <IcTypography variant=\"h4\" italic>\n      Italic\n    </IcTypography>\n    <IcTypography variant=\"h4\" underline>\n      Underline\n    </IcTypography>\n    <IcTypography variant=\"h4\" strikethrough>\n      Strikethrough\n    </IcTypography>\n  </div>\n</ComponentPreview>\n",
+      "contents": "\nimport { IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-typography variant=\"h1\">H1</ic-typography>\n<ic-typography variant=\"h2\">H2</ic-typography>\n<ic-typography variant=\"h3\">H3</ic-typography>\n<ic-typography variant=\"h4\">H4</ic-typography>\n<ic-typography>Body</ic-typography>\n<ic-typography variant=\"subtitle-large\">Subtitle large</ic-typography>\n<ic-typography variant=\"subtitle-small\">Subtitle small</ic-typography>\n<ic-typography variant=\"label\">Label</ic-typography>\n<ic-typography variant=\"label-uppercase\">Label uppercase</ic-typography>\n<ic-typography variant=\"caption\">Caption</ic-typography>\n<ic-typography variant=\"caption-uppercase\">Caption uppercase</ic-typography>\n<ic-typography variant=\"code-large\">Code large</ic-typography>\n<ic-typography variant=\"code-small\">Code small</ic-typography>\n<ic-typography variant=\"code-extra-small\">Code extra small</ic-typography>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTypography variant=\"h1\">H1</IcTypography>\n<IcTypography variant=\"h2\">H2</IcTypography>\n<IcTypography variant=\"h3\">H3</IcTypography>\n<IcTypography variant=\"h4\">H4</IcTypography>\n<IcTypography>Body</IcTypography>\n<IcTypography variant=\"subtitle-large\">Subtitle large</IcTypography>\n<IcTypography variant=\"subtitle-small\">Subtitle small</IcTypography>\n<IcTypography variant=\"label\">Label</IcTypography>\n<IcTypography variant=\"label-uppercase\">Label uppercase</IcTypography>\n<IcTypography variant=\"caption\">Caption</IcTypography>\n<IcTypography variant=\"caption-uppercase\">Caption uppercase</IcTypography>\n<IcTypography variant=\"code-large\">Code large</IcTypography>\n<IcTypography variant=\"code-small\">Code small</IcTypography>\n<IcTypography variant=\"code-extra-small\">Code extra small</IcTypography>`,\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={snippets}>\n  <div>\n    <IcTypography variant=\"h1\">H1</IcTypography>\n    <IcTypography variant=\"h2\">H2</IcTypography>\n    <IcTypography variant=\"h3\">H3</IcTypography>\n    <IcTypography variant=\"h4\">H4</IcTypography>\n    <IcTypography>Body</IcTypography>\n    <IcTypography variant=\"subtitle-large\">Subtitle large</IcTypography>\n    <IcTypography variant=\"subtitle-small\">Subtitle small</IcTypography>\n    <IcTypography variant=\"label\">Label</IcTypography>\n    <IcTypography variant=\"label-uppercase\">Label uppercase</IcTypography>\n    <IcTypography variant=\"caption\">Caption</IcTypography>\n    <IcTypography variant=\"caption-uppercase\">Caption uppercase</IcTypography>\n    <IcTypography variant=\"code-large\">Code large</IcTypography>\n    <IcTypography variant=\"code-small\">Code small</IcTypography>\n    <IcTypography variant=\"code-extra-small\">Code extra small</IcTypography>\n  </div>\n</ComponentPreview>\n\n## Typography details\n\n<ComponentDetails component=\"ic-typography\" />\n\n## Variants\n\n### Re-styled typography\n\nAdd a variant to the typography element to change its style. This does not change the semantic level of the typography element.\n\nexport const snippetsRestyled = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-typography variant=\"h2\">\n  <h5>H5 with H2 styling</h5>\n</ic-typography>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTypography variant=\"h2\">\n  <h5>H5 with H2 styling</h5>\n</IcTypography>`,\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={snippetsRestyled}>\n  <IcTypography variant=\"h2\">\n    <h5>H5 with H2 styling</h5>\n  </IcTypography>\n</ComponentPreview>\n\n### Vertical margins applied\n\nexport const spacingSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-typography apply-vertical-margins=\"true\">\n  <h5>H5 with margins applied</h5>\n</ic-typography>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTypography applyVerticalMargins>\n  <h5>H5 with margins applied</h5>\n</IcTypography>`,\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={spacingSnippets}>\n  <IcTypography applyVerticalMargins>\n    <h5>H5 with margins applied</h5>\n  </IcTypography>\n</ComponentPreview>\n\n### Vertical margins applied on re-styled typography\n\nexport const spacingRestyledSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-typography variant=\"h2\" apply-vertical-margins=\"true\">\n  <h5>H5 with H2 styling and margins applied</h5>\n</ic-typography>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTypography variant=\"h2\" applyVerticalMargins>\n  <h5>H5 with H2 styling and margins applied</h5>\n</IcTypography>`,\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={spacingRestyledSnippets}>\n  <IcTypography variant=\"h2\" applyVerticalMargins>\n    <h5>H5 with H2 styling and margins applied</h5>\n  </IcTypography>\n</ComponentPreview>\n\n### Truncation\n\nText can be truncated to a maximum number of lines when using `variant=\"body\"`.\n\nexport const truncationSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-typography max-lines=\"3\" variant=\"body\">\n  Body of text that is truncated to three lines. Click the 'See more' link\n  to expand the text, then click 'See less' to truncate the text once\n  more!\n  <br />\n  Dripper caramelization java saucer grounds galão, mocha, and robusta\n  kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n  lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n  milk seasonal saucer grinder spoon that cultivar strong redeye\n  frappuccino barista extraction redeye mazagran. Grounds, french press\n  dripper organic and foam id saucer, crema, black rich dark, grounds\n  breve coffee steamed caramelization percolator.\n</ic-typography>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTypography maxLines=\"3\" variant=\"body\">\n  Body of text that is truncated to three lines. Click the 'See more' link\n  to expand the text, then click 'See less' to truncate the text once\n  more!\n  <br />\n  Dripper caramelization java saucer grounds galão, mocha, and robusta\n  kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n  lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n  milk seasonal saucer grinder spoon that cultivar strong redeye\n  frappuccino barista extraction redeye mazagran. Grounds, french press\n  dripper organic and foam id saucer, crema, black rich dark, grounds\n  breve coffee steamed caramelization percolator.\n</IcTypography>`,\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={truncationSnippets}>\n  <IcTypography maxLines=\"3\" variant=\"body\">\n    Body of text that is truncated to three lines. Click the 'See more' link to\n    expand the text, then click 'See less' to truncate the text once more!\n    <br />\n    Dripper caramelization java saucer grounds galão, mocha, and robusta\n    kopi-luwak, percolator, instant, qui saucer latte in brewed café au lait.\n    Con panna, cup, cream, body americano affogato cup espresso, rich milk\n    seasonal saucer grinder spoon that cultivar strong redeye frappuccino\n    barista extraction redeye mazagran. Grounds, french press dripper organic\n    and foam id saucer, crema, black rich dark, grounds breve coffee steamed\n    caramelization percolator.\n  </IcTypography>\n</ComponentPreview>\n\n### Additional styling\n\nexport const additionalStylingSnippets = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      short: `<ic-typography variant=\"h4\" bold=\"true\">Bold</ic-typography>\n<ic-typography variant=\"h4\" italic=\"true\">Italic</ic-typography>\n<ic-typography variant=\"h4\" underline=\"true\">Underline</ic-typography>\n<ic-typography variant=\"h4\" strikethrough=\"true\">Strikethrough</ic-typography>`,\n      long: `{shortCode}`,\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      short: `<IcTypography variant=\"h4\" bold>Bold</IcTypography>\n<IcTypography variant=\"h4\" italic>Italic</IcTypography>\n<IcTypography variant=\"h4\" underline>Underline</IcTypography>\n<IcTypography variant=\"h4\" strikethrough>Strikethrough</IcTypography>`,\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={additionalStylingSnippets}>\n  <div>\n    <IcTypography variant=\"h4\" bold>\n      Bold\n    </IcTypography>\n    <IcTypography variant=\"h4\" italic>\n      Italic\n    </IcTypography>\n    <IcTypography variant=\"h4\" underline>\n      Underline\n    </IcTypography>\n    <IcTypography variant=\"h4\" strikethrough>\n      Strikethrough\n    </IcTypography>\n  </div>\n</ComponentPreview>\nimport {createWebComponentsIndexHTML} from \"../../patterns/components/StackblitzButton/stackblitz-helpers\"\n",
       "path": "/components/typography/code",
       "date": "2023-11-27",
       "title": "Typography",
@@ -4060,10 +4060,10 @@
       ],
       "meta": {
         "relativePath": "components/typography/code.mdx",
-        "createdAt": "2024-04-08T22:24:28.560Z",
-        "lastModified": "2024-04-08T22:24:28.560Z",
-        "size": 8635,
-        "formattedSize": "8.4 KB"
+        "createdAt": "2024-04-08T22:26:50.796Z",
+        "lastModified": "2024-04-08T22:26:50.796Z",
+        "size": 10410,
+        "formattedSize": "10.2 KB"
       }
     },
     {
@@ -4552,7 +4552,7 @@
     },
     {
       "id": "patterns__side-navigation-layoutx",
-      "contents": "\nimport { IcLink } from \"@ukic/react\";\nimport {\n  createReactAppTsx,\n  createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\nimport sideNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-side-navigation-layout.png\";\n\n## Introduction\n\nexport const snippetsSideNav = [\n  {\n    language: \"Web component\",\n    snippet: createWebComponentsIndexHTML(`<div class=\"parent-div\">\n      <ic-classification-banner></ic-classification-banner>\n      <ic-side-navigation\n        app-title=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,17H14V7H10V9H12\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15H11V13H13A2,2 0 0,0 15,11V9C15,7.89 14.1,7 13,7H9V9H13V11H11A2,2 0 0,0 9,13V17H15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9C15,7.89 14.1,7 13,7H9V9H13V11H11V13H13V15H9V17H13A2,2 0 0,0 15,15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13,17H15V7H13V11H11V7H9V13H13\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>\n      <div class=\"content-div-container\">\n        <main>\n          <ic-section-container class=\"main-section-container\" aligned=\"center\">\n            <div class=\"main-content-div\">\n              <ic-typography variant=\"h2\">\n                <h2>Example heading</h2>\n              </ic-typography>\n              <ic-typography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </ic-typography>\n              <ic-typography>\n                <p>\n                  Remove this div and add your custom content in\n                  ic-section-container.\n                </p>\n              </ic-typography>\n            </div>\n          </ic-section-container>\n        </main>\n        <ic-footer\n          aligned=\"center\"\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"logo\" href=\"/\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n              width=\"48\"\n              height=\"48\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-footer-link>\n        </ic-footer>\n      </div>\n    </div>`),\n  },\n  {\n    language: \"React\",\n    snippet: createReactAppTsx(\n      `const useStyles = createUseStyles({\n    contentDivContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      flexGrow: \"1\",\n    },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      height: \"800px\",\n    },\n    parentDiv: { display: \"flex\", height: \"100%\" },\n    main: { minHeight: \"100vh\" },\n  });\n  const classes = useStyles();\n  const alignment = \"center\";\n  return (\n    <div className={classes.parentDiv}>\n      <IcClassificationBanner />\n      <IcSideNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          path={mdiCompassOutline}\n        />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHomeOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiMagnify}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiChartTimelineVariant}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCommentTextOutline}\n          />\n        </IcNavigationItem>\n        <IcDivider slot=\"primary-navigation\" />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric1BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric2BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric3BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric4BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCogOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHuman}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiWeb}\n          />\n        </IcNavigationItem>\n      </IcSideNavigation>\n      <div className={classes.contentDivContainer}>\n        <main>\n          <IcSectionContainer aligned={alignment}>\n            <div className={classes.mainContentDiv}>\n              <IcTypography variant=\"h2\">\n                <h2>Example heading</h2>\n              </IcTypography>\n              <IcTypography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </IcTypography>\n              <IcTypography>\n                <p>\n                  Remove this div and add your custom content in\n                  IcSectionContainer.\n                </p>\n              </IcTypography>\n            </div>\n          </IcSectionContainer>\n        </main>\n        <IcFooter\n          aligned={alignment}\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"logo\" href=\"/\">\n            <SlottedSVG\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"48\"\n              height=\"48\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </SlottedSVG>\n          </IcFooterLink>\n        </IcFooter>\n      </div>\n    </div>)`,\n      \"SideNavigationPattern\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSideNav}\n  projectTitle=\"Side Navigation\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n  type=\"pattern\"\n>\n  <IcLink href=\"/side-navigation-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\nThis pattern includes the components:\n\n- [Side navigation](/components/side-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layout patterns on different pages.\n\nUse the side navigation layout to help provide more screen space for main content. Side navigation is well suited to apps that have mutually exclusive features which need to be switched between easily from any page. For example, email providers often use side navigation to provide maximum screen space to email content whilst allowing constant access to other pages.\n\n## When not to use\n\nFor intranet-style and content heavy apps, use the top navigation layout as it's better suited for providing links to a large number of pages.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should scroll to see it.\n\n## Variants\n\nUse the side navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsSideNavWithPageHeader = [\n  {\n    language: \"Web component\",\n    snippet: createWebComponentsIndexHTML(`<div class=\"parent-div\">\n      <ic-classification-banner></ic-classification-banner>\n      <ic-side-navigation\n        app-title=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,17H14V7H10V9H12\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15H11V13H13A2,2 0 0,0 15,11V9C15,7.89 14.1,7 13,7H9V9H13V11H11A2,2 0 0,0 9,13V17H15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9C15,7.89 14.1,7 13,7H9V9H13V11H11V13H13V15H9V17H13A2,2 0 0,0 15,15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13,17H15V7H13V11H11V7H9V13H13\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>\n      <div class=\"content-div-container\">\n        <ic-page-header\n          heading=\"Page header\"\n          subheading=\"This is a page header component with additional functionality and this is the text.\"\n          reverse-order=\"true\"\n          aligned=\"center\"\n        >\n          <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n          <ic-breadcrumb-group slot=\"breadcrumbs\">\n            <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 5\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb\n              current=\"true\"\n              page-title=\"Breadcrumb 6\"\n              href=\"#\"\n            ></ic-breadcrumb>\n          </ic-breadcrumb-group>\n          <ic-button slot=\"actions\" variant=\"primary\">\n            <svg\n              slot=\"left-icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24\"\n              width=\"24\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\" />\n            </svg>\n            Primary button\n          </ic-button>\n          <ic-button slot=\"actions\" variant=\"tertiary\">Tertiary button</ic-button>\n          <div class=\"input-area\" slot=\"input\">\n            <ic-text-field\n              placeholder=\"Enter your input...\"\n              label=\"Input\"\n              hide-label=\"true\"\n            ></ic-text-field>\n            <ic-button>Submit</ic-button>\n        </div>\n      </ic-page-header>\n      <main>\n        <ic-section-container class=\"main-section-container\" aligned=\"center\">\n          <div class=\"main-content-div\">\n            <ic-typography variant=\"h2\">\n              <h2>Example heading</h2>\n            </ic-typography>\n            <ic-typography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </ic-typography>\n            <ic-typography>\n              <p>\n                Remove this div and add your custom content in ic-section-container.\n              </p>\n            </ic-typography>\n          </div>\n        </ic-section-container>\n      </main>\n      <ic-footer\n        aligned=\"center\"\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"logo\" href=\"/\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-footer-link>\n      </ic-footer>\n    </div>\n  </div>`),\n  },\n  {\n    language: \"React\",\n    snippet: createReactAppTsx(\n      `const useStyles = createUseStyles({\n    contentDivContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      flexGrow: \"1\",\n    },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      height: \"800px\",\n    },\n    parentDiv: { display: \"flex\", height: \"100%\" },\n    main: { minHeight: \"100vh\" },\n    inputArea: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      gap: \"var(--ic-space-md)\",\n      \"@media screen and (max-width: 320px)\": {\n        gap: \"var(--ic-space-xs)\",\n      },\n    },\n    textField: {\n      \"--input-width\": \"21.5rem\",\n      \"@media screen and (max-width: 768px)\": {\n        \"--input-width\": \"100%\",\n        flex: \"1 1 0\",\n      },\n    },\n  });\n  const classes = useStyles();\n  const alignment = \"center\";\n  const pageHeaderAlignment = \"center\";\n  return (\n    <div className={classes.parentDiv}>\n      <IcClassificationBanner />\n      <IcSideNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          path={mdiCompassOutline}\n        />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHomeOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiMagnify}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiChartTimelineVariant}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCommentTextOutline}\n          />\n        </IcNavigationItem>\n        <IcDivider slot=\"primary-navigation\" />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric1BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric2BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric3BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric4BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCogOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHuman}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiWeb}\n          />\n        </IcNavigationItem>\n      </IcSideNavigation>\n      <div className={classes.contentDivContainer}>\n        <IcPageHeader\n          heading=\"Page header\"\n          subheading=\"This is a page header component with additional functionality and this is the text.\"\n          reverseOrder\n          aligned={pageHeaderAlignment || alignment}\n        >\n          <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n          <IcBreadcrumbGroup slot=\"breadcrumbs\">\n            <IcBreadcrumb pageTitle=\"Breadcrumb 1\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 2\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 3\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 4\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 5\" href=\"#\" />\n            <IcBreadcrumb current pageTitle=\"Breadcrumb 6\" href=\"#\" />\n          </IcBreadcrumbGroup>\n          <IcButton slot=\"actions\" variant=\"primary\">\n            <SlottedSVG\n              slot=\"left-icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24\"\n              width=\"24\"\n              viewBox=\"0 0 24 24\"\n              path={mdiPlus}\n            />\n            Primary button\n          </IcButton>\n          <IcButton slot=\"actions\" variant=\"tertiary\">\n            Tertiary button\n          </IcButton>\n          <div className={classes.inputArea} slot=\"input\">\n            <IcTextField\n              className={classes.textField}\n              placeholder=\"Enter your input...\"\n              label=\"Input\"\n              hideLabel\n            />\n            <IcButton>Submit</IcButton>\n          </div>\n        </IcPageHeader>\n        <main>\n          <IcSectionContainer aligned={alignment}>\n            <div className={classes.mainContentDiv}>\n              <IcTypography variant=\"h2\">\n                <h2>Example heading</h2>\n              </IcTypography>\n              <IcTypography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </IcTypography>\n              <IcTypography>\n                <p>\n                  Remove this div and add your custom content in\n                  IcSectionContainer.\n                </p>\n              </IcTypography>\n            </div>\n          </IcSectionContainer>\n        </main>\n        <IcFooter\n          aligned={alignment}\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"logo\" href=\"/\">\n            <SlottedSVG\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"48\"\n              height=\"48\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </SlottedSVG>\n          </IcFooterLink>\n        </IcFooter>\n      </div>\n    </div>\n  )`,\n      \"SideNavigationWithPageHeaderPattern\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSideNavWithPageHeader}\n  projectTitle=\"Side Navigation with Page Header\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n  type=\"pattern\"\n>\n  <IcLink href=\"/side-navigation-page-header-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsSideNavBackToTop = [\n  {\n    language: \"Web component\",\n    snippet: createWebComponentsIndexHTML(`<div class=\"parent-div\">\n      <ic-classification-banner></ic-classification-banner>\n      <ic-side-navigation\n        app-title=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,17H14V7H10V9H12\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15H11V13H13A2,2 0 0,0 15,11V9C15,7.89 14.1,7 13,7H9V9H13V11H11A2,2 0 0,0 9,13V17H15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9C15,7.89 14.1,7 13,7H9V9H13V11H11V13H13V15H9V17H13A2,2 0 0,0 15,15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13,17H15V7H13V11H11V7H9V13H13\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>\n      <div class=\"content-div-container\">\n        <main id=\"main\">\n        <ic-section-container class=\"main-section-container\" aligned=\"center\">\n          <div class=\"main-content-div\">\n            <ic-typography variant=\"h2\">\n              <h2>Example heading</h2>\n            </ic-typography>\n            <ic-typography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </ic-typography>\n            <ic-typography>\n              <p>\n                Remove this div and add your custom content in ic-section-container.\n              </p>\n            </ic-typography>\n          </div>\n        </ic-section-container>\n      </main>\n      <ic-back-to-top target=\"main\"></ic-back-to-top>\n      <ic-footer\n        aligned=\"center\"\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"logo\" href=\"/\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-footer-link>\n      </ic-footer>\n    </div>\n  </div>`),\n  },\n  {\n    language: \"React\",\n    snippet: createReactAppTsx(\n      `const useStyles = createUseStyles({\n    contentDivContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      flexGrow: \"1\",\n    },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    parentDiv: { display: \"flex\", height: \"100%\" },\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles();\n  const alignment = \"center\";\n  return (\n    <div className={classes.parentDiv}>\n      <IcClassificationBanner />\n      <IcSideNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          path={mdiCompassOutline}\n        />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHomeOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiMagnify}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiChartTimelineVariant}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCommentTextOutline}\n          />\n        </IcNavigationItem>\n        <IcDivider slot=\"primary-navigation\" />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric1BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric2BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric3BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric4BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCogOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHuman}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiWeb}\n          />\n        </IcNavigationItem>\n      </IcSideNavigation>\n      <div className={classes.contentDivContainer}>\n        <main className={classes.main} id=\"main\">\n          <IcSectionContainer\n            aligned={alignment}\n            className={classes.mainSectionContainer}\n          >\n            <div className={classes.mainContentDiv}>\n              <IcTypography variant=\"h2\">\n                <h2>Example heading</h2>\n              </IcTypography>\n              <IcTypography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </IcTypography>\n              <IcTypography>\n                <p>\n                  Remove this div and add your custom content in\n                  IcSectionContainer.\n                </p>\n              </IcTypography>\n            </div>\n          </IcSectionContainer>\n        </main>\n        <IcBackToTop target=\"main\" />\n        <IcFooter\n          aligned={alignment}\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"logo\" href=\"/\">\n            <SlottedSVG\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"48\"\n              height=\"48\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </SlottedSVG>\n          </IcFooterLink>\n        </IcFooter>\n      </div>\n    </div>\n  )`,\n      \"SideNavigationWithBackToTopPattern\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSideNavBackToTop}\n  projectTitle=\"Side Navigation with Back To Top\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n  type=\"pattern\"\n>\n  <IcLink href=\"/side-navigation-back-to-top-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n<DoDontCaution\n  imageSrc={sideNavigationPatternFig1}\n  imageAlt=\"An example page showing the layout with an alternatively themed look.\"\n  state=\"none\"\n  caption=\"An example of the side navigation layout themed to an alternative colour.\"\n/>\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Top navigation layout](/patterns/navigation-patterns/top-navigation-layout)\n",
+      "contents": "\nimport { IcLink } from \"@ukic/react\";\nimport {\n  createReactAppTsx,\n  createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\nimport sideNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-side-navigation-layout.png\";\n\n## Introduction\n\nexport const snippetsSideNav = [\n  {\n    technology: \"Web component\",\n    snippets: createWebComponentsIndexHTML(`<div class=\"parent-div\">\n      <ic-classification-banner></ic-classification-banner>\n      <ic-side-navigation\n        app-title=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,17H14V7H10V9H12\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15H11V13H13A2,2 0 0,0 15,11V9C15,7.89 14.1,7 13,7H9V9H13V11H11A2,2 0 0,0 9,13V17H15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9C15,7.89 14.1,7 13,7H9V9H13V11H11V13H13V15H9V17H13A2,2 0 0,0 15,15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13,17H15V7H13V11H11V7H9V13H13\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>\n      <div class=\"content-div-container\">\n        <main>\n          <ic-section-container class=\"main-section-container\" aligned=\"center\">\n            <div class=\"main-content-div\">\n              <ic-typography variant=\"h2\">\n                <h2>Example heading</h2>\n              </ic-typography>\n              <ic-typography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </ic-typography>\n              <ic-typography>\n                <p>\n                  Remove this div and add your custom content in\n                  ic-section-container.\n                </p>\n              </ic-typography>\n            </div>\n          </ic-section-container>\n        </main>\n        <ic-footer\n          aligned=\"center\"\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n          <ic-footer-link slot=\"logo\" href=\"/\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n              width=\"48\"\n              height=\"48\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-footer-link>\n        </ic-footer>\n      </div>\n    </div>`),\n  },\n  {\n    technology: \"React\",\n    snippets: createReactAppTsx(\n      `const useStyles = createUseStyles({\n    contentDivContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      flexGrow: \"1\",\n    },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      height: \"800px\",\n    },\n    parentDiv: { display: \"flex\", height: \"100%\" },\n    main: { minHeight: \"100vh\" },\n  });\n  const classes = useStyles();\n  const alignment = \"center\";\n  return (\n    <div className={classes.parentDiv}>\n      <IcClassificationBanner />\n      <IcSideNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          path={mdiCompassOutline}\n        />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHomeOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiMagnify}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiChartTimelineVariant}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCommentTextOutline}\n          />\n        </IcNavigationItem>\n        <IcDivider slot=\"primary-navigation\" />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric1BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric2BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric3BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric4BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCogOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHuman}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiWeb}\n          />\n        </IcNavigationItem>\n      </IcSideNavigation>\n      <div className={classes.contentDivContainer}>\n        <main>\n          <IcSectionContainer aligned={alignment}>\n            <div className={classes.mainContentDiv}>\n              <IcTypography variant=\"h2\">\n                <h2>Example heading</h2>\n              </IcTypography>\n              <IcTypography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </IcTypography>\n              <IcTypography>\n                <p>\n                  Remove this div and add your custom content in\n                  IcSectionContainer.\n                </p>\n              </IcTypography>\n            </div>\n          </IcSectionContainer>\n        </main>\n        <IcFooter\n          aligned={alignment}\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"logo\" href=\"/\">\n            <SlottedSVG\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"48\"\n              height=\"48\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </SlottedSVG>\n          </IcFooterLink>\n        </IcFooter>\n      </div>\n    </div>)`,\n      \"SideNavigationPattern\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSideNav}\n  projectTitle=\"Side Navigation\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n  type=\"pattern\"\n>\n  <IcLink href=\"/side-navigation-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\nThis pattern includes the components:\n\n- [Side navigation](/components/side-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layout patterns on different pages.\n\nUse the side navigation layout to help provide more screen space for main content. Side navigation is well suited to apps that have mutually exclusive features which need to be switched between easily from any page. For example, email providers often use side navigation to provide maximum screen space to email content whilst allowing constant access to other pages.\n\n## When not to use\n\nFor intranet-style and content heavy apps, use the top navigation layout as it's better suited for providing links to a large number of pages.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should scroll to see it.\n\n## Variants\n\nUse the side navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsSideNavWithPageHeader = [\n  {\n    technology: \"Web component\",\n    snippets: createWebComponentsIndexHTML(`<div class=\"parent-div\">\n      <ic-classification-banner></ic-classification-banner>\n      <ic-side-navigation\n        app-title=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,17H14V7H10V9H12\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15H11V13H13A2,2 0 0,0 15,11V9C15,7.89 14.1,7 13,7H9V9H13V11H11A2,2 0 0,0 9,13V17H15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9C15,7.89 14.1,7 13,7H9V9H13V11H11V13H13V15H9V17H13A2,2 0 0,0 15,15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13,17H15V7H13V11H11V7H9V13H13\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>\n      <div class=\"content-div-container\">\n        <ic-page-header\n          heading=\"Page header\"\n          subheading=\"This is a page header component with additional functionality and this is the text.\"\n          reverse-order=\"true\"\n          aligned=\"center\"\n        >\n          <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n          <ic-breadcrumb-group slot=\"breadcrumbs\">\n            <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb page-title=\"Breadcrumb 5\" href=\"#\"></ic-breadcrumb>\n            <ic-breadcrumb\n              current=\"true\"\n              page-title=\"Breadcrumb 6\"\n              href=\"#\"\n            ></ic-breadcrumb>\n          </ic-breadcrumb-group>\n          <ic-button slot=\"actions\" variant=\"primary\">\n            <svg\n              slot=\"left-icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24\"\n              width=\"24\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\" />\n            </svg>\n            Primary button\n          </ic-button>\n          <ic-button slot=\"actions\" variant=\"tertiary\">Tertiary button</ic-button>\n          <div class=\"input-area\" slot=\"input\">\n            <ic-text-field\n              placeholder=\"Enter your input...\"\n              label=\"Input\"\n              hide-label=\"true\"\n            ></ic-text-field>\n            <ic-button>Submit</ic-button>\n        </div>\n      </ic-page-header>\n      <main>\n        <ic-section-container class=\"main-section-container\" aligned=\"center\">\n          <div class=\"main-content-div\">\n            <ic-typography variant=\"h2\">\n              <h2>Example heading</h2>\n            </ic-typography>\n            <ic-typography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </ic-typography>\n            <ic-typography>\n              <p>\n                Remove this div and add your custom content in ic-section-container.\n              </p>\n            </ic-typography>\n          </div>\n        </ic-section-container>\n      </main>\n      <ic-footer\n        aligned=\"center\"\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"logo\" href=\"/\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-footer-link>\n      </ic-footer>\n    </div>\n  </div>`),\n  },\n  {\n    technology: \"React\",\n    snippets: createReactAppTsx(\n      `const useStyles = createUseStyles({\n    contentDivContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      flexGrow: \"1\",\n    },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      height: \"800px\",\n    },\n    parentDiv: { display: \"flex\", height: \"100%\" },\n    main: { minHeight: \"100vh\" },\n    inputArea: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      gap: \"var(--ic-space-md)\",\n      \"@media screen and (max-width: 320px)\": {\n        gap: \"var(--ic-space-xs)\",\n      },\n    },\n    textField: {\n      \"--input-width\": \"21.5rem\",\n      \"@media screen and (max-width: 768px)\": {\n        \"--input-width\": \"100%\",\n        flex: \"1 1 0\",\n      },\n    },\n  });\n  const classes = useStyles();\n  const alignment = \"center\";\n  const pageHeaderAlignment = \"center\";\n  return (\n    <div className={classes.parentDiv}>\n      <IcClassificationBanner />\n      <IcSideNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          path={mdiCompassOutline}\n        />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHomeOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiMagnify}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiChartTimelineVariant}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCommentTextOutline}\n          />\n        </IcNavigationItem>\n        <IcDivider slot=\"primary-navigation\" />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric1BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric2BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric3BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric4BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCogOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHuman}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiWeb}\n          />\n        </IcNavigationItem>\n      </IcSideNavigation>\n      <div className={classes.contentDivContainer}>\n        <IcPageHeader\n          heading=\"Page header\"\n          subheading=\"This is a page header component with additional functionality and this is the text.\"\n          reverseOrder\n          aligned={pageHeaderAlignment || alignment}\n        >\n          <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n          <IcBreadcrumbGroup slot=\"breadcrumbs\">\n            <IcBreadcrumb pageTitle=\"Breadcrumb 1\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 2\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 3\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 4\" href=\"#\" />\n            <IcBreadcrumb pageTitle=\"Breadcrumb 5\" href=\"#\" />\n            <IcBreadcrumb current pageTitle=\"Breadcrumb 6\" href=\"#\" />\n          </IcBreadcrumbGroup>\n          <IcButton slot=\"actions\" variant=\"primary\">\n            <SlottedSVG\n              slot=\"left-icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24\"\n              width=\"24\"\n              viewBox=\"0 0 24 24\"\n              path={mdiPlus}\n            />\n            Primary button\n          </IcButton>\n          <IcButton slot=\"actions\" variant=\"tertiary\">\n            Tertiary button\n          </IcButton>\n          <div className={classes.inputArea} slot=\"input\">\n            <IcTextField\n              className={classes.textField}\n              placeholder=\"Enter your input...\"\n              label=\"Input\"\n              hideLabel\n            />\n            <IcButton>Submit</IcButton>\n          </div>\n        </IcPageHeader>\n        <main>\n          <IcSectionContainer aligned={alignment}>\n            <div className={classes.mainContentDiv}>\n              <IcTypography variant=\"h2\">\n                <h2>Example heading</h2>\n              </IcTypography>\n              <IcTypography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </IcTypography>\n              <IcTypography>\n                <p>\n                  Remove this div and add your custom content in\n                  IcSectionContainer.\n                </p>\n              </IcTypography>\n            </div>\n          </IcSectionContainer>\n        </main>\n        <IcFooter\n          aligned={alignment}\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"logo\" href=\"/\">\n            <SlottedSVG\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"48\"\n              height=\"48\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </SlottedSVG>\n          </IcFooterLink>\n        </IcFooter>\n      </div>\n    </div>\n  )`,\n      \"SideNavigationWithPageHeaderPattern\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSideNavWithPageHeader}\n  projectTitle=\"Side Navigation with Page Header\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n  type=\"pattern\"\n>\n  <IcLink href=\"/side-navigation-page-header-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsSideNavBackToTop = [\n  {\n    technology: \"Web component\",\n    snippets: createWebComponentsIndexHTML(`<div class=\"parent-div\">\n      <ic-classification-banner></ic-classification-banner>\n      <ic-side-navigation\n        app-title=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-divider slot=\"primary-navigation\"></ic-divider>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,17H14V7H10V9H12\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15H11V13H13A2,2 0 0,0 15,11V9C15,7.89 14.1,7 13,7H9V9H13V11H11A2,2 0 0,0 9,13V17H15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9C15,7.89 14.1,7 13,7H9V9H13V11H11V13H13V15H9V17H13A2,2 0 0,0 15,15M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13,17H15V7H13V11H11V7H9V13H13\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n        <ic-navigation-item\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n          >\n            <path\n              d=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>\n      <div class=\"content-div-container\">\n        <main id=\"main\">\n        <ic-section-container class=\"main-section-container\" aligned=\"center\">\n          <div class=\"main-content-div\">\n            <ic-typography variant=\"h2\">\n              <h2>Example heading</h2>\n            </ic-typography>\n            <ic-typography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </ic-typography>\n            <ic-typography>\n              <p>\n                Remove this div and add your custom content in ic-section-container.\n              </p>\n            </ic-typography>\n          </div>\n        </ic-section-container>\n      </main>\n      <ic-back-to-top target=\"main\"></ic-back-to-top>\n      <ic-footer\n        aligned=\"center\"\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n        <ic-footer-link slot=\"logo\" href=\"/\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-footer-link>\n      </ic-footer>\n    </div>\n  </div>`),\n  },\n  {\n    technology: \"React\",\n    snippets: createReactAppTsx(\n      `const useStyles = createUseStyles({\n    contentDivContainer: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      flexGrow: \"1\",\n    },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    parentDiv: { display: \"flex\", height: \"100%\" },\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles();\n  const alignment = \"center\";\n  return (\n    <div className={classes.parentDiv}>\n      <IcClassificationBanner />\n      <IcSideNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n          path={mdiCompassOutline}\n        />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHomeOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiMagnify}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiChartTimelineVariant}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCommentTextOutline}\n          />\n        </IcNavigationItem>\n        <IcDivider slot=\"primary-navigation\" />\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric1BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric2BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric3BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"primary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiNumeric4BoxOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiCogOutline}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiHuman}\n          />\n        </IcNavigationItem>\n        <IcNavigationItem\n          slot=\"secondary-navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n        >\n          <SlottedSVG\n            slot=\"icon\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiWeb}\n          />\n        </IcNavigationItem>\n      </IcSideNavigation>\n      <div className={classes.contentDivContainer}>\n        <main className={classes.main} id=\"main\">\n          <IcSectionContainer\n            aligned={alignment}\n            className={classes.mainSectionContainer}\n          >\n            <div className={classes.mainContentDiv}>\n              <IcTypography variant=\"h2\">\n                <h2>Example heading</h2>\n              </IcTypography>\n              <IcTypography variant=\"subtitle-large\">\n                <p>Example sub-heading</p>\n              </IcTypography>\n              <IcTypography>\n                <p>\n                  Remove this div and add your custom content in\n                  IcSectionContainer.\n                </p>\n              </IcTypography>\n            </div>\n          </IcSectionContainer>\n        </main>\n        <IcBackToTop target=\"main\" />\n        <IcFooter\n          aligned={alignment}\n          caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n          description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n        >\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"link\" href=\"\">\n            [footerLink]\n          </IcFooterLink>\n          <IcFooterLink slot=\"logo\" href=\"/\">\n            <SlottedSVG\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"48\"\n              height=\"48\"\n              viewBox=\"0 0 24 24\"\n              fill=\"#FFFFFF\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </SlottedSVG>\n          </IcFooterLink>\n        </IcFooter>\n      </div>\n    </div>\n  )`,\n      \"SideNavigationWithBackToTopPattern\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsSideNavBackToTop}\n  projectTitle=\"Side Navigation with Back To Top\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n  type=\"pattern\"\n>\n  <IcLink href=\"/side-navigation-back-to-top-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n<DoDontCaution\n  imageSrc={sideNavigationPatternFig1}\n  imageAlt=\"An example page showing the layout with an alternatively themed look.\"\n  state=\"none\"\n  caption=\"An example of the side navigation layout themed to an alternative colour.\"\n/>\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Top navigation layout](/patterns/navigation-patterns/top-navigation-layout)\n",
       "path": "/patterns/navigation-patterns/side-navigation-layout",
       "navPriority": 2,
       "date": "2024-03-25",
@@ -4561,9 +4561,9 @@
       "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-04-08T22:26:00.520Z",
-        "lastModified": "2024-04-08T22:26:00.520Z",
-        "size": 62900,
+        "createdAt": "2024-04-08T22:26:50.800Z",
+        "lastModified": "2024-04-08T22:26:50.800Z",
+        "size": 62918,
         "formattedSize": "61.4 KB"
       }
     },
@@ -4586,7 +4586,7 @@
     },
     {
       "id": "patterns__top-navigation-layoutx",
-      "contents": "\nimport { IcLink } from \"@ukic/react\";\n\nimport {\n  createReactAppTsx,\n  createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\n\nimport topNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-top-navigation-layout@2x.png\";\n\n## Introduction\n\nexport const snippetsTopNav = [\n  {\n    language: \"Web component\",\n    snippet:\n      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <main>\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n  },\n  {\n    language: \"React\",\n    snippet: createReactAppTsx(\n      `const alignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles(); \n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n        contentAligned={alignment}\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <main className={classes.main}>\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n      \"TopNavigation\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNav}\n  type=\"pattern\"\n  noPadding\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\nThis pattern includes the components:\n\n- [Top navigation](/components/top-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Mega-menu](/components/top-navigation)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layouts on different pages.\n\nUse the top navigation layout for article pages or content heavy apps with lots of text.\n\nUse the top navigation layout with a mega-menu for access to a large range of navigation items.\n\nUse a mega-menu for apps with complex page structures where every page should be accessible from any other page through the mega-menu. For example, department stores or supermarkets use a top navigation with mega-menu to provide access to their large number of product categories.\n\n## When not to use\n\nFor apps that require constant access to switch between pages, use side navigation as it's better suited for providing quick access and maximising the screen space for page content.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should\nscroll to see it.\n\n## Variants\n\nUse the top navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsTopNavPageHeader = [\n  {\n    language: \"Web component\",\n    snippet:\n      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <ic-page-header\n      heading=\"Page header\"\n      subheading=\"This is a page header component with additional functionality and this is the text.\"\n      reverse-order=\"true\"\n      aligned=\"center\"\n    >\n      <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n      <ic-breadcrumb-group slot=\"breadcrumbs\">\n        <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 5\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb\n          current=\"true\"\n          page-title=\"Breadcrumb 6\"\n          href=\"#\"\n        ></ic-breadcrumb>\n      </ic-breadcrumb-group>\n      <ic-button slot=\"actions\" variant=\"primary\">\n        <svg\n          slot=\"left-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\" />\n        </svg>\n        Primary button\n      </ic-button>\n      <ic-button slot=\"actions\" variant=\"tertiary\">Tertiary button</ic-button>\n      <div class=\"input-area\" slot=\"input\">\n        <ic-text-field\n          placeholder=\"Enter your input...\"\n          label=\"Input\"\n          hide-label=\"true\"\n        ></ic-text-field>\n        <ic-button>Submit</ic-button>\n      </div>\n    </ic-page-header>\n    <main>\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n  },\n  {\n    language: \"React\",\n    snippet: createReactAppTsx(\n      `const alignment = \"center\";\n  let pageHeaderAlignment;\n  // pageHeaderAlignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n    inputArea: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      gap: \"var(--ic-space-md)\",\n      \"@media screen and (max-width: 320px)\": {\n        gap: \"var(--ic-space-xs)\",\n      },\n    },\n    textField: {\n      \"--input-width\": \"21.5rem\",\n      \"@media screen and (max-width: 768px)\": {\n        \"--input-width\": \"100%\",\n        flex: \"1 1 0\",\n      },\n    },\n  });\n  const classes = useStyles();\n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n        contentAligned={alignment}\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <IcPageHeader\n        heading=\"Page header\"\n        subheading=\"This is a page header component with additional functionality and this is the text.\"\n        reverseOrder\n        aligned={pageHeaderAlignment || alignment}\n      >\n        <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n        <IcBreadcrumbGroup slot=\"breadcrumbs\">\n          <IcBreadcrumb pageTitle=\"Breadcrumb 1\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 2\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 3\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 4\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 5\" href=\"#\" />\n          <IcBreadcrumb current pageTitle=\"Breadcrumb 6\" href=\"#\" />\n        </IcBreadcrumbGroup>\n        <IcButton slot=\"actions\" variant=\"primary\">\n          <SlottedSVG\n            slot=\"left-icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiPlus}\n          />\n          Primary button\n        </IcButton>\n        <IcButton slot=\"actions\" variant=\"tertiary\">\n          Tertiary button\n        </IcButton>\n        <div className={classes.inputArea} slot=\"input\">\n          <IcTextField\n            className={classes.textField}\n            placeholder=\"Enter your input...\"\n            label=\"Input\"\n            hideLabel\n          />\n          <IcButton>Submit</IcButton>\n        </div>\n      </IcPageHeader>\n      <main className={classes.main}>\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n      \"TopNavigationWithPageHeader\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNavPageHeader}\n  projectTitle=\"Top Navigation with Page Header\"\n  type=\"pattern\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-page-header-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n### Mega-menu\n\nUse a top navigation with a mega-menu for apps with more than eight navigation options or options that can be grouped into categories. The main link groups are displayed in the top navigation and open a mega-menu when hovered over or focused.\n\nFor more information, see the [mega-menu component](/components/top-navigation#mega-menu).\n\nexport const snippetsTopNavMegaMenu = [\n  {\n    language: \"Web component\",\n    snippet:\n      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-group\n        slot=\"navigation\"\n        label=\"[navigationGroup]\"\n        expandable=\"true\"\n      >\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-group slot=\"navigation\" label=\"[navigationGroup]\">\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n        <ic-navigation-item\n          label=\"[navItem]\"\n          href=\"#\"\n        ></ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <main>\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n  },\n  {\n    language: \"React\",\n    snippet: createReactAppTsx(\n      `const alignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles(); \n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        contentAligned={alignment}\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationGroup\n          slot=\"navigation\"\n          label=\"[navigationGroup]\"\n          expandable\n        >\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n        </IcNavigationGroup>\n        <IcNavigationGroup slot=\"navigation\" label=\"[navigationGroup]\">\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n        </IcNavigationGroup>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <main className={classes.main}>\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n      \"TopNavigationWithMegaMenu\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNavMegaMenu}\n  projectTitle=\"Top Navigation with Mega Menu\"\n  type=\"pattern\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-mega-menu-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsTopNavBackToTop = [\n  {\n    language: \"Web component\",\n    snippet:\n      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <main id=\"main\">\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-back-to-top target=\"main\"></ic-back-to-top>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n  },\n  {\n    language: \"React\",\n    snippet: createReactAppTsx(\n      `const alignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles(); \n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n        contentAligned={alignment}\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <main className={classes.main} id=\"main\">\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcBackToTop target=\"main\" />\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n      \"TopNavigationWithBackToTop\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNavBackToTop}\n  projectTitle=\"Top Navigation with Back to Top\"\n  type=\"pattern\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-back-to-top-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n<DoDontCaution\n  imageSrc={topNavigationPatternFig1}\n  imageAlt=\"An example page showing the layout with an alternatively themed look.\"\n  state=\"none\"\n  caption=\"An example of the top navigation layout themed to an alternative colour.\"\n/>\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Side navigation layout](/patterns/navigation-patterns/side-navigation-layout)\n",
+      "contents": "\nimport { IcLink } from \"@ukic/react\";\n\nimport {\n  createReactAppTsx,\n  createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\n\nimport topNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-top-navigation-layout@2x.png\";\n\n## Introduction\n\nexport const snippetsTopNav = [\n  {\n    technology: \"Web component\",\n    snippets: {\n      long: createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <main>\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n    },\n  },\n  {\n    technology: \"React\",\n    snippets: {\n      long: [\n        {\n          language: \"Typescript\",\n          snippet: createReactAppTsx(\n            `const alignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles(); \n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n        contentAligned={alignment}\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <main className={classes.main}>\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n            \"TopNavigation\",\n            \"tsx\",\n            true\n          ),\n        },\n        {\n          language: \"Javascript\",\n          snippet: createReactAppTsx(\n            `const alignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles(); \n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n        contentAligned={alignment}\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <main className={classes.main}>\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n            \"TopNavigation\",\n            \"jsx\",\n            true\n          ),\n        },\n      ],\n    },\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNav}\n  type=\"pattern\"\n  noPadding\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\nThis pattern includes the components:\n\n- [Top navigation](/components/top-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Mega-menu](/components/top-navigation)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layouts on different pages.\n\nUse the top navigation layout for article pages or content heavy apps with lots of text.\n\nUse the top navigation layout with a mega-menu for access to a large range of navigation items.\n\nUse a mega-menu for apps with complex page structures where every page should be accessible from any other page through the mega-menu. For example, department stores or supermarkets use a top navigation with mega-menu to provide access to their large number of product categories.\n\n## When not to use\n\nFor apps that require constant access to switch between pages, use side navigation as it's better suited for providing quick access and maximising the screen space for page content.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should\nscroll to see it.\n\n## Variants\n\nUse the top navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsTopNavPageHeader = [\n  {\n    technology: \"Web component\",\n    snippets:\n      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <ic-page-header\n      heading=\"Page header\"\n      subheading=\"This is a page header component with additional functionality and this is the text.\"\n      reverse-order=\"true\"\n      aligned=\"center\"\n    >\n      <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n      <ic-breadcrumb-group slot=\"breadcrumbs\">\n        <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb page-title=\"Breadcrumb 5\" href=\"#\"></ic-breadcrumb>\n        <ic-breadcrumb\n          current=\"true\"\n          page-title=\"Breadcrumb 6\"\n          href=\"#\"\n        ></ic-breadcrumb>\n      </ic-breadcrumb-group>\n      <ic-button slot=\"actions\" variant=\"primary\">\n        <svg\n          slot=\"left-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\" />\n        </svg>\n        Primary button\n      </ic-button>\n      <ic-button slot=\"actions\" variant=\"tertiary\">Tertiary button</ic-button>\n      <div class=\"input-area\" slot=\"input\">\n        <ic-text-field\n          placeholder=\"Enter your input...\"\n          label=\"Input\"\n          hide-label=\"true\"\n        ></ic-text-field>\n        <ic-button>Submit</ic-button>\n      </div>\n    </ic-page-header>\n    <main>\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n  },\n  {\n    technology: \"React\",\n    snippets: createReactAppTsx(\n      `const alignment = \"center\";\n  let pageHeaderAlignment;\n  // pageHeaderAlignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n    inputArea: {\n      display: \"flex\",\n      flexWrap: \"wrap\",\n      gap: \"var(--ic-space-md)\",\n      \"@media screen and (max-width: 320px)\": {\n        gap: \"var(--ic-space-xs)\",\n      },\n    },\n    textField: {\n      \"--input-width\": \"21.5rem\",\n      \"@media screen and (max-width: 768px)\": {\n        \"--input-width\": \"100%\",\n        flex: \"1 1 0\",\n      },\n    },\n  });\n  const classes = useStyles();\n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n        contentAligned={alignment}\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <IcPageHeader\n        heading=\"Page header\"\n        subheading=\"This is a page header component with additional functionality and this is the text.\"\n        reverseOrder\n        aligned={pageHeaderAlignment || alignment}\n      >\n        <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n        <IcBreadcrumbGroup slot=\"breadcrumbs\">\n          <IcBreadcrumb pageTitle=\"Breadcrumb 1\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 2\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 3\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 4\" href=\"#\" />\n          <IcBreadcrumb pageTitle=\"Breadcrumb 5\" href=\"#\" />\n          <IcBreadcrumb current pageTitle=\"Breadcrumb 6\" href=\"#\" />\n        </IcBreadcrumbGroup>\n        <IcButton slot=\"actions\" variant=\"primary\">\n          <SlottedSVG\n            slot=\"left-icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            path={mdiPlus}\n          />\n          Primary button\n        </IcButton>\n        <IcButton slot=\"actions\" variant=\"tertiary\">\n          Tertiary button\n        </IcButton>\n        <div className={classes.inputArea} slot=\"input\">\n          <IcTextField\n            className={classes.textField}\n            placeholder=\"Enter your input...\"\n            label=\"Input\"\n            hideLabel\n          />\n          <IcButton>Submit</IcButton>\n        </div>\n      </IcPageHeader>\n      <main className={classes.main}>\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n      \"TopNavigationWithPageHeader\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNavPageHeader}\n  projectTitle=\"Top Navigation with Page Header\"\n  type=\"pattern\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-page-header-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n### Mega-menu\n\nUse a top navigation with a mega-menu for apps with more than eight navigation options or options that can be grouped into categories. The main link groups are displayed in the top navigation and open a mega-menu when hovered over or focused.\n\nFor more information, see the [mega-menu component](/components/top-navigation#mega-menu).\n\nexport const snippetsTopNavMegaMenu = [\n  {\n    technology: \"Web component\",\n    snippets:\n      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-group\n        slot=\"navigation\"\n        label=\"[navigationGroup]\"\n        expandable=\"true\"\n      >\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-group slot=\"navigation\" label=\"[navigationGroup]\">\n        <ic-navigation-item label=\"[navItem]\" href=\"#\"></ic-navigation-item>\n        <ic-navigation-item\n          label=\"[navItem]\"\n          href=\"#\"\n        ></ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <main>\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n  },\n  {\n    technology: \"React\",\n    snippets: createReactAppTsx(\n      `const alignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles(); \n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        contentAligned={alignment}\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationGroup\n          slot=\"navigation\"\n          label=\"[navigationGroup]\"\n          expandable\n        >\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n        </IcNavigationGroup>\n        <IcNavigationGroup slot=\"navigation\" label=\"[navigationGroup]\">\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n          <IcNavigationItem label=\"[navItem]\" href=\"#\" />\n        </IcNavigationGroup>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <main className={classes.main}>\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n      \"TopNavigationWithMegaMenu\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNavMegaMenu}\n  projectTitle=\"Top Navigation with Mega Menu\"\n  type=\"pattern\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-mega-menu-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsTopNavBackToTop = [\n  {\n    technology: \"Web component\",\n    snippets:\n      createWebComponentsIndexHTML(`<ic-classification-banner></ic-classification-banner>\n    <ic-top-navigation\n      app-title=\"[Enter your application name]\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n      content-aligned=\"center\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 24 24\" \n        fill=\"#000000\"\n        width=\"24\"\n        height=\"24\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-search-bar\n        slot=\"search\"\n        placeholder=\"Search\"\n        label=\"Search\"\n      ></ic-search-bar>\n      <ic-navigation-button label=\"Profile\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Settings\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-button label=\"Edit\" slot=\"buttons\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path\n            d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\"\n          />\n        </svg>\n      </ic-navigation-button>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n        selected\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n      <ic-navigation-item\n        slot=\"navigation\"\n        label=\"[navigationOption]\"\n        href=\"#\"\n      ></ic-navigation-item>\n    </ic-top-navigation>\n    <main id=\"main\">\n      <ic-section-container class=\"main-section-container\" aligned=\"center\">\n        <div class=\"main-content-div\">\n          <ic-typography variant=\"h2\">\n            <h2>Example heading</h2>\n          </ic-typography>\n          <ic-typography variant=\"subtitle-large\">\n            <p>Example sub-heading</p>\n          </ic-typography>\n          <ic-typography>\n            <p>\n              Remove this div and add your custom content in ic-section-container.\n            </p>\n          </ic-typography>\n        </div>\n      </ic-section-container>\n    </main>\n    <ic-back-to-top target=\"main\"></ic-back-to-top>\n    <ic-footer\n      aligned=\"center\"\n      caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n      description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n    >\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"link\" href=\"\">[footerLink]</ic-footer-link>\n      <ic-footer-link slot=\"logo\" href=\"/\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"#FFFFFF\"\n          width=\"48\"\n          height=\"48\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-footer-link>\n    </ic-footer>`),\n  },\n  {\n    technology: \"React\",\n    snippets: createReactAppTsx(\n      `const alignment = \"center\";\n  const useStyles = createUseStyles({\n    main: { minHeight: \"100vh\", display: \"flex\" },\n    mainContentDiv: {\n      border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n      padding: \"var(--ic-space-md)\",\n      flex: 1,\n    },\n    mainSectionContainer: { display: \"flex\", flex: 1 },\n  });\n  const classes = useStyles(); \n  return (\n    <>\n      <IcClassificationBanner />\n      <IcTopNavigation\n        appTitle=\"[Enter your application name]\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n        contentAligned={alignment}\n      >\n        <SlottedSVG\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\" \n          viewBox=\"0 0 24 24\" \n          fill=\"#000000\"\n          width=\"24\"\n          height=\"24\" \n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n        </SlottedSVG>\n        <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n        <IcNavigationButton label=\"Profile\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiAccount}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Settings\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiCog}\n          />\n        </IcNavigationButton>\n        <IcNavigationButton label=\"Edit\" slot=\"buttons\">\n          <SlottedSVG\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\" \n            path={mdiPencil}\n          />\n        </IcNavigationButton>\n        <IcNavigationItem\n          slot=\"navigation\"\n          label=\"[navigationOption]\"\n          href=\"#\"\n          selected\n        />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n        <IcNavigationItem slot=\"navigation\" label=\"[navigationOption]\" href=\"#\" />\n      </IcTopNavigation>\n      <main className={classes.main} id=\"main\">\n        <IcSectionContainer className={classes.mainSectionContainer} aligned={alignment}>\n          <div className={classes.mainContentDiv}>\n            <IcTypography variant=\"h2\">\n              <h2>Example heading</h2>\n            </IcTypography>\n            <IcTypography variant=\"subtitle-large\">\n              <p>Example sub-heading</p>\n            </IcTypography>\n            <IcTypography>\n              <p>\n                Remove this div and add your custom content in IcSectionContainer.\n              </p>\n            </IcTypography>\n          </div>\n        </IcSectionContainer>\n      </main>\n      <IcBackToTop target=\"main\" />\n      <IcFooter\n        aligned={alignment}\n        caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n        description=\"This pattern was built using the Intelligence Community Design System (ICDS).\"\n      >\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"link\" href=\"\">\n          [footerLink]\n        </IcFooterLink>\n        <IcFooterLink slot=\"logo\" href=\"/\">\n          <SlottedSVG\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"#FFFFFF\"\n            width=\"48\"\n            height=\"48\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            />\n          </SlottedSVG>\n        </IcFooterLink>\n      </IcFooter>\n    </>\n  )`,\n      \"TopNavigationWithBackToTop\",\n      \"jsx\",\n      true\n    ),\n  },\n];\n\n<ComponentPreview\n  snippets={snippetsTopNavBackToTop}\n  projectTitle=\"Top Navigation with Back to Top\"\n  type=\"pattern\"\n  style={{\n    display: \"flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: \"16px\",\n  }}\n>\n  <IcLink href=\"/top-navigation-back-to-top-pattern\" target=\"_blank\">\n    View example in new window\n  </IcLink>\n</ComponentPreview>\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n<DoDontCaution\n  imageSrc={topNavigationPatternFig1}\n  imageAlt=\"An example page showing the layout with an alternatively themed look.\"\n  state=\"none\"\n  caption=\"An example of the top navigation layout themed to an alternative colour.\"\n/>\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Side navigation layout](/patterns/navigation-patterns/side-navigation-layout)\n",
       "path": "/patterns/navigation-patterns/top-navigation-layout",
       "navPriority": 1,
       "date": "2024-03-25",
@@ -4595,10 +4595,10 @@
       "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-04-08T22:26:00.520Z",
-        "lastModified": "2024-04-08T22:26:00.520Z",
-        "size": 52244,
-        "formattedSize": "51.0 KB"
+        "createdAt": "2024-04-08T22:26:50.800Z",
+        "lastModified": "2024-04-08T22:26:50.800Z",
+        "size": 57202,
+        "formattedSize": "55.9 KB"
       }
     },
     {