fix case sensitive

apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc

@@ -0,0 +1,39 @@
+**Default accordion:** See Visual design for the usage recommendations for the default style.
+
+```jsx
+<Accordion>
+  {[
+    { key: 'files', title: 'Your files' },
+    { key: 'shared', title: 'Shared with you' },
+    { key: 'last', title: 'Last item' },
+  ].map(({ key, title }) => (
+    <Accordion.Item key={key} title={title}>
+      <h3>{title}</h3>
+      <p>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam
+        reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!
+      </p>
+    </Accordion.Item>
+  ))}
+</Accordion>
+```
+
+**Lego accordion:** See Visual design for the usage recommendations for the lego style.
+
+```jsx
+<Accordion look="lego" rounded={false}>
+  {[
+    { key: 'files', title: 'Your files' },
+    { key: 'shared', title: 'Shared with you' },
+    { key: 'last', title: 'Last item' },
+  ].map(({ key, title }) => (
+    <Accordion.Item key={key} title={title}>
+      <h3>{title}</h3>
+      <p>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam
+        reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!
+      </p>
+    </Accordion.Item>
+  ))}
+</Accordion>
+```

apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc

@@ -0,0 +1,23 @@
+Breadcrumbs come in one style for navigational consistency across all touch-points.
+
+```jsx
+// Using the Link component (as NextLink) from 'next/LinkLink'
+<Breadcrumb>
+  <NextLink href="#test" passHref legacyBehavior>
+    <Breadcrumb.Item tag="a">Anchor item</Breadcrumb.Item>
+  </NextLink>
+  <NextLink href="#another" passHref legacyBehavior>
+    <Breadcrumb.Item tag="a">Another anchor item</Breadcrumb.Item>
+  </NextLink>
+  <NextLink href="#another" passHref legacyBehavior>
+    <Breadcrumb.Item isDisabled tag="a">
+      Disabled item
+    </Breadcrumb.Item>
+  </NextLink>
+  <NextLink href="#another" passHref legacyBehavior>
+    <Breadcrumb.Item isCurrent tag="a">
+      Last item
+    </Breadcrumb.Item>
+  </NextLink>
+</Breadcrumb>
+```

apps/site/src/content/design-system/components/collapsible/design/examples/content.mdoc

@@ -0,0 +1,87 @@
+### Basic
+
+Used much in the same way as an [accordion or tabcordion](/design-system/components/tabcordions), a Collapsible toggles to open and reveal more content below.
+
+```jsx
+<Collapsible text="Drink me" size="medium">
+  <p>
+    It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll
+    look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little histories
+    about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would
+    not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold
+    it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never
+    forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree with you, sooner
+    or later.
+  </p>
+</Collapsible>
+```
+
+### Sizes
+
+```jsx
+<div>
+  <div className="mb-2">
+    <ComponentTitle>Small</ComponentTitle>
+
+    <Collapsible text="Drink me" size="small">
+      <p>
+        It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll
+        look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little
+        histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because
+        they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn
+        you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and
+        she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree
+        with you, sooner or later.
+      </p>
+    </Collapsible>
+  </div>
+  <hr className="mb-2" />
+  <div className="mb-2">
+    <ComponentTitle>Medium (default)</ComponentTitle>
+
+    <Collapsible text="Drink me" size="medium">
+      <p>
+        It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll
+        look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little
+        histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because
+        they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn
+        you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and
+        she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree
+        with you, sooner or later.
+      </p>
+    </Collapsible>
+  </div>
+  <hr className="mb-2" />
+  <div className="mb-2">
+    <ComponentTitle>Large</ComponentTitle>
+
+    <Collapsible text="Drink me" size="large">
+      <p>
+        It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll
+        look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little
+        histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because
+        they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn
+        you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and
+        she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree
+        with you, sooner or later.
+      </p>
+    </Collapsible>
+  </div>
+  <hr className="mb-2" />
+  <div className="mb-2">
+    <ComponentTitle>XLarge</ComponentTitle>
+
+    <Collapsible text="Drink me" size="xlarge">
+      <p>
+        It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll
+        look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little
+        histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because
+        they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn
+        you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and
+        she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree
+        with you, sooner or later.
+      </p>
+    </Collapsible>
+  </div>
+</div>
+```

apps/site/src/content/design-system/components/compacta/design/default/content.mdoc

@@ -0,0 +1,56 @@
+Below is an example of how a Compacta may be used with fields and inputs. Any form related elements can exist inside a Compacta.
+
+```tsx
+() => {
+  const [inputs, setInputs] = useState({});
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputs((prev: object) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  return (
+    <Compacta>
+      {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
+        <Form>
+          <Form.Group>
+            <Form.Label htmlFor={`primary-${id}`}>Primary</Form.Label>
+            <Form.Hint>Primary title text</Form.Hint>
+            <Input
+              name={`primary-${id}`}
+              value={inputs[`primary-${id}` as keyof typeof inputs] || ''}
+              onChange={e => {
+                handleChange(e);
+                setPrimaryTitle(e.target.value);
+              }}
+            />
+          </Form.Group>
+          <Form.Group>
+            <Form.Label htmlFor={`secondary-${id}`}>Secondary</Form.Label>
+            <Form.Hint>Secondary title text</Form.Hint>
+            <Input
+              name={`secondary-${id}`}
+              value={inputs[`secondary-${id}` as keyof typeof inputs] || ''}
+              onChange={e => {
+                handleChange(e);
+                setSecondaryTitle(e.target.value);
+              }}
+            />
+          </Form.Group>
+          <Form.Group>
+            <Form.Label htmlFor={`tertiary-${id}`}>Tertiary</Form.Label>
+            <Form.Hint>Tertiary title text</Form.Hint>
+            <Input
+              name={`tertiary-${id}`}
+              value={inputs[`tertiary-${id}` as keyof typeof inputs] || ''}
+              onChange={e => {
+                handleChange(e);
+                setTertiaryTitle(e.target.value);
+              }}
+            />
+          </Form.Group>
+        </Form>
+      )}
+    </Compacta>
+  );
+};
+```

apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc

@@ -0,0 +1,13 @@
+The date picker can be used in various sizes to match the UI direction.
+
+```jsx
+() => {
+  const sizes = ['sm', 'md', 'lg', 'xl'];
+  return sizes.map(size => (
+    <div className="py-2" key={size}>
+      <small>size {size}</small>
+      <DatePicker size={size} />
+    </div>
+  ));
+};
+```

apps/site/src/content/design-system/components/input/design/selects/content.mdoc

@@ -0,0 +1,25 @@
+Selects come in four different sizes (heights) with the default being Medium 36px. Ensure when you are designing forms that you alway use the same size across element types.
+
+```tsx
+() => {
+  const DEFAULT_OPTIONS = ['small', 'medium', 'large', 'xlarge'] as const;
+  const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
+  return (
+    <div className="flex flex-col gap-4">
+      {SIZES.map(size => (
+        <div key={size}>
+          <h3 className="typography-body-10 mb-2 text-muted">{size}</h3>
+          <Select size={size}>
+            <option value="">Select an option</option>
+            {DEFAULT_OPTIONS.map(option => (
+              <option value={option} key={option}>
+                {option}
+              </option>
+            ))}
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+};
+```

apps/site/src/content/design-system/components/link/design/inline/content.mdoc

@@ -0,0 +1,38 @@
+The inline option is mainly used when presenting links within a sentence or paragraph, with or without an icon before or after. It can also be used on its own without surrounding text but only when presented in Primary colour with an underline and no icon.
+
+```tsx
+<div className="pl-1 space-y-1">
+  <p className="typography-body-10">
+    Lorem ipsum dolor{' '}
+    <Link href="#" type="inline">
+      look, I'm an inline link
+    </Link>{' '}
+    sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+    doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+  </p>
+  <p className="typography-body-10">
+    Lorem ipsum dolor{' '}
+    <Link href="#" type="inline" underline={false}>
+      look, I'm an inline link with no underline
+    </Link>{' '}
+    sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+    doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+  </p>
+  <p className="typography-body-10">
+    Lorem ipsum dolor{' '}
+    <Link href="#" type="inline" iconBefore={PdfFileIcon}>
+      look, I'm an inline link
+    </Link>{' '}
+    sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+    doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+  </p>
+  <p className="typography-body-10">
+    Lorem ipsum dolor{' '}
+    <Link href="#" type="inline" iconAfter={ArrowRightIcon}>
+      look, I'm an inline link
+    </Link>{' '}
+    sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+    doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+  </p>
+</div>
+```

apps/site/src/content/design-system/components/link/design/standalone/content.mdoc

@@ -0,0 +1,13 @@
+The standalone option is to be used by itself, on its own line, and never within a sentence or paragraph. It must always be used with an [icon](/design-system/foundation/icons) before or after.
+
+```jsx
+<div className="flex flex-col pl-1 space-y-1">
+  <Link href="#">Look I'm a standalone link</Link>
+  <Link href="#" iconBefore={PdfFileIcon}>
+    Look I'm a standalone link
+  </Link>
+  <Link href="#" iconAfter={ArrowRightIcon}>
+    Look I'm a standalone link
+  </Link>
+</div>
+```

apps/site/src/content/design-system/components/pagination/design/pagination/content.mdoc

@@ -0,0 +1,17 @@
+Use this pagination component for navigation within both finite (a set number) and infinite (unknown number) of views.
+
+```tsx
+() => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      current={page}
+      onChange={changedPage => {
+        setPage(changedPage);
+      }}
+      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
+    />
+  );
+};
+```

apps/site/src/content/design-system/components/popover/design/popover/content.mdoc

@@ -0,0 +1,23 @@
+These popovers can appear with or without a heading. For accessibility reasons our popovers are designed to only be dismissed using the close button, or by re-selecting the element that triggered them.
+
+```tsx
+<div className="flex gap-2">
+  <Popover
+    look="link"
+    heading="Heading"
+    content="Small overlays of content for housing secondary information. These are often used to provide explanatory information
+    for complex ideas."
+    icon={() => <HelpIcon className="ml-2" color="hero" />}
+  >
+    With heading
+  </Popover>
+  <Popover
+    look="link"
+    content="Small overlays of content for housing secondary information. These are often used to provide explanatory information
+    for complex ideas."
+    icon={() => <HelpIcon className="ml-2" color="hero" />}
+  >
+    Without heading
+  </Popover>
+</div>
+```

apps/site/src/content/design-system/components/repeater/design/default/content.mdoc

@@ -0,0 +1,11 @@
+Sitting directly under the elements or component it aims to repeat, by selecting the “Add new” button, the item will repeat.
+
+```jsx
+<Repeater>
+  <Form.Group>
+    <Form.Label htmlFor={`test`}>Primary</Form.Label>
+    <Form.Hint>Primary title text</Form.Hint>
+    <Input className="w-full" name="test" onChange={e => console.log(e)} />
+  </Form.Group>
+</Repeater>
+```

apps/site/src/content/design-system/components/switch/design/switches/content.mdoc

@@ -0,0 +1,31 @@
+**Sizes:** We have one simple switch style that is available in four sizes (heights), with the default being Medium 36px. These four sizes align with other form element sizes.
+
+```jsx
+<div className="flex flex-row gap-2">
+  <Switch size="small" label="Small 30px" />
+  <Switch label="Medium 36px" />
+  <Switch size="large" label="Large 42px" />
+  <Switch size="xlarge" label="X Large 48px" />
+</div>
+```
+
+**Block switches:** Use Block switches in small break points to align the label and element to either side of the screen. This behaviour can be set up to work responsively, and change depending on breakpoint.
+
+```jsx
+<div className="flex flex-col gap-2">
+  <Switch block label="I'm a block switch" />
+</div>
+```
+
+**Using responsive breakpoint control:** As well as determining if the switch is a Block switch, the switch's size can also change based on breakpoint.
+
+```jsx
+<div className="flex flex-col gap-2">
+  <Switch
+    block
+    size={{ initial: 'small', lg: 'xlarge', xl: 'small' }}
+    label="Small but Extra large for LG breakpoint"
+  />
+  <Switch block size={{ initial: 'medium', lg: 'small', xl: 'medium' }} label="Small for LG breakpoint only" />
+</div>
+```