@telegraph/style-engine 0.1.14 → 0.1.16

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @telegraph/style-engine
 
+## 0.1.16
+
+### Patch Changes
+
+- Updated dependencies [[`0474256`](https://github.com/knocklabs/telegraph/commit/047425631c37101998e39896a34812da5bd4dcbb)]:
+  - @telegraph/tokens@0.1.2
+
+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies [[`fd14d50`](https://github.com/knocklabs/telegraph/commit/fd14d509c3f3f76eafc07d08c73e30db79255a2e)]:
+  - @telegraph/tokens@0.1.1
+
 ## 0.1.14
 
 ### Patch Changes

package/README.md

@@ -1,17 +1,660 @@
+# ⚙️ Style Engine
+
+> CSS-in-JS styling infrastructure that powers Telegraph's design system with type-safe prop-to-CSS-variable mapping and automated CSS bundling.
+
 ![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
 
-[![npm version](https://img.shields.io/npm/v/@telegraph/button.svg)](https://www.npmjs.com/package/@telegraph/style-engine)
+[![npm version](https://img.shields.io/npm/v/@telegraph/style-engine.svg)](https://www.npmjs.com/package/@telegraph/style-engine)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/@telegraph/style-engine)](https://bundlephobia.com/result?p=@telegraph/style-engine)
+[![license](https://img.shields.io/npm/l/@telegraph/style-engine)](https://github.com/knocklabs/telegraph/blob/main/LICENSE)
+
+## Installation
 
-# @telegraph/style-engine
-> A wrappar around vanilla extract to style telegraph
+```bash
+npm install @telegraph/style-engine
+```
 
-## Installation Instructions
+## Quick Start
 
+### PostCSS Plugin Usage
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require("@telegraph/style-engine/postcss"),
+    // other plugins...
+  ],
+};
 ```
-npm install @telegraph/style-engine
+
+```css
+/* styles.css */
+@telegraph tokens;
+@telegraph components;
+
+/* Your custom styles here */
+.custom-component {
+  color: var(--tgph-blue-9);
+}
 ```
 
-### Add stylesheet
+### Component Development
+
+```tsx
+import { getStyleProp, useStyleEngine } from "@telegraph/style-engine";
+
+// Define CSS variable mappings
+const cssVars = {
+  p: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "all",
+  },
+  bg: {
+    cssVar: "--tgph-background",
+    value: "var(--tgph-color-VARIABLE)",
+  },
+} as const;
+
+export const StyledBox = ({ children, ...props }) => {
+  const { styleProp, otherProps } = useStyleEngine({ props, cssVars });
+
+  return (
+    <div style={styleProp} {...otherProps}>
+      {children}
+    </div>
+  );
+};
+
+// Usage
+<StyledBox p="4" bg="blue-3">
+  Styled content
+</StyledBox>;
+```
+
+## What is the Style Engine?
+
+The Style Engine is the foundational CSS-in-JS system that enables Telegraph's design system. It provides:
+
+- **Prop-to-CSS Mapping**: Converts React props to CSS custom properties
+- **Type Safety**: Full TypeScript support for style props
+- **Design Token Integration**: Seamless integration with Telegraph tokens
+- **Build-time Optimization**: PostCSS plugin for automatic CSS bundling
+- **Responsive Support**: Built-in responsive breakpoint system
+- **Directional Styles**: Support for shorthand directional properties
+
+## API Reference
+
+### `getStyleProp(params)`
+
+Core function that processes style props and returns CSS variables.
+
+**Parameters:**
+
+- `params.props` - React props object including style props
+- `params.cssVars` - CSS variable mappings configuration
+
+**Returns:**
+
+```tsx
+{
+  styleProp: Record<string, string>; // CSS custom properties
+  otherProps: Record<string, unknown>; // Non-style props
+  interactive: boolean; // Whether component has interactive styles
+}
 ```
-@import "@telegraph/style-engine"
+
+### `useStyleEngine(params)`
+
+React hook wrapper around `getStyleProp` with memoization.
+
+**Parameters:**
+Same as `getStyleProp`
+
+**Returns:**
+Same as `getStyleProp`
+
+### `tokens`
+
+CSS variables map exported from `@telegraph/tokens`.
+
+```tsx
+import { tokens } from "@telegraph/style-engine";
+
+// Access token values
+const blueColor = tokens["--tgph-blue-9"];
 ```
+
+### CSS Variable Configuration
+
+Define how props map to CSS variables:
+
+```tsx
+type CssVarProp = {
+  cssVar: string; // CSS custom property name
+  value: string; // Value template (use VARIABLE for prop value)
+  direction?: Direction; // For directional properties
+  interactive?: boolean; // Mark as interactive style
+};
+
+type Direction =
+  | "x"
+  | "y" // Horizontal/vertical
+  | "top"
+  | "bottom"
+  | "left"
+  | "right" // Individual sides
+  | "all" // All sides
+  | "side-top"
+  | "side-bottom"
+  | "side-left"
+  | "side-right"; // Corner sides
+```
+
+## PostCSS Plugin
+
+The PostCSS plugin automatically includes CSS from Telegraph packages.
+
+### At-Rules
+
+| Rule                      | Description                       |
+| ------------------------- | --------------------------------- |
+| `@telegraph tokens`       | Include default design tokens CSS |
+| `@telegraph tokens-light` | Include light theme tokens        |
+| `@telegraph tokens-dark`  | Include dark theme tokens         |
+| `@telegraph components`   | Include all component stylesheets |
+
+### Configuration
+
+```js
+// postcss.config.js
+const telegraphPlugin = require("@telegraph/style-engine/postcss");
+
+module.exports = {
+  plugins: [
+    telegraphPlugin(),
+    require("autoprefixer"),
+    // other plugins...
+  ],
+};
+```
+
+### Usage in CSS
+
+```css
+/* Base tokens (always include first) */
+@telegraph tokens;
+
+/* Theme-specific tokens */
+@telegraph tokens-light;
+@telegraph tokens-dark;
+
+/* All component styles */
+@telegraph components;
+
+/* Your custom styles */
+.my-component {
+  background: var(--tgph-gray-2);
+  padding: var(--tgph-space-3);
+  border-radius: var(--tgph-radius-2);
+}
+```
+
+## Advanced Usage
+
+### Building Custom Components
+
+```tsx
+import { type CssVarProp, useStyleEngine } from "@telegraph/style-engine";
+
+// Define comprehensive CSS variable mappings
+const cssVars = {
+  // Spacing
+  p: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "all",
+  },
+  pt: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "top",
+  },
+  pr: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "right",
+  },
+  pb: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "bottom",
+  },
+  pl: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "left",
+  },
+  px: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "x",
+  },
+  py: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "y",
+  },
+
+  // Margin
+  m: {
+    cssVar: "--tgph-margin",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "all",
+  },
+  mt: {
+    cssVar: "--tgph-margin",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "top",
+  },
+  // ... more margin variants
+
+  // Colors
+  bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
+  color: { cssVar: "--tgph-color", value: "var(--tgph-color-VARIABLE)" },
+
+  // Layout
+  w: { cssVar: "--tgph-width", value: "VARIABLE" },
+  h: { cssVar: "--tgph-height", value: "VARIABLE" },
+
+  // Interactive states
+  hoverBg: {
+    cssVar: "--tgph-hover-background",
+    value: "var(--tgph-color-VARIABLE)",
+    interactive: true,
+  },
+} as const;
+
+type StyledBoxProps = {
+  p?: string;
+  pt?: string;
+  pr?: string;
+  pb?: string;
+  pl?: string;
+  px?: string;
+  py?: string;
+  m?: string;
+  mt?: string;
+  bg?: string;
+  color?: string;
+  w?: string;
+  h?: string;
+  hoverBg?: string;
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const StyledBox = ({ children, ...props }: StyledBoxProps) => {
+  const { styleProp, otherProps, interactive } = useStyleEngine({
+    props,
+    cssVars,
+  });
+
+  return (
+    <div
+      className={interactive ? "tgph-interactive" : undefined}
+      style={styleProp}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+};
+```
+
+### Responsive Styles
+
+```tsx
+import { RESPONSIVE_STYLE_PROPS } from "@telegraph/style-engine";
+
+// Define responsive CSS variables
+const responsiveCssVars = {
+  p: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "all",
+  },
+} as const;
+
+// Responsive component
+export const ResponsiveBox = ({ children, ...props }) => {
+  const { styleProp, otherProps } = useStyleEngine({
+    props,
+    cssVars: responsiveCssVars,
+  });
+
+  return (
+    <div
+      style={{
+        ...styleProp,
+        // Add responsive overrides
+        [`@media ${RESPONSIVE_STYLE_PROPS.conditions.md["@media"]}`]: {
+          "--tgph-padding": "var(--tgph-space-6)",
+        },
+      }}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+};
+```
+
+### Performance Optimization
+
+```tsx
+// Memoize CSS variable definitions
+const cssVars = useMemo(
+  () => ({
+    p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
+    bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
+  }),
+  [],
+);
+
+// Use callback for complex prop processing
+const processedProps = useCallback(
+  (props) => {
+    return getStyleProp({ props, cssVars });
+  },
+  [cssVars],
+);
+```
+
+### Custom Directional Logic
+
+```tsx
+// Custom direction handling
+const customCssVars = {
+  borderRadius: {
+    cssVar: "--tgph-border-radius",
+    value: "var(--tgph-radius-VARIABLE)",
+    direction: "side-top", // Affects top-left and top-right corners
+  },
+  shadowDirection: {
+    cssVar: "--tgph-box-shadow",
+    value: "VARIABLE 4px 8px rgba(0,0,0,0.1)", // Custom shadow template
+    direction: "x", // Horizontal shadow direction
+  },
+} as const;
+```
+
+## Design Tokens & Styling
+
+The Style Engine integrates deeply with Telegraph design tokens:
+
+- **Color System**: `var(--tgph-blue-9)`, `var(--tgph-gray-3)`, etc.
+- **Spacing Scale**: `var(--tgph-space-1)` through `var(--tgph-space-12)`
+- **Typography**: Font sizes, weights, and line heights
+- **Radius Scale**: Border radius values
+- **Shadows**: Box shadow definitions
+- **Breakpoints**: Responsive media query breakpoints
+
+### Token Usage
+
+```css
+.custom-component {
+  /* Spacing tokens */
+  padding: var(--tgph-space-4);
+  margin: var(--tgph-space-2) var(--tgph-space-3);
+
+  /* Color tokens */
+  background: var(--tgph-blue-3);
+  color: var(--tgph-blue-11);
+  border: 1px solid var(--tgph-blue-6);
+
+  /* Typography tokens */
+  font-size: var(--tgph-font-size-2);
+  line-height: var(--tgph-line-height-2);
+
+  /* Layout tokens */
+  border-radius: var(--tgph-radius-2);
+  box-shadow: var(--tgph-shadow-2);
+}
+```
+
+## Build Process
+
+The Style Engine PostCSS plugin performs the following optimizations:
+
+1. **Dependency Detection**: Scans package.json for Telegraph dependencies
+2. **CSS Extraction**: Extracts CSS from each Telegraph package's dist/css directory
+3. **Bundle Creation**: Combines all CSS into a single optimized bundle
+4. **Token Resolution**: Resolves design token references
+5. **Duplicate Removal**: Eliminates duplicate CSS rules
+6. **Minification**: Optimizes final CSS output
+
+## Troubleshooting
+
+### Common Issues
+
+**CSS Variables Not Working**
+
+```tsx
+// Ensure tgph class is on root element
+<div className="tgph">
+  <YourComponent />
+</div>
+```
+
+**PostCSS Plugin Errors**
+
+```js
+// Check Telegraph packages are installed
+npm ls @telegraph/tokens @telegraph/button
+```
+
+**Type Errors with CSS Variables**
+
+```tsx
+// Ensure cssVars object uses 'as const'
+const cssVars = {
+  p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
+} as const; // <- Important!
+```
+
+## Examples
+
+### Basic Example
+
+```tsx
+import { useStyleEngine } from "@telegraph/style-engine";
+
+const cssVars = {
+  p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
+  bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
+} as const;
+
+export const SimpleBox = (props) => {
+  const { styleProp, otherProps } = useStyleEngine({ props, cssVars });
+
+  return <div style={styleProp} {...otherProps} />;
+};
+
+// Usage
+<SimpleBox p="4" bg="blue-3">
+  Content
+</SimpleBox>;
+```
+
+### Advanced Example
+
+```tsx
+import {
+  RESPONSIVE_STYLE_PROPS,
+  useStyleEngine,
+} from "@telegraph/style-engine";
+
+const advancedCssVars = {
+  // Spacing
+  p: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "all",
+  },
+  pt: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "top",
+  },
+  pr: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "right",
+  },
+  pb: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "bottom",
+  },
+  pl: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "left",
+  },
+  px: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "x",
+  },
+  py: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "y",
+  },
+
+  // Colors & States
+  bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
+  hoverBg: {
+    cssVar: "--tgph-hover-bg",
+    value: "var(--tgph-color-VARIABLE)",
+    interactive: true,
+  },
+
+  // Layout
+  w: { cssVar: "--tgph-width", value: "VARIABLE" },
+  h: { cssVar: "--tgph-height", value: "VARIABLE" },
+  rounded: {
+    cssVar: "--tgph-border-radius",
+    value: "var(--tgph-radius-VARIABLE)",
+  },
+} as const;
+
+export const AdvancedBox = ({ children, ...props }) => {
+  const { styleProp, otherProps, interactive } = useStyleEngine({
+    props,
+    cssVars: advancedCssVars,
+  });
+
+  return (
+    <div
+      className={interactive ? "tgph-interactive" : undefined}
+      style={{
+        ...styleProp,
+        transition: interactive ? "all 0.2s ease" : undefined,
+      }}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+// Usage
+<AdvancedBox p="4" px="6" bg="blue-3" hoverBg="blue-4" rounded="2" w="200px">
+  Interactive Content
+</AdvancedBox>;
+```
+
+### Real-world Example
+
+```tsx
+// CustomButton.tsx
+import { useStyleEngine } from "@telegraph/style-engine";
+import { forwardRef } from "react";
+
+const buttonCssVars = {
+  size: {
+    cssVar: "--tgph-button-size",
+    value: "var(--tgph-button-size-VARIABLE)"
+  },
+  variant: {
+    cssVar: "--tgph-button-variant",
+    value: "var(--tgph-button-variant-VARIABLE)"
+  },
+  p: {
+    cssVar: "--tgph-padding",
+    value: "var(--tgph-space-VARIABLE)",
+    direction: "all"
+  }
+} as const;
+
+type CustomButtonProps = {
+  size?: "sm" | "md" | "lg";
+  variant?: "solid" | "outline" | "ghost";
+  p?: string;
+  children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>(
+  ({ children, ...props }, ref) => {
+    const { styleProp, otherProps, interactive } = useStyleEngine({
+      props,
+      cssVars: buttonCssVars
+    });
+
+    return (
+      <button
+        ref={ref}
+        className={`custom-button ${interactive ? "interactive" : ""}`}
+        style={styleProp}
+        {...otherProps}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+// Corresponding CSS
+/* button.css */
+@telegraph tokens;
+
+.custom-button {
+  background: var(--tgph-button-variant, var(--tgph-blue-9));
+  padding: var(--tgph-padding, var(--tgph-space-2) var(--tgph-space-3));
+  font-size: var(--tgph-button-size, var(--tgph-font-size-1));
+  border-radius: var(--tgph-radius-2);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.custom-button.interactive:hover {
+  background: var(--tgph-blue-10);
+}
+```
+
+## References
+
+- [Telegraph Tokens](../tokens/README.md) - Design token system
+- [PostCSS Documentation](https://postcss.org/) - PostCSS ecosystem
+- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) - CSS variables
+
+## Contributing
+
+See our [Contributing Guide](../../CONTRIBUTING.md) for more details.
+
+## License
+
+MIT License - see [LICENSE](../../LICENSE) for details.

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",15:"var(--tgph-spacing-15)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",25:"var(--tgph-spacing-25)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",35:"var(--tgph-spacing-35)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)","0_5":"var(--tgph-spacing-0_5)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},m={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},V={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},O={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},S={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},j={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},P={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:w,rounded:k,shadow:f,spacing:x,family:m,leading:I,tracking:V,text:z,weight:O,breakpoint:S,zIndex:j},E=({currentValueOfCssVar:r="0 0 0 0",value:a,direction:e})=>{const[p,g,v,n]=r.split(" "),t={top:p,right:g,bottom:v,left:n};return e==="top"&&(t.top=a),e==="right"&&(t.right=a),e==="bottom"&&(t.bottom=a),e==="left"&&(t.left=a),e==="all"&&(t.top=a,t.right=a,t.bottom=a,t.left=a),e==="x"&&(t.left=a,t.right=a),e==="y"&&(t.top=a,t.bottom=a),e==="side-top"&&(t.top=a,t.right=a),e==="side-bottom"&&(t.bottom=a,t.left=a),e==="side-left"&&(t.top=a,t.left=a),e==="side-right"&&(t.right=a,t.bottom=a),Object.values(t).join(" ")},d=r=>{const{cssVars:a}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:e={},...p}=r.props;let g=e;const v={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,s=h,l=a==null?void 0:a[s];if(!l){Object.assign(v,{[h]:p[h]});return}const i=p==null?void 0:p[h];if(!i){Object.assign(g,{[h]:p[h]});return}const o=l.value.replace("VARIABLE",i),c=l.cssVar;if(l.interactive&&(n=!0),l.direction){const b=g==null?void 0:g[c],u=E({currentValueOfCssVar:b,value:o,direction:l.direction});g={...g,[c]:u};return}g={...g,[c]:o}}),{styleProp:g,otherProps:v,interactive:n}},C=r=>y.useMemo(()=>d(r),[r]);exports.getStyleProp=d;exports.tokens=P;exports.useStyleEngine=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)","0_5":"var(--tgph-spacing-0_5)","1_5":"var(--tgph-spacing-1_5)","2_5":"var(--tgph-spacing-2_5)","3_5":"var(--tgph-spacing-3_5)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},m={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},V={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},O={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},S={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},_={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},j={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:w,rounded:k,shadow:f,spacing:x,family:m,leading:I,tracking:V,text:z,weight:O,breakpoint:S,zIndex:_},P=({currentValueOfCssVar:r="0 0 0 0",value:a,direction:e})=>{const[p,g,v,n]=r.split(" "),t={top:p,right:g,bottom:v,left:n};return e==="top"&&(t.top=a),e==="right"&&(t.right=a),e==="bottom"&&(t.bottom=a),e==="left"&&(t.left=a),e==="all"&&(t.top=a,t.right=a,t.bottom=a,t.left=a),e==="x"&&(t.left=a,t.right=a),e==="y"&&(t.top=a,t.bottom=a),e==="side-top"&&(t.top=a,t.right=a),e==="side-bottom"&&(t.bottom=a,t.left=a),e==="side-left"&&(t.top=a,t.left=a),e==="side-right"&&(t.right=a,t.bottom=a),Object.values(t).join(" ")},d=r=>{const{cssVars:a}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:e={},...p}=r.props;let g=e;const v={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,s=h,l=a==null?void 0:a[s];if(!l){Object.assign(v,{[h]:p[h]});return}const i=p==null?void 0:p[h];if(!i){Object.assign(g,{[h]:p[h]});return}const o=l.value.replace("VARIABLE",i),c=l.cssVar;if(l.interactive&&(n=!0),l.direction){const b=g==null?void 0:g[c],u=P({currentValueOfCssVar:b,value:o,direction:l.direction});g={...g,[c]:u};return}g={...g,[c]:o}}),{styleProp:g,otherProps:v,interactive:n}},E=r=>y.useMemo(()=>d(r),[r]);exports.getStyleProp=d;exports.tokens=j;exports.useStyleEngine=E;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Replace the VARIABLE placeholder with the actual value of the prop\n    const mappedValueOfCssVar = matchingCssVar.value.replace(\n      \"VARIABLE\",\n      matchingPropValue,\n    );\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":"uqQA2BMA,EAAyB,CAAC,CAC9B,qBAAAC,EAAuB,UACvB,MAAAC,EACA,UAAAC,CACF,IAA2B,CACzB,KAAM,CAACC,EAAKC,EAAOC,EAAQC,CAAI,EAAIN,EAAqB,MAAM,GAAG,EAE3DO,EAAY,CAChB,IAAAJ,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,CAAA,EAGF,OAAIJ,IAAc,QAChBK,EAAU,IAAMN,GAGdC,IAAc,UAChBK,EAAU,MAAQN,GAGhBC,IAAc,WAChBK,EAAU,OAASN,GAGjBC,IAAc,SAChBK,EAAU,KAAON,GAGfC,IAAc,QAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,EAClBM,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,MAChBK,EAAU,KAAON,EACjBM,EAAU,MAAQN,GAGhBC,IAAc,MAChBK,EAAU,IAAMN,EAChBM,EAAU,OAASN,GAMjBC,IAAc,aAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,GAGhBC,IAAc,gBAChBK,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,cAChBK,EAAU,IAAMN,EAChBM,EAAU,KAAON,GAGfC,IAAc,eAChBK,EAAU,MAAQN,EAClBM,EAAU,OAASN,GAGG,OAAO,OAAOM,CAAS,EAAE,KAAK,GAAG,CAG3D,EA8BaC,EAIXC,GAKG,CACH,KAAM,CAAE,QAAAC,GAAYD,EAEpB,GAAI,EAACA,GAAA,MAAAA,EAAQ,QAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,SAAW,EACzD,MAAO,CAAE,UAAW,CAAA,EAAI,WAAY,CAAA,EAAI,YAAa,EAAA,EAKvD,KAAM,CAAE,MAAAE,EAAQ,CAAA,EAAI,GAAGC,CAAA,EAAUH,EAAO,MAExC,IAAII,EAAgCF,EACpC,MAAMG,EAAyC,CAAA,EAC/C,IAAIC,EAAc,GAElB,cAAO,KAAKH,CAAK,EAAE,QAASI,GAAS,CACnC,MAAMC,EAAMD,EACNE,EAAaD,EACbE,EAAiBT,GAAA,YAAAA,EAAUQ,GAGjC,GAAI,CAACC,EAAgB,CACnB,OAAO,OAAOL,EAAY,CAAE,CAACG,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC/C,MACF,CAEA,MAAMG,EAAoBR,GAAA,YAAAA,EAAQK,GAElC,GAAI,CAACG,EAAmB,CACtB,OAAO,OAAOP,EAAW,CAAE,CAACI,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC9C,MACF,CAGA,MAAMI,EAAsBF,EAAe,MAAM,QAC/C,WACAC,CAAA,EAGIE,EAAaH,EAAe,OAQlC,GAJIA,EAAe,cACjBJ,EAAc,IAGZI,EAAe,UAAW,CAC5B,MAAMnB,EAAuBa,GAAA,YAAAA,EAAYS,GAEnCC,EAAmBxB,EAAuB,CAC9C,qBAAAC,EACA,MAAOqB,EACP,UAAWF,EAAe,SAAA,CAC3B,EAEDN,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGC,CAAA,EAEhB,MACF,CAEAV,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGD,CAAA,CAElB,CAAC,EAEM,CAAE,UAAAR,EAAW,WAAAC,EAAY,YAAAC,CAAA,CAClC,EC3MaS,EAIXf,GAEOgB,EAAM,QAAQ,IAAMjB,EAAaC,CAAM,EAAG,CAACA,CAAM,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Replace the VARIABLE placeholder with the actual value of the prop\n    const mappedValueOfCssVar = matchingCssVar.value.replace(\n      \"VARIABLE\",\n      matchingPropValue,\n    );\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":"mrQA2BMA,EAAyB,CAAC,CAC9B,qBAAAC,EAAuB,UACvB,MAAAC,EACA,UAAAC,CACF,IAA2B,CACzB,KAAM,CAACC,EAAKC,EAAOC,EAAQC,CAAI,EAAIN,EAAqB,MAAM,GAAG,EAE3DO,EAAY,CAChB,IAAAJ,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,CAAA,EAGF,OAAIJ,IAAc,QAChBK,EAAU,IAAMN,GAGdC,IAAc,UAChBK,EAAU,MAAQN,GAGhBC,IAAc,WAChBK,EAAU,OAASN,GAGjBC,IAAc,SAChBK,EAAU,KAAON,GAGfC,IAAc,QAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,EAClBM,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,MAChBK,EAAU,KAAON,EACjBM,EAAU,MAAQN,GAGhBC,IAAc,MAChBK,EAAU,IAAMN,EAChBM,EAAU,OAASN,GAMjBC,IAAc,aAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,GAGhBC,IAAc,gBAChBK,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,cAChBK,EAAU,IAAMN,EAChBM,EAAU,KAAON,GAGfC,IAAc,eAChBK,EAAU,MAAQN,EAClBM,EAAU,OAASN,GAGG,OAAO,OAAOM,CAAS,EAAE,KAAK,GAAG,CAG3D,EA8BaC,EAIXC,GAKG,CACH,KAAM,CAAE,QAAAC,GAAYD,EAEpB,GAAI,EAACA,GAAA,MAAAA,EAAQ,QAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,SAAW,EACzD,MAAO,CAAE,UAAW,CAAA,EAAI,WAAY,CAAA,EAAI,YAAa,EAAA,EAKvD,KAAM,CAAE,MAAAE,EAAQ,CAAA,EAAI,GAAGC,CAAA,EAAUH,EAAO,MAExC,IAAII,EAAgCF,EACpC,MAAMG,EAAyC,CAAA,EAC/C,IAAIC,EAAc,GAElB,cAAO,KAAKH,CAAK,EAAE,QAASI,GAAS,CACnC,MAAMC,EAAMD,EACNE,EAAaD,EACbE,EAAiBT,GAAA,YAAAA,EAAUQ,GAGjC,GAAI,CAACC,EAAgB,CACnB,OAAO,OAAOL,EAAY,CAAE,CAACG,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC/C,MACF,CAEA,MAAMG,EAAoBR,GAAA,YAAAA,EAAQK,GAElC,GAAI,CAACG,EAAmB,CACtB,OAAO,OAAOP,EAAW,CAAE,CAACI,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC9C,MACF,CAGA,MAAMI,EAAsBF,EAAe,MAAM,QAC/C,WACAC,CAAA,EAGIE,EAAaH,EAAe,OAQlC,GAJIA,EAAe,cACjBJ,EAAc,IAGZI,EAAe,UAAW,CAC5B,MAAMnB,EAAuBa,GAAA,YAAAA,EAAYS,GAEnCC,EAAmBxB,EAAuB,CAC9C,qBAAAC,EACA,MAAOqB,EACP,UAAWF,EAAe,SAAA,CAC3B,EAEDN,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGC,CAAA,EAEhB,MACF,CAEAV,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGD,CAAA,CAElB,CAAC,EAEM,CAAE,UAAAR,EAAW,WAAAC,EAAY,YAAAC,CAAA,CAClC,EC3MaS,EAIXf,GAEOgB,EAAM,QAAQ,IAAMjB,EAAaC,CAAM,EAAG,CAACA,CAAM,CAAC"}

package/dist/cjs/postcss.js.map

@@ -1 +1 @@
-{"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
+{"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,5 +1,5 @@
 import u from "react";
-const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, k = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 15: "var(--tgph-spacing-15)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 25: "var(--tgph-spacing-25)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 35: "var(--tgph-spacing-35)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, m = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, I = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, V = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, O = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, j = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, E = {
+const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, k = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", "1_5": "var(--tgph-spacing-1_5)", "2_5": "var(--tgph-spacing-2_5)", "3_5": "var(--tgph-spacing-3_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, m = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, I = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, V = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, _ = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, O = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, C = {
   "border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
   color: y,
   rounded: w,
@@ -10,9 +10,9 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
   tracking: I,
   text: V,
   weight: z,
-  breakpoint: O,
-  zIndex: j
-}, P = ({
+  breakpoint: _,
+  zIndex: O
+}, j = ({
   currentValueOfCssVar: e = "0 0 0 0",
   value: a,
   direction: r
@@ -24,7 +24,7 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
     left: n
   };
   return r === "top" && (t.top = a), r === "right" && (t.right = a), r === "bottom" && (t.bottom = a), r === "left" && (t.left = a), r === "all" && (t.top = a, t.right = a, t.bottom = a, t.left = a), r === "x" && (t.left = a, t.right = a), r === "y" && (t.top = a, t.bottom = a), r === "side-top" && (t.top = a, t.right = a), r === "side-bottom" && (t.bottom = a, t.left = a), r === "side-left" && (t.top = a, t.left = a), r === "side-right" && (t.right = a, t.bottom = a), Object.values(t).join(" ");
-}, S = (e) => {
+}, P = (e) => {
   const { cssVars: a } = e;
   if (!(e != null && e.props) || Object.keys(e.props).length === 0)
     return { styleProp: {}, otherProps: {}, interactive: !1 };
@@ -48,7 +48,7 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
       i
     ), c = v.cssVar;
     if (v.interactive && (n = !0), v.direction) {
-      const s = p == null ? void 0 : p[c], b = P({
+      const s = p == null ? void 0 : p[c], b = j({
         currentValueOfCssVar: s,
         value: o,
         direction: v.direction
@@ -64,10 +64,10 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
       [c]: o
     };
   }), { styleProp: p, otherProps: l, interactive: n };
-}, L = (e) => u.useMemo(() => S(e), [e]);
+}, E = (e) => u.useMemo(() => P(e), [e]);
 export {
-  S as getStyleProp,
-  E as tokens,
-  L as useStyleEngine
+  P as getStyleProp,
+  C as tokens,
+  E as useStyleEngine
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/postcss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"AAKA,MAAMA,IAAW,QAAQ,MAAM,GAEzBC,IAAS,QAAQ,IAAI,GAErBC,IAAU,QAAQ,SAAS;AAoBjC,SAASC,EAAiBC,IAAQ,QAAQ,OAA2B;AACnE,MAAIC,IAAUD,GACVE,IAAM;AAEV,SAAOA,KAAK;AACV,UAAMC,IAAcP,EAAS,KAAKK,GAAS,cAAc;AACzD,QAAIJ,EAAO,WAAWM,CAAW;AAC/B,UAAI;AAEF,YADY,KAAK,MAAMN,EAAO,aAAaM,GAAa,MAAM,CAAC,EACvD;AACN,iBAAOF;AAAA,MAEX,QAAQ;AAAA,MAER;AAGF,UAAMG,IAASR,EAAS,QAAQK,CAAO;AACvC,IAAIG,MAAWH,MAASC,IAAM,KAC9BD,IAAUG;AAAA,EACZ;AAGF;AAMA,MAAMC,IAAkC,CACtCC,GACAC,MAC0B;AAxD5B,MAAAC;AAyDE,MAAI,GAACF,EAAI,kBAAgBE,IAAA,OAAO,KAAKF,EAAI,YAAY,MAA5B,gBAAAE,EAA+B,YAAW;AAEnE,WAAO,OAAO,QAAQF,EAAI,YAAY,EAAE,OAAO,CAACG,GAAK,CAACC,GAAKC,CAAO,OAC5DD,EAAI,WAAW,aAAa,MAC9BD,EAAIC,CAAG,IAAI;AAAA,MACT,MAAMA;AAAA,MACN,SAAAC;AAAA,MACA,MAAMf,EAAS,QAAQW,GAAS,gBAAgBG,CAAG;AAAA,IAAA,IAGhDD,IACN,CAAA,CAAe;AACpB;AAMA,SAASG,IAA8B;AACrC,QAAML,IAAUX,EAAS,QAAQ,QAAQ,IAAA,GAAO,cAAc,GACxDU,IAAM,KAAK,MAAMT,EAAO,aAAaU,GAAS,MAAM,CAAC,GACrDM,IAAeR,EAAgCC,GAAK,QAAQ,KAAK,GACjEQ,IAAef,EAAA,GAEfgB,IAA8B,CAACC,MAA+B;AAClE,QAAI,CAACA,KAAQ,OAAO,KAAKA,CAAI,EAAE,WAAW;AACxC,aAAOA;AAGT,UAAMC,IAAU,EAAE,GAAGD,EAAA;AAErB,eAAWN,KAAO,OAAO,OAAOM,CAAI,GAAG;AACrC,UAAIb,GACAe;AAEJ,MAAIR,EAAI,QAAQ,SAAS,YAAY,KAAKI,KACxCX,IAAcP,EAAS;AAAA,QACrBkB;AAAA,QACA;AAAA,QACAJ,EAAI;AAAA,QACJ;AAAA,MAAA,GAEFQ,IAAaJ,MAEbX,IAAcP,EAAS;AAAA,QACrB,QAAQ,IAAA;AAAA,QACR;AAAA,QACAc,EAAI;AAAA,QACJ;AAAA,MAAA,GAEFQ,IAAa,QAAQ,IAAA;AAGvB,UAAI;AACF,cAAMC,IAAU,KAAK,MAAMtB,EAAO,aAAaM,GAAa,MAAM,CAAC,GAC7Da,IAAOX,EAAgCc,GAASD,CAAU;AAKhE,YAFA,OAAO,OAAOD,GAASD,CAAI,GAEvBA,GAAM;AAER,gBAAMI,IAAaL,EAA4BC,CAAI;AACnD,iBAAO,OAAOC,GAASG,CAAU;AAAA,QACnC;AAAA,MACF,QAAc;AAEZ;AAAA,MACF;AAAA,IACF;AAEA,WAAOH;AAAA,EACT;AAEA,SAAIJ,IACKE,EAA4BF,CAAY,IAG1C,CAAA;AACT;AAWA,SAASQ,EAAa;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,MAAAC;AACF,GAAsC;AACpC,MAAI;AACF,UAAMC,IAAU,GAAGD,CAAI,aAAaD,CAAQ,IACtCf,IAAUX,EAAS,QAAQ4B,CAAO;AAExC,WAAI3B,EAAO,WAAWU,CAAO,IACpBV,EAAO,aAAaU,GAAS,MAAM,IAGrC;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAiBA,MAAMkB,IAAoB,OAAO,EAAE,MAAAC,GAAM,QAAAC,QAAsC;AAC7E,QAAMX,IAAOJ,EAAA,GAEPgB,IACJD,EAAO,eAAe,KAClB,OAAO,OAAOX,CAAI,EAAE;AAAA,IAClB,CAACN,MAAQ,CAACA,EAAI,KAAK,SAAS,mBAAmB;AAAA,EAAA,IAEjD,CAAA,GAEAmB,IACJF,EAAO,OAAO,SAAS,IACnB,OAAO,OAAOX,CAAI,EAAE;AAAA,IAAO,CAACN,MAC1BA,EAAI,KAAK,SAAS,mBAAmB;AAAA,EAAA,IAEvC,CAAA,GAEAoB,IAAWF,EACd,IAAI,CAAClB,MAAQW,EAAa,EAAE,MAAMX,EAAI,KAAA,CAAM,CAAC,EAC7C,OAAO,OAAO,GAEXqB,IAAiBJ,EAAO,OAC3B,IAAI,CAACK,MACYH,EAAW;AAAA,IAAI,CAACnB,MAC9BW,EAAa,EAAE,MAAMX,EAAI,MAAM,UAAU,GAAGsB,CAAK,OAAA,CAAQ;AAAA,EAAA,EAG5C,OAAO,OAAO,CAC9B,EACA,OAAO,OAAO,GAEXC,IAAc,CAAC,GAAGH,GAAU,GAAGC,CAAc;AAEnD,aAAWG,KAAWD,GAAa;AACjC,UAAME,IAASrC,EAAQ,MAAMoC,CAAO;AACpC,IAAAR,EAAK,OAAOS,CAAM;AAAA,EACpB;AACF,GAOMC,IAA2B,OACxB;AAAA,EACL,eAAe;AAAA,EACf,SAAS;AAAA,IACP;AAAA,MACE,eAAe;AAAA,MACf,QAAQ;AAAA,QACN,YAAY;AAAA,QAAC;AAAA,MAAA;AAAA,MAEf,MAAM,KAAKV,GAAM;AACf,cAAMxB,IAAM;AAAA,UACV,QAAQ,CAAA;AAAA,UACR,YAAY;AAAA,QAAA;AAEd,QAAAwB,EAAK,YAAY,aAAa,CAACW,MAAW;AACxC,UAAIA,EAAO,WAAW,iBACpBnC,EAAI,aAAa,IACjBmC,EAAO,OAAA,IAGLA,EAAO,WAAW,mBACpBnC,EAAI,OAAO,KAAK,OAAO,GACvBmC,EAAO,OAAA,IAGLA,EAAO,WAAW,kBACpBnC,EAAI,OAAO,KAAK,MAAM,GACtBmC,EAAO,OAAA,IAGLA,EAAO,WAAW,aACpBnC,EAAI,OAAO,KAAK,SAAS,GACzBmC,EAAO,OAAA;AAAA,QAEX,CAAC,GAED,MAAMZ,EAAkB;AAAA,UACtB,MAAAC;AAAA,UACA,QAAQ;AAAA,YACN,QAAQxB,EAAI;AAAA,YACZ,YAAYA,EAAI;AAAA,UAAA;AAAA,QAClB,CACD;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AACF,IAIJoC,IAAe,OAAO,OAAOF,GAA0B;AAAA,EACrD,SAAS;AACX,CAAC;"}
+{"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}

package/dist/types/helpers/getStyleProp/getStyleProp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAoFF,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACtE,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpC,KAAK,aAAa,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IAAI,MAAM,OAAO,CAAC;AAG/E,KAAK,UAAU,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAAE,KAAK,IAC7D,IAAI,CACF;KACG,GAAG,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;CACjC,EACD,aAAa,CAAC,OAAO,CAAC,CACvB,GACD,MAAM,CAAC;AAIX,KAAK,SAAS,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACrD;KACG,GAAG,IAAI,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM;CAClD,GACD,MAAM,CAAC;AAEX,KAAK,kBAAkB,CAAC,OAAO,EAAE,KAAK,IAAI;IACxC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,UAE7B,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,KACzC;IACD,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;CAuEtB,CAAC"}
+{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAoFF,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACtE,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpC,KAAK,aAAa,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IAAI,MAAM,OAAO,CAAC;AAG/E,KAAK,UAAU,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAAE,KAAK,IAC7D,IAAI,CACF;KACG,GAAG,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;CACjC,EACD,aAAa,CAAC,OAAO,CAAC,CACvB,GACD,MAAM,CAAC;AAIX,KAAK,SAAS,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACrD;KACG,GAAG,IAAI,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM;CAClD,GACD,MAAM,CAAC;AAEX,KAAK,kBAAkB,CAAC,OAAO,EAAE,KAAK,IAAI;IACxC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,QAAQ,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,KACzC;IACD,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;CAuEtB,CAAC"}

package/dist/types/hooks/useStyleEngine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStyleEngine.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleEngine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAExE,KAAK,iBAAiB,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpE,eAAO,MAAM,cAAc,GACzB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,UAE7B,UAAU,CAAC,OAAO,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;;;;CAG3D,CAAC"}
+{"version":3,"file":"useStyleEngine.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleEngine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAExE,KAAK,iBAAiB,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpE,eAAO,MAAM,cAAc,GACzB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,QAAQ,UAAU,CAAC,OAAO,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;;;;CAG3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/style-engine",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "A wrappar around vanilla extract to style telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
   "author": "@knocklabs",
@@ -37,23 +37,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/tokens": "^0.1.0",
+    "@telegraph/tokens": "^0.1.2",
     "postcss": "^8.5.3"
   },
   "devDependencies": {
-    "@knocklabs/eslint-config": "^0.0.4",
+    "@knocklabs/eslint-config": "^0.0.5",
     "@knocklabs/typescript-config": "^0.0.2",
     "@telegraph/prettier-config": "^0.0.7",
     "@telegraph/vite-config": "^0.0.15",
     "@types/node": "^22.13.11",
     "@types/postcss-import": "^14.0.3",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.1.11",
     "eslint": "^8.56.0",
     "globby": "^14.1.0",
-    "lightningcss": "^1.29.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "typescript": "^5.7.3",
+    "lightningcss": "^1.30.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.9.2",
     "vite": "^6.0.11"
   },
   "peerDependencies": {