docs: fix broken styles

.changeset/metal-jars-appear.md

@@ -0,0 +1,2 @@
+---
+---

docs/.storybook/preview.css

@@ -97,6 +97,10 @@ pre code {
     }
   }
 
+  .sbdocs-a {
+    font: inherit;
+  }
+
   :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
     margin: 0;
     padding: 0;

docs/pages/app-starter.mdx

@@ -12,8 +12,12 @@ Whilst the Kaizen Design System mainly focuses on the more atomic components in
 
 <Unstyled>
   <InlineNotification persistent type="informative">
-    You won&apos;t need to apply any of the below if you have the latest{' '}
-    <a href="https://github.com/cultureamp/next-template">next-template</a>.
+    {
+      <>
+        You won&apos;t need to apply any of the below if you have the latest{' '}
+        <a href="https://github.com/cultureamp/next-template">next-template</a>.
+      </>
+    }
   </InlineNotification>
 </Unstyled>
 

docs/pages/welcome.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/blocks'
 
 Kaizen aims to provide standard components which enable teams to build UI as efficiently as possibe while maintaining a high level of quality, accessibility and consistency with thle overall platform.
 
-To achieve this, Kaizen provides a set of React components and tokens which represent the foundations of any UI (colours, spacing, font sizes etc.). We aim to have what's represeted here in code equally matching Figma, to enable cross-functional teams to communicate with the same language and ease of translation from design to code.
+To achieve this, Kaizen provides a set of React components and tokens which represent the foundations of any UI (colours, spacing, font sizes etc). We aim to have what's represeted here in code equally matching Figma, to enable cross-functional teams to communicate with the same language and ease of translation from design to code.
 
 ## Getting started
 

packages/components/src/Tag/_docs/Tag.mdx

@@ -17,7 +17,7 @@ import * as TagStories from './Tag.stories'
 <Unstyled>
   <InlineNotification type="cautionary" persistent>
     {`This version of the Tag will soon be deprecated and will be removed in the next major release.
-    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder`}
+    Import Tag from "@kaizen/components/future" for the latest version and view our migration guide in the Future folder`}
   </InlineNotification>
 </Unstyled>
 

packages/components/src/__rc__/Tooltip/_docs/Tooltip.mdx

@@ -87,7 +87,7 @@ Tooltips should never stop a user (or be a gate) from completing a task or perfo
 
 #### Do be concise
 
-Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
+Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don't use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
 
 <DosAndDonts>
   <DoOrDont story={TooltipStories.DoConcise} />
@@ -107,7 +107,7 @@ Good tooltips contain concise and helpful information, keep it short. If you nee
 ### Trigger
 
 - A tooltip trigger needs to be discoverable:
-  - E.g. something like an icon to suggest there’s a tooltip.
+  - E.g. something like an icon to suggest there&apos;s a tooltip.
   - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
 - A tooltip should be shown and accessible on hover, click or on focus events.
 

packages/tailwind/src/_docs/pages/configuration.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta, Unstyled } from '@storybook/blocks'
 import { InlineNotification } from '~components/Notification'
 
 <Meta title="Guides/Tailwind/Configuration" />
@@ -58,17 +58,24 @@ If this is changed or you are not using the [Frontend Template](https://github.c
 <div id="#root">{/* Application code */}</div>
 ```
 
-<InlineNotification persistent type="cautionary" style="inline" title="Changing the selector">
-  We advise using an <code>id</code> with <code>&quot;#root&quot;</code> as the default selector.
-  Using different id&apos;s, classes or HTML elements like <code>body</code> as the selector could
-  result in:
-  <ul>
-    <li>
-      Utility classes not superseding Kaizen defaults when using <code>classNameOverride</code>
-    </li>
-    <li>
-      Duplication of utillity classes in your CSS bundle caused by consuming components with
-      different <code>important</code> selectors
-    </li>
-  </ul>
-</InlineNotification>
+<Unstyled>
+  <InlineNotification persistent type="cautionary" style="inline" title="Changing the selector">
+    {
+      <>
+        We advise using an <code>id</code> with <code>&quot;#root&quot;</code> as the default
+        selector. Using different id&apos;s, classes or HTML elements like <code>body</code> as the
+        selector could result in:
+        <ul>
+          <li>
+            Utility classes not superseding Kaizen defaults when using{' '}
+            <code>classNameOverride</code>
+          </li>
+          <li>
+            Duplication of utillity classes in your CSS bundle caused by consuming components with
+            different <code>important</code> selectors
+          </li>
+        </ul>
+      </>
+    }
+  </InlineNotification>
+</Unstyled>

packages/tailwind/src/_docs/pages/getting-started.mdx

@@ -23,7 +23,7 @@ If your project was created from this template, you should only need to do [Step
 ## 1. Install the preset
 
 ```bash
-yarn add -D @kaizen/tailwind
+pnpm add -D @kaizen/tailwind
 ```
 
 ## 2. Implement the Preset
@@ -50,7 +50,7 @@ module.exports = {
 }
 ```
 
-For preset configuration options, see our [configuration docs](/story/systems-tailwind-configuration--page)
+For preset configuration options, see our [configuration docs](/story/systems-tailwind-configuration--page).
 
 ## 3. Add the Tailwind Directives
 
@@ -71,11 +71,11 @@ For more information, see [here](https://tailwindcss.com/docs/functions-and-dire
 
 Tailwind Play is an online code sandbox with Tailwind set up out of the box. The Kaizen Team has created an instance with the Kaizen Preset values [here](https://play.tailwindcss.com/OUogvUgXQR)
 
-Use this playground to get familiar with our preset, test out new config extensions, create a quick proof of concept, or share code examples with other engineers. Feel free to hit ‘Share’ - it’ll create a new url without overriding the one provided here.
+Use this playground to get familiar with our preset, test out new config extensions, create a quick proof of concept, or share code examples with other engineers. Feel free to hit 'Share' - it'll create a new url without overriding the one provided here.
 
 <img src={TailwindPlay} alt="Tailwind Play" />
 
-The playground also has a great “Generated CSS” feature that let’s you see which css classes are generated by your preset when you implement tailwind utilities. It’s a great way to see what Tailwind is doing under the hood.
+The playground also has a great “Generated CSS” feature that let&apos;s you see which css classes are generated by your preset when you implement tailwind utilities. It&apos;s a great way to see what Tailwind is doing under the hood.
 
 <div className="flex justify-center">
   <img src={CssGeneration} alt="CSS Generation" />
@@ -122,4 +122,4 @@ Check it out [here](https://marketplace.visualstudio.com/items?itemName=moalamri
 ### Prettier plugin
 
 Tailwind now has prettier support! 🎉 This [prettier plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) will order your classnames for you.
-We’d highly recommend it for the sake of consistency. The Tailwind docs even have a guide [here](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier).
+We&apos;d highly recommend it for the sake of consistency. The Tailwind docs even have a guide [here](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier).

packages/tailwind/src/_docs/pages/working-with-tailwind.mdx

@@ -16,7 +16,7 @@ This page describes and demonstrates the main intended use cases for this packag
 
 ## Spacing and layouts
 
-For information about Cultureamp's spacing and layout system in general, see [here](/story/systems-layout-and-spacing--page)
+For information about Cultureamp's spacing and layout system in general, see [here](/story/systems-layout-and-spacing--page).
 
 When building a page, ideally [Kaizen](https://github.com/cultureamp/kaizen-design-system) components should be used as much as possible, with the front-end engineer responsible for the spacing between them. In these cases, our Tailwind preset makes it easy by adding our spacing tokens to Tailwind's core spacing modules.
 
@@ -46,7 +46,7 @@ In this example, a Tailwind css rule is being applied to a Kaizen `<Heading />`
 
 <Canvas of={Examples.TailwindExampleClassNameOverrideHeading} />
 
-- first-letter:capitalize: Adds text-transform: capitalize on the first-letter pseudo selector
+- `first-letter:capitalize`: Adds text-transform: capitalize on the first-letter pseudo selector
 
 <br />