@kaizen/tailwind 1.3.11 → 1.3.13

package/dist/types/tailwind-presets.d.ts

@@ -1,4 +1,4 @@
-import { CustomThemeConfig } from 'tailwindcss/types/config';
+import { type CustomThemeConfig } from 'tailwindcss/types/config';
 export type KaizenTailwindTheme = Partial<CustomThemeConfig>;
 export type KaizenTailwindPreset = {
     theme: KaizenTailwindTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/tailwind",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "description": "Kaizen Tailwind presets",
   "repository": {
     "type": "git",
@@ -22,14 +22,14 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@kaizen/design-tokens": "10.8.5"
+    "@kaizen/design-tokens": "10.8.7"
   },
   "devDependencies": {
     "classnames": "^2.5.1",
-    "rollup": "^4.27.2",
-    "tailwindcss": "^3.4.15",
-    "tslib": "^2.8.0",
-    "@kaizen/package-bundler": "2.0.2"
+    "rollup": "^4.30.1",
+    "tailwindcss": "^3.4.17",
+    "tslib": "^2.8.1",
+    "@kaizen/package-bundler": "2.0.4"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.4.7"

package/src/_docs/pages/backgrounds/background-color.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./background-color.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './background-color.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/backgrounds/background-color.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { flattenEntries } from '~tailwind/_docs/utils/flattenEntries'

package/src/_docs/pages/borders/border-color.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./border-color.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './border-color.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/borders/border-color.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { flattenEntries } from '~tailwind/_docs/utils/flattenEntries'

package/src/_docs/pages/borders/border-radius.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./border-radius.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './border-radius.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/borders/border-radius.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'

package/src/_docs/pages/borders/border-spacing.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./border-spacing.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './border-spacing.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/borders/border-spacing.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
 import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'

package/src/_docs/pages/borders/border-width.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./border-width.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './border-width.stories'
 
 <Meta of={Examples} />
 
@@ -12,14 +12,13 @@ import * as Examples from "./border-width.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="p-24 font-family-paragraph">
       <p>
-        This document demonstrates the list of border-width suffixes available
-        from the Kaizen preset, by showing what they look like on the
-        &apos;border-&apos; prefix.
+        This document demonstrates the list of border-width suffixes available from the Kaizen
+        preset, by showing what they look like on the &apos;border-&apos; prefix.
       </p>
       <p>
-        Note that there are other border-width prefixes (such as `border-l-`
-        for `border-left-width`) that can be used instead. Available
-        border-width prefixes can be referenced <a href="https://tailwindcss.com/docs/border-width">here</a>.
+        Note that there are other border-width prefixes (such as `border-l-` for
+        `border-left-width`) that can be used instead. Available border-width prefixes can be
+        referenced <a href="https://tailwindcss.com/docs/border-width">here</a>.
       </p>
     </div>
   </Card>

package/src/_docs/pages/borders/border-width.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'

package/src/_docs/pages/configuration.mdx

@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
+import { Meta, Unstyled } from '@storybook/blocks'
+import { InlineNotification } from '~components/Notification'
 
 <Meta title="Guides/Tailwind/Configuration" />
 
@@ -10,7 +10,7 @@ This page provides guidance on potential configuration options and how they work
 - [Extending the Kaizen preset](#extending-the-kaizen-preset)
 - [Customising the important selector](#customising-the-important-selector)
 
-<br/>
+<br />
 
 ## Extending the Kaizen preset
 
@@ -20,18 +20,18 @@ This page provides guidance on potential configuration options and how they work
 To extend upon the preset with values specific to your project, we recommend passing a theme object to `theme.extend`.
 
 ```js
-const { Preset } = require("@kaizen/tailwind")
+const { Preset } = require('@kaizen/tailwind')
 
 module.exports = {
   presets: [Preset],
   theme: {
     extend: {
       colors: {
-        myCoolNewColor: "#ffffff",
-        "purple-100": "lime"
-      }
-    }
-  }
+        'myCoolNewColor': '#ffffff',
+        'purple-100': 'lime',
+      },
+    },
+  },
 }
 ```
 
@@ -46,7 +46,7 @@ Be careful though! While adding in a _new_ field to `colors` won't overwrite any
 
 `<p className="text-purple-200">` ✅ Value from `Preset` not overwritten
 
-<br/>
+<br />
 
 ## Customising the important selector
 
@@ -54,25 +54,28 @@ If the `"#root"` id selector is incompatible with your application wrapper or yo
 
 If this is changed or you are not using the [Frontend Template](https://github.com/cultureamp/frontend-template), be sure that the `important` selector matches to an `id`, `class`, or `HTML Element` within your application, ie:
 
-``` tsx
-<div id="#root">
- {/* Application code */}
-</div>
+```tsx
+<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>

package/src/_docs/pages/contributing.mdx

@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/blocks"
+import { Meta } from '@storybook/blocks'
 
 <Meta title="Guides/Tailwind/Contributing to this package" />
 
 # Contributing
 
-<br/>
+<br />
 
 ## Local Development within Kaizen
 

package/src/_docs/pages/effects/shadow.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./shadow.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './shadow.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/effects/shadow.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'

package/src/_docs/pages/getting-started.mdx

@@ -1,7 +1,7 @@
-import { Meta } from "@storybook/blocks"
-import CssGeneration from "../assets/css-generation.png"
-import InlineFold from "../assets/inline-fold.gif"
-import TailwindPlay from "../assets/tailwind-play.gif"
+import { Meta } from '@storybook/blocks'
+import CssGeneration from '../assets/css-generation.png'
+import InlineFold from '../assets/inline-fold.gif'
+import TailwindPlay from '../assets/tailwind-play.gif'
 
 <Meta title="Guides/Tailwind/Getting Started" />
 
@@ -18,12 +18,12 @@ If your project was created from this template, you should only need to do [Step
 - [3. Add the Tailwind directives](#3-add-the-tailwind-directives)
 - [4. Useful tools](#4-useful-tools)
 
-<br/>
+<br />
 
 ## 1. Install the preset
 
 ```bash
-yarn add -D @kaizen/tailwind
+pnpm add -D @kaizen/tailwind
 ```
 
 ## 2. Implement the Preset
@@ -34,15 +34,15 @@ This will override the default Tailwind preset, and make ours available for use.
 ```js
 // tailwind.config.js
 
-const { Preset } = require("@kaizen/tailwind")
+const { Preset } = require('@kaizen/tailwind')
 
 module.exports = {
   // Glob pattern to match files containing TW classes. May be different for your project.
-  content: ["./**/*.{ts,tsx}"],
+  content: ['./**/*.{ts,tsx}'],
   // Override the default Tailwind preset with the Kaizen one.
   presets: [Preset],
   // This should be a selector that wraps your app. It ensures that your Tailwind classes supersede component styles, by increasing their specificity with the chosen selector.
-  important: "#root",
+  important: '#root',
   // Preflight is a heavy-handed css reset. We recommend disabling it in your project.
   corePlugins: {
     preflight: false,
@@ -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 &apos;Share&apos; - it&apos;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" />
@@ -109,12 +109,12 @@ Ideally you only add the pattern that is used in your repo.
 Calling out that this is still an experimental feature for the VSCode plugin.
 
 ### Inline fold VSCode extension
+
 Using tailwind often results in long class names, that can even span over multiple lines.
 Inline fold is a great extension that hides/ shows long class strings.
 
 Check it out [here](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold):
 
-
 <div className="flex justify-center">
   <img src={InlineFold} alt="Inline fold VSCode extension" />
 </div>
@@ -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).

package/src/_docs/pages/modifiers/media-queries.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./media-queries.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './media-queries.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/modifiers/media-queries.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import { Heading } from '~components/Heading'
 import { Text } from '~components/Text'
 

package/src/_docs/pages/modifiers/pseudo-states.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./pseudo-states.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './pseudo-states.stories'
 
 <Meta of={Examples} />
 
@@ -12,8 +12,8 @@ import * as Examples from "./pseudo-states.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        Pseudo selectors can be used to apply standard Tailwind utility
-        classes under certain pseudo states, such as on hover or focus.
+        Pseudo selectors can be used to apply standard Tailwind utility classes under certain pseudo
+        states, such as on hover or focus.
       </p>
       <p>
         Read more on Tailwind&apos;s pseudo selectors

package/src/_docs/pages/modifiers/pseudo-states.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import { StickerSheet } from '~storybook/components/StickerSheet'
 
 export default {

package/src/_docs/pages/overview.mdx

@@ -1,26 +1,27 @@
-import { Meta } from "@storybook/blocks"
-import AnatomyDiagram from "../assets/tw-anatomy.png"
+import { Meta } from '@storybook/blocks'
+import AnatomyDiagram from '../assets/tw-anatomy.png'
 
 <Meta title="Guides/Tailwind/Overview" />
 
 # Overview
 
-<br/>
+<br />
 
 ## Caveat before use
+
 This is an early release of the Kaizen Tailwind Preset - the API may change and evolve as we receive feedback from our teams. We will endeavour to assist where possible if classes or utilities are updated in the future.
 
 ## What our package does
+
 The `@kaizen/tailwind` package is essentially a custom Tailwind preset. For more information about Tailwind presets, see their docs [here](https://tailwindcss.com/docs/presets). This package does not change how Tailwind works; it only defines the suffixes that can be applied when constructing utility classes.
 To see a list of utilities generated by our preset, see our [Utility Class Reference Docs](/story/systems-tailwind-utility-class-references-utility-class-references--page).
 The following diagram shows the construction of a utility class that adds a background of `blue-400` on hover. The modifier `hover:` and the prefix `bg-` are part of Tailwind by default. The suffix `gray-400` is defined by our preset, and represents one of our color design tokens.
 
-
 <img src={AnatomyDiagram} alt="Tailwind utility class anatomy" />
 
 ```css
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 139 214 / var(--tw-bg-opacity))
+  background-color: rgb(0 139 214 / var(--tw-bg-opacity));
 }
 ```

package/src/_docs/pages/spacing/margin.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./margin.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './margin.stories'
 
 <Meta of={Examples} />
 
@@ -12,12 +12,12 @@ import * as Examples from "./margin.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        The padding prefix &apos;m-&apos; has been used in the examples in this
-        document, which compiles to the `margin` property in CSS.
+        The padding prefix &apos;m-&apos; has been used in the examples in this document, which
+        compiles to the `margin` property in CSS.
       </p>
       <p>
-        Note that there are other prefixes (such as `ml-` for `margin-left`)
-        that can be used instead. Available padding prefixes can be referenced
+        Note that there are other prefixes (such as `ml-` for `margin-left`) that can be used
+        instead. Available padding prefixes can be referenced
         <a href="https://tailwindcss.com/docs/margin#basic-usage">here</a>.
       </p>
     </div>

package/src/_docs/pages/spacing/margin.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'

package/src/_docs/pages/spacing/padding.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./padding.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './padding.stories'
 
 <Meta of={Examples} />
 
@@ -12,12 +12,12 @@ import * as Examples from "./padding.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        The padding prefix &apos;p-&apos; has been used in the examples in this
-        document, which compiles to the `padding` property in CSS.
+        The padding prefix &apos;p-&apos; has been used in the examples in this document, which
+        compiles to the `padding` property in CSS.
       </p>
       <p>
-        Note that there are other prefixes (such as `pl-` for `padding-left`)
-        that can be used instead. Available padding prefixes can be referenced
+        Note that there are other prefixes (such as `pl-` for `padding-left`) that can be used
+        instead. Available padding prefixes can be referenced
         <a href="https://tailwindcss.com/docs/padding#basic-usage">here</a>.
       </p>
     </div>

package/src/_docs/pages/spacing/padding.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'

package/src/_docs/pages/typography/font-family.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./font-family.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './font-family.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/font-family.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
 import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'

package/src/_docs/pages/typography/font-size.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./font-size.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './font-size.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/font-size.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn } from '@storybook/react'
+import { type StoryFn } from '@storybook/react'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
 import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'

package/src/_docs/pages/typography/font-weight.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./font-weight.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './font-weight.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/font-weight.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
 import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'

package/src/_docs/pages/typography/line-height.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./line-height.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './line-height.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/line-height.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'

package/src/_docs/pages/typography/max-text-width.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./max-text-width.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './max-text-width.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/max-text-width.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { type Meta, type StoryFn } from '@storybook/react'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
 import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'

package/src/_docs/pages/typography/text-color.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./text-color.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './text-color.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/text-color.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn } from '@storybook/react'
+import { type StoryFn } from '@storybook/react'
 import classnames from 'classnames'
 import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 import { flattenEntries } from '~tailwind/_docs/utils/flattenEntries'

package/src/_docs/pages/utility-class-helpers-overview.mdx

@@ -1,8 +1,8 @@
-import { Meta, Unstyled } from "@storybook/blocks"
-import { LinkTo } from "~storybook/components/LinkTo"
-import CopyUtilityClass from "~tailwind/_docs/assets/copy-utility-class.gif?url"
-import UtilitySearchResult from "~tailwind/_docs/assets/utility-search-result.png?url"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
+import { Meta, Unstyled } from '@storybook/blocks'
+import { LinkTo } from '~storybook/components/LinkTo'
+import CopyUtilityClass from '~tailwind/_docs/assets/copy-utility-class.gif?url'
+import UtilitySearchResult from '~tailwind/_docs/assets/utility-search-result.png?url'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 
 <Meta title="Guides/Tailwind/Utility Class References/Overview" />
 
@@ -18,26 +18,24 @@ As an example, `borderColor` is listed in this section because we have a custom
 - [Structure](#structure)
 - [Example usage](#example-usage)
 
-<br/>
+<br />
 
 ## Structure
 
 The references provide the following structure for each utility class:
 
 <Unstyled>
-<div className="w-100">
-  <TailwindStoryTemplate
-    compiledCssPropertyName="width"
-    classKeyValues={[{utilityClassName: "text-heading-1", cssProperty: "2.125rem"}]}
-    renderExampleComponent={cssProperty => (
-      <p style={{ fontSize: cssProperty }}>Aa</p>
-    )}
-  />
-</div>
+  <div className="w-100">
+    <TailwindStoryTemplate
+      compiledCssPropertyName="width"
+      classKeyValues={[{ utilityClassName: 'text-heading-1', cssProperty: '2.125rem' }]}
+      renderExampleComponent={(cssProperty) => <p style={{ fontSize: cssProperty }}>Aa</p>}
+    />
+  </div>
 </Unstyled>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### Utility Class
 
@@ -51,7 +49,7 @@ Represents the CSS property that Tailwind will compile for you when it recognize
 
 A visual representation of the CSS generated by the utility class. You can inspect this element in the DOM to see the utility class in action.
 
-<br/>
+<br />
 
 ## Example usage
 
@@ -69,18 +67,21 @@ A visual representation of the CSS generated by the utility class. You can inspe
   <img src={UtilitySearchResult} alt="Utility class search result" />
 </div>
 
-<p>Can&apos;t find it here? That means we don&apos;t have a custom preset for it, and the utility class you need will be unchanged from the Tailwind Default.</p>
+<p>
+  Can&apos;t find it here? That means we don&apos;t have a custom preset for it, and the utility
+  class you need will be unchanged from the Tailwind Default.
+</p>
 <p>Search in the [Tailwind docs](https://tailwindcss.com/docs/installation) instead.</p>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### 2. Find the utility class that compiles to the desired CSS, and copy it
 
 <img src={CopyUtilityClass} alt="Copy utility class" />
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### 3. Add the utility class to the element
 

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

@@ -1,5 +1,5 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import * as Examples from "./working-with-tailwind.stories"
+import { Canvas, Meta } from '@storybook/blocks'
+import * as Examples from './working-with-tailwind.stories'
 
 <Meta of={Examples} />
 
@@ -12,11 +12,11 @@ This page describes and demonstrates the main intended use cases for this packag
 - [Creating bespoke components](#creating-bespoke-components)
 - [Recommended escape hatch](#recommended-escape-hatch)
 
-<br/>
+<br />
 
 ## 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.
 
@@ -33,7 +33,7 @@ Here's a more complex example, where some `<Card>` components and text have been
 
 <Canvas of={Examples.TailwindExampleSpacingAndLayoutsComplex} />
 
-<br/>
+<br />
 
 ## Altering Kaizen components with classNameOverride
 
@@ -46,20 +46,22 @@ 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/>
+<br />
 
 ## Creating bespoke components
+
 Occasionally snowflakes need to be created. This package provides common utilities based on our design tokens, such as color, border-radius, and font-family. Ideally, as much styling of bespoke components should be handled with Tailwind, but keep in mind that scss can still be used when necessary.
 
 Here is an example of our TW package being used to create a bespoke, non-Kaizen component:
 
 <Canvas of={Examples.TailwindExampleSnowflake} />
 
-<br/>
+<br />
 
 ### The container div
+
 - `w-[250px]`: Adds `width: 250px`. This is an example of an arbitrary value being used to inject a custom suffix
 - `rounded`: Adds `border-radius: 7px`. This is one of our custom preset values
 - `border-dashed`: Adds `border-style: dashed`
@@ -68,18 +70,20 @@ Here is an example of our TW package being used to create a bespoke, non-Kaizen
 - `text-center`: Adds `text-align: center`
 
 ### The p tag
+
 - `m-0`: Adds `margin: 0`
 - `p-12`: Adds `padding: .75rem` (12px = 0.75rem)
 - `pl-16`: Adds `padding-left: 1rem` (16px = 1rem)
 - `font-family-paragraph`: Adds `font-family: "Inter", "Noto Sans", ...`
 - `text-blue-500`: Adds `color: #0168b3` (our blue-500 design token)
 
-<br/>
+<br />
 
 ## Recommended Escape Hatch
 
 If you find yourself needing to add styles in a way that is unsupported or otherwise difficult in Tailwind, the recommended alternative is CSS. CSS classes can be added alongside Tailwind utility classes without trouble, and the Tailwind docs recommend some useful post-css plugins [here](https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus).
 
 ### Why not SCSS?
+
 - SCSS is currently a contained option, so writing new SCSS in our codebases is discouraged.
 - The Tailwind docs explicitly recommend <em>not</em> using Tailwind with preprocessors, as it leads to all sorts of quirks and work-arounds. Read more [here](https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus).

package/src/_docs/pages/working-with-tailwind.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { StoryFn } from '@storybook/react'
+import { type StoryFn } from '@storybook/react'
+import { Button } from '~components/Button'
 import { Card } from '~components/Card'
 import { Heading } from '~components/Heading'
 import { CustomSurvey, CustomUnattributedSurvey } from '~components/Illustration'
 import { Skirt } from '~components/Skirt'
-import { Button } from '~components/__actions__/v2'
 import { TailwindStoryTemplate } from '../utils/TailwindStoryTemplate'
 
 export default {

package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/CardContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import { Button } from '~components/Button'
 import { Heading } from '~components/Heading'
-import { Button } from '~components/__actions__/v2'
 
 type CardContentProps = {
   title: string

package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Icon } from '~components/__future__'
+import { Icon } from '~components/__rc__'
 
 type Props = {
   text: string

package/src/tailwind-presets.ts

@@ -1,4 +1,4 @@
-import { CustomThemeConfig } from 'tailwindcss/types/config'
+import { type CustomThemeConfig } from 'tailwindcss/types/config'
 import { tokens } from '@kaizen/design-tokens/js'
 import { kzSpacing } from './kz-spacing'