@fluentui-react-native/use-styling 0.13.3 → 0.13.5

package/CHANGELOG.json

@@ -2,7 +2,48 @@
   "name": "@fluentui-react-native/use-styling",
   "entries": [
     {
-      "date": "Thu, 12 Jun 2025 03:17:16 GMT",
+      "date": "Fri, 11 Jul 2025 19:50:39 GMT",
+      "version": "0.13.5",
+      "tag": "@fluentui-react-native/use-styling_v0.13.5",
+      "comments": {
+        "none": [
+          {
+            "author": "jasonmo@microsoft.com",
+            "package": "@fluentui-react-native/use-styling",
+            "commit": "54087dca787180bbf34630470cd0d06e88366b30",
+            "comment": "update eslint to 9.x and use new flat config format with security rules"
+          },
+          {
+            "author": "sanajmi@microsoft.com",
+            "package": "@fluentui-react-native/use-styling",
+            "commit": "405ca368dc3f2963bfc252a1952b1e14ff503499",
+            "comment": "fix: run `beachball sync` to sync package versions with NPM"
+          },
+          {
+            "author": "ruaraki@microsoft.com",
+            "package": "@fluentui-react-native/use-styling",
+            "commit": "a245202877ef7f2be9ab5f0e1356b2270957e693",
+            "comment": "Run bump-versions"
+          },
+          {
+            "author": "4123478+tido64@users.noreply.github.com",
+            "package": "@fluentui-react-native/use-styling",
+            "commit": "79bb06f6bbfd0a36f9d2ef371f4857be9660f027",
+            "comment": "Fixed `align-deps` warnings"
+          }
+        ],
+        "patch": [
+          {
+            "author": "jasonmo@microsoft.com",
+            "package": "@fluentui-react-native/use-styling",
+            "commit": "479b93cea460a26df70c55b5d3335927ed374713",
+            "comment": "update builds to use node16 settings and modern export maps"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 10 Jul 2025 19:20:13 GMT",
       "version": "0.13.3",
       "tag": "@fluentui-react-native/use-styling_v0.13.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @fluentui-react-native/use-styling
 
-<!-- This log was last generated on Thu, 12 Jun 2025 03:17:16 GMT and should not be manually modified. -->
+<!-- This log was last generated on Fri, 11 Jul 2025 19:50:39 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.13.5
+
+Fri, 11 Jul 2025 19:50:39 GMT
+
+### Patches
+
+- update builds to use node16 settings and modern export maps (jasonmo@microsoft.com)
+
 ## 0.13.3
 
-Thu, 12 Jun 2025 03:17:16 GMT
+Thu, 10 Jul 2025 19:20:13 GMT
 
 ### Patches
 

package/eslint.config.js

@@ -0,0 +1,3 @@
+const baseConfig = require('@fluentui-react-native/eslint-config-rules');
+
+module.exports = baseConfig;

package/lib/buildProps.js

@@ -1,11 +1,9 @@
 function cacheStyleClosure(fn, keys) {
-    return function (tokens, theme, cache) {
-        return cache(function () { return fn(tokens, theme); }, (keys || []).map(function (key) { return tokens[key]; }))[0];
-    };
+    return (tokens, theme, cache) => cache(() => fn(tokens, theme), (keys || []).map((key) => tokens[key]))[0];
 }
 function refineKeys(keys, mask) {
     return typeof mask === 'object' && Array.isArray(mask)
-        ? keys.filter(function (key) { return mask.findIndex(function (val) { return val === key; }) !== -1; })
+        ? keys.filter((key) => mask.findIndex((val) => val === key) !== -1)
         : mask
             ? keys
             : [];
@@ -18,11 +16,11 @@ function refineKeys(keys, mask) {
  */
 export function buildProps(fn, keys) {
     // wrap the provided function in the standard caching layer, basing it upon the provided keys
-    var result = cacheStyleClosure(fn, keys);
+    const result = cacheStyleClosure(fn, keys);
     // if results are being cached on keys, provide the ability to refine the function if a prop mask is specified
     result.refine =
         keys && keys.length > 0
-            ? function (mask) {
+            ? (mask) => {
                 return cacheStyleClosure(fn, refineKeys(keys, mask));
             }
             : undefined;
@@ -36,9 +34,9 @@ export function buildProps(fn, keys) {
  * @param mask - prop mask to use for refinement
  */
 export function refinePropsFunctions(styles, mask) {
-    var result = {};
-    Object.keys(styles).forEach(function (key) {
-        var refine = typeof styles[key] === 'function' && styles[key].refine;
+    const result = {};
+    Object.keys(styles).forEach((key) => {
+        const refine = typeof styles[key] === 'function' && styles[key].refine;
         result[key] = refine ? refine(mask) : styles[key];
     });
     return result;

package/lib/buildProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB;IAExB,OAAO,UAAC,MAAe,EAAE,KAAa,EAAE,KAA2B;QACjE,OAAA,KAAK,CACH,cAAM,OAAA,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EAAjB,CAAiB,EACvB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,MAAM,CAAC,GAAG,CAAC,EAAX,CAAW,CAAC,CACvC,CAAC,CAAC,CAAC;IAHJ,CAGI,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC;IAC1F,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACpD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,IAAI,CAAC,SAAS,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,KAAK,GAAG,EAAX,CAAW,CAAC,KAAK,CAAC,CAAC,EAA3C,CAA2C,CAAC;QACnE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,EAA8C,EAC9C,IAAwB;IAExB,6FAA6F;IAC7F,IAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAE3C,8GAA8G;IAC9G,MAAM,CAAC,MAAM;QACX,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,UAAC,IAAsC;gBACrC,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAmD,EACnD,IAAqC;IAErC,IAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;QAC9B,IAAM,MAAM,GACV,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,UAAU,IAAK,MAAM,CAAC,GAAG,CAA4E,CAAC,MAAM,CAAC;QACtI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC"}
+{"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB;IAExB,OAAO,CAAC,MAAe,EAAE,KAAa,EAAE,KAA2B,EAAE,EAAE,CACrE,KAAK,CACH,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EACvB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CACvC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC;IAC1F,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACpD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,EAA8C,EAC9C,IAAwB;IAExB,6FAA6F;IAC7F,MAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAE3C,8GAA8G;IAC9G,MAAM,CAAC,MAAM;QACX,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,CAAC,IAAsC,EAAE,EAAE;gBACzC,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAmD,EACnD,IAAqC;IAErC,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAClC,MAAM,MAAM,GACV,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,UAAU,IAAK,MAAM,CAAC,GAAG,CAA4E,CAAC,MAAM,CAAC;QACtI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/lib/buildProps.test.js

@@ -1,32 +1,35 @@
-import { __assign } from "tslib";
 import { getMemoCache } from '@fluentui-react-native/memo-cache';
 import { buildProps } from './buildProps';
-var theme = { foo: 'foo', bar: 'bar' };
-var instanceCount = 0;
+const theme = { foo: 'foo', bar: 'bar' };
+let instanceCount = 0;
 function munge(tokens, theme) {
-    return __assign(__assign(__assign({}, theme), tokens), { instance: instanceCount++ });
+    return {
+        ...theme,
+        ...tokens,
+        instance: instanceCount++,
+    };
 }
-describe('props function tests', function () {
-    test('basic build props function caches as expected', function () {
-        var cache = getMemoCache();
-        var styleFn = buildProps(munge, ['a', 'b']);
-        var p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
+describe('props function tests', () => {
+    test('basic build props function caches as expected', () => {
+        const cache = getMemoCache();
+        const styleFn = buildProps(munge, ['a', 'b']);
+        const p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
         expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, cache)).toBe(p1);
-        var p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
+        const p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
         expect(p2).not.toBe(p1);
         expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, cache)).toBe(p2);
     });
-    test('build props function refinement works with explicit keys', function () {
-        var cache = getMemoCache();
-        var styleFn = buildProps(munge, ['a', 'b', 'c', 'd']);
-        var refinedFn = styleFn.refine(['a', 'b']);
-        var t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
-        var t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
-        var p1 = styleFn(t1, theme, cache);
-        var p2 = styleFn(t2, theme, cache);
+    test('build props function refinement works with explicit keys', () => {
+        const cache = getMemoCache();
+        const styleFn = buildProps(munge, ['a', 'b', 'c', 'd']);
+        const refinedFn = styleFn.refine(['a', 'b']);
+        const t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
+        const t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
+        const p1 = styleFn(t1, theme, cache);
+        const p2 = styleFn(t2, theme, cache);
         expect(p2).not.toBe(p1);
-        var rp1 = refinedFn(t1, theme, cache);
-        var rp2 = refinedFn(t2, theme, cache);
+        const rp1 = refinedFn(t1, theme, cache);
+        const rp2 = refinedFn(t2, theme, cache);
         expect(rp2).toBe(rp1);
     });
 });

package/lib/buildProps.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,IAAM,KAAK,GAAW,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AAEjD,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB,SAAS,KAAK,CAAC,MAAe,EAAE,KAAa;IAC3C,sCACK,KAAK,GACL,MAAM,KACT,QAAQ,EAAE,aAAa,EAAE,IACzB;AACJ,CAAC;AAED,QAAQ,CAAC,sBAAsB,EAAE;IAC/B,IAAI,CAAC,+CAA+C,EAAE;QACpD,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC9C,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7D,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrE,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE;QAC/D,IAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,IAAM,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACxD,IAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7C,IAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;QAC9C,IAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAElD,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExB,IAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,IAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,MAAM,KAAK,GAAW,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AAEjD,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB,SAAS,KAAK,CAAC,MAAe,EAAE,KAAa;IAC3C,OAAO;QACL,GAAG,KAAK;QACR,GAAG,MAAM;QACT,QAAQ,EAAE,aAAa,EAAE;KAC1B,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,IAAI,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACzD,MAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7D,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE,GAAG,EAAE;QACpE,MAAM,KAAK,GAAG,YAAY,EAAE,CAAC;QAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACxD,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;QAC9C,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAElD,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/buildUseStyling.js

@@ -1,4 +1,3 @@
-import { __assign, __spreadArray } from "tslib";
 import { applyPropsToTokens, applyTokenLayers, buildUseTokens } from '@fluentui-react-native/use-tokens';
 import { refinePropsFunctions } from './buildProps';
 /**
@@ -10,9 +9,9 @@ import { refinePropsFunctions } from './buildProps';
  * @param cache - cache to use for the base of slot caching
  */
 function resolveToSlotProps(styles, tokens, theme, cache) {
-    var slotProps = {};
-    Object.keys(styles).forEach(function (key) {
-        var style = styles[key];
+    const slotProps = {};
+    Object.keys(styles).forEach((key) => {
+        const style = styles[key];
         slotProps[key] = typeof style === 'function' ? style(tokens, theme, cache(null, [key])[1]) : style;
     });
     return slotProps;
@@ -25,26 +24,25 @@ function resolveToSlotProps(styles, tokens, theme, cache) {
  */
 export function buildUseStyling(options, themeHelper) {
     // create a cache instance for this use styling implementation
-    var useTheme = themeHelper.useTheme, getComponentInfo = themeHelper.getComponentInfo;
-    var tokens = options.tokens, tokenProps = options.tokensThatAreAlsoProps;
-    var styles = refinePropsFunctions(options.slotProps || {}, tokenProps);
-    var useTokens = buildUseTokens.apply(void 0, __spreadArray([getComponentInfo], tokens, false));
-    return function (props, lookup) {
-        var _a, _b;
+    const { useTheme, getComponentInfo } = themeHelper;
+    const { tokens, tokensThatAreAlsoProps: tokenProps } = options;
+    const styles = refinePropsFunctions(options.slotProps || {}, tokenProps);
+    const useTokens = buildUseTokens(getComponentInfo, ...tokens);
+    return (props, lookup) => {
         // query the theme
-        var theme = useTheme();
+        const theme = useTheme();
         // get the merged tokens from the theme
-        var _c = useTokens(theme), mergedTokens = _c[0], cache = _c[1];
+        let [mergedTokens, cache] = useTokens(theme);
         // resolve overrides as appropriate
         if (options.states) {
-            _a = applyTokenLayers(mergedTokens, options.states, cache, lookup || (function (val) { return props[val]; })), mergedTokens = _a[0], cache = _a[1];
+            [mergedTokens, cache] = applyTokenLayers(mergedTokens, options.states, cache, lookup || ((val) => props[val]));
         }
         // now resolve tokens
         if (typeof tokenProps === 'object' && Array.isArray(tokenProps)) {
-            _b = applyPropsToTokens(props, mergedTokens, cache, tokenProps), mergedTokens = _b[0], cache = _b[1];
+            [mergedTokens, cache] = applyPropsToTokens(props, mergedTokens, cache, tokenProps);
         }
         else if (tokenProps === 'all') {
-            mergedTokens = __assign(__assign({}, mergedTokens), props);
+            mergedTokens = { ...mergedTokens, ...props };
         }
         // finally produce slotProps from calling the style functions on each entry
         return resolveToSlotProps(styles, mergedTokens, theme, cache);

package/lib/buildUseStyling.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGzG,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAiDpD;;;;;;;GAOG;AACH,SAAS,kBAAkB,CACzB,MAAmD,EACnD,MAAe,EACf,KAAa,EACb,KAA4B;IAE5B,IAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;QAC9B,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrG,CAAC,CAAC,CAAC;IACH,OAAO,SAAuB,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAA+D,EAC/D,WAAgC;IAEhC,8DAA8D;IACtD,IAAA,QAAQ,GAAuB,WAAW,SAAlC,EAAE,gBAAgB,GAAK,WAAW,iBAAhB,CAAiB;IAC3C,IAAA,MAAM,GAAyC,OAAO,OAAhD,EAA0B,UAAU,GAAK,OAAO,uBAAZ,CAAa;IAC/D,IAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;IACzE,IAAM,SAAS,GAAG,cAAc,8BAAkB,gBAAgB,GAAK,MAAM,SAAC,CAAC;IAE/E,OAAO,UAAC,KAAa,EAAE,MAAiB;;QACtC,kBAAkB;QAClB,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,uCAAuC;QACnC,IAAA,KAAwB,SAAS,CAAC,KAAK,CAAC,EAAvC,YAAY,QAAA,EAAE,KAAK,QAAoB,CAAC;QAE7C,mCAAmC;QACnC,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,KAAwB,gBAAgB,CAAC,YAAY,EAAE,OAAO,CAAC,MAAkB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,KAAK,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,EAAzH,YAAY,QAAA,EAAE,KAAK,QAAA,CAAuG;SAC5H;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/D,KAAwB,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,EAAjF,YAAY,QAAA,EAAE,KAAK,QAAA,CAA+D;SACpF;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE;YAC/B,YAAY,yBAAQ,YAAY,GAAK,KAAK,CAAE,CAAC;SAC9C;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGzG,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAiDpD;;;;;;;GAOG;AACH,SAAS,kBAAkB,CACzB,MAAmD,EACnD,MAAe,EACf,KAAa,EACb,KAA4B;IAE5B,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrG,CAAC,CAAC,CAAC;IACH,OAAO,SAAuB,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAA+D,EAC/D,WAAgC;IAEhC,8DAA8D;IAC9D,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,WAAW,CAAC;IACnD,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAC/D,MAAM,MAAM,GAAG,oBAAoB,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,cAAc,CAAkB,gBAAgB,EAAE,GAAG,MAAM,CAAC,CAAC;IAE/E,OAAO,CAAC,KAAa,EAAE,MAAiB,EAAE,EAAE;QAC1C,kBAAkB;QAClB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,uCAAuC;QACvC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAE7C,mCAAmC;QACnC,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,OAAO,CAAC,MAAkB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC5H;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/D,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,kBAAkB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;SACpF;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE;YAC/B,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;SAC9C;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;AACJ,CAAC"}

package/lib/buildUseStyling.test.js

@@ -1,9 +1,8 @@
-import { __assign } from "tslib";
 import { getMemoCache } from '@fluentui-react-native/memo-cache';
 import { buildProps } from './buildProps';
 import { buildUseStyling } from './buildUseStyling';
-var lastInstance = 0;
-var baseTokens = {
+let lastInstance = 0;
+const baseTokens = {
     a: 'a-base',
     b: 'b-base',
     c: 'c-base',
@@ -14,7 +13,7 @@ var baseTokens = {
         c: 'c-base-press',
     },
 };
-var defaultTheme = {
+const defaultTheme = {
     vals: {
         foo: 'foo',
         bar: 'bar',
@@ -30,32 +29,38 @@ var defaultTheme = {
         },
     },
 };
-var themeHelper = {
-    useTheme: function () { return defaultTheme; },
-    getComponentInfo: function (theme, name) { return theme.components[name]; },
+const themeHelper = {
+    useTheme: () => defaultTheme,
+    getComponentInfo: (theme, name) => theme.components[name],
 };
-var slotFn1 = function (tokens, theme) {
+const slotFn1 = (tokens, theme) => {
     return {
-        style: __assign(__assign({ a: tokens.a, b: tokens.b, c: tokens.c }, theme.vals), { instance: lastInstance++ }),
+        style: {
+            a: tokens.a,
+            b: tokens.b,
+            c: tokens.c,
+            ...theme.vals,
+            instance: lastInstance++,
+        },
     };
 };
-var extraCache = getMemoCache();
-var slotFn2 = function (tokens) {
-    return extraCache(function () { return ({
+const extraCache = getMemoCache();
+const slotFn2 = (tokens) => {
+    return extraCache(() => ({
         style: {
             a: tokens.a,
             b: tokens.b,
             instance: lastInstance++,
         },
-    }); }, [tokens.a, tokens.b])[0];
+    }), [tokens.a, tokens.b])[0];
 };
-var baseOptions = {
+const baseOptions = {
     tokens: [
         baseTokens,
         'uno',
-        function (theme) { return ({
+        (theme) => ({
             b: theme.vals.foo,
-        }); },
+        }),
     ],
     states: ['hover', 'press'],
     slotProps: {
@@ -69,12 +74,12 @@ var baseOptions = {
     },
     tokensThatAreAlsoProps: ['b'],
 };
-describe('useStyling test suite', function () {
-    test('basic built hook', function () {
-        var useStyling = buildUseStyling(baseOptions, themeHelper);
-        var slotProps = useStyling({});
-        var slotProps2 = useStyling({ p1: 2, p2: 'bar' });
-        Object.keys(slotProps).forEach(function (key) {
+describe('useStyling test suite', () => {
+    test('basic built hook', () => {
+        const useStyling = buildUseStyling(baseOptions, themeHelper);
+        const slotProps = useStyling({});
+        const slotProps2 = useStyling({ p1: 2, p2: 'bar' });
+        Object.keys(slotProps).forEach((key) => {
             expect(slotProps[key]).toBe(slotProps2[key]);
         });
     });

package/lib/buildUseStyling.test.js.map

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

package/lib/useStyling.samples.test.js

@@ -1,4 +1,3 @@
-import { __assign, __spreadArray } from "tslib";
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import * as renderer from 'react-test-renderer';
@@ -7,7 +6,7 @@ import { buildUseStyling } from './buildUseStyling';
 /**
  * The default/base theme just contains base values
  */
-var baseTheme = {
+const baseTheme = {
     globals: {
         backgroundColor: 'white',
         color: 'black',
@@ -17,20 +16,20 @@ var baseTheme = {
     },
     components: {},
 };
-var current = { theme: baseTheme };
+const current = { theme: baseTheme };
 /**
  * Because the buildUseStyling utility is not opinionated about theming, the theming is injected via
  * a theme helper implementation. This allows for a framework to build an opinionated version with
  * whatever system they desire
  */
-var themeHelper = {
-    useTheme: function () { return current.theme; },
-    getComponentInfo: function (theme, name) { return theme.components[name]; },
-    setActive: function (theme) {
-        current.theme = theme ? __assign(__assign({}, baseTheme), theme) : baseTheme;
+const themeHelper = {
+    useTheme: () => current.theme,
+    getComponentInfo: (theme, name) => theme.components[name],
+    setActive: (theme) => {
+        current.theme = theme ? { ...baseTheme, ...theme } : baseTheme;
     },
 };
-describe('useStyling samples', function () {
+describe('useStyling samples', () => {
     /**
      * Sample #1 - Themeable text element
      *
@@ -38,17 +37,17 @@ describe('useStyling samples', function () {
      * via theming
      */
     // now create the styling hook, first the options so they can be reused later
-    var sample1StylingOptions = {
+    const sample1StylingOptions = {
         /**
          * tell the styling hook how to build up the tokens
          */
         tokens: [
             /** first the default values should come from the global theme section */
-            function (t) { return ({
+            (t) => ({
                 color: t.globals.color,
                 fontFamily: t.globals.fontFamily,
                 fontSize: t.globals.fontSize,
-            }); },
+            }),
             /** next we should look for a component reference to overlay */
             'Sample1',
         ],
@@ -61,9 +60,9 @@ describe('useStyling samples', function () {
             /**
              * first input for buildProps is a function which takes tokens and a theme and returns props
              */
-            function (tokens /*, theme: Theme */) {
+            (tokens /*, theme: Theme */) => {
                 return {
-                    style: __assign({}, tokens),
+                    style: { ...tokens },
                 };
             }, 
             /**
@@ -74,20 +73,20 @@ describe('useStyling samples', function () {
         },
     };
     // now build the actual hook from the options and theme helper
-    var useStylingSample1 = buildUseStyling(sample1StylingOptions, themeHelper);
+    const useStylingSample1 = buildUseStyling(sample1StylingOptions, themeHelper);
     // now the sample 1 component becomes simple to build, just merge the styled props with the input props
-    var Sample1Text = function (props) {
-        var styledProps = useStylingSample1(props).content;
-        var merged = __assign(__assign({}, props), styledProps);
-        return React.createElement(Text, __assign({}, merged), props.children);
+    const Sample1Text = (props) => {
+        const styledProps = useStylingSample1(props).content;
+        const merged = { ...props, ...styledProps };
+        return React.createElement(Text, { ...merged }, props.children);
     };
     /** first render the component with no updates */
-    it('Sample1Text rendering with no overrides', function () {
-        var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1a")).toJSON();
+    it('Sample1Text rendering with no overrides', () => {
+        const tree = renderer.create(React.createElement(Sample1Text, null, "Sample1a")).toJSON();
         expect(tree).toMatchSnapshot();
     });
     /** now re-theme the component via the components in the theme */
-    it('Sample1Text rendering with some custom settings in the theme', function () {
+    it('Sample1Text rendering with some custom settings in the theme', () => {
         themeHelper.setActive({
             components: {
                 Sample1: {
@@ -96,14 +95,23 @@ describe('useStyling samples', function () {
                 },
             },
         });
-        var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1b")).toJSON();
+        const tree = renderer.create(React.createElement(Sample1Text, null, "Sample1b")).toJSON();
         expect(tree).toMatchSnapshot();
     });
     /**
      * Build the styling hook for sample2. Because this isn't being recombined this is being specified inline rather
      * than using a separate options object. Both are fine.
      */
-    var useStylingSample2 = buildUseStyling(__assign(__assign({}, sample1StylingOptions), { 
+    const useStylingSample2 = buildUseStyling({
+        /**
+         * This just starts with the baseline styling from sample1, in particular we are using the recipes of how to turn
+         * token values into the props for the internal sub-components. While this example is not super complex, for real-world
+         * components, re-using these can be extremely valuable.
+         *
+         * With that in mind, this copies over the recipes for how to turn tokens into props, the customizations that
+         * will be made are about how to ensure the tokens are set up correctly.
+         */
+        ...sample1StylingOptions,
         /**
          * In sample1 tokens are set to defaults from the global theme section, then patched with any values looked up with
          * the string 'Sample1'
@@ -115,7 +123,7 @@ describe('useStyling samples', function () {
          * If we didn't want to add the extra 'Sample2' lookup this line would be omitted. If we didn't want to look up 'Sample1' first
          * that could be filtered out of the array that is being copied
          */
-        tokens: __spreadArray(__spreadArray([], sample1StylingOptions.tokens, true), ['Sample2'], false), 
+        tokens: [...sample1StylingOptions.tokens, 'Sample2'],
         /**
          * This is the final bit of magic. The tokens will already have values set from the global theme, they will then be patched with
          * any customizations set into Sample1 and/or Sample2.
@@ -124,20 +132,21 @@ describe('useStyling samples', function () {
          * the component props we add a list of the props which need to be passed into tokens. If all props should be spread into the
          * tokens then this value can be set to 'all'. If none should be passed it can be omitted or set to 'none'
          */
-        tokensThatAreAlsoProps: ['color'] }), themeHelper);
+        tokensThatAreAlsoProps: ['color'],
+    }, themeHelper);
     // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
-    var Sample2Text = function (props) {
-        var styledProps = useStylingSample2(props).content;
-        var merged = __assign(__assign({}, props), styledProps);
+    const Sample2Text = (props) => {
+        const styledProps = useStylingSample2(props).content;
+        const merged = { ...props, ...styledProps };
         // delete the color key to not pass it through to the text props, could be done via destructuring, filtering, or any number of ways
         delete merged.color;
         // render the text
-        return React.createElement(Text, __assign({}, merged), props.children);
+        return React.createElement(Text, { ...merged }, props.children);
     };
     /** rendering the Sample2 component with the base theme */
-    it('Sample2Text rendering with defaults and a color override', function () {
+    it('Sample2Text rendering with defaults and a color override', () => {
         themeHelper.setActive();
-        var tree = renderer
+        const tree = renderer
             .create(React.createElement(View, null,
             React.createElement(Sample2Text, null, "Sample2 with defaults"),
             React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")))
@@ -145,7 +154,7 @@ describe('useStyling samples', function () {
         expect(tree).toMatchSnapshot();
     });
     /** now re-theme the component via the components in the theme */
-    it('Sample2Text rendering with some custom settings in the theme', function () {
+    it('Sample2Text rendering with some custom settings in the theme', () => {
         themeHelper.setActive({
             components: {
                 Sample1: {
@@ -158,7 +167,7 @@ describe('useStyling samples', function () {
                 },
             },
         });
-        var tree = renderer
+        const tree = renderer
             .create(React.createElement(View, null,
             React.createElement(Sample2Text, null, "Sample2 with theme overrides set"),
             React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")))

package/lib/useStyling.samples.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/buildProps.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.refinePropsFunctions = exports.buildProps = void 0;
 function cacheStyleClosure(fn, keys) {
-    return function (tokens, theme, cache) {
-        return cache(function () { return fn(tokens, theme); }, (keys || []).map(function (key) { return tokens[key]; }))[0];
-    };
+    return (tokens, theme, cache) => cache(() => fn(tokens, theme), (keys || []).map((key) => tokens[key]))[0];
 }
 function refineKeys(keys, mask) {
     return typeof mask === 'object' && Array.isArray(mask)
-        ? keys.filter(function (key) { return mask.findIndex(function (val) { return val === key; }) !== -1; })
+        ? keys.filter((key) => mask.findIndex((val) => val === key) !== -1)
         : mask
             ? keys
             : [];
@@ -21,11 +19,11 @@ function refineKeys(keys, mask) {
  */
 function buildProps(fn, keys) {
     // wrap the provided function in the standard caching layer, basing it upon the provided keys
-    var result = cacheStyleClosure(fn, keys);
+    const result = cacheStyleClosure(fn, keys);
     // if results are being cached on keys, provide the ability to refine the function if a prop mask is specified
     result.refine =
         keys && keys.length > 0
-            ? function (mask) {
+            ? (mask) => {
                 return cacheStyleClosure(fn, refineKeys(keys, mask));
             }
             : undefined;
@@ -40,9 +38,9 @@ exports.buildProps = buildProps;
  * @param mask - prop mask to use for refinement
  */
 function refinePropsFunctions(styles, mask) {
-    var result = {};
-    Object.keys(styles).forEach(function (key) {
-        var refine = typeof styles[key] === 'function' && styles[key].refine;
+    const result = {};
+    Object.keys(styles).forEach((key) => {
+        const refine = typeof styles[key] === 'function' && styles[key].refine;
         result[key] = refine ? refine(mask) : styles[key];
     });
     return result;

package/lib-commonjs/buildProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":";;;AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB;IAExB,OAAO,UAAC,MAAe,EAAE,KAAa,EAAE,KAA2B;QACjE,OAAA,KAAK,CACH,cAAM,OAAA,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EAAjB,CAAiB,EACvB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,MAAM,CAAC,GAAG,CAAC,EAAX,CAAW,CAAC,CACvC,CAAC,CAAC,CAAC;IAHJ,CAGI,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC;IAC1F,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACpD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,IAAI,CAAC,SAAS,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,KAAK,GAAG,EAAX,CAAW,CAAC,KAAK,CAAC,CAAC,EAA3C,CAA2C,CAAC;QACnE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,SAAgB,UAAU,CACxB,EAA8C,EAC9C,IAAwB;IAExB,6FAA6F;IAC7F,IAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAE3C,8GAA8G;IAC9G,MAAM,CAAC,MAAM;QACX,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,UAAC,IAAsC;gBACrC,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAChB,CAAC;AAjBD,gCAiBC;AAED;;;;;GAKG;AACH,SAAgB,oBAAoB,CAClC,MAAmD,EACnD,IAAqC;IAErC,IAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;QAC9B,IAAM,MAAM,GACV,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,UAAU,IAAK,MAAM,CAAC,GAAG,CAA4E,CAAC,MAAM,CAAC;QACtI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAXD,oDAWC"}
+{"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":";;;AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB;IAExB,OAAO,CAAC,MAAe,EAAE,KAAa,EAAE,KAA2B,EAAE,EAAE,CACrE,KAAK,CACH,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EACvB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CACvC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC;IAC1F,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACpD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,SAAgB,UAAU,CACxB,EAA8C,EAC9C,IAAwB;IAExB,6FAA6F;IAC7F,MAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAE3C,8GAA8G;IAC9G,MAAM,CAAC,MAAM;QACX,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,CAAC,IAAsC,EAAE,EAAE;gBACzC,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAChB,CAAC;AAjBD,gCAiBC;AAED;;;;;GAKG;AACH,SAAgB,oBAAoB,CAClC,MAAmD,EACnD,IAAqC;IAErC,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAClC,MAAM,MAAM,GACV,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,UAAU,IAAK,MAAM,CAAC,GAAG,CAA4E,CAAC,MAAM,CAAC;QACtI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAXD,oDAWC"}

package/lib-commonjs/buildProps.test.js

@@ -1,34 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var memo_cache_1 = require("@fluentui-react-native/memo-cache");
-var buildProps_1 = require("./buildProps");
-var theme = { foo: 'foo', bar: 'bar' };
-var instanceCount = 0;
+const memo_cache_1 = require("@fluentui-react-native/memo-cache");
+const buildProps_1 = require("./buildProps");
+const theme = { foo: 'foo', bar: 'bar' };
+let instanceCount = 0;
 function munge(tokens, theme) {
-    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, theme), tokens), { instance: instanceCount++ });
+    return {
+        ...theme,
+        ...tokens,
+        instance: instanceCount++,
+    };
 }
-describe('props function tests', function () {
-    test('basic build props function caches as expected', function () {
-        var cache = (0, memo_cache_1.getMemoCache)();
-        var styleFn = (0, buildProps_1.buildProps)(munge, ['a', 'b']);
-        var p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
+describe('props function tests', () => {
+    test('basic build props function caches as expected', () => {
+        const cache = (0, memo_cache_1.getMemoCache)();
+        const styleFn = (0, buildProps_1.buildProps)(munge, ['a', 'b']);
+        const p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
         expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, cache)).toBe(p1);
-        var p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
+        const p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
         expect(p2).not.toBe(p1);
         expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, cache)).toBe(p2);
     });
-    test('build props function refinement works with explicit keys', function () {
-        var cache = (0, memo_cache_1.getMemoCache)();
-        var styleFn = (0, buildProps_1.buildProps)(munge, ['a', 'b', 'c', 'd']);
-        var refinedFn = styleFn.refine(['a', 'b']);
-        var t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
-        var t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
-        var p1 = styleFn(t1, theme, cache);
-        var p2 = styleFn(t2, theme, cache);
+    test('build props function refinement works with explicit keys', () => {
+        const cache = (0, memo_cache_1.getMemoCache)();
+        const styleFn = (0, buildProps_1.buildProps)(munge, ['a', 'b', 'c', 'd']);
+        const refinedFn = styleFn.refine(['a', 'b']);
+        const t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
+        const t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
+        const p1 = styleFn(t1, theme, cache);
+        const p2 = styleFn(t2, theme, cache);
         expect(p2).not.toBe(p1);
-        var rp1 = refinedFn(t1, theme, cache);
-        var rp2 = refinedFn(t2, theme, cache);
+        const rp1 = refinedFn(t1, theme, cache);
+        const rp2 = refinedFn(t2, theme, cache);
         expect(rp2).toBe(rp1);
     });
 });

package/lib-commonjs/buildProps.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":";;;AAAA,gEAAiE;AAEjE,2CAA0C;AAM1C,IAAM,KAAK,GAAW,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AAEjD,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB,SAAS,KAAK,CAAC,MAAe,EAAE,KAAa;IAC3C,8DACK,KAAK,GACL,MAAM,KACT,QAAQ,EAAE,aAAa,EAAE,IACzB;AACJ,CAAC;AAED,QAAQ,CAAC,sBAAsB,EAAE;IAC/B,IAAI,CAAC,+CAA+C,EAAE;QACpD,IAAM,KAAK,GAAG,IAAA,yBAAY,GAAE,CAAC;QAC7B,IAAM,OAAO,GAAG,IAAA,uBAAU,EAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC9C,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7D,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrE,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE;QAC/D,IAAM,KAAK,GAAG,IAAA,yBAAY,GAAE,CAAC;QAC7B,IAAM,OAAO,GAAG,IAAA,uBAAU,EAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACxD,IAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7C,IAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;QAC9C,IAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAElD,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExB,IAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,IAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":";;AAAA,kEAAiE;AAEjE,6CAA0C;AAM1C,MAAM,KAAK,GAAW,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AAEjD,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB,SAAS,KAAK,CAAC,MAAe,EAAE,KAAa;IAC3C,OAAO;QACL,GAAG,KAAK;QACR,GAAG,MAAM;QACT,QAAQ,EAAE,aAAa,EAAE;KAC1B,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,IAAI,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACzD,MAAM,KAAK,GAAG,IAAA,yBAAY,GAAE,CAAC;QAC7B,MAAM,OAAO,GAAG,IAAA,uBAAU,EAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC9C,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7D,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE,GAAG,EAAE;QACpE,MAAM,KAAK,GAAG,IAAA,yBAAY,GAAE,CAAC;QAC7B,MAAM,OAAO,GAAG,IAAA,uBAAU,EAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACxD,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;QAC9C,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAElD,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib-commonjs/buildUseStyling.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildUseStyling = void 0;
-var tslib_1 = require("tslib");
-var use_tokens_1 = require("@fluentui-react-native/use-tokens");
-var buildProps_1 = require("./buildProps");
+const use_tokens_1 = require("@fluentui-react-native/use-tokens");
+const buildProps_1 = require("./buildProps");
 /**
  * Produce the final slot props for the styled hook
  *
@@ -13,9 +12,9 @@ var buildProps_1 = require("./buildProps");
  * @param cache - cache to use for the base of slot caching
  */
 function resolveToSlotProps(styles, tokens, theme, cache) {
-    var slotProps = {};
-    Object.keys(styles).forEach(function (key) {
-        var style = styles[key];
+    const slotProps = {};
+    Object.keys(styles).forEach((key) => {
+        const style = styles[key];
         slotProps[key] = typeof style === 'function' ? style(tokens, theme, cache(null, [key])[1]) : style;
     });
     return slotProps;
@@ -28,26 +27,25 @@ function resolveToSlotProps(styles, tokens, theme, cache) {
  */
 function buildUseStyling(options, themeHelper) {
     // create a cache instance for this use styling implementation
-    var useTheme = themeHelper.useTheme, getComponentInfo = themeHelper.getComponentInfo;
-    var tokens = options.tokens, tokenProps = options.tokensThatAreAlsoProps;
-    var styles = (0, buildProps_1.refinePropsFunctions)(options.slotProps || {}, tokenProps);
-    var useTokens = use_tokens_1.buildUseTokens.apply(void 0, tslib_1.__spreadArray([getComponentInfo], tokens, false));
-    return function (props, lookup) {
-        var _a, _b;
+    const { useTheme, getComponentInfo } = themeHelper;
+    const { tokens, tokensThatAreAlsoProps: tokenProps } = options;
+    const styles = (0, buildProps_1.refinePropsFunctions)(options.slotProps || {}, tokenProps);
+    const useTokens = (0, use_tokens_1.buildUseTokens)(getComponentInfo, ...tokens);
+    return (props, lookup) => {
         // query the theme
-        var theme = useTheme();
+        const theme = useTheme();
         // get the merged tokens from the theme
-        var _c = useTokens(theme), mergedTokens = _c[0], cache = _c[1];
+        let [mergedTokens, cache] = useTokens(theme);
         // resolve overrides as appropriate
         if (options.states) {
-            _a = (0, use_tokens_1.applyTokenLayers)(mergedTokens, options.states, cache, lookup || (function (val) { return props[val]; })), mergedTokens = _a[0], cache = _a[1];
+            [mergedTokens, cache] = (0, use_tokens_1.applyTokenLayers)(mergedTokens, options.states, cache, lookup || ((val) => props[val]));
         }
         // now resolve tokens
         if (typeof tokenProps === 'object' && Array.isArray(tokenProps)) {
-            _b = (0, use_tokens_1.applyPropsToTokens)(props, mergedTokens, cache, tokenProps), mergedTokens = _b[0], cache = _b[1];
+            [mergedTokens, cache] = (0, use_tokens_1.applyPropsToTokens)(props, mergedTokens, cache, tokenProps);
         }
         else if (tokenProps === 'all') {
-            mergedTokens = tslib_1.__assign(tslib_1.__assign({}, mergedTokens), props);
+            mergedTokens = { ...mergedTokens, ...props };
         }
         // finally produce slotProps from calling the style functions on each entry
         return resolveToSlotProps(styles, mergedTokens, theme, cache);

package/lib-commonjs/buildUseStyling.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":";;;;AAEA,gEAAyG;AAGzG,2CAAoD;AAiDpD;;;;;;;GAOG;AACH,SAAS,kBAAkB,CACzB,MAAmD,EACnD,MAAe,EACf,KAAa,EACb,KAA4B;IAE5B,IAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;QAC9B,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrG,CAAC,CAAC,CAAC;IACH,OAAO,SAAuB,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,SAAgB,eAAe,CAC7B,OAA+D,EAC/D,WAAgC;IAEhC,8DAA8D;IACtD,IAAA,QAAQ,GAAuB,WAAW,SAAlC,EAAE,gBAAgB,GAAK,WAAW,iBAAhB,CAAiB;IAC3C,IAAA,MAAM,GAAyC,OAAO,OAAhD,EAA0B,UAAU,GAAK,OAAO,uBAAZ,CAAa;IAC/D,IAAM,MAAM,GAAG,IAAA,iCAAoB,EAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;IACzE,IAAM,SAAS,GAAG,2BAAc,sCAAkB,gBAAgB,GAAK,MAAM,SAAC,CAAC;IAE/E,OAAO,UAAC,KAAa,EAAE,MAAiB;;QACtC,kBAAkB;QAClB,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,uCAAuC;QACnC,IAAA,KAAwB,SAAS,CAAC,KAAK,CAAC,EAAvC,YAAY,QAAA,EAAE,KAAK,QAAoB,CAAC;QAE7C,mCAAmC;QACnC,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,KAAwB,IAAA,6BAAgB,EAAC,YAAY,EAAE,OAAO,CAAC,MAAkB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,KAAK,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,EAAzH,YAAY,QAAA,EAAE,KAAK,QAAA,CAAuG;SAC5H;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/D,KAAwB,IAAA,+BAAkB,EAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,EAAjF,YAAY,QAAA,EAAE,KAAK,QAAA,CAA+D;SACpF;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE;YAC/B,YAAY,yCAAQ,YAAY,GAAK,KAAK,CAAE,CAAC;SAC9C;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;AACJ,CAAC;AAhCD,0CAgCC"}
+{"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":";;;AAEA,kEAAyG;AAGzG,6CAAoD;AAiDpD;;;;;;;GAOG;AACH,SAAS,kBAAkB,CACzB,MAAmD,EACnD,MAAe,EACf,KAAa,EACb,KAA4B;IAE5B,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrG,CAAC,CAAC,CAAC;IACH,OAAO,SAAuB,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,SAAgB,eAAe,CAC7B,OAA+D,EAC/D,WAAgC;IAEhC,8DAA8D;IAC9D,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,WAAW,CAAC;IACnD,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAC/D,MAAM,MAAM,GAAG,IAAA,iCAAoB,EAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,IAAA,2BAAc,EAAkB,gBAAgB,EAAE,GAAG,MAAM,CAAC,CAAC;IAE/E,OAAO,CAAC,KAAa,EAAE,MAAiB,EAAE,EAAE;QAC1C,kBAAkB;QAClB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,uCAAuC;QACvC,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAE7C,mCAAmC;QACnC,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,IAAA,6BAAgB,EAAC,YAAY,EAAE,OAAO,CAAC,MAAkB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC5H;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/D,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,IAAA,+BAAkB,EAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;SACpF;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE;YAC/B,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;SAC9C;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;AACJ,CAAC;AAhCD,0CAgCC"}

package/lib-commonjs/buildUseStyling.test.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var memo_cache_1 = require("@fluentui-react-native/memo-cache");
-var buildProps_1 = require("./buildProps");
-var buildUseStyling_1 = require("./buildUseStyling");
-var lastInstance = 0;
-var baseTokens = {
+const memo_cache_1 = require("@fluentui-react-native/memo-cache");
+const buildProps_1 = require("./buildProps");
+const buildUseStyling_1 = require("./buildUseStyling");
+let lastInstance = 0;
+const baseTokens = {
     a: 'a-base',
     b: 'b-base',
     c: 'c-base',
@@ -16,7 +15,7 @@ var baseTokens = {
         c: 'c-base-press',
     },
 };
-var defaultTheme = {
+const defaultTheme = {
     vals: {
         foo: 'foo',
         bar: 'bar',
@@ -32,32 +31,38 @@ var defaultTheme = {
         },
     },
 };
-var themeHelper = {
-    useTheme: function () { return defaultTheme; },
-    getComponentInfo: function (theme, name) { return theme.components[name]; },
+const themeHelper = {
+    useTheme: () => defaultTheme,
+    getComponentInfo: (theme, name) => theme.components[name],
 };
-var slotFn1 = function (tokens, theme) {
+const slotFn1 = (tokens, theme) => {
     return {
-        style: tslib_1.__assign(tslib_1.__assign({ a: tokens.a, b: tokens.b, c: tokens.c }, theme.vals), { instance: lastInstance++ }),
+        style: {
+            a: tokens.a,
+            b: tokens.b,
+            c: tokens.c,
+            ...theme.vals,
+            instance: lastInstance++,
+        },
     };
 };
-var extraCache = (0, memo_cache_1.getMemoCache)();
-var slotFn2 = function (tokens) {
-    return extraCache(function () { return ({
+const extraCache = (0, memo_cache_1.getMemoCache)();
+const slotFn2 = (tokens) => {
+    return extraCache(() => ({
         style: {
             a: tokens.a,
             b: tokens.b,
             instance: lastInstance++,
         },
-    }); }, [tokens.a, tokens.b])[0];
+    }), [tokens.a, tokens.b])[0];
 };
-var baseOptions = {
+const baseOptions = {
     tokens: [
         baseTokens,
         'uno',
-        function (theme) { return ({
+        (theme) => ({
             b: theme.vals.foo,
-        }); },
+        }),
     ],
     states: ['hover', 'press'],
     slotProps: {
@@ -71,12 +76,12 @@ var baseOptions = {
     },
     tokensThatAreAlsoProps: ['b'],
 };
-describe('useStyling test suite', function () {
-    test('basic built hook', function () {
-        var useStyling = (0, buildUseStyling_1.buildUseStyling)(baseOptions, themeHelper);
-        var slotProps = useStyling({});
-        var slotProps2 = useStyling({ p1: 2, p2: 'bar' });
-        Object.keys(slotProps).forEach(function (key) {
+describe('useStyling test suite', () => {
+    test('basic built hook', () => {
+        const useStyling = (0, buildUseStyling_1.buildUseStyling)(baseOptions, themeHelper);
+        const slotProps = useStyling({});
+        const slotProps2 = useStyling({ p1: 2, p2: 'bar' });
+        Object.keys(slotProps).forEach((key) => {
             expect(slotProps[key]).toBe(slotProps2[key]);
         });
     });

package/lib-commonjs/buildUseStyling.test.js.map

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

package/lib-commonjs/useStyling.samples.test.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var react_native_1 = require("react-native");
-var renderer = tslib_1.__importStar(require("react-test-renderer"));
-var buildProps_1 = require("./buildProps");
-var buildUseStyling_1 = require("./buildUseStyling");
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_native_1 = require("react-native");
+const renderer = tslib_1.__importStar(require("react-test-renderer"));
+const buildProps_1 = require("./buildProps");
+const buildUseStyling_1 = require("./buildUseStyling");
 /**
  * The default/base theme just contains base values
  */
-var baseTheme = {
+const baseTheme = {
     globals: {
         backgroundColor: 'white',
         color: 'black',
@@ -19,20 +19,20 @@ var baseTheme = {
     },
     components: {},
 };
-var current = { theme: baseTheme };
+const current = { theme: baseTheme };
 /**
  * Because the buildUseStyling utility is not opinionated about theming, the theming is injected via
  * a theme helper implementation. This allows for a framework to build an opinionated version with
  * whatever system they desire
  */
-var themeHelper = {
-    useTheme: function () { return current.theme; },
-    getComponentInfo: function (theme, name) { return theme.components[name]; },
-    setActive: function (theme) {
-        current.theme = theme ? tslib_1.__assign(tslib_1.__assign({}, baseTheme), theme) : baseTheme;
+const themeHelper = {
+    useTheme: () => current.theme,
+    getComponentInfo: (theme, name) => theme.components[name],
+    setActive: (theme) => {
+        current.theme = theme ? { ...baseTheme, ...theme } : baseTheme;
     },
 };
-describe('useStyling samples', function () {
+describe('useStyling samples', () => {
     /**
      * Sample #1 - Themeable text element
      *
@@ -40,17 +40,17 @@ describe('useStyling samples', function () {
      * via theming
      */
     // now create the styling hook, first the options so they can be reused later
-    var sample1StylingOptions = {
+    const sample1StylingOptions = {
         /**
          * tell the styling hook how to build up the tokens
          */
         tokens: [
             /** first the default values should come from the global theme section */
-            function (t) { return ({
+            (t) => ({
                 color: t.globals.color,
                 fontFamily: t.globals.fontFamily,
                 fontSize: t.globals.fontSize,
-            }); },
+            }),
             /** next we should look for a component reference to overlay */
             'Sample1',
         ],
@@ -63,9 +63,9 @@ describe('useStyling samples', function () {
             /**
              * first input for buildProps is a function which takes tokens and a theme and returns props
              */
-            function (tokens /*, theme: Theme */) {
+            (tokens /*, theme: Theme */) => {
                 return {
-                    style: tslib_1.__assign({}, tokens),
+                    style: { ...tokens },
                 };
             }, 
             /**
@@ -76,20 +76,20 @@ describe('useStyling samples', function () {
         },
     };
     // now build the actual hook from the options and theme helper
-    var useStylingSample1 = (0, buildUseStyling_1.buildUseStyling)(sample1StylingOptions, themeHelper);
+    const useStylingSample1 = (0, buildUseStyling_1.buildUseStyling)(sample1StylingOptions, themeHelper);
     // now the sample 1 component becomes simple to build, just merge the styled props with the input props
-    var Sample1Text = function (props) {
-        var styledProps = useStylingSample1(props).content;
-        var merged = tslib_1.__assign(tslib_1.__assign({}, props), styledProps);
-        return React.createElement(react_native_1.Text, tslib_1.__assign({}, merged), props.children);
+    const Sample1Text = (props) => {
+        const styledProps = useStylingSample1(props).content;
+        const merged = { ...props, ...styledProps };
+        return React.createElement(react_native_1.Text, { ...merged }, props.children);
     };
     /** first render the component with no updates */
-    it('Sample1Text rendering with no overrides', function () {
-        var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1a")).toJSON();
+    it('Sample1Text rendering with no overrides', () => {
+        const tree = renderer.create(React.createElement(Sample1Text, null, "Sample1a")).toJSON();
         expect(tree).toMatchSnapshot();
     });
     /** now re-theme the component via the components in the theme */
-    it('Sample1Text rendering with some custom settings in the theme', function () {
+    it('Sample1Text rendering with some custom settings in the theme', () => {
         themeHelper.setActive({
             components: {
                 Sample1: {
@@ -98,14 +98,23 @@ describe('useStyling samples', function () {
                 },
             },
         });
-        var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1b")).toJSON();
+        const tree = renderer.create(React.createElement(Sample1Text, null, "Sample1b")).toJSON();
         expect(tree).toMatchSnapshot();
     });
     /**
      * Build the styling hook for sample2. Because this isn't being recombined this is being specified inline rather
      * than using a separate options object. Both are fine.
      */
-    var useStylingSample2 = (0, buildUseStyling_1.buildUseStyling)(tslib_1.__assign(tslib_1.__assign({}, sample1StylingOptions), { 
+    const useStylingSample2 = (0, buildUseStyling_1.buildUseStyling)({
+        /**
+         * This just starts with the baseline styling from sample1, in particular we are using the recipes of how to turn
+         * token values into the props for the internal sub-components. While this example is not super complex, for real-world
+         * components, re-using these can be extremely valuable.
+         *
+         * With that in mind, this copies over the recipes for how to turn tokens into props, the customizations that
+         * will be made are about how to ensure the tokens are set up correctly.
+         */
+        ...sample1StylingOptions,
         /**
          * In sample1 tokens are set to defaults from the global theme section, then patched with any values looked up with
          * the string 'Sample1'
@@ -117,7 +126,7 @@ describe('useStyling samples', function () {
          * If we didn't want to add the extra 'Sample2' lookup this line would be omitted. If we didn't want to look up 'Sample1' first
          * that could be filtered out of the array that is being copied
          */
-        tokens: tslib_1.__spreadArray(tslib_1.__spreadArray([], sample1StylingOptions.tokens, true), ['Sample2'], false), 
+        tokens: [...sample1StylingOptions.tokens, 'Sample2'],
         /**
          * This is the final bit of magic. The tokens will already have values set from the global theme, they will then be patched with
          * any customizations set into Sample1 and/or Sample2.
@@ -126,20 +135,21 @@ describe('useStyling samples', function () {
          * the component props we add a list of the props which need to be passed into tokens. If all props should be spread into the
          * tokens then this value can be set to 'all'. If none should be passed it can be omitted or set to 'none'
          */
-        tokensThatAreAlsoProps: ['color'] }), themeHelper);
+        tokensThatAreAlsoProps: ['color'],
+    }, themeHelper);
     // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
-    var Sample2Text = function (props) {
-        var styledProps = useStylingSample2(props).content;
-        var merged = tslib_1.__assign(tslib_1.__assign({}, props), styledProps);
+    const Sample2Text = (props) => {
+        const styledProps = useStylingSample2(props).content;
+        const merged = { ...props, ...styledProps };
         // delete the color key to not pass it through to the text props, could be done via destructuring, filtering, or any number of ways
         delete merged.color;
         // render the text
-        return React.createElement(react_native_1.Text, tslib_1.__assign({}, merged), props.children);
+        return React.createElement(react_native_1.Text, { ...merged }, props.children);
     };
     /** rendering the Sample2 component with the base theme */
-    it('Sample2Text rendering with defaults and a color override', function () {
+    it('Sample2Text rendering with defaults and a color override', () => {
         themeHelper.setActive();
-        var tree = renderer
+        const tree = renderer
             .create(React.createElement(react_native_1.View, null,
             React.createElement(Sample2Text, null, "Sample2 with defaults"),
             React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")))
@@ -147,7 +157,7 @@ describe('useStyling samples', function () {
         expect(tree).toMatchSnapshot();
     });
     /** now re-theme the component via the components in the theme */
-    it('Sample2Text rendering with some custom settings in the theme', function () {
+    it('Sample2Text rendering with some custom settings in the theme', () => {
         themeHelper.setActive({
             components: {
                 Sample1: {
@@ -160,7 +170,7 @@ describe('useStyling samples', function () {
                 },
             },
         });
-        var tree = renderer
+        const tree = renderer
             .create(React.createElement(react_native_1.View, null,
             React.createElement(Sample2Text, null, "Sample2 with theme overrides set"),
             React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")))

package/lib-commonjs/useStyling.samples.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAE/B,6CAA0C;AAE1C,oEAAgD;AAEhD,2CAA0C;AAE1C,qDAAoD;AAuBpD;;GAEG;AACH,IAAM,SAAS,GAAU;IACvB,OAAO,EAAE;QACP,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,EAAE;KACb;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,IAAM,OAAO,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAErC;;;;GAIG;AACH,IAAM,WAAW,GAAyE;IACxF,QAAQ,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,EAAb,CAAa;IAC7B,gBAAgB,EAAE,UAAC,KAAY,EAAE,IAAY,IAAK,OAAA,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAtB,CAAsB;IACxE,SAAS,EAAE,UAAC,KAAsB;QAChC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,uCAAM,SAAS,GAAK,KAAK,EAAG,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;CACF,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE;IAC7B;;;;;OAKG;IAeH,6EAA6E;IAC7E,IAAM,qBAAqB,GAA4E;QACrG;;WAEG;QACH,MAAM,EAAE;YACN,yEAAyE;YACzE,UAAC,CAAQ,IAAK,OAAA,CAAC;gBACb,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK;gBACtB,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU;gBAChC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ;aAC7B,CAAC,EAJY,CAIZ;YACF,+DAA+D;YAC/D,SAAS;SACV;QACD;;WAEG;QACH,SAAS,EAAE;YACT,0GAA0G;YAC1G,OAAO,EAAE,IAAA,uBAAU;YACjB;;eAEG;YACH,UAAC,MAAqB,CAAC,mBAAmB;gBACxC,OAAO;oBACL,KAAK,uBAAO,MAAM,CAAE;iBACrB,CAAC;YACJ,CAAC;YACD;;;eAGG;YACH,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,CACpC;SACF;KACF,CAAC;IAEF,8DAA8D;IAC9D,IAAM,iBAAiB,GAAG,IAAA,iCAAe,EAAC,qBAAqB,EAAE,WAAW,CAAC,CAAC;IAE9E,uGAAuG;IACvG,IAAM,WAAW,GAA0C,UAAC,KAAK;QAC/D,IAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACrD,IAAM,MAAM,yCAAQ,KAAK,GAAK,WAAW,CAAE,CAAC;QAC5C,OAAO,oBAAC,mBAAI,uBAAK,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACnD,CAAC,CAAC;IAEF,iDAAiD;IACjD,EAAE,CAAC,yCAAyC,EAAE;QAC5C,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,WAAW,mBAAuB,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,iEAAiE;IACjE,EAAE,CAAC,8DAA8D,EAAE;QACjE,WAAW,CAAC,SAAS,CAAC;YACpB,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,EAAE;iBACb;aACF;SACF,CAAC,CAAC;QACH,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,WAAW,mBAAuB,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAYH;;;OAGG;IACH,IAAM,iBAAiB,GAAG,IAAA,iCAAe,wCAUlC,qBAAqB;QACxB;;;;;;;;;;WAUG;QACH,MAAM,kDAAM,qBAAqB,CAAC,MAAM,UAAE,SAAS;QACnD;;;;;;;WAOG;QACH,sBAAsB,EAAE,CAAC,OAAO,CAAC,KAEnC,WAAW,CACZ,CAAC;IAEF,4GAA4G;IAC5G,IAAM,WAAW,GAA0C,UAAC,KAAK;QAC/D,IAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACrD,IAAM,MAAM,yCAAQ,KAAK,GAAK,WAAW,CAAE,CAAC;QAC5C,mIAAmI;QACnI,OAAO,MAAM,CAAC,KAAK,CAAC;QACpB,kBAAkB;QAClB,OAAO,oBAAC,mBAAI,uBAAK,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACnD,CAAC,CAAC;IAEF,0DAA0D;IAC1D,EAAE,CAAC,0DAA0D,EAAE;QAC7D,WAAW,CAAC,SAAS,EAAE,CAAC;QACxB,IAAM,IAAI,GAAG,QAAQ;aAClB,MAAM,CACL,oBAAC,mBAAI;YACH,oBAAC,WAAW,gCAAoC;YAChD,oBAAC,WAAW,IAAC,KAAK,EAAC,OAAO,2CAAmD,CACxE,CACR;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,iEAAiE;IACjE,EAAE,CAAC,8DAA8D,EAAE;QACjE,WAAW,CAAC,SAAS,CAAC;YACpB,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,EAAE;iBACb;gBACD,OAAO,EAAE;oBACP,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,WAAW;iBACxB;aACF;SACF,CAAC,CAAC;QACH,IAAM,IAAI,GAAG,QAAQ;aAClB,MAAM,CACL,oBAAC,mBAAI;YACH,oBAAC,WAAW,2CAA+C;YAC3D,oBAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,iDAAyD,CAC/E,CACR;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/use-styling",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "description": "Opinionated use styling hook implementation",
   "repository": {
     "type": "git",
@@ -9,6 +9,13 @@
   },
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
   "typings": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
@@ -27,8 +34,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/memo-cache": "1.3.3",
-    "@fluentui-react-native/use-tokens": "0.6.3",
+    "@fluentui-react-native/memo-cache": "1.3.5",
+    "@fluentui-react-native/use-tokens": "0.6.5",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
@@ -55,6 +62,7 @@
         ]
       },
       "capabilities": [
+        "babel-preset-react-native",
         "core",
         "core-android",
         "core-ios",

package/.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@fluentui-react-native/eslint-config-rules'],
-};