@fluentui-react-native/use-styling 0.14.3 → 0.15.0

package/lib-commonjs/buildProps.d.ts

@@ -1,51 +0,0 @@
-import type { GetMemoValue } from '@fluentui-react-native/framework-base';
-/**
- * Informs the framework of any tokens that also appear as props for the component.
- * - 'none' | undefined : this means no properties should be treated as tokens, the tokens that will be passed in to buildProps
- *                        will not be patched from props. This also means that for a given theme + state the tokens will not
- *                        change. As a result this is the most efficient mode.
- * - 'all'              : treat all props as tokens. Props will be spread into the tokens before the slot functions are called
- * - array of keys      : this is the discrete list of tokens which also appear in props
- */
-export type TokensThatAreAlsoProps<TTokens> = (keyof TTokens)[] | 'all' | 'none';
-/**
- * Raw format for producing styles in a functional manner. These can only depend on tokens or theme as inputs.
- * - tokens:  these will be produced from the theme and component constants, then they will be potentially
- *            be modified by the props. See the TokensThatAreAlsoProps type for more details.
- * - theme:   the theme is provided for reference
- * The provided
- * cache will be scoped to the theme, slot, and tokens that are coming out of the theme.
- */
-export type BuildPropsBase<TProps, TTokens, TTheme> = (tokens: TTokens, theme: TTheme, cache: GetMemoValue) => Partial<TProps>;
-/**
- * A refine function allows style functions to be updated based on tokens that are also props. Only those tokens that are also
- * props need to be considered as a key for caching
- */
-export type RefineFunctionBase<TProps, TTokens, TTheme> = (mask?: TokensThatAreAlsoProps<TTokens>) => BuildPropsBase<TProps, TTokens, TTheme>;
-/**
- * Signature for a style function which can be optionally refined by the styling hook if prop masks are provided
- */
-export type RefinableBuildPropsBase<TProps, TTokens, TTheme> = BuildPropsBase<TProps, TTokens, TTheme> & {
-    refine?: RefineFunctionBase<TProps, TTokens, TTheme>;
-};
-/**
- * Style functions can be plain functions, refinable functions, or just raw props
- */
-export type BuildSlotProps<TSlotProps, TTokens, TTheme> = {
-    [K in keyof TSlotProps]?: RefinableBuildPropsBase<TSlotProps[K], TTokens, TTheme> | TSlotProps[K];
-};
-/**
- * Standard wrapper for a function that provides props for a component based on tokens and theme.
- *
- * @param fn - function which does the work of producing props for the tokens and theme provided
- * @param keys - which token properties are used by this style, this determines the keys to use for caching
- */
-export declare function buildProps<TProps, TTokens, TTheme>(fn: (tokens: TTokens, theme: TTheme) => TProps, keys?: (keyof TTokens)[]): RefinableBuildPropsBase<TProps, TTokens, TTheme>;
-/**
- * Utility function to check the type and refinement capabilities of a styleFunction and refine it if appropriate
- *
- * @param fn - function or props to potentially refine
- * @param mask - prop mask to use for refinement
- */
-export declare function refinePropsFunctions<TSlotProps, TTokens, TTheme>(styles: BuildSlotProps<TSlotProps, TTokens, TTheme>, mask: TokensThatAreAlsoProps<TTokens>): BuildSlotProps<TSlotProps, TTokens, TTheme>;
-//# sourceMappingURL=buildProps.d.ts.map

package/lib-commonjs/buildProps.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildProps.d.ts","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAE1E;;;;;;;GAOG;AACH,MAAM,MAAM,sBAAsB,CAAC,OAAO,IAAI,CAAC,MAAM,OAAO,CAAC,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC;AAEjF;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAE/H;;;GAGG;AACH,MAAM,MAAM,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,CACxD,IAAI,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,KACnC,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,uBAAuB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG;IACvG,MAAM,CAAC,EAAE,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;CACtD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI;KACvD,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;CAClG,CAAC;AAqBF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAChD,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,EAC9C,IAAI,CAAC,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,GACvB,uBAAuB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAclD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,EAC9D,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,EACnD,IAAI,EAAE,sBAAsB,CAAC,OAAO,CAAC,GACpC,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAQ7C"}

package/lib-commonjs/buildProps.js

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildProps = buildProps;
-exports.refinePropsFunctions = refinePropsFunctions;
-function cacheStyleClosure(fn, keys) {
-    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((key) => mask.findIndex((val) => val === key) !== -1)
-        : mask
-            ? keys
-            : [];
-}
-/**
- * Standard wrapper for a function that provides props for a component based on tokens and theme.
- *
- * @param fn - function which does the work of producing props for the tokens and theme provided
- * @param keys - which token properties are used by this style, this determines the keys to use for caching
- */
-function buildProps(fn, keys) {
-    // wrap the provided function in the standard caching layer, basing it upon the provided 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
-            ? (mask) => {
-                return cacheStyleClosure(fn, refineKeys(keys, mask));
-            }
-            : undefined;
-    // return the style function decorated with the refine function
-    return result;
-}
-/**
- * Utility function to check the type and refinement capabilities of a styleFunction and refine it if appropriate
- *
- * @param fn - function or props to potentially refine
- * @param mask - prop mask to use for refinement
- */
-function refinePropsFunctions(styles, mask) {
-    const result = {};
-    for (const key of Object.keys(styles)) {
-        const refine = typeof styles[key] === 'function' && styles[key].refine;
-        result[key] = refine ? refine(mask) : styles[key];
-    }
-    return result;
-}
-//# sourceMappingURL=buildProps.js.map

package/lib-commonjs/buildProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":";;;;AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB,EAC0B;IAClD,OAAO,CAAC,MAAe,EAAE,KAAa,EAAE,KAAmB,EAAE,EAAE,CAC7D,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;AAAA,CACR;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC,EAAqB;IAC/G,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;YACJ,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AAAA,CACV;AAED;;;;;GAKG;AACH,oBACE,EAA8C,EAC9C,IAAwB,EAC0B;IAClD,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,CAAC;gBAC1C,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YAAA,CACtD;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAAA,CACf;AAED;;;;;GAKG;AACH,8BACE,MAAmD,EACnD,IAAqC,EACQ;IAC7C,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,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;IACD,OAAO,MAAM,CAAC;AAAA,CACf"}

package/lib-commonjs/buildProps.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=buildProps.test.d.ts.map

package/lib-commonjs/buildProps.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildProps.test.d.ts","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":""}

package/lib-commonjs/buildProps.test.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const framework_base_1 = require("@fluentui-react-native/framework-base");
-const buildProps_1 = require("./buildProps");
-const theme = { foo: 'foo', bar: 'bar' };
-let instanceCount = 0;
-function munge(tokens, theme) {
-    return {
-        ...theme,
-        ...tokens,
-        instance: instanceCount++,
-    };
-}
-describe('props function tests', () => {
-    test('basic build props function caches as expected', () => {
-        const cache = (0, framework_base_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);
-        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', () => {
-        const cache = (0, framework_base_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);
-        const rp1 = refinedFn(t1, theme, cache);
-        const rp2 = refinedFn(t2, theme, cache);
-        expect(rp2).toBe(rp1);
-    });
-});
-//# sourceMappingURL=buildProps.test.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":";;AAAA,0EAAqE;AAErE,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,EAAU;IACrD,OAAO;QACL,GAAG,KAAK;QACR,GAAG,MAAM;QACT,QAAQ,EAAE,aAAa,EAAE;KAC1B,CAAC;AAAA,CACH;AAED,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE,CAAC;IACrC,IAAI,CAAC,+CAA+C,EAAE,GAAG,EAAE,CAAC;QAC1D,MAAM,KAAK,GAAG,IAAA,6BAAY,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;IAAA,CACtE,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE,GAAG,EAAE,CAAC;QACrE,MAAM,KAAK,GAAG,IAAA,6BAAY,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;IAAA,CACvB,CAAC,CAAC;AAAA,CACJ,CAAC,CAAC"}

package/lib-commonjs/buildUseStyling.d.ts

@@ -1,49 +0,0 @@
-import type { HasLayer, TokenSettings } from '@fluentui-react-native/use-tokens';
-import type { TokensThatAreAlsoProps, BuildSlotProps } from './buildProps';
-/**
- * Options used to build up a useStyling hook
- */
-export type UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> = {
-    /**
-     * Baseline tokens for this component
-     */
-    tokens?: TokenSettings<TTokens, TTheme>[];
-    /**
-     * States that might be applied for the component like disabled or hovered, these should be listed
-     * in the order that they should be applied
-     */
-    states?: (keyof TTokens)[];
-    /**
-     * Functions which build up the props for each slot
-     */
-    slotProps?: BuildSlotProps<TSlotProps, TTokens, TTheme>;
-    /**
-     * Which props should be considered to be tokens.
-     * - If an array of keys this will ensure these props are promoted to tokens
-     * - If true all props will be added to tokens, if false or not specified no props will be treated as tokens
-     */
-    tokensThatAreAlsoProps?: TokensThatAreAlsoProps<TTokens>;
-    /** purely used to make type inferencing work correctly so the hook builder can pick up TProps from this type */
-    _propsType?: TProps;
-};
-/**
- * Signature for the use styling hook
- */
-export type UseStyling<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => TSlotProps;
-/**
- * Helper object which injects theme specific functionality
- */
-export type ThemeHelper<TTheme> = {
-    /** query the theme from the context, or from a global if your system doesn't use theming */
-    useTheme: () => TTheme;
-    /** lookup info for the component in the theme */
-    getComponentInfo: (theme: TTheme, name: string) => any;
-};
-/**
- * Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
- *
- * @param options - options which drive behavior for the generated styling hook
- * @param themeHelper - injected theme functionality
- */
-export declare function buildUseStyling<TProps, TSlotProps, TTokens, TTheme>(options: UseStylingOptions<TProps, TSlotProps, TTokens, TTheme>, themeHelper: ThemeHelper<TTheme>): UseStyling<TProps, TSlotProps>;
-//# sourceMappingURL=buildUseStyling.d.ts.map

package/lib-commonjs/buildUseStyling.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildUseStyling.d.ts","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGjF,OAAO,KAAK,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG3E;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI;IACnE;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC;IAE1C;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAExD;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAEzD,gHAAgH;IAChH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,UAAU,CAAC;AAE9F;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,MAAM,IAAI;IAChC,4FAA4F;IAC5F,QAAQ,EAAE,MAAM,MAAM,CAAC;IAEvB,iDAAiD;IACjD,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CACxD,CAAC;AAwBF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EACjE,OAAO,EAAE,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/D,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,GAC/B,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,CA6BhC"}

package/lib-commonjs/buildUseStyling.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildUseStyling = buildUseStyling;
-const use_tokens_1 = require("@fluentui-react-native/use-tokens");
-const buildProps_1 = require("./buildProps");
-/**
- * Produce the final slot props for the styled hook
- *
- * @param styles - refined style functions or props to use for processing
- * @param tokens - token inputs for the style functions
- * @param theme - theme to resolve against
- * @param cache - cache to use for the base of slot caching
- */
-function resolveToSlotProps(styles, tokens, theme, cache) {
-    const slotProps = {};
-    for (const key of Object.keys(styles)) {
-        const style = styles[key];
-        slotProps[key] = typeof style === 'function' ? style(tokens, theme, cache(null, [key])[1]) : style;
-    }
-    return slotProps;
-}
-/**
- * Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
- *
- * @param options - options which drive behavior for the generated styling hook
- * @param themeHelper - injected theme functionality
- */
-function buildUseStyling(options, themeHelper) {
-    // create a cache instance for this use styling implementation
-    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
-        const theme = useTheme();
-        // get the merged tokens from the theme
-        let [mergedTokens, cache] = useTokens(theme);
-        // resolve overrides as appropriate
-        if (options.states) {
-            [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)) {
-            [mergedTokens, cache] = (0, use_tokens_1.applyPropsToTokens)(props, mergedTokens, cache, tokenProps);
-        }
-        else if (tokenProps === 'all') {
-            mergedTokens = { ...mergedTokens, ...props };
-        }
-        // finally produce slotProps from calling the style functions on each entry
-        return resolveToSlotProps(styles, mergedTokens, theme, cache);
-    };
-}
-//# sourceMappingURL=buildUseStyling.js.map

package/lib-commonjs/buildUseStyling.js.map

@@ -1 +0,0 @@
-{"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,KAAiC,EACrB;IACZ,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,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;IACD,OAAO,SAAuB,CAAC;AAAA,CAChC;AAED;;;;;GAKG;AACH,yBACE,OAA+D,EAC/D,WAAgC,EACA;IAChC,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,CAAC;QAC3C,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,CAAC;YACnB,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;QAC7H,CAAC;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;YAChE,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,IAAA,+BAAkB,EAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;QACrF,CAAC;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;YAChC,YAAY,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAC;QAC/C,CAAC;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAAA,CAC/D,CAAC;AAAA,CACH"}

package/lib-commonjs/buildUseStyling.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=buildUseStyling.test.d.ts.map

package/lib-commonjs/buildUseStyling.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"buildUseStyling.test.d.ts","sourceRoot":"","sources":["../src/buildUseStyling.test.ts"],"names":[],"mappings":""}

package/lib-commonjs/buildUseStyling.test.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const framework_base_1 = require("@fluentui-react-native/framework-base");
-const buildProps_1 = require("./buildProps");
-const buildUseStyling_1 = require("./buildUseStyling");
-let lastInstance = 0;
-const baseTokens = {
-    a: 'a-base',
-    b: 'b-base',
-    c: 'c-base',
-    hover: {
-        c: 'c-base-hover',
-    },
-    press: {
-        c: 'c-base-press',
-    },
-};
-const defaultTheme = {
-    vals: {
-        foo: 'foo',
-        bar: 'bar',
-    },
-    components: {
-        uno: {
-            a: 'uno-a',
-            c: 'uno-c',
-        },
-        dos: {
-            b: 'dos-b',
-            c: 'dos-c',
-        },
-    },
-};
-const themeHelper = {
-    useTheme: () => defaultTheme,
-    getComponentInfo: (theme, name) => theme.components[name],
-};
-const slotFn1 = (tokens, theme) => {
-    return {
-        style: {
-            a: tokens.a,
-            b: tokens.b,
-            c: tokens.c,
-            ...theme.vals,
-            instance: lastInstance++,
-        },
-    };
-};
-const extraCache = (0, framework_base_1.getMemoCache)();
-const slotFn2 = (tokens) => {
-    return extraCache(() => ({
-        style: {
-            a: tokens.a,
-            b: tokens.b,
-            instance: lastInstance++,
-        },
-    }), [tokens.a, tokens.b])[0];
-};
-const baseOptions = {
-    tokens: [
-        baseTokens,
-        'uno',
-        (theme) => ({
-            b: theme.vals.foo,
-        }),
-    ],
-    states: ['hover', 'press'],
-    slotProps: {
-        slot1: {
-            style: {
-                instance: lastInstance++,
-            },
-        },
-        slot2: (0, buildProps_1.buildProps)(slotFn1, ['a', 'b', 'c']),
-        slot3: slotFn2,
-    },
-    tokensThatAreAlsoProps: ['b'],
-};
-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' });
-        for (const key of Object.keys(slotProps)) {
-            expect(slotProps[key]).toBe(slotProps2[key]);
-        }
-    });
-});
-//# sourceMappingURL=buildUseStyling.test.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"buildUseStyling.test.js","sourceRoot":"","sources":["../src/buildUseStyling.test.ts"],"names":[],"mappings":";;AAAA,0EAAqE;AAErE,6CAA0C;AAE1C,uDAAoD;AAEpD,IAAI,YAAY,GAAG,CAAC,CAAC;AAUrB,MAAM,UAAU,GAAW;IACzB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,KAAK,EAAE;QACL,CAAC,EAAE,cAAc;KAClB;IACD,KAAK,EAAE;QACL,CAAC,EAAE,cAAc;KAClB;CACF,CAAC;AAYF,MAAM,YAAY,GAAU;IAC1B,IAAI,EAAE;QACJ,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,KAAK;KACX;IACD,UAAU,EAAE;QACV,GAAG,EAAE;YACH,CAAC,EAAE,OAAO;YACV,CAAC,EAAE,OAAO;SACX;QACD,GAAG,EAAE;YACH,CAAC,EAAE,OAAO;YACV,CAAC,EAAE,OAAO;SACX;KACF;CACF,CAAC;AAEF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY;IAC5B,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;CACzE,CAAC;AAcF,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,KAAY,EAAE,EAAE,CAAC;IAChD,OAAO;QACL,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,GAAG,KAAK,CAAC,IAAI;YACb,QAAQ,EAAE,YAAY,EAAE;SACzB;KACO,CAAC;AAAA,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAA,6BAAY,GAAE,CAAC;AAElC,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC;IAClC,OAAO,UAAU,CACf,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE;YACL,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,QAAQ,EAAE,YAAY,EAAE;SACzB;KACF,CAAC,EACF,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CACrB,CAAC,CAAC,CAAC,CAAC;AAAA,CACN,CAAC;AAQF,MAAM,WAAW,GAA2D;IAC1E,MAAM,EAAE;QACN,UAAU;QACV,KAAK;QACL,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC;YACjB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;KACH;IACD,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE;QACT,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY,EAAE;aACzB;SACF;QACD,KAAK,EAAE,IAAA,uBAAU,EAAC,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC3C,KAAK,EAAE,OAAO;KACf;IACD,sBAAsB,EAAE,CAAC,GAAG,CAAC;CAC9B,CAAC;AAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE,CAAC;IACtC,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,CAAC;QAC7B,MAAM,UAAU,GAAG,IAAA,iCAAe,EAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAC7D,MAAM,SAAS,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;QACjC,MAAM,UAAU,GAAG,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QACpD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;YACzC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;QAC/C,CAAC;IAAA,CACF,CAAC,CAAC;AAAA,CACJ,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,7 +0,0 @@
-export { buildUseStyling } from './buildUseStyling';
-export type { ThemeHelper, UseStyling, UseStylingOptions } from './buildUseStyling';
-export { buildProps, refinePropsFunctions } from './buildProps';
-export type { BuildPropsBase, BuildSlotProps, RefinableBuildPropsBase, RefineFunctionBase, TokensThatAreAlsoProps } from './buildProps';
-export type { HasLayer, TokenSettings, TokensFromTheme } from '@fluentui-react-native/use-tokens';
-export { applyTokenLayers } from '@fluentui-react-native/use-tokens';
-//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAChE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACxI,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAClG,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC"}

package/lib-commonjs/index.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyTokenLayers = exports.refinePropsFunctions = exports.buildProps = exports.buildUseStyling = void 0;
-const buildUseStyling_1 = require("./buildUseStyling");
-Object.defineProperty(exports, "buildUseStyling", { enumerable: true, get: function () { return buildUseStyling_1.buildUseStyling; } });
-const buildProps_1 = require("./buildProps");
-Object.defineProperty(exports, "buildProps", { enumerable: true, get: function () { return buildProps_1.buildProps; } });
-Object.defineProperty(exports, "refinePropsFunctions", { enumerable: true, get: function () { return buildProps_1.refinePropsFunctions; } });
-const use_tokens_1 = require("@fluentui-react-native/use-tokens");
-Object.defineProperty(exports, "applyTokenLayers", { enumerable: true, get: function () { return use_tokens_1.applyTokenLayers; } });
-//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAAoD;AAA3C,kHAAA,eAAe,OAAA;AAExB,6CAAgE;AAAvD,wGAAA,UAAU,OAAA;AAAE,kHAAA,oBAAoB,OAAA;AAGzC,kEAAqE;AAA5D,8GAAA,gBAAgB,OAAA"}

package/lib-commonjs/useStyling.samples.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=useStyling.samples.test.d.ts.map

package/lib-commonjs/useStyling.samples.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyling.samples.test.d.ts","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":""}

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

@@ -1,222 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const renderer = __importStar(require("react-test-renderer"));
-const buildProps_1 = require("./buildProps");
-const buildUseStyling_1 = require("./buildUseStyling");
-/**
- * The default/base theme just contains base values
- */
-const baseTheme = {
-    globals: {
-        backgroundColor: 'white',
-        color: 'black',
-        borderColor: 'blue',
-        fontFamily: 'Arial',
-        fontSize: 12,
-    },
-    components: {},
-};
-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
- */
-const themeHelper = {
-    useTheme: () => current.theme,
-    getComponentInfo: (theme, name) => theme.components[name],
-    setActive: (theme) => {
-        current.theme = theme ? { ...baseTheme, ...theme } : baseTheme;
-    },
-};
-describe('useStyling samples', () => {
-    /**
-     * Sample #1 - Themeable text element
-     *
-     * This adds some default opinions for how a text element should be styled but only allows for customization
-     * via theming
-     */
-    // now create the styling hook, first the options so they can be reused later
-    const sample1StylingOptions = {
-        /**
-         * tell the styling hook how to build up the tokens
-         */
-        tokens: [
-            /** first the default values should come from the global theme section */
-            (t) => ({
-                color: t.globals.color,
-                fontFamily: t.globals.fontFamily,
-                fontSize: t.globals.fontSize,
-            }),
-            /** next we should look for a component reference to overlay */
-            'Sample1',
-        ],
-        /**
-         * Now provide the recipe for how to build props for the sub-components given the tokens
-         */
-        slotProps: {
-            /** only one sub-component, a Text element called content, as a result this needs to build up TextProps */
-            content: (0, buildProps_1.buildProps)(
-            /**
-             * first input for buildProps is a function which takes tokens and a theme and returns props
-             */
-            (tokens /*, theme: Theme */) => {
-                return {
-                    style: { ...tokens },
-                };
-            }, 
-            /**
-             * The second input are the tokens used as inputs for the above function. This is similar to the way the useEffect hook
-             * works in react.
-             */
-            ['color', 'fontFamily', 'fontSize']),
-        },
-    };
-    // now build the actual hook from the options and theme helper
-    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
-    const Sample1Text = (props) => {
-        const styledProps = useStylingSample1(props).content;
-        const merged = { ...props, ...styledProps };
-        return jsx_runtime_1.jsx(react_native_1.Text, { ...merged, children: props.children });
-    };
-    /** first render the component with no updates */
-    it('Sample1Text rendering with no overrides', () => {
-        let component;
-        (0, react_1.act)(() => {
-            component = renderer.create(jsx_runtime_1.jsx(Sample1Text, { children: "Sample1a" }));
-        });
-        expect(component.toJSON()).toMatchSnapshot();
-    });
-    /** now re-theme the component via the components in the theme */
-    it('Sample1Text rendering with some custom settings in the theme', () => {
-        themeHelper.setActive({
-            components: {
-                Sample1: {
-                    color: 'pink',
-                    fontSize: 24,
-                },
-            },
-        });
-        let component;
-        (0, react_1.act)(() => {
-            component = renderer.create(jsx_runtime_1.jsx(Sample1Text, { children: "Sample1b" }));
-        });
-        expect(component.toJSON()).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.
-     */
-    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'
-         *
-         * We want to maintain the logic of setting up the globals, but add an additional lookup for 'Sample2'. This might correspond
-         * to saying that if we were making a variant of a 'Text' component called 'HeaderText', we might want to look up
-         * customizations from 'Text' first, then override those customizations with those from 'HeaderText'
-         *
-         * 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: [...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.
-         *
-         * If this value was omitted then the tokens would be passed to the slotProps recipies as is. To have those values patched from
-         * 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);
-    // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
-    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 jsx_runtime_1.jsx(react_native_1.Text, { ...merged, children: props.children });
-    };
-    /** rendering the Sample2 component with the base theme */
-    it('Sample2Text rendering with defaults and a color override', () => {
-        themeHelper.setActive();
-        let component;
-        (0, react_1.act)(() => {
-            component = renderer.create(jsx_runtime_1.jsxs(react_native_1.View, { children: [
-                    jsx_runtime_1.jsx(Sample2Text, { children: "Sample2 with defaults" }), jsx_runtime_1.jsx(Sample2Text, { color: "green", children: "Sample2 with color override via prop" })
-                ] }));
-        });
-        expect(component.toJSON()).toMatchSnapshot();
-    });
-    /** now re-theme the component via the components in the theme */
-    it('Sample2Text rendering with some custom settings in the theme', () => {
-        themeHelper.setActive({
-            components: {
-                Sample1: {
-                    color: 'pink',
-                    fontSize: 24,
-                },
-                Sample2: {
-                    fontSize: 18,
-                    fontFamily: 'Helvetica',
-                },
-            },
-        });
-        let component;
-        (0, react_1.act)(() => {
-            component = renderer.create(jsx_runtime_1.jsxs(react_native_1.View, { children: [
-                    jsx_runtime_1.jsx(Sample2Text, { children: "Sample2 with theme overrides set" }), jsx_runtime_1.jsx(Sample2Text, { color: "purple", children: "Sample2 with theme and color prop override" })
-                ] }));
-        });
-        expect(component.toJSON()).toMatchSnapshot();
-    });
-});
-//# sourceMappingURL=useStyling.samples.test.js.map