@fluentui-react-native/separator 0.18.16 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Change Log - @fluentui-react-native/separator
 
+## 0.19.0
+
+### Minor Changes
+
+- d7adbdd: # Migration from Beachball to Changesets
+
+  This changeset represents the migration from Beachball to Changesets for version management and consolidates all changes from 440+ beachball change files that were in the `change/` directory.
+
+  All 75 affected packages receive a minor version bump to acknowledge the accumulated changes from the beachball era.
+
+  ## What Changed
+
+  Going forward, all version management uses Changesets via `yarn changeset`. The following beachball infrastructure has been removed:
+
+  - ❌ 440+ beachball change files from `change/` directory
+  - ❌ `beachball` package dependency
+  - ❌ Beachball scripts from `package.json`
+  - ❌ `beachball.config.js` configuration file
+  - ❌ Beachball publish steps from Azure Pipelines
+
+  ## New Workflow
+
+  ✅ **Create changes**: Run `yarn changeset` to document changes
+  ✅ **Version bump PRs**: Automatically created by GitHub Actions
+  ✅ **Publishing**: Handled by Azure Pipelines using `changeset publish`
+  ✅ **Validation**: CI validates changesets and blocks major version bumps
+
+  For details, see `CHANGESETS_SETUP.md` and `CONTRIBUTING.md`.
+
+### Patch Changes
+
+- d1d8c26: We were pinning @types/react and react-native-macos via resolutions. This fixes that which uncovered a bunch of type inconsistencies that needed to be addressed.
+- Updated dependencies [d7adbdd]
+- Updated dependencies [d1d8c26]
+  - @fluentui-react-native/framework@0.15.0
+  - @fluentui-react-native/theme-tokens@0.28.0
+  - @fluentui-react-native/use-styling@0.14.0
+
 <!-- This log was last generated on Tue, 05 Aug 2025 18:50:41 GMT and should not be manually modified. -->
 
 <!-- Start content -->
@@ -942,7 +980,7 @@ Thu, 16 Dec 2021 19:10:26 GMT
 
 ### Patches
 
-- Rename Jest snapshots to be platform agnostic  (sanajmi@microsoft.com)
+- Rename Jest snapshots to be platform agnostic (sanajmi@microsoft.com)
 - Bump @fluentui-react-native/framework to v0.7.1
 
 ## 0.11.0
@@ -1434,30 +1472,39 @@ Thu, 16 Apr 2020 23:57:38 GMT
 - publish with correct main/module references (jasonmo@microsoft.com)
 
 ## 0.2.10
+
 Thu, 09 Apr 2020 18:39:15 GMT
 
 ### Patches
 
 - merge conflicts (ppatboyd@outlook.com)
+
 ## 0.2.8
+
 Fri, 03 Apr 2020 20:40:51 GMT
 
 ### Patches
 
 - switch the bin name from just-script to fluent-scripts to disambiguate names (jasonmo@microsoft.com)
+
 ## 0.2.7
+
 Tue, 31 Mar 2020 18:01:09 GMT
 
 ### Patches
 
 - Merge branch 'sammy/checkboxV1' of https://github.com/samuelfreiberg/fluentui-react-native into sammy/checkboxV1 (safreibe@microsoft.com)
+
 ## 0.2.6
+
 Mon, 30 Mar 2020 16:27:00 GMT
 
 ### Patches
 
 - Update main attribute to specify TypeScript index file. (kinhln@microsoft.com)
+
 ## 0.2.0
+
 Mon, 16 Mar 2020 23:03:24 GMT
 
 ### Minor changes

package/lib/Separator.d.ts

@@ -1,4 +1,9 @@
 import type { SeparatorProps } from './Separator.types';
-export declare const Separator: import("@fluentui-react-native/framework").ComposableComponent<SeparatorProps, import("./Separator.types").SeperatorSlotProps, import("./Separator.types").SeparatorTokens, import("@fluentui-react-native/framework").ObjectBase>;
+export declare const Separator: import('@fluentui-react-native/framework').ComposableComponent<
+  SeparatorProps,
+  import('./Separator.types').SeperatorSlotProps,
+  import('./Separator.types').SeparatorTokens,
+  import('@fluentui-react-native/framework-base').ObjectBase
+>;
 export default Separator;
-//# sourceMappingURL=Separator.d.ts.map
+//# sourceMappingURL=Separator.d.ts.map

package/lib/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,mBAAmB,CAAC;AAKvE,eAAO,MAAM,SAAS,oOAQpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,mBAAmB,CAAC;AAKvE,eAAO,MAAM,SAAS,yOAQpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/Separator.js

@@ -1,18 +1,18 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import { View } from 'react-native';
-import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 import { stylingSettings } from './Separator.styling';
 import { separatorName } from './Separator.types';
 const propMask = { vertical: undefined };
 export const Separator = compose({
-    displayName: separatorName,
-    ...stylingSettings,
-    slots: { root: View },
-    useRender: (props, useSlots) => {
-        const Root = useSlots(props).root;
-        return (rest, children) => withSlots(Root, { ...mergeProps(props, rest, propMask) }, children);
-    },
+  displayName: separatorName,
+  ...stylingSettings,
+  slots: { root: View },
+  useRender: (props, useSlots) => {
+    const Root = useSlots(props).root;
+    return (rest, children) => _jsx(Root, { ...mergeProps(props, rest, propMask), children: children });
+  },
 });
 export default Separator;
-//# sourceMappingURL=Separator.js.map
+//# sourceMappingURL=Separator.js.map

package/lib/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAgB;IAC9C,WAAW,EAAE,aAAa;IAC1B,GAAG,eAAe;IAClB,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;IACrB,SAAS,EAAE,CAAC,KAAqB,EAAE,QAAiC,EAAE,EAAE;QACtE,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,CAAC,IAAoB,EAAE,QAAyB,EAAE,EAAE,CAAC,UAAC,IAAI,OAAK,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAG,QAAQ,CAAQ,CAAC;IAC7H,CAAC;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":";AAAA,6DAA6D;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAgB;IAC9C,WAAW,EAAE,aAAa;IAC1B,GAAG,eAAe;IAClB,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;IACrB,SAAS,EAAE,CAAC,KAAqB,EAAE,QAAiC,EAAE,EAAE,CAAC;QACvE,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,CAAC,IAAoB,EAAE,QAAyB,EAAE,EAAE,CAAC,KAAC,IAAI,OAAK,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,YAAG,QAAQ,GAAQ,CAAC;IAAA,CAC5H;CACF,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/Separator.styling.d.ts

@@ -1,4 +1,4 @@
 import type { UseStylingOptions } from '@fluentui-react-native/framework';
 import type { SeparatorProps, SeparatorTokens, SeperatorSlotProps } from './Separator.types';
 export declare const stylingSettings: UseStylingOptions<SeparatorProps, SeperatorSlotProps, SeparatorTokens>;
-//# sourceMappingURL=Separator.styling.d.ts.map
+//# sourceMappingURL=Separator.styling.d.ts.map

package/lib/Separator.styling.js

@@ -5,18 +5,21 @@ import { defaultSeparatorTokens } from './SeparatorTokens';
 const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
 const tokensThatAreAlsoProps = ['vertical', 'insetSpacing'];
 export const stylingSettings = {
-    tokens: [defaultSeparatorTokens, separatorName],
-    tokensThatAreAlsoProps,
-    slotProps: {
-        root: buildProps((tokens) => {
-            return {
-                style: {
-                    ...(tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth }),
-                    ...(tokens.color && { borderColor: tokens.color }),
-                    ...(isMobile && { marginStart: tokens.insetSpacing }),
-                },
-            };
-        }, ['color', 'vertical', 'separatorWidth', 'insetSpacing']),
-    },
+  tokens: [defaultSeparatorTokens, separatorName],
+  tokensThatAreAlsoProps,
+  slotProps: {
+    root: buildProps(
+      (tokens) => {
+        return {
+          style: {
+            ...(tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth }),
+            ...(tokens.color && { borderColor: tokens.color }),
+            ...(isMobile && { marginStart: tokens.insetSpacing }),
+          },
+        };
+      },
+      ['color', 'vertical', 'separatorWidth', 'insetSpacing'],
+    ),
+  },
 };
-//# sourceMappingURL=Separator.styling.js.map
+//# sourceMappingURL=Separator.styling.js.map

package/lib/Separator.styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.styling.js","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AACpE,MAAM,sBAAsB,GAAkC,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC3F,MAAM,CAAC,MAAM,eAAe,GAA2E;IACrG,MAAM,EAAE,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC/C,sBAAsB;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,CAAC,MAAuB,EAAE,EAAE;YAC1B,OAAO;gBACL,KAAK,EAAE;oBACL,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC;oBAC7G,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;oBAClD,GAAG,CAAC,QAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC;iBACtD;aACF,CAAC;QACJ,CAAC,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC,CACxD;KACF;CACF,CAAC"}
+{"version":3,"file":"Separator.styling.js","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AACpE,MAAM,sBAAsB,GAAkC,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC3F,MAAM,CAAC,MAAM,eAAe,GAA2E;IACrG,MAAM,EAAE,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC/C,sBAAsB;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,CAAC,MAAuB,EAAE,EAAE,CAAC;YAC3B,OAAO;gBACL,KAAK,EAAE;oBACL,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC;oBAC7G,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;oBAClD,GAAG,CAAC,QAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC;iBACtD;aACF,CAAC;QAAA,CACH,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC,CACxD;KACF;CACF,CAAC"}

package/lib/Separator.types.d.ts

@@ -1,42 +1,41 @@
 import type { ViewProps, ColorValue } from 'react-native';
-export declare const separatorName = "Separator";
+export declare const separatorName = 'Separator';
 export declare const SeparatorInsetSpacings: readonly [0, 16, 56, 68, 72, 108];
 export type SeparatorInsetSpacing = (typeof SeparatorInsetSpacings)[number];
 export interface SeparatorPropTokens {
-    /**
-     * Specifies whether the separator is vertical or horizontal. If true, then it's vertical.
-     * @defaultValue 'false'
-     */
-    vertical?: boolean;
-    /**
-     * Inset Spacing in 'dp' (density-independent pixels) on Android and 'points' on iOS.
-     *
-     * Inset Spacing is restricted to a limited set of supported values recommended for most uses (see `SeparatorInsetSpacing`) and
-     * based on design guidelines for the Separator control.
-     * @platform Android iOS
-     * @defaultvalue 0
-     */
-    insetSpacing?: SeparatorInsetSpacing;
+  /**
+   * Specifies whether the separator is vertical or horizontal. If true, then it's vertical.
+   * @defaultValue 'false'
+   */
+  vertical?: boolean;
+  /**
+   * Inset Spacing in 'dp' (density-independent pixels) on Android and 'points' on iOS.
+   *
+   * Inset Spacing is restricted to a limited set of supported values recommended for most uses (see `SeparatorInsetSpacing`) and
+   * based on design guidelines for the Separator control.
+   * @platform Android iOS
+   * @defaultvalue 0
+   */
+  insetSpacing?: SeparatorInsetSpacing;
 }
 export interface SeparatorTokens extends SeparatorPropTokens {
-    /**
-     * Specifies the width of the separator. This will be interpreted as DIPs on Windows and Android, but as points on Mac and iOS.
-     * @defaultValue 1
-     */
-    separatorWidth?: number;
-    /**
-     * Specifies the color of the separator
-     */
-    color?: ColorValue;
-}
-export interface SeparatorProps extends ViewProps, SeparatorPropTokens {
+  /**
+   * Specifies the width of the separator. This will be interpreted as DIPs on Windows and Android, but as points on Mac and iOS.
+   * @defaultValue 1
+   */
+  separatorWidth?: number;
+  /**
+   * Specifies the color of the separator
+   */
+  color?: ColorValue;
 }
+export interface SeparatorProps extends ViewProps, SeparatorPropTokens {}
 export interface SeperatorSlotProps {
-    root: ViewProps;
+  root: ViewProps;
 }
 export interface SeparatorType {
-    props: SeparatorProps;
-    slotProps: SeperatorSlotProps;
-    tokens: SeparatorTokens;
+  props: SeparatorProps;
+  slotProps: SeperatorSlotProps;
+  tokens: SeparatorTokens;
 }
-//# sourceMappingURL=Separator.types.d.ts.map
+//# sourceMappingURL=Separator.types.d.ts.map

package/lib/Separator.types.js

@@ -1,3 +1,3 @@
 export const separatorName = 'Separator';
 export const SeparatorInsetSpacings = [0, 16, 56, 68, 72, 108];
-//# sourceMappingURL=Separator.types.js.map
+//# sourceMappingURL=Separator.types.js.map

package/lib/SeparatorTokens.android.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { SeparatorTokens } from './Separator.types';
 export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
-//# sourceMappingURL=SeparatorTokens.android.d.ts.map
+//# sourceMappingURL=SeparatorTokens.android.d.ts.map

package/lib/SeparatorTokens.android.js

@@ -1,7 +1,7 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultSeparatorTokens = (t) => ({
-    color: t.colors.neutralStroke2,
-    separatorWidth: globalTokens.stroke.width10,
-    insetSpacing: 0,
+  color: t.colors.neutralStroke2,
+  separatorWidth: globalTokens.stroke.width10,
+  insetSpacing: 0,
 });
-//# sourceMappingURL=SeparatorTokens.android.js.map
+//# sourceMappingURL=SeparatorTokens.android.js.map

package/lib/SeparatorTokens.android.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeparatorTokens.android.js","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAKnE,MAAM,CAAC,MAAM,sBAAsB,GAA0C,CAAC,CAAQ,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;IAC9B,cAAc,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO;IAC3C,YAAY,EAAE,CAAC;CACI,CAAA,CAAC"}
+{"version":3,"file":"SeparatorTokens.android.js","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAKnE,MAAM,CAAC,MAAM,sBAAsB,GAA0C,CAAC,CAAQ,EAAE,EAAE,EACvF;IACC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;IAC9B,cAAc,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO;IAC3C,YAAY,EAAE,CAAC;CACI,CAAA,CAAC"}

package/lib/SeparatorTokens.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { SeparatorTokens } from './Separator.types';
 export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
-//# sourceMappingURL=SeparatorTokens.d.ts.map
+//# sourceMappingURL=SeparatorTokens.d.ts.map

package/lib/SeparatorTokens.js

@@ -1,5 +1,5 @@
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 export const defaultSeparatorTokens = () => ({
-    separatorWidth: globalTokens.stroke.width10,
+  separatorWidth: globalTokens.stroke.width10,
 });
-//# sourceMappingURL=SeparatorTokens.js.map
+//# sourceMappingURL=SeparatorTokens.js.map

package/lib/SeparatorTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeparatorTokens.js","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAKnE,MAAM,CAAC,MAAM,sBAAsB,GAA0C,GAAG,EAAE,CAChF,CAAC;IACC,cAAc,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO;CACxB,CAAA,CAAC"}
+{"version":3,"file":"SeparatorTokens.js","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAKnE,MAAM,CAAC,MAAM,sBAAsB,GAA0C,GAAG,EAAE,EAC/E;IACC,cAAc,EAAE,YAAY,CAAC,MAAM,CAAC,OAAO;CACxB,CAAA,CAAC"}

package/lib/__tests__/Separator.test.d.ts

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

package/lib/__tests__/Separator.test.js

@@ -1,13 +1,20 @@
-import * as React from 'react';
+import { jsx as _jsx } from 'react/jsx-runtime';
+import { act } from 'react';
 import * as renderer from 'react-test-renderer';
 import { Separator } from '..';
 it('Separator default', () => {
-    const tree = renderer.create(React.createElement(Separator, null)).toJSON();
-    expect(tree).toMatchSnapshot();
+  let component;
+  act(() => {
+    component = renderer.create(_jsx(Separator, {}));
+  });
+  expect(component.toJSON()).toMatchSnapshot();
 });
 it('Separator all props & tokens', () => {
-    const CustomSeparator = Separator.customize({ separatorWidth: 15, color: 'red' });
-    const tree = renderer.create(React.createElement(CustomSeparator, { vertical: true })).toJSON();
-    expect(tree).toMatchSnapshot();
+  const CustomSeparator = Separator.customize({ separatorWidth: 15, color: 'red' });
+  let component;
+  act(() => {
+    component = renderer.create(_jsx(CustomSeparator, { vertical: true }));
+  });
+  expect(component.toJSON()).toMatchSnapshot();
 });
-//# sourceMappingURL=Separator.test.js.map
+//# sourceMappingURL=Separator.test.js.map

package/lib/__tests__/Separator.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.test.js","sourceRoot":"","sources":["../../src/__tests__/Separator.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAE/B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,SAAS,OAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACrD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;IACtC,MAAM,eAAe,GAAG,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAClF,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,eAAe,IAAC,QAAQ,SAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACpE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Separator.test.js","sourceRoot":"","sources":["../../src/__tests__/Separator.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAE/B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC;IAC5B,IAAI,SAAqC,CAAC;IAC1C,GAAG,CAAC,GAAG,EAAE,CAAC;QACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;IAAA,CAC5C,CAAC,CAAC;IACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AAAA,CAC/C,CAAC,CAAC;AAEH,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE,CAAC;IACvC,MAAM,eAAe,GAAG,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAClF,IAAI,SAAqC,CAAC;IAC1C,GAAG,CAAC,GAAG,EAAE,CAAC;QACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAC,eAAe,IAAC,QAAQ,SAAG,CAAC,CAAC;IAAA,CAC3D,CAAC,CAAC;IACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AAAA,CAC/C,CAAC,CAAC"}

package/lib/index.d.ts

@@ -1,4 +1,4 @@
 export type { SeparatorProps, SeparatorTokens, SeparatorType } from './Separator.types';
 export { separatorName } from './Separator.types';
 export { Separator } from './Separator';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -1,3 +1,3 @@
 export { separatorName } from './Separator.types';
 export { Separator } from './Separator';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib-commonjs/Separator.d.ts

@@ -1,4 +1,9 @@
 import type { SeparatorProps } from './Separator.types';
-export declare const Separator: import("@fluentui-react-native/framework").ComposableComponent<SeparatorProps, import("./Separator.types").SeperatorSlotProps, import("./Separator.types").SeparatorTokens, import("@fluentui-react-native/framework").ObjectBase>;
+export declare const Separator: import('@fluentui-react-native/framework').ComposableComponent<
+  SeparatorProps,
+  import('./Separator.types').SeperatorSlotProps,
+  import('./Separator.types').SeparatorTokens,
+  import('@fluentui-react-native/framework').ObjectBase
+>;
 export default Separator;
-//# sourceMappingURL=Separator.d.ts.map
+//# sourceMappingURL=Separator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,mBAAmB,CAAC;AAKvE,eAAO,MAAM,SAAS,oOAQpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,mBAAmB,CAAC;AAKvE,eAAO,MAAM,SAAS,oOAQpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib-commonjs/Separator.js

@@ -1,21 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Separator = void 0;
-/** @jsxRuntime classic */
-/** @jsx withSlots */
-const react_native_1 = require("react-native");
-const framework_1 = require("@fluentui-react-native/framework");
-const Separator_styling_1 = require("./Separator.styling");
-const Separator_types_1 = require("./Separator.types");
+const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
+/** @jsxImportSource @fluentui-react-native/framework-base */
+const react_native_1 = require('react-native');
+const framework_1 = require('@fluentui-react-native/framework');
+const Separator_styling_1 = require('./Separator.styling');
+const Separator_types_1 = require('./Separator.types');
 const propMask = { vertical: undefined };
 exports.Separator = (0, framework_1.compose)({
-    displayName: Separator_types_1.separatorName,
-    ...Separator_styling_1.stylingSettings,
-    slots: { root: react_native_1.View },
-    useRender: (props, useSlots) => {
-        const Root = useSlots(props).root;
-        return (rest, children) => (0, framework_1.withSlots)(Root, { ...(0, framework_1.mergeProps)(props, rest, propMask) }, children);
-    },
+  displayName: Separator_types_1.separatorName,
+  ...Separator_styling_1.stylingSettings,
+  slots: { root: react_native_1.View },
+  useRender: (props, useSlots) => {
+    const Root = useSlots(props).root;
+    return (rest, children) => jsx_runtime_1.jsx(Root, { ...(0, framework_1.mergeProps)(props, rest, propMask), children: children });
+  },
 });
 exports.default = exports.Separator;
-//# sourceMappingURL=Separator.js.map
+//# sourceMappingURL=Separator.js.map

package/lib-commonjs/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":";;;AAAA,0BAA0B;AAC1B,qBAAqB;AACrB,+CAAoC;AAGpC,gEAAkF;AAElF,2DAAsD;AAEtD,uDAAkD;AAElD,MAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAE5B,QAAA,SAAS,GAAG,IAAA,mBAAO,EAAgB;IAC9C,WAAW,EAAE,+BAAa;IAC1B,GAAG,mCAAe;IAClB,KAAK,EAAE,EAAE,IAAI,EAAE,mBAAI,EAAE;IACrB,SAAS,EAAE,CAAC,KAAqB,EAAE,QAAiC,EAAE,EAAE;QACtE,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,CAAC,IAAoB,EAAE,QAAyB,EAAE,EAAE,CAAC,2BAAC,IAAI,OAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAG,QAAQ,CAAQ,CAAC;IAC7H,CAAC;CACF,CAAC,CAAC;AAEH,kBAAe,iBAAS,CAAC"}
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../src/Separator.tsx"],"names":[],"mappings":";;;;AAAA,6DAA6D;AAC7D,+CAAoC;AAGpC,gEAAuE;AAEvE,2DAAsD;AAEtD,uDAAkD;AAElD,MAAM,QAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAE5B,QAAA,SAAS,GAAG,IAAA,mBAAO,EAAgB;IAC9C,WAAW,EAAE,+BAAa;IAC1B,GAAG,mCAAe;IAClB,KAAK,EAAE,EAAE,IAAI,EAAE,mBAAI,EAAE;IACrB,SAAS,EAAE,CAAC,KAAqB,EAAE,QAAiC,EAAE,EAAE,CAAC;QACvE,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QAClC,OAAO,CAAC,IAAoB,EAAE,QAAyB,EAAE,EAAE,CAAC,kBAAC,IAAI,OAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,YAAG,QAAQ,GAAQ,CAAC;IAAA,CAC5H;CACF,CAAC,CAAC;kBAEY,QAAA,SAAS"}

package/lib-commonjs/Separator.styling.d.ts

@@ -1,4 +1,4 @@
 import type { UseStylingOptions } from '@fluentui-react-native/framework';
 import type { SeparatorProps, SeparatorTokens, SeperatorSlotProps } from './Separator.types';
 export declare const stylingSettings: UseStylingOptions<SeparatorProps, SeperatorSlotProps, SeparatorTokens>;
-//# sourceMappingURL=Separator.styling.d.ts.map
+//# sourceMappingURL=Separator.styling.d.ts.map

package/lib-commonjs/Separator.styling.js

@@ -1,25 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.stylingSettings = void 0;
-const react_native_1 = require("react-native");
-const framework_1 = require("@fluentui-react-native/framework");
-const Separator_types_1 = require("./Separator.types");
-const SeparatorTokens_1 = require("./SeparatorTokens");
+const react_native_1 = require('react-native');
+const framework_1 = require('@fluentui-react-native/framework');
+const Separator_types_1 = require('./Separator.types');
+const SeparatorTokens_1 = require('./SeparatorTokens');
 const isMobile = react_native_1.Platform.OS === 'android' || react_native_1.Platform.OS === 'ios';
 const tokensThatAreAlsoProps = ['vertical', 'insetSpacing'];
 exports.stylingSettings = {
-    tokens: [SeparatorTokens_1.defaultSeparatorTokens, Separator_types_1.separatorName],
-    tokensThatAreAlsoProps,
-    slotProps: {
-        root: (0, framework_1.buildProps)((tokens) => {
-            return {
-                style: {
-                    ...(tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth }),
-                    ...(tokens.color && { borderColor: tokens.color }),
-                    ...(isMobile && { marginStart: tokens.insetSpacing }),
-                },
-            };
-        }, ['color', 'vertical', 'separatorWidth', 'insetSpacing']),
-    },
+  tokens: [SeparatorTokens_1.defaultSeparatorTokens, Separator_types_1.separatorName],
+  tokensThatAreAlsoProps,
+  slotProps: {
+    root: (0, framework_1.buildProps)(
+      (tokens) => {
+        return {
+          style: {
+            ...(tokens.vertical ? { borderLeftWidth: tokens.separatorWidth } : { borderTopWidth: tokens.separatorWidth }),
+            ...(tokens.color && { borderColor: tokens.color }),
+            ...(isMobile && { marginStart: tokens.insetSpacing }),
+          },
+        };
+      },
+      ['color', 'vertical', 'separatorWidth', 'insetSpacing'],
+    ),
+  },
 };
-//# sourceMappingURL=Separator.styling.js.map
+//# sourceMappingURL=Separator.styling.js.map

package/lib-commonjs/Separator.styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.styling.js","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AAGxC,gEAA8D;AAG9D,uDAAkD;AAClD,uDAA2D;AAE3D,MAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AACpE,MAAM,sBAAsB,GAAkC,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC9E,QAAA,eAAe,GAA2E;IACrG,MAAM,EAAE,CAAC,wCAAsB,EAAE,+BAAa,CAAC;IAC/C,sBAAsB;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,IAAA,sBAAU,EACd,CAAC,MAAuB,EAAE,EAAE;YAC1B,OAAO;gBACL,KAAK,EAAE;oBACL,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC;oBAC7G,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;oBAClD,GAAG,CAAC,QAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC;iBACtD;aACF,CAAC;QACJ,CAAC,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC,CACxD;KACF;CACF,CAAC"}
+{"version":3,"file":"Separator.styling.js","sourceRoot":"","sources":["../src/Separator.styling.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AAGxC,gEAA8D;AAG9D,uDAAkD;AAClD,uDAA2D;AAE3D,MAAM,QAAQ,GAAG,uBAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;AACpE,MAAM,sBAAsB,GAAkC,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAC9E,QAAA,eAAe,GAA2E;IACrG,MAAM,EAAE,CAAC,wCAAsB,EAAE,+BAAa,CAAC;IAC/C,sBAAsB;IACtB,SAAS,EAAE;QACT,IAAI,EAAE,IAAA,sBAAU,EACd,CAAC,MAAuB,EAAE,EAAE,CAAC;YAC3B,OAAO;gBACL,KAAK,EAAE;oBACL,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,CAAC;oBAC7G,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;oBAClD,GAAG,CAAC,QAAQ,IAAI,EAAE,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC;iBACtD;aACF,CAAC;QAAA,CACH,EACD,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC,CACxD;KACF;CACF,CAAC"}

package/lib-commonjs/Separator.types.d.ts

@@ -1,42 +1,41 @@
 import type { ViewProps, ColorValue } from 'react-native';
-export declare const separatorName = "Separator";
+export declare const separatorName = 'Separator';
 export declare const SeparatorInsetSpacings: readonly [0, 16, 56, 68, 72, 108];
 export type SeparatorInsetSpacing = (typeof SeparatorInsetSpacings)[number];
 export interface SeparatorPropTokens {
-    /**
-     * Specifies whether the separator is vertical or horizontal. If true, then it's vertical.
-     * @defaultValue 'false'
-     */
-    vertical?: boolean;
-    /**
-     * Inset Spacing in 'dp' (density-independent pixels) on Android and 'points' on iOS.
-     *
-     * Inset Spacing is restricted to a limited set of supported values recommended for most uses (see `SeparatorInsetSpacing`) and
-     * based on design guidelines for the Separator control.
-     * @platform Android iOS
-     * @defaultvalue 0
-     */
-    insetSpacing?: SeparatorInsetSpacing;
+  /**
+   * Specifies whether the separator is vertical or horizontal. If true, then it's vertical.
+   * @defaultValue 'false'
+   */
+  vertical?: boolean;
+  /**
+   * Inset Spacing in 'dp' (density-independent pixels) on Android and 'points' on iOS.
+   *
+   * Inset Spacing is restricted to a limited set of supported values recommended for most uses (see `SeparatorInsetSpacing`) and
+   * based on design guidelines for the Separator control.
+   * @platform Android iOS
+   * @defaultvalue 0
+   */
+  insetSpacing?: SeparatorInsetSpacing;
 }
 export interface SeparatorTokens extends SeparatorPropTokens {
-    /**
-     * Specifies the width of the separator. This will be interpreted as DIPs on Windows and Android, but as points on Mac and iOS.
-     * @defaultValue 1
-     */
-    separatorWidth?: number;
-    /**
-     * Specifies the color of the separator
-     */
-    color?: ColorValue;
-}
-export interface SeparatorProps extends ViewProps, SeparatorPropTokens {
+  /**
+   * Specifies the width of the separator. This will be interpreted as DIPs on Windows and Android, but as points on Mac and iOS.
+   * @defaultValue 1
+   */
+  separatorWidth?: number;
+  /**
+   * Specifies the color of the separator
+   */
+  color?: ColorValue;
 }
+export interface SeparatorProps extends ViewProps, SeparatorPropTokens {}
 export interface SeperatorSlotProps {
-    root: ViewProps;
+  root: ViewProps;
 }
 export interface SeparatorType {
-    props: SeparatorProps;
-    slotProps: SeperatorSlotProps;
-    tokens: SeparatorTokens;
+  props: SeparatorProps;
+  slotProps: SeperatorSlotProps;
+  tokens: SeparatorTokens;
 }
-//# sourceMappingURL=Separator.types.d.ts.map
+//# sourceMappingURL=Separator.types.d.ts.map

package/lib-commonjs/Separator.types.js

@@ -1,6 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SeparatorInsetSpacings = exports.separatorName = void 0;
 exports.separatorName = 'Separator';
 exports.SeparatorInsetSpacings = [0, 16, 56, 68, 72, 108];
-//# sourceMappingURL=Separator.types.js.map
+//# sourceMappingURL=Separator.types.js.map

package/lib-commonjs/SeparatorTokens.android.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { SeparatorTokens } from './Separator.types';
 export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
-//# sourceMappingURL=SeparatorTokens.android.d.ts.map
+//# sourceMappingURL=SeparatorTokens.android.d.ts.map

package/lib-commonjs/SeparatorTokens.android.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.defaultSeparatorTokens = void 0;
-const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+const theme_tokens_1 = require('@fluentui-react-native/theme-tokens');
 const defaultSeparatorTokens = (t) => ({
-    color: t.colors.neutralStroke2,
-    separatorWidth: theme_tokens_1.globalTokens.stroke.width10,
-    insetSpacing: 0,
+  color: t.colors.neutralStroke2,
+  separatorWidth: theme_tokens_1.globalTokens.stroke.width10,
+  insetSpacing: 0,
 });
 exports.defaultSeparatorTokens = defaultSeparatorTokens;
-//# sourceMappingURL=SeparatorTokens.android.js.map
+//# sourceMappingURL=SeparatorTokens.android.js.map

package/lib-commonjs/SeparatorTokens.android.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeparatorTokens.android.js","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":";;;AACA,sEAAmE;AAK5D,MAAM,sBAAsB,GAA0C,CAAC,CAAQ,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;IAC9B,cAAc,EAAE,2BAAY,CAAC,MAAM,CAAC,OAAO;IAC3C,YAAY,EAAE,CAAC;CACI,CAAA,CAAC;AALX,QAAA,sBAAsB,0BAKX"}
+{"version":3,"file":"SeparatorTokens.android.js","sourceRoot":"","sources":["../src/SeparatorTokens.android.tsx"],"names":[],"mappings":";;;AACA,sEAAmE;AAK5D,MAAM,sBAAsB,GAA0C,CAAC,CAAQ,EAAE,EAAE,EACvF;IACC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;IAC9B,cAAc,EAAE,2BAAY,CAAC,MAAM,CAAC,OAAO;IAC3C,YAAY,EAAE,CAAC;CACI,CAAA,CAAC;AALX,QAAA,sBAAsB,GAAtB,sBAAsB,CAKX"}

package/lib-commonjs/SeparatorTokens.d.ts

@@ -2,4 +2,4 @@ import type { Theme } from '@fluentui-react-native/framework';
 import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import type { SeparatorTokens } from './Separator.types';
 export declare const defaultSeparatorTokens: TokenSettings<SeparatorTokens, Theme>;
-//# sourceMappingURL=SeparatorTokens.d.ts.map
+//# sourceMappingURL=SeparatorTokens.d.ts.map

package/lib-commonjs/SeparatorTokens.js

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.defaultSeparatorTokens = void 0;
-const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
+const theme_tokens_1 = require('@fluentui-react-native/theme-tokens');
 const defaultSeparatorTokens = () => ({
-    separatorWidth: theme_tokens_1.globalTokens.stroke.width10,
+  separatorWidth: theme_tokens_1.globalTokens.stroke.width10,
 });
 exports.defaultSeparatorTokens = defaultSeparatorTokens;
-//# sourceMappingURL=SeparatorTokens.js.map
+//# sourceMappingURL=SeparatorTokens.js.map

package/lib-commonjs/SeparatorTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeparatorTokens.js","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":";;;AACA,sEAAmE;AAK5D,MAAM,sBAAsB,GAA0C,GAAG,EAAE,CAChF,CAAC;IACC,cAAc,EAAE,2BAAY,CAAC,MAAM,CAAC,OAAO;CACxB,CAAA,CAAC;AAHX,QAAA,sBAAsB,0BAGX"}
+{"version":3,"file":"SeparatorTokens.js","sourceRoot":"","sources":["../src/SeparatorTokens.tsx"],"names":[],"mappings":";;;AACA,sEAAmE;AAK5D,MAAM,sBAAsB,GAA0C,GAAG,EAAE,EAC/E;IACC,cAAc,EAAE,2BAAY,CAAC,MAAM,CAAC,OAAO;CACxB,CAAA,CAAC;AAHX,QAAA,sBAAsB,GAAtB,sBAAsB,CAGX"}

package/lib-commonjs/__tests__/Separator.test.d.ts

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

package/lib-commonjs/__tests__/Separator.test.js

@@ -1,38 +1,72 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const renderer = __importStar(require("react-test-renderer"));
-const __1 = require("..");
+'use strict';
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o['default'] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  (function () {
+    var ownKeys = function (o) {
+      ownKeys =
+        Object.getOwnPropertyNames ||
+        function (o) {
+          var ar = [];
+          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+          return ar;
+        };
+      return ownKeys(o);
+    };
+    return function (mod) {
+      if (mod && mod.__esModule) return mod;
+      var result = {};
+      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
+      __setModuleDefault(result, mod);
+      return result;
+    };
+  })();
+Object.defineProperty(exports, '__esModule', { value: true });
+const jsx_runtime_1 = require('react/jsx-runtime');
+const react_1 = require('react');
+const renderer = __importStar(require('react-test-renderer'));
+const __1 = require('..');
 it('Separator default', () => {
-    const tree = renderer.create(React.createElement(__1.Separator, null)).toJSON();
-    expect(tree).toMatchSnapshot();
+  let component;
+  (0, react_1.act)(() => {
+    component = renderer.create(jsx_runtime_1.jsx(__1.Separator, {}));
+  });
+  expect(component.toJSON()).toMatchSnapshot();
 });
 it('Separator all props & tokens', () => {
-    const CustomSeparator = __1.Separator.customize({ separatorWidth: 15, color: 'red' });
-    const tree = renderer.create(React.createElement(CustomSeparator, { vertical: true })).toJSON();
-    expect(tree).toMatchSnapshot();
+  const CustomSeparator = __1.Separator.customize({ separatorWidth: 15, color: 'red' });
+  let component;
+  (0, react_1.act)(() => {
+    component = renderer.create(jsx_runtime_1.jsx(CustomSeparator, { vertical: true }));
+  });
+  expect(component.toJSON()).toMatchSnapshot();
 });
-//# sourceMappingURL=Separator.test.js.map
+//# sourceMappingURL=Separator.test.js.map

package/lib-commonjs/__tests__/Separator.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.test.js","sourceRoot":"","sources":["../../src/__tests__/Separator.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,8DAAgD;AAEhD,0BAA+B;AAE/B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,aAAS,OAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACrD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;IACtC,MAAM,eAAe,GAAG,aAAS,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAClF,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,eAAe,IAAC,QAAQ,SAAG,CAAC,CAAC,MAAM,EAAE,CAAC;IACpE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;AACjC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Separator.test.js","sourceRoot":"","sources":["../../src/__tests__/Separator.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA4B;AAE5B,MAAY,QAAQ,gDAA4B;AAEhD,0BAA+B;AAE/B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC;IAC5B,IAAI,SAAqC,CAAC;IAC1C,IAAA,WAAG,EAAC,GAAG,EAAE,CAAC;QACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,kBAAC,aAAS,KAAG,CAAC,CAAC;IAAA,CAC5C,CAAC,CAAC;IACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AAAA,CAC/C,CAAC,CAAC;AAEH,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE,CAAC;IACvC,MAAM,eAAe,GAAG,aAAS,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAClF,IAAI,SAAqC,CAAC;IAC1C,IAAA,WAAG,EAAC,GAAG,EAAE,CAAC;QACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,kBAAC,eAAe,IAAC,QAAQ,SAAG,CAAC,CAAC;IAAA,CAC3D,CAAC,CAAC;IACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;AAAA,CAC/C,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,4 +1,4 @@
 export type { SeparatorProps, SeparatorTokens, SeparatorType } from './Separator.types';
 export { separatorName } from './Separator.types';
 export { Separator } from './Separator';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.js

@@ -1,8 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Separator = exports.separatorName = void 0;
-var Separator_types_1 = require("./Separator.types");
-Object.defineProperty(exports, "separatorName", { enumerable: true, get: function () { return Separator_types_1.separatorName; } });
-var Separator_1 = require("./Separator");
-Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return Separator_1.Separator; } });
-//# sourceMappingURL=index.js.map
+const Separator_types_1 = require('./Separator.types');
+Object.defineProperty(exports, 'separatorName', {
+  enumerable: true,
+  get: function () {
+    return Separator_types_1.separatorName;
+  },
+});
+const Separator_1 = require('./Separator');
+Object.defineProperty(exports, 'Separator', {
+  enumerable: true,
+  get: function () {
+    return Separator_1.Separator;
+  },
+});
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,qDAAkD;AAAzC,gHAAA,aAAa,OAAA;AACtB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,uDAAkD;AAAzC,gHAAA,aAAa,OAAA;AACtB,2CAAwC;AAA/B,sGAAA,SAAS,OAAA"}

package/package.json

@@ -1,79 +1,88 @@
 {
   "name": "@fluentui-react-native/separator",
-  "version": "0.18.16",
+  "version": "0.19.0",
   "description": "A cross-platform Separator component using the Fluent Design System",
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "react-native": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "packages/components/Separator"
+  },
+  "license": "MIT",
+  "author": "",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
-      "types": "./lib/index.d.ts"
+      "require": "./lib-commonjs/index.js"
     }
   },
-  "typings": "lib/index.d.ts",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
-    "just": "fluentui-scripts",
+    "build-cjs": "tsgo --outDir lib-commonjs",
+    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
-    "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
+    "lint-package": "fluentui-scripts lint-package",
     "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/microsoft/fluentui-react-native.git",
-    "directory": "packages/components/Separator"
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.14.16",
-    "@fluentui-react-native/theme-tokens": "0.27.10",
-    "@fluentui-react-native/use-styling": "0.13.12"
+    "@fluentui-react-native/framework": "0.15.0",
+    "@fluentui-react-native/theme-tokens": "0.28.0",
+    "@fluentui-react-native/use-styling": "0.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@fluentui-react-native/babel-config": "0.1.1",
     "@fluentui-react-native/eslint-config-rules": "0.1.1",
+    "@fluentui-react-native/framework-base": "0.3.0",
     "@fluentui-react-native/jest-config": "0.1.1",
-    "@fluentui-react-native/scripts": "0.1.1",
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
     "@office-iss/react-native-win32": "^0.74.0",
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/metro-config": "^0.74.0",
-    "@types/react": "~18.2.0",
-    "@types/react-test-renderer": "^18.2.0",
-    "react": "18.2.0",
-    "react-native": "^0.74.0",
-    "react-native-macos": "^0.74.0",
-    "react-native-windows": "^0.74.0",
-    "react-test-renderer": "18.2.0"
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
+    "@react-native/babel-preset": "^0.81.0",
+    "@react-native/metro-config": "^0.81.0",
+    "@types/react": "~19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.0",
+    "react-native-macos": "^0.81.0",
+    "react-native-windows": "^0.81.0",
+    "react-test-renderer": "19.1.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0",
-    "react-native-macos": "^0.73.0 || ^0.74.0",
-    "react-native-windows": "^0.73.0 || ^0.74.0"
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
+  },
+  "peerDependenciesMeta": {
+    "@office-iss/react-native-win32": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-native-macos": {
+      "optional": true
+    },
+    "react-native-windows": {
+      "optional": true
+    }
   },
-  "author": "",
-  "license": "MIT",
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": {
-        "development": [
-          "react-native@0.74"
-        ],
-        "production": [
-          "react-native@0.73 || 0.74"
-        ]
-      },
       "capabilities": [
         "babel-preset-react-native",
         "core",
@@ -82,19 +91,11 @@
         "core-macos",
         "core-windows",
         "react",
-        "react-test-renderer"
+        "react-test-renderer",
+        "tools-core",
+        "tools-jest"
       ]
-    }
-  },
-  "peerDependenciesMeta": {
-    "@office-iss/react-native-win32": {
-      "optional": true
     },
-    "react-native-macos": {
-      "optional": true
-    },
-    "react-native-windows": {
-      "optional": true
-    }
+    "extends": "@fluentui-react-native/kit-config"
   }
-}
+}

package/src/Separator.tsx

@@ -1,9 +1,8 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import { View } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 
 import { stylingSettings } from './Separator.styling';
 import type { SeparatorProps, SeparatorType } from './Separator.types';

package/src/__tests__/Separator.test.tsx

@@ -1,16 +1,22 @@
-import * as React from 'react';
+import { act } from 'react';
 
 import * as renderer from 'react-test-renderer';
 
 import { Separator } from '..';
 
 it('Separator default', () => {
-  const tree = renderer.create(<Separator />).toJSON();
-  expect(tree).toMatchSnapshot();
+  let component: renderer.ReactTestRenderer;
+  act(() => {
+    component = renderer.create(<Separator />);
+  });
+  expect(component!.toJSON()).toMatchSnapshot();
 });
 
 it('Separator all props & tokens', () => {
   const CustomSeparator = Separator.customize({ separatorWidth: 15, color: 'red' });
-  const tree = renderer.create(<CustomSeparator vertical />).toJSON();
-  expect(tree).toMatchSnapshot();
+  let component: renderer.ReactTestRenderer;
+  act(() => {
+    component = renderer.create(<CustomSeparator vertical />);
+  });
+  expect(component!.toJSON()).toMatchSnapshot();
 });