@fluentui-react-native/tester-core 0.1.1

package/lib/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { View } from 'react-native';
+import {
+  RADIOGROUPV1_TEST_COMPONENT,
+  RADIOGROUPV1_NO_A11Y_LABEL_COMPONENT,
+  RADIOGROUPV1_TEST_COMPONENT_LABEL,
+  RADIOGROUPV1_ACCESSIBILITY_LABEL,
+  FIRST_RADIO,
+  SECOND_RADIO,
+  THIRD_RADIO,
+  FOURTH_RADIO,
+  FIFTH_RADIO,
+  FIRST_RADIO_ACCESSIBILITY_LABEL,
+  SECOND_RADIO_LABEL,
+} from '@fluentui-react-native/e2e-testing';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+export const RadioGroupV1E2ETest = () => {
+  return _jsx(View, {
+    children: _jsxs(Stack, {
+      style: stackStyle,
+      children: [
+        _jsxs(RadioGroup, {
+          label: 'RadioGroup for E2E Testing - Ally Label Set',
+          accessibilityLabel: RADIOGROUPV1_ACCESSIBILITY_LABEL,
+          ...testProps(RADIOGROUPV1_TEST_COMPONENT),
+          children: [
+            _jsx(Radio, { label: 'Option A', value: 'A', accessibilityLabel: FIRST_RADIO_ACCESSIBILITY_LABEL, ...testProps(FIRST_RADIO) }),
+            _jsx(Radio, { label: SECOND_RADIO_LABEL, value: 'B', ...testProps(SECOND_RADIO) }),
+            _jsx(Radio, { label: 'Option C (disabled)', value: 'C', disabled: true, ...testProps(THIRD_RADIO) }),
+            _jsx(Radio, { label: 'Option D', value: 'C', ...testProps(FOURTH_RADIO) }),
+          ],
+        }),
+        _jsxs(RadioGroup, {
+          label: RADIOGROUPV1_TEST_COMPONENT_LABEL,
+          required: true,
+          ...testProps(RADIOGROUPV1_NO_A11Y_LABEL_COMPONENT),
+          children: [
+            _jsx(Radio, { label: 'Option W', value: 'W', ...testProps(FIFTH_RADIO) }),
+            _jsx(Radio, { label: 'Option X', value: 'X' }),
+            _jsx(Radio, { label: 'Option Y (disabled)', value: 'C', disabled: true }),
+            _jsx(Radio, { label: 'Option Z', value: 'Z' }),
+          ],
+        }),
+      ],
+    }),
+  });
+};
+//# sourceMappingURL=RadioGroupV1E2ETest.js.map

package/lib/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupV1E2ETest.js","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EACL,2BAA2B,EAC3B,oCAAoC,EACpC,iCAAiC,EACjC,gCAAgC,EAChC,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,+BAA+B,EAC/B,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,IAAI,UAAU,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAA4B,GAAG,EAAE,CAAC;IAChE,OAAO,CACL,KAAC,IAAI,cACH,MAAC,KAAK,IAAC,KAAK,EAAE,UAAU;gBACtB,MAAC,UAAU,IACT,KAAK,EAAC,6CAA6C,EACnD,kBAAkB,EAAE,gCAAgC,KAEhD,SAAS,CAAC,2BAA2B,CAAC;wBAE1C,KAAC,KAAK,IACJ,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,GAAG,EACT,kBAAkB,EAAE,+BAA+B,KAE/C,SAAS,CAAC,WAAW,CAAC,GAC1B,EACF,KAAC,KAAK,IACJ,KAAK,EAAE,kBAAkB,EACzB,KAAK,EAAC,GAAG,KAEL,SAAS,CAAC,YAAY,CAAC,GAC3B,EACF,KAAC,KAAK,IACJ,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAC,GAAG,EACT,QAAQ,EAAE,IAAI,KAEV,SAAS,CAAC,WAAW,CAAC,GAC1B,EACF,KAAC,KAAK,IACJ,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,GAAG,KAEL,SAAS,CAAC,YAAY,CAAC,GAC3B;wBACS,EACb,MAAC,UAAU,IACT,KAAK,EAAE,iCAAiC,EACxC,QAAQ,WAEJ,SAAS,CAAC,oCAAoC,CAAC;wBAEnD,KAAC,KAAK,IACJ,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,GAAG,KAEL,SAAS,CAAC,WAAW,CAAC,GAC1B,EACF,KAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,GAAG,GAAG,EACpC,KAAC,KAAK,IAAC,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,IAAI,GAAI,EAC/D,KAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,GAAG,GAAG;wBACzB;gBACP,GACH,CACR,CAAC;AAAA,CACH,CAAC"}

package/lib/TestComponents/RadioGroupV1/RadioGroupV1Test.d.ts

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

package/lib/TestComponents/RadioGroupV1/RadioGroupV1Test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupV1Test.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqE/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAwBpC,CAAC"}

package/lib/TestComponents/RadioGroupV1/RadioGroupV1Test.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from 'react/jsx-runtime';
+import { Platform } from 'react-native';
+import { RADIOGROUPV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { CustomizedRadioGroup } from './CustomizedRadioGroup';
+import { DefaultRadioGroup } from './DefaultRadioGroup';
+import { DisabledRadioGroup } from './DisabledRadioGroup';
+import { HorizontalRadioGroup } from './HorizontalRadioGroup';
+import { RadioGroupV1E2ETest } from './RadioGroupV1E2ETest';
+import { RequiredRadioGroup } from './RequiredRadioGroup';
+import { SubtextRadioGroup } from './SubtextRadioGroup';
+import { Test } from '../Test';
+const radioGroupV1Sections = [
+  {
+    name: 'Default RadioGroup Usage',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: DefaultRadioGroup,
+  },
+  {
+    name: 'Disabled RadioGroup',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: DisabledRadioGroup,
+  },
+  {
+    name: 'Required RadioGroup',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: RequiredRadioGroup,
+  },
+  ...Platform.select({
+    android: [null],
+    ios: [null],
+    native: [
+      {
+        name: 'RadioGroup with Label Subtext',
+        testID: RADIOGROUPV1_TESTPAGE,
+        component: SubtextRadioGroup,
+      },
+    ],
+    default: [
+      {
+        name: 'RadioGroup with Label Subtext',
+        testID: RADIOGROUPV1_TESTPAGE,
+        component: SubtextRadioGroup,
+      },
+      {
+        name: 'Other Layouts',
+        testID: RADIOGROUPV1_TESTPAGE,
+        component: HorizontalRadioGroup,
+      },
+      {
+        name: 'Customized RadioGroup Usage',
+        testID: RADIOGROUPV1_TESTPAGE,
+        component: CustomizedRadioGroup,
+      },
+    ],
+  }),
+];
+const e2eSections = [
+  {
+    name: 'RadioGroup for E2E Testing',
+    testID: RADIOGROUPV1_TESTPAGE,
+    component: RadioGroupV1E2ETest,
+  },
+];
+export const RadioGroupV1Test = () => {
+  const status = {
+    win32Status: 'Production',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+  const description =
+    'RadioGroup lets users select a single option from two or more choices. Each option is represented by one Radio; a user can select only one Radio in a RadioGroup.';
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/RadioGroup/SPEC.md';
+  return _jsx(Test, {
+    name: 'RadioGroupV1 Test',
+    description: description,
+    spec: spec,
+    sections: radioGroupV1Sections,
+    status: status,
+    e2eSections: e2eSections,
+  });
+};
+//# sourceMappingURL=RadioGroupV1Test.js.map

package/lib/TestComponents/RadioGroupV1/RadioGroupV1Test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupV1Test.js","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAE3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,oBAAoB,GAAkB;IAC1C;QACE,IAAI,EAAE,0BAA0B;QAChC,MAAM,EAAE,qBAAqB;QAC7B,SAAS,EAAE,iBAAiB;KAC7B;IACD;QACE,IAAI,EAAE,qBAAqB;QAC3B,MAAM,EAAE,qBAAqB;QAC7B,SAAS,EAAE,kBAAkB;KAC9B;IACD;QACE,IAAI,EAAE,qBAAqB;QAC3B,MAAM,EAAE,qBAAqB;QAC7B,SAAS,EAAE,kBAAkB;KAC9B;IACD,GAAG,QAAQ,CAAC,MAAM,CAAC;QACjB,OAAO,EAAE,CAAC,IAAI,CAAC;QACf,GAAG,EAAE,CAAC,IAAI,CAAC;QACX,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,+BAA+B;gBACrC,MAAM,EAAE,qBAAqB;gBAC7B,SAAS,EAAE,iBAAiB;aAC7B;SACF;QACD,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,+BAA+B;gBACrC,MAAM,EAAE,qBAAqB;gBAC7B,SAAS,EAAE,iBAAiB;aAC7B;YACD;gBACE,IAAI,EAAE,eAAe;gBACrB,MAAM,EAAE,qBAAqB;gBAC7B,SAAS,EAAE,oBAAoB;aAChC;YACD;gBACE,IAAI,EAAE,6BAA6B;gBACnC,MAAM,EAAE,qBAAqB;gBAC7B,SAAS,EAAE,oBAAoB;aAChC;SACF;KACF,CAAC;CACH,CAAC;AAEF,MAAM,WAAW,GAAkB;IACjC;QACE,IAAI,EAAE,4BAA4B;QAClC,MAAM,EAAE,qBAAqB;QAC7B,SAAS,EAAE,mBAAmB;KAC/B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA4B,GAAG,EAAE,CAAC;IAC7D,MAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,YAAY;QACzB,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,YAAY;QACvB,WAAW,EAAE,YAAY;QACzB,aAAa,EAAE,YAAY;KAC5B,CAAC;IAEF,MAAM,WAAW,GACf,mKAAmK,CAAC;IAEtK,MAAM,IAAI,GAAG,uGAAuG,CAAC;IAErH,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,mBAAmB,EACxB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,oBAAoB,EAC9B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AAAA,CACH,CAAC"}

package/lib/TestComponents/RadioGroupV1/RequiredRadioGroup.d.ts

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

package/lib/TestComponents/RadioGroupV1/RequiredRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequiredRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/RequiredRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,iBAgBtC,CAAC"}

package/lib/TestComponents/RadioGroupV1/RequiredRadioGroup.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+export const RequiredRadioGroup = () => {
+  // Client's example onChange function
+  const onChange = React.useCallback((key) => {
+    console.log(key);
+  }, []);
+  return _jsx(View, {
+    children: _jsxs(RadioGroup, {
+      required: true,
+      label: 'Required RadioGroup',
+      defaultValue: 'X',
+      onChange: onChange,
+      children: [
+        _jsx(Radio, { label: 'Option W', value: 'W', accessibilityLabel: 'Test Accessibility Label' }),
+        _jsx(Radio, { label: 'Option X', value: 'X' }),
+        _jsx(Radio, { label: 'Option Y', value: 'C' }),
+        _jsx(Radio, { label: 'Option Z', value: 'Z' }),
+      ],
+    }),
+  });
+};
+//# sourceMappingURL=RequiredRadioGroup.js.map

package/lib/TestComponents/RadioGroupV1/RequiredRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequiredRadioGroup.js","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/RequiredRadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,YAAY,IAAI,UAAU,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAEvF,MAAM,CAAC,MAAM,kBAAkB,GAA4B,GAAG,EAAE,CAAC;IAC/D,qCAAqC;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAW,EAAE,EAAE,CAAC;QAClD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAAA,CAClB,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,IAAI,cACH,MAAC,UAAU,IAAC,QAAQ,QAAC,KAAK,EAAC,qBAAqB,EAAC,YAAY,EAAC,GAAG,EAAC,QAAQ,EAAE,QAAQ;gBAClF,KAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,GAAG,EAAC,kBAAkB,EAAC,0BAA0B,GAAG,EAClF,KAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,GAAG,GAAG,EACpC,KAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,GAAG,GAAG,EACpC,KAAC,KAAK,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,GAAG,GAAG;gBACzB,GACR,CACR,CAAC;AAAA,CACH,CAAC"}

package/lib/TestComponents/RadioGroupV1/SubtextRadioGroup.d.ts

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

package/lib/TestComponents/RadioGroupV1/SubtextRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubtextRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/SubtextRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAgBrC,CAAC"}

package/lib/TestComponents/RadioGroupV1/SubtextRadioGroup.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { View } from 'react-native';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+export const SubtextRadioGroup = () => {
+  // Client's example onChange function
+  const onChange = React.useCallback((key) => {
+    console.log(key);
+  }, []);
+  return _jsx(View, {
+    children: _jsxs(RadioGroup, {
+      label: 'Select a fruit:',
+      defaultValue: 'X',
+      onChange: onChange,
+      children: [
+        _jsx(Radio, { label: 'Apple', subtext: 'This is a type of fruit', value: 'W' }),
+        _jsx(Radio, { label: 'Pear', subtext: 'This is a type of fruit', value: 'X' }),
+        _jsx(Radio, { label: 'Banana', subtext: 'This is a type of fruit', value: 'C' }),
+        _jsx(Radio, { label: 'Tomato', subtext: 'This is a type of fruit', value: 'Z' }),
+      ],
+    }),
+  });
+};
+//# sourceMappingURL=SubtextRadioGroup.js.map

package/lib/TestComponents/RadioGroupV1/SubtextRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubtextRadioGroup.js","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/SubtextRadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,YAAY,IAAI,UAAU,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAEvF,MAAM,CAAC,MAAM,iBAAiB,GAA4B,GAAG,EAAE,CAAC;IAC9D,qCAAqC;IACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAW,EAAE,EAAE,CAAC;QAClD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAAA,CAClB,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,IAAI,cACH,MAAC,UAAU,IAAC,KAAK,EAAC,iBAAiB,EAAC,YAAY,EAAC,GAAG,EAAC,QAAQ,EAAE,QAAQ;gBACrE,KAAC,KAAK,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,yBAAyB,EAAC,KAAK,EAAC,GAAG,GAAG,EACnE,KAAC,KAAK,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,yBAAyB,EAAC,KAAK,EAAC,GAAG,GAAG,EAClE,KAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,yBAAyB,EAAC,KAAK,EAAC,GAAG,GAAG,EACpE,KAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,yBAAyB,EAAC,KAAK,EAAC,GAAG,GAAG;gBACzD,GACR,CACR,CAAC;AAAA,CACH,CAAC"}

package/lib/TestComponents/RadioGroupV1/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RadioGroupV1Test';
+//# sourceMappingURL=index.d.ts.map

package/lib/TestComponents/RadioGroupV1/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/lib/TestComponents/RadioGroupV1/index.js

@@ -0,0 +1,2 @@
+export * from './RadioGroupV1Test';
+//# sourceMappingURL=index.js.map

package/lib/TestComponents/RadioGroupV1/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TestComponents/RadioGroupV1/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/lib/TestComponents/Separator/SeparatorTest.android.d.ts

@@ -0,0 +1,4 @@
+import { SeparatorTest } from './SeparatorTest.mobile';
+export { SeparatorTest } from './SeparatorTest.mobile';
+export default SeparatorTest;
+//# sourceMappingURL=SeparatorTest.android.d.ts.map

package/lib/TestComponents/Separator/SeparatorTest.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTest.android.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Separator/SeparatorTest.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,eAAe,aAAa,CAAC"}

package/lib/TestComponents/Separator/SeparatorTest.android.js

@@ -0,0 +1,4 @@
+import { SeparatorTest } from './SeparatorTest.mobile';
+export { SeparatorTest } from './SeparatorTest.mobile';
+export default SeparatorTest;
+//# sourceMappingURL=SeparatorTest.android.js.map

package/lib/TestComponents/Separator/SeparatorTest.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTest.android.js","sourceRoot":"","sources":["../../../src/TestComponents/Separator/SeparatorTest.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,eAAe,aAAa,CAAC"}

package/lib/TestComponents/Separator/SeparatorTest.d.ts

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

package/lib/TestComponents/Separator/SeparatorTest.d.ts.map

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

package/lib/TestComponents/Separator/SeparatorTest.ios.d.ts

@@ -0,0 +1,4 @@
+import { SeparatorTest } from './SeparatorTest.mobile';
+export { SeparatorTest } from './SeparatorTest.mobile';
+export default SeparatorTest;
+//# sourceMappingURL=SeparatorTest.ios.d.ts.map

package/lib/TestComponents/Separator/SeparatorTest.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTest.ios.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Separator/SeparatorTest.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,eAAe,aAAa,CAAC"}

package/lib/TestComponents/Separator/SeparatorTest.ios.js

@@ -0,0 +1,4 @@
+import { SeparatorTest } from './SeparatorTest.mobile';
+export { SeparatorTest } from './SeparatorTest.mobile';
+export default SeparatorTest;
+//# sourceMappingURL=SeparatorTest.ios.js.map

package/lib/TestComponents/Separator/SeparatorTest.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTest.ios.js","sourceRoot":"","sources":["../../../src/TestComponents/Separator/SeparatorTest.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,eAAe,aAAa,CAAC"}

package/lib/TestComponents/Separator/SeparatorTest.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { ButtonV1 } from '@fluentui-react-native/button';
+import { SEPARATOR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Separator } from '@fluentui-react-native/separator';
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { stackStyle, separatorStackStyle } from '../Common/styles';
+import { Test } from '../Test';
+const BlueSeparator = Separator.customize({ color: 'blue' });
+const RedSeparator = Separator.customize({ color: 'red' });
+const SeparatorMainTest = () => {
+  return _jsxs(Stack, {
+    style: stackStyle,
+    gap: 5,
+    children: [
+      _jsxs(Stack, {
+        gap: 4,
+        style: separatorStackStyle,
+        children: [
+          _jsx(ButtonV1, { children: 'Button1' }),
+          _jsx(BlueSeparator, { vertical: true }),
+          _jsx(ButtonV1, { children: 'Button2' }),
+          _jsx(RedSeparator, { vertical: true }),
+          _jsx(ButtonV1, { children: 'Button3 ' }),
+          _jsx(Separator, {}),
+        ],
+      }),
+      _jsx(Text, { children: 'This is a text element' }),
+      _jsx(Separator, {}),
+      _jsx(ButtonV1, { children: 'This button has longer text' }),
+    ],
+  });
+};
+const separatorSections = [
+  {
+    name: 'Basic Seperator',
+    testID: SEPARATOR_TESTPAGE,
+    component: SeparatorMainTest,
+  },
+];
+export const SeparatorTest = () => {
+  const status = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+  const description =
+    "A separator visually separates content into groups.\n\nYou can render content in the separator by specifying the component's children. The component's children can be plain text or a component like Icon. The content is center-aligned by default.";
+  return _jsx(Test, { name: 'Separator Test', description: description, sections: separatorSections, status: status });
+};
+//# sourceMappingURL=SeparatorTest.js.map

package/lib/TestComponents/Separator/SeparatorTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Separator/SeparatorTest.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,aAAa,GAAG,SAAS,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;AAC7D,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AAE3D,MAAM,iBAAiB,GAA4B,GAAG,EAAE,CAAC;IACvD,OAAO,CACL,MAAC,KAAK,IAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,MAAC,KAAK,IAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,mBAAmB;oBACvC,KAAC,QAAQ,0BAAmB,EAC5B,KAAC,aAAa,IAAC,QAAQ,SAAG,EAC1B,KAAC,QAAQ,0BAAmB,EAC5B,KAAC,YAAY,IAAC,QAAQ,SAAG,EACzB,KAAC,QAAQ,2BAAoB,EAC7B,KAAC,SAAS,KAAG;oBACP,EACR,KAAC,IAAI,yCAA8B,EACnC,KAAC,SAAS,KAAG,EACb,KAAC,QAAQ,8CAAuC;YAC1C,CACT,CAAC;AAAA,CACH,CAAC;AAEF,MAAM,iBAAiB,GAAkB;IACvC;QACE,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,kBAAkB;QAC1B,SAAS,EAAE,iBAAiB;KAC7B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA4B,GAAG,EAAE,CAAC;IAC1D,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,uPAAuP,CAAC;IAE1P,OAAO,KAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAAA,CAC9G,CAAC"}

package/lib/TestComponents/Separator/SeparatorTest.mobile.d.ts

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

package/lib/TestComponents/Separator/SeparatorTest.mobile.d.ts.map

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

package/lib/TestComponents/Separator/SeparatorTest.mobile.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { SEPARATOR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Separator } from '@fluentui-react-native/separator';
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { commonTestStyles, mobileStyles } from '../Common/styles';
+import { Test } from '../Test';
+const CustomisedText = Text.customize({
+  textAlign: 'right',
+  fontSize: 'caption',
+});
+const SeparatorBasicUsage = () => {
+  return _jsxs(Stack, {
+    style: commonTestStyles.section,
+    gap: 5,
+    children: [
+      _jsx(Separator, { insetSpacing: 0 }),
+      _jsx(CustomisedText, { children: 'Inset : 0' }),
+      _jsx(Separator, { insetSpacing: 16 }),
+      _jsx(CustomisedText, { children: 'Inset : 16' }),
+      _jsx(Separator, { insetSpacing: 56 }),
+      _jsx(CustomisedText, { children: 'Inset : 56' }),
+      _jsx(Separator, { insetSpacing: 68 }),
+      _jsx(CustomisedText, { children: 'Inset : 68' }),
+      _jsx(Separator, { insetSpacing: 72 }),
+      _jsx(CustomisedText, { children: 'Inset : 72' }),
+      _jsx(Separator, { insetSpacing: 108 }),
+      _jsx(CustomisedText, { children: 'Inset : 108' }),
+    ],
+  });
+};
+const RedSeparator = Separator.customize({ color: 'red' });
+const BlueSeparatorWithCustomWidth = Separator.customize({ color: 'blue', separatorWidth: 10 });
+const SeparatorCustomisedUsage = () => {
+  return _jsxs(Stack, {
+    style: mobileStyles.testSection,
+    gap: 5,
+    children: [
+      _jsx(RedSeparator, {}),
+      _jsx(CustomisedText, { children: 'Customised Color Seperator' }),
+      _jsx(BlueSeparatorWithCustomWidth, { insetSpacing: 16 }),
+      _jsx(CustomisedText, { children: 'Customised Color and Width Seperator' }),
+    ],
+  });
+};
+const separatorSections = [
+  {
+    name: 'Basic Mobile Seperator',
+    testID: SEPARATOR_TESTPAGE,
+    component: SeparatorBasicUsage,
+  },
+  {
+    name: 'Customised Mobile Seperator',
+    testID: SEPARATOR_TESTPAGE,
+    component: SeparatorCustomisedUsage,
+  },
+];
+export const SeparatorTest = () => {
+  const status = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Beta',
+    androidStatus: 'Experimental',
+  };
+  const description =
+    "A separator visually separates content into groups.\n\nYou can render content in the separator by specifying the component's children. The component's children can be plain text or a component like Icon. The content is center-aligned by default.";
+  return _jsx(Test, { name: 'Separator Test', description: description, sections: separatorSections, status: status });
+};
+//# sourceMappingURL=SeparatorTest.mobile.js.map

package/lib/TestComponents/Separator/SeparatorTest.mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorTest.mobile.js","sourceRoot":"","sources":["../../../src/TestComponents/Separator/SeparatorTest.mobile.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAA4B,GAAG,EAAE,CAAC;IACzD,OAAO,CACL,MAAC,KAAK,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC;YAC5C,KAAC,SAAS,IAAC,YAAY,EAAE,CAAC,GAAI,EAC9B,KAAC,cAAc,4BAA2B,EAE1C,KAAC,SAAS,IAAC,YAAY,EAAE,EAAE,GAAI,EAC/B,KAAC,cAAc,6BAA4B,EAE3C,KAAC,SAAS,IAAC,YAAY,EAAE,EAAE,GAAI,EAC/B,KAAC,cAAc,6BAA4B,EAE3C,KAAC,SAAS,IAAC,YAAY,EAAE,EAAE,GAAI,EAC/B,KAAC,cAAc,6BAA4B,EAE3C,KAAC,SAAS,IAAC,YAAY,EAAE,EAAE,GAAI,EAC/B,KAAC,cAAc,6BAA4B,EAE3C,KAAC,SAAS,IAAC,YAAY,EAAE,GAAG,GAAI,EAChC,KAAC,cAAc,8BAA6B;YACtC,CACT,CAAC;AAAA,CACH,CAAC;AAEF,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AAC3D,MAAM,4BAA4B,GAAG,SAAS,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;AAEhG,MAAM,wBAAwB,GAA4B,GAAG,EAAE,CAAC;IAC9D,OAAO,CACL,MAAC,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC;YAC5C,KAAC,YAAY,KAAG,EAChB,KAAC,cAAc,6CAA4C,EAC3D,KAAC,4BAA4B,IAAC,YAAY,EAAE,EAAE,GAAI,EAClD,KAAC,cAAc,uDAAsD;YAC/D,CACT,CAAC;AAAA,CACH,CAAC;AAEF,MAAM,iBAAiB,GAAkB;IACvC;QACE,IAAI,EAAE,wBAAwB;QAC9B,MAAM,EAAE,kBAAkB;QAC1B,SAAS,EAAE,mBAAmB;KAC/B;IACD;QACE,IAAI,EAAE,6BAA6B;QACnC,MAAM,EAAE,kBAAkB;QAC1B,SAAS,EAAE,wBAAwB;KACpC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA4B,GAAG,EAAE,CAAC;IAC1D,MAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,cAAc;KAC9B,CAAC;IAEF,MAAM,WAAW,GACf,uPAAuP,CAAC;IAE1P,OAAO,KAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAAA,CAC9G,CAAC"}

package/lib/TestComponents/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SeparatorTest';
+//# sourceMappingURL=index.d.ts.map

package/lib/TestComponents/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib/TestComponents/Separator/index.js

@@ -0,0 +1,2 @@
+export * from './SeparatorTest';
+//# sourceMappingURL=index.js.map

package/lib/TestComponents/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TestComponents/Separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib/TestComponents/Shadow/ShadowButtonTestSection.d.ts

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

package/lib/TestComponents/Shadow/ShadowButtonTestSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAsC3C,CAAC"}

package/lib/TestComponents/Shadow/ShadowButtonTestSection.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { Platform, View, StyleSheet } from 'react-native';
+import { FAB, Text } from '@fluentui/react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Shadow } from '@fluentui-react-native/experimental-shadow';
+import { useFluentTheme } from '@fluentui-react-native/framework';
+import { shadowTestPageStyles } from './ShadowTestPageStyles';
+import { iconProps } from '../Common/iconExamples';
+import { stackStyle } from '../Common/styles';
+const styles = StyleSheet.create({ marginBetweenComponentsWithShadow: { margin: 10 } });
+const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
+const CustomFABShadow64 = FAB.customize({
+  shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
+});
+const platformSupportsShadow = Platform.OS !== 'android';
+const platformSupportsFAB = Platform.OS === 'ios' || Platform.OS === 'android';
+export const ShadowButtonTestSection = () => {
+  const t = useFluentTheme();
+  if (platformSupportsShadow) {
+    return _jsxs(View, {
+      style: shadowTestPageStyles(t).backgroundColor,
+      children: [
+        platformSupportsShadow &&
+          platformSupportsFAB &&
+          _jsxs(View, {
+            style: stackStyle,
+            children: [
+              _jsx(FAB, { icon: iconProps, style: styles.marginBetweenComponentsWithShadow, children: 'FAB with default shadow' }),
+              _jsx(CustomFABShadow64, {
+                icon: iconProps,
+                style: styles.marginBetweenComponentsWithShadow,
+                children: 'Custom FAB with shadow64',
+              }),
+              _jsx(CustomFABNoShadow, {
+                icon: iconProps,
+                style: styles.marginBetweenComponentsWithShadow,
+                children: 'Custom FAB with no shadow',
+              }),
+            ],
+          }),
+        platformSupportsShadow &&
+          _jsxs(View, {
+            style: stackStyle,
+            children: [
+              _jsx(Shadow, {
+                shadowToken: t.shadows['shadow16'],
+                children: _jsx(Button, { style: styles.marginBetweenComponentsWithShadow, children: 'Button with shadow16' }),
+              }),
+              _jsx(View, {
+                children: _jsx(Button, { style: styles.marginBetweenComponentsWithShadow, children: 'Button without shadow' }),
+              }),
+            ],
+          }),
+      ],
+    });
+  } else {
+    return _jsx(View, { style: stackStyle, children: _jsx(Text, { children: 'Shadows not implemented on this platform at this time' }) });
+  }
+};
+//# sourceMappingURL=ShadowButtonTestSection.js.map

package/lib/TestComponents/Shadow/ShadowButtonTestSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,QAAQ,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,EAAE,iCAAiC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAExF,MAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACpE,MAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;CAC1H,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,CAAC;AACzD,MAAM,mBAAmB,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,CAAC;AAE/E,MAAM,CAAC,MAAM,uBAAuB,GAA4B,GAAG,EAAE,CAAC;IACpE,MAAM,CAAC,GAAG,cAAc,EAAE,CAAC;IAE3B,IAAI,sBAAsB,EAAE,CAAC;QAC3B,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,eAAe,aACjD,sBAAsB,IAAI,mBAAmB,IAAI,CAChD,MAAC,IAAI,IAAC,KAAK,EAAE,UAAU;wBACrB,KAAC,GAAG,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,iCAAiC,wCAE/D,EACN,KAAC,iBAAiB,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,iCAAiC,yCAE/D,EACpB,KAAC,iBAAiB,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC,iCAAiC,0CAE/D;wBACf,CACR,EACA,sBAAsB,IAAI,CACzB,MAAC,IAAI,IAAC,KAAK,EAAE,UAAU;wBACrB,KAAC,MAAM,IAAC,WAAW,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,YACxC,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,iCAAiC,qCAA+B,GAC/E,EACT,KAAC,IAAI,cACH,KAAC,MAAM,IAAC,KAAK,EAAE,MAAM,CAAC,iCAAiC,sCAAgC,GAClF;wBACF,CACR,IACI,CACR,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,UAAU,YACrB,KAAC,IAAI,wEAA6D,GAC7D,CACR,CAAC;IACJ,CAAC;AAAA,CACF,CAAC"}

package/lib/TestComponents/Shadow/ShadowDepthTestSection.d.ts

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

package/lib/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAoB1C,CAAC"}

package/lib/TestComponents/Shadow/ShadowDepthTestSection.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { View } from 'react-native';
+import { Text } from '@fluentui/react-native';
+import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
+import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { shadowTestPageStyles } from './ShadowTestPageStyles';
+const getThemedStyles = themedStyleSheet((t) => {
+  return {
+    shadowTestBox: {
+      maxWidth: 732,
+      minHeight: 64,
+      borderRadius: 8,
+      padding: 20,
+      marginVertical: 16,
+      marginHorizontal: 32,
+    },
+    defaultBackground: shadowTestPageStyles(t).backgroundColor,
+    brandedBackground: {
+      backgroundColor: t.colors.brandedBackground,
+    },
+  };
+});
+const ShadowTestBox = (props) => {
+  const theme = useTheme();
+  const themedStyles = getThemedStyles(theme);
+  const backgroundColor = props.isBrand ? themedStyles.brandedBackground : themedStyles.defaultBackground;
+  const textColor = props.isBrand ? theme.colors.primaryButtonText : theme.colors.bodyText;
+  return _jsx(Shadow, {
+    shadowToken: props.shadowToken,
+    children: _jsxs(View, {
+      style: mergeStyles(themedStyles.shadowTestBox, backgroundColor),
+      children: [
+        _jsx(Text, { variant: 'bodySemibold', color: textColor, children: props.shadowDepthText }),
+        _jsx(Text, { color: textColor, children: getShadowDescription(props.shadowToken) }),
+      ],
+    }),
+  });
+};
+export const ShadowDepthTestSection = () => {
+  const theme = useFluentTheme();
+  const backgroundViewStyle = mergeStyles(shadowTestPageStyles(theme).backgroundColor);
+  return _jsxs(View, {
+    style: backgroundViewStyle,
+    children: [
+      _jsx(ShadowTestBox, { shadowDepthText: 'Shadow 2', shadowToken: theme.shadows.shadow2 }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Shadow 4', shadowToken: theme.shadows.shadow4 }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Shadow 8', shadowToken: theme.shadows.shadow8 }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Shadow 16', shadowToken: theme.shadows.shadow16 }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Shadow 28', shadowToken: theme.shadows.shadow28 }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Shadow 64', shadowToken: theme.shadows.shadow64 }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Brand Shadow 2', shadowToken: theme.shadows.shadow2brand, isBrand: true }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Brand Shadow 4', shadowToken: theme.shadows.shadow4brand, isBrand: true }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Brand Shadow 8', shadowToken: theme.shadows.shadow8brand, isBrand: true }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Brand Shadow 16', shadowToken: theme.shadows.shadow16brand, isBrand: true }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Brand Shadow 28', shadowToken: theme.shadows.shadow28brand, isBrand: true }),
+      _jsx(ShadowTestBox, { shadowDepthText: 'Brand Shadow 64', shadowToken: theme.shadows.shadow64brand, isBrand: true }),
+    ],
+  });
+};
+function getShadowDescription(shadowToken) {
+  const shadowStyle = getShadowTokenStyleSet(shadowToken);
+  return (
+    '\nAmbient: ' +
+    JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
+    '\n\nKey: ' +
+    JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, '')
+  );
+}
+//# sourceMappingURL=ShadowDepthTestSection.js.map