@fluentui/react-divider 9.75.0-experimental.css-modules.20261031-810ab07afb.0 → 9.75.1-experimental.positioning-engine.20261103-19efe125d1.0

package/CHANGELOG.md

@@ -1,20 +1,20 @@
 # Change Log - @fluentui/react-divider
 
-<!-- This log was last generated on Sat, 31 Oct 2026 11:08:43 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 03 Nov 2026 14:18:24 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
+## [9.75.1-experimental.positioning-engine.20261103-19efe125d1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0)
 
-Sat, 31 Oct 2026 11:08:43 GMT
+Tue, 03 Nov 2026 14:18:24 GMT
 
 ### Changes
 
-- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
-- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Release 9.75.1-experimental.positioning-engine.20261103-19efe125d1 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
+- Bump @fluentui/react-jsx-runtime to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 
 ## [9.7.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.7.6)
 

package/README.md

@@ -37,14 +37,3 @@ 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.
-
-## Opt-in CSS Modules styles
-
-The `use*Styles.styles.css` modules beside the existing Griffel hooks provide opt-in,
-layered CSS alternatives with the same exports. Configure the bundler to replace
-`.styles` with `.styles.css.ts` for source imports and `.styles.js` with
-`.styles.css.js` for built imports. Load CSS Modules as default class-name maps and
-retain the package CSS assets. Default component imports still use Griffel.
-Composed components require their own style alternatives; this does not remove
-all reachable Griffel dependencies. Browser, forced-colors, RTL, and visual-regression
-parity must be validated before switching defaults.

package/package.json

@@ -1,26 +1,23 @@
 {
   "name": "@fluentui/react-divider",
-  "version": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+  "version": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
   "description": "Fluent UI component to visually separate content.",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-shared-contexts": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-theme": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-utilities": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+    "@fluentui/react-jsx-runtime": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-shared-contexts": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-theme": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-utilities": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
     "@griffel/react": "^1.5.32",
-    "@swc/helpers": "^0.5.1",
-    "clsx": "^2.1.1"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",

package/lib/components/Divider/Divider.module.css

@@ -1,250 +0,0 @@
-@layer fluentui {
-  .root {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    position: relative;
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase200);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase200);
-    text-align: center;
-    &::before {
-      box-sizing: border-box;
-      display: flex;
-      flex-grow: 1;
-    }
-
-    &::after {
-      box-sizing: border-box;
-      display: flex;
-      flex-grow: 1;
-    }
-  }
-
-  .root:where(.start) {
-    &::after {
-      content: '';
-    }
-  }
-
-  .root:where(.center) {
-    &::before {
-      content: '';
-    }
-
-    &::after {
-      content: '';
-    }
-  }
-
-  .root:where(.end) {
-    &::before {
-      content: '';
-    }
-  }
-
-  .root:where(.brand) {
-    color: var(--colorBrandForeground1);
-    &::before {
-      border-top-color: var(--colorBrandStroke1);
-      border-right-color: var(--colorBrandStroke1);
-      border-bottom-color: var(--colorBrandStroke1);
-      border-left-color: var(--colorBrandStroke1);
-    }
-
-    &::after {
-      border-top-color: var(--colorBrandStroke1);
-      border-right-color: var(--colorBrandStroke1);
-      border-bottom-color: var(--colorBrandStroke1);
-      border-left-color: var(--colorBrandStroke1);
-    }
-  }
-
-  .root:where(.default) {
-    color: var(--colorNeutralForeground2);
-    &::before {
-      border-top-color: var(--colorNeutralStroke2);
-      border-right-color: var(--colorNeutralStroke2);
-      border-bottom-color: var(--colorNeutralStroke2);
-      border-left-color: var(--colorNeutralStroke2);
-    }
-
-    &::after {
-      border-top-color: var(--colorNeutralStroke2);
-      border-right-color: var(--colorNeutralStroke2);
-      border-bottom-color: var(--colorNeutralStroke2);
-      border-left-color: var(--colorNeutralStroke2);
-    }
-  }
-
-  .root:where(.subtle) {
-    color: var(--colorNeutralForeground3);
-    &::before {
-      border-top-color: var(--colorNeutralStroke3);
-      border-right-color: var(--colorNeutralStroke3);
-      border-bottom-color: var(--colorNeutralStroke3);
-      border-left-color: var(--colorNeutralStroke3);
-    }
-
-    &::after {
-      border-top-color: var(--colorNeutralStroke3);
-      border-right-color: var(--colorNeutralStroke3);
-      border-bottom-color: var(--colorNeutralStroke3);
-      border-left-color: var(--colorNeutralStroke3);
-    }
-  }
-
-  .root:where(.strong) {
-    color: var(--colorNeutralForeground1);
-    &::before {
-      border-top-color: var(--colorNeutralStroke1);
-      border-right-color: var(--colorNeutralStroke1);
-      border-bottom-color: var(--colorNeutralStroke1);
-      border-left-color: var(--colorNeutralStroke1);
-    }
-
-    &::after {
-      border-top-color: var(--colorNeutralStroke1);
-      border-right-color: var(--colorNeutralStroke1);
-      border-bottom-color: var(--colorNeutralStroke1);
-      border-left-color: var(--colorNeutralStroke1);
-    }
-  }
-
-  .root:where(.horizontal) {
-    width: 100%;
-    &::before {
-      border-top-style: solid;
-      border-top-width: var(--strokeWidthThin);
-      min-width: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      border-top-style: solid;
-      border-top-width: var(--strokeWidthThin);
-      min-width: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.horizontal.inset) {
-    padding-inline-start: var(--spacingHorizontalM);
-    padding-inline-end: var(--spacingHorizontalM);
-  }
-
-  .root:where(.horizontal.start) {
-    text-align: left;
-    &:dir(rtl) {
-      text-align: right;
-    }
-    &::before {
-      content: '';
-      margin-inline-end: var(--spacingHorizontalM);
-      max-width: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      margin-inline-start: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.horizontal.center) {
-    text-align: center;
-    &::before {
-      margin-inline-end: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      margin-inline-start: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.horizontal.end) {
-    text-align: right;
-    &:dir(rtl) {
-      text-align: left;
-    }
-    &::before {
-      margin-inline-end: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      content: '';
-      margin-inline-start: var(--spacingHorizontalM);
-      max-width: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.vertical) {
-    flex-direction: column;
-    min-height: var(--spacingHorizontalXL);
-    &::before {
-      border-inline-end-style: solid;
-      border-inline-end-width: var(--strokeWidthThin);
-      min-height: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      border-inline-end-style: solid;
-      border-inline-end-width: var(--strokeWidthThin);
-      min-height: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.vertical.inset) {
-    margin-top: var(--spacingHorizontalM);
-    margin-bottom: var(--spacingHorizontalM);
-  }
-
-  .root:where(.vertical.start) {
-    &::before {
-      content: '';
-      margin-bottom: var(--spacingHorizontalM);
-      max-height: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      margin-top: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.vertical.center) {
-    &::before {
-      margin-bottom: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      margin-top: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.vertical.end) {
-    &::before {
-      margin-bottom: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      content: '';
-      margin-top: var(--spacingHorizontalM);
-      max-height: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.vertical.withChildren) {
-    min-height: calc(var(--spacingVerticalXXXL) * 2 + var(--spacingVerticalXL));
-  }
-
-  .root:where(:not(.withChildren)) {
-    &::before {
-      margin-bottom: 0;
-      margin-inline-end: 0;
-    }
-
-    &::after {
-      margin-inline-start: 0;
-      margin-top: 0;
-    }
-  }
-}

package/lib/components/Divider/useDividerStyles.styles.css.js

@@ -1,13 +0,0 @@
-import { clsx } from "clsx";
-import styles from "./Divider.module.css";
-export const dividerClassNames = {
-    root: 'fui-Divider',
-    wrapper: 'fui-Divider__wrapper'
-};
-export const useDividerStyles_unstable = (state)=>{
-    state.root.className = clsx(dividerClassNames.root, styles.root, styles[state.alignContent], state.appearance && styles[state.appearance], styles[state.vertical ? 'vertical' : 'horizontal'], state.inset && styles.inset, state.root.children !== undefined && styles.withChildren, state.root.className);
-    if (state.wrapper) {
-        state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);
-    }
-    return state;
-};

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport styles from './Divider.module.css';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-Divider',\n  wrapper: 'fui-Divider__wrapper',\n};\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  state.root.className = clsx(\n    dividerClassNames.root,\n    styles.root,\n    styles[state.alignContent],\n    state.appearance && styles[state.appearance],\n    styles[state.vertical ? 'vertical' : 'horizontal'],\n    state.inset && styles.inset,\n    state.root.children !== undefined && styles.withChildren,\n    state.root.className,\n  );\n  if (state.wrapper) {\n    state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"names":["clsx","styles","dividerClassNames","root","wrapper","useDividerStyles_unstable","state","className","alignContent","appearance","vertical","inset","children","undefined","withChildren"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,4BAA4B,CAACC;IACxCA,MAAMH,IAAI,CAACI,SAAS,GAAGP,KACrBE,kBAAkBC,IAAI,EACtBF,OAAOE,IAAI,EACXF,MAAM,CAACK,MAAME,YAAY,CAAC,EAC1BF,MAAMG,UAAU,IAAIR,MAAM,CAACK,MAAMG,UAAU,CAAC,EAC5CR,MAAM,CAACK,MAAMI,QAAQ,GAAG,aAAa,aAAa,EAClDJ,MAAMK,KAAK,IAAIV,OAAOU,KAAK,EAC3BL,MAAMH,IAAI,CAACS,QAAQ,KAAKC,aAAaZ,OAAOa,YAAY,EACxDR,MAAMH,IAAI,CAACI,SAAS;IAEtB,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGP,KAAKE,kBAAkBE,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACnF;IAEA,OAAOD;AACT,EAAE"}

package/lib/components/Divider/useDividerStyles.styles.raw.css.js

@@ -1,13 +0,0 @@
-import { clsx } from "clsx";
-import styles from "./Divider.module.css";
-export const dividerClassNames = {
-    root: 'fui-Divider',
-    wrapper: 'fui-Divider__wrapper'
-};
-export const useDividerStyles_unstable = (state)=>{
-    state.root.className = clsx(dividerClassNames.root, styles.root, styles[state.alignContent], state.appearance && styles[state.appearance], styles[state.vertical ? 'vertical' : 'horizontal'], state.inset && styles.inset, state.root.children !== undefined && styles.withChildren, state.root.className);
-    if (state.wrapper) {
-        state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);
-    }
-    return state;
-};

package/lib/components/Divider/useDividerStyles.styles.raw.css.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport styles from './Divider.module.css';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-Divider',\n  wrapper: 'fui-Divider__wrapper',\n};\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  state.root.className = clsx(\n    dividerClassNames.root,\n    styles.root,\n    styles[state.alignContent],\n    state.appearance && styles[state.appearance],\n    styles[state.vertical ? 'vertical' : 'horizontal'],\n    state.inset && styles.inset,\n    state.root.children !== undefined && styles.withChildren,\n    state.root.className,\n  );\n  if (state.wrapper) {\n    state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"names":["clsx","styles","dividerClassNames","root","wrapper","useDividerStyles_unstable","state","className","alignContent","appearance","vertical","inset","children","undefined","withChildren"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,4BAA4B,CAACC;IACxCA,MAAMH,IAAI,CAACI,SAAS,GAAGP,KACrBE,kBAAkBC,IAAI,EACtBF,OAAOE,IAAI,EACXF,MAAM,CAACK,MAAME,YAAY,CAAC,EAC1BF,MAAMG,UAAU,IAAIR,MAAM,CAACK,MAAMG,UAAU,CAAC,EAC5CR,MAAM,CAACK,MAAMI,QAAQ,GAAG,aAAa,aAAa,EAClDJ,MAAMK,KAAK,IAAIV,OAAOU,KAAK,EAC3BL,MAAMH,IAAI,CAACS,QAAQ,KAAKC,aAAaZ,OAAOa,YAAY,EACxDR,MAAMH,IAAI,CAACI,SAAS;IAEtB,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,GAAGP,KAAKE,kBAAkBE,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACnF;IAEA,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/Divider/Divider.module.css

@@ -1,250 +0,0 @@
-@layer fluentui {
-  .root {
-    align-items: center;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    position: relative;
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase200);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase200);
-    text-align: center;
-    &::before {
-      box-sizing: border-box;
-      display: flex;
-      flex-grow: 1;
-    }
-
-    &::after {
-      box-sizing: border-box;
-      display: flex;
-      flex-grow: 1;
-    }
-  }
-
-  .root:where(.start) {
-    &::after {
-      content: '';
-    }
-  }
-
-  .root:where(.center) {
-    &::before {
-      content: '';
-    }
-
-    &::after {
-      content: '';
-    }
-  }
-
-  .root:where(.end) {
-    &::before {
-      content: '';
-    }
-  }
-
-  .root:where(.brand) {
-    color: var(--colorBrandForeground1);
-    &::before {
-      border-top-color: var(--colorBrandStroke1);
-      border-right-color: var(--colorBrandStroke1);
-      border-bottom-color: var(--colorBrandStroke1);
-      border-left-color: var(--colorBrandStroke1);
-    }
-
-    &::after {
-      border-top-color: var(--colorBrandStroke1);
-      border-right-color: var(--colorBrandStroke1);
-      border-bottom-color: var(--colorBrandStroke1);
-      border-left-color: var(--colorBrandStroke1);
-    }
-  }
-
-  .root:where(.default) {
-    color: var(--colorNeutralForeground2);
-    &::before {
-      border-top-color: var(--colorNeutralStroke2);
-      border-right-color: var(--colorNeutralStroke2);
-      border-bottom-color: var(--colorNeutralStroke2);
-      border-left-color: var(--colorNeutralStroke2);
-    }
-
-    &::after {
-      border-top-color: var(--colorNeutralStroke2);
-      border-right-color: var(--colorNeutralStroke2);
-      border-bottom-color: var(--colorNeutralStroke2);
-      border-left-color: var(--colorNeutralStroke2);
-    }
-  }
-
-  .root:where(.subtle) {
-    color: var(--colorNeutralForeground3);
-    &::before {
-      border-top-color: var(--colorNeutralStroke3);
-      border-right-color: var(--colorNeutralStroke3);
-      border-bottom-color: var(--colorNeutralStroke3);
-      border-left-color: var(--colorNeutralStroke3);
-    }
-
-    &::after {
-      border-top-color: var(--colorNeutralStroke3);
-      border-right-color: var(--colorNeutralStroke3);
-      border-bottom-color: var(--colorNeutralStroke3);
-      border-left-color: var(--colorNeutralStroke3);
-    }
-  }
-
-  .root:where(.strong) {
-    color: var(--colorNeutralForeground1);
-    &::before {
-      border-top-color: var(--colorNeutralStroke1);
-      border-right-color: var(--colorNeutralStroke1);
-      border-bottom-color: var(--colorNeutralStroke1);
-      border-left-color: var(--colorNeutralStroke1);
-    }
-
-    &::after {
-      border-top-color: var(--colorNeutralStroke1);
-      border-right-color: var(--colorNeutralStroke1);
-      border-bottom-color: var(--colorNeutralStroke1);
-      border-left-color: var(--colorNeutralStroke1);
-    }
-  }
-
-  .root:where(.horizontal) {
-    width: 100%;
-    &::before {
-      border-top-style: solid;
-      border-top-width: var(--strokeWidthThin);
-      min-width: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      border-top-style: solid;
-      border-top-width: var(--strokeWidthThin);
-      min-width: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.horizontal.inset) {
-    padding-inline-start: var(--spacingHorizontalM);
-    padding-inline-end: var(--spacingHorizontalM);
-  }
-
-  .root:where(.horizontal.start) {
-    text-align: left;
-    &:dir(rtl) {
-      text-align: right;
-    }
-    &::before {
-      content: '';
-      margin-inline-end: var(--spacingHorizontalM);
-      max-width: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      margin-inline-start: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.horizontal.center) {
-    text-align: center;
-    &::before {
-      margin-inline-end: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      margin-inline-start: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.horizontal.end) {
-    text-align: right;
-    &:dir(rtl) {
-      text-align: left;
-    }
-    &::before {
-      margin-inline-end: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      content: '';
-      margin-inline-start: var(--spacingHorizontalM);
-      max-width: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.vertical) {
-    flex-direction: column;
-    min-height: var(--spacingHorizontalXL);
-    &::before {
-      border-inline-end-style: solid;
-      border-inline-end-width: var(--strokeWidthThin);
-      min-height: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      border-inline-end-style: solid;
-      border-inline-end-width: var(--strokeWidthThin);
-      min-height: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.vertical.inset) {
-    margin-top: var(--spacingHorizontalM);
-    margin-bottom: var(--spacingHorizontalM);
-  }
-
-  .root:where(.vertical.start) {
-    &::before {
-      content: '';
-      margin-bottom: var(--spacingHorizontalM);
-      max-height: var(--spacingHorizontalS);
-    }
-
-    &::after {
-      margin-top: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.vertical.center) {
-    &::before {
-      margin-bottom: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      margin-top: var(--spacingHorizontalM);
-    }
-  }
-
-  .root:where(.vertical.end) {
-    &::before {
-      margin-bottom: var(--spacingHorizontalM);
-    }
-
-    &::after {
-      content: '';
-      margin-top: var(--spacingHorizontalM);
-      max-height: var(--spacingHorizontalS);
-    }
-  }
-
-  .root:where(.vertical.withChildren) {
-    min-height: calc(var(--spacingVerticalXXXL) * 2 + var(--spacingVerticalXL));
-  }
-
-  .root:where(:not(.withChildren)) {
-    &::before {
-      margin-bottom: 0;
-      margin-inline-end: 0;
-    }
-
-    &::after {
-      margin-inline-start: 0;
-      margin-top: 0;
-    }
-  }
-}

package/lib-commonjs/components/Divider/useDividerStyles.styles.css.cjs

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get dividerClassNames () {
-        return dividerClassNames;
-    },
-    get useDividerStyles_unstable () {
-        return useDividerStyles_unstable;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _clsx = require("clsx");
-const _Dividermodulecss = /*#__PURE__*/ _interop_require_default._(require("./Divider.module.css"));
-const dividerClassNames = {
-    root: 'fui-Divider',
-    wrapper: 'fui-Divider__wrapper'
-};
-const useDividerStyles_unstable = (state)=>{
-    state.root.className = (0, _clsx.clsx)(dividerClassNames.root, _Dividermodulecss.default.root, _Dividermodulecss.default[state.alignContent], state.appearance && _Dividermodulecss.default[state.appearance], _Dividermodulecss.default[state.vertical ? 'vertical' : 'horizontal'], state.inset && _Dividermodulecss.default.inset, state.root.children !== undefined && _Dividermodulecss.default.withChildren, state.root.className);
-    if (state.wrapper) {
-        state.wrapper.className = (0, _clsx.clsx)(dividerClassNames.wrapper, state.wrapper.className);
-    }
-    return state;
-};

package/lib-commonjs/components/Divider/useDividerStyles.styles.css.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport styles from './Divider.module.css';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-Divider',\n  wrapper: 'fui-Divider__wrapper',\n};\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  state.root.className = clsx(\n    dividerClassNames.root,\n    styles.root,\n    styles[state.alignContent],\n    state.appearance && styles[state.appearance],\n    styles[state.vertical ? 'vertical' : 'horizontal'],\n    state.inset && styles.inset,\n    state.root.children !== undefined && styles.withChildren,\n    state.root.className,\n  );\n  if (state.wrapper) {\n    state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"names":["clsx","styles","dividerClassNames","root","wrapper","useDividerStyles_unstable","state","className","alignContent","appearance","vertical","inset","children","undefined","withChildren"],"mappings":";;;;;;;;;;;QAKaE;;;;;;;;sBALQ,OAAO;2EAGT,uBAAuB;AAEnC,0BAAwD;IAC7DC,MAAM;IACNC,SAAS;AACX,EAAE;AAEK,MAAMC,4BAA4B,CAACC;IACxCA,MAAMH,IAAI,CAACI,SAAS,OAAGP,UAAAA,EACrBE,kBAAkBC,IAAI,EACtBF,yBAAAA,CAAOE,IAAI,EACXF,yBAAM,CAACK,MAAME,YAAY,CAAC,EAC1BF,MAAMG,UAAU,IAAIR,yBAAM,CAACK,MAAMG,UAAU,CAAC,EAC5CR,yBAAM,CAACK,MAAMI,QAAQ,GAAG,aAAa,aAAa,EAClDJ,MAAMK,KAAK,IAAIV,yBAAAA,CAAOU,KAAK,EAC3BL,MAAMH,IAAI,CAACS,QAAQ,KAAKC,aAAaZ,yBAAAA,CAAOa,YAAY,EACxDR,MAAMH,IAAI,CAACI,SAAS;IAEtB,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,OAAGP,UAAAA,EAAKE,kBAAkBE,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACnF;IAEA,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/Divider/useDividerStyles.styles.raw.css.cjs

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get dividerClassNames () {
-        return dividerClassNames;
-    },
-    get useDividerStyles_unstable () {
-        return useDividerStyles_unstable;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _clsx = require("clsx");
-const _Dividermodulecss = /*#__PURE__*/ _interop_require_default._(require("./Divider.module.css"));
-const dividerClassNames = {
-    root: 'fui-Divider',
-    wrapper: 'fui-Divider__wrapper'
-};
-const useDividerStyles_unstable = (state)=>{
-    state.root.className = (0, _clsx.clsx)(dividerClassNames.root, _Dividermodulecss.default.root, _Dividermodulecss.default[state.alignContent], state.appearance && _Dividermodulecss.default[state.appearance], _Dividermodulecss.default[state.vertical ? 'vertical' : 'horizontal'], state.inset && _Dividermodulecss.default.inset, state.root.children !== undefined && _Dividermodulecss.default.withChildren, state.root.className);
-    if (state.wrapper) {
-        state.wrapper.className = (0, _clsx.clsx)(dividerClassNames.wrapper, state.wrapper.className);
-    }
-    return state;
-};

package/lib-commonjs/components/Divider/useDividerStyles.styles.raw.css.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from './Divider.types';\nimport styles from './Divider.module.css';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-Divider',\n  wrapper: 'fui-Divider__wrapper',\n};\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  state.root.className = clsx(\n    dividerClassNames.root,\n    styles.root,\n    styles[state.alignContent],\n    state.appearance && styles[state.appearance],\n    styles[state.vertical ? 'vertical' : 'horizontal'],\n    state.inset && styles.inset,\n    state.root.children !== undefined && styles.withChildren,\n    state.root.className,\n  );\n  if (state.wrapper) {\n    state.wrapper.className = clsx(dividerClassNames.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"names":["clsx","styles","dividerClassNames","root","wrapper","useDividerStyles_unstable","state","className","alignContent","appearance","vertical","inset","children","undefined","withChildren"],"mappings":";;;;;;;;;;;QAKaE;;;;;;;;sBALQ,OAAO;2EAGT,uBAAuB;AAEnC,0BAAwD;IAC7DC,MAAM;IACNC,SAAS;AACX,EAAE;AAEK,MAAMC,4BAA4B,CAACC;IACxCA,MAAMH,IAAI,CAACI,SAAS,OAAGP,UAAAA,EACrBE,kBAAkBC,IAAI,EACtBF,yBAAAA,CAAOE,IAAI,EACXF,yBAAM,CAACK,MAAME,YAAY,CAAC,EAC1BF,MAAMG,UAAU,IAAIR,yBAAM,CAACK,MAAMG,UAAU,CAAC,EAC5CR,yBAAM,CAACK,MAAMI,QAAQ,GAAG,aAAa,aAAa,EAClDJ,MAAMK,KAAK,IAAIV,yBAAAA,CAAOU,KAAK,EAC3BL,MAAMH,IAAI,CAACS,QAAQ,KAAKC,aAAaZ,yBAAAA,CAAOa,YAAY,EACxDR,MAAMH,IAAI,CAACI,SAAS;IAEtB,IAAID,MAAMF,OAAO,EAAE;QACjBE,MAAMF,OAAO,CAACG,SAAS,OAAGP,UAAAA,EAAKE,kBAAkBE,OAAO,EAAEE,MAAMF,OAAO,CAACG,SAAS;IACnF;IAEA,OAAOD;AACT,EAAE"}