@kaizen/tailwind 1.3.12 → 1.3.14

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.12",
+  "version": "1.3.14",
   "description": "Kaizen Tailwind presets",
   "repository": {
     "type": "git",
@@ -22,14 +22,14 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@kaizen/design-tokens": "10.8.6"
+    "@kaizen/design-tokens": "10.8.8"
   },
   "devDependencies": {
     "classnames": "^2.5.1",
-    "rollup": "^4.28.0",
-    "tailwindcss": "^3.4.15",
+    "rollup": "^4.35.0",
+    "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1",
-    "@kaizen/package-bundler": "2.0.3"
+    "@kaizen/package-bundler": "2.0.5"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.4.7"

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.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.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.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.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,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>

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

@@ -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).

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.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

@@ -7,10 +7,6 @@ import AnatomyDiagram from '../assets/tw-anatomy.png'
 
 <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.

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.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.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.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.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.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.stories.tsx

@@ -1,11 +1,11 @@
 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'
 
 const prefix = 'max-w-'
-const classEntries = Object.entries(kaizenTailwindTheme.extend.maxWidth || []).map(
+const classEntries = Object.entries(kaizenTailwindTheme.extend.maxWidth ?? []).map(
   ([suffix, cssPropertyArr]) => ({
     utilityClassName: `${prefix}${suffix}`,
     cssProperty: cssPropertyArr as string,

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/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 />
 

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/__next__'
 
 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'