@kaizen/tailwind 1.3.10 → 1.3.12

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.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,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.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,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.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,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.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,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}
   />
 )

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,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 = "leading-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.lineHeight || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'leading-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.lineHeight ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Line Height",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Line Height',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -28,17 +27,12 @@ export default {
   },
 } satisfies Meta
 
-export const LineHeight: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const LineHeight: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="line-height"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
-      <p className={classnames("w-0", utilityClass)}>
-        Tutant Meenage Neetle Teetles
-      </p>
+      <p className={classnames('w-0', utilityClass)}>Tutant Meenage Neetle Teetles</p>
     )}
-    isReversed={isReversed}
   />
 )

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,23 +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 = "max-w-"
-const classEntries = Object.entries(
-  kaizenTailwindTheme.extend.maxWidth || []
-).map(([suffix, cssPropertyArr]) => ({
-  utilityClassName: `${prefix}${suffix}`,
-  cssProperty: cssPropertyArr as string,
-}))
+const prefix = 'max-w-'
+const classEntries = Object.entries(kaizenTailwindTheme.extend.maxWidth || []).map(
+  ([suffix, cssPropertyArr]) => ({
+    utilityClassName: `${prefix}${suffix}`,
+    cssProperty: cssPropertyArr as string,
+  }),
+)
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Max Text Width",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Max Text Width',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -27,34 +27,30 @@ export default {
 } satisfies Meta
 
 const fontClasses = {
-  "max-w-paragraph-lede": "text-paragraph-lede leading-paragraph-lede",
-  "max-w-paragraph": "text-paragraph leading-paragraph",
-  "max-w-paragraph-sm": "text-paragraph-sm leading-paragraph-sm",
-  "max-w-paragraph-xs": "text-paragraph-xs leading-paragraph-xs",
+  'max-w-paragraph-lede': 'text-paragraph-lede leading-paragraph-lede',
+  'max-w-paragraph': 'text-paragraph leading-paragraph',
+  'max-w-paragraph-sm': 'text-paragraph-sm leading-paragraph-sm',
+  'max-w-paragraph-xs': 'text-paragraph-xs leading-paragraph-xs',
 }
 
 const getFontClass = (utilityClass: string): string =>
-  fontClasses[utilityClass as keyof typeof fontClasses] || ""
+  fontClasses[utilityClass as keyof typeof fontClasses] || ''
 
-export const MaxTextWidth: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const MaxTextWidth: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="max-width"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <>
-        <p className={[utilityClass, getFontClass(utilityClass)].join(" ")}>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, optio
-          incidunt explicabo facilis ipsam, porro magni vero libero itaque rerum
-          deserunt quo molestiae expedita dolor? Alias iusto ad maiores odit! (
-          {[utilityClass, getFontClass(utilityClass)].join(" ")})
+        <p className={[utilityClass, getFontClass(utilityClass)].join(' ')}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, optio incidunt explicabo
+          facilis ipsam, porro magni vero libero itaque rerum deserunt quo molestiae expedita dolor?
+          Alias iusto ad maiores odit! ({[utilityClass, getFontClass(utilityClass)].join(' ')})
         </p>
         <code className="text-paragraph-sm bg-gray-300 py-4 px-8">
-          {[utilityClass, getFontClass(utilityClass)].join(" ")}
+          {[utilityClass, getFontClass(utilityClass)].join(' ')}
         </code>
       </>
     )}
-    isReversed={isReversed}
   />
 )

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,20 +1,20 @@
-import React from "react"
-import { StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { flattenEntries } from "~tailwind/_docs/utils/flattenEntries"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { flattenEntries } from '~tailwind/_docs/utils/flattenEntries'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "text-"
-const classEntries = flattenEntries(prefix, kaizenTailwindTheme.colors || {})
+const prefix = 'text-'
+const classEntries = flattenEntries(prefix, kaizenTailwindTheme.colors ?? {})
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Text Color",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Text Color',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -23,7 +23,7 @@ export default {
   },
 }
 
-export const TextColor: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
+export const TextColor: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="color"
     classKeyValues={classEntries}
@@ -31,22 +31,21 @@ export const TextColor: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
       <div className="flex items-center h-100">
         <p
           className={classnames(
-            "font-family-paragraph p-8 rounded font-weight-display text-heading-3 m-0 mr-16",
-            utilityClass
+            'font-family-paragraph p-8 rounded font-weight-display text-heading-3 m-0 mr-16',
+            utilityClass,
           )}
         >
           Light bg
         </p>
         <p
           className={classnames(
-            "font-family-paragraph p-8 bg-[black] rounded font-weight-display text-heading-3 m-0",
-            utilityClass
+            'font-family-paragraph p-8 bg-[black] rounded font-weight-display text-heading-3 m-0',
+            utilityClass,
           )}
         >
           Dark bg
         </p>
       </div>
     )}
-    isReversed={isReversed}
   />
 )