@fluentui-react-native/tester-core 0.1.1

package/lib-commonjs/TestComponents/Overflow/OverflowTest.js

@@ -0,0 +1,300 @@
+'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;
+    };
+  })();
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.OverflowTest = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const React = __importStar(require('react'));
+const react_native_1 = require('react-native');
+const button_1 = require('@fluentui-react-native/button');
+const divider_1 = require('@fluentui-react-native/divider');
+const e2e_testing_1 = require('@fluentui-react-native/e2e-testing');
+const menu_1 = require('@fluentui-react-native/menu');
+const overflow_1 = require('@fluentui-react-native/overflow');
+const tablist_1 = require('@fluentui-react-native/tablist');
+const text_1 = require('@fluentui-react-native/text');
+const OverflowE2ETest_1 = require('./OverflowE2ETest');
+const MoreHorizontalFilled_svg_1 = __importDefault(require('../../../assets/MoreHorizontalFilled.svg'));
+const Test_1 = require('../Test');
+const items = ['a', 'b', 'c', 'd', 'e'];
+const itemLabels = {
+  a: 'Item A',
+  b: 'Item B Item B Item B',
+  c: 'Item C Item C',
+  d: 'Item D',
+  e: 'Item E Item E Item E Item E',
+};
+const overflowTestPageStyles = react_native_1.StyleSheet.create({
+  containerStyle: {
+    paddingVertical: 4,
+  },
+  width100: {
+    width: 100,
+  },
+  width250: {
+    width: 250,
+  },
+  width400: {
+    width: 400,
+  },
+  menuTrigger: {
+    alignSelf: 'center',
+  },
+  dynamicAddRemoval: {
+    width: 400,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'black',
+  },
+});
+function OverflowMenu(props) {
+  const { showMenu, visibleMenuItems, menuTriggerRef, onMenuTriggerLayout } = (0, overflow_1.useOverflowMenu)();
+  if (showMenu) {
+    return jsx_runtime_1.jsxs(menu_1.Menu, {
+      children: [
+        jsx_runtime_1.jsx(menu_1.MenuTrigger, {
+          children: jsx_runtime_1.jsx(button_1.ButtonV1, {
+            accessibilityLabel: 'More options',
+            onLayout: onMenuTriggerLayout,
+            style: overflowTestPageStyles.menuTrigger,
+            appearance: 'subtle',
+            iconOnly: true,
+            icon: { svgSource: { src: MoreHorizontalFilled_svg_1.default, viewBox: '0 0 20 20' } },
+            componentRef: menuTriggerRef,
+          }),
+        }),
+        jsx_runtime_1.jsx(menu_1.MenuPopover, {
+          children: jsx_runtime_1.jsx(menu_1.MenuList, {
+            children: visibleMenuItems.map((id) =>
+              jsx_runtime_1.jsx(menu_1.MenuItem, { onClick: () => props.onItemPress(id), children: itemLabels[id] ?? 'Item ' + id }, id),
+            ),
+          }),
+        }),
+      ],
+    });
+  } else {
+    return null;
+  }
+}
+function OverflowMainTest() {
+  return jsx_runtime_1.jsx(react_native_1.View, {
+    style: overflowTestPageStyles.containerStyle,
+    children: jsx_runtime_1.jsxs(overflow_1.Overflow, {
+      itemIDs: items,
+      children: [
+        items.map((item) =>
+          jsx_runtime_1.jsx(
+            overflow_1.OverflowItem,
+            {
+              overflowID: item,
+              children: jsx_runtime_1.jsx(button_1.ButtonV1, { onClick: () => console.log(item), children: itemLabels[item] }),
+            },
+            item,
+          ),
+        ),
+        jsx_runtime_1.jsx(OverflowMenu, { onItemPress: console.log }),
+      ],
+    }),
+  });
+}
+function OverflowTabTest() {
+  const [key, setKey] = React.useState('a');
+  return jsx_runtime_1.jsx(react_native_1.View, {
+    style: overflowTestPageStyles.containerStyle,
+    children: jsx_runtime_1.jsx(overflow_1.Overflow, {
+      dontHideBeforeReady: true,
+      itemIDs: items,
+      children: jsx_runtime_1.jsxs(tablist_1.TabList, {
+        selectedKey: key,
+        onTabSelect: setKey,
+        children: [
+          items.map((item) =>
+            jsx_runtime_1.jsx(
+              overflow_1.OverflowItem,
+              {
+                priority: key === item ? 2 : 1,
+                overflowID: item,
+                children: jsx_runtime_1.jsx(tablist_1.Tab, { tabKey: item, children: itemLabels[item] }),
+              },
+              item,
+            ),
+          ),
+          jsx_runtime_1.jsx(OverflowMenu, { onItemPress: setKey }),
+        ],
+      }),
+    }),
+  });
+}
+function OverflowWidthExample(props) {
+  const style = React.useMemo(() => ({ width: props.width }), [props]);
+  return jsx_runtime_1.jsxs(react_native_1.View, {
+    style: overflowTestPageStyles.containerStyle,
+    children: [
+      jsx_runtime_1.jsx(text_1.TextV1, { variant: 'body1Strong', children: `Width: ${props.width}` }),
+      jsx_runtime_1.jsxs(overflow_1.Overflow, {
+        dontHideBeforeReady: props.dontHideBeforeReady,
+        style: style,
+        itemIDs: items,
+        children: [
+          items.map((item) =>
+            jsx_runtime_1.jsx(
+              overflow_1.OverflowItem,
+              { overflowID: item, children: jsx_runtime_1.jsxs(button_1.ButtonV1, { children: ['Item ', ' ' + item] }) },
+              item,
+            ),
+          ),
+          jsx_runtime_1.jsx(OverflowMenu, { onItemPress: console.log }),
+        ],
+      }),
+    ],
+  });
+}
+function OverflowDifferentWidthTest() {
+  return jsx_runtime_1.jsxs(react_native_1.View, {
+    children: [
+      jsx_runtime_1.jsx(text_1.TextV1, { variant: 'heroStandard', children: 'Hidden Before Layout' }),
+      jsx_runtime_1.jsx(OverflowWidthExample, { width: 100 }),
+      jsx_runtime_1.jsx(OverflowWidthExample, { width: 250 }),
+      jsx_runtime_1.jsx(OverflowWidthExample, { width: 400 }),
+      jsx_runtime_1.jsx(divider_1.Divider, {}),
+      jsx_runtime_1.jsx(text_1.TextV1, { variant: 'heroStandard', children: 'Visible Before Layout' }),
+      jsx_runtime_1.jsx(OverflowWidthExample, { dontHideBeforeReady: true, width: 100 }),
+      jsx_runtime_1.jsx(OverflowWidthExample, { dontHideBeforeReady: true, width: 250 }),
+      jsx_runtime_1.jsx(OverflowWidthExample, { dontHideBeforeReady: true, width: 400 }),
+    ],
+  });
+}
+function OverflowDynamicAddRemovalTest() {
+  const [ids, setIDs] = React.useState(['1', '2', '3']);
+  const addItem = React.useCallback(
+    () =>
+      setIDs((prev) => {
+        const newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
+        return [...prev, newItem];
+      }),
+    [],
+  );
+  const removeItem = React.useCallback((item) => setIDs((prev) => prev.filter((x) => x !== item)), []);
+  return jsx_runtime_1.jsxs(react_native_1.View, {
+    style: overflowTestPageStyles.containerStyle,
+    children: [
+      jsx_runtime_1.jsx(text_1.TextV1, {
+        children: 'Add buttons using the button below. Remove by clicking on individual items in the Overflow container.',
+      }),
+      jsx_runtime_1.jsx(button_1.ButtonV1, { onClick: addItem, children: 'Add item' }),
+      jsx_runtime_1.jsxs(text_1.TextV1, { children: ['Overflow Items (raw): ', ids.reduce((prev, curr) => prev + ', ' + curr)] }),
+      jsx_runtime_1.jsx(divider_1.Divider, {}),
+      jsx_runtime_1.jsxs(overflow_1.Overflow, {
+        padding: 4,
+        style: overflowTestPageStyles.dynamicAddRemoval,
+        itemIDs: ids,
+        children: [
+          ids.map((id) => {
+            return jsx_runtime_1.jsx(
+              overflow_1.OverflowItem,
+              { overflowID: id, children: jsx_runtime_1.jsx(button_1.ButtonV1, { onClick: () => removeItem(id), children: 'Item ' + id }) },
+              id,
+            );
+          }),
+          jsx_runtime_1.jsx(OverflowMenu, { onItemPress: removeItem }),
+        ],
+      }),
+    ],
+  });
+}
+const OverflowTest = () => {
+  const description =
+    'The `Overflow` and `OverflowItem` components, based off the same Fluent web v9 components of the same name, are low level utilities that enable users to create overflow experiences with any component. These components will detect and hide overflowing elements on screen and manage the overflow state.';
+  return jsx_runtime_1.jsx(Test_1.Test, {
+    name: 'Overflow Test',
+    description: description,
+    sections: [
+      {
+        name: 'Overflow',
+        component: OverflowMainTest,
+        testID: e2e_testing_1.OVERFLOW_TESTPAGE,
+      },
+      {
+        name: 'Overflow TabList',
+        component: OverflowTabTest,
+      },
+      {
+        name: 'Overflow Dynamic Add/Removal of Items',
+        component: OverflowDynamicAddRemovalTest,
+      },
+      {
+        name: 'Overflow Variable Width',
+        component: OverflowDifferentWidthTest,
+      },
+    ],
+    e2eSections: [
+      {
+        name: 'Overflow E2E Section',
+        component: OverflowE2ETest_1.E2EOverflowTest,
+      },
+    ],
+    spec: 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Overflow/SPEC.md',
+    status: {
+      win32Status: 'Experimental',
+      uwpStatus: 'Backlog',
+      iosStatus: 'Backlog',
+      macosStatus: 'Experimental',
+      androidStatus: 'Backlog',
+    },
+  });
+};
+exports.OverflowTest = OverflowTest;
+//# sourceMappingURL=OverflowTest.js.map

package/lib-commonjs/TestComponents/Overflow/OverflowTest.js.map

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

package/lib-commonjs/TestComponents/Persona/CustomizeUsage.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const CustomizeUsage: React.FunctionComponent;
+//# sourceMappingURL=CustomizeUsage.d.ts.map

package/lib-commonjs/TestComponents/Persona/CustomizeUsage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/CustomizeUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBA2FlC,CAAC"}

package/lib-commonjs/TestComponents/Persona/CustomizeUsage.js

@@ -0,0 +1,187 @@
+'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 });
+exports.CustomizeUsage = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const React = __importStar(require('react'));
+const react_native_1 = require('react-native');
+const react_native_2 = require('@fluentui/react-native');
+const theme_types_1 = require('@fluentui-react-native/theme-types');
+const themed_stylesheet_1 = require('@fluentui-react-native/themed-stylesheet');
+const styles_1 = require('./styles');
+const Slider_1 = require('../Common/Slider');
+const styles_2 = require('../Common/styles');
+const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((t) => {
+  return { textbox: { ...styles_2.commonTestStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+const CustomizeUsage = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [coinColor, setCoinColor] = React.useState();
+  const [textColor, setTextColor] = React.useState();
+  const [textSize, setTextSize] = React.useState(23);
+  const [secondarySize, setSecondarySize] = React.useState(20);
+  const [tertiarySize, setTertiarySize] = React.useState(17);
+  const [optionalSize, setOptionalSize] = React.useState(14);
+  const [horizontalGap, setHorizontalGap] = React.useState();
+  const [verticalGap, setVerticalGap] = React.useState();
+  const theme = (0, theme_types_1.useTheme)();
+  const textBoxBorderStyle = getThemedStyles(theme);
+  const CustomizedPersona = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      textFont: { fontSize: textSize },
+      secondaryFont: { fontSize: secondarySize },
+      tertiaryFont: { fontSize: tertiarySize },
+      optionalFont: { fontSize: optionalSize },
+      horizontalGap: horizontalGap,
+      verticalGap: verticalGap,
+    };
+    return react_native_2.Persona.customize({ tokens });
+  }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
+  return jsx_runtime_1.jsxs(react_native_1.View, {
+    style: styles_2.commonTestStyles.root,
+    children: [
+      jsx_runtime_1.jsxs(react_native_1.View, {
+        style: styles_2.commonTestStyles.settings,
+        children: [
+          jsx_runtime_1.jsxs(react_native_1.View, {
+            style: styles_2.commonTestStyles.switch,
+            children: [
+              jsx_runtime_1.jsx(react_native_1.Text, { children: 'Show image' }),
+              jsx_runtime_1.jsx(react_native_1.Switch, { value: showImage, onValueChange: setShowImage }),
+            ],
+          }),
+          jsx_runtime_1.jsx(react_native_1.TextInput, {
+            accessibilityLabel: 'Background color',
+            style: textBoxBorderStyle.textbox,
+            placeholder: 'Background color',
+            blurOnSubmit: true,
+            onSubmitEditing: (e) => {
+              setCoinColor(e.nativeEvent.text);
+            },
+          }),
+          jsx_runtime_1.jsx(react_native_1.TextInput, {
+            accessibilityLabel: 'Initials text color',
+            style: textBoxBorderStyle.textbox,
+            placeholder: 'Initials text color',
+            blurOnSubmit: true,
+            onSubmitEditing: (e) => {
+              setTextColor(e.nativeEvent.text);
+            },
+          }),
+          jsx_runtime_1.jsx(react_native_1.Text, { children: 'Primary text size' }),
+          jsx_runtime_1.jsx(Slider_1.Slider, {
+            maximum: 50,
+            minimum: 5,
+            initialValue: textSize,
+            style: styles_2.commonTestStyles.vmargin,
+            onChange: setTextSize,
+          }),
+          jsx_runtime_1.jsx(react_native_1.Text, { children: 'Secondary text size' }),
+          jsx_runtime_1.jsx(Slider_1.Slider, {
+            maximum: 50,
+            minimum: 5,
+            initialValue: secondarySize,
+            style: styles_2.commonTestStyles.vmargin,
+            onChange: setSecondarySize,
+          }),
+          jsx_runtime_1.jsx(react_native_1.Text, { children: 'Tertiary text size' }),
+          jsx_runtime_1.jsx(Slider_1.Slider, {
+            maximum: 50,
+            minimum: 5,
+            initialValue: tertiarySize,
+            style: styles_2.commonTestStyles.vmargin,
+            onChange: setTertiarySize,
+          }),
+          jsx_runtime_1.jsx(react_native_1.Text, { children: 'Optional text size' }),
+          jsx_runtime_1.jsx(Slider_1.Slider, {
+            maximum: 50,
+            minimum: 5,
+            initialValue: optionalSize,
+            style: styles_2.commonTestStyles.vmargin,
+            onChange: setOptionalSize,
+          }),
+          jsx_runtime_1.jsx(react_native_1.Text, { children: 'Horizontal gap' }),
+          jsx_runtime_1.jsx(Slider_1.Slider, {
+            maximum: 100,
+            initialValue: 5,
+            minimum: 0,
+            style: styles_2.commonTestStyles.vmargin,
+            onChange: setHorizontalGap,
+          }),
+          jsx_runtime_1.jsx(react_native_1.Text, { children: 'Vertical gap' }),
+          jsx_runtime_1.jsx(Slider_1.Slider, {
+            maximum: 20,
+            initialValue: 5,
+            minimum: 0,
+            style: styles_2.commonTestStyles.vmargin,
+            onChange: setVerticalGap,
+          }),
+        ],
+      }),
+      jsx_runtime_1.jsx(CustomizedPersona, {
+        initials: 'MJ',
+        size: 'size72',
+        text: 'Michael Jackson',
+        secondaryText: 'Pop singer',
+        tertiaryText: 'King of pop',
+        optionalText: 'Indiana',
+        imageDescription: 'Legendary pop singer',
+        presence: 'offline',
+        imageUrl: showImage ? styles_1.michaelImageUrl : undefined,
+      }),
+    ],
+  });
+};
+exports.CustomizeUsage = CustomizeUsage;
+//# sourceMappingURL=CustomizeUsage.js.map

package/lib-commonjs/TestComponents/Persona/CustomizeUsage.js.map

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

package/lib-commonjs/TestComponents/Persona/PersonaTest.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const PersonaTest: React.FunctionComponent;
+//# sourceMappingURL=PersonaTest.d.ts.map

package/lib-commonjs/TestComponents/Persona/PersonaTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/PersonaTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAa/B,CAAC"}

package/lib-commonjs/TestComponents/Persona/PersonaTest.js

@@ -0,0 +1,33 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.PersonaTest = void 0;
+const jsx_runtime_1 = require('react/jsx-runtime');
+const e2e_testing_1 = require('@fluentui-react-native/e2e-testing');
+const CustomizeUsage_1 = require('./CustomizeUsage');
+const StandardUsage_1 = require('./StandardUsage');
+const Test_1 = require('../Test');
+const personaSections = [
+  {
+    name: 'Standard Usage',
+    testID: e2e_testing_1.PERSONA_TESTPAGE,
+    component: StandardUsage_1.StandardUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage_1.CustomizeUsage,
+  },
+];
+const PersonaTest = () => {
+  const status = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+  const description =
+    "Personas are used for rendering an individual's avatar and presence. Persona renders a PersonaCoin along with descriptive text components.";
+  return jsx_runtime_1.jsx(Test_1.Test, { name: 'Persona Test', description: description, sections: personaSections, status: status });
+};
+exports.PersonaTest = PersonaTest;
+//# sourceMappingURL=PersonaTest.js.map

package/lib-commonjs/TestComponents/Persona/PersonaTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Persona/PersonaTest.tsx"],"names":[],"mappings":";;;;AAEA,oEAAsE;AAEtE,qDAAkD;AAClD,mDAAgD;AAEhD,kCAA+B;AAE/B,MAAM,eAAe,GAAkB;IACrC;QACE,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,8BAAgB;QACxB,SAAS,EAAE,6BAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,+BAAc;KAC1B;CACF,CAAC;AAEK,MAAM,WAAW,GAA4B,GAAG,EAAE,CAAC;IACxD,MAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,YAAY;QACzB,SAAS,EAAE,YAAY;QACvB,SAAS,EAAE,YAAY;QACvB,WAAW,EAAE,YAAY;QACzB,aAAa,EAAE,YAAY;KAC5B,CAAC;IAEF,MAAM,WAAW,GACf,4IAA4I,CAAC;IAE/I,OAAO,kBAAC,WAAI,IAAC,IAAI,EAAC,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAAA,CAC1G,CAAC;AAbW,QAAA,WAAW,GAAX,WAAW,CAatB"}

package/lib-commonjs/TestComponents/Persona/StandardUsage.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const StandardUsage: React.FunctionComponent;
+//# sourceMappingURL=StandardUsage.d.ts.map

package/lib-commonjs/TestComponents/Persona/StandardUsage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardUsage.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/StandardUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAuCjC,CAAC"}