@fluentui/react-migration-v8-v9 9.8.8 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-migration-v8-v9
 
-This log was last generated on Wed, 16 Jul 2025 13:51:52 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.9.0)
+
+Thu, 17 Jul 2025 13:45:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.8.8..@fluentui/react-migration-v8-v9_v9.9.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-components to v9.67.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.8.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.8.8)
 
-Wed, 16 Jul 2025 13:51:52 GMT 
+Wed, 16 Jul 2025 13:52:50 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.8.7..@fluentui/react-migration-v8-v9_v9.8.8)
 
 ### Patches

package/lib/components/Checkbox/Checkbox.styles.raw.js

@@ -0,0 +1,6 @@
+import { makeStyles } from '@fluentui/react-components';
+export const useCheckboxStyles = makeStyles({
+    root: {
+        display: 'flex'
+    }
+});

package/lib/components/Checkbox/Checkbox.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useCheckboxStyles = makeStyles({\n  root: {\n    display: 'flex',\n  },\n});\n"],"names":["makeStyles","useCheckboxStyles","root","display"],"rangeMappings":";;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,OAAO,MAAMC,oBAAoBD,WAAW;IAC1CE,MAAM;QACJC,SAAS;IACX;AACF,GAAG"}

package/lib/components/Stack/StackItemShim.styles.raw.js

@@ -0,0 +1,114 @@
+import { makeStyles } from '@griffel/react';
+export const useStackItemShimStyles = makeStyles({
+    root: {
+        height: 'auto',
+        width: 'auto'
+    },
+    disableShrink: {
+        flexShrink: 0
+    },
+    verticalFill: {
+        height: '100%'
+    }
+});
+export const useFlexAlignSelfStyles = makeStyles({
+    auto: {
+        alignSelf: 'auto'
+    },
+    baseline: {
+        alignSelf: 'baseline'
+    },
+    center: {
+        alignSelf: 'center'
+    },
+    start: {
+        alignSelf: 'flex-start'
+    },
+    end: {
+        alignSelf: 'flex-end'
+    },
+    stretch: {
+        alignSelf: 'stretch'
+    }
+});
+export const useFlexGrowStyles = makeStyles({
+    inherit: {
+        flexGrow: 'inherit'
+    },
+    initial: {
+        flexGrow: 'initial'
+    },
+    revert: {
+        flexGrow: 'revert'
+    },
+    unset: {
+        flexGrow: 'unset'
+    },
+    '1': {
+        flexGrow: 1
+    },
+    '2': {
+        flexGrow: 2
+    },
+    '3': {
+        flexGrow: 3
+    }
+});
+export const useFlexShrinkStyles = makeStyles({
+    inherit: {
+        flexShrink: 'inherit'
+    },
+    initial: {
+        flexShrink: 'initial'
+    },
+    revert: {
+        flexShrink: 'revert'
+    },
+    unset: {
+        flexShrink: 'unset'
+    },
+    0: {
+        flexShrink: 0
+    },
+    1: {
+        flexShrink: 1
+    },
+    2: {
+        flexShrink: 2
+    }
+});
+export const useFlexOrderStyles = makeStyles({
+    inherit: {
+        order: 'inherit'
+    },
+    initial: {
+        order: 'initial'
+    },
+    unset: {
+        order: 'unset'
+    },
+    revert: {
+        order: 'revert'
+    },
+    '-3': {
+        order: -3
+    },
+    '-2': {
+        order: -2
+    },
+    '-1': {
+        order: -1
+    },
+    '0': {
+        order: 0
+    },
+    '1': {
+        order: 1
+    },
+    '2': {
+        order: 2
+    },
+    '3': {
+        order: 3
+    }
+});

package/lib/components/Stack/StackItemShim.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stack/StackItemShim.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\n\nexport const useStackItemShimStyles = makeStyles({\n  root: {\n    height: 'auto',\n    width: 'auto',\n  },\n  disableShrink: {\n    flexShrink: 0,\n  },\n  verticalFill: {\n    height: '100%',\n  },\n});\n\nexport const useFlexAlignSelfStyles = makeStyles({\n  auto: {\n    alignSelf: 'auto',\n  },\n  baseline: {\n    alignSelf: 'baseline',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n  start: {\n    alignSelf: 'flex-start',\n  },\n  end: {\n    alignSelf: 'flex-end',\n  },\n  stretch: {\n    alignSelf: 'stretch',\n  },\n});\n\nexport const useFlexGrowStyles = makeStyles({\n  inherit: {\n    flexGrow: 'inherit',\n  },\n  initial: {\n    flexGrow: 'initial',\n  },\n  revert: {\n    flexGrow: 'revert',\n  },\n  unset: {\n    flexGrow: 'unset',\n  },\n  '1': {\n    flexGrow: 1,\n  },\n  '2': {\n    flexGrow: 2,\n  },\n  '3': {\n    flexGrow: 3,\n  },\n});\n\nexport const useFlexShrinkStyles = makeStyles({\n  inherit: {\n    flexShrink: 'inherit',\n  },\n  initial: {\n    flexShrink: 'initial',\n  },\n  revert: {\n    flexShrink: 'revert',\n  },\n  unset: {\n    flexShrink: 'unset',\n  },\n  0: {\n    flexShrink: 0,\n  },\n  1: {\n    flexShrink: 1,\n  },\n  2: {\n    flexShrink: 2,\n  },\n});\n\nexport const useFlexOrderStyles = makeStyles({\n  inherit: {\n    order: 'inherit',\n  },\n  initial: {\n    order: 'initial',\n  },\n  unset: {\n    order: 'unset',\n  },\n  revert: {\n    order: 'revert',\n  },\n  '-3': {\n    order: -3,\n  },\n  '-2': {\n    order: -2,\n  },\n  '-1': {\n    order: -1,\n  },\n  '0': {\n    order: 0,\n  },\n  '1': {\n    order: 1,\n  },\n  '2': {\n    order: 2,\n  },\n  '3': {\n    order: 3,\n  },\n});\n"],"names":["makeStyles","useStackItemShimStyles","root","height","width","disableShrink","flexShrink","verticalFill","useFlexAlignSelfStyles","auto","alignSelf","baseline","center","start","end","stretch","useFlexGrowStyles","inherit","flexGrow","initial","revert","unset","useFlexShrinkStyles","useFlexOrderStyles","order"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAE5C,OAAO,MAAMC,yBAAyBD,WAAW;IAC/CE,MAAM;QACJC,QAAQ;QACRC,OAAO;IACT;IACAC,eAAe;QACbC,YAAY;IACd;IACAC,cAAc;QACZJ,QAAQ;IACV;AACF,GAAG;AAEH,OAAO,MAAMK,yBAAyBR,WAAW;IAC/CS,MAAM;QACJC,WAAW;IACb;IACAC,UAAU;QACRD,WAAW;IACb;IACAE,QAAQ;QACNF,WAAW;IACb;IACAG,OAAO;QACLH,WAAW;IACb;IACAI,KAAK;QACHJ,WAAW;IACb;IACAK,SAAS;QACPL,WAAW;IACb;AACF,GAAG;AAEH,OAAO,MAAMM,oBAAoBhB,WAAW;IAC1CiB,SAAS;QACPC,UAAU;IACZ;IACAC,SAAS;QACPD,UAAU;IACZ;IACAE,QAAQ;QACNF,UAAU;IACZ;IACAG,OAAO;QACLH,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;AACF,GAAG;AAEH,OAAO,MAAMI,sBAAsBtB,WAAW;IAC5CiB,SAAS;QACPX,YAAY;IACd;IACAa,SAAS;QACPb,YAAY;IACd;IACAc,QAAQ;QACNd,YAAY;IACd;IACAe,OAAO;QACLf,YAAY;IACd;IACA,GAAG;QACDA,YAAY;IACd;IACA,GAAG;QACDA,YAAY;IACd;IACA,GAAG;QACDA,YAAY;IACd;AACF,GAAG;AAEH,OAAO,MAAMiB,qBAAqBvB,WAAW;IAC3CiB,SAAS;QACPO,OAAO;IACT;IACAL,SAAS;QACPK,OAAO;IACT;IACAH,OAAO;QACLG,OAAO;IACT;IACAJ,QAAQ;QACNI,OAAO;IACT;IACA,MAAM;QACJA,OAAO,CAAC;IACV;IACA,MAAM;QACJA,OAAO,CAAC;IACV;IACA,MAAM;QACJA,OAAO,CAAC;IACV;IACA,KAAK;QACHA,OAAO;IACT;IACA,KAAK;QACHA,OAAO;IACT;IACA,KAAK;QACHA,OAAO;IACT;IACA,KAAK;QACHA,OAAO;IACT;AACF,GAAG"}

package/lib/components/Stack/StackShim.styles.raw.js

@@ -0,0 +1,133 @@
+import { makeStyles } from '@griffel/react';
+export const useStackStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'nowrap',
+        width: 'auto',
+        height: 'auto',
+        boxSizing: 'border-box',
+        '> *': {
+            textOverflow: 'ellipsis'
+        },
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        '> *:not(.ms-StackItem)': {
+            flexShrink: 1
+        }
+    },
+    horizontal: {
+        flexDirection: 'row'
+    },
+    verticalFill: {
+        height: '100%'
+    },
+    reversedVertical: {
+        flexDirection: 'column-reverse'
+    },
+    reversedHorizontal: {
+        flexDirection: 'row-reverse'
+    },
+    disableShrink: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        '> *:not(.ms-StackItem)': {
+            flexShrink: 0
+        }
+    },
+    wrap: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        height: '100%'
+    },
+    inner: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        boxSizing: 'border-box',
+        maxWidth: '100vw',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        '> *:not(.ms-StackItem)': {
+            flexShrink: 1
+        }
+    },
+    innerWidth: {
+        width: '100%'
+    }
+});
+export const useFlexGrowStyles = makeStyles({
+    inherit: {
+        flexGrow: 'inherit'
+    },
+    initial: {
+        flexGrow: 'initial'
+    },
+    revert: {
+        flexGrow: 'revert'
+    },
+    unset: {
+        flexGrow: 'unset'
+    },
+    '1': {
+        flexGrow: 1
+    },
+    '2': {
+        flexGrow: 2
+    },
+    '3': {
+        flexGrow: 3
+    }
+});
+export const useFlexAlignItemsStyles = makeStyles({
+    baseline: {
+        alignItems: 'baseline'
+    },
+    center: {
+        alignItems: 'center'
+    },
+    start: {
+        alignItems: 'flex-start'
+    },
+    end: {
+        alignItems: 'flex-end'
+    },
+    stretch: {
+        alignItems: 'stretch'
+    },
+    'space-between': {
+        alignItems: 'space-between'
+    },
+    'space-around': {
+        alignItems: 'space-around'
+    },
+    'space-evenly': {
+        alignItems: 'space-evenly'
+    }
+});
+export const useFlexJustifyContentStyles = makeStyles({
+    baseline: {
+        justifyContent: 'baseline'
+    },
+    center: {
+        justifyContent: 'center'
+    },
+    start: {
+        justifyContent: 'flex-start'
+    },
+    end: {
+        justifyContent: 'flex-end'
+    },
+    stretch: {
+        justifyContent: 'stretch'
+    },
+    'space-between': {
+        justifyContent: 'space-between'
+    },
+    'space-around': {
+        justifyContent: 'space-around'
+    },
+    'space-evenly': {
+        justifyContent: 'space-evenly'
+    }
+});

package/lib/components/Stack/StackShim.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stack/StackShim.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\n\nexport const useStackStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'nowrap',\n    width: 'auto',\n    height: 'auto',\n    boxSizing: 'border-box',\n    '> *': {\n      textOverflow: 'ellipsis',\n    },\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: 'row',\n  },\n  verticalFill: {\n    height: '100%',\n  },\n  reversedVertical: {\n    flexDirection: 'column-reverse',\n  },\n  reversedHorizontal: {\n    flexDirection: 'row-reverse',\n  },\n  disableShrink: {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 0,\n    },\n  },\n  wrap: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    height: '100%',\n  },\n  inner: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'wrap',\n    boxSizing: 'border-box',\n    maxWidth: '100vw',\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 1,\n    },\n  },\n  innerWidth: {\n    width: '100%',\n  },\n});\n\nexport const useFlexGrowStyles = makeStyles({\n  inherit: {\n    flexGrow: 'inherit',\n  },\n  initial: {\n    flexGrow: 'initial',\n  },\n  revert: {\n    flexGrow: 'revert',\n  },\n  unset: {\n    flexGrow: 'unset',\n  },\n  '1': {\n    flexGrow: 1,\n  },\n  '2': {\n    flexGrow: 2,\n  },\n  '3': {\n    flexGrow: 3,\n  },\n});\n\nexport const useFlexAlignItemsStyles = makeStyles({\n  baseline: {\n    alignItems: 'baseline',\n  },\n  center: {\n    alignItems: 'center',\n  },\n  start: {\n    alignItems: 'flex-start',\n  },\n  end: {\n    alignItems: 'flex-end',\n  },\n  stretch: {\n    alignItems: 'stretch',\n  },\n  'space-between': {\n    alignItems: 'space-between',\n  },\n\n  'space-around': {\n    alignItems: 'space-around',\n  },\n  'space-evenly': {\n    alignItems: 'space-evenly',\n  },\n});\n\nexport const useFlexJustifyContentStyles = makeStyles({\n  baseline: {\n    justifyContent: 'baseline',\n  },\n  center: {\n    justifyContent: 'center',\n  },\n  start: {\n    justifyContent: 'flex-start',\n  },\n  end: {\n    justifyContent: 'flex-end',\n  },\n  stretch: {\n    justifyContent: 'stretch',\n  },\n  'space-between': {\n    justifyContent: 'space-between',\n  },\n\n  'space-around': {\n    justifyContent: 'space-around',\n  },\n  'space-evenly': {\n    justifyContent: 'space-evenly',\n  },\n});\n"],"names":["makeStyles","useStackStyles","root","display","flexDirection","flexWrap","width","height","boxSizing","textOverflow","flexShrink","horizontal","verticalFill","reversedVertical","reversedHorizontal","disableShrink","wrap","inner","maxWidth","innerWidth","useFlexGrowStyles","inherit","flexGrow","initial","revert","unset","useFlexAlignItemsStyles","baseline","alignItems","center","start","end","stretch","useFlexJustifyContentStyles","justifyContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAE5C,OAAO,MAAMC,iBAAiBD,WAAW;IACvCE,MAAM;QACJC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,WAAW;QACX,OAAO;YACLC,cAAc;QAChB;QACA,6DAA6D;QAC7D,aAAa;QACb,0BAA0B;YACxBC,YAAY;QACd;IACF;IACAC,YAAY;QACVP,eAAe;IACjB;IACAQ,cAAc;QACZL,QAAQ;IACV;IACAM,kBAAkB;QAChBT,eAAe;IACjB;IACAU,oBAAoB;QAClBV,eAAe;IACjB;IACAW,eAAe;QACb,6DAA6D;QAC7D,aAAa;QACb,0BAA0B;YACxBL,YAAY;QACd;IACF;IACAM,MAAM;QACJb,SAAS;QACTE,UAAU;QACVE,QAAQ;IACV;IACAU,OAAO;QACLd,SAAS;QACTC,eAAe;QACfC,UAAU;QACVG,WAAW;QACXU,UAAU;QACV,6DAA6D;QAC7D,aAAa;QACb,0BAA0B;YACxBR,YAAY;QACd;IACF;IACAS,YAAY;QACVb,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMc,oBAAoBpB,WAAW;IAC1CqB,SAAS;QACPC,UAAU;IACZ;IACAC,SAAS;QACPD,UAAU;IACZ;IACAE,QAAQ;QACNF,UAAU;IACZ;IACAG,OAAO;QACLH,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;AACF,GAAG;AAEH,OAAO,MAAMI,0BAA0B1B,WAAW;IAChD2B,UAAU;QACRC,YAAY;IACd;IACAC,QAAQ;QACND,YAAY;IACd;IACAE,OAAO;QACLF,YAAY;IACd;IACAG,KAAK;QACHH,YAAY;IACd;IACAI,SAAS;QACPJ,YAAY;IACd;IACA,iBAAiB;QACfA,YAAY;IACd;IAEA,gBAAgB;QACdA,YAAY;IACd;IACA,gBAAgB;QACdA,YAAY;IACd;AACF,GAAG;AAEH,OAAO,MAAMK,8BAA8BjC,WAAW;IACpD2B,UAAU;QACRO,gBAAgB;IAClB;IACAL,QAAQ;QACNK,gBAAgB;IAClB;IACAJ,OAAO;QACLI,gBAAgB;IAClB;IACAH,KAAK;QACHG,gBAAgB;IAClB;IACAF,SAAS;QACPE,gBAAgB;IAClB;IACA,iBAAiB;QACfA,gBAAgB;IAClB;IAEA,gBAAgB;QACdA,gBAAgB;IAClB;IACA,gBAAgB;QACdA,gBAAgB;IAClB;AACF,GAAG"}

package/lib-commonjs/components/Checkbox/Checkbox.styles.raw.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCheckboxStyles", {
+    enumerable: true,
+    get: function() {
+        return useCheckboxStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useCheckboxStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        display: 'flex'
+    }
+});

package/lib-commonjs/components/Checkbox/Checkbox.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useCheckboxStyles = makeStyles({\n  root: {\n    display: 'flex',\n  },\n});\n"],"names":["useCheckboxStyles","makeStyles","root","display"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFc;AAEpB,MAAMA,oBAAoBC,IAAAA,2BAAAA,EAAW;IAC1CC,MAAM;QACJC,SAAS;IACX;AACF"}

package/lib-commonjs/components/Stack/StackItemShim.styles.raw.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useFlexAlignSelfStyles: function() {
+        return useFlexAlignSelfStyles;
+    },
+    useFlexGrowStyles: function() {
+        return useFlexGrowStyles;
+    },
+    useFlexOrderStyles: function() {
+        return useFlexOrderStyles;
+    },
+    useFlexShrinkStyles: function() {
+        return useFlexShrinkStyles;
+    },
+    useStackItemShimStyles: function() {
+        return useStackItemShimStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useStackItemShimStyles = (0, _react.makeStyles)({
+    root: {
+        height: 'auto',
+        width: 'auto'
+    },
+    disableShrink: {
+        flexShrink: 0
+    },
+    verticalFill: {
+        height: '100%'
+    }
+});
+const useFlexAlignSelfStyles = (0, _react.makeStyles)({
+    auto: {
+        alignSelf: 'auto'
+    },
+    baseline: {
+        alignSelf: 'baseline'
+    },
+    center: {
+        alignSelf: 'center'
+    },
+    start: {
+        alignSelf: 'flex-start'
+    },
+    end: {
+        alignSelf: 'flex-end'
+    },
+    stretch: {
+        alignSelf: 'stretch'
+    }
+});
+const useFlexGrowStyles = (0, _react.makeStyles)({
+    inherit: {
+        flexGrow: 'inherit'
+    },
+    initial: {
+        flexGrow: 'initial'
+    },
+    revert: {
+        flexGrow: 'revert'
+    },
+    unset: {
+        flexGrow: 'unset'
+    },
+    '1': {
+        flexGrow: 1
+    },
+    '2': {
+        flexGrow: 2
+    },
+    '3': {
+        flexGrow: 3
+    }
+});
+const useFlexShrinkStyles = (0, _react.makeStyles)({
+    inherit: {
+        flexShrink: 'inherit'
+    },
+    initial: {
+        flexShrink: 'initial'
+    },
+    revert: {
+        flexShrink: 'revert'
+    },
+    unset: {
+        flexShrink: 'unset'
+    },
+    0: {
+        flexShrink: 0
+    },
+    1: {
+        flexShrink: 1
+    },
+    2: {
+        flexShrink: 2
+    }
+});
+const useFlexOrderStyles = (0, _react.makeStyles)({
+    inherit: {
+        order: 'inherit'
+    },
+    initial: {
+        order: 'initial'
+    },
+    unset: {
+        order: 'unset'
+    },
+    revert: {
+        order: 'revert'
+    },
+    '-3': {
+        order: -3
+    },
+    '-2': {
+        order: -2
+    },
+    '-1': {
+        order: -1
+    },
+    '0': {
+        order: 0
+    },
+    '1': {
+        order: 1
+    },
+    '2': {
+        order: 2
+    },
+    '3': {
+        order: 3
+    }
+});

package/lib-commonjs/components/Stack/StackItemShim.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stack/StackItemShim.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\n\nexport const useStackItemShimStyles = makeStyles({\n  root: {\n    height: 'auto',\n    width: 'auto',\n  },\n  disableShrink: {\n    flexShrink: 0,\n  },\n  verticalFill: {\n    height: '100%',\n  },\n});\n\nexport const useFlexAlignSelfStyles = makeStyles({\n  auto: {\n    alignSelf: 'auto',\n  },\n  baseline: {\n    alignSelf: 'baseline',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n  start: {\n    alignSelf: 'flex-start',\n  },\n  end: {\n    alignSelf: 'flex-end',\n  },\n  stretch: {\n    alignSelf: 'stretch',\n  },\n});\n\nexport const useFlexGrowStyles = makeStyles({\n  inherit: {\n    flexGrow: 'inherit',\n  },\n  initial: {\n    flexGrow: 'initial',\n  },\n  revert: {\n    flexGrow: 'revert',\n  },\n  unset: {\n    flexGrow: 'unset',\n  },\n  '1': {\n    flexGrow: 1,\n  },\n  '2': {\n    flexGrow: 2,\n  },\n  '3': {\n    flexGrow: 3,\n  },\n});\n\nexport const useFlexShrinkStyles = makeStyles({\n  inherit: {\n    flexShrink: 'inherit',\n  },\n  initial: {\n    flexShrink: 'initial',\n  },\n  revert: {\n    flexShrink: 'revert',\n  },\n  unset: {\n    flexShrink: 'unset',\n  },\n  0: {\n    flexShrink: 0,\n  },\n  1: {\n    flexShrink: 1,\n  },\n  2: {\n    flexShrink: 2,\n  },\n});\n\nexport const useFlexOrderStyles = makeStyles({\n  inherit: {\n    order: 'inherit',\n  },\n  initial: {\n    order: 'initial',\n  },\n  unset: {\n    order: 'unset',\n  },\n  revert: {\n    order: 'revert',\n  },\n  '-3': {\n    order: -3,\n  },\n  '-2': {\n    order: -2,\n  },\n  '-1': {\n    order: -1,\n  },\n  '0': {\n    order: 0,\n  },\n  '1': {\n    order: 1,\n  },\n  '2': {\n    order: 2,\n  },\n  '3': {\n    order: 3,\n  },\n});\n"],"names":["useFlexAlignSelfStyles","useFlexGrowStyles","useFlexOrderStyles","useFlexShrinkStyles","useStackItemShimStyles","makeStyles","root","height","width","disableShrink","flexShrink","verticalFill","auto","alignSelf","baseline","center","start","end","stretch","inherit","flexGrow","initial","revert","unset","order"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAeaA,sBAAAA;eAAAA;;IAqBAC,iBAAAA;eAAAA;;IAgDAC,kBAAAA;eAAAA;;IAxBAC,mBAAAA;eAAAA;;IA1DAC,sBAAAA;eAAAA;;;uBAFc;AAEpB,MAAMA,yBAAyBC,IAAAA,iBAAAA,EAAW;IAC/CC,MAAM;QACJC,QAAQ;QACRC,OAAO;IACT;IACAC,eAAe;QACbC,YAAY;IACd;IACAC,cAAc;QACZJ,QAAQ;IACV;AACF;AAEO,MAAMP,yBAAyBK,IAAAA,iBAAAA,EAAW;IAC/CO,MAAM;QACJC,WAAW;IACb;IACAC,UAAU;QACRD,WAAW;IACb;IACAE,QAAQ;QACNF,WAAW;IACb;IACAG,OAAO;QACLH,WAAW;IACb;IACAI,KAAK;QACHJ,WAAW;IACb;IACAK,SAAS;QACPL,WAAW;IACb;AACF;AAEO,MAAMZ,oBAAoBI,IAAAA,iBAAAA,EAAW;IAC1Cc,SAAS;QACPC,UAAU;IACZ;IACAC,SAAS;QACPD,UAAU;IACZ;IACAE,QAAQ;QACNF,UAAU;IACZ;IACAG,OAAO;QACLH,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;AACF;AAEO,MAAMjB,sBAAsBE,IAAAA,iBAAAA,EAAW;IAC5Cc,SAAS;QACPT,YAAY;IACd;IACAW,SAAS;QACPX,YAAY;IACd;IACAY,QAAQ;QACNZ,YAAY;IACd;IACAa,OAAO;QACLb,YAAY;IACd;IACA,GAAG;QACDA,YAAY;IACd;IACA,GAAG;QACDA,YAAY;IACd;IACA,GAAG;QACDA,YAAY;IACd;AACF;AAEO,MAAMR,qBAAqBG,IAAAA,iBAAAA,EAAW;IAC3Cc,SAAS;QACPK,OAAO;IACT;IACAH,SAAS;QACPG,OAAO;IACT;IACAD,OAAO;QACLC,OAAO;IACT;IACAF,QAAQ;QACNE,OAAO;IACT;IACA,MAAM;QACJA,OAAO,CAAC;IACV;IACA,MAAM;QACJA,OAAO,CAAC;IACV;IACA,MAAM;QACJA,OAAO,CAAC;IACV;IACA,KAAK;QACHA,OAAO;IACT;IACA,KAAK;QACHA,OAAO;IACT;IACA,KAAK;QACHA,OAAO;IACT;IACA,KAAK;QACHA,OAAO;IACT;AACF"}

package/lib-commonjs/components/Stack/StackShim.styles.raw.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useFlexAlignItemsStyles: function() {
+        return useFlexAlignItemsStyles;
+    },
+    useFlexGrowStyles: function() {
+        return useFlexGrowStyles;
+    },
+    useFlexJustifyContentStyles: function() {
+        return useFlexJustifyContentStyles;
+    },
+    useStackStyles: function() {
+        return useStackStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useStackStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'nowrap',
+        width: 'auto',
+        height: 'auto',
+        boxSizing: 'border-box',
+        '> *': {
+            textOverflow: 'ellipsis'
+        },
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        '> *:not(.ms-StackItem)': {
+            flexShrink: 1
+        }
+    },
+    horizontal: {
+        flexDirection: 'row'
+    },
+    verticalFill: {
+        height: '100%'
+    },
+    reversedVertical: {
+        flexDirection: 'column-reverse'
+    },
+    reversedHorizontal: {
+        flexDirection: 'row-reverse'
+    },
+    disableShrink: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        '> *:not(.ms-StackItem)': {
+            flexShrink: 0
+        }
+    },
+    wrap: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        height: '100%'
+    },
+    inner: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        boxSizing: 'border-box',
+        maxWidth: '100vw',
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        '> *:not(.ms-StackItem)': {
+            flexShrink: 1
+        }
+    },
+    innerWidth: {
+        width: '100%'
+    }
+});
+const useFlexGrowStyles = (0, _react.makeStyles)({
+    inherit: {
+        flexGrow: 'inherit'
+    },
+    initial: {
+        flexGrow: 'initial'
+    },
+    revert: {
+        flexGrow: 'revert'
+    },
+    unset: {
+        flexGrow: 'unset'
+    },
+    '1': {
+        flexGrow: 1
+    },
+    '2': {
+        flexGrow: 2
+    },
+    '3': {
+        flexGrow: 3
+    }
+});
+const useFlexAlignItemsStyles = (0, _react.makeStyles)({
+    baseline: {
+        alignItems: 'baseline'
+    },
+    center: {
+        alignItems: 'center'
+    },
+    start: {
+        alignItems: 'flex-start'
+    },
+    end: {
+        alignItems: 'flex-end'
+    },
+    stretch: {
+        alignItems: 'stretch'
+    },
+    'space-between': {
+        alignItems: 'space-between'
+    },
+    'space-around': {
+        alignItems: 'space-around'
+    },
+    'space-evenly': {
+        alignItems: 'space-evenly'
+    }
+});
+const useFlexJustifyContentStyles = (0, _react.makeStyles)({
+    baseline: {
+        justifyContent: 'baseline'
+    },
+    center: {
+        justifyContent: 'center'
+    },
+    start: {
+        justifyContent: 'flex-start'
+    },
+    end: {
+        justifyContent: 'flex-end'
+    },
+    stretch: {
+        justifyContent: 'stretch'
+    },
+    'space-between': {
+        justifyContent: 'space-between'
+    },
+    'space-around': {
+        justifyContent: 'space-around'
+    },
+    'space-evenly': {
+        justifyContent: 'space-evenly'
+    }
+});

package/lib-commonjs/components/Stack/StackShim.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stack/StackShim.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\n\nexport const useStackStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'nowrap',\n    width: 'auto',\n    height: 'auto',\n    boxSizing: 'border-box',\n    '> *': {\n      textOverflow: 'ellipsis',\n    },\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: 'row',\n  },\n  verticalFill: {\n    height: '100%',\n  },\n  reversedVertical: {\n    flexDirection: 'column-reverse',\n  },\n  reversedHorizontal: {\n    flexDirection: 'row-reverse',\n  },\n  disableShrink: {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 0,\n    },\n  },\n  wrap: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    height: '100%',\n  },\n  inner: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'wrap',\n    boxSizing: 'border-box',\n    maxWidth: '100vw',\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 1,\n    },\n  },\n  innerWidth: {\n    width: '100%',\n  },\n});\n\nexport const useFlexGrowStyles = makeStyles({\n  inherit: {\n    flexGrow: 'inherit',\n  },\n  initial: {\n    flexGrow: 'initial',\n  },\n  revert: {\n    flexGrow: 'revert',\n  },\n  unset: {\n    flexGrow: 'unset',\n  },\n  '1': {\n    flexGrow: 1,\n  },\n  '2': {\n    flexGrow: 2,\n  },\n  '3': {\n    flexGrow: 3,\n  },\n});\n\nexport const useFlexAlignItemsStyles = makeStyles({\n  baseline: {\n    alignItems: 'baseline',\n  },\n  center: {\n    alignItems: 'center',\n  },\n  start: {\n    alignItems: 'flex-start',\n  },\n  end: {\n    alignItems: 'flex-end',\n  },\n  stretch: {\n    alignItems: 'stretch',\n  },\n  'space-between': {\n    alignItems: 'space-between',\n  },\n\n  'space-around': {\n    alignItems: 'space-around',\n  },\n  'space-evenly': {\n    alignItems: 'space-evenly',\n  },\n});\n\nexport const useFlexJustifyContentStyles = makeStyles({\n  baseline: {\n    justifyContent: 'baseline',\n  },\n  center: {\n    justifyContent: 'center',\n  },\n  start: {\n    justifyContent: 'flex-start',\n  },\n  end: {\n    justifyContent: 'flex-end',\n  },\n  stretch: {\n    justifyContent: 'stretch',\n  },\n  'space-between': {\n    justifyContent: 'space-between',\n  },\n\n  'space-around': {\n    justifyContent: 'space-around',\n  },\n  'space-evenly': {\n    justifyContent: 'space-evenly',\n  },\n});\n"],"names":["useFlexAlignItemsStyles","useFlexGrowStyles","useFlexJustifyContentStyles","useStackStyles","makeStyles","root","display","flexDirection","flexWrap","width","height","boxSizing","textOverflow","flexShrink","horizontal","verticalFill","reversedVertical","reversedHorizontal","disableShrink","wrap","inner","maxWidth","innerWidth","inherit","flexGrow","initial","revert","unset","baseline","alignItems","center","start","end","stretch","justifyContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoFaA,uBAAAA;eAAAA;;IAxBAC,iBAAAA;eAAAA;;IAoDAC,2BAAAA;eAAAA;;IA9GAC,cAAAA;eAAAA;;;uBAFc;AAEpB,MAAMA,iBAAiBC,IAAAA,iBAAAA,EAAW;IACvCC,MAAM;QACJC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,WAAW;QACX,OAAO;YACLC,cAAc;QAChB;QACA,6DAA6D;QAC7D,aAAa;QACb,0BAA0B;YACxBC,YAAY;QACd;IACF;IACAC,YAAY;QACVP,eAAe;IACjB;IACAQ,cAAc;QACZL,QAAQ;IACV;IACAM,kBAAkB;QAChBT,eAAe;IACjB;IACAU,oBAAoB;QAClBV,eAAe;IACjB;IACAW,eAAe;QACb,6DAA6D;QAC7D,aAAa;QACb,0BAA0B;YACxBL,YAAY;QACd;IACF;IACAM,MAAM;QACJb,SAAS;QACTE,UAAU;QACVE,QAAQ;IACV;IACAU,OAAO;QACLd,SAAS;QACTC,eAAe;QACfC,UAAU;QACVG,WAAW;QACXU,UAAU;QACV,6DAA6D;QAC7D,aAAa;QACb,0BAA0B;YACxBR,YAAY;QACd;IACF;IACAS,YAAY;QACVb,OAAO;IACT;AACF;AAEO,MAAMR,oBAAoBG,IAAAA,iBAAAA,EAAW;IAC1CmB,SAAS;QACPC,UAAU;IACZ;IACAC,SAAS;QACPD,UAAU;IACZ;IACAE,QAAQ;QACNF,UAAU;IACZ;IACAG,OAAO;QACLH,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;IACA,KAAK;QACHA,UAAU;IACZ;AACF;AAEO,MAAMxB,0BAA0BI,IAAAA,iBAAAA,EAAW;IAChDwB,UAAU;QACRC,YAAY;IACd;IACAC,QAAQ;QACND,YAAY;IACd;IACAE,OAAO;QACLF,YAAY;IACd;IACAG,KAAK;QACHH,YAAY;IACd;IACAI,SAAS;QACPJ,YAAY;IACd;IACA,iBAAiB;QACfA,YAAY;IACd;IAEA,gBAAgB;QACdA,YAAY;IACd;IACA,gBAAgB;QACdA,YAAY;IACd;AACF;AAEO,MAAM3B,8BAA8BE,IAAAA,iBAAAA,EAAW;IACpDwB,UAAU;QACRM,gBAAgB;IAClB;IACAJ,QAAQ;QACNI,gBAAgB;IAClB;IACAH,OAAO;QACLG,gBAAgB;IAClB;IACAF,KAAK;QACHE,gBAAgB;IAClB;IACAD,SAAS;QACPC,gBAAgB;IAClB;IACA,iBAAiB;QACfA,gBAAgB;IAClB;IAEA,gBAAgB;QACdA,gBAAgB;IAClB;IACA,gBAAgB;QACdA,gBAAgB;IAClB;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
-  "version": "9.8.8",
+  "version": "9.9.0",
   "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,7 +21,7 @@
     "@ctrl/tinycolor": "^3.3.4",
     "@fluentui/fluent2-theme": "^8.107.138",
     "@fluentui/react": "^8.123.1",
-    "@fluentui/react-components": "^9.66.8",
+    "@fluentui/react-components": "^9.67.0",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-hooks": "^8.8.19",
     "@griffel/react": "^1.5.22",