@kaizen/tailwind 1.2.14 → 1.3.0

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

@@ -0,0 +1,100 @@
+import React from "react"
+import { StoryFn } from "@storybook/react"
+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 {
+  title: "Guides/Tailwind/Working with Tailwind",
+}
+
+export const TailwindExampleSpacingAndLayouts: StoryFn = () => (
+  <div className="flex justify-center border-solid p-16">
+    <Button label="Kaizen Button" primary />
+  </div>
+)
+
+export const TailwindExampleSpacingAndLayoutsComplex: StoryFn = () => (
+  <>
+    <Skirt>
+      <Heading variant="heading-2" color="white" classNameOverride="pt-24">
+        Laid out with Tailwind
+      </Heading>
+      <Card variant="informative" classNameOverride="mt-24">
+        <div className="h-[300px]" />
+      </Card>
+    </Skirt>
+    {/* Adds flex, makes the width 100% and centers content */}
+    <div className="flex w-full justify-center">
+      {/* Adds margins, width, and max width */}
+      <div className="mx-72 my-24 w-full  max-w-[1392px]">
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a
+          className="font-weight-[500px] font-family-paragraph text-heading-5 text-blue-500"
+          href="#"
+        >
+          Clickable link
+        </a>
+        {/* Adds spacing with margin-top */}
+        <p className="mt-12 font-family-paragraph text-heading-6 font-weight-paragraph leading-paragraph-sm text-purple-800">
+          Supporting text
+        </p>
+        {/* Adds margin-top, flex, and a height of 200px */}
+        <div className="mt-64 flex h-[200px]">
+          {[0, 1, 2, 3].map(index => (
+            <Card
+              key={index}
+              variant="informative"
+              classNameOverride="mr-24 last:mr-0 w-full"
+            >
+              {/* Adds height and width of 100% */}
+              <div className="w-full h-100" />
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  </>
+)
+
+export const TailwindExampleClassNameOverrideMargin: StoryFn = () => (
+  <div className="flex justify-center">
+    {/* Adds margin-right: 24px */}
+    <Card classNameOverride="mr-24">
+      <TailwindStoryTemplate.CardContent
+        title="Card 1"
+        illustration={<CustomSurvey alt="custom-survey" />}
+      />
+    </Card>
+    <Card>
+      <TailwindStoryTemplate.CardContent
+        title="Card 2"
+        illustration={
+          <CustomUnattributedSurvey alt="custom-unattributed-survey" />
+        }
+      />
+    </Card>
+  </div>
+)
+
+export const TailwindExampleClassNameOverrideHeading: StoryFn = () => (
+  <Heading variant="heading-1" classNameOverride="first-letter:capitalize">
+    capitalize me with tailwind
+  </Heading>
+)
+
+export const TailwindExampleSnowflake: StoryFn = () => (
+  <div className="flex justify-center">
+    <div className="w-[250px] rounded border-dashed border-red-500 bg-blue-100">
+      <p className="m-0 p-12 pl-16 font-family-paragraph text-blue-500 text-center">
+        Not a Kaizen Component
+      </p>
+    </div>
+  </div>
+)

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

@@ -0,0 +1,81 @@
+import React, { useState } from "react"
+import { InlineNotification } from "~components/Notification"
+import { StickerSheet } from "~storybook/components/StickerSheet"
+import { CardContent } from "./components/CardContent"
+import { CodeSnippet } from "./components/CodeSnippet"
+
+type Props = {
+  compiledCssPropertyName: string
+  classKeyValues: Array<{ utilityClassName: string; cssProperty: string }>
+  renderExampleComponent: (utilityClass: string) => React.ReactElement
+  isReversed?: boolean
+}
+
+export const TailwindStoryTemplate = ({
+  compiledCssPropertyName,
+  classKeyValues,
+  renderExampleComponent,
+  isReversed = false,
+}: Props): React.ReactElement => {
+  const [copiedText, setCopiedText] = useState<null | string>(null)
+
+  return (
+    <div className="w-full">
+      <StickerSheet
+        className="border-none w-full"
+        isReversed={isReversed}
+        border={1}
+        rules="rows"
+      >
+        <StickerSheet.Header
+          className="text-left border-b border-gray-400"
+          headings={["Utility Class", "Compiled CSS", "Example"]}
+        />
+        <StickerSheet.Body>
+          {classKeyValues.map((presetData, _index) => {
+            const { utilityClassName, cssProperty } = presetData
+            return (
+              <StickerSheet.Row
+                key={_index}
+                rowTitle=""
+                className="border-b-1 border-gray-400"
+              >
+                <div className="mr-32 min-w-max max-w-[300px]">
+                  <CodeSnippet
+                    text={utilityClassName.replace("-DEFAULT", "")}
+                    onCopy={(text: string): void => setCopiedText(text)}
+                  />
+                </div>
+                <p className="mr-32 w-max font-family-paragraph">
+                  {compiledCssPropertyName}: {cssProperty}
+                </p>
+                <div className="font-family-paragraph">
+                  {renderExampleComponent(utilityClassName)}
+                </div>
+              </StickerSheet.Row>
+            )
+          })}
+        </StickerSheet.Body>
+      </StickerSheet>
+      <div className="fixed top-[10px] left-[10px]">
+        {copiedText && (
+          <InlineNotification
+            type="positive"
+            hideCloseIcon
+            onHide={(): void => setCopiedText(null)}
+            headingProps={{
+              children: "Copied to clipboard: ",
+              variant: "heading-6",
+            }}
+          >
+            {copiedText}
+          </InlineNotification>
+        )}
+      </div>
+    </div>
+  )
+}
+
+TailwindStoryTemplate.CardContent = CardContent
+
+TailwindStoryTemplate.displayName = "TailwindStoryTemplate"

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

@@ -0,0 +1,26 @@
+import React from "react"
+import { Heading } from "~components/Heading"
+import { Button } from "~components/__actions__/v2"
+
+type CardContentProps = {
+  title: string
+  illustration: React.ReactElement
+}
+
+export const CardContent = ({
+  title,
+  illustration,
+}: CardContentProps): React.ReactElement => (
+  <div className="flex w-[400px] flex-col items-center p-24 pt-48">
+    <Heading variant="heading-3">{title}</Heading>
+    <p className="pt-12 pb-24 text-center font-family-paragraph text-heading-6 font-weight-paragraph text-purple-800">
+      Lorem ipsum oogum boogum. Tutant meenage neetle teetles.
+    </p>
+    <div className="w-[200px]">{illustration}</div>
+    <div className="pt-24">
+      <Button label="Button" />
+    </div>
+  </div>
+)
+
+CardContent.displayName = "CardContent"

package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/index.ts

@@ -0,0 +1 @@
+export * from "./CardContent"

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

@@ -0,0 +1,36 @@
+import React, { useState } from "react"
+import { ClosedIcon, SurveysIcon } from "~components/Icon"
+
+type Props = {
+  text: string
+  onCopy?: (text: string) => void
+}
+
+export const CodeSnippet = ({ text, onCopy }: Props): React.ReactElement => {
+  const [copyIconIsChecked, setCopyIconIsChecked] = useState(false)
+  const handleCopy = (utilityClassNameName: string): void => {
+    navigator.clipboard.writeText(text)
+    setCopyIconIsChecked(true)
+    onCopy && onCopy(utilityClassNameName)
+  }
+
+  return (
+    <button
+      type="button"
+      className="bg-[#00182e] h-min rounded px-12 border-none cursor-pointer w-full"
+      onClick={(): void => handleCopy(text)}
+      onBlur={(): void => setCopyIconIsChecked(false)}
+    >
+      <p className="font-family-paragraph text-white flex justify-between items-center">
+        <span>{text}</span>
+        <span className="text-underline text-white">
+          {copyIconIsChecked ? (
+            <ClosedIcon role="img" aria-label="copied" />
+          ) : (
+            <SurveysIcon role="img" aria-label="copy" />
+          )}
+        </span>
+      </p>
+    </button>
+  )
+}

package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/index.ts

@@ -0,0 +1 @@
+export * from "./CodeSnippet"

package/src/_docs/utils/TailwindStoryTemplate/index.ts

@@ -0,0 +1 @@
+export * from "./TailwindStoryTemplate"

package/src/_docs/utils/flattenEntries.ts

@@ -0,0 +1,37 @@
+type RecursiveKeyValuePair<K extends keyof any = string, V = string> = {
+  [key: string]: V | RecursiveKeyValuePair<K, V>
+}
+// needed until we can use satisfies to create a similar object to tailwind class consumption
+type ResolvableTo<T> = T | ((utils: any) => T)
+
+export const flattenEntries = (
+  prefix: string,
+  themeObj: ResolvableTo<RecursiveKeyValuePair<string, string>>
+): Array<{
+  utilityClassName: string
+  cssProperty: string
+}> => {
+  const classKeyVal: string[][] = Object.entries(themeObj || [])
+  const flattenedEntries: Array<{
+    utilityClassName: string
+    cssProperty: string
+  }> = []
+  classKeyVal.forEach(colorGroup => {
+    const [classModifier, cssProperty] = colorGroup
+    if (typeof cssProperty === "string") {
+      flattenedEntries.push({
+        utilityClassName: `${prefix}${classModifier}`,
+        cssProperty,
+      })
+    } else {
+      Object.entries(cssProperty as Record<string, string>).forEach(
+        classNamePair =>
+          flattenedEntries.push({
+            utilityClassName: `${prefix}${classModifier}-${classNamePair[0]}`,
+            cssProperty: classNamePair[1],
+          })
+      )
+    }
+  })
+  return flattenedEntries
+}

package/src/_docs/utils/utilityDescription.ts

@@ -0,0 +1,5 @@
+export const utilityDescription = (
+  prefix: string,
+  utilityClassName: string
+): string =>
+  `Use class \`${prefix}\\<SUFFIX>\`, ie: \`className="${utilityClassName}"\``

package/src/tailwind-presets.ts

@@ -1,5 +1,5 @@
 import { CustomThemeConfig } from "tailwindcss/types/config"
-import { defaultTheme } from "@kaizen/design-tokens/"
+import { tokens } from "@kaizen/design-tokens/js"
 import { kzSpacing } from "./kz-spacing"
 
 export type KaizenTailwindTheme = Partial<CustomThemeConfig>
@@ -11,24 +11,24 @@ export type KaizenTailwindPreset = {
 export const kaizenTailwindTheme: KaizenTailwindTheme = {
   extend: {
     maxWidth: {
-      paragraph: `${defaultTheme.typography.paragraphBody.maxWidth}`,
-      "paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.maxWidth}`,
-      "paragraph-sm": `${defaultTheme.typography.paragraphSmall.maxWidth}`,
-      "paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.maxWidth}`,
+      paragraph: `${tokens.typography.paragraphBody.maxWidth}`,
+      "paragraph-lede": `${tokens.typography.paragraphIntroLede.maxWidth}`,
+      "paragraph-sm": `${tokens.typography.paragraphSmall.maxWidth}`,
+      "paragraph-xs": `${tokens.typography.paragraphExtraSmall.maxWidth}`,
     },
   },
   colors: {
     transparent: "transparent",
     current: "currentColor",
     inherit: "inherit",
-    ...defaultTheme.color,
-    ...defaultTheme.dataViz,
+    ...tokens.color,
+    ...tokens.dataViz,
   },
   spacing: kzSpacing,
   boxShadow: {
     none: "none",
-    sm: defaultTheme.shadow.small.boxShadow,
-    lg: defaultTheme.shadow.large.boxShadow,
+    sm: tokens.shadow.small.boxShadow,
+    lg: tokens.shadow.large.boxShadow,
   },
   borderRadius: {
     DEFAULT: "7px",
@@ -45,35 +45,35 @@ export const kaizenTailwindTheme: KaizenTailwindTheme = {
     "focus-ring": "2px",
   },
   borderColor: {
-    "default-color": `${defaultTheme.border.solid.borderColor}`,
-    transparent: `${defaultTheme.border.borderless.borderColor}`,
-    "focus-ring": defaultTheme.color.blue[600],
-    ...defaultTheme.color,
+    "default-color": `${tokens.border.solid.borderColor}`,
+    transparent: `${tokens.border.borderless.borderColor}`,
+    "focus-ring": tokens.color.blue[600],
+    ...tokens.color,
   },
   fontFamily: {
-    "family-paragraph": [`${defaultTheme.typography.paragraphBody.fontFamily}`],
-    "family-heading": [`${defaultTheme.typography.heading1.fontFamily}`],
-    "family-data": [`${defaultTheme.typography.dataLarge.fontFamily}`],
-    "family-display": [`${defaultTheme.typography.display0.fontFamily}`],
+    "family-paragraph": [`${tokens.typography.paragraphBody.fontFamily}`],
+    "family-heading": [`${tokens.typography.heading1.fontFamily}`],
+    "family-data": [`${tokens.typography.dataLarge.fontFamily}`],
+    "family-display": [`${tokens.typography.display0.fontFamily}`],
   },
   fontSize: {
-    display: `${defaultTheme.typography.display0.fontSize}`,
-    "heading-1": `${defaultTheme.typography.heading1.fontSize}`,
-    "heading-2": `${defaultTheme.typography.heading2.fontSize}`,
-    "heading-3": `${defaultTheme.typography.heading3.fontSize}`,
-    "heading-4": `${defaultTheme.typography.heading4.fontSize}`,
-    "heading-5": `${defaultTheme.typography.heading5.fontSize}`,
-    "heading-6": `${defaultTheme.typography.heading6.fontSize}`,
-    paragraph: `${defaultTheme.typography.paragraphBody.fontSize}`,
-    "paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.fontSize}`,
-    "paragraph-sm": `${defaultTheme.typography.paragraphSmall.fontSize}`,
-    "paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.fontSize}`,
-    "data-lg": `${defaultTheme.typography.dataLarge.fontSize}`,
-    "data-md": `${defaultTheme.typography.dataMedium.fontSize}`,
-    "data-sm": `${defaultTheme.typography.dataSmall.fontSize}`,
-    "data-units-lg": `${defaultTheme.typography.dataLargeUnits.fontSize}`,
-    "data-units-md": `${defaultTheme.typography.dataMediumUnits.fontSize}`,
-    "data-units-sm": `${defaultTheme.typography.dataSmallUnits.fontSize}`,
+    display: `${tokens.typography.display0.fontSize}`,
+    "heading-1": `${tokens.typography.heading1.fontSize}`,
+    "heading-2": `${tokens.typography.heading2.fontSize}`,
+    "heading-3": `${tokens.typography.heading3.fontSize}`,
+    "heading-4": `${tokens.typography.heading4.fontSize}`,
+    "heading-5": `${tokens.typography.heading5.fontSize}`,
+    "heading-6": `${tokens.typography.heading6.fontSize}`,
+    paragraph: `${tokens.typography.paragraphBody.fontSize}`,
+    "paragraph-lede": `${tokens.typography.paragraphIntroLede.fontSize}`,
+    "paragraph-sm": `${tokens.typography.paragraphSmall.fontSize}`,
+    "paragraph-xs": `${tokens.typography.paragraphExtraSmall.fontSize}`,
+    "data-lg": `${tokens.typography.dataLarge.fontSize}`,
+    "data-md": `${tokens.typography.dataMedium.fontSize}`,
+    "data-sm": `${tokens.typography.dataSmall.fontSize}`,
+    "data-units-lg": `${tokens.typography.dataLargeUnits.fontSize}`,
+    "data-units-md": `${tokens.typography.dataMediumUnits.fontSize}`,
+    "data-units-sm": `${tokens.typography.dataSmallUnits.fontSize}`,
   },
   fontWeight: {
     "weight-paragraph": "400",
@@ -83,31 +83,31 @@ export const kaizenTailwindTheme: KaizenTailwindTheme = {
     "weight-display": "800",
   },
   lineHeight: {
-    display: `${defaultTheme.typography.display0.lineHeight}`,
-    "heading-1": `${defaultTheme.typography.heading1.lineHeight}`,
-    "heading-2": `${defaultTheme.typography.heading2.lineHeight}`,
-    "heading-3": `${defaultTheme.typography.heading3.lineHeight}`,
-    "heading-4": `${defaultTheme.typography.heading4.lineHeight}`,
-    "heading-5": `${defaultTheme.typography.heading5.lineHeight}`,
-    "heading-6": `${defaultTheme.typography.heading6.lineHeight}`,
-    paragraph: `${defaultTheme.typography.paragraphBody.lineHeight}`,
-    "paragraph-lede": `${defaultTheme.typography.paragraphIntroLede.lineHeight}`,
-    "paragraph-sm": `${defaultTheme.typography.paragraphSmall.lineHeight}`,
-    "paragraph-xs": `${defaultTheme.typography.paragraphExtraSmall.lineHeight}`,
-    "data-lg": `${defaultTheme.typography.dataLarge.lineHeight}`,
-    "data-md": `${defaultTheme.typography.dataMedium.lineHeight}`,
-    "data-sm": `${defaultTheme.typography.dataSmall.lineHeight}`,
-    "data-units-lg": `${defaultTheme.typography.dataLargeUnits.lineHeight}`,
-    "data-units-md": `${defaultTheme.typography.dataMediumUnits.lineHeight}`,
-    "data-units-sm": `${defaultTheme.typography.dataSmallUnits.lineHeight}`,
+    display: `${tokens.typography.display0.lineHeight}`,
+    "heading-1": `${tokens.typography.heading1.lineHeight}`,
+    "heading-2": `${tokens.typography.heading2.lineHeight}`,
+    "heading-3": `${tokens.typography.heading3.lineHeight}`,
+    "heading-4": `${tokens.typography.heading4.lineHeight}`,
+    "heading-5": `${tokens.typography.heading5.lineHeight}`,
+    "heading-6": `${tokens.typography.heading6.lineHeight}`,
+    paragraph: `${tokens.typography.paragraphBody.lineHeight}`,
+    "paragraph-lede": `${tokens.typography.paragraphIntroLede.lineHeight}`,
+    "paragraph-sm": `${tokens.typography.paragraphSmall.lineHeight}`,
+    "paragraph-xs": `${tokens.typography.paragraphExtraSmall.lineHeight}`,
+    "data-lg": `${tokens.typography.dataLarge.lineHeight}`,
+    "data-md": `${tokens.typography.dataMedium.lineHeight}`,
+    "data-sm": `${tokens.typography.dataSmall.lineHeight}`,
+    "data-units-lg": `${tokens.typography.dataLargeUnits.lineHeight}`,
+    "data-units-md": `${tokens.typography.dataMediumUnits.lineHeight}`,
+    "data-units-sm": `${tokens.typography.dataSmallUnits.lineHeight}`,
   },
   letterSpacing: {
     "letter-spacing-normal": "normal",
   },
   // A mix of layout styles
   screens: {
-    md: defaultTheme.layout.breakpoints.medium, // => @media (min-width: 768px) { ... }
-    lg: defaultTheme.layout.breakpoints.large, // => @media (min-width: 1080px) { ... }
+    md: tokens.layout.breakpoints.medium, // => @media (min-width: 768px) { ... }
+    lg: tokens.layout.breakpoints.large, // => @media (min-width: 1080px) { ... }
   },
 } as const
 

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./tailwind-presets"), exports);
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC"}

package/dist/kz-height.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"kz-height.d.ts","sourceRoot":"","sources":["../src/kz-height.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;CAWpB,CAAA"}

package/dist/kz-height.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.kzHeight = void 0;
-exports.kzHeight = {
-    0: "0",
-    25: "25%",
-    33: "33.333333%",
-    50: "50%",
-    75: "75%",
-    100: "100%",
-    auto: "auto",
-    min: "min-content",
-    max: "max-content",
-    fit: "fit-content",
-};
-//# sourceMappingURL=kz-height.js.map

package/dist/kz-height.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kz-height.js","sourceRoot":"","sources":["../src/kz-height.ts"],"names":[],"mappings":";;;AAAa,QAAA,QAAQ,GAAG;IACtB,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,aAAa;IAClB,GAAG,EAAE,aAAa;IAClB,GAAG,EAAE,aAAa;CACnB,CAAA"}

package/dist/kz-spacing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"kz-spacing.d.ts","sourceRoot":"","sources":["../src/kz-spacing.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,oBAAoB,wBACV,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC1C,MAAM,CAAC,MAAM,EAAE,MAAM,CAIvB,CAAA;AAED,eAAO,MAAM,SAAS,wBAA2C,CAAA"}

package/dist/kz-spacing.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.kzSpacing = exports.filterDenyListValues = void 0;
-var design_tokens_1 = 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);
-    }));
-};
-exports.filterDenyListValues = filterDenyListValues;
-exports.kzSpacing = (0, exports.filterDenyListValues)(design_tokens_1.heartTheme.spacing);
-//# sourceMappingURL=kz-spacing.js.map

package/dist/kz-spacing.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kz-spacing.js","sourceRoot":"","sources":["../src/kz-spacing.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAElD,IAAM,aAAa,GAAa;IAC9B,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,QAAQ;IACR,SAAS;IACT,UAAU;IACV,WAAW;CACZ,CAAA;AAED;;GAEG;AACH,IAAM,YAAY,GAAG,UAAC,GAAoB;IACxC,OAAA,aAAa,CAAC,OAAO,CAAC,UAAG,GAAG,CAAE,CAAC,GAAG,CAAC;AAAnC,CAAmC,CAAA;AAErC,kEAAkE;AAC3D,IAAM,oBAAoB,GAAG,UAClC,mBAA2C;IAE3C,IAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAEzD,OAAO,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,UAAC,EAAK;YAAJ,GAAG,QAAA;QAAM,OAAA,YAAY,CAAC,GAAG,CAAC;IAAjB,CAAiB,CAAC,CAAC,CAAA;AAC/E,CAAC,CAAA;AANY,QAAA,oBAAoB,wBAMhC;AAEY,QAAA,SAAS,GAAG,IAAA,4BAAoB,EAAC,0BAAU,CAAC,OAAO,CAAC,CAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind-presets.d.ts","sourceRoot":"","sources":["../src/tailwind-presets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAI5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAA;AAC5D,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,mBAqGxB,CAAA;AAEV,eAAO,MAAM,MAAM,EAAE,oBAEpB,CAAA"}