@fluentui/react-divider 0.0.0-nightlyff78d1e27a20220217.1 → 0.0.0

package/MIGRATION.md

@@ -1,60 +1,32 @@
 # Divider Migration
 
-## STATUS: WIP 🚧
-
-This Migration guide is a work in progress and is not yet ready for use.
-
 ## Migration from v8
 
-The existing `Separator` control supports the `content` property as well as children nodes. The `content` property has been removed and now only supports children.
+The v8 `Separator` control supports a very similar set of props to the v9 `Divider` with a few differences that are outlined below:
 
-With the new converged capabilities, both the `styles` and `theme` properties are no longer supported.
-
-Properties that are still available are the `alignContent` and `vertical` with the same acceptable values that are currently defined.
+- `styles` => NOT SUPPORTED - use `makeStyles` to create styles and apply them with the `className` prop.
+- `theme` => NOT SUPPORTED - use `FluentProvider`
 
 ## Migration from v0
 
-The v0 Divider is close to the converged Divider. Again, as with the Separator control, the `content` property in the converged component is not supported.
-
-Also, from design discussion, the converged component does not support the `size` component as it is redundant as it can be replicated through using the `borderSize` property and if needed, update the `fontSize` property to match desired style.
+The v0 `Divider` control supports a very similar set of props to the v9 `Divider` with a few differences that are outlined below:
 
-The `fitted` property also is not in use as by default the `Divider` can use the standard `margin` | `marginLeft` | `marginRight` | `marginTop` | `marginBottom` properties to adjust as needed. The default margin for the divider is 0.
+- `content` => `children` of the `Divider`
+- `fitted` => NOT SUPPORTED - use style customizations via `className` instead
+- `important` => NOT SUPPORTED
 
 ## Property mapping
 
-| v8 `Separator` | v0 `Divider` | Converged `Divider`   |
-| -------------- | ------------ | --------------------- |
-| alignContent   | -            | alignContent          |
-| vertical       | vertical     | vertical              |
-| theme          | -            | (tokens)              |
-| styles         | -            | (tokens)              |
-| -              | color        | color                 |
-| -              | size         | fontSize & borderSize |
-| -              | important    | important             |
-| -              | fitted       | margin properties     |
-| -              | -            | inset                 |
-| -              | -            | borderStyle           |
-| -              | -            | borderSize            |
-| -              | -            | appearance            |
-
-## Examples
-
-```
-<Divider content="My Content">
-<Divider>My Content</Divider>
-```
-
-_Note:_ The property theme from the separator control has been removed
-
-```
-<Separator theme={myTheme}>
-<Divider /> /* Handled by the theme provider */
-```
-
-_Note:_ The property styles from the separator control has been removed and now uses the inherent react style mechanics
-
-```
-<Separator styles={myStyles}>
-<Divider style={{ direction:ltr }}/>
-/* Handled by the theme provider / Tokens */
-```
+| v8 `Separator` | v0 `Divider` | v9 `Divider`   |
+| -------------- | ------------ | -------------- |
+| `alignContent` | -            | `alignContent` |
+| -              | -            | `appearance`   |
+| -              | `color`      |                |
+| `children`     | `content`    | `children`     |
+| -              | `fitted`     |                |
+| -              | `important`  |                |
+| -              | -            | `inset`        |
+| -              | `size`       |                |
+| `styles`       | -            |                |
+| `theme`        | -            |                |
+| `vertical`     | `vertical`   | `vertical`     |

package/README.md

@@ -1,23 +1,39 @@
 # @fluentui/react-divider
 
-**React Divider components for [Fluent UI](https://dev.microsoft.com/fluentui)**
+**Divider components for [Fluent UI](https://aka.ms/fluentui-storybook)**
 
 The Divider component represents a visual separator, that may contain content. A Divider can be vertical or horizontal.
 
-## STATUS: WIP 🚧
-
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
-
 ## Usage
 
 To import Divider:
 
 ```js
-import { Divider } from '@fluentui/react-divider';
+import { Divider } from '@fluentui/react-components';
 ```
 
-Once the Divider component graduates to a production release, the component will be available at:
+### Examples
 
-```js
-import { Divider } from '@fluentui/react-components';
+```jsx
+<Divider />
+<Divider>This is a divider</Divider>
+<Divider alignContent="center">This is a divider</Divider>
+<Divider appearance="subtle">This is a divider</Divider>
+<Divider inset>This is a divider</Divider>
+<Divider vertical>This is a divider</Divider>
 ```
+
+See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-divider` from the list.
+
+### Specification
+
+See [SPEC.md](./SPEC.md).
+
+### Migration Guide
+
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Divider implementation.

package/Spec.md

@@ -59,7 +59,7 @@ The `Divider` component has four appearance variants:
 
 ## API
 
-From [Divider.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-divider/src/components/Divider/Divider.types.ts)
+See API at [Divider.types.tsx](./src/components/Divider/Divider.types.ts).
 
 ## HTML Structure
 
@@ -73,7 +73,7 @@ From [Divider.types.tsx](https://github.com/microsoft/fluentui/blob/master/packa
 
 ## Migration
 
-[See MIGRATION.md](./Migration.md)
+[See MIGRATION.md](./MIGRATION.md).
 
 ## Behaviors
 

package/dist/{react-divider.d.ts → index.d.ts}

@@ -3,39 +3,43 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * A divider visually segments content into groups.
  */
 export declare const Divider: ForwardRefComponent<DividerProps>;
 
-export declare const dividerClassName = "fui-Divider";
+export declare const dividerClassNames: SlotClassNames<DividerSlots>;
 
-declare type DividerCommons = {
+export declare type DividerProps = ComponentProps<Partial<DividerSlots>> & {
     /**
      * Determines the alignment of the content within the divider.
-     * @defaultvalue 'center'
+     *
+     * @default 'center'
      */
-    alignContent: 'start' | 'center' | 'end';
+    alignContent?: 'start' | 'center' | 'end';
     /**
      * A divider can have one of the preset appearances.
      * When not specified, the divider has its default appearance.
+     *
+     * @default 'default'
      */
-    appearance?: 'brand' | 'strong' | 'subtle';
+    appearance?: 'brand' | 'default' | 'strong' | 'subtle';
     /**
      * Adds padding to the beginning and end of the divider.
+     *
      * @default false
      */
-    inset: boolean;
+    inset?: boolean;
     /**
      * A divider can be horizontal (default) or vertical.
+     *
      * @default false
      */
-    vertical: boolean;
+    vertical?: boolean;
 };
 
-export declare type DividerProps = ComponentProps<Partial<DividerSlots>> & Partial<DividerCommons>;
-
 export declare type DividerSlots = {
     /**
      * Root of the component that renders as a `<div>` tag.
@@ -47,7 +51,7 @@ export declare type DividerSlots = {
     wrapper: Slot<'div'>;
 };
 
-export declare type DividerState = ComponentState<DividerSlots> & DividerCommons;
+export declare type DividerState = ComponentState<DividerSlots> & Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;
 
 /**
  * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.

package/lib/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AAEA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\n\n/**\n * A divider visually segments content into groups.\n */\nexport const Divider: ForwardRefComponent<DividerProps> = React.forwardRef((props, ref) => {\n  const state = useDivider_unstable(props, ref);\n\n  useDividerStyles_unstable(state);\n\n  return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EAEA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\n\n/**\n * A divider visually segments content into groups.\n */\nexport const Divider: ForwardRefComponent<DividerProps> = React.forwardRef((props, ref) => {\n  const state = useDivider_unstable(props, ref);\n\n  useDividerStyles_unstable(state);\n\n  return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"sourceRoot":"../src/"}

package/lib/components/Divider/Divider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.types.js","sourceRoot":"../src/","sources":["components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n  /**\n   * Root of the component that renders as a `<div>` tag.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Accessibility wrapper for content when presented.\n   */\n  wrapper: Slot<'div'>;\n};\n\ntype DividerCommons = {\n  /**\n   * Determines the alignment of the content within the divider.\n   * @defaultvalue 'center'\n   */\n  alignContent: 'start' | 'center' | 'end';\n\n  /**\n   * A divider can have one of the preset appearances.\n   * When not specified, the divider has its default appearance.\n   */\n  appearance?: 'brand' | 'strong' | 'subtle';\n\n  /**\n   * Adds padding to the beginning and end of the divider.\n   * @default false\n   */\n  inset: boolean;\n\n  /**\n   * A divider can be horizontal (default) or vertical.\n   * @default false\n   */\n  vertical: boolean;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & Partial<DividerCommons>;\n\nexport type DividerState = ComponentState<DividerSlots> & DividerCommons;\n"]}
+{"version":3,"file":"Divider.types.js","sourceRoot":"../src/","sources":["components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n  /**\n   * Root of the component that renders as a `<div>` tag.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Accessibility wrapper for content when presented.\n   */\n  wrapper: Slot<'div'>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n  /**\n   * Determines the alignment of the content within the divider.\n   *\n   * @default 'center'\n   */\n  alignContent?: 'start' | 'center' | 'end';\n\n  /**\n   * A divider can have one of the preset appearances.\n   * When not specified, the divider has its default appearance.\n   *\n   * @default 'default'\n   */\n  appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n  /**\n   * Adds padding to the beginning and end of the divider.\n   *\n   * @default false\n   */\n  inset?: boolean;\n\n  /**\n   * A divider can be horizontal (default) or vertical.\n   *\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n  Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"]}

package/lib/components/Divider/renderDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from './Divider.types';\n\n/**\n * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.\n */\nexport const renderDivider_unstable = (state: DividerState) => {\n  const { slots, slotProps } = getSlots<DividerSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children !== undefined && (\n        <slots.wrapper {...slotProps.wrapper}>{slotProps.root.children}</slots.wrapper>\n      )}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from './Divider.types';\n\n/**\n * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.\n */\nexport const renderDivider_unstable = (state: DividerState) => {\n  const { slots, slotProps } = getSlots<DividerSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children !== undefined && (\n        <slots.wrapper {...slotProps.wrapper}>{slotProps.root.children}</slots.wrapper>\n      )}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Divider/useDivider.js

@@ -8,7 +8,7 @@ import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-
 export const useDivider_unstable = (props, ref) => {
   const {
     alignContent = 'center',
-    appearance,
+    appearance = 'default',
     inset = false,
     vertical = false,
     wrapper

package/lib/components/Divider/useDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;AAIG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG,QAAM;AAAE,IAAA,YAAY,GAAG,QAAjB;AAA2B,IAAA,UAA3B;AAAuC,IAAA,KAAK,GAAG,KAA/C;AAAsD,IAAA,QAAQ,GAAG,KAAjE;AAAwE,IAAA;AAAxE,MAAoF,KAA1F;AACA,QAAM,SAAS,GAAG,KAAK,CAAC,UAAD,CAAvB;AAEA,SAAO;AACL;AACA,IAAA,YAFK;AAGL,IAAA,UAHK;AAIL,IAAA,KAJK;AAKL,IAAA,QALK;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE;AAFC,KARP;AAaL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,IAAI,EAAE,WAH2B;AAIjC,0BAAoB,QAAQ,GAAG,UAAH,GAAgB,YAJX;AAKjC,yBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;AALf,KAAR,CAbtB;AAoBL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,SADQ;AAEZ,QAAA,QAAQ,EAAE,KAAK,CAAC;AAFJ;AAFmB,KAAV;AApBpB,GAAP;AA4BD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { DividerProps, DividerState } from './Divider.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {\n  const { alignContent = 'center', appearance, inset = false, vertical = false, wrapper } = props;\n  const dividerId = useId('divider-');\n\n  return {\n    // Props passed at the top-level\n    alignContent,\n    appearance,\n    inset,\n    vertical,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      wrapper: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      ref,\n      role: 'separator',\n      'aria-orientation': vertical ? 'vertical' : 'horizontal',\n      'aria-labelledby': props.children ? dividerId : undefined,\n    }),\n    wrapper: resolveShorthand(wrapper, {\n      required: true,\n      defaultProps: {\n        id: dividerId,\n        children: props.children,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;AAIG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,YAAY,GAAG,QAAjB;IAA2B,UAAU,GAAG,SAAxC;IAAmD,KAAK,GAAG,KAA3D;IAAkE,QAAQ,GAAG,KAA7E;IAAoF;EAApF,IAAgG,KAAtG;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAD,CAAvB;EAEA,OAAO;IACL;IACA,YAFK;IAGL,UAHK;IAIL,KAJK;IAKL,QALK;IAOL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE;IAFC,CARP;IAaL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,IAAI,EAAE,WAH2B;MAIjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAJX;MAKjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;IALf,CAAR,CAbtB;IAoBL,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,EAAE,EAAE,SADQ;QAEZ,QAAQ,EAAE,KAAK,CAAC;MAFJ;IAFmB,CAAV;EApBpB,CAAP;AA4BD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { DividerProps, DividerState } from './Divider.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {\n  const { alignContent = 'center', appearance = 'default', inset = false, vertical = false, wrapper } = props;\n  const dividerId = useId('divider-');\n\n  return {\n    // Props passed at the top-level\n    alignContent,\n    appearance,\n    inset,\n    vertical,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      wrapper: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      ref,\n      role: 'separator',\n      'aria-orientation': vertical ? 'vertical' : 'horizontal',\n      'aria-labelledby': props.children ? dividerId : undefined,\n    }),\n    wrapper: resolveShorthand(wrapper, {\n      required: true,\n      defaultProps: {\n        id: dividerId,\n        children: props.children,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Divider/useDividerStyles.js

@@ -1,6 +1,9 @@
 import { mergeClasses, shorthands, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-export const dividerClassName = 'fui-Divider';
+export const dividerClassNames = {
+  root: 'fui-Divider',
+  wrapper: 'fui-Divider__wrapper'
+};
 const contentSpacing = '12px';
 const insetSpacing = '12px';
 const maxStartEndLength = '8px';
@@ -19,117 +22,121 @@ const useBaseStyles = /*#__PURE__*/__styles({
     "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm",
     "fsow6f": "f17mccla",
-    "sj55zd": "fkfq4zb",
-    "Bmqnesq": "f170vdtw",
-    "pmf9yy": "fkmkm9e",
-    "B438e65": "fbxxcv3",
-    "ijj6k": "f1vdjgj",
-    "I89eb": ["fz0g6r7", "f1h60vep"],
-    "Bp1vogq": "fn9f2qq",
-    "Bohd3ja": ["f1h60vep", "fz0g6r7"],
-    "oqd9ik": "ffdc0f3",
-    "Fdvyjd": "fsnc50s",
-    "keybh5": "fjrry2l",
-    "F7kzw7": "fii7hsz",
-    "B13j16c": ["fp9yzmz", "f1n0fcl2"],
-    "Bk8j60v": "f13jg1wd",
-    "Bpbi4o9": ["f1n0fcl2", "fp9yzmz"]
+    "Bcvre1j": "fyl8oag",
+    "Br0sdwz": "f16vkdww",
+    "Bn78ew0": "fhsnbul",
+    "li1rpt": "f1gw3sf2",
+    "ap17g6": "f1ly5f7u",
+    "B771hl4": "f1s3tz6t"
   },
   "childless": {
-    "z1nrnc": "fc3uzr1",
-    "vrnxjr": ["fhlqc5k", "flnsm0g"],
-    "Bsz71t5": ["f1957mjw", "fxrad5j"],
-    "Brd3o3m": "f1hmx8el"
+    "susq4k": "f1kyqvp9",
+    "Bicfajf": ["fzynn9s", "f1z0ukd1"],
+    "jwcpgy": ["fekrn8e", "ftdg338"],
+    "B4rk6o": "fesgyo"
   },
   "start": {
-    "Bs6t6z0": "fqc6z8f"
+    "Bsft5z2": "f13zj6fq"
   },
   "center": {
-    "rurcny": "fuzzvh5",
-    "Bs6t6z0": "fqc6z8f"
+    "Ftih45": "f1wl9k8s",
+    "Bsft5z2": "f13zj6fq"
   },
   "end": {
-    "rurcny": "fuzzvh5"
+    "Ftih45": "f1wl9k8s"
   },
   "brand": {
     "sj55zd": "f16muhyy",
-    "ijj6k": "fob59v2",
-    "I89eb": ["f2pevzt", "fuyeql9"],
-    "Bp1vogq": "f14lh9hz",
-    "Bohd3ja": ["fuyeql9", "f2pevzt"],
-    "F7kzw7": "fd73d1p",
-    "B13j16c": ["f11ucet6", "f1yegzx5"],
-    "Bk8j60v": "f1tupb0d",
-    "Bpbi4o9": ["f1yegzx5", "f11ucet6"]
+    "Bq4z7u6": "fcbuu2a",
+    "Bk5zm6e": ["f1wdw2dr", "f1ttio3w"],
+    "Bqjgrrk": "f1582fpk",
+    "Bm6vgfq": ["f1ttio3w", "f1wdw2dr"],
+    "B0n5ga8": "f1ahrvm8",
+    "s924m2": ["f1cd3wbc", "f17hbk9y"],
+    "B1q35kw": "fvrapl0",
+    "Gp14am": ["f17hbk9y", "f1cd3wbc"]
+  },
+  "default": {
+    "sj55zd": "fkfq4zb",
+    "Bq4z7u6": "f1vccso1",
+    "Bk5zm6e": ["f1geml7w", "fjml6kk"],
+    "Bqjgrrk": "f1r7kh1m",
+    "Bm6vgfq": ["fjml6kk", "f1geml7w"],
+    "B0n5ga8": "f16j7guv",
+    "s924m2": ["fx01ahm", "fj1a37q"],
+    "B1q35kw": "fl8d8yv",
+    "Gp14am": ["fj1a37q", "fx01ahm"]
   },
   "subtle": {
-    "ijj6k": "f8mhi1x",
-    "I89eb": ["f18m2ouc", "fddukvx"],
-    "Bp1vogq": "f9zmk3m",
-    "Bohd3ja": ["fddukvx", "f18m2ouc"],
-    "F7kzw7": "fxli1ey",
-    "B13j16c": ["f1qvt1bb", "f5ob950"],
-    "Bk8j60v": "f1nn0kgk",
-    "Bpbi4o9": ["f5ob950", "f1qvt1bb"]
+    "sj55zd": "fkfq4zb",
+    "Bq4z7u6": "f5g06un",
+    "Bk5zm6e": ["f13sxdku", "f1n015lb"],
+    "Bqjgrrk": "f1x6bl8t",
+    "Bm6vgfq": ["f1n015lb", "f13sxdku"],
+    "B0n5ga8": "fvod1wy",
+    "s924m2": ["fwslg65", "flk0e17"],
+    "B1q35kw": "f103fvts",
+    "Gp14am": ["flk0e17", "fwslg65"]
   },
   "strong": {
-    "ijj6k": "fkxqtrn",
-    "I89eb": ["f1yx8xct", "f2jll41"],
-    "Bp1vogq": "f1k9rjtw",
-    "Bohd3ja": ["f2jll41", "f1yx8xct"],
-    "F7kzw7": "f1i58boq",
-    "B13j16c": ["f4wmtn9", "f10n3jjp"],
-    "Bk8j60v": "ft17it6",
-    "Bpbi4o9": ["f10n3jjp", "f4wmtn9"]
+    "sj55zd": "fkfq4zb",
+    "Bq4z7u6": "f10tv6oz",
+    "Bk5zm6e": ["f16xp3sf", "f1seuxxq"],
+    "Bqjgrrk": "fwrmqbx",
+    "Bm6vgfq": ["f1seuxxq", "f16xp3sf"],
+    "B0n5ga8": "ft83z1f",
+    "s924m2": ["f1g4150c", "f192dr6e"],
+    "B1q35kw": "f1qnawh6",
+    "Gp14am": ["f192dr6e", "f1g4150c"]
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f17mccla{text-align:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f170vdtw:before{box-sizing:border-box;}", ".fkmkm9e:before{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fbxxcv3:before{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1vdjgj:before{border-top-color:var(--colorNeutralStroke2);}", ".fz0g6r7:before{border-right-color:var(--colorNeutralStroke2);}", ".f1h60vep:before{border-left-color:var(--colorNeutralStroke2);}", ".fn9f2qq:before{border-bottom-color:var(--colorNeutralStroke2);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fsnc50s:after{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fjrry2l:after{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fii7hsz:after{border-top-color:var(--colorNeutralStroke2);}", ".fp9yzmz:after{border-right-color:var(--colorNeutralStroke2);}", ".f1n0fcl2:after{border-left-color:var(--colorNeutralStroke2);}", ".f13jg1wd:after{border-bottom-color:var(--colorNeutralStroke2);}", ".fc3uzr1:before{margin-bottom:0;}", ".fhlqc5k:before{margin-right:0;}", ".flnsm0g:before{margin-left:0;}", ".f1957mjw:after{margin-left:0;}", ".fxrad5j:after{margin-right:0;}", ".f1hmx8el:after{margin-top:0;}", ".fqc6z8f:after{content:\"\";}", ".fuzzvh5:before{content:\"\";}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".fob59v2:before{border-top-color:var(--colorBrandStroke1);}", ".f2pevzt:before{border-right-color:var(--colorBrandStroke1);}", ".fuyeql9:before{border-left-color:var(--colorBrandStroke1);}", ".f14lh9hz:before{border-bottom-color:var(--colorBrandStroke1);}", ".fd73d1p:after{border-top-color:var(--colorBrandStroke1);}", ".f11ucet6:after{border-right-color:var(--colorBrandStroke1);}", ".f1yegzx5:after{border-left-color:var(--colorBrandStroke1);}", ".f1tupb0d:after{border-bottom-color:var(--colorBrandStroke1);}", ".f8mhi1x:before{border-top-color:var(--colorNeutralStroke3);}", ".f18m2ouc:before{border-right-color:var(--colorNeutralStroke3);}", ".fddukvx:before{border-left-color:var(--colorNeutralStroke3);}", ".f9zmk3m:before{border-bottom-color:var(--colorNeutralStroke3);}", ".fxli1ey:after{border-top-color:var(--colorNeutralStroke3);}", ".f1qvt1bb:after{border-right-color:var(--colorNeutralStroke3);}", ".f5ob950:after{border-left-color:var(--colorNeutralStroke3);}", ".f1nn0kgk:after{border-bottom-color:var(--colorNeutralStroke3);}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1i58boq:after{border-top-color:var(--colorNeutralStroke1);}", ".f4wmtn9:after{border-right-color:var(--colorNeutralStroke1);}", ".f10n3jjp:after{border-left-color:var(--colorNeutralStroke1);}", ".ft17it6:after{border-bottom-color:var(--colorNeutralStroke1);}"]
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f17mccla{text-align:center;}", ".fyl8oag::before{box-sizing:border-box;}", ".f16vkdww::before{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fhsnbul::before{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f1ly5f7u::after{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1s3tz6t::after{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1kyqvp9::before{margin-bottom:0;}", ".fzynn9s::before{margin-right:0;}", ".f1z0ukd1::before{margin-left:0;}", ".fekrn8e::after{margin-left:0;}", ".ftdg338::after{margin-right:0;}", ".fesgyo::after{margin-top:0;}", ".f13zj6fq::after{content:\"\";}", ".f1wl9k8s::before{content:\"\";}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".fcbuu2a::before{border-top-color:var(--colorBrandStroke1);}", ".f1wdw2dr::before{border-right-color:var(--colorBrandStroke1);}", ".f1ttio3w::before{border-left-color:var(--colorBrandStroke1);}", ".f1582fpk::before{border-bottom-color:var(--colorBrandStroke1);}", ".f1ahrvm8::after{border-top-color:var(--colorBrandStroke1);}", ".f1cd3wbc::after{border-right-color:var(--colorBrandStroke1);}", ".f17hbk9y::after{border-left-color:var(--colorBrandStroke1);}", ".fvrapl0::after{border-bottom-color:var(--colorBrandStroke1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1vccso1::before{border-top-color:var(--colorNeutralStroke2);}", ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}", ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}", ".f1r7kh1m::before{border-bottom-color:var(--colorNeutralStroke2);}", ".f16j7guv::after{border-top-color:var(--colorNeutralStroke2);}", ".fx01ahm::after{border-right-color:var(--colorNeutralStroke2);}", ".fj1a37q::after{border-left-color:var(--colorNeutralStroke2);}", ".fl8d8yv::after{border-bottom-color:var(--colorNeutralStroke2);}", ".f5g06un::before{border-top-color:var(--colorNeutralStroke3);}", ".f13sxdku::before{border-right-color:var(--colorNeutralStroke3);}", ".f1n015lb::before{border-left-color:var(--colorNeutralStroke3);}", ".f1x6bl8t::before{border-bottom-color:var(--colorNeutralStroke3);}", ".fvod1wy::after{border-top-color:var(--colorNeutralStroke3);}", ".fwslg65::after{border-right-color:var(--colorNeutralStroke3);}", ".flk0e17::after{border-left-color:var(--colorNeutralStroke3);}", ".f103fvts::after{border-bottom-color:var(--colorNeutralStroke3);}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fwrmqbx::before{border-bottom-color:var(--colorNeutralStroke1);}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}"]
 });
 
 const useHorizontalStyles = /*#__PURE__*/__styles({
   "base": {
     "a9b677": "fly5x3f",
-    "Bdixowu": "f1bwkb58",
-    "dj0dih": "fn88edj",
-    "Bxms0xd": "f1lo4gz5",
-    "rskduk": "f1iq3fds",
-    "Bouo9z4": "f1oiuz89",
-    "Bcqngy1": "f108ofon"
+    "Bdkvgpv": "f163fonl",
+    "B0qfbqy": "f51yk4v",
+    "pbipgd": "f13rof3u",
+    "Bm2nyyq": "f8rth92",
+    "xrcqlc": "f6czdpx",
+    "i5u598": "f1iyka9k"
   },
   "inset": {
     "uwmqm3": ["fjlbh76", "f11qrl6u"],
     "z189sj": ["f11qrl6u", "fjlbh76"]
   },
   "start": {
-    "rurcny": "fuzzvh5",
-    "vrnxjr": ["fncq426", "f12b5w6c"],
-    "B24asle": "f19fn84r",
-    "Bsz71t5": ["f1io6r2y", "fn6j208"]
+    "Ftih45": "f1wl9k8s",
+    "Bicfajf": ["f1ojjlep", "fk1kexq"],
+    "Bxwl2t9": "f1he2m4d",
+    "jwcpgy": ["f12w1bnb", "f1558wlj"]
   },
   "center": {
-    "vrnxjr": ["fncq426", "f12b5w6c"],
-    "Bsz71t5": ["f1io6r2y", "fn6j208"]
+    "Bicfajf": ["f1ojjlep", "fk1kexq"],
+    "jwcpgy": ["f12w1bnb", "f1558wlj"]
   },
   "end": {
-    "vrnxjr": ["fncq426", "f12b5w6c"],
-    "Bs6t6z0": "fqc6z8f",
-    "Bsz71t5": ["f1io6r2y", "fn6j208"],
-    "B79fe3b": "f3tzpys"
+    "Bicfajf": ["f1ojjlep", "fk1kexq"],
+    "Bsft5z2": "f13zj6fq",
+    "jwcpgy": ["f12w1bnb", "f1558wlj"],
+    "Iy66sp": "f1ayce8x"
   }
 }, {
-  "d": [".fly5x3f{width:100%;}", ".f1bwkb58:before{border-top-style:solid;}", ".fn88edj:before{border-top-width:var(--strokeWidthThin);}", ".f1lo4gz5:before{min-width:8px;}", ".f1iq3fds:after{border-top-style:solid;}", ".f1oiuz89:after{border-top-width:var(--strokeWidthThin);}", ".f108ofon:after{min-width:8px;}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".fuzzvh5:before{content:\"\";}", ".fncq426:before{margin-right:12px;}", ".f12b5w6c:before{margin-left:12px;}", ".f19fn84r:before{max-width:8px;}", ".f1io6r2y:after{margin-left:12px;}", ".fn6j208:after{margin-right:12px;}", ".fqc6z8f:after{content:\"\";}", ".f3tzpys:after{max-width:8px;}"]
+  "d": [".fly5x3f{width:100%;}", ".f163fonl::before{border-top-style:solid;}", ".f51yk4v::before{border-top-width:var(--strokeWidthThin);}", ".f13rof3u::before{min-width:8px;}", ".f8rth92::after{border-top-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f1iyka9k::after{min-width:8px;}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".f1wl9k8s::before{content:\"\";}", ".f1ojjlep::before{margin-right:12px;}", ".fk1kexq::before{margin-left:12px;}", ".f1he2m4d::before{max-width:8px;}", ".f12w1bnb::after{margin-left:12px;}", ".f1558wlj::after{margin-right:12px;}", ".f13zj6fq::after{content:\"\";}", ".f1ayce8x::after{max-width:8px;}"]
 });
 
 const useVerticalStyles = /*#__PURE__*/__styles({
   "base": {
     "Beiy3e4": "f1vx9l62",
     "sshi5w": "f16gbxbe",
-    "cqycoz": ["fiio4mc", "fc8z0qo"],
-    "D4ky5z": ["f54lnp5", "f5hao24"],
-    "Bxq2otu": "f11zhyjz",
-    "Dctjco": ["f1r2jemi", "f11olovk"],
-    "Bjz4wo8": ["f1o2ol1z", "f20720x"],
-    "B5p8dqe": "f14bbtgr"
+    "m598lv": ["f1yq6w5o", "f1jpmc5p"],
+    "B4f6apu": ["f9sc749", "f1x8pvcy"],
+    "zkzzav": "fhkwbjy",
+    "Barhvk9": ["flthirb", "ftkbnf5"],
+    "Ihftqj": ["f13hvwk3", "f1en4csx"],
+    "Bde111x": "f19onpk6"
   },
   "inset": {
     "B6of3ja": "f1xdg43u",
@@ -139,23 +146,23 @@ const useVerticalStyles = /*#__PURE__*/__styles({
     "sshi5w": "f1tjaq3g"
   },
   "start": {
-    "rurcny": "fuzzvh5",
-    "z1nrnc": "f1xy8239",
-    "B5kj21": "f1hheky8",
-    "Brd3o3m": "f1mz1b17"
+    "Ftih45": "f1wl9k8s",
+    "susq4k": "fg2pwug",
+    "Bbdr6tz": "fkjtzyi",
+    "B4rk6o": "f8vk40g"
   },
   "center": {
-    "z1nrnc": "f1xy8239",
-    "Brd3o3m": "f1mz1b17"
+    "susq4k": "fg2pwug",
+    "B4rk6o": "f8vk40g"
   },
   "end": {
-    "z1nrnc": "f1xy8239",
-    "Bs6t6z0": "fqc6z8f",
-    "Brd3o3m": "f1mz1b17",
-    "iiodbw": "fp342oa"
+    "susq4k": "fg2pwug",
+    "Bsft5z2": "f13zj6fq",
+    "B4rk6o": "f8vk40g",
+    "gn64ia": "fqg5mu5"
   }
 }, {
-  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16gbxbe{min-height:20px;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f54lnp5:before{border-right-width:var(--strokeWidthThin);}", ".f5hao24:before{border-left-width:var(--strokeWidthThin);}", ".f11zhyjz:before{min-height:8px;}", ".f1r2jemi:after{border-right-style:solid;}", ".f11olovk:after{border-left-style:solid;}", ".f1o2ol1z:after{border-right-width:var(--strokeWidthThin);}", ".f20720x:after{border-left-width:var(--strokeWidthThin);}", ".f14bbtgr:after{min-height:8px;}", ".f1xdg43u{margin-top:12px;}", ".f1jlhsmd{margin-bottom:12px;}", ".f1tjaq3g{min-height:84px;}", ".fuzzvh5:before{content:\"\";}", ".f1xy8239:before{margin-bottom:12px;}", ".f1hheky8:before{max-height:8px;}", ".f1mz1b17:after{margin-top:12px;}", ".fqc6z8f:after{content:\"\";}", ".fp342oa:after{max-height:8px;}"]
+  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16gbxbe{min-height:20px;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f9sc749::before{border-right-width:var(--strokeWidthThin);}", ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}", ".fhkwbjy::before{min-height:8px;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f19onpk6::after{min-height:8px;}", ".f1xdg43u{margin-top:12px;}", ".f1jlhsmd{margin-bottom:12px;}", ".f1tjaq3g{min-height:84px;}", ".f1wl9k8s::before{content:\"\";}", ".fg2pwug::before{margin-bottom:12px;}", ".fkjtzyi::before{max-height:8px;}", ".f8vk40g::after{margin-top:12px;}", ".f13zj6fq::after{content:\"\";}", ".fqg5mu5::after{max-height:8px;}"]
 });
 
 export const useDividerStyles_unstable = state => {
@@ -168,12 +175,17 @@ export const useDividerStyles_unstable = state => {
     inset,
     vertical
   } = state;
-  state.root.className = mergeClasses(dividerClassName, // Base styles
+  state.root.className = mergeClasses(dividerClassNames.root, // Base styles
   baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles
   !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles
   vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles
   state.root.children === undefined && baseStyles.childless, // User provided class name
   state.root.className);
+
+  if (state.wrapper) {
+    state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);
+  }
+
   return state;
 };
 //# sourceMappingURL=useDividerStyles.js.map

package/lib/components/Divider/useDividerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,EAAuB,UAAvB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP,MAAM,cAAc,GAAG,MAAvB;AACA,MAAM,YAAY,GAAG,MAArB;AACA,MAAM,iBAAiB,GAAG,KAA1B;AACA,MAAM,iBAAiB,GAAG,MAA1B;;AAEA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAkGA,MAAM,mBAAmB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;;AAwDA,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AA8DA,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,gBAAgB,GAAG,mBAAmB,EAA5C;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,YAAF;AAAgB,IAAA,UAAhB;AAA4B,IAAA,KAA5B;AAAmC,IAAA;AAAnC,MAAgD,KAAtD;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBADiC,EAGjC;AACA,EAAA,UAAU,CAAC,IAJsB,EAKjC,UAAU,CAAC,YAAD,CALuB,EAMjC,UAAU,IAAI,UAAU,CAAC,UAAD,CANS,EAQjC;AACA,GAAC,QAAD,IAAa,gBAAgB,CAAC,IATG,EAUjC,CAAC,QAAD,IAAa,KAAb,IAAsB,gBAAgB,CAAC,KAVN,EAWjC,CAAC,QAAD,IAAa,gBAAgB,CAAC,YAAD,CAXI,EAajC;AACA,EAAA,QAAQ,IAAI,cAAc,CAAC,IAdM,EAejC,QAAQ,IAAI,KAAZ,IAAqB,cAAc,CAAC,KAfH,EAgBjC,QAAQ,IAAI,cAAc,CAAC,YAAD,CAhBO,EAiBjC,QAAQ,IAAI,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAApC,IAAiD,cAAc,CAAC,YAjB/B,EAmBjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAAxB,IAAqC,UAAU,CAAC,SApBf,EAsBjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAvBsB,CAAnC;AA0BA,SAAO,KAAP;AACD,CAlCM","sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerState } from './Divider.types';\n\nexport const dividerClassName = 'fui-Divider';\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'row',\n    flexGrow: 1,\n    position: 'relative',\n\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n    textAlign: 'center',\n\n    color: tokens.colorNeutralForeground2,\n\n    ':before': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n\n    ':after': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n  },\n\n  // Childless styles\n  childless: {\n    ':before': {\n      marginBottom: 0,\n      marginRight: 0,\n    },\n\n    ':after': {\n      marginLeft: 0,\n      marginTop: 0,\n    },\n  },\n\n  // Alignment variations\n  start: {\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  center: {\n    ':before': {\n      content: '\"\"',\n    },\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  end: {\n    ':before': {\n      content: '\"\"',\n    },\n  },\n\n  // Appearance variations\n  brand: {\n    color: tokens.colorBrandForeground1,\n\n    ':before': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n  },\n  subtle: {\n    ':before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n  },\n  strong: {\n    ':before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n});\n\nconst useHorizontalStyles = makeStyles({\n  // Base styles\n  base: {\n    width: '100%',\n\n    ':before': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n\n    ':after': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    paddingLeft: insetSpacing,\n    paddingRight: insetSpacing,\n  },\n\n  // Alignment variations\n  start: {\n    ':before': {\n      content: '\"\"',\n      marginRight: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n\n    ':after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  center: {\n    ':before': {\n      marginRight: contentSpacing,\n    },\n    ':after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  end: {\n    ':before': {\n      marginRight: contentSpacing,\n    },\n    ':after': {\n      content: '\"\"',\n      marginLeft: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n  },\n});\n\nconst useVerticalStyles = makeStyles({\n  // Base styles\n  base: {\n    flexDirection: 'column',\n    minHeight: '20px',\n\n    ':before': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n\n    ':after': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    marginTop: insetSpacing,\n    marginBottom: insetSpacing,\n  },\n\n  // With children styles\n  withChildren: {\n    minHeight: '84px',\n  },\n\n  // Alignment variations\n  start: {\n    ':before': {\n      content: '\"\"',\n      marginBottom: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n\n    ':after': {\n      marginTop: contentSpacing,\n    },\n  },\n  center: {\n    ':before': {\n      marginBottom: contentSpacing,\n    },\n    ':after': {\n      marginTop: contentSpacing,\n    },\n  },\n  end: {\n    ':before': {\n      marginBottom: contentSpacing,\n    },\n    ':after': {\n      content: '\"\"',\n      marginTop: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n  },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  const baseStyles = useBaseStyles();\n  const horizontalStyles = useHorizontalStyles();\n  const verticalStyles = useVerticalStyles();\n\n  const { alignContent, appearance, inset, vertical } = state;\n\n  state.root.className = mergeClasses(\n    dividerClassName,\n\n    // Base styles\n    baseStyles.base,\n    baseStyles[alignContent],\n    appearance && baseStyles[appearance],\n\n    // Horizontal styles\n    !vertical && horizontalStyles.base,\n    !vertical && inset && horizontalStyles.inset,\n    !vertical && horizontalStyles[alignContent],\n\n    // Vertical styles\n    vertical && verticalStyles.base,\n    vertical && inset && verticalStyles.inset,\n    vertical && verticalStyles[alignContent],\n    vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n    // Childless styles\n    state.root.children === undefined && baseStyles.childless,\n\n    // User provided class name\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,EAAuB,UAAvB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE,aADuD;EAE7D,OAAO,EAAE;AAFoD,CAAxD;AAKP,MAAM,cAAc,GAAG,MAAvB;AACA,MAAM,YAAY,GAAG,MAArB;AACA,MAAM,iBAAiB,GAAG,KAA1B;AACA,MAAM,iBAAiB,GAAG,MAA1B;;AAEA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;;AA6GA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;;AAwDA,MAAM,iBAAiB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA1B;;AA8DA,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EAEA,MAAM;IAAE,YAAF;IAAgB,UAAhB;IAA4B,KAA5B;IAAmC;EAAnC,IAAgD,KAAtD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAGjC;EACA,UAAU,CAAC,IAJsB,EAKjC,UAAU,CAAC,YAAD,CALuB,EAMjC,UAAU,IAAI,UAAU,CAAC,UAAD,CANS,EAQjC;EACA,CAAC,QAAD,IAAa,gBAAgB,CAAC,IATG,EAUjC,CAAC,QAAD,IAAa,KAAb,IAAsB,gBAAgB,CAAC,KAVN,EAWjC,CAAC,QAAD,IAAa,gBAAgB,CAAC,YAAD,CAXI,EAajC;EACA,QAAQ,IAAI,cAAc,CAAC,IAdM,EAejC,QAAQ,IAAI,KAAZ,IAAqB,cAAc,CAAC,KAfH,EAgBjC,QAAQ,IAAI,cAAc,CAAC,YAAD,CAhBO,EAiBjC,QAAQ,IAAI,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAApC,IAAiD,cAAc,CAAC,YAjB/B,EAmBjC;EACA,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAAxB,IAAqC,UAAU,CAAC,SApBf,EAsBjC;EACA,KAAK,CAAC,IAAN,CAAW,SAvBsB,CAAnC;;EA0BA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,iBAAiB,CAAC,OAAnB,EAA4B,KAAK,CAAC,OAAN,CAAc,SAA1C,CAAtC;EACD;;EAED,OAAO,KAAP;AACD,CAtCM","sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerSlots, DividerState } from './Divider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-Divider',\n  wrapper: 'fui-Divider__wrapper',\n};\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'row',\n    flexGrow: 1,\n    position: 'relative',\n\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n    textAlign: 'center',\n\n    '::before': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n    },\n\n    '::after': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n    },\n  },\n\n  // Childless styles\n  childless: {\n    '::before': {\n      marginBottom: 0,\n      marginRight: 0,\n    },\n\n    '::after': {\n      marginLeft: 0,\n      marginTop: 0,\n    },\n  },\n\n  // Alignment variations\n  start: {\n    '::after': {\n      content: '\"\"',\n    },\n  },\n  center: {\n    '::before': {\n      content: '\"\"',\n    },\n    '::after': {\n      content: '\"\"',\n    },\n  },\n  end: {\n    '::before': {\n      content: '\"\"',\n    },\n  },\n\n  // Appearance variations\n  brand: {\n    color: tokens.colorBrandForeground1,\n\n    '::before': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n  },\n  default: {\n    color: tokens.colorNeutralForeground2,\n\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n  },\n  subtle: {\n    color: tokens.colorNeutralForeground2,\n\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n  },\n  strong: {\n    color: tokens.colorNeutralForeground2,\n\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    '::after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n});\n\nconst useHorizontalStyles = makeStyles({\n  // Base styles\n  base: {\n    width: '100%',\n\n    '::before': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n\n    '::after': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    paddingLeft: insetSpacing,\n    paddingRight: insetSpacing,\n  },\n\n  // Alignment variations\n  start: {\n    '::before': {\n      content: '\"\"',\n      marginRight: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n\n    '::after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  center: {\n    '::before': {\n      marginRight: contentSpacing,\n    },\n    '::after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  end: {\n    '::before': {\n      marginRight: contentSpacing,\n    },\n    '::after': {\n      content: '\"\"',\n      marginLeft: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n  },\n});\n\nconst useVerticalStyles = makeStyles({\n  // Base styles\n  base: {\n    flexDirection: 'column',\n    minHeight: '20px',\n\n    '::before': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n\n    '::after': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    marginTop: insetSpacing,\n    marginBottom: insetSpacing,\n  },\n\n  // With children styles\n  withChildren: {\n    minHeight: '84px',\n  },\n\n  // Alignment variations\n  start: {\n    '::before': {\n      content: '\"\"',\n      marginBottom: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n\n    '::after': {\n      marginTop: contentSpacing,\n    },\n  },\n  center: {\n    '::before': {\n      marginBottom: contentSpacing,\n    },\n    '::after': {\n      marginTop: contentSpacing,\n    },\n  },\n  end: {\n    '::before': {\n      marginBottom: contentSpacing,\n    },\n    '::after': {\n      content: '\"\"',\n      marginTop: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n  },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  const baseStyles = useBaseStyles();\n  const horizontalStyles = useHorizontalStyles();\n  const verticalStyles = useVerticalStyles();\n\n  const { alignContent, appearance, inset, vertical } = state;\n\n  state.root.className = mergeClasses(\n    dividerClassNames.root,\n\n    // Base styles\n    baseStyles.base,\n    baseStyles[alignContent],\n    appearance && baseStyles[appearance],\n\n    // Horizontal styles\n    !vertical && horizontalStyles.base,\n    !vertical && inset && horizontalStyles.inset,\n    !vertical && horizontalStyles[alignContent],\n\n    // Vertical styles\n    vertical && verticalStyles.base,\n    vertical && inset && verticalStyles.inset,\n    vertical && verticalStyles[alignContent],\n    vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n    // Childless styles\n    state.root.children === undefined && baseStyles.childless,\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.wrapper) {\n    state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,2 +1,2 @@
-export * from './Divider';
+export { Divider, dividerClassNames, renderDivider_unstable, useDividerStyles_unstable, useDivider_unstable } from './Divider';
 //# sourceMappingURL=index.js.map