@kaizen/tailwind 1.3.9 → 1.3.11

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

@@ -1,24 +1,23 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, 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 = "border-spacing-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.spacing || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'border-spacing-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.spacing ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Borders/Border Spacing",
+  title: 'Guides/Tailwind/Utility Class References/Borders/Border Spacing',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -27,9 +26,7 @@ export default {
   },
 } satisfies Meta
 
-export const BorderSpacing: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const BorderSpacing: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="border-spacing"
     classKeyValues={classEntries}
@@ -47,6 +44,5 @@ export const BorderSpacing: StoryFn<{ isReversed: boolean }> = ({
         </tbody>
       </table>
     )}
-    isReversed={isReversed}
   />
 )

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

@@ -1,25 +1,24 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "border-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.borderWidth || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'border-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.borderWidth ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Borders/Border Width",
+  title: 'Guides/Tailwind/Utility Class References/Borders/Border Width',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[1].utilityClassName),
@@ -28,20 +27,17 @@ export default {
   },
 } satisfies Meta
 
-export const BorderWidth: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const BorderWidth: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="border-width"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <div
         className={classnames(
-          "w-[100px] h-[100px] border rounded",
-          !utilityClass.includes("-DEFAULT") && utilityClass
+          'w-[100px] h-[100px] border rounded',
+          !utilityClass.includes('-DEFAULT') && utilityClass,
         )}
       />
     )}
-    isReversed={isReversed}
   />
 )

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

@@ -1,25 +1,24 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "shadow-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.boxShadow || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'shadow-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.boxShadow ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Effects/Box Shadow",
+  title: 'Guides/Tailwind/Utility Class References/Effects/Box Shadow',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -28,13 +27,12 @@ export default {
   },
 } satisfies Meta
 
-export const BoxShadow: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
+export const BoxShadow: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="box-shadow"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
-      <div className={classnames("w-[100px] h-[100px]", utilityClass)} />
+      <div className={classnames('w-[100px] h-[100px]', utilityClass)} />
     )}
-    isReversed={isReversed}
   />
 )

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

@@ -1,17 +1,16 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import { Text } from "~components/Text"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import { Heading } from '~components/Heading'
+import { Text } from '~components/Text'
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Modifiers/Media Queries",
+  title: 'Guides/Tailwind/Utility Class References/Modifiers/Media Queries',
   parameters: {
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       a11y: { disable: true },
       description: {
-        component:
-          "Require @kaizen/tailwind and add it into your tailwind config",
+        component: 'Require @kaizen/tailwind and add it into your tailwind config',
       },
     },
   },
@@ -22,11 +21,7 @@ type QueryInfoProps = {
   selectorValue: string
   children: React.ReactElement
 }
-const QueryInfo = ({
-  selector,
-  selectorValue,
-  children,
-}: QueryInfoProps): React.ReactElement => (
+const QueryInfo = ({ selector, selectorValue, children }: QueryInfoProps): React.ReactElement => (
   <div className="my-12">
     <Text variant="intro-lede">Pseudo selector: {selector}</Text>
     <Text variant="body">Breakpoint: {selectorValue}</Text>
@@ -39,8 +34,8 @@ const QueryInfo = ({
 export const MediaQueries: StoryFn = () => (
   <div className="py-32">
     <Heading tag="p" variant="heading-4" classNameOverride="text-center">
-      These breakpoints activate <em>over</em> a certain screen width. Meaning
-      that bg-blue-400 will be applied when the screen gets <em>wider</em>.
+      These breakpoints activate <em>over</em> a certain screen width. Meaning that bg-blue-400 will
+      be applied when the screen gets <em>wider</em>.
     </Heading>
     <QueryInfo selector="md" selectorValue="768px">
       <div className="border-solid md:bg-blue-400 h-[50px] w-full rounded" />
@@ -54,26 +49,21 @@ export const MediaQueries: StoryFn = () => (
 export const ArbitraryMediaQueries: StoryFn = () => (
   <div className="py-32">
     <Heading tag="p" variant="heading-4" classNameOverride="text-center">
-      Bespoke, one-off media queries can be created with arbitrary values. See
-      the{" "}
-      <a href="https://tailwindcss.com/docs/responsive-design#arbitrary-values">
-        Tailwind docs
-      </a>{" "}
+      Bespoke, one-off media queries can be created with arbitrary values. See the{' '}
+      <a href="https://tailwindcss.com/docs/responsive-design#arbitrary-values">Tailwind docs</a>{' '}
       for more info.
     </Heading>
 
     <div className="py-32">
       <Text variant="body">
-        <strong>Min-width breakpoint</strong> (applied when the screen gets{" "}
-        <em>wider</em>)
+        <strong>Min-width breakpoint</strong> (applied when the screen gets <em>wider</em>)
       </Text>
       <Text variant="body">In this example: min-[500px]:bg-blue-400</Text>
       <div className="border-solid min-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />
     </div>
 
     <Text variant="body">
-      <strong>Max-width breakpoint</strong> (applied when the screen gets{" "}
-      <em>slimmer</em>)
+      <strong>Max-width breakpoint</strong> (applied when the screen gets <em>slimmer</em>)
     </Text>
     <Text variant="body">In this example: max-[500px]:bg-blue-400</Text>
     <div className="border-solid max-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />

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

@@ -1,30 +1,24 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { StickerSheet } from "~storybook/components/StickerSheet"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import { StickerSheet } from '~storybook/components/StickerSheet'
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Modifiers/Pseudo Selectors",
+  title: 'Guides/Tailwind/Utility Class References/Modifiers/Pseudo Selectors',
   parameters: {
     a11y: { disable: true },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component:
-          "Add a modifier before a standard tailwind utility class to have it apply in certain states. For example, hover:text-blue-500 will set the font color to blue-500 on hover.",
+          'Add a modifier before a standard tailwind utility class to have it apply in certain states. For example, hover:text-blue-500 will set the font color to blue-500 on hover.',
       },
     },
   },
 } satisfies Meta
 
-export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
-  <StickerSheet isReversed={isReversed}>
-    <StickerSheet.Header
-      headings={["Utility Class", "Compiled CSS", "Example"]}
-    />
-    <StickerSheet.Row rowTitle="hover">
+export const PseudoSelectors: StoryFn = () => (
+  <StickerSheet headers={['Utility Class', 'Compiled CSS', 'Example']}>
+    <StickerSheet.Row header="hover">
       <p className="font-family-paragraph">hover:bg-blue-200</p>
       <p className="font-family-paragraph">background-color: #bde2f5</p>
       <button
@@ -34,7 +28,7 @@ export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({
         Hover me
       </button>
     </StickerSheet.Row>
-    <StickerSheet.Row rowTitle="focus">
+    <StickerSheet.Row header="focus">
       <p className="font-family-paragraph">focus:bg-blue-200</p>
       <p className="font-family-paragraph">background-color: #bde2f5</p>
       <button

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

@@ -1,25 +1,24 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "m-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.spacing || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'm-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.spacing ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Spacing/Margin",
+  title: 'Guides/Tailwind/Utility Class References/Spacing/Margin',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -28,22 +27,18 @@ export default {
   },
 } satisfies Meta
 
-export const Margin: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
+export const Margin: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="margin"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <div className="w-min border rounded">
         <p
-          className={classnames(
-            "p-4 border border-dashed w-min rounded bg-blue-100",
-            utilityClass
-          )}
+          className={classnames('p-4 border border-dashed w-min rounded bg-blue-100', utilityClass)}
         >
           Margin
         </p>
       </div>
     )}
-    isReversed={isReversed}
   />
 )

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

@@ -1,25 +1,24 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "p-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.spacing || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'p-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.spacing ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Spacing/Padding",
+  title: 'Guides/Tailwind/Utility Class References/Spacing/Padding',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -28,20 +27,14 @@ export default {
   },
 } satisfies Meta
 
-export const Padding: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
+export const Padding: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="padding"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
-      <p
-        className={classnames(
-          "border border-purple-100 w-min rounded bg-blue-100",
-          utilityClass
-        )}
-      >
+      <p className={classnames('border border-purple-100 w-min rounded bg-blue-100', utilityClass)}>
         Padding
       </p>
     )}
-    isReversed={isReversed}
   />
 )

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

@@ -1,24 +1,23 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, 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 = "font-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.fontFamily || []).map(
-    ([suffix, cssPropertyArr]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty: cssPropertyArr[0],
-    })
-  )
+const prefix = 'font-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.fontFamily ?? [],
+).map(([suffix, cssPropertyArr]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty: cssPropertyArr[0],
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Font Family",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Font Family',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -27,15 +26,12 @@ export default {
   },
 } satisfies Meta
 
-export const FontFamily: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const FontFamily: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="font-family"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <p className={utilityClass}>Aa</p>
     )}
-    isReversed={isReversed}
   />
 )

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

@@ -1,23 +1,23 @@
-import React from "react"
-import { StoryFn } from "@storybook/react"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { 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 = "text-"
-const classEntries = Object.entries(kaizenTailwindTheme.fontSize || []).map(
+const prefix = 'text-'
+const classEntries = Object.entries(kaizenTailwindTheme.fontSize ?? []).map(
   ([suffix, cssProperty]) => ({
     utilityClassName: `${prefix}${suffix}`,
     cssProperty,
-  })
+  }),
 )
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Font Size",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Font Size',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -26,13 +26,12 @@ export default {
   },
 }
 
-export const FontSize: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
+export const FontSize: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="font-size"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <p className={utilityClass}>Aa</p>
     )}
-    isReversed={isReversed}
   />
 )

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

@@ -1,24 +1,23 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, 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 = "font-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.fontWeight || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'font-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.fontWeight ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Font Weight",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Font Weight',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -27,15 +26,12 @@ export default {
   },
 } satisfies Meta
 
-export const FontWeight: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const FontWeight: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="font-weight"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <p className={utilityClass}>Aa</p>
     )}
-    isReversed={isReversed}
   />
 )