@fluentui-react-native/tester 0.135.1 → 0.135.3

package/lib/fluent-tester/src/theme/ThemePickers.android.js

@@ -0,0 +1,61 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { View } from 'react-native';
+import { useTheme } from '@fluentui-react-native/framework';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { Picker } from '@react-native-picker/picker';
+import { themeChoices } from './applyTheme';
+import { lightnessOptions, testerTheme } from './CustomThemes';
+var getThemedDropdownStyles = themedStyleSheet(function (t) {
+    return {
+        pickerRoot: {
+            flexDirection: 'row',
+            width: '100%',
+        },
+        picker: {
+            flexDirection: 'column',
+            alignItems: 'center',
+            width: '50%',
+            padding: 4,
+        },
+        dropdown: {
+            fontSize: 12,
+            color: t.colors.bodyText,
+        },
+        dropdownBorder: {
+            borderStyle: 'solid',
+            borderColor: t.colors.disabledBodyText,
+            borderWidth: 1,
+            width: '100%',
+        },
+    };
+});
+var PickerLabel = Text.customize({ variant: 'subheaderSemibold' });
+export var ThemePickers = function () {
+    var onThemeSelected = React.useCallback(function (newTheme) {
+        testerTheme.themeName = newTheme;
+    }, []);
+    var onAppearanceChange = React.useCallback(function (newAppearance) {
+        testerTheme.appearance = newAppearance;
+    }, []);
+    var theme = useTheme();
+    var themedPickerStyles = getThemedDropdownStyles(theme);
+    var dropdownProps = {
+        style: themedPickerStyles.dropdown,
+        mode: 'dropdown',
+    };
+    var Dropdown = function (props) {
+        var initial = props.initial, onValueChange = props.onValueChange, options = props.options;
+        return (React.createElement(View, { style: themedPickerStyles.dropdownBorder },
+            React.createElement(Picker, __assign({ selectedValue: initial, onValueChange: onValueChange, dropdownIconColor: theme.colors.defaultIcon }, dropdownProps), options.map(function (entry, index) { return (React.createElement(Picker.Item, { label: entry.label, value: entry.value, key: "entry".concat(index) })); }))));
+    };
+    return (React.createElement(View, { style: themedPickerStyles.pickerRoot },
+        React.createElement(View, { style: themedPickerStyles.picker },
+            React.createElement(PickerLabel, null, "Theme: "),
+            React.createElement(Dropdown, { initial: testerTheme.themeName, onValueChange: onThemeSelected, options: themeChoices })),
+        React.createElement(View, { style: themedPickerStyles.picker },
+            React.createElement(PickerLabel, null, "Light/Dark: "),
+            React.createElement(Dropdown, { initial: testerTheme.appearance, onValueChange: onAppearanceChange, options: lightnessOptions }))));
+};
+//# sourceMappingURL=ThemePickers.android.js.map

package/lib/fluent-tester/src/theme/ThemePickers.android.js.map

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

package/lib/fluent-tester/src/theme/ThemePickers.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const themePickerStyles: {
+    pickerRoot: {
+        flexDirection: "row";
+    };
+    picker: {
+        flexDirection: "row";
+        alignItems: "center";
+        padding: number;
+    };
+    dropdown: {
+        height: number;
+        width: number;
+        fontSize: number;
+    };
+};
+type PartPickerEntry = {
+    label: string;
+    value: string;
+};
+type PartPickerProps = {
+    initial: string;
+    contents: PartPickerEntry[];
+    onChange: (value: string) => void;
+};
+export declare const PartPicker: React.FunctionComponent<PartPickerProps>;
+export declare const ThemePickers: React.FunctionComponent;
+export {};
+//# sourceMappingURL=ThemePickers.d.ts.map

package/lib/fluent-tester/src/theme/ThemePickers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePickers.d.ts","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAgB5B,CAAC;AAEH,KAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAY/D,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAsBhC,CAAC"}

package/lib/fluent-tester/src/theme/ThemePickers.ios.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { Theme } from '@fluentui-react-native/framework';
+export declare const themePickerStyles: (theme: Theme) => import("@fluentui-react-native/themed-stylesheet").NamedStyles<{
+    pickerRoot: unknown;
+    picker: unknown;
+    pickerItem: unknown;
+    dropdown: unknown;
+}>;
+export declare const ThemePickers: React.FunctionComponent;
+//# sourceMappingURL=ThemePickers.ios.d.ts.map

package/lib/fluent-tester/src/theme/ThemePickers.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePickers.ios.d.ts","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAU9D,eAAO,MAAM,iBAAiB;;;;;EAqB5B,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBA0BhC,CAAC"}

package/lib/fluent-tester/src/theme/ThemePickers.ios.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Button } from '@fluentui-react-native/experimental-button';
+import { useTheme } from '@fluentui-react-native/framework';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { MenuView } from '@react-native-menu/menu';
+import { themeChoices } from './applyTheme';
+import { testerTheme } from './CustomThemes';
+export var themePickerStyles = themedStyleSheet(function (t) {
+    // picker, pickerItem, dropdown used in iOS dark mode
+    return {
+        pickerRoot: {
+            flexDirection: 'row',
+        },
+        picker: {
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: 4,
+            flexShrink: 0,
+        },
+        pickerItem: {
+            color: t.colors.bodyText,
+        },
+        dropdown: {
+            height: 200,
+            width: 90,
+            fontSize: 12,
+        },
+    };
+});
+export var ThemePickers = function () {
+    var themedStyles = themePickerStyles(useTheme());
+    var onThemeSelected = React.useCallback(function (newTheme) {
+        testerTheme.themeName = newTheme;
+    }, []);
+    var themeMenuOptions = themeChoices.map(function (themeChoice) { return ({
+        id: themeChoice.value,
+        title: themeChoice.label,
+        state: testerTheme.themeName === themeChoice.value ? 'on' : 'off',
+    }); });
+    return (React.createElement(View, { style: themedStyles.pickerRoot },
+        React.createElement(MenuView, { title: "Theme", onPressAction: function (_a) {
+                var nativeEvent = _a.nativeEvent;
+                onThemeSelected(nativeEvent.event);
+            }, actions: themeMenuOptions },
+            React.createElement(Button, { appearance: "subtle" }, "Theme"))));
+};
+//# sourceMappingURL=ThemePickers.ios.js.map

package/lib/fluent-tester/src/theme/ThemePickers.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePickers.ios.js","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,CAAC,IAAM,iBAAiB,GAAG,gBAAgB,CAAC,UAAC,CAAQ;IACzD,qDAAqD;IACrD,OAAO;QACL,UAAU,EAAE;YACV,aAAa,EAAE,KAAK;SACrB;QACD,MAAM,EAAE;YACN,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,CAAC;YACV,UAAU,EAAE,CAAC;SACd;QACD,UAAU,EAAE;YACV,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;SACzB;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,GAAG;YACX,KAAK,EAAE,EAAE;YACT,QAAQ,EAAE,EAAE;SACb;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,YAAY,GAA4B;IACnD,IAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnD,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,QAAgB;QACzD,WAAW,CAAC,SAAS,GAAG,QAAsB,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,gBAAgB,GAAiB,YAAY,CAAC,GAAG,CAAC,UAAC,WAAW,IAAK,OAAA,CAAC;QACxE,EAAE,EAAE,WAAW,CAAC,KAAK;QACrB,KAAK,EAAE,WAAW,CAAC,KAAK;QACxB,KAAK,EAAE,WAAW,CAAC,SAAS,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;KAClE,CAAC,EAJuE,CAIvE,CAAC,CAAC;IAEJ,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,YAAY,CAAC,UAAU;QAClC,oBAAC,QAAQ,IACP,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,UAAC,EAAe;oBAAb,WAAW,iBAAA;gBAC3B,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACrC,CAAC,EACD,OAAO,EAAE,gBAAgB;YAEzB,oBAAC,MAAM,IAAC,UAAU,EAAC,QAAQ,YAAe,CACjC,CACN,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib/fluent-tester/src/theme/ThemePickers.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { themeChoices } from './applyTheme';
+import { lightnessOptions, testerTheme } from './CustomThemes';
+import { MenuPicker } from '../TestComponents/Common/MenuPicker';
+export var themePickerStyles = StyleSheet.create({
+    pickerRoot: {
+        flexDirection: 'row',
+    },
+    picker: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 4,
+    },
+    dropdown: {
+        height: 30,
+        width: 120,
+        fontSize: 12,
+    },
+});
+export var PartPicker = function (props) {
+    var initial = props.initial, contents = props.contents, onChange = props.onChange;
+    var _a = React.useState(initial), selected = _a[0], setSelected = _a[1];
+    var onValueChange = React.useCallback(function (value) {
+        setSelected(value);
+        onChange(value);
+    }, [setSelected, onChange]);
+    return React.createElement(MenuPicker, { selected: selected, style: themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
+};
+var PickerLabel = Text.customize({ variant: 'bodySemibold' });
+export var ThemePickers = function () {
+    var onThemeSelected = React.useCallback(function (newTheme) {
+        testerTheme.themeName = newTheme;
+    }, []);
+    var onAppearanceChange = React.useCallback(function (newAppearance) {
+        testerTheme.appearance = newAppearance;
+    }, []);
+    return (React.createElement(View, { style: themePickerStyles.pickerRoot },
+        React.createElement(View, { style: themePickerStyles.picker },
+            React.createElement(PickerLabel, null, "Theme: "),
+            React.createElement(PartPicker, { initial: testerTheme.themeName, onChange: onThemeSelected, contents: themeChoices })),
+        React.createElement(View, { style: themePickerStyles.picker },
+            React.createElement(PickerLabel, null, "Light/Dark: "),
+            React.createElement(PartPicker, { initial: testerTheme.appearance, onChange: onAppearanceChange, contents: lightnessOptions }))));
+};
+//# sourceMappingURL=ThemePickers.js.map

package/lib/fluent-tester/src/theme/ThemePickers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePickers.js","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAU,CAAC,MAAM,CAAC;IACjD,UAAU,EAAE;QACV,aAAa,EAAE,KAAK;KACrB;IAED,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,CAAC;KACX;IAED,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC;AAUH,MAAM,CAAC,IAAM,UAAU,GAA6C,UAAC,KAAsB;IACjF,IAAA,OAAO,GAAyB,KAAK,QAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IACxC,IAAA,KAA0B,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAhD,QAAQ,QAAA,EAAE,WAAW,QAA2B,CAAC;IACxD,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,UAAC,KAAa;QACZ,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EACD,CAAC,WAAW,EAAE,QAAQ,CAAC,CACxB,CAAC;IAEF,OAAO,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,GAAI,CAAC;AAC9H,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,IAAM,YAAY,GAA4B;IACnD,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,QAAgB;QACzD,WAAW,CAAC,SAAS,GAAG,QAAsB,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,aAAqB;QACjE,WAAW,CAAC,UAAU,GAAG,aAA2C,CAAC;IACvE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,UAAU;QACvC,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM;YACnC,oBAAC,WAAW,kBAAsB;YAClC,oBAAC,UAAU,IAAC,OAAO,EAAE,WAAW,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,GAAI,CAC5F;QAEP,oBAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM;YACnC,oBAAC,WAAW,uBAA2B;YACvC,oBAAC,UAAU,IAAC,OAAO,EAAE,WAAW,CAAC,UAAU,EAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,gBAAgB,GAAI,CACpG,CACF,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib/fluent-tester/src/theme/ThemePickers.macos.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const themePickerStyles: {
+    pickerRoot: {
+        flexDirection: "row";
+    };
+    picker: {
+        flexDirection: "row";
+        alignItems: "center";
+        padding: number;
+    };
+    dropdown: {
+        height: number;
+        width: number;
+        fontSize: number;
+    };
+};
+type PartPickerEntry = {
+    label: string;
+    value: string;
+};
+type PartPickerProps = {
+    initial: string;
+    contents: PartPickerEntry[];
+    onChange: (value: string) => void;
+};
+export declare const PartPicker: React.FunctionComponent<PartPickerProps>;
+export declare const ThemePickers: React.FunctionComponent;
+export {};
+//# sourceMappingURL=ThemePickers.macos.d.ts.map

package/lib/fluent-tester/src/theme/ThemePickers.macos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePickers.macos.d.ts","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.macos.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAgB5B,CAAC;AAaH,KAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAiCF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAW/D,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAahC,CAAC"}

package/lib/fluent-tester/src/theme/ThemePickers.macos.js

@@ -0,0 +1,67 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { SvgXml } from 'react-native-svg';
+import { themeChoices } from './applyTheme';
+import { testerTheme } from './CustomThemes';
+export var themePickerStyles = StyleSheet.create({
+    pickerRoot: {
+        flexDirection: 'row',
+    },
+    picker: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 4,
+    },
+    dropdown: {
+        height: 30,
+        width: 90,
+        fontSize: 12,
+    },
+});
+var themeMenuPickerStyles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 5,
+    },
+    svg: {
+        padding: 4,
+    },
+});
+var ThemeMenuPicker = function (_a) {
+    var selected = _a.selected, onChange = _a.onChange, collection = _a.collection, style = _a.style;
+    var chevronXml = "\n  <svg width=\"12\" height=\"16\" viewBox=\"0 0 11 6\" color=\"#000\">\n    <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />\n  </svg>";
+    return (React.createElement(View, { style: __assign(__assign({}, themeMenuPickerStyles.container), style) },
+        React.createElement(Menu, null,
+            React.createElement(MenuTrigger, null,
+                React.createElement(Button, null,
+                    React.createElement(Text, null, selected),
+                    React.createElement(View, { style: themeMenuPickerStyles.svg },
+                        React.createElement(SvgXml, { xml: chevronXml })))),
+            React.createElement(MenuPopover, null,
+                React.createElement(MenuList, null, collection.map(function (entry, index) { return (React.createElement(MenuItem, { onClick: function () { return onChange(entry.value); }, key: "entry".concat(index) }, entry.label)); }))))));
+};
+export var PartPicker = function (props) {
+    var initial = props.initial, contents = props.contents, onChange = props.onChange;
+    var _a = React.useState(initial), value = _a[0], setValue = _a[1];
+    var onValueChange = React.useCallback(function (newValue) {
+        setValue(newValue);
+        onChange(newValue);
+    }, [setValue, onChange]);
+    return React.createElement(ThemeMenuPicker, { selected: value, style: themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
+};
+var PickerLabel = Text.customize({ variant: 'bodySemibold' });
+export var ThemePickers = function () {
+    var onThemeSelected = React.useCallback(function (newTheme) {
+        testerTheme.themeName = newTheme;
+    }, []);
+    return (React.createElement(View, { style: themePickerStyles.pickerRoot },
+        React.createElement(View, { style: themePickerStyles.picker },
+            React.createElement(PickerLabel, null, "Theme: "),
+            React.createElement(PartPicker, { initial: testerTheme.themeName, onChange: onThemeSelected, contents: themeChoices }))));
+};
+//# sourceMappingURL=ThemePickers.macos.js.map

package/lib/fluent-tester/src/theme/ThemePickers.macos.js.map

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

package/lib/fluent-tester/src/theme/ThemePickers.win32.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const themePickerStyles: {
+    pickerRoot: {
+        flexDirection: "row";
+    };
+    picker: {
+        flexDirection: "row";
+        alignItems: "center";
+        padding: number;
+    };
+    dropdown: {
+        height: number;
+        width: number;
+        fontSize: number;
+    };
+};
+type PartPickerEntry = {
+    label: string;
+    value: string;
+};
+type PartPickerProps = {
+    initial: string;
+    contents: PartPickerEntry[];
+    onChange: (value: string) => void;
+};
+export declare const PartPicker: React.FunctionComponent<PartPickerProps>;
+export declare const ThemePickers: React.FunctionComponent;
+export {};
+//# sourceMappingURL=ThemePickers.win32.d.ts.map

package/lib/fluent-tester/src/theme/ThemePickers.win32.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePickers.win32.d.ts","sourceRoot":"","sources":["../../../../src/theme/ThemePickers.win32.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAgB5B,CAAC;AAEH,KAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAY/D,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBA+BhC,CAAC"}

package/lib/fluent-tester/src/theme/ThemePickers.win32.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { brandOptions } from './applyBrand';
+import { themeChoices } from './applyTheme';
+import { lightnessOptions, testerTheme } from './CustomThemes';
+import { MenuPicker } from '../TestComponents/Common/MenuPicker';
+export var themePickerStyles = StyleSheet.create({
+    pickerRoot: {
+        flexDirection: 'row',
+    },
+    picker: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 4,
+    },
+    dropdown: {
+        height: 30,
+        width: 120,
+        fontSize: 12,
+    },
+});
+export var PartPicker = function (props) {
+    var initial = props.initial, contents = props.contents, onChange = props.onChange;
+    var _a = React.useState(initial), selected = _a[0], setSelected = _a[1];
+    var onValueChange = React.useCallback(function (value) {
+        setSelected(value);
+        onChange(value);
+    }, [setSelected, onChange]);
+    return React.createElement(MenuPicker, { selected: selected, style: themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
+};
+var PickerLabel = Text.customize({ variant: 'bodySemibold' });
+export var ThemePickers = function () {
+    var onBrandChange = React.useCallback(function (newBrand) {
+        testerTheme.brand = newBrand;
+    }, []);
+    var onThemeSelected = React.useCallback(function (newTheme) {
+        testerTheme.themeName = newTheme;
+    }, []);
+    var onAppearanceChange = React.useCallback(function (newAppearance) {
+        testerTheme.appearance = newAppearance;
+    }, []);
+    return (React.createElement(View, { style: themePickerStyles.pickerRoot },
+        React.createElement(View, { style: themePickerStyles.picker },
+            React.createElement(PickerLabel, null, "Theme: "),
+            React.createElement(PartPicker, { initial: testerTheme.themeName, onChange: onThemeSelected, contents: themeChoices })),
+        React.createElement(View, { style: themePickerStyles.picker },
+            React.createElement(PickerLabel, null, "Light/Dark: "),
+            React.createElement(PartPicker, { initial: testerTheme.appearance, onChange: onAppearanceChange, contents: lightnessOptions })),
+        React.createElement(View, { style: themePickerStyles.picker },
+            React.createElement(PickerLabel, null, "Brand: "),
+            React.createElement(PartPicker, { initial: testerTheme.brand, onChange: onBrandChange, contents: brandOptions }))));
+};
+//# sourceMappingURL=ThemePickers.win32.js.map

package/lib/fluent-tester/src/theme/ThemePickers.win32.js.map

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

package/lib/fluent-tester/src/theme/applyBrand.d.ts

@@ -0,0 +1,8 @@
+import type { PartialTheme, Theme } from '@fluentui-react-native/theme-types';
+export type OfficeBrand = 'Default' | 'Office' | 'Word' | 'Excel' | 'Powerpoint' | 'Outlook';
+export declare const brandOptions: {
+    label: string;
+    value: string;
+}[];
+export declare const applyBrand: (parent: Theme, currentBrand: string) => PartialTheme;
+//# sourceMappingURL=applyBrand.d.ts.map

package/lib/fluent-tester/src/theme/applyBrand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyBrand.d.ts","sourceRoot":"","sources":["../../../../src/theme/applyBrand.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAG9E,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,CAAC;AAwH7F,eAAO,MAAM,YAAY;;;GAA4E,CAAC;AAEtG,eAAO,MAAM,UAAU,WAAY,KAAK,gBAAgB,MAAM,KAAG,YA6ChE,CAAC"}

package/lib/fluent-tester/src/theme/applyBrand.js

@@ -0,0 +1,114 @@
+import { __assign } from "tslib";
+import { getCurrentBrandAliasTokens } from '@fluentui-react-native/win32-theme';
+var brandColors = {
+    /**
+     * default brand just passes through what is in the theme
+     * */
+    Default: undefined,
+    /**
+     * Office brands, applied via a small App color ramp
+     */
+    Office: {
+        App1: '#fff7f0',
+        App2: '#fbdfd0',
+        App3: '#f7bfa0',
+        App4: '#f29f71',
+        App5: '#ea6115',
+        App6: '#d83b01',
+        App7: '#a22c01',
+        App8: '#6c1e01',
+        AppTint40: '#f9dcd1',
+        AppTint30: '#f4beaa',
+        AppTint20: '#e8825d',
+        AppTint10: '#dd4f1b',
+        AppPrimary: '#d83b01',
+        AppShade10: '#c33400',
+        AppShade20: '#a52c00',
+        AppShade30: '#792000',
+    },
+    Word: {
+        App1: '#E3ECFA',
+        App2: '#A5B9D1',
+        App3: '#7DA3C6',
+        App4: '#4A78B0',
+        App5: '#3C65A4',
+        App6: '#2B579A',
+        App7: '#124078',
+        App8: '#002050',
+        AppTint40: '#D2E0F4',
+        AppTint30: '#AEC6EB',
+        AppTint20: '#6794D7',
+        AppTint10: '#2E6AC5',
+        AppPrimary: '#185ABD',
+        AppShade10: '#1651AA',
+        AppShade20: '#13458F',
+        AppShade30: '#0E336A',
+    },
+    Excel: {
+        App1: '#E9F5EE',
+        App2: '#9FCDB3',
+        App3: '#6EB38A',
+        App4: '#4E9668',
+        App5: '#3F8159',
+        App6: '#217346',
+        App7: '#0E5C2F',
+        App8: '#004B1C',
+        AppTint40: '#CAEAD8',
+        AppTint30: '#A0D8B9',
+        AppTint20: '#55B17E',
+        AppTint10: '#218D51',
+        AppPrimary: '#107C41',
+        AppShade10: '#0F703B',
+        AppShade20: '#0C5F32',
+        AppShade30: '#094624',
+    },
+    Powerpoint: {
+        App1: '#FCF0ED',
+        App2: '#FDC9B5',
+        App3: '#ED9583',
+        App4: '#E86E58',
+        App5: '#C75033',
+        App6: '#B7472A',
+        App7: '#A92B1A',
+        App8: '#740912',
+        AppTint40: '#F6DBD4',
+        AppTint30: '#EDBCB0',
+        AppTint20: '#DC816A',
+        AppTint10: '#CB5031',
+        AppPrimary: '#C43E1C',
+        AppShade10: '#B13719',
+        AppShade20: '#952F15',
+        AppShade30: '#6E220F',
+    },
+    Outlook: {
+        App1: '#CCE3F5',
+        App2: '#B3D6F2',
+        App3: '#69AFE5',
+        App4: '#2488D8',
+        App5: '#0078D7',
+        App6: '#106EBE',
+        App7: '#1664A7',
+        App8: '#135995',
+        AppTint40: '#C7E0F4',
+        AppTint30: '#6CB8F6',
+        AppTint20: '#3AA0F3',
+        AppTint10: '#2899F5',
+        AppPrimary: '#0078D7',
+        AppShade10: '#106EBE',
+        AppShade20: '#005A9E',
+        AppShade30: '#004C87',
+    },
+};
+export var brandOptions = Object.keys(brandColors).map(function (brand) { return ({ label: brand, value: brand }); });
+export var applyBrand = function (parent, currentBrand) {
+    if (parent.name === 'HighContrast') {
+        return {};
+    }
+    var ramp = brandColors[currentBrand];
+    return ramp
+        ? {
+            colors: __assign({ successBackground: ramp.App6, inputBorderHovered: ramp.App3, inputBackgroundCheckedHovered: ramp.App1, inputFocusBorderAlt: ramp.App4, buttonBackgroundHovered: ramp.App1, buttonBackgroundPressed: ramp.App2, buttonBorderFocused: ramp.App2, primaryButtonBackground: ramp.App6, primaryButtonBackgroundHovered: ramp.App7, primaryButtonBackgroundPressed: ramp.App8, primaryButtonBorder: ramp.App7, primaryButtonBorderFocused: ramp.App7, accentButtonBackground: ramp.App6, actionLinkHovered: ramp.App5, link: ramp.App6, linkHovered: ramp.App7, linkPressed: ramp.App8, defaultHoveredBackground: ramp.App1, defaultHoveredBorder: ramp.App2, defaultFocusedBackground: ramp.App1, defaultFocusedBorder: ramp.App2, defaultPressedBackground: ramp.App2, defaultPressedBorder: ramp.App5, brandedBackground: ramp.App6, brandedBorder: ramp.App7, brandedHoveredBackground: ramp.App7, brandedHoveredBorder: ramp.App6, brandedFocusedBackground: ramp.App7, brandedFocusedBorder: ramp.App7, brandedPressedBackground: ramp.App8, brandedPressedBorder: ramp.App7, defaultCheckedHoveredBackground: ramp.App1 }, getCurrentBrandAliasTokens(parent.name, ramp.AppPrimary)),
+        }
+        : {};
+};
+//# sourceMappingURL=applyBrand.js.map

package/lib/fluent-tester/src/theme/applyBrand.js.map

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

package/lib/fluent-tester/src/theme/applyTheme.d.ts

@@ -0,0 +1,9 @@
+import type { PartialTheme, Theme, ThemeOptions } from '@fluentui-react-native/framework';
+export type ThemeNames = 'Default' | 'Office' | 'Caterpillar' | 'Apple';
+export declare const themeChoices: {
+    label: string;
+    value: string;
+}[];
+/** apply the currently active theme layering */
+export declare function applyTheme(parent: Theme, name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme;
+//# sourceMappingURL=applyTheme.d.ts.map

package/lib/fluent-tester/src/theme/applyTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTheme.d.ts","sourceRoot":"","sources":["../../../../src/theme/applyTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAG1F,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,OAAO,CAAC;AAExE,eAAO,MAAM,YAAY;;;GAIxB,CAAC;AA4CF,gDAAgD;AAChD,wBAAgB,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAShH"}

package/lib/fluent-tester/src/theme/applyTheme.js

@@ -0,0 +1,59 @@
+import { createOfficeTheme, getThemingModule } from '@fluentui-react-native/win32-theme';
+export var themeChoices = [
+    { label: 'Default', value: 'Default' },
+    { label: 'Office', value: 'Office' },
+    { label: 'Caterpillar', value: 'Caterpillar' },
+];
+function applyCaterpillarTheme(parent) {
+    var _a;
+    return ((_a = parent.host) === null || _a === void 0 ? void 0 : _a.appearance) === 'dark'
+        ? {
+            colors: {
+                buttonBackground: '#111111',
+                buttonBackgroundHovered: '#ffcd11',
+                buttonBackgroundPressed: '#eeeeee',
+                buttonText: '#ffffff',
+                buttonTextPressed: '#111111',
+                buttonTextHovered: '#000000',
+            },
+            components: {
+                Button: {
+                    borderWidth: 0,
+                    tokens: {
+                        borderWidth: 0,
+                    },
+                },
+            },
+        }
+        : {
+            colors: {
+                buttonBackground: '#ffcd11',
+                buttonBackgroundHovered: '#111111',
+                buttonBackgroundPressed: '#eeeeee',
+                buttonText: '#000000',
+                buttonTextPressed: '#111111',
+                buttonTextHovered: '#ffffff',
+            },
+            components: {
+                Button: {
+                    borderWidth: 0,
+                    tokens: {
+                        borderWidth: 0,
+                    },
+                },
+            },
+        };
+}
+var themingModule = getThemingModule()[0];
+/** apply the currently active theme layering */
+export function applyTheme(parent, name, appearance) {
+    switch (name) {
+        case 'Office':
+            return themingModule ? createOfficeTheme({ appearance: appearance, paletteName: 'Dialogs_FluentSV' }).theme : {};
+        case 'Caterpillar':
+            return applyCaterpillarTheme(parent);
+        default:
+            return {};
+    }
+}
+//# sourceMappingURL=applyTheme.js.map