@wordpress/style-engine 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.1.0 (2022-09-21)
+
 ### Enhancement
 -   Allow for prettified output ([#42909](https://github.com/WordPress/gutenberg/pull/42909)).
 -   Enqueue block supports styles in Gutenberg ([#42880](https://github.com/WordPress/gutenberg/pull/42880)).

package/build/styles/border/index.js

@@ -10,13 +10,38 @@ var _utils = require("../utils");
 /**
  * Internal dependencies
  */
+
+/**
+ * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
+ *
+ * @param path An array of strings representing the path to the style value in the style object.
+ *
+ * @return A function that generates CSS rules.
+ */
+function createBorderGenerateFunction(path) {
+  return (style, options) => (0, _utils.generateRule)(style, options, path, (0, _utils.camelCaseJoin)(path));
+}
+/**
+ * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
+ *
+ * @param edge The edge to create CSS rules for.
+ *
+ * @return A function that generates CSS rules.
+ */
+
+
+function createBorderEdgeGenerateFunction(edge) {
+  return (style, options) => {
+    return ['color', 'style', 'width'].flatMap(key => {
+      const path = ['border', edge, key];
+      return createBorderGenerateFunction(path)(style, options);
+    });
+  };
+}
+
 const color = {
   name: 'color',
-  generate: function (style, options) {
-    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'color'];
-    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderColor';
-    return (0, _utils.generateRule)(style, options, path, ruleKey);
-  }
+  generate: createBorderGenerateFunction(['border', 'color'])
 };
 const radius = {
   name: 'radius',
@@ -29,66 +54,28 @@ const radius = {
 };
 const borderStyle = {
   name: 'style',
-  generate: function (style, options) {
-    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'style'];
-    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderStyle';
-    return (0, _utils.generateRule)(style, options, path, ruleKey);
-  }
+  generate: createBorderGenerateFunction(['border', 'style'])
 };
 const width = {
   name: 'width',
-  generate: function (style, options) {
-    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'width'];
-    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderWidth';
-    return (0, _utils.generateRule)(style, options, path, ruleKey);
-  }
-};
-const borderDefinitionsWithIndividualStyles = [color, borderStyle, width];
-/**
- * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
- *
- * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
- *
- * @return StyleDefinition[ 'generate' ]
- */
-
-const createBorderGenerateFunction = individualProperty => (style, options) => {
-  var _style$border;
-
-  const styleValue = style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border[individualProperty];
-
-  if (!styleValue) {
-    return [];
-  }
-
-  return borderDefinitionsWithIndividualStyles.reduce((acc, borderDefinition) => {
-    const key = borderDefinition.name;
-
-    if (styleValue.hasOwnProperty(key) && typeof borderDefinition.generate === 'function') {
-      const ruleKey = `border${(0, _utils.upperFirst)(individualProperty)}${(0, _utils.upperFirst)(key)}`;
-      acc.push(...borderDefinition.generate(style, options, ['border', individualProperty, key], ruleKey));
-    }
-
-    return acc;
-  }, []);
+  generate: createBorderGenerateFunction(['border', 'width'])
 };
-
 const borderTop = {
   name: 'borderTop',
-  generate: createBorderGenerateFunction('top')
+  generate: createBorderEdgeGenerateFunction('top')
 };
 const borderRight = {
   name: 'borderRight',
-  generate: createBorderGenerateFunction('right')
+  generate: createBorderEdgeGenerateFunction('right')
 };
 const borderBottom = {
   name: 'borderBottom',
-  generate: createBorderGenerateFunction('bottom')
+  generate: createBorderEdgeGenerateFunction('bottom')
 };
 const borderLeft = {
   name: 'borderLeft',
-  generate: createBorderGenerateFunction('left')
+  generate: createBorderEdgeGenerateFunction('left')
 };
-var _default = [...borderDefinitionsWithIndividualStyles, radius, borderTop, borderRight, borderBottom, borderLeft];
+var _default = [color, borderStyle, width, radius, borderTop, borderRight, borderBottom, borderLeft];
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/styles/border/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["color","name","generate","style","options","path","ruleKey","radius","default","individual","borderStyle","width","borderDefinitionsWithIndividualStyles","createBorderGenerateFunction","individualProperty","styleValue","border","reduce","acc","borderDefinition","key","hasOwnProperty","push","borderTop","borderRight","borderBottom","borderLeft"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport type {\n\tBorderIndividualStyles,\n\tBorderIndividualProperty,\n\tGeneratedCSSRule,\n\tStyle,\n\tStyleDefinition,\n\tStyleOptions,\n} from '../../types';\nimport { generateRule, generateBoxRules, upperFirst } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'color' ],\n\t\truleKey: string = 'borderColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst radius = {\n\tname: 'radius',\n\tgenerate: ( style: Style, options: StyleOptions ): GeneratedCSSRule[] => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'border', 'radius' ],\n\t\t\t{\n\t\t\t\tdefault: 'borderRadius',\n\t\t\t\tindividual: 'border%sRadius',\n\t\t\t},\n\t\t\t[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]\n\t\t);\n\t},\n};\n\nconst borderStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'style' ],\n\t\truleKey: string = 'borderStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'width' ],\n\t\truleKey: string = 'borderWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst borderDefinitionsWithIndividualStyles: StyleDefinition[] = [\n\tcolor,\n\tborderStyle,\n\twidth,\n];\n\n/**\n * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.\n *\n * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').\n *\n * @return StyleDefinition[ 'generate' ]\n */\nconst createBorderGenerateFunction =\n\t( individualProperty: BorderIndividualProperty ) =>\n\t( style: Style, options: StyleOptions ) => {\n\t\tconst styleValue:\n\t\t\t| BorderIndividualStyles< typeof individualProperty >\n\t\t\t| undefined = style?.border?.[ individualProperty ];\n\n\t\tif ( ! styleValue ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn borderDefinitionsWithIndividualStyles.reduce(\n\t\t\t(\n\t\t\t\tacc: GeneratedCSSRule[],\n\t\t\t\tborderDefinition: StyleDefinition\n\t\t\t): GeneratedCSSRule[] => {\n\t\t\t\tconst key = borderDefinition.name;\n\t\t\t\tif (\n\t\t\t\t\tstyleValue.hasOwnProperty( key ) &&\n\t\t\t\t\ttypeof borderDefinition.generate === 'function'\n\t\t\t\t) {\n\t\t\t\t\tconst ruleKey = `border${ upperFirst(\n\t\t\t\t\t\tindividualProperty\n\t\t\t\t\t) }${ upperFirst( key ) }`;\n\t\t\t\t\tacc.push(\n\t\t\t\t\t\t...borderDefinition.generate(\n\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\toptions,\n\t\t\t\t\t\t\t[ 'border', individualProperty, key ],\n\t\t\t\t\t\t\truleKey\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t};\n\nconst borderTop = {\n\tname: 'borderTop',\n\tgenerate: createBorderGenerateFunction( 'top' ),\n};\n\nconst borderRight = {\n\tname: 'borderRight',\n\tgenerate: createBorderGenerateFunction( 'right' ),\n};\n\nconst borderBottom = {\n\tname: 'borderBottom',\n\tgenerate: createBorderGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft = {\n\tname: 'borderLeft',\n\tgenerate: createBorderGenerateFunction( 'left' ),\n};\n\nexport default [\n\t...borderDefinitionsWithIndividualStyles,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["createBorderGenerateFunction","path","style","options","createBorderEdgeGenerateFunction","edge","flatMap","key","color","name","generate","radius","default","individual","borderStyle","width","borderTop","borderRight","borderBottom","borderLeft"],"mappings":";;;;;;;AAIA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,4BAAT,CAAuCC,IAAvC,EAA0E;AACzE,SAAO,CAAEC,KAAF,EAASC,OAAT,KACN,yBAAcD,KAAd,EAAqBC,OAArB,EAA8BF,IAA9B,EAAoC,0BAAeA,IAAf,CAApC,CADD;AAEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASG,gCAAT,CAA2CC,IAA3C,EAA6E;AAC5E,SAAO,CAAEH,KAAF,EAASC,OAAT,KAAsB;AAC5B,WAAO,CAAE,OAAF,EAAW,OAAX,EAAoB,OAApB,EAA8BG,OAA9B,CAAyCC,GAAF,IAAW;AACxD,YAAMN,IAAI,GAAG,CAAE,QAAF,EAAYI,IAAZ,EAAkBE,GAAlB,CAAb;AACA,aAAOP,4BAA4B,CAAEC,IAAF,CAA5B,CAAsCC,KAAtC,EAA6CC,OAA7C,CAAP;AACA,KAHM,CAAP;AAIA,GALD;AAMA;;AAED,MAAMK,KAAsB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMW,MAAuB,GAAG;AAC/BF,EAAAA,IAAI,EAAE,QADyB;AAE/BC,EAAAA,QAAQ,EAAE,CAAER,KAAF,EAASC,OAAT,KAAsB;AAC/B,WAAO,6BACND,KADM,EAENC,OAFM,EAGN,CAAE,QAAF,EAAY,QAAZ,CAHM,EAIN;AACCS,MAAAA,OAAO,EAAE,cADV;AAECC,MAAAA,UAAU,EAAE;AAFb,KAJM,EAQN,CAAE,SAAF,EAAa,UAAb,EAAyB,YAAzB,EAAuC,aAAvC,CARM,CAAP;AAUA;AAb8B,CAAhC;AAgBA,MAAMC,WAA4B,GAAG;AACpCL,EAAAA,IAAI,EAAE,OAD8B;AAEpCC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFF,CAArC;AAKA,MAAMe,KAAsB,GAAG;AAC9BN,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMgB,SAA0B,GAAG;AAClCP,EAAAA,IAAI,EAAE,WAD4B;AAElCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,KAAF;AAFR,CAAnC;AAKA,MAAMa,WAA4B,GAAG;AACpCR,EAAAA,IAAI,EAAE,aAD8B;AAEpCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,OAAF;AAFN,CAArC;AAKA,MAAMc,YAA6B,GAAG;AACrCT,EAAAA,IAAI,EAAE,cAD+B;AAErCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,QAAF;AAFL,CAAtC;AAKA,MAAMe,UAA2B,GAAG;AACnCV,EAAAA,IAAI,EAAE,YAD6B;AAEnCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,MAAF;AAFP,CAApC;eAKe,CACdI,KADc,EAEdM,WAFc,EAGdC,KAHc,EAIdJ,MAJc,EAKdK,SALc,EAMdC,WANc,EAOdC,YAPc,EAQdC,UARc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';\nimport { generateRule, generateBoxRules, camelCaseJoin } from '../utils';\n\n/**\n * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.\n *\n * @param path An array of strings representing the path to the style value in the style object.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderGenerateFunction( path: string[] ): GenerateFunction {\n\treturn ( style, options ) =>\n\t\tgenerateRule( style, options, path, camelCaseJoin( path ) );\n}\n\n/**\n * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.\n *\n * @param edge The edge to create CSS rules for.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {\n\treturn ( style, options ) => {\n\t\treturn [ 'color', 'style', 'width' ].flatMap( ( key ) => {\n\t\t\tconst path = [ 'border', edge, key ];\n\t\t\treturn createBorderGenerateFunction( path )( style, options );\n\t\t} );\n\t};\n}\n\nconst color: StyleDefinition = {\n\tname: 'color',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'color' ] ),\n};\n\nconst radius: StyleDefinition = {\n\tname: 'radius',\n\tgenerate: ( style, options ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'border', 'radius' ],\n\t\t\t{\n\t\t\t\tdefault: 'borderRadius',\n\t\t\t\tindividual: 'border%sRadius',\n\t\t\t},\n\t\t\t[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]\n\t\t);\n\t},\n};\n\nconst borderStyle: StyleDefinition = {\n\tname: 'style',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'style' ] ),\n};\n\nconst width: StyleDefinition = {\n\tname: 'width',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'width' ] ),\n};\n\nconst borderTop: StyleDefinition = {\n\tname: 'borderTop',\n\tgenerate: createBorderEdgeGenerateFunction( 'top' ),\n};\n\nconst borderRight: StyleDefinition = {\n\tname: 'borderRight',\n\tgenerate: createBorderEdgeGenerateFunction( 'right' ),\n};\n\nconst borderBottom: StyleDefinition = {\n\tname: 'borderBottom',\n\tgenerate: createBorderEdgeGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft: StyleDefinition = {\n\tname: 'borderLeft',\n\tgenerate: createBorderEdgeGenerateFunction( 'left' ),\n};\n\nexport default [\n\tcolor,\n\tborderStyle,\n\twidth,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}

package/build/styles/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.camelCaseJoin = camelCaseJoin;
 exports.generateBoxRules = generateBoxRules;
 exports.generateRule = generateRule;
 exports.getCSSVarFromStyleValue = getCSSVarFromStyleValue;
@@ -102,14 +103,27 @@ function getCSSVarFromStyleValue(styleValue) {
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
  */
 
 
-function upperFirst(_ref) {
-  let [firstLetter, ...rest] = _ref;
+function upperFirst(string) {
+  const [firstLetter, ...rest] = string;
   return firstLetter.toUpperCase() + rest.join('');
 }
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
+ */
+
+
+function camelCaseJoin(strings) {
+  const [firstItem, ...rest] = strings;
+  return firstItem.toLowerCase() + rest.map(upperFirst).join('');
+}
 //# sourceMappingURL=utils.js.map

package/build/styles/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","firstLetter","rest","toUpperCase"],"mappings":";;;;;;;;;;AAGA;;AAYA;;AAfA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CACNC,KADM,EAENC,OAFM,EAGNC,IAHM,EAINC,OAJM,EAKL;AACD,QAAMC,UAA8B,GAAG,iBAAKJ,KAAL,EAAYE,IAAZ,CAAvC;AAEA,SAAOE,UAAU,GACd,CACA;AACCC,IAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADpB;AAECC,IAAAA,GAAG,EAAEH,OAFN;AAGCI,IAAAA,KAAK,EAAEC,uBAAuB,CAAEJ,UAAF;AAH/B,GADA,CADc,GAQd,EARH;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,gBAAT,CACNT,KADM,EAENC,OAFM,EAGNC,IAHM,EAINQ,QAJM,EAMe;AAAA,MADrBC,oBACqB,uEADY,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CACZ;AACrB,QAAMC,QAAkC,GAAG,iBAAKZ,KAAL,EAAYE,IAAZ,CAA3C;;AACA,MAAK,CAAEU,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AAED,QAAMC,KAAyB,GAAG,EAAlC;;AACA,MAAK,OAAOD,QAAP,KAAoB,QAAzB,EAAoC;AACnCC,IAAAA,KAAK,CAACC,IAAN,CAAY;AACXT,MAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADR;AAEXC,MAAAA,GAAG,EAAEI,QAAQ,CAACK,OAFH;AAGXR,MAAAA,KAAK,EAAEK;AAHI,KAAZ;AAKA,GAND,MAMO;AACN,UAAMI,SAAS,GAAGL,oBAAoB,CAACM,MAArB,CACjB,CAAEC,GAAF,EAA2BC,IAA3B,KAA6C;AAC5C,YAAMZ,KAAyB,GAAGC,uBAAuB,CACxD,iBAAKI,QAAL,EAAe,CAAEO,IAAF,CAAf,CADwD,CAAzD;;AAGA,UAAKZ,KAAL,EAAa;AACZW,QAAAA,GAAG,CAACJ,IAAJ,CAAU;AACTT,UAAAA,QAAQ,EAAEJ,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI,QADV;AAETC,UAAAA,GAAG,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEU,UAAV,CAAqBC,OAArB,CACJ,IADI,EAEJC,UAAU,CAAEH,IAAF,CAFN,CAFI;AAMTZ,UAAAA;AANS,SAAV;AAQA;;AACD,aAAOW,GAAP;AACA,KAhBgB,EAiBjB,EAjBiB,CAAlB;AAmBAL,IAAAA,KAAK,CAACC,IAAN,CAAY,GAAGE,SAAf;AACA;;AAED,SAAOH,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASL,uBAAT,CAAkCJ,UAAlC,EAA+D;AACrE,MACC,OAAOA,UAAP,KAAsB,QAAtB,IACAA,UAAU,CAACmB,UAAX,CAAuBC,oCAAvB,CAFD,EAGE;AACD,UAAMC,QAAQ,GAAGrB,UAAU,CACzBsB,KADe,CACRF,qCAA0BG,MADlB,EAEfC,KAFe,CAERC,kDAFQ,EAGfC,IAHe,CAGTC,8CAHS,CAAjB;AAIA,WAAQ,aAAaN,QAAU,GAA/B;AACA;;AACD,SAAOrB,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASkB,UAAT,OAAwD;AAAA,MAAnC,CAAEU,WAAF,EAAe,GAAGC,IAAlB,CAAmC;AAC9D,SAAOD,WAAW,CAACE,WAAZ,KAA4BD,IAAI,CAACH,IAAL,CAAW,EAAX,CAAnC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style                Style object.\n * @param  options              Options object with settings to adjust how the styles are generated.\n * @param  path                 An array of strings representing the path to the style value in the style object.\n * @param  ruleKeys             An array of CSS property keys and patterns.\n * @param  individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return string A CSS var value.\n */\nexport function upperFirst( [ firstLetter, ...rest ]: string ) {\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","VARIABLE_REFERENCE_PREFIX","variable","slice","length","split","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","join","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase","map"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style                Style object.\n * @param  options              Options object with settings to adjust how the styles are generated.\n * @param  path                 An array of strings representing the path to the style value in the style object.\n * @param  ruleKeys             An array of CSS property keys and patterns.\n * @param  individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n"]}

package/build-module/styles/border/index.js

@@ -1,14 +1,39 @@
 /**
  * Internal dependencies
  */
-import { generateRule, generateBoxRules, upperFirst } from '../utils';
+import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
+/**
+ * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
+ *
+ * @param path An array of strings representing the path to the style value in the style object.
+ *
+ * @return A function that generates CSS rules.
+ */
+
+function createBorderGenerateFunction(path) {
+  return (style, options) => generateRule(style, options, path, camelCaseJoin(path));
+}
+/**
+ * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
+ *
+ * @param edge The edge to create CSS rules for.
+ *
+ * @return A function that generates CSS rules.
+ */
+
+
+function createBorderEdgeGenerateFunction(edge) {
+  return (style, options) => {
+    return ['color', 'style', 'width'].flatMap(key => {
+      const path = ['border', edge, key];
+      return createBorderGenerateFunction(path)(style, options);
+    });
+  };
+}
+
 const color = {
   name: 'color',
-  generate: function (style, options) {
-    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'color'];
-    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderColor';
-    return generateRule(style, options, path, ruleKey);
-  }
+  generate: createBorderGenerateFunction(['border', 'color'])
 };
 const radius = {
   name: 'radius',
@@ -21,65 +46,27 @@ const radius = {
 };
 const borderStyle = {
   name: 'style',
-  generate: function (style, options) {
-    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'style'];
-    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderStyle';
-    return generateRule(style, options, path, ruleKey);
-  }
+  generate: createBorderGenerateFunction(['border', 'style'])
 };
 const width = {
   name: 'width',
-  generate: function (style, options) {
-    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ['border', 'width'];
-    let ruleKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'borderWidth';
-    return generateRule(style, options, path, ruleKey);
-  }
-};
-const borderDefinitionsWithIndividualStyles = [color, borderStyle, width];
-/**
- * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
- *
- * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
- *
- * @return StyleDefinition[ 'generate' ]
- */
-
-const createBorderGenerateFunction = individualProperty => (style, options) => {
-  var _style$border;
-
-  const styleValue = style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border[individualProperty];
-
-  if (!styleValue) {
-    return [];
-  }
-
-  return borderDefinitionsWithIndividualStyles.reduce((acc, borderDefinition) => {
-    const key = borderDefinition.name;
-
-    if (styleValue.hasOwnProperty(key) && typeof borderDefinition.generate === 'function') {
-      const ruleKey = `border${upperFirst(individualProperty)}${upperFirst(key)}`;
-      acc.push(...borderDefinition.generate(style, options, ['border', individualProperty, key], ruleKey));
-    }
-
-    return acc;
-  }, []);
+  generate: createBorderGenerateFunction(['border', 'width'])
 };
-
 const borderTop = {
   name: 'borderTop',
-  generate: createBorderGenerateFunction('top')
+  generate: createBorderEdgeGenerateFunction('top')
 };
 const borderRight = {
   name: 'borderRight',
-  generate: createBorderGenerateFunction('right')
+  generate: createBorderEdgeGenerateFunction('right')
 };
 const borderBottom = {
   name: 'borderBottom',
-  generate: createBorderGenerateFunction('bottom')
+  generate: createBorderEdgeGenerateFunction('bottom')
 };
 const borderLeft = {
   name: 'borderLeft',
-  generate: createBorderGenerateFunction('left')
+  generate: createBorderEdgeGenerateFunction('left')
 };
-export default [...borderDefinitionsWithIndividualStyles, radius, borderTop, borderRight, borderBottom, borderLeft];
+export default [color, borderStyle, width, radius, borderTop, borderRight, borderBottom, borderLeft];
 //# sourceMappingURL=index.js.map

package/build-module/styles/border/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["generateRule","generateBoxRules","upperFirst","color","name","generate","style","options","path","ruleKey","radius","default","individual","borderStyle","width","borderDefinitionsWithIndividualStyles","createBorderGenerateFunction","individualProperty","styleValue","border","reduce","acc","borderDefinition","key","hasOwnProperty","push","borderTop","borderRight","borderBottom","borderLeft"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport type {\n\tBorderIndividualStyles,\n\tBorderIndividualProperty,\n\tGeneratedCSSRule,\n\tStyle,\n\tStyleDefinition,\n\tStyleOptions,\n} from '../../types';\nimport { generateRule, generateBoxRules, upperFirst } from '../utils';\n\nconst color = {\n\tname: 'color',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'color' ],\n\t\truleKey: string = 'borderColor'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst radius = {\n\tname: 'radius',\n\tgenerate: ( style: Style, options: StyleOptions ): GeneratedCSSRule[] => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'border', 'radius' ],\n\t\t\t{\n\t\t\t\tdefault: 'borderRadius',\n\t\t\t\tindividual: 'border%sRadius',\n\t\t\t},\n\t\t\t[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]\n\t\t);\n\t},\n};\n\nconst borderStyle = {\n\tname: 'style',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'style' ],\n\t\truleKey: string = 'borderStyle'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst width = {\n\tname: 'width',\n\tgenerate: (\n\t\tstyle: Style,\n\t\toptions: StyleOptions,\n\t\tpath: string[] = [ 'border', 'width' ],\n\t\truleKey: string = 'borderWidth'\n\t): GeneratedCSSRule[] => {\n\t\treturn generateRule( style, options, path, ruleKey );\n\t},\n};\n\nconst borderDefinitionsWithIndividualStyles: StyleDefinition[] = [\n\tcolor,\n\tborderStyle,\n\twidth,\n];\n\n/**\n * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.\n *\n * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').\n *\n * @return StyleDefinition[ 'generate' ]\n */\nconst createBorderGenerateFunction =\n\t( individualProperty: BorderIndividualProperty ) =>\n\t( style: Style, options: StyleOptions ) => {\n\t\tconst styleValue:\n\t\t\t| BorderIndividualStyles< typeof individualProperty >\n\t\t\t| undefined = style?.border?.[ individualProperty ];\n\n\t\tif ( ! styleValue ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn borderDefinitionsWithIndividualStyles.reduce(\n\t\t\t(\n\t\t\t\tacc: GeneratedCSSRule[],\n\t\t\t\tborderDefinition: StyleDefinition\n\t\t\t): GeneratedCSSRule[] => {\n\t\t\t\tconst key = borderDefinition.name;\n\t\t\t\tif (\n\t\t\t\t\tstyleValue.hasOwnProperty( key ) &&\n\t\t\t\t\ttypeof borderDefinition.generate === 'function'\n\t\t\t\t) {\n\t\t\t\t\tconst ruleKey = `border${ upperFirst(\n\t\t\t\t\t\tindividualProperty\n\t\t\t\t\t) }${ upperFirst( key ) }`;\n\t\t\t\t\tacc.push(\n\t\t\t\t\t\t...borderDefinition.generate(\n\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\toptions,\n\t\t\t\t\t\t\t[ 'border', individualProperty, key ],\n\t\t\t\t\t\t\truleKey\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t};\n\nconst borderTop = {\n\tname: 'borderTop',\n\tgenerate: createBorderGenerateFunction( 'top' ),\n};\n\nconst borderRight = {\n\tname: 'borderRight',\n\tgenerate: createBorderGenerateFunction( 'right' ),\n};\n\nconst borderBottom = {\n\tname: 'borderBottom',\n\tgenerate: createBorderGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft = {\n\tname: 'borderLeft',\n\tgenerate: createBorderGenerateFunction( 'left' ),\n};\n\nexport default [\n\t...borderDefinitionsWithIndividualStyles,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/border/index.ts"],"names":["generateRule","generateBoxRules","camelCaseJoin","createBorderGenerateFunction","path","style","options","createBorderEdgeGenerateFunction","edge","flatMap","key","color","name","generate","radius","default","individual","borderStyle","width","borderTop","borderRight","borderBottom","borderLeft"],"mappings":"AAAA;AACA;AACA;AAEA,SAASA,YAAT,EAAuBC,gBAAvB,EAAyCC,aAAzC,QAA8D,UAA9D;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,4BAAT,CAAuCC,IAAvC,EAA0E;AACzE,SAAO,CAAEC,KAAF,EAASC,OAAT,KACNN,YAAY,CAAEK,KAAF,EAASC,OAAT,EAAkBF,IAAlB,EAAwBF,aAAa,CAAEE,IAAF,CAArC,CADb;AAEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASG,gCAAT,CAA2CC,IAA3C,EAA6E;AAC5E,SAAO,CAAEH,KAAF,EAASC,OAAT,KAAsB;AAC5B,WAAO,CAAE,OAAF,EAAW,OAAX,EAAoB,OAApB,EAA8BG,OAA9B,CAAyCC,GAAF,IAAW;AACxD,YAAMN,IAAI,GAAG,CAAE,QAAF,EAAYI,IAAZ,EAAkBE,GAAlB,CAAb;AACA,aAAOP,4BAA4B,CAAEC,IAAF,CAA5B,CAAsCC,KAAtC,EAA6CC,OAA7C,CAAP;AACA,KAHM,CAAP;AAIA,GALD;AAMA;;AAED,MAAMK,KAAsB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMW,MAAuB,GAAG;AAC/BF,EAAAA,IAAI,EAAE,QADyB;AAE/BC,EAAAA,QAAQ,EAAE,CAAER,KAAF,EAASC,OAAT,KAAsB;AAC/B,WAAOL,gBAAgB,CACtBI,KADsB,EAEtBC,OAFsB,EAGtB,CAAE,QAAF,EAAY,QAAZ,CAHsB,EAItB;AACCS,MAAAA,OAAO,EAAE,cADV;AAECC,MAAAA,UAAU,EAAE;AAFb,KAJsB,EAQtB,CAAE,SAAF,EAAa,UAAb,EAAyB,YAAzB,EAAuC,aAAvC,CARsB,CAAvB;AAUA;AAb8B,CAAhC;AAgBA,MAAMC,WAA4B,GAAG;AACpCL,EAAAA,IAAI,EAAE,OAD8B;AAEpCC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFF,CAArC;AAKA,MAAMe,KAAsB,GAAG;AAC9BN,EAAAA,IAAI,EAAE,OADwB;AAE9BC,EAAAA,QAAQ,EAAEV,4BAA4B,CAAE,CAAE,QAAF,EAAY,OAAZ,CAAF;AAFR,CAA/B;AAKA,MAAMgB,SAA0B,GAAG;AAClCP,EAAAA,IAAI,EAAE,WAD4B;AAElCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,KAAF;AAFR,CAAnC;AAKA,MAAMa,WAA4B,GAAG;AACpCR,EAAAA,IAAI,EAAE,aAD8B;AAEpCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,OAAF;AAFN,CAArC;AAKA,MAAMc,YAA6B,GAAG;AACrCT,EAAAA,IAAI,EAAE,cAD+B;AAErCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,QAAF;AAFL,CAAtC;AAKA,MAAMe,UAA2B,GAAG;AACnCV,EAAAA,IAAI,EAAE,YAD6B;AAEnCC,EAAAA,QAAQ,EAAEN,gCAAgC,CAAE,MAAF;AAFP,CAApC;AAKA,eAAe,CACdI,KADc,EAEdM,WAFc,EAGdC,KAHc,EAIdJ,MAJc,EAKdK,SALc,EAMdC,WANc,EAOdC,YAPc,EAQdC,UARc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';\nimport { generateRule, generateBoxRules, camelCaseJoin } from '../utils';\n\n/**\n * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.\n *\n * @param path An array of strings representing the path to the style value in the style object.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderGenerateFunction( path: string[] ): GenerateFunction {\n\treturn ( style, options ) =>\n\t\tgenerateRule( style, options, path, camelCaseJoin( path ) );\n}\n\n/**\n * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.\n *\n * @param edge The edge to create CSS rules for.\n *\n * @return A function that generates CSS rules.\n */\nfunction createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {\n\treturn ( style, options ) => {\n\t\treturn [ 'color', 'style', 'width' ].flatMap( ( key ) => {\n\t\t\tconst path = [ 'border', edge, key ];\n\t\t\treturn createBorderGenerateFunction( path )( style, options );\n\t\t} );\n\t};\n}\n\nconst color: StyleDefinition = {\n\tname: 'color',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'color' ] ),\n};\n\nconst radius: StyleDefinition = {\n\tname: 'radius',\n\tgenerate: ( style, options ) => {\n\t\treturn generateBoxRules(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'border', 'radius' ],\n\t\t\t{\n\t\t\t\tdefault: 'borderRadius',\n\t\t\t\tindividual: 'border%sRadius',\n\t\t\t},\n\t\t\t[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]\n\t\t);\n\t},\n};\n\nconst borderStyle: StyleDefinition = {\n\tname: 'style',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'style' ] ),\n};\n\nconst width: StyleDefinition = {\n\tname: 'width',\n\tgenerate: createBorderGenerateFunction( [ 'border', 'width' ] ),\n};\n\nconst borderTop: StyleDefinition = {\n\tname: 'borderTop',\n\tgenerate: createBorderEdgeGenerateFunction( 'top' ),\n};\n\nconst borderRight: StyleDefinition = {\n\tname: 'borderRight',\n\tgenerate: createBorderEdgeGenerateFunction( 'right' ),\n};\n\nconst borderBottom: StyleDefinition = {\n\tname: 'borderBottom',\n\tgenerate: createBorderEdgeGenerateFunction( 'bottom' ),\n};\n\nconst borderLeft: StyleDefinition = {\n\tname: 'borderLeft',\n\tgenerate: createBorderEdgeGenerateFunction( 'left' ),\n};\n\nexport default [\n\tcolor,\n\tborderStyle,\n\twidth,\n\tradius,\n\tborderTop,\n\tborderRight,\n\tborderBottom,\n\tborderLeft,\n];\n"]}

package/build-module/styles/utils.js

@@ -92,13 +92,25 @@ export function getCSSVarFromStyleValue(styleValue) {
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
  */
 
-export function upperFirst(_ref) {
-  let [firstLetter, ...rest] = _ref;
+export function upperFirst(string) {
+  const [firstLetter, ...rest] = string;
   return firstLetter.toUpperCase() + rest.join('');
 }
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
+ */
+
+export function camelCaseJoin(strings) {
+  const [firstItem, ...rest] = strings;
+  return firstItem.toLowerCase() + rest.map(upperFirst).join('');
+}
 //# sourceMappingURL=utils.js.map

package/build-module/styles/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","join","firstLetter","rest","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n) {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style                Style object.\n * @param  options              Options object with settings to adjust how the styles are generated.\n * @param  path                 An array of strings representing the path to the style value in the style object.\n * @param  ruleKeys             An array of CSS property keys and patterns.\n * @param  individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return string A CSS var value.\n */\nexport function upperFirst( [ firstLetter, ...rest ]: string ) {\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n"]}
+{"version":3,"sources":["@wordpress/style-engine/src/styles/utils.ts"],"names":["get","VARIABLE_REFERENCE_PREFIX","VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE","VARIABLE_PATH_SEPARATOR_TOKEN_STYLE","generateRule","style","options","path","ruleKey","styleValue","selector","key","value","getCSSVarFromStyleValue","generateBoxRules","ruleKeys","individualProperties","boxStyle","rules","push","default","sideRules","reduce","acc","side","individual","replace","upperFirst","startsWith","variable","slice","length","split","join","string","firstLetter","rest","toUpperCase","camelCaseJoin","strings","firstItem","toLowerCase","map"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tCssRulesKeys,\n\tGeneratedCSSRule,\n\tStyle,\n\tBox,\n\tStyleOptions,\n} from '../types';\nimport {\n\tVARIABLE_REFERENCE_PREFIX,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,\n\tVARIABLE_PATH_SEPARATOR_TOKEN_STYLE,\n} from './constants';\n\n/**\n * Returns a JSON representation of the generated CSS rules.\n *\n * @param  style   Style object.\n * @param  options Options object with settings to adjust how the styles are generated.\n * @param  path    An array of strings representing the path to the style value in the style object.\n * @param  ruleKey A CSS property key.\n *\n * @return GeneratedCSSRule[] CSS rules.\n */\nexport function generateRule(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKey: string\n): GeneratedCSSRule[] {\n\tconst styleValue: string | undefined = get( style, path );\n\n\treturn styleValue\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\tkey: ruleKey,\n\t\t\t\t\tvalue: getCSSVarFromStyleValue( styleValue ),\n\t\t\t\t},\n\t\t  ]\n\t\t: [];\n}\n\n/**\n * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.\n *\n * @param  style                Style object.\n * @param  options              Options object with settings to adjust how the styles are generated.\n * @param  path                 An array of strings representing the path to the style value in the style object.\n * @param  ruleKeys             An array of CSS property keys and patterns.\n * @param  individualProperties The \"sides\" or individual properties for which to generate rules.\n *\n * @return GeneratedCSSRule[]  CSS rules.\n */\nexport function generateBoxRules(\n\tstyle: Style,\n\toptions: StyleOptions,\n\tpath: string[],\n\truleKeys: CssRulesKeys,\n\tindividualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]\n): GeneratedCSSRule[] {\n\tconst boxStyle: Box | string | undefined = get( style, path );\n\tif ( ! boxStyle ) {\n\t\treturn [];\n\t}\n\n\tconst rules: GeneratedCSSRule[] = [];\n\tif ( typeof boxStyle === 'string' ) {\n\t\trules.push( {\n\t\t\tselector: options?.selector,\n\t\t\tkey: ruleKeys.default,\n\t\t\tvalue: boxStyle,\n\t\t} );\n\t} else {\n\t\tconst sideRules = individualProperties.reduce(\n\t\t\t( acc: GeneratedCSSRule[], side: string ) => {\n\t\t\t\tconst value: string | undefined = getCSSVarFromStyleValue(\n\t\t\t\t\tget( boxStyle, [ side ] )\n\t\t\t\t);\n\t\t\t\tif ( value ) {\n\t\t\t\t\tacc.push( {\n\t\t\t\t\t\tselector: options?.selector,\n\t\t\t\t\t\tkey: ruleKeys?.individual.replace(\n\t\t\t\t\t\t\t'%s',\n\t\t\t\t\t\t\tupperFirst( side )\n\t\t\t\t\t\t),\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t[]\n\t\t);\n\t\trules.push( ...sideRules );\n\t}\n\n\treturn rules;\n}\n\n/**\n * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.\n *\n * @param  styleValue A raw style value.\n *\n * @return string A CSS var value.\n */\nexport function getCSSVarFromStyleValue( styleValue: string ): string {\n\tif (\n\t\ttypeof styleValue === 'string' &&\n\t\tstyleValue.startsWith( VARIABLE_REFERENCE_PREFIX )\n\t) {\n\t\tconst variable = styleValue\n\t\t\t.slice( VARIABLE_REFERENCE_PREFIX.length )\n\t\t\t.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )\n\t\t\t.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );\n\t\treturn `var(--wp--${ variable })`;\n\t}\n\treturn styleValue;\n}\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param string The string whose first letter the function will capitalize.\n *\n * @return String with the first letter capitalized.\n */\nexport function upperFirst( string: string ): string {\n\tconst [ firstLetter, ...rest ] = string;\n\treturn firstLetter.toUpperCase() + rest.join( '' );\n}\n\n/**\n * Converts an array of strings into a camelCase string.\n *\n * @param strings The strings to join into a camelCase string.\n *\n * @return camelCase string.\n */\nexport function camelCaseJoin( strings: string[] ): string {\n\tconst [ firstItem, ...rest ] = strings;\n\treturn firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );\n}\n"]}

package/build-types/styles/border/index.d.ts

@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { GeneratedCSSRule, Style, StyleDefinition, StyleOptions } from '../../types';
-declare const _default: (StyleDefinition | {
-    name: string;
-    generate: (style: Style, options: StyleOptions) => GeneratedCSSRule[];
-})[];
+import type { StyleDefinition } from '../../types';
+declare const _default: StyleDefinition[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/border/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAGX,gBAAgB,EAChB,KAAK,EACL,eAAe,EACf,YAAY,EACZ,MAAM,aAAa,CAAC;;;;;AA+HrB,wBAOE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/border/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAA6B,eAAe,EAAE,MAAM,aAAa,CAAC;;AAkF9E,wBASE"}

package/build-types/styles/color/background.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const background: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 };
 export default background;
 //# sourceMappingURL=background.d.ts.map

package/build-types/styles/color/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/styles/color/background.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,UAAU;;sBAEI,KAAK,WAAW,YAAY;;;;;CAQ/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/styles/color/background.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,UAAU;;sBAEI,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build-types/styles/color/gradient.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const gradient: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 };
 export default gradient;
 //# sourceMappingURL=gradient.d.ts.map

package/build-types/styles/color/gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/styles/color/gradient.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,QAAQ;;sBAEM,KAAK,WAAW,YAAY;;;;;CAQ/C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/styles/color/gradient.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,QAAQ;;sBAEM,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build-types/styles/color/index.d.ts

@@ -1,10 +1,6 @@
 declare const _default: {
     name: string;
-    generate: (style: import("../../types").Style, options: import("../../types").StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: import("../../types").Style, options: import("../../types").StyleOptions) => import("../../types").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/color/index.ts"],"names":[],"mappings":";;;;;;;;AAOA,wBAA8C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/color/index.ts"],"names":[],"mappings":";;;;AAOA,wBAA8C"}

package/build-types/styles/color/text.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const text: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 };
 export default text;
 //# sourceMappingURL=text.d.ts.map

package/build-types/styles/color/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/styles/color/text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,IAAI;;sBAEU,KAAK,WAAW,YAAY;;;;;CAG/C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/styles/color/text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,IAAI;;sBAEU,KAAK,WAAW,YAAY;CAG/C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build-types/styles/shadow/index.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/shadow/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;;;;;AAUvD,wBAA0B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/shadow/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;AAUvD,wBAA0B"}

package/build-types/styles/typography/index.d.ts

@@ -4,11 +4,7 @@
 import type { Style, StyleOptions } from '../../types';
 declare const _default: {
     name: string;
-    generate: (style: Style, options: StyleOptions) => {
-        selector: string | undefined;
-        key: string;
-        value: string;
-    }[];
+    generate: (style: Style, options: StyleOptions) => import("../../types").GeneratedCSSRule[];
 }[];
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/typography/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;;;;;AAmGvD,wBASE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/typography/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;;;AAmGvD,wBASE"}

package/build-types/styles/utils.d.ts

@@ -12,11 +12,7 @@ import type { CssRulesKeys, GeneratedCSSRule, Style, StyleOptions } from '../typ
  *
  * @return GeneratedCSSRule[] CSS rules.
  */
-export declare function generateRule(style: Style, options: StyleOptions, path: string[], ruleKey: string): {
-    selector: string | undefined;
-    key: string;
-    value: string;
-}[];
+export declare function generateRule(style: Style, options: StyleOptions, path: string[], ruleKey: string): GeneratedCSSRule[];
 /**
  * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  *
@@ -40,9 +36,17 @@ export declare function getCSSVarFromStyleValue(styleValue: string): string;
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
+ */
+export declare function upperFirst(string: string): string;
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
  */
-export declare function upperFirst([firstLetter, ...rest]: string): string;
+export declare function camelCaseJoin(strings: string[]): string;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/styles/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAqCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,CAAE,WAAW,EAAE,GAAG,IAAI,CAAE,EAAE,MAAM,UAE3D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM,GACb,gBAAgB,EAAE,CAYpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAqCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,GAAI,MAAM,CAGnD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAE,OAAO,EAAE,MAAM,EAAE,GAAI,MAAM,CAGzD"}

package/build-types/types.d.ts

@@ -2,19 +2,19 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-declare type BoxVariants = 'margin' | 'padding' | undefined;
-export declare type Box<T extends BoxVariants = undefined> = {
+declare type BoxVariant = 'margin' | 'padding';
+export interface Box<T extends BoxVariant | undefined = undefined> {
     top?: CSSProperties[T extends undefined ? 'top' : `${T}Top`];
     right?: CSSProperties[T extends undefined ? 'right' : `${T}Right`];
     bottom?: CSSProperties[T extends undefined ? 'bottom' : `${T}Bottom`];
     left?: CSSProperties[T extends undefined ? 'left' : `${T}Left`];
-};
-export declare type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
-export declare type BorderIndividualStyles<T extends BorderIndividualProperty> = {
-    color?: CSSProperties[`border${Capitalize<string & T>}Color`];
-    style?: CSSProperties[`border${Capitalize<string & T>}Style`];
-    width?: CSSProperties[`border${Capitalize<string & T>}Width`];
-};
+}
+export declare type BoxEdge = 'top' | 'right' | 'bottom' | 'left';
+export interface BorderIndividualStyles<T extends BoxEdge> {
+    color?: CSSProperties[`border${Capitalize<T>}Color`];
+    style?: CSSProperties[`border${Capitalize<T>}Style`];
+    width?: CSSProperties[`border${Capitalize<T>}Width`];
+}
 export interface Style {
     border?: {
         color?: CSSProperties['borderColor'];
@@ -58,17 +58,17 @@ export interface Style {
         };
     };
 }
-export declare type CssRulesKeys = {
+export interface CssRulesKeys {
     default: string;
     individual: string;
-};
-export declare type StyleOptions = {
+}
+export interface StyleOptions {
     /**
      * CSS selector for the generated style.
      */
     selector?: string;
-};
-export declare type GeneratedCSSRule = {
+}
+export interface GeneratedCSSRule {
     selector?: string;
     value: string;
     /**
@@ -76,10 +76,13 @@ export declare type GeneratedCSSRule = {
      * E.g. `paddingTop` instead of `padding-top`.
      */
     key: string;
-};
+}
+export interface GenerateFunction {
+    (style: Style, options: StyleOptions): GeneratedCSSRule[];
+}
 export interface StyleDefinition {
     name: string;
-    generate?: (style: Style, options: StyleOptions | {}, path?: string[], ruleKey?: string) => GeneratedCSSRule[];
+    generate?: GenerateFunction;
 }
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,5 +35,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f6021282457317c7e12dcc3a3f02c9ac28e16a30"
+	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
 }

package/src/styles/border/index.ts

@@ -1,31 +1,45 @@
 /**
  * Internal dependencies
  */
-import type {
-	BorderIndividualStyles,
-	BorderIndividualProperty,
-	GeneratedCSSRule,
-	Style,
-	StyleDefinition,
-	StyleOptions,
-} from '../../types';
-import { generateRule, generateBoxRules, upperFirst } from '../utils';
+import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
+import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
 
-const color = {
+/**
+ * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
+ *
+ * @param path An array of strings representing the path to the style value in the style object.
+ *
+ * @return A function that generates CSS rules.
+ */
+function createBorderGenerateFunction( path: string[] ): GenerateFunction {
+	return ( style, options ) =>
+		generateRule( style, options, path, camelCaseJoin( path ) );
+}
+
+/**
+ * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
+ *
+ * @param edge The edge to create CSS rules for.
+ *
+ * @return A function that generates CSS rules.
+ */
+function createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {
+	return ( style, options ) => {
+		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
+			const path = [ 'border', edge, key ];
+			return createBorderGenerateFunction( path )( style, options );
+		} );
+	};
+}
+
+const color: StyleDefinition = {
 	name: 'color',
-	generate: (
-		style: Style,
-		options: StyleOptions,
-		path: string[] = [ 'border', 'color' ],
-		ruleKey: string = 'borderColor'
-	): GeneratedCSSRule[] => {
-		return generateRule( style, options, path, ruleKey );
-	},
+	generate: createBorderGenerateFunction( [ 'border', 'color' ] ),
 };
 
-const radius = {
+const radius: StyleDefinition = {
 	name: 'radius',
-	generate: ( style: Style, options: StyleOptions ): GeneratedCSSRule[] => {
+	generate: ( style, options ) => {
 		return generateBoxRules(
 			style,
 			options,
@@ -39,104 +53,40 @@ const radius = {
 	},
 };
 
-const borderStyle = {
+const borderStyle: StyleDefinition = {
 	name: 'style',
-	generate: (
-		style: Style,
-		options: StyleOptions,
-		path: string[] = [ 'border', 'style' ],
-		ruleKey: string = 'borderStyle'
-	): GeneratedCSSRule[] => {
-		return generateRule( style, options, path, ruleKey );
-	},
+	generate: createBorderGenerateFunction( [ 'border', 'style' ] ),
 };
 
-const width = {
+const width: StyleDefinition = {
 	name: 'width',
-	generate: (
-		style: Style,
-		options: StyleOptions,
-		path: string[] = [ 'border', 'width' ],
-		ruleKey: string = 'borderWidth'
-	): GeneratedCSSRule[] => {
-		return generateRule( style, options, path, ruleKey );
-	},
+	generate: createBorderGenerateFunction( [ 'border', 'width' ] ),
 };
 
-const borderDefinitionsWithIndividualStyles: StyleDefinition[] = [
-	color,
-	borderStyle,
-	width,
-];
-
-/**
- * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
- *
- * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
- *
- * @return StyleDefinition[ 'generate' ]
- */
-const createBorderGenerateFunction =
-	( individualProperty: BorderIndividualProperty ) =>
-	( style: Style, options: StyleOptions ) => {
-		const styleValue:
-			| BorderIndividualStyles< typeof individualProperty >
-			| undefined = style?.border?.[ individualProperty ];
-
-		if ( ! styleValue ) {
-			return [];
-		}
-
-		return borderDefinitionsWithIndividualStyles.reduce(
-			(
-				acc: GeneratedCSSRule[],
-				borderDefinition: StyleDefinition
-			): GeneratedCSSRule[] => {
-				const key = borderDefinition.name;
-				if (
-					styleValue.hasOwnProperty( key ) &&
-					typeof borderDefinition.generate === 'function'
-				) {
-					const ruleKey = `border${ upperFirst(
-						individualProperty
-					) }${ upperFirst( key ) }`;
-					acc.push(
-						...borderDefinition.generate(
-							style,
-							options,
-							[ 'border', individualProperty, key ],
-							ruleKey
-						)
-					);
-				}
-				return acc;
-			},
-			[]
-		);
-	};
-
-const borderTop = {
+const borderTop: StyleDefinition = {
 	name: 'borderTop',
-	generate: createBorderGenerateFunction( 'top' ),
+	generate: createBorderEdgeGenerateFunction( 'top' ),
 };
 
-const borderRight = {
+const borderRight: StyleDefinition = {
 	name: 'borderRight',
-	generate: createBorderGenerateFunction( 'right' ),
+	generate: createBorderEdgeGenerateFunction( 'right' ),
 };
 
-const borderBottom = {
+const borderBottom: StyleDefinition = {
 	name: 'borderBottom',
-	generate: createBorderGenerateFunction( 'bottom' ),
+	generate: createBorderEdgeGenerateFunction( 'bottom' ),
 };
 
-const borderLeft = {
+const borderLeft: StyleDefinition = {
 	name: 'borderLeft',
-	generate: createBorderGenerateFunction( 'left' ),
+	generate: createBorderEdgeGenerateFunction( 'left' ),
 };
 
 export default [
-	...borderDefinitionsWithIndividualStyles,
+	color,
+	borderStyle,
+	width,
 	radius,
 	borderTop,
 	borderRight,

package/src/styles/utils.ts

@@ -34,7 +34,7 @@ export function generateRule(
 	options: StyleOptions,
 	path: string[],
 	ruleKey: string
-) {
+): GeneratedCSSRule[] {
 	const styleValue: string | undefined = get( style, path );
 
 	return styleValue
@@ -128,10 +128,23 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
  */
-export function upperFirst( [ firstLetter, ...rest ]: string ) {
+export function upperFirst( string: string ): string {
+	const [ firstLetter, ...rest ] = string;
 	return firstLetter.toUpperCase() + rest.join( '' );
 }
+
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
+ */
+export function camelCaseJoin( strings: string[] ): string {
+	const [ firstItem, ...rest ] = strings;
+	return firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );
+}

package/src/test/utils.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { upperFirst } from '../styles/utils';
+import { camelCaseJoin, upperFirst } from '../styles/utils';
 
 describe( 'utils', () => {
 	describe( 'upperFirst()', () => {
@@ -9,4 +9,9 @@ describe( 'utils', () => {
 			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
 		} );
 	} );
+	describe( 'camelCaseJoin()', () => {
+		it( 'should return a camelCase string', () => {
+			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
+		} );
+	} );
 } );

package/src/types.ts

@@ -3,21 +3,22 @@
  */
 import type { CSSProperties } from 'react';
 
-type BoxVariants = 'margin' | 'padding' | undefined;
-export type Box< T extends BoxVariants = undefined > = {
+type BoxVariant = 'margin' | 'padding';
+export interface Box< T extends BoxVariant | undefined = undefined > {
 	top?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];
 	right?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];
 	bottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];
 	left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
-};
+}
+
+export type BoxEdge = 'top' | 'right' | 'bottom' | 'left';
 
-export type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
 // `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.
-export type BorderIndividualStyles< T extends BorderIndividualProperty > = {
-	color?: CSSProperties[ `border${ Capitalize< string & T > }Color` ];
-	style?: CSSProperties[ `border${ Capitalize< string & T > }Style` ];
-	width?: CSSProperties[ `border${ Capitalize< string & T > }Width` ];
-};
+export interface BorderIndividualStyles< T extends BoxEdge > {
+	color?: CSSProperties[ `border${ Capitalize< T > }Color` ];
+	style?: CSSProperties[ `border${ Capitalize< T > }Style` ];
+	width?: CSSProperties[ `border${ Capitalize< T > }Width` ];
+}
 
 export interface Style {
 	border?: {
@@ -65,16 +66,19 @@ export interface Style {
 	};
 }
 
-export type CssRulesKeys = { default: string; individual: string };
+export interface CssRulesKeys {
+	default: string;
+	individual: string;
+}
 
-export type StyleOptions = {
+export interface StyleOptions {
 	/**
 	 * CSS selector for the generated style.
 	 */
 	selector?: string;
-};
+}
 
-export type GeneratedCSSRule = {
+export interface GeneratedCSSRule {
 	selector?: string;
 	value: string;
 	/**
@@ -82,14 +86,13 @@ export type GeneratedCSSRule = {
 	 * E.g. `paddingTop` instead of `padding-top`.
 	 */
 	key: string;
-};
+}
+
+export interface GenerateFunction {
+	( style: Style, options: StyleOptions ): GeneratedCSSRule[];
+}
 
 export interface StyleDefinition {
 	name: string;
-	generate?: (
-		style: Style,
-		options: StyleOptions | {},
-		path?: string[],
-		ruleKey?: string
-	) => GeneratedCSSRule[];
+	generate?: GenerateFunction;
 }

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/@types/lodash/common/common.d.ts","../../node_modules/@types/lodash/common/array.d.ts","../../node_modules/@types/lodash/common/collection.d.ts","../../node_modules/@types/lodash/common/date.d.ts","../../node_modules/@types/lodash/common/function.d.ts","../../node_modules/@types/lodash/common/lang.d.ts","../../node_modules/@types/lodash/common/math.d.ts","../../node_modules/@types/lodash/common/number.d.ts","../../node_modules/@types/lodash/common/object.d.ts","../../node_modules/@types/lodash/common/seq.d.ts","../../node_modules/@types/lodash/common/string.d.ts","../../node_modules/@types/lodash/common/util.d.ts","../../node_modules/@types/lodash/index.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/@types/react/node_modules/csstype/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","./src/types.ts","./src/styles/constants.ts","./src/styles/utils.ts","./src/styles/border/index.ts","./src/styles/color/background.ts","./src/styles/color/gradient.ts","./src/styles/color/text.ts","./src/styles/color/index.ts","./src/styles/shadow/index.ts","./src/styles/outline/index.ts","./src/styles/spacing/padding.ts","./src/styles/spacing/margin.ts","./src/styles/spacing/index.ts","./src/styles/typography/index.ts","./src/styles/index.ts","./src/index.ts"],"fileInfos":[{"version":"aa9fb4c70f369237c2f45f9d969c9a59e0eae9a192962eb48581fe864aa609db","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","eb75e89d63b3b72dd9ca8b0cac801cecae5be352307c004adeaa60bc9d6df51f","2cc028cd0bdb35b1b5eb723d84666a255933fffbea607f72cbd0c7c7b4bee144",{"version":"e54c8715a4954cfdc66cd69489f2b725c09ebf37492dbd91cff0a1688b1159e8","affectsGlobalScope":true},{"version":"51b8b27c21c066bf877646e320bf6a722b80d1ade65e686923cd9d4494aef1ca","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"2c8c5ee58f30e7c944e04ab1fb5506fdbb4dd507c9efa6972cf4b91cec90c503","affectsGlobalScope":true},{"version":"2bb4b3927299434052b37851a47bf5c39764f2ba88a888a107b32262e9292b7c","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"93544ca2f26a48716c1b6c5091842cad63129daac422dfa4bc52460465f22bb1","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"7435b75fdf3509622e79622dbe5091cf4b09688410ee2034e4fc17d0c99d0862","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"9f1817f7c3f02f6d56e0f403b927e90bb133f371dcebc36fa7d6d208ef6899da","affectsGlobalScope":true},{"version":"cd6efb9467a8b6338ece2e2855e37765700f2cd061ca54b01b33878cf5c7677e","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"4632665b87204bb1caa8b44d165bce0c50dfab177df5b561b345a567cabacf9a","affectsGlobalScope":true},"675e702f2032766a91eeadee64f51014c64688525da99dccd8178f0c599f13a8","438284c7c455a29b9c0e2d1e72abc62ee93d9a163029ffe918a34c5db3b92da2","0c75b204aed9cf6ff1c7b4bed87a3ece0d9d6fc857a6350c0c95ed0c38c814e8","187119ff4f9553676a884e296089e131e8cc01691c546273b1d0089c3533ce42","c24ad9be9adf28f0927e3d9d9e9cec1c677022356f241ccbbfb97bfe8fb3d1a1","0ec0998e2d085e8ea54266f547976ae152c9dd6cdb9ac4d8a520a230f5ebae84","9364c7566b0be2f7b70ff5285eb34686f83ccb01bda529b82d23b2a844653bfb","00baffbe8a2f2e4875367479489b5d43b5fc1429ecb4a4cc98cfc3009095f52a","82251920b05f30981c9a4109cb5f3169dce4b477effc845c6d781044a30e7672","3c92b6dfd43cc1c2485d9eba5ff0b74a19bb8725b692773ef1d66dac48cda4bd","3e59f00ab03c33717b3130066d4debb272da90eeded4935ff0604c2bc25a5cae","9fa6b83a35e897f340858995ca5d77e901d89fd18644cd4c9e8a4afe0b2e6363",{"version":"0714e2046df66c0e93c3330d30dbc0565b3e8cd3ee302cf99e4ede6220e5fec8","affectsGlobalScope":true},{"version":"ecf78e637f710f340ec08d5d92b3f31b134a46a4fcf2e758690d8c46ce62cba6","affectsGlobalScope":true},"381899b8d1d4c1be716f18cb5242ba39f66f4b1e31d45af62a32a99f8edcb39d","f7b46d22a307739c145e5fddf537818038fdfffd580d79ed717f4d4d37249380","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"1bc82f5b3bb93df76d19730c84467b0b346187198537135d63a672956f323720","affectsGlobalScope":true},{"version":"8e48d645663797109ba89566cae1d06a5c8a0d7e6fecc83589c243a4410adbf8","signature":"15360f5000b44dc09e6ca12d22f15da27734b418c65e0c0e5a8a49338b3567e2"},"301543eebfdd2fc5e5d6d928c5ed3f65bd377e95d184eb1351df5fe38ef9eac0","64db6f93189a8ece82eb8a2265338a3297c69e9ea34a692edd97f216aaaf2692","1fa9eb4c782532dc5d216edc97194d451e75bbdc6cf0b7ec2fad623e453bb6e3","49dec6685c69b84a795d1e2c2a8d7ac8953efb4a7dadb9b1b04c836053e0ea21","8cbcd8c85fe3627d4c9e75ccf2784b7e4d0082396600e9d432f1cd61009a7933","f303eb9a884f47802f08d6b1d376c737856c29783532a44116bfc7e4929a7204","e8dc9f16ad89ba54f1e7202369a69a265ccd5eec0df39cf429ff1a941603d4da",{"version":"51f25b3291c4ca38c72cb150453eb2961bb0ca2891102719064e2a695c47a55a","signature":"727d5d0184c8cc03c2e4c21449a854327b2af27133b51ae13602f67411c473a1"},{"version":"b9494715addecd488c8424333bdcb21390262ce9e7a5c244009e2ea21328181a","signature":"a69042401e8a750db9b3e8be7898ee61a6af5bacdc2abfa373b596923b68f170"},"caa45d96bc56c4f2ea6dfbe715413636f0d8b74121a8820b70526a3ae1bfd9b9","3d0705f37a3de49d9210d2656cd697ae0cd93476a7e60f7b099797166e4d78b0","b7003bd91d5a0b8bf84a3ef07a0cf5a4b8e0cef58d9e6404f54f05fd4ed6f0b2",{"version":"f663bea39fe633f8875848f18196303c24fe9d039549ae750c0d6e3bd9571032","signature":"727d5d0184c8cc03c2e4c21449a854327b2af27133b51ae13602f67411c473a1"},{"version":"1d74aab11e4f2e9bf4eff69b158bff07261a20cd45606cad289852365eb1c23a","signature":"ed379548d37856782da05eb4ead24db026f64d325c2cfbe256e667da7efe7c42"},{"version":"32464ebe97607450c6960c489338d41d381ebe1a465b6c5b59aad285bbd64e0b","signature":"21b7d9f370e2548a683c09e3409998b805231f030dd63ac652856f41c1f81ee4"}],"options":{"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"declarationDir":"./build-types","declarationMap":true,"emitDeclarationOnly":true,"esModuleInterop":false,"importsNotUsedAsValues":2,"jsx":1,"module":99,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noUnusedLocals":true,"noUnusedParameters":true,"rootDir":"./src","strict":true,"target":99},"fileIdsList":[[45,47,48,49,50,51,52,53,54,55,56,57],[45,46,48,49,50,51,52,53,54,55,56,57],[46,47,48,49,50,51,52,53,54,55,56,57],[45,46,47,49,50,51,52,53,54,55,56,57],[45,46,47,48,50,51,52,53,54,55,56,57],[45,46,47,48,49,51,52,53,54,55,56,57],[45,46,47,48,49,50,52,53,54,55,56,57],[45,46,47,48,49,50,51,53,54,55,56,57],[45,46,47,48,49,50,51,52,54,55,56,57],[45,46,47,48,49,50,51,52,53,55,56,57],[45,46,47,48,49,50,51,52,53,54,56,57],[45,46,47,48,49,50,51,52,53,54,55,57],[45,46,47,48,49,50,51,52,53,54,55,56],[58,59,60,61],[57,63,77],[63,65],[67,68,69],[66,70,71,72,75,76],[73,74],[57,63,64],[62],[63]],"referencedMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[78,15],[66,16],[67,16],[68,16],[70,17],[69,16],[77,18],[72,16],[71,16],[75,19],[74,16],[73,16],[76,16],[65,20],[63,21]],"exportedModulesMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[78,22],[66,16],[67,16],[68,16],[70,17],[69,16],[77,22],[72,22],[71,22],[75,19],[74,16],[73,16],[76,22],[65,20],[63,21]],"semanticDiagnosticsPerFile":[46,47,45,48,49,50,51,52,53,54,55,56,57,60,58,62,59,61,10,12,11,2,13,14,15,16,17,18,19,20,3,4,24,21,22,23,25,26,27,5,28,29,30,31,6,32,33,34,35,7,40,36,37,38,39,8,41,42,43,1,9,44,78,66,67,68,70,69,64,77,72,71,75,74,73,76,65,63]},"version":"4.4.2"}
+{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/@types/lodash/common/common.d.ts","../../node_modules/@types/lodash/common/array.d.ts","../../node_modules/@types/lodash/common/collection.d.ts","../../node_modules/@types/lodash/common/date.d.ts","../../node_modules/@types/lodash/common/function.d.ts","../../node_modules/@types/lodash/common/lang.d.ts","../../node_modules/@types/lodash/common/math.d.ts","../../node_modules/@types/lodash/common/number.d.ts","../../node_modules/@types/lodash/common/object.d.ts","../../node_modules/@types/lodash/common/seq.d.ts","../../node_modules/@types/lodash/common/string.d.ts","../../node_modules/@types/lodash/common/util.d.ts","../../node_modules/@types/lodash/index.d.ts","../../node_modules/@types/react/global.d.ts","../../node_modules/@types/react/node_modules/csstype/index.d.ts","../../node_modules/@types/prop-types/index.d.ts","../../node_modules/@types/scheduler/tracing.d.ts","../../node_modules/@types/react/index.d.ts","./src/types.ts","./src/styles/constants.ts","./src/styles/utils.ts","./src/styles/border/index.ts","./src/styles/color/background.ts","./src/styles/color/gradient.ts","./src/styles/color/text.ts","./src/styles/color/index.ts","./src/styles/shadow/index.ts","./src/styles/outline/index.ts","./src/styles/spacing/padding.ts","./src/styles/spacing/margin.ts","./src/styles/spacing/index.ts","./src/styles/typography/index.ts","./src/styles/index.ts","./src/index.ts"],"fileInfos":[{"version":"aa9fb4c70f369237c2f45f9d969c9a59e0eae9a192962eb48581fe864aa609db","affectsGlobalScope":true},"dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6","7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467","8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9","5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06","e6b724280c694a9f588847f754198fb96c43d805f065c3a5b28bbc9594541c84","e21c071ca3e1b4a815d5f04a7475adcaeea5d64367e840dd0154096d705c3940","eb75e89d63b3b72dd9ca8b0cac801cecae5be352307c004adeaa60bc9d6df51f","2cc028cd0bdb35b1b5eb723d84666a255933fffbea607f72cbd0c7c7b4bee144",{"version":"e54c8715a4954cfdc66cd69489f2b725c09ebf37492dbd91cff0a1688b1159e8","affectsGlobalScope":true},{"version":"51b8b27c21c066bf877646e320bf6a722b80d1ade65e686923cd9d4494aef1ca","affectsGlobalScope":true},{"version":"43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c","affectsGlobalScope":true},{"version":"cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a","affectsGlobalScope":true},{"version":"2c8c5ee58f30e7c944e04ab1fb5506fdbb4dd507c9efa6972cf4b91cec90c503","affectsGlobalScope":true},{"version":"2bb4b3927299434052b37851a47bf5c39764f2ba88a888a107b32262e9292b7c","affectsGlobalScope":true},{"version":"810627a82ac06fb5166da5ada4159c4ec11978dfbb0805fe804c86406dab8357","affectsGlobalScope":true},{"version":"62d80405c46c3f4c527ee657ae9d43fda65a0bf582292429aea1e69144a522a6","affectsGlobalScope":true},{"version":"3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93","affectsGlobalScope":true},{"version":"75ec0bdd727d887f1b79ed6619412ea72ba3c81d92d0787ccb64bab18d261f14","affectsGlobalScope":true},{"version":"3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006","affectsGlobalScope":true},{"version":"17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a","affectsGlobalScope":true},{"version":"7ce9f0bde3307ca1f944119f6365f2d776d281a393b576a18a2f2893a2d75c98","affectsGlobalScope":true},{"version":"6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577","affectsGlobalScope":true},{"version":"12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d","affectsGlobalScope":true},{"version":"b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e","affectsGlobalScope":true},{"version":"0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a","affectsGlobalScope":true},{"version":"da233fc1c8a377ba9e0bed690a73c290d843c2c3d23a7bd7ec5cd3d7d73ba1e0","affectsGlobalScope":true},{"version":"df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e","affectsGlobalScope":true},{"version":"bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c","affectsGlobalScope":true},{"version":"c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8","affectsGlobalScope":true},{"version":"9d57b2b5d15838ed094aa9ff1299eecef40b190722eb619bac4616657a05f951","affectsGlobalScope":true},{"version":"6c51b5dd26a2c31dbf37f00cfc32b2aa6a92e19c995aefb5b97a3a64f1ac99de","affectsGlobalScope":true},{"version":"93544ca2f26a48716c1b6c5091842cad63129daac422dfa4bc52460465f22bb1","affectsGlobalScope":true},{"version":"2ad234885a4240522efccd77de6c7d99eecf9b4de0914adb9a35c0c22433f993","affectsGlobalScope":true},{"version":"1b3fe904465430e030c93239a348f05e1be80640d91f2f004c3512c2c2c89f34","affectsGlobalScope":true},{"version":"7435b75fdf3509622e79622dbe5091cf4b09688410ee2034e4fc17d0c99d0862","affectsGlobalScope":true},{"version":"e7e8e1d368290e9295ef18ca23f405cf40d5456fa9f20db6373a61ca45f75f40","affectsGlobalScope":true},{"version":"faf0221ae0465363c842ce6aa8a0cbda5d9296940a8e26c86e04cc4081eea21e","affectsGlobalScope":true},{"version":"06393d13ea207a1bfe08ec8d7be562549c5e2da8983f2ee074e00002629d1871","affectsGlobalScope":true},{"version":"9f1817f7c3f02f6d56e0f403b927e90bb133f371dcebc36fa7d6d208ef6899da","affectsGlobalScope":true},{"version":"cd6efb9467a8b6338ece2e2855e37765700f2cd061ca54b01b33878cf5c7677e","affectsGlobalScope":true},{"version":"fb4416144c1bf0323ccbc9afb0ab289c07312214e8820ad17d709498c865a3fe","affectsGlobalScope":true},{"version":"5b0ca94ec819d68d33da516306c15297acec88efeb0ae9e2b39f71dbd9685ef7","affectsGlobalScope":true},{"version":"4632665b87204bb1caa8b44d165bce0c50dfab177df5b561b345a567cabacf9a","affectsGlobalScope":true},"675e702f2032766a91eeadee64f51014c64688525da99dccd8178f0c599f13a8","438284c7c455a29b9c0e2d1e72abc62ee93d9a163029ffe918a34c5db3b92da2","0c75b204aed9cf6ff1c7b4bed87a3ece0d9d6fc857a6350c0c95ed0c38c814e8","187119ff4f9553676a884e296089e131e8cc01691c546273b1d0089c3533ce42","c24ad9be9adf28f0927e3d9d9e9cec1c677022356f241ccbbfb97bfe8fb3d1a1","0ec0998e2d085e8ea54266f547976ae152c9dd6cdb9ac4d8a520a230f5ebae84","9364c7566b0be2f7b70ff5285eb34686f83ccb01bda529b82d23b2a844653bfb","00baffbe8a2f2e4875367479489b5d43b5fc1429ecb4a4cc98cfc3009095f52a","82251920b05f30981c9a4109cb5f3169dce4b477effc845c6d781044a30e7672","3c92b6dfd43cc1c2485d9eba5ff0b74a19bb8725b692773ef1d66dac48cda4bd","3e59f00ab03c33717b3130066d4debb272da90eeded4935ff0604c2bc25a5cae","9fa6b83a35e897f340858995ca5d77e901d89fd18644cd4c9e8a4afe0b2e6363",{"version":"0714e2046df66c0e93c3330d30dbc0565b3e8cd3ee302cf99e4ede6220e5fec8","affectsGlobalScope":true},{"version":"ecf78e637f710f340ec08d5d92b3f31b134a46a4fcf2e758690d8c46ce62cba6","affectsGlobalScope":true},"381899b8d1d4c1be716f18cb5242ba39f66f4b1e31d45af62a32a99f8edcb39d","f7b46d22a307739c145e5fddf537818038fdfffd580d79ed717f4d4d37249380","f5a8b384f182b3851cec3596ccc96cb7464f8d3469f48c74bf2befb782a19de5",{"version":"1bc82f5b3bb93df76d19730c84467b0b346187198537135d63a672956f323720","affectsGlobalScope":true},"055acd3f486e8f2a4cb9d6a252b254ec0988065b222425e90258bdd3b80c2248","301543eebfdd2fc5e5d6d928c5ed3f65bd377e95d184eb1351df5fe38ef9eac0","01b162605d4d103e9a902768b8db3b7c64c3d50afef3056905c4f66c50e8685a","6a47ab963c0de27ca91c40b8a8370d4c368f51bbcfeb70ca028fa3679afa56f9","49dec6685c69b84a795d1e2c2a8d7ac8953efb4a7dadb9b1b04c836053e0ea21","8cbcd8c85fe3627d4c9e75ccf2784b7e4d0082396600e9d432f1cd61009a7933","f303eb9a884f47802f08d6b1d376c737856c29783532a44116bfc7e4929a7204","e8dc9f16ad89ba54f1e7202369a69a265ccd5eec0df39cf429ff1a941603d4da","51f25b3291c4ca38c72cb150453eb2961bb0ca2891102719064e2a695c47a55a","b9494715addecd488c8424333bdcb21390262ce9e7a5c244009e2ea21328181a","caa45d96bc56c4f2ea6dfbe715413636f0d8b74121a8820b70526a3ae1bfd9b9","3d0705f37a3de49d9210d2656cd697ae0cd93476a7e60f7b099797166e4d78b0","b7003bd91d5a0b8bf84a3ef07a0cf5a4b8e0cef58d9e6404f54f05fd4ed6f0b2","f663bea39fe633f8875848f18196303c24fe9d039549ae750c0d6e3bd9571032","1d74aab11e4f2e9bf4eff69b158bff07261a20cd45606cad289852365eb1c23a","32464ebe97607450c6960c489338d41d381ebe1a465b6c5b59aad285bbd64e0b"],"options":{"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"declarationDir":"./build-types","declarationMap":true,"emitDeclarationOnly":true,"esModuleInterop":false,"importsNotUsedAsValues":2,"jsx":1,"module":99,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noUnusedLocals":true,"noUnusedParameters":true,"rootDir":"./src","strict":true,"target":99},"fileIdsList":[[45,47,48,49,50,51,52,53,54,55,56,57],[45,46,48,49,50,51,52,53,54,55,56,57],[46,47,48,49,50,51,52,53,54,55,56,57],[45,46,47,49,50,51,52,53,54,55,56,57],[45,46,47,48,50,51,52,53,54,55,56,57],[45,46,47,48,49,51,52,53,54,55,56,57],[45,46,47,48,49,50,52,53,54,55,56,57],[45,46,47,48,49,50,51,53,54,55,56,57],[45,46,47,48,49,50,51,52,54,55,56,57],[45,46,47,48,49,50,51,52,53,55,56,57],[45,46,47,48,49,50,51,52,53,54,56,57],[45,46,47,48,49,50,51,52,53,54,55,57],[45,46,47,48,49,50,51,52,53,54,55,56],[58,59,60,61],[57,63,77],[63,65],[67,68,69],[66,70,71,72,75,76],[73,74],[57,63,64],[62]],"referencedMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[78,15],[66,16],[67,16],[68,16],[70,17],[69,16],[77,18],[72,16],[71,16],[75,19],[74,16],[73,16],[76,16],[65,20],[63,21]],"exportedModulesMap":[[46,1],[47,2],[45,3],[48,4],[49,5],[50,6],[51,7],[52,8],[53,9],[54,10],[55,11],[56,12],[57,13],[62,14],[78,15],[66,16],[67,16],[68,16],[70,17],[69,16],[77,18],[72,16],[71,16],[75,19],[74,16],[73,16],[76,16],[65,20],[63,21]],"semanticDiagnosticsPerFile":[46,47,45,48,49,50,51,52,53,54,55,56,57,60,58,62,59,61,10,12,11,2,13,14,15,16,17,18,19,20,3,4,24,21,22,23,25,26,27,5,28,29,30,31,6,32,33,34,35,7,40,36,37,38,39,8,41,42,43,1,9,44,78,66,67,68,70,69,64,77,72,71,75,74,73,76,65,63]},"version":"4.4.2"}