@kaizen/tailwind 1.2.13 → 1.3.0

package/dist/cjs/index.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var tailwindPresets = require('./tailwind-presets.cjs');
+exports.Preset = tailwindPresets.Preset;
+exports.kaizenTailwindTheme = tailwindPresets.kaizenTailwindTheme;

package/dist/cjs/kz-spacing.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var designTokens = require('@kaizen/design-tokens');
+var tokenDenyList = ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl", "xxxxl", "xxxxxl", "xs-id", "sm-id", "md-id", "lg-id", "xl-id", "xxl-id", "xxxl-id", "xxxxl-id", "xxxxxl-id"];
+/**
+ * checks if a key from design tokens should be filtered from tailwind
+ */
+var isValidToken = function (key) {
+  return tokenDenyList.indexOf("".concat(key)) < 0;
+};
+// Filters out non-pixel-based spacing tokens, such as shirt sizes
+var filterDenyListValues = function (spacingTokensObject) {
+  var keyValuePairs = Object.entries(spacingTokensObject);
+  return Object.fromEntries(keyValuePairs.filter(function (_a) {
+    var key = _a[0];
+    return isValidToken(key);
+  }));
+};
+var kzSpacing = filterDenyListValues(designTokens.heartTheme.spacing);
+exports.filterDenyListValues = filterDenyListValues;
+exports.kzSpacing = kzSpacing;

package/dist/cjs/tailwind-presets.cjs

@@ -0,0 +1,112 @@
+'use strict';
+
+var tslib = require('tslib');
+var js = require('@kaizen/design-tokens/js');
+var kzSpacing = require('./kz-spacing.cjs');
+
+// Note: changing any token will require to to run `pnpm build` from the root
+var kaizenTailwindTheme = {
+  extend: {
+    maxWidth: {
+      paragraph: "".concat(js.tokens.typography.paragraphBody.maxWidth),
+      "paragraph-lede": "".concat(js.tokens.typography.paragraphIntroLede.maxWidth),
+      "paragraph-sm": "".concat(js.tokens.typography.paragraphSmall.maxWidth),
+      "paragraph-xs": "".concat(js.tokens.typography.paragraphExtraSmall.maxWidth)
+    }
+  },
+  colors: tslib.__assign(tslib.__assign({
+    transparent: "transparent",
+    current: "currentColor",
+    inherit: "inherit"
+  }, js.tokens.color), js.tokens.dataViz),
+  spacing: kzSpacing.kzSpacing,
+  boxShadow: {
+    none: "none",
+    sm: js.tokens.shadow.small.boxShadow,
+    lg: js.tokens.shadow.large.boxShadow
+  },
+  borderRadius: {
+    DEFAULT: "7px",
+    default: "7px",
+    none: "0px",
+    "focus-ring": "10px",
+    full: "100%"
+  },
+  borderWidth: {
+    DEFAULT: "2px",
+    default: "2px",
+    none: "0px",
+    1: "1px",
+    "focus-ring": "2px"
+  },
+  borderColor: tslib.__assign({
+    "default-color": "".concat(js.tokens.border.solid.borderColor),
+    transparent: "".concat(js.tokens.border.borderless.borderColor),
+    "focus-ring": js.tokens.color.blue[600]
+  }, js.tokens.color),
+  fontFamily: {
+    "family-paragraph": ["".concat(js.tokens.typography.paragraphBody.fontFamily)],
+    "family-heading": ["".concat(js.tokens.typography.heading1.fontFamily)],
+    "family-data": ["".concat(js.tokens.typography.dataLarge.fontFamily)],
+    "family-display": ["".concat(js.tokens.typography.display0.fontFamily)]
+  },
+  fontSize: {
+    display: "".concat(js.tokens.typography.display0.fontSize),
+    "heading-1": "".concat(js.tokens.typography.heading1.fontSize),
+    "heading-2": "".concat(js.tokens.typography.heading2.fontSize),
+    "heading-3": "".concat(js.tokens.typography.heading3.fontSize),
+    "heading-4": "".concat(js.tokens.typography.heading4.fontSize),
+    "heading-5": "".concat(js.tokens.typography.heading5.fontSize),
+    "heading-6": "".concat(js.tokens.typography.heading6.fontSize),
+    paragraph: "".concat(js.tokens.typography.paragraphBody.fontSize),
+    "paragraph-lede": "".concat(js.tokens.typography.paragraphIntroLede.fontSize),
+    "paragraph-sm": "".concat(js.tokens.typography.paragraphSmall.fontSize),
+    "paragraph-xs": "".concat(js.tokens.typography.paragraphExtraSmall.fontSize),
+    "data-lg": "".concat(js.tokens.typography.dataLarge.fontSize),
+    "data-md": "".concat(js.tokens.typography.dataMedium.fontSize),
+    "data-sm": "".concat(js.tokens.typography.dataSmall.fontSize),
+    "data-units-lg": "".concat(js.tokens.typography.dataLargeUnits.fontSize),
+    "data-units-md": "".concat(js.tokens.typography.dataMediumUnits.fontSize),
+    "data-units-sm": "".concat(js.tokens.typography.dataSmallUnits.fontSize)
+  },
+  fontWeight: {
+    "weight-paragraph": "400",
+    "weight-paragraph-bold": "600",
+    "weight-data": "700",
+    "weight-heading": "700",
+    "weight-display": "800"
+  },
+  lineHeight: {
+    display: "".concat(js.tokens.typography.display0.lineHeight),
+    "heading-1": "".concat(js.tokens.typography.heading1.lineHeight),
+    "heading-2": "".concat(js.tokens.typography.heading2.lineHeight),
+    "heading-3": "".concat(js.tokens.typography.heading3.lineHeight),
+    "heading-4": "".concat(js.tokens.typography.heading4.lineHeight),
+    "heading-5": "".concat(js.tokens.typography.heading5.lineHeight),
+    "heading-6": "".concat(js.tokens.typography.heading6.lineHeight),
+    paragraph: "".concat(js.tokens.typography.paragraphBody.lineHeight),
+    "paragraph-lede": "".concat(js.tokens.typography.paragraphIntroLede.lineHeight),
+    "paragraph-sm": "".concat(js.tokens.typography.paragraphSmall.lineHeight),
+    "paragraph-xs": "".concat(js.tokens.typography.paragraphExtraSmall.lineHeight),
+    "data-lg": "".concat(js.tokens.typography.dataLarge.lineHeight),
+    "data-md": "".concat(js.tokens.typography.dataMedium.lineHeight),
+    "data-sm": "".concat(js.tokens.typography.dataSmall.lineHeight),
+    "data-units-lg": "".concat(js.tokens.typography.dataLargeUnits.lineHeight),
+    "data-units-md": "".concat(js.tokens.typography.dataMediumUnits.lineHeight),
+    "data-units-sm": "".concat(js.tokens.typography.dataSmallUnits.lineHeight)
+  },
+  letterSpacing: {
+    "letter-spacing-normal": "normal"
+  },
+  // A mix of layout styles
+  screens: {
+    md: js.tokens.layout.breakpoints.medium,
+    // => @media (min-width: 768px) { ... }
+    lg: js.tokens.layout.breakpoints.large // => @media (min-width: 1080px) { ... }
+  }
+};
+var Preset = {
+  theme: kaizenTailwindTheme
+};
+exports.Preset = Preset;
+exports.kaizenTailwindTheme = kaizenTailwindTheme;

package/dist/esm/index.mjs

@@ -0,0 +1 @@
+export { Preset, kaizenTailwindTheme } from './tailwind-presets.mjs';

package/dist/esm/kz-spacing.mjs

@@ -0,0 +1,18 @@
+import { heartTheme } from '@kaizen/design-tokens';
+var tokenDenyList = ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl", "xxxxl", "xxxxxl", "xs-id", "sm-id", "md-id", "lg-id", "xl-id", "xxl-id", "xxxl-id", "xxxxl-id", "xxxxxl-id"];
+/**
+ * checks if a key from design tokens should be filtered from tailwind
+ */
+var isValidToken = function (key) {
+  return tokenDenyList.indexOf("".concat(key)) < 0;
+};
+// Filters out non-pixel-based spacing tokens, such as shirt sizes
+var filterDenyListValues = function (spacingTokensObject) {
+  var keyValuePairs = Object.entries(spacingTokensObject);
+  return Object.fromEntries(keyValuePairs.filter(function (_a) {
+    var key = _a[0];
+    return isValidToken(key);
+  }));
+};
+var kzSpacing = filterDenyListValues(heartTheme.spacing);
+export { filterDenyListValues, kzSpacing };

package/dist/esm/tailwind-presets.mjs

@@ -0,0 +1,109 @@
+import { __assign } from 'tslib';
+import { tokens } from '@kaizen/design-tokens/js';
+import { kzSpacing } from './kz-spacing.mjs';
+
+// Note: changing any token will require to to run `pnpm build` from the root
+var kaizenTailwindTheme = {
+  extend: {
+    maxWidth: {
+      paragraph: "".concat(tokens.typography.paragraphBody.maxWidth),
+      "paragraph-lede": "".concat(tokens.typography.paragraphIntroLede.maxWidth),
+      "paragraph-sm": "".concat(tokens.typography.paragraphSmall.maxWidth),
+      "paragraph-xs": "".concat(tokens.typography.paragraphExtraSmall.maxWidth)
+    }
+  },
+  colors: __assign(__assign({
+    transparent: "transparent",
+    current: "currentColor",
+    inherit: "inherit"
+  }, tokens.color), tokens.dataViz),
+  spacing: kzSpacing,
+  boxShadow: {
+    none: "none",
+    sm: tokens.shadow.small.boxShadow,
+    lg: tokens.shadow.large.boxShadow
+  },
+  borderRadius: {
+    DEFAULT: "7px",
+    default: "7px",
+    none: "0px",
+    "focus-ring": "10px",
+    full: "100%"
+  },
+  borderWidth: {
+    DEFAULT: "2px",
+    default: "2px",
+    none: "0px",
+    1: "1px",
+    "focus-ring": "2px"
+  },
+  borderColor: __assign({
+    "default-color": "".concat(tokens.border.solid.borderColor),
+    transparent: "".concat(tokens.border.borderless.borderColor),
+    "focus-ring": tokens.color.blue[600]
+  }, tokens.color),
+  fontFamily: {
+    "family-paragraph": ["".concat(tokens.typography.paragraphBody.fontFamily)],
+    "family-heading": ["".concat(tokens.typography.heading1.fontFamily)],
+    "family-data": ["".concat(tokens.typography.dataLarge.fontFamily)],
+    "family-display": ["".concat(tokens.typography.display0.fontFamily)]
+  },
+  fontSize: {
+    display: "".concat(tokens.typography.display0.fontSize),
+    "heading-1": "".concat(tokens.typography.heading1.fontSize),
+    "heading-2": "".concat(tokens.typography.heading2.fontSize),
+    "heading-3": "".concat(tokens.typography.heading3.fontSize),
+    "heading-4": "".concat(tokens.typography.heading4.fontSize),
+    "heading-5": "".concat(tokens.typography.heading5.fontSize),
+    "heading-6": "".concat(tokens.typography.heading6.fontSize),
+    paragraph: "".concat(tokens.typography.paragraphBody.fontSize),
+    "paragraph-lede": "".concat(tokens.typography.paragraphIntroLede.fontSize),
+    "paragraph-sm": "".concat(tokens.typography.paragraphSmall.fontSize),
+    "paragraph-xs": "".concat(tokens.typography.paragraphExtraSmall.fontSize),
+    "data-lg": "".concat(tokens.typography.dataLarge.fontSize),
+    "data-md": "".concat(tokens.typography.dataMedium.fontSize),
+    "data-sm": "".concat(tokens.typography.dataSmall.fontSize),
+    "data-units-lg": "".concat(tokens.typography.dataLargeUnits.fontSize),
+    "data-units-md": "".concat(tokens.typography.dataMediumUnits.fontSize),
+    "data-units-sm": "".concat(tokens.typography.dataSmallUnits.fontSize)
+  },
+  fontWeight: {
+    "weight-paragraph": "400",
+    "weight-paragraph-bold": "600",
+    "weight-data": "700",
+    "weight-heading": "700",
+    "weight-display": "800"
+  },
+  lineHeight: {
+    display: "".concat(tokens.typography.display0.lineHeight),
+    "heading-1": "".concat(tokens.typography.heading1.lineHeight),
+    "heading-2": "".concat(tokens.typography.heading2.lineHeight),
+    "heading-3": "".concat(tokens.typography.heading3.lineHeight),
+    "heading-4": "".concat(tokens.typography.heading4.lineHeight),
+    "heading-5": "".concat(tokens.typography.heading5.lineHeight),
+    "heading-6": "".concat(tokens.typography.heading6.lineHeight),
+    paragraph: "".concat(tokens.typography.paragraphBody.lineHeight),
+    "paragraph-lede": "".concat(tokens.typography.paragraphIntroLede.lineHeight),
+    "paragraph-sm": "".concat(tokens.typography.paragraphSmall.lineHeight),
+    "paragraph-xs": "".concat(tokens.typography.paragraphExtraSmall.lineHeight),
+    "data-lg": "".concat(tokens.typography.dataLarge.lineHeight),
+    "data-md": "".concat(tokens.typography.dataMedium.lineHeight),
+    "data-sm": "".concat(tokens.typography.dataSmall.lineHeight),
+    "data-units-lg": "".concat(tokens.typography.dataLargeUnits.lineHeight),
+    "data-units-md": "".concat(tokens.typography.dataMediumUnits.lineHeight),
+    "data-units-sm": "".concat(tokens.typography.dataSmallUnits.lineHeight)
+  },
+  letterSpacing: {
+    "letter-spacing-normal": "normal"
+  },
+  // A mix of layout styles
+  screens: {
+    md: tokens.layout.breakpoints.medium,
+    // => @media (min-width: 768px) { ... }
+    lg: tokens.layout.breakpoints.large // => @media (min-width: 1080px) { ... }
+  }
+};
+var Preset = {
+  theme: kaizenTailwindTheme
+};
+export { Preset, kaizenTailwindTheme };

package/dist/{index.d.ts → types/index.d.ts}

@@ -1,2 +1 @@
 export * from "./tailwind-presets";
-//# sourceMappingURL=index.d.ts.map

package/dist/{kz-height.d.ts → types/kz-height.d.ts}

@@ -10,4 +10,3 @@ export declare const kzHeight: {
     max: string;
     fit: string;
 };
-//# sourceMappingURL=kz-height.d.ts.map

package/dist/{kz-spacing.d.ts → types/kz-spacing.d.ts}

@@ -1,3 +1,2 @@
 export declare const filterDenyListValues: (spacingTokensObject: Record<string, string>) => Record<string, string>;
 export declare const kzSpacing: Record<string, string>;
-//# sourceMappingURL=kz-spacing.d.ts.map

package/dist/{tailwind-presets.d.ts → types/tailwind-presets.d.ts}

@@ -5,4 +5,3 @@ export type KaizenTailwindPreset = {
 };
 export declare const kaizenTailwindTheme: KaizenTailwindTheme;
 export declare const Preset: KaizenTailwindPreset;
-//# sourceMappingURL=tailwind-presets.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/tailwind",
-  "version": "1.2.13",
+  "version": "1.3.0",
   "description": "Kaizen Tailwind presets",
   "repository": {
     "type": "git",
@@ -12,20 +12,31 @@
   },
   "files": [
     "src",
-    "dist"
+    "dist",
+    "js"
   ],
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
   "author": "",
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@kaizen/design-tokens": "10.5.2"
+    "@kaizen/design-tokens": "10.6.0"
+  },
+  "devDependencies": {
+    "classnames": "^2.5.1",
+    "rollup": "^4.20.0",
+    "tailwindcss": "^3.4.9",
+    "tslib": "^2.6.3",
+    "@kaizen/components": "1.60.0",
+    "@kaizen/package-bundler": "1.1.4"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.4.7"
   },
   "scripts": {
-    "build": "pnpm clean && tsc --project tsconfig.dist.json",
+    "build": "pnpm package-bundler build",
     "clean": "rimraf -g '**/*.d.ts' '**/*.js' '**/*.map'",
     "lint:ts": "tsc --noEmit"
   }

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

@@ -0,0 +1,10 @@
+import { Description, Meta, Story } from "@storybook/blocks"
+import * as Examples from "./background-color.stories"
+
+<Meta of={Examples} />
+
+# Background Color
+
+<Description />
+
+<Story of={Examples.BackgroundColor} />

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

@@ -0,0 +1,43 @@
+import React from "react"
+import { Meta, 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 = "bg-"
+const classEntries = flattenEntries(prefix, kaizenTailwindTheme.colors || {})
+
+export default {
+  title:
+    "Guides/Tailwind/Utility Class References/Backgrounds/Background Color",
+  parameters: {
+    a11y: { disable: true },
+    chromatic: { disable: false },
+    docsLayout: "fullPage",
+    docs: {
+      description: {
+        component: utilityDescription(prefix, classEntries[0].utilityClassName),
+      },
+    },
+  },
+} satisfies Meta
+
+export const BackgroundColor: StoryFn<{ isReversed: boolean }> = ({
+  isReversed,
+}) => (
+  <TailwindStoryTemplate
+    compiledCssPropertyName="background-color"
+    classKeyValues={classEntries}
+    renderExampleComponent={(utilityClass): React.ReactElement => (
+      <div
+        className={classnames(
+          "w-[100px] h-[100px] border border-purple-100 rounded",
+          utilityClass
+        )}
+      />
+    )}
+    isReversed={isReversed}
+  />
+)

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

@@ -0,0 +1,10 @@
+import { Description, Meta, Story } from "@storybook/blocks"
+import * as Examples from "./border-color.stories"
+
+<Meta of={Examples} />
+
+# Border Color
+
+<Description />
+
+<Story of={Examples.BorderColor} />

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

@@ -0,0 +1,45 @@
+import React from "react"
+import { Meta, 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 = "border-"
+const classEntries = flattenEntries(
+  prefix,
+  kaizenTailwindTheme.borderColor || {}
+)
+
+export default {
+  title: "Guides/Tailwind/Utility Class References/Borders/Border Color",
+  parameters: {
+    a11y: { disable: true },
+    chromatic: { disable: false },
+    docsLayout: "fullPage",
+    docs: {
+      description: {
+        component: utilityDescription(prefix, classEntries[0].utilityClassName),
+      },
+    },
+  },
+} satisfies Meta
+
+export const BorderColor: StoryFn<{ isReversed: boolean }> = ({
+  isReversed,
+}) => (
+  <TailwindStoryTemplate
+    compiledCssPropertyName="border-color"
+    classKeyValues={classEntries}
+    renderExampleComponent={(utilityClass): React.ReactElement => (
+      <div
+        className={classnames(
+          "rounded w-[100px] h-[100px] border",
+          utilityClass.replace("-DEFAULT", "")
+        )}
+      />
+    )}
+    isReversed={isReversed}
+  />
+)

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

@@ -0,0 +1,10 @@
+import { Description, Meta, Story } from "@storybook/blocks"
+import * as Examples from "./border-radius.stories"
+
+<Meta of={Examples} />
+
+# Border Radius
+
+<Description />
+
+<Story of={Examples.BorderRadius} />

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

@@ -0,0 +1,47 @@
+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 = "rounded-"
+const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
+  Object.entries(kaizenTailwindTheme.borderRadius || []).map(
+    ([suffix, cssProperty]) => ({
+      utilityClassName: `${prefix}${suffix}`,
+      cssProperty,
+    })
+  )
+
+export default {
+  title: "Guides/Tailwind/Utility Class References/Borders/Border Radius",
+  parameters: {
+    a11y: { disable: true },
+    chromatic: { disable: false },
+    docsLayout: "fullPage",
+    docs: {
+      description: {
+        component: utilityDescription(prefix, classEntries[3].utilityClassName),
+      },
+    },
+  },
+} satisfies Meta
+
+export const BorderRadius: StoryFn<{ isReversed: boolean }> = ({
+  isReversed,
+}) => (
+  <TailwindStoryTemplate
+    compiledCssPropertyName="border-radius"
+    classKeyValues={classEntries}
+    renderExampleComponent={(utilityClass): React.ReactElement => (
+      <div
+        className={classnames(
+          "w-[100px] h-[100px] border border-purple-500",
+          utilityClass.replace("-DEFAULT", "")
+        )}
+      />
+    )}
+    isReversed={isReversed}
+  />
+)

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

@@ -0,0 +1,10 @@
+import { Description, Meta, Story } from "@storybook/blocks"
+import * as Examples from "./border-spacing.stories"
+
+<Meta of={Examples} />
+
+# Border Spacing
+
+<Description />
+
+<Story of={Examples.BorderSpacing} />

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

@@ -0,0 +1,52 @@
+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,
+    })
+  )
+
+export default {
+  title: "Guides/Tailwind/Utility Class References/Borders/Border Spacing",
+  parameters: {
+    a11y: { disable: true },
+    chromatic: { disable: false },
+    docsLayout: "fullPage",
+    docs: {
+      description: {
+        component: utilityDescription(prefix, classEntries[0].utilityClassName),
+      },
+    },
+  },
+} satisfies Meta
+
+export const BorderSpacing: StoryFn<{ isReversed: boolean }> = ({
+  isReversed,
+}) => (
+  <TailwindStoryTemplate
+    compiledCssPropertyName="border-spacing"
+    classKeyValues={classEntries}
+    renderExampleComponent={(utilityClass): React.ReactElement => (
+      <table className={utilityClass}>
+        <tbody>
+          <tr>
+            <td className="outline-[black] outline-1 outline">Tutant</td>
+            <td className="outline-[black] outline-1 outline">Meenage</td>
+          </tr>
+          <tr>
+            <td className="outline-[black] outline-1 outline">Neetle</td>
+            <td className="outline-[black] outline-1 outline">Teetles</td>
+          </tr>
+        </tbody>
+      </table>
+    )}
+    isReversed={isReversed}
+  />
+)

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

@@ -0,0 +1,28 @@
+import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
+import { Card } from "~components/Card"
+import * as Examples from "./border-width.stories"
+
+<Meta of={Examples} />
+
+# Border Width
+
+<Description />
+
+<Unstyled>
+  <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.
+      </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>.
+      </p>
+    </div>
+  </Card>
+</Unstyled>
+
+<Story of={Examples.BorderWidth} />