@wordpress/style-engine 2.37.0 → 2.37.1-next.06ee73755.0

package/CHANGELOG.md

@@ -2,8 +2,6 @@
 
 ## Unreleased
 
-## 2.37.0 (2025-12-23)
-
 ## 2.36.0 (2025-11-26)
 
 ## 2.35.0 (2025-11-12)

package/LICENSE.md

@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2025 by the contributors
+    Copyright 2016-2026 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 

package/build/{index.js → index.cjs}

@@ -26,8 +26,8 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_change_case = require("change-case");
-var import_styles = require("./styles");
-var import_utils = require("./styles/utils");
+var import_styles = require("./styles/index.cjs");
+var import_utils = require("./styles/utils.cjs");
 function compileCSS(style, options = {}) {
   const rules = getCSSRules(style, options);
   if (!options?.selector) {
@@ -79,4 +79,4 @@ function getCSSRules(style, options = {}) {
   getCSSRules,
   getCSSValueFromRawStyle
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/background/{index.js → index.cjs}

@@ -23,7 +23,7 @@ __export(background_exports, {
   default: () => background_default
 });
 module.exports = __toCommonJS(background_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var backgroundImage = {
   name: "backgroundImage",
   generate: (style, options) => {
@@ -99,4 +99,4 @@ var background_default = [
   backgroundSize,
   backgroundAttachment
 ];
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/border/{index.js → index.cjs}

@@ -23,7 +23,7 @@ __export(border_exports, {
   default: () => border_default
 });
 module.exports = __toCommonJS(border_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 function createBorderGenerateFunction(path) {
   return (style, options) => (0, import_utils.generateRule)(style, options, path, (0, import_utils.camelCaseJoin)(path));
 }
@@ -88,4 +88,4 @@ var border_default = [
   borderBottom,
   borderLeft
 ];
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/color/{background.js → background.cjs}

@@ -23,7 +23,7 @@ __export(background_exports, {
   default: () => background_default
 });
 module.exports = __toCommonJS(background_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var background = {
   name: "background",
   generate: (style, options) => {
@@ -36,4 +36,4 @@ var background = {
   }
 };
 var background_default = background;
-//# sourceMappingURL=background.js.map
+//# sourceMappingURL=background.cjs.map

package/build/styles/color/{gradient.js → gradient.cjs}

@@ -23,7 +23,7 @@ __export(gradient_exports, {
   default: () => gradient_default
 });
 module.exports = __toCommonJS(gradient_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var gradient = {
   name: "gradient",
   generate: (style, options) => {
@@ -36,4 +36,4 @@ var gradient = {
   }
 };
 var gradient_default = gradient;
-//# sourceMappingURL=gradient.js.map
+//# sourceMappingURL=gradient.cjs.map

package/build/styles/color/{index.js → index.cjs}

@@ -33,8 +33,8 @@ __export(color_exports, {
   default: () => color_default
 });
 module.exports = __toCommonJS(color_exports);
-var import_background = __toESM(require("./background"));
-var import_gradient = __toESM(require("./gradient"));
-var import_text = __toESM(require("./text"));
+var import_background = __toESM(require("./background.cjs"));
+var import_gradient = __toESM(require("./gradient.cjs"));
+var import_text = __toESM(require("./text.cjs"));
 var color_default = [import_text.default, import_gradient.default, import_background.default];
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/color/{text.js → text.cjs}

@@ -23,7 +23,7 @@ __export(text_exports, {
   default: () => text_default
 });
 module.exports = __toCommonJS(text_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var text = {
   name: "text",
   generate: (style, options) => {
@@ -31,4 +31,4 @@ var text = {
   }
 };
 var text_default = text;
-//# sourceMappingURL=text.js.map
+//# sourceMappingURL=text.cjs.map

package/build/styles/{constants.js → constants.cjs}

@@ -34,4 +34,4 @@ var VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = "--";
   VARIABLE_PATH_SEPARATOR_TOKEN_STYLE,
   VARIABLE_REFERENCE_PREFIX
 });
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.cjs.map

package/build/styles/dimensions/{index.js → index.cjs}

@@ -23,7 +23,18 @@ __export(dimensions_exports, {
   default: () => dimensions_default
 });
 module.exports = __toCommonJS(dimensions_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
+var height = {
+  name: "height",
+  generate: (style, options) => {
+    return (0, import_utils.generateRule)(
+      style,
+      options,
+      ["dimensions", "height"],
+      "height"
+    );
+  }
+};
 var minHeight = {
   name: "minHeight",
   generate: (style, options) => {
@@ -57,5 +68,5 @@ var width = {
     );
   }
 };
-var dimensions_default = [minHeight, aspectRatio, width];
-//# sourceMappingURL=index.js.map
+var dimensions_default = [height, minHeight, aspectRatio, width];
+//# sourceMappingURL=index.cjs.map

package/build/styles/dimensions/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/dimensions/index.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst height = {\n\tname: 'height',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'height' ],\n\t\t\t'height'\n\t\t);\n\t},\n};\n\nconst minHeight = {\n\tname: 'minHeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minHeight' ],\n\t\t\t'minHeight'\n\t\t);\n\t},\n};\n\nconst aspectRatio = {\n\tname: 'aspectRatio',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'aspectRatio' ],\n\t\t\t'aspectRatio'\n\t\t);\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'width' ],\n\t\t\t'width'\n\t\t);\n\t},\n};\n\nexport default [ height, minHeight, aspectRatio, width ];\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAA6B;AAE7B,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,QAAS;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,cAAc;AAAA,EACnB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,aAAc;AAAA,MAC9B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,QAAQ;AAAA,EACb,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,OAAQ;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ,CAAE,QAAQ,WAAW,aAAa,KAAM;",
+  "names": []
+}

package/build/styles/{index.js → index.cjs}

@@ -33,14 +33,14 @@ __export(styles_exports, {
   styleDefinitions: () => styleDefinitions
 });
 module.exports = __toCommonJS(styles_exports);
-var import_border = __toESM(require("./border"));
-var import_color = __toESM(require("./color"));
-var import_dimensions = __toESM(require("./dimensions"));
-var import_background = __toESM(require("./background"));
-var import_shadow = __toESM(require("./shadow"));
-var import_outline = __toESM(require("./outline"));
-var import_spacing = __toESM(require("./spacing"));
-var import_typography = __toESM(require("./typography"));
+var import_border = __toESM(require("./border/index.cjs"));
+var import_color = __toESM(require("./color/index.cjs"));
+var import_dimensions = __toESM(require("./dimensions/index.cjs"));
+var import_background = __toESM(require("./background/index.cjs"));
+var import_shadow = __toESM(require("./shadow/index.cjs"));
+var import_outline = __toESM(require("./outline/index.cjs"));
+var import_spacing = __toESM(require("./spacing/index.cjs"));
+var import_typography = __toESM(require("./typography/index.cjs"));
 var styleDefinitions = [
   ...import_border.default,
   ...import_color.default,
@@ -55,4 +55,4 @@ var styleDefinitions = [
 0 && (module.exports = {
   styleDefinitions
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/outline/{index.js → index.cjs}

@@ -23,7 +23,7 @@ __export(outline_exports, {
   default: () => outline_default
 });
 module.exports = __toCommonJS(outline_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var color = {
   name: "color",
   generate: (style, options, path = ["outline", "color"], ruleKey = "outlineColor") => {
@@ -49,4 +49,4 @@ var width = {
   }
 };
 var outline_default = [color, outlineStyle, offset, width];
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/shadow/{index.js → index.cjs}

@@ -23,7 +23,7 @@ __export(shadow_exports, {
   default: () => shadow_default
 });
 module.exports = __toCommonJS(shadow_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var shadow = {
   name: "shadow",
   generate: (style, options) => {
@@ -31,4 +31,4 @@ var shadow = {
   }
 };
 var shadow_default = [shadow];
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/spacing/{index.js → index.cjs}

@@ -33,7 +33,7 @@ __export(spacing_exports, {
   default: () => spacing_default
 });
 module.exports = __toCommonJS(spacing_exports);
-var import_padding = __toESM(require("./padding"));
-var import_margin = __toESM(require("./margin"));
+var import_padding = __toESM(require("./padding.cjs"));
+var import_margin = __toESM(require("./margin.cjs"));
 var spacing_default = [import_margin.default, import_padding.default];
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/spacing/{margin.js → margin.cjs}

@@ -23,7 +23,7 @@ __export(margin_exports, {
   default: () => margin_default
 });
 module.exports = __toCommonJS(margin_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var margin = {
   name: "margin",
   generate: (style, options) => {
@@ -34,4 +34,4 @@ var margin = {
   }
 };
 var margin_default = margin;
-//# sourceMappingURL=margin.js.map
+//# sourceMappingURL=margin.cjs.map

package/build/styles/spacing/{padding.js → padding.cjs}

@@ -23,7 +23,7 @@ __export(padding_exports, {
   default: () => padding_default
 });
 module.exports = __toCommonJS(padding_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var padding = {
   name: "padding",
   generate: (style, options) => {
@@ -34,4 +34,4 @@ var padding = {
   }
 };
 var padding_default = padding;
-//# sourceMappingURL=padding.js.map
+//# sourceMappingURL=padding.cjs.map

package/build/styles/typography/{index.js → index.cjs}

@@ -23,7 +23,7 @@ __export(typography_exports, {
   default: () => typography_default
 });
 module.exports = __toCommonJS(typography_exports);
-var import_utils = require("../utils");
+var import_utils = require("../utils.cjs");
 var fontSize = {
   name: "fontSize",
   generate: (style, options) => {
@@ -146,4 +146,4 @@ var typography_default = [
   textTransform,
   writingMode
 ];
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/styles/{utils.js → utils.cjs}

@@ -30,7 +30,7 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_change_case = require("change-case");
-var import_constants = require("./constants");
+var import_constants = require("./constants.cjs");
 var getStyleValueByPath = (object, path) => {
   let value = object;
   path.forEach((fieldName) => {
@@ -132,4 +132,4 @@ function safeDecodeURI(uri) {
   safeDecodeURI,
   upperFirst
 });
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.cjs.map

package/build/{types.js → types.cjs}

@@ -16,4 +16,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/style-engine/src/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.cjs.map

package/build/{types.js.map → types.cjs.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/types.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t  };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t  };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\theight?: CSSProperties[ 'height' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t\twidth?: CSSProperties[ 'width' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build-module/{index.js → index.mjs}

@@ -1,7 +1,7 @@
 // packages/style-engine/src/index.ts
 import { paramCase as kebabCase } from "change-case";
-import { styleDefinitions } from "./styles";
-import { getCSSValueFromRawStyle } from "./styles/utils";
+import { styleDefinitions } from "./styles/index.mjs";
+import { getCSSValueFromRawStyle } from "./styles/utils.mjs";
 function compileCSS(style, options = {}) {
   const rules = getCSSRules(style, options);
   if (!options?.selector) {
@@ -52,4 +52,4 @@ export {
   getCSSRules,
   getCSSValueFromRawStyle
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/background/{index.js → index.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/background/index.ts
-import { generateRule, safeDecodeURI } from "../utils";
+import { generateRule, safeDecodeURI } from "../utils.mjs";
 var backgroundImage = {
   name: "backgroundImage",
   generate: (style, options) => {
@@ -78,4 +78,4 @@ var background_default = [
 export {
   background_default as default
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/border/{index.js → index.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/border/index.ts
-import { generateRule, generateBoxRules, camelCaseJoin } from "../utils";
+import { generateRule, generateBoxRules, camelCaseJoin } from "../utils.mjs";
 function createBorderGenerateFunction(path) {
   return (style, options) => generateRule(style, options, path, camelCaseJoin(path));
 }
@@ -67,4 +67,4 @@ var border_default = [
 export {
   border_default as default
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/color/{background.js → background.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/color/background.ts
-import { generateRule } from "../utils";
+import { generateRule } from "../utils.mjs";
 var background = {
   name: "background",
   generate: (style, options) => {
@@ -15,4 +15,4 @@ var background_default = background;
 export {
   background_default as default
 };
-//# sourceMappingURL=background.js.map
+//# sourceMappingURL=background.mjs.map

package/build-module/styles/color/{gradient.js → gradient.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/color/gradient.ts
-import { generateRule } from "../utils";
+import { generateRule } from "../utils.mjs";
 var gradient = {
   name: "gradient",
   generate: (style, options) => {
@@ -15,4 +15,4 @@ var gradient_default = gradient;
 export {
   gradient_default as default
 };
-//# sourceMappingURL=gradient.js.map
+//# sourceMappingURL=gradient.mjs.map

package/build-module/styles/color/index.mjs

@@ -0,0 +1,9 @@
+// packages/style-engine/src/styles/color/index.ts
+import background from "./background.mjs";
+import gradient from "./gradient.mjs";
+import text from "./text.mjs";
+var color_default = [text, gradient, background];
+export {
+  color_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/color/{text.js → text.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/color/text.ts
-import { generateRule } from "../utils";
+import { generateRule } from "../utils.mjs";
 var text = {
   name: "text",
   generate: (style, options) => {
@@ -10,4 +10,4 @@ var text_default = text;
 export {
   text_default as default
 };
-//# sourceMappingURL=text.js.map
+//# sourceMappingURL=text.mjs.map

package/build-module/styles/{constants.js → constants.mjs}

@@ -7,4 +7,4 @@ export {
   VARIABLE_PATH_SEPARATOR_TOKEN_STYLE,
   VARIABLE_REFERENCE_PREFIX
 };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.mjs.map

package/build-module/styles/dimensions/{index.js → index.mjs}

@@ -1,5 +1,16 @@
 // packages/style-engine/src/styles/dimensions/index.ts
-import { generateRule } from "../utils";
+import { generateRule } from "../utils.mjs";
+var height = {
+  name: "height",
+  generate: (style, options) => {
+    return generateRule(
+      style,
+      options,
+      ["dimensions", "height"],
+      "height"
+    );
+  }
+};
 var minHeight = {
   name: "minHeight",
   generate: (style, options) => {
@@ -33,8 +44,8 @@ var width = {
     );
   }
 };
-var dimensions_default = [minHeight, aspectRatio, width];
+var dimensions_default = [height, minHeight, aspectRatio, width];
 export {
   dimensions_default as default
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/dimensions/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/dimensions/index.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule } from '../utils';\n\nconst height = {\n\tname: 'height',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'height' ],\n\t\t\t'height'\n\t\t);\n\t},\n};\n\nconst minHeight = {\n\tname: 'minHeight',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'minHeight' ],\n\t\t\t'minHeight'\n\t\t);\n\t},\n};\n\nconst aspectRatio = {\n\tname: 'aspectRatio',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'aspectRatio' ],\n\t\t\t'aspectRatio'\n\t\t);\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'dimensions', 'width' ],\n\t\t\t'width'\n\t\t);\n\t},\n};\n\nexport default [ height, minHeight, aspectRatio, width ];\n"],
+  "mappings": ";AAIA,SAAS,oBAAoB;AAE7B,IAAM,SAAS;AAAA,EACd,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,QAAS;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,YAAY;AAAA,EACjB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,WAAY;AAAA,MAC5B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,cAAc;AAAA,EACnB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,aAAc;AAAA,MAC9B;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,QAAQ;AAAA,EACb,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,OAAQ;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ,CAAE,QAAQ,WAAW,aAAa,KAAM;",
+  "names": []
+}

package/build-module/styles/index.mjs

@@ -0,0 +1,23 @@
+// packages/style-engine/src/styles/index.ts
+import border from "./border/index.mjs";
+import color from "./color/index.mjs";
+import dimensions from "./dimensions/index.mjs";
+import background from "./background/index.mjs";
+import shadow from "./shadow/index.mjs";
+import outline from "./outline/index.mjs";
+import spacing from "./spacing/index.mjs";
+import typography from "./typography/index.mjs";
+var styleDefinitions = [
+  ...border,
+  ...color,
+  ...dimensions,
+  ...outline,
+  ...spacing,
+  ...typography,
+  ...shadow,
+  ...background
+];
+export {
+  styleDefinitions
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/outline/{index.js → index.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/outline/index.ts
-import { generateRule } from "../utils";
+import { generateRule } from "../utils.mjs";
 var color = {
   name: "color",
   generate: (style, options, path = ["outline", "color"], ruleKey = "outlineColor") => {
@@ -28,4 +28,4 @@ var outline_default = [color, outlineStyle, offset, width];
 export {
   outline_default as default
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/shadow/{index.js → index.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/shadow/index.ts
-import { generateRule } from "../utils";
+import { generateRule } from "../utils.mjs";
 var shadow = {
   name: "shadow",
   generate: (style, options) => {
@@ -10,4 +10,4 @@ var shadow_default = [shadow];
 export {
   shadow_default as default
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/spacing/{index.js → index.mjs}

@@ -1,8 +1,8 @@
 // packages/style-engine/src/styles/spacing/index.ts
-import padding from "./padding";
-import margin from "./margin";
+import padding from "./padding.mjs";
+import margin from "./margin.mjs";
 var spacing_default = [margin, padding];
 export {
   spacing_default as default
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/spacing/{margin.js → margin.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/spacing/margin.ts
-import { generateBoxRules } from "../utils";
+import { generateBoxRules } from "../utils.mjs";
 var margin = {
   name: "margin",
   generate: (style, options) => {
@@ -13,4 +13,4 @@ var margin_default = margin;
 export {
   margin_default as default
 };
-//# sourceMappingURL=margin.js.map
+//# sourceMappingURL=margin.mjs.map

package/build-module/styles/spacing/{padding.js → padding.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/spacing/padding.ts
-import { generateBoxRules } from "../utils";
+import { generateBoxRules } from "../utils.mjs";
 var padding = {
   name: "padding",
   generate: (style, options) => {
@@ -13,4 +13,4 @@ var padding_default = padding;
 export {
   padding_default as default
 };
-//# sourceMappingURL=padding.js.map
+//# sourceMappingURL=padding.mjs.map

package/build-module/styles/typography/{index.js → index.mjs}

@@ -1,5 +1,5 @@
 // packages/style-engine/src/styles/typography/index.ts
-import { generateRule } from "../utils";
+import { generateRule } from "../utils.mjs";
 var fontSize = {
   name: "fontSize",
   generate: (style, options) => {
@@ -125,4 +125,4 @@ var typography_default = [
 export {
   typography_default as default
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/build-module/styles/{utils.js → utils.mjs}

@@ -4,7 +4,7 @@ import {
   VARIABLE_REFERENCE_PREFIX,
   VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
   VARIABLE_PATH_SEPARATOR_TOKEN_STYLE
-} from "./constants";
+} from "./constants.mjs";
 var getStyleValueByPath = (object, path) => {
   let value = object;
   path.forEach((fieldName) => {
@@ -105,4 +105,4 @@ export {
   safeDecodeURI,
   upperFirst
 };
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.mjs.map

package/build-module/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-types/styles/dimensions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/dimensions/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;sBAKnC,KAAK,WAAW,YAAY;;AAkChD,wBAAiD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/dimensions/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;sBAKnC,KAAK,WAAW,YAAY;;AA8ChD,wBAAyD"}

package/build-types/types.d.ts

@@ -42,7 +42,9 @@ export interface Style {
     };
     dimensions?: {
         aspectRatio?: CSSProperties['aspectRatio'];
+        height?: CSSProperties['height'];
         minHeight?: CSSProperties['minHeight'];
+        width?: CSSProperties['width'];
     };
     spacing?: {
         margin?: CSSProperties['margin'] | Box<'margin'>;