@kaizen/components 1.4.18 → 1.4.20-canary.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.19](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.18...@kaizen/components@1.4.19) (2023-02-28)
+
+**Note:** Version bump only for package @kaizen/components
+
+
+
+
+
 ## [1.4.18](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.17...@kaizen/components@1.4.18) (2023-02-28)
 
 **Note:** Version bump only for package @kaizen/components

package/dist/esm/index.js

@@ -19,65 +19,12 @@ import {
 
 // src/index.ts
 export * from "@kaizen/a11y";
-export * from "@kaizen/brand";
-export * from "@kaizen/brand-moment";
-export * from "@kaizen/button";
-export * from "@kaizen/component-base";
-import { Icon, Box, Spacing } from "@kaizen/component-library";
-export * from "@kaizen/date-picker";
-export * from "@kaizen/draft-avatar";
-export * from "@kaizen/draft-badge";
-export * from "@kaizen/draft-card";
-export * from "@kaizen/draft-collapsible";
-export * from "@kaizen/draft-divider";
-export * from "@kaizen/draft-empty-state";
-export * from "@kaizen/draft-filter-menu-button";
-export * from "@kaizen/draft-form";
-export * from "@kaizen/draft-guidance-block";
-export * from "@kaizen/draft-hero-card";
-export * from "@kaizen/draft-illustration";
-export * from "@kaizen/draft-likert-scale-legacy";
-export * from "@kaizen/draft-menu";
-export * from "@kaizen/draft-modal";
-export * from "@kaizen/draft-page-layout";
-export * from "@kaizen/draft-popover";
-export * from "@kaizen/draft-table";
-export * from "@kaizen/draft-tabs";
-export * from "@kaizen/draft-tag";
-export * from "@kaizen/draft-tile";
-export * from "@kaizen/draft-title-block-zen";
-export * from "@kaizen/draft-tooltip";
-export * from "@kaizen/draft-well";
-export * from "@kaizen/hosted-assets";
-export * from "@kaizen/loading-skeleton";
-export * from "@kaizen/loading-spinner";
-export * from "@kaizen/notification";
-export * from "@kaizen/pagination";
-export * from "@kaizen/progress-bar";
-export * from "@kaizen/responsive";
-export * from "@kaizen/rich-text-editor";
-export * from "@kaizen/split-button";
-export * from "@kaizen/typography";
-import {
-  makeCssVariableDefinitionsMap,
-  makeCSSVariableTheme,
-  mapLeafsOfObject
-} from "@kaizen/design-tokens";
-import { Select, AsyncSelect } from "@kaizen/draft-select";
 export {
-  AsyncSelect,
-  Box,
-  Icon,
   KaizenProvider,
-  Select,
-  Spacing,
   ThemeContext,
   ThemeManager,
   ThemeProvider,
   defaultTheme,
   heartTheme,
-  makeCSSVariableTheme,
-  makeCssVariableDefinitionsMap,
-  mapLeafsOfObject,
   useTheme
 };

package/dist/iife/KaizenProvider/ThemeProvider/ThemeManager.js

@@ -3604,6 +3604,159 @@
     }
   });
 
+  // ../design-tokens/dist/tailwind/tailwind-presets.js
+  var require_tailwind_presets = __commonJS({
+    "../design-tokens/dist/tailwind/tailwind-presets.js"(exports, module) {
+      "use strict";
+      var __assign = exports && exports.__assign || function() {
+        __assign = Object.assign || function(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+              if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+          }
+          return t;
+        };
+        return __assign.apply(this, arguments);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      var __1 = require_dist();
+      var preset = {
+        theme: {
+          colors: __assign(__assign({ transparent: "transparent", current: "currentColor", inherit: "inherit" }, __1.defaultTheme.color), __1.defaultTheme.dataViz),
+          spacing: __assign({}, __1.defaultTheme.spacing),
+          boxShadow: {
+            none: "none",
+            sm: __1.defaultTheme.shadow.small.boxShadow,
+            lg: __1.defaultTheme.shadow.large.boxShadow
+          },
+          borderRadius: {
+            none: "0px",
+            default: "7px",
+            "focus-ring": "10px"
+          },
+          borderWidth: {
+            "width-none": "0px",
+            "width-default": "2px",
+            "width-focus-ring": "2px"
+          },
+          // how do we want to handle our focus rings?
+          // tailwind used a `ring` property
+          borderColor: {
+            "color-solid": __1.defaultTheme.border.solid.borderColor,
+            "color-transparent": __1.defaultTheme.border.borderless.borderColor,
+            "color-focus-ring": __1.defaultTheme.color.blue[600]
+          },
+          fontFamily: {
+            "family-paragraph": __1.defaultTheme.typography.paragraphBody.fontFamily,
+            "family-heading": __1.defaultTheme.typography.heading1.fontFamily,
+            "family-data": __1.defaultTheme.typography.dataLarge.fontFamily,
+            "family-display": __1.defaultTheme.typography.display0.fontFamily
+          },
+          fontSize: {
+            "size-display": __1.defaultTheme.typography.display0.fontSize,
+            "size-heading-1": __1.defaultTheme.typography.heading1.fontSize,
+            "size-heading-2": __1.defaultTheme.typography.heading2.fontSize,
+            "size-heading-3": __1.defaultTheme.typography.heading3.fontSize,
+            "size-heading-4": __1.defaultTheme.typography.heading4.fontSize,
+            "size-heading-5": __1.defaultTheme.typography.heading5.fontSize,
+            "size-heading-6": __1.defaultTheme.typography.heading6.fontSize,
+            "size-paragraph": __1.defaultTheme.typography.paragraphBody.fontSize,
+            "size-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.fontSize,
+            "size-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.fontSize,
+            "size-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.fontSize,
+            "size-data-lg": __1.defaultTheme.typography.dataLarge.fontSize,
+            "size-data-md": __1.defaultTheme.typography.dataMedium.fontSize,
+            "size-data-sm": __1.defaultTheme.typography.dataSmall.fontSize,
+            "size-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.fontSize,
+            "size-data-units-md": __1.defaultTheme.typography.dataMediumUnits.fontSize,
+            "size-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.fontSize
+          },
+          // font weights could have specific tokens (current don't)
+          fontWeight: {
+            normal: "400",
+            medium: "500",
+            semibold: "600",
+            bold: "700",
+            extrabold: "800",
+            "weight-paragraph": "400",
+            "weight-paragraph-bold": "600",
+            "weight-data": "700",
+            "weight-heading": "700",
+            "weight-display": "800"
+          },
+          lineHeight: {
+            "height-display": __1.defaultTheme.typography.display0.lineHeight,
+            "height-heading-1": __1.defaultTheme.typography.heading1.lineHeight,
+            "height-heading-2": __1.defaultTheme.typography.heading2.lineHeight,
+            "height-heading-3": __1.defaultTheme.typography.heading3.lineHeight,
+            "height-heading-4": __1.defaultTheme.typography.heading4.lineHeight,
+            "height-heading-5": __1.defaultTheme.typography.heading5.lineHeight,
+            "height-heading-6": __1.defaultTheme.typography.heading6.lineHeight,
+            "height-paragraph": __1.defaultTheme.typography.paragraphBody.lineHeight,
+            "height-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.lineHeight,
+            "height-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.lineHeight,
+            "height-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.lineHeight,
+            "height-data-lg": __1.defaultTheme.typography.dataLarge.lineHeight,
+            "height-data-md": __1.defaultTheme.typography.dataMedium.lineHeight,
+            "height-data-sm": __1.defaultTheme.typography.dataSmall.lineHeight,
+            "height-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.lineHeight,
+            "height-data-units-md": __1.defaultTheme.typography.dataMediumUnits.lineHeight,
+            "height-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.lineHeight
+          },
+          letterSpacing: {
+            "spacing-normal": "normal"
+          },
+          // A mix of layout styles
+          maxWidth: {
+            content: __1.defaultTheme.layout.contentMaxWidth,
+            "content-with-side": __1.defaultTheme.layout.contentMaxWidthWithSidebar
+          },
+          width: {
+            "content-side-margin": __1.defaultTheme.layout.contentSideMargin
+          },
+          height: {
+            "mobile-actions-drawer-height": __1.defaultTheme.layout.mobileActionsDrawerHeight,
+            "navigation-bar-height": __1.defaultTheme.layout.navigationBarHeight
+          },
+          // we will probably want to review viewport sizing
+          screens: __assign({}, __1.defaultTheme.layout.breakpoints)
+        }
+      };
+      module.exports.TailwindPreset = preset;
+    }
+  });
+
+  // ../design-tokens/dist/tailwind/index.js
+  var require_tailwind = __commonJS({
+    "../design-tokens/dist/tailwind/index.js"(exports) {
+      "use strict";
+      var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+        if (k2 === void 0)
+          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 === void 0)
+          k2 = k;
+        o[k2] = m[k];
+      });
+      var __exportStar = exports && exports.__exportStar || function(m, exports2) {
+        for (var p in m)
+          if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p))
+            __createBinding(exports2, m, p);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      __exportStar(require_tailwind_presets(), exports);
+    }
+  });
+
   // ../design-tokens/dist/lib/makeCssVariableTheme.js
   var require_makeCssVariableTheme = __commonJS({
     "../design-tokens/dist/lib/makeCssVariableTheme.js"(exports) {
@@ -3667,6 +3820,7 @@
       __exportStar(require_types(), exports);
       __exportStar(require_ThemeManager(), exports);
       __exportStar(require_react2(), exports);
+      __exportStar(require_tailwind(), exports);
       var makeCssVariableDefinitionsMap_1 = require_makeCssVariableDefinitionsMap();
       Object.defineProperty(exports, "makeCssVariableDefinitionsMap", { enumerable: true, get: function() {
         return makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap;

package/dist/iife/KaizenProvider/ThemeProvider/ThemeManager.spec.js

@@ -3604,6 +3604,159 @@
     }
   });
 
+  // ../design-tokens/dist/tailwind/tailwind-presets.js
+  var require_tailwind_presets = __commonJS({
+    "../design-tokens/dist/tailwind/tailwind-presets.js"(exports, module) {
+      "use strict";
+      var __assign = exports && exports.__assign || function() {
+        __assign = Object.assign || function(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+              if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+          }
+          return t;
+        };
+        return __assign.apply(this, arguments);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      var __1 = require_dist();
+      var preset = {
+        theme: {
+          colors: __assign(__assign({ transparent: "transparent", current: "currentColor", inherit: "inherit" }, __1.defaultTheme.color), __1.defaultTheme.dataViz),
+          spacing: __assign({}, __1.defaultTheme.spacing),
+          boxShadow: {
+            none: "none",
+            sm: __1.defaultTheme.shadow.small.boxShadow,
+            lg: __1.defaultTheme.shadow.large.boxShadow
+          },
+          borderRadius: {
+            none: "0px",
+            default: "7px",
+            "focus-ring": "10px"
+          },
+          borderWidth: {
+            "width-none": "0px",
+            "width-default": "2px",
+            "width-focus-ring": "2px"
+          },
+          // how do we want to handle our focus rings?
+          // tailwind used a `ring` property
+          borderColor: {
+            "color-solid": __1.defaultTheme.border.solid.borderColor,
+            "color-transparent": __1.defaultTheme.border.borderless.borderColor,
+            "color-focus-ring": __1.defaultTheme.color.blue[600]
+          },
+          fontFamily: {
+            "family-paragraph": __1.defaultTheme.typography.paragraphBody.fontFamily,
+            "family-heading": __1.defaultTheme.typography.heading1.fontFamily,
+            "family-data": __1.defaultTheme.typography.dataLarge.fontFamily,
+            "family-display": __1.defaultTheme.typography.display0.fontFamily
+          },
+          fontSize: {
+            "size-display": __1.defaultTheme.typography.display0.fontSize,
+            "size-heading-1": __1.defaultTheme.typography.heading1.fontSize,
+            "size-heading-2": __1.defaultTheme.typography.heading2.fontSize,
+            "size-heading-3": __1.defaultTheme.typography.heading3.fontSize,
+            "size-heading-4": __1.defaultTheme.typography.heading4.fontSize,
+            "size-heading-5": __1.defaultTheme.typography.heading5.fontSize,
+            "size-heading-6": __1.defaultTheme.typography.heading6.fontSize,
+            "size-paragraph": __1.defaultTheme.typography.paragraphBody.fontSize,
+            "size-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.fontSize,
+            "size-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.fontSize,
+            "size-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.fontSize,
+            "size-data-lg": __1.defaultTheme.typography.dataLarge.fontSize,
+            "size-data-md": __1.defaultTheme.typography.dataMedium.fontSize,
+            "size-data-sm": __1.defaultTheme.typography.dataSmall.fontSize,
+            "size-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.fontSize,
+            "size-data-units-md": __1.defaultTheme.typography.dataMediumUnits.fontSize,
+            "size-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.fontSize
+          },
+          // font weights could have specific tokens (current don't)
+          fontWeight: {
+            normal: "400",
+            medium: "500",
+            semibold: "600",
+            bold: "700",
+            extrabold: "800",
+            "weight-paragraph": "400",
+            "weight-paragraph-bold": "600",
+            "weight-data": "700",
+            "weight-heading": "700",
+            "weight-display": "800"
+          },
+          lineHeight: {
+            "height-display": __1.defaultTheme.typography.display0.lineHeight,
+            "height-heading-1": __1.defaultTheme.typography.heading1.lineHeight,
+            "height-heading-2": __1.defaultTheme.typography.heading2.lineHeight,
+            "height-heading-3": __1.defaultTheme.typography.heading3.lineHeight,
+            "height-heading-4": __1.defaultTheme.typography.heading4.lineHeight,
+            "height-heading-5": __1.defaultTheme.typography.heading5.lineHeight,
+            "height-heading-6": __1.defaultTheme.typography.heading6.lineHeight,
+            "height-paragraph": __1.defaultTheme.typography.paragraphBody.lineHeight,
+            "height-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.lineHeight,
+            "height-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.lineHeight,
+            "height-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.lineHeight,
+            "height-data-lg": __1.defaultTheme.typography.dataLarge.lineHeight,
+            "height-data-md": __1.defaultTheme.typography.dataMedium.lineHeight,
+            "height-data-sm": __1.defaultTheme.typography.dataSmall.lineHeight,
+            "height-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.lineHeight,
+            "height-data-units-md": __1.defaultTheme.typography.dataMediumUnits.lineHeight,
+            "height-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.lineHeight
+          },
+          letterSpacing: {
+            "spacing-normal": "normal"
+          },
+          // A mix of layout styles
+          maxWidth: {
+            content: __1.defaultTheme.layout.contentMaxWidth,
+            "content-with-side": __1.defaultTheme.layout.contentMaxWidthWithSidebar
+          },
+          width: {
+            "content-side-margin": __1.defaultTheme.layout.contentSideMargin
+          },
+          height: {
+            "mobile-actions-drawer-height": __1.defaultTheme.layout.mobileActionsDrawerHeight,
+            "navigation-bar-height": __1.defaultTheme.layout.navigationBarHeight
+          },
+          // we will probably want to review viewport sizing
+          screens: __assign({}, __1.defaultTheme.layout.breakpoints)
+        }
+      };
+      module.exports.TailwindPreset = preset;
+    }
+  });
+
+  // ../design-tokens/dist/tailwind/index.js
+  var require_tailwind = __commonJS({
+    "../design-tokens/dist/tailwind/index.js"(exports) {
+      "use strict";
+      var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+        if (k2 === void 0)
+          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 === void 0)
+          k2 = k;
+        o[k2] = m[k];
+      });
+      var __exportStar = exports && exports.__exportStar || function(m, exports2) {
+        for (var p in m)
+          if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p))
+            __createBinding(exports2, m, p);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      __exportStar(require_tailwind_presets(), exports);
+    }
+  });
+
   // ../design-tokens/dist/lib/makeCssVariableTheme.js
   var require_makeCssVariableTheme = __commonJS({
     "../design-tokens/dist/lib/makeCssVariableTheme.js"(exports) {
@@ -3667,6 +3820,7 @@
       __exportStar(require_types(), exports);
       __exportStar(require_ThemeManager(), exports);
       __exportStar(require_react2(), exports);
+      __exportStar(require_tailwind(), exports);
       var makeCssVariableDefinitionsMap_1 = require_makeCssVariableDefinitionsMap();
       Object.defineProperty(exports, "makeCssVariableDefinitionsMap", { enumerable: true, get: function() {
         return makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap;

package/dist/iife/KaizenProvider/ThemeProvider/index.js

@@ -3604,6 +3604,159 @@
     }
   });
 
+  // ../design-tokens/dist/tailwind/tailwind-presets.js
+  var require_tailwind_presets = __commonJS({
+    "../design-tokens/dist/tailwind/tailwind-presets.js"(exports, module) {
+      "use strict";
+      var __assign = exports && exports.__assign || function() {
+        __assign = Object.assign || function(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+              if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+          }
+          return t;
+        };
+        return __assign.apply(this, arguments);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      var __1 = require_dist();
+      var preset = {
+        theme: {
+          colors: __assign(__assign({ transparent: "transparent", current: "currentColor", inherit: "inherit" }, __1.defaultTheme.color), __1.defaultTheme.dataViz),
+          spacing: __assign({}, __1.defaultTheme.spacing),
+          boxShadow: {
+            none: "none",
+            sm: __1.defaultTheme.shadow.small.boxShadow,
+            lg: __1.defaultTheme.shadow.large.boxShadow
+          },
+          borderRadius: {
+            none: "0px",
+            default: "7px",
+            "focus-ring": "10px"
+          },
+          borderWidth: {
+            "width-none": "0px",
+            "width-default": "2px",
+            "width-focus-ring": "2px"
+          },
+          // how do we want to handle our focus rings?
+          // tailwind used a `ring` property
+          borderColor: {
+            "color-solid": __1.defaultTheme.border.solid.borderColor,
+            "color-transparent": __1.defaultTheme.border.borderless.borderColor,
+            "color-focus-ring": __1.defaultTheme.color.blue[600]
+          },
+          fontFamily: {
+            "family-paragraph": __1.defaultTheme.typography.paragraphBody.fontFamily,
+            "family-heading": __1.defaultTheme.typography.heading1.fontFamily,
+            "family-data": __1.defaultTheme.typography.dataLarge.fontFamily,
+            "family-display": __1.defaultTheme.typography.display0.fontFamily
+          },
+          fontSize: {
+            "size-display": __1.defaultTheme.typography.display0.fontSize,
+            "size-heading-1": __1.defaultTheme.typography.heading1.fontSize,
+            "size-heading-2": __1.defaultTheme.typography.heading2.fontSize,
+            "size-heading-3": __1.defaultTheme.typography.heading3.fontSize,
+            "size-heading-4": __1.defaultTheme.typography.heading4.fontSize,
+            "size-heading-5": __1.defaultTheme.typography.heading5.fontSize,
+            "size-heading-6": __1.defaultTheme.typography.heading6.fontSize,
+            "size-paragraph": __1.defaultTheme.typography.paragraphBody.fontSize,
+            "size-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.fontSize,
+            "size-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.fontSize,
+            "size-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.fontSize,
+            "size-data-lg": __1.defaultTheme.typography.dataLarge.fontSize,
+            "size-data-md": __1.defaultTheme.typography.dataMedium.fontSize,
+            "size-data-sm": __1.defaultTheme.typography.dataSmall.fontSize,
+            "size-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.fontSize,
+            "size-data-units-md": __1.defaultTheme.typography.dataMediumUnits.fontSize,
+            "size-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.fontSize
+          },
+          // font weights could have specific tokens (current don't)
+          fontWeight: {
+            normal: "400",
+            medium: "500",
+            semibold: "600",
+            bold: "700",
+            extrabold: "800",
+            "weight-paragraph": "400",
+            "weight-paragraph-bold": "600",
+            "weight-data": "700",
+            "weight-heading": "700",
+            "weight-display": "800"
+          },
+          lineHeight: {
+            "height-display": __1.defaultTheme.typography.display0.lineHeight,
+            "height-heading-1": __1.defaultTheme.typography.heading1.lineHeight,
+            "height-heading-2": __1.defaultTheme.typography.heading2.lineHeight,
+            "height-heading-3": __1.defaultTheme.typography.heading3.lineHeight,
+            "height-heading-4": __1.defaultTheme.typography.heading4.lineHeight,
+            "height-heading-5": __1.defaultTheme.typography.heading5.lineHeight,
+            "height-heading-6": __1.defaultTheme.typography.heading6.lineHeight,
+            "height-paragraph": __1.defaultTheme.typography.paragraphBody.lineHeight,
+            "height-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.lineHeight,
+            "height-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.lineHeight,
+            "height-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.lineHeight,
+            "height-data-lg": __1.defaultTheme.typography.dataLarge.lineHeight,
+            "height-data-md": __1.defaultTheme.typography.dataMedium.lineHeight,
+            "height-data-sm": __1.defaultTheme.typography.dataSmall.lineHeight,
+            "height-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.lineHeight,
+            "height-data-units-md": __1.defaultTheme.typography.dataMediumUnits.lineHeight,
+            "height-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.lineHeight
+          },
+          letterSpacing: {
+            "spacing-normal": "normal"
+          },
+          // A mix of layout styles
+          maxWidth: {
+            content: __1.defaultTheme.layout.contentMaxWidth,
+            "content-with-side": __1.defaultTheme.layout.contentMaxWidthWithSidebar
+          },
+          width: {
+            "content-side-margin": __1.defaultTheme.layout.contentSideMargin
+          },
+          height: {
+            "mobile-actions-drawer-height": __1.defaultTheme.layout.mobileActionsDrawerHeight,
+            "navigation-bar-height": __1.defaultTheme.layout.navigationBarHeight
+          },
+          // we will probably want to review viewport sizing
+          screens: __assign({}, __1.defaultTheme.layout.breakpoints)
+        }
+      };
+      module.exports.TailwindPreset = preset;
+    }
+  });
+
+  // ../design-tokens/dist/tailwind/index.js
+  var require_tailwind = __commonJS({
+    "../design-tokens/dist/tailwind/index.js"(exports) {
+      "use strict";
+      var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
+        if (k2 === void 0)
+          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 === void 0)
+          k2 = k;
+        o[k2] = m[k];
+      });
+      var __exportStar = exports && exports.__exportStar || function(m, exports2) {
+        for (var p in m)
+          if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p))
+            __createBinding(exports2, m, p);
+      };
+      Object.defineProperty(exports, "__esModule", { value: true });
+      __exportStar(require_tailwind_presets(), exports);
+    }
+  });
+
   // ../design-tokens/dist/lib/makeCssVariableTheme.js
   var require_makeCssVariableTheme = __commonJS({
     "../design-tokens/dist/lib/makeCssVariableTheme.js"(exports) {
@@ -3667,6 +3820,7 @@
       __exportStar(require_types(), exports);
       __exportStar(require_ThemeManager(), exports);
       __exportStar(require_react2(), exports);
+      __exportStar(require_tailwind(), exports);
       var makeCssVariableDefinitionsMap_1 = require_makeCssVariableDefinitionsMap();
       Object.defineProperty(exports, "makeCssVariableDefinitionsMap", { enumerable: true, get: function() {
         return makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap;