@fluentui/react-migration-v0-v9 9.4.8 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-migration-v0-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.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.5.0)
+
+Thu, 17 Jul 2025 13:45:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v0-v9_v9.4.8..@fluentui/react-migration-v0-v9_v9.5.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-components to v9.67.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.4.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v0-v9_v9.4.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-v0-v9_v9.4.7..@fluentui/react-migration-v0-v9_v9.4.8)
 
 ### Patches

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

@@ -0,0 +1,57 @@
+import { createCustomFocusIndicatorStyle, makeResetStyles, makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { attachmentActionClassName } from './AttachmentAction';
+import { attachmentIconClassName } from './AttachmentIcon';
+export const useAttachmentBaseStyles = makeResetStyles({
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        borderRadius: tokens.borderRadiusMedium,
+        backgroundColor: undefined,
+        color: undefined,
+        [`& .${attachmentActionClassName}`]: {
+            color: undefined
+        },
+        [`& .${attachmentIconClassName}`]: {
+            color: undefined
+        }
+    }, {
+        selector: 'focus'
+    }),
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    width: '100%',
+    maxWidth: '424px',
+    minHeight: '32px',
+    ...shorthands.padding('7px', '3px', '7px', '11px'),
+    marginBottom: '2px',
+    marginRight: '2px',
+    backgroundColor: tokens.colorNeutralBackground6,
+    color: tokens.colorNeutralForeground1,
+    boxShadow: `0 .2rem .4rem -.075rem ${tokens.colorNeutralShadowAmbient}`,
+    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke3),
+    borderRadius: '4px'
+});
+export const useAttachmentStyles = makeStyles({
+    actionable: {
+        cursor: 'pointer',
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground4Hover
+        }
+    },
+    progressContainer: {
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
+        bottom: 0,
+        height: '4px',
+        left: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        right: 0
+    },
+    progressBar: {
+        backgroundColor: tokens.colorPaletteLightGreenBackground3,
+        height: '100%',
+        maxWidth: '100%',
+        transition: 'width 0.2s'
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Attachment/Attachment.styles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  shorthands,\n  tokens,\n} from '@fluentui/react-components';\nimport { attachmentActionClassName } from './AttachmentAction';\nimport { attachmentIconClassName } from './AttachmentIcon';\n\nexport const useAttachmentBaseStyles = makeResetStyles({\n  ...createCustomFocusIndicatorStyle(\n    {\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      backgroundColor: undefined,\n      color: undefined,\n      [`& .${attachmentActionClassName}`]: {\n        color: undefined,\n      },\n\n      [`& .${attachmentIconClassName}`]: {\n        color: undefined,\n      },\n    },\n    { selector: 'focus' },\n  ),\n  position: 'relative',\n  display: 'inline-flex',\n  alignItems: 'center',\n  width: '100%',\n  maxWidth: '424px',\n  minHeight: '32px',\n  ...shorthands.padding('7px', '3px', '7px', '11px'),\n  marginBottom: '2px',\n  marginRight: '2px',\n  backgroundColor: tokens.colorNeutralBackground6,\n  color: tokens.colorNeutralForeground1,\n  boxShadow: `0 .2rem .4rem -.075rem ${tokens.colorNeutralShadowAmbient}`,\n  ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke3),\n  borderRadius: '4px',\n});\n\nexport const useAttachmentStyles = makeStyles({\n  actionable: {\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground4Hover,\n    },\n  },\n  progressContainer: {\n    borderBottomLeftRadius: '4px',\n    borderBottomRightRadius: '4px',\n    bottom: 0,\n    height: '4px',\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n  },\n  progressBar: {\n    backgroundColor: tokens.colorPaletteLightGreenBackground3,\n    height: '100%',\n    maxWidth: '100%',\n    transition: 'width 0.2s',\n  },\n});\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","shorthands","tokens","attachmentActionClassName","attachmentIconClassName","useAttachmentBaseStyles","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","backgroundColor","undefined","color","selector","position","display","alignItems","width","maxWidth","minHeight","padding","marginBottom","marginRight","colorNeutralBackground6","colorNeutralForeground1","boxShadow","colorNeutralShadowAmbient","border","colorNeutralStroke3","useAttachmentStyles","actionable","cursor","colorNeutralBackground4Hover","progressContainer","borderBottomLeftRadius","borderBottomRightRadius","bottom","height","left","overflow","right","progressBar","colorPaletteLightGreenBackground3","transition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,+BAA+B,EAC/BC,eAAe,EACfC,UAAU,EACVC,UAAU,EACVC,MAAM,QACD,6BAA6B;AACpC,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,OAAO,MAAMC,0BAA0BN,gBAAgB;IACrD,GAAGD,gCACD;QACEQ,SAAS,CAAC,EAAEJ,OAAOK,gBAAgB,CAAC,OAAO,EAAEL,OAAOM,iBAAiB,CAAC,CAAC;QACvEC,cAAcP,OAAOQ,kBAAkB;QACvCC,iBAAiBC;QACjBC,OAAOD;QACP,CAAC,CAAC,GAAG,EAAET,0BAA0B,CAAC,CAAC,EAAE;YACnCU,OAAOD;QACT;QAEA,CAAC,CAAC,GAAG,EAAER,wBAAwB,CAAC,CAAC,EAAE;YACjCS,OAAOD;QACT;IACF,GACA;QAAEE,UAAU;IAAQ,EACrB;IACDC,UAAU;IACVC,SAAS;IACTC,YAAY;IACZC,OAAO;IACPC,UAAU;IACVC,WAAW;IACX,GAAGnB,WAAWoB,OAAO,CAAC,OAAO,OAAO,OAAO,OAAO;IAClDC,cAAc;IACdC,aAAa;IACbZ,iBAAiBT,OAAOsB,uBAAuB;IAC/CX,OAAOX,OAAOuB,uBAAuB;IACrCC,WAAW,CAAC,uBAAuB,EAAExB,OAAOyB,yBAAyB,CAAC,CAAC;IACvE,GAAG1B,WAAW2B,MAAM,CAAC,OAAO,SAAS1B,OAAO2B,mBAAmB,CAAC;IAChEpB,cAAc;AAChB,GAAG;AAEH,OAAO,MAAMqB,sBAAsB9B,WAAW;IAC5C+B,YAAY;QACVC,QAAQ;QACR,UAAU;YACRrB,iBAAiBT,OAAO+B,4BAA4B;QACtD;IACF;IACAC,mBAAmB;QACjBC,wBAAwB;QACxBC,yBAAyB;QACzBC,QAAQ;QACRC,QAAQ;QACRC,MAAM;QACNC,UAAU;QACVzB,UAAU;QACV0B,OAAO;IACT;IACAC,aAAa;QACX/B,iBAAiBT,OAAOyC,iCAAiC;QACzDL,QAAQ;QACRnB,UAAU;QACVyB,YAAY;IACd;AACF,GAAG"}

package/lib/components/Attachment/AttachmentAction.styles.raw.js

@@ -0,0 +1,17 @@
+import { makeStyles } from '@fluentui/react-components';
+export const useAttachmentActionStyles = makeStyles({
+    root: {
+        height: '32px',
+        maxWidth: '280px',
+        minWidth: '32px',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+        verticalAlign: 'middle',
+        cursor: 'pointer'
+    },
+    disabled: {
+        cursor: 'default'
+    }
+});

package/lib/components/Attachment/AttachmentAction.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Attachment/AttachmentAction.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useAttachmentActionStyles = makeStyles({\n  root: {\n    height: '32px',\n    maxWidth: '280px',\n    minWidth: '32px',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'relative',\n    verticalAlign: 'middle',\n    cursor: 'pointer',\n  },\n  disabled: {\n    cursor: 'default',\n  },\n});\n"],"names":["makeStyles","useAttachmentActionStyles","root","height","maxWidth","minWidth","display","justifyContent","alignItems","position","verticalAlign","cursor","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,OAAO,MAAMC,4BAA4BD,WAAW;IAClDE,MAAM;QACJC,QAAQ;QACRC,UAAU;QACVC,UAAU;QACVC,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,UAAU;QACVC,eAAe;QACfC,QAAQ;IACV;IACAC,UAAU;QACRD,QAAQ;IACV;AACF,GAAG"}

package/lib/components/Attachment/AttachmentBody.styles.raw.js

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

package/lib/components/Attachment/AttachmentBody.styles.raw.js.map

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

package/lib/components/Attachment/AttachmentDescription.styles.raw.js

@@ -0,0 +1,9 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+export const useAttachmentDescriptionStyles = makeStyles({
+    root: {
+        display: 'block',
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        lineHeight: 1
+    }
+});

package/lib/components/Attachment/AttachmentDescription.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Attachment/AttachmentDescription.styles.ts"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\n\nexport const useAttachmentDescriptionStyles = makeStyles({\n  root: {\n    display: 'block',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: 1,\n  },\n});\n"],"names":["makeStyles","tokens","useAttachmentDescriptionStyles","root","display","fontSize","fontSizeBase200","fontWeight","fontWeightRegular","lineHeight"],"rangeMappings":";;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAEhE,OAAO,MAAMC,iCAAiCF,WAAW;IACvDG,MAAM;QACJC,SAAS;QACTC,UAAUJ,OAAOK,eAAe;QAChCC,YAAYN,OAAOO,iBAAiB;QACpCC,YAAY;IACd;AACF,GAAG"}

package/lib/components/Attachment/AttachmentHeader.styles.raw.js

@@ -0,0 +1,9 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+export const useAttachmentHeaderStyles = makeStyles({
+    root: {
+        display: 'block',
+        fontSize: tokens.fontSizeBase300,
+        fontWeight: tokens.fontWeightSemibold,
+        lineHeight: 1.4286
+    }
+});

package/lib/components/Attachment/AttachmentHeader.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Attachment/AttachmentHeader.styles.ts"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\n\nexport const useAttachmentHeaderStyles = makeStyles({\n  root: {\n    display: 'block',\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: 1.4286,\n  },\n});\n"],"names":["makeStyles","tokens","useAttachmentHeaderStyles","root","display","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","lineHeight"],"rangeMappings":";;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAEhE,OAAO,MAAMC,4BAA4BF,WAAW;IAClDG,MAAM;QACJC,SAAS;QACTC,UAAUJ,OAAOK,eAAe;QAChCC,YAAYN,OAAOO,kBAAkB;QACrCC,YAAY;IACd;AACF,GAAG"}

package/lib/components/Attachment/AttachmentIcon.styles.raw.js

@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-components';
+export const useAttachmentIconStyles = makeStyles({
+    root: {
+        height: '32px',
+        width: '32px',
+        marginRight: '12px',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& svg': {
+            height: '100%',
+            width: '100%'
+        }
+    }
+});

package/lib/components/Attachment/AttachmentIcon.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Attachment/AttachmentIcon.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useAttachmentIconStyles = makeStyles({\n  root: {\n    height: '32px',\n    width: '32px',\n    marginRight: '12px',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    '& svg': {\n      height: '100%',\n      width: '100%',\n    },\n  },\n});\n"],"names":["makeStyles","useAttachmentIconStyles","root","height","width","marginRight","display","alignItems","justifyContent"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,OAAO,MAAMC,0BAA0BD,WAAW;IAChDE,MAAM;QACJC,QAAQ;QACRC,OAAO;QACPC,aAAa;QACbC,SAAS;QACTC,YAAY;QACZC,gBAAgB;QAChB,SAAS;YACPL,QAAQ;YACRC,OAAO;QACT;IACF;AACF,GAAG"}

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

@@ -0,0 +1,88 @@
+import { makeStyles } from '@fluentui/react-components';
+const gapValues = {
+    smaller: '8px',
+    small: '10px',
+    medium: '15px',
+    large: '30px'
+};
+const paddingValues = {
+    medium: '10px'
+};
+export const useFlexStyles = makeStyles({
+    flex: {
+        display: 'flex'
+    },
+    inline: {
+        display: 'inline-flex'
+    },
+    column: {
+        flexDirection: 'column'
+    },
+    alignItemsFlexStart: {
+        alignItems: 'flex-start'
+    },
+    alignItemsCenter: {
+        alignItems: 'center'
+    },
+    alignItemsFlexEnd: {
+        alignItems: 'flex-end'
+    },
+    alignItemsStretch: {
+        alignItems: 'stretch'
+    },
+    justifyContentFlexStart: {
+        justifyContent: 'flex-start'
+    },
+    justifyContentCenter: {
+        justifyContent: 'center'
+    },
+    justifyContentFlexEnd: {
+        justifyContent: 'flex-end'
+    },
+    justifyContentStretch: {
+        justifyContent: 'stretch'
+    },
+    justifyContentSpaceAround: {
+        justifyContent: 'space-around'
+    },
+    justifyContentSpaceBetween: {
+        justifyContent: 'space-between'
+    },
+    justifyContentSpaceEvenly: {
+        justifyContent: 'space-evenly'
+    },
+    wrap: {
+        flexWrap: 'wrap'
+    },
+    fill: {
+        width: '100%',
+        height: '100%'
+    },
+    gapForColumnFlexSmall: {
+        rowGap: gapValues.small
+    },
+    gapForColumnFlexSmaller: {
+        rowGap: gapValues.smaller
+    },
+    gapForColumnFlexMedium: {
+        rowGap: gapValues.medium
+    },
+    gapForColumnFlexLarge: {
+        rowGap: gapValues.large
+    },
+    gapForRowFlexSmall: {
+        columnGap: gapValues.small
+    },
+    gapForRowFlexSmaller: {
+        columnGap: gapValues.smaller
+    },
+    gapForRowFlexMedium: {
+        columnGap: gapValues.medium
+    },
+    gapForRowFlexLarge: {
+        columnGap: gapValues.large
+    },
+    paddingMedium: {
+        padding: paddingValues.medium
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Flex/Flex.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nconst gapValues = {\n  smaller: '8px',\n  small: '10px',\n  medium: '15px',\n  large: '30px',\n};\n\nconst paddingValues = {\n  medium: '10px',\n};\n\nexport const useFlexStyles = makeStyles({\n  flex: {\n    display: 'flex',\n  },\n  inline: {\n    display: 'inline-flex',\n  },\n  column: {\n    flexDirection: 'column',\n  },\n  alignItemsFlexStart: {\n    alignItems: 'flex-start',\n  },\n  alignItemsCenter: {\n    alignItems: 'center',\n  },\n  alignItemsFlexEnd: {\n    alignItems: 'flex-end',\n  },\n  alignItemsStretch: {\n    alignItems: 'stretch',\n  },\n  justifyContentFlexStart: {\n    justifyContent: 'flex-start',\n  },\n  justifyContentCenter: {\n    justifyContent: 'center',\n  },\n  justifyContentFlexEnd: {\n    justifyContent: 'flex-end',\n  },\n  justifyContentStretch: {\n    justifyContent: 'stretch',\n  },\n  justifyContentSpaceAround: {\n    justifyContent: 'space-around',\n  },\n  justifyContentSpaceBetween: {\n    justifyContent: 'space-between',\n  },\n  justifyContentSpaceEvenly: {\n    justifyContent: 'space-evenly',\n  },\n  wrap: {\n    flexWrap: 'wrap',\n  },\n  fill: {\n    width: '100%',\n    height: '100%',\n  },\n  gapForColumnFlexSmall: {\n    rowGap: gapValues.small,\n  },\n  gapForColumnFlexSmaller: {\n    rowGap: gapValues.smaller,\n  },\n  gapForColumnFlexMedium: {\n    rowGap: gapValues.medium,\n  },\n  gapForColumnFlexLarge: {\n    rowGap: gapValues.large,\n  },\n  gapForRowFlexSmall: {\n    columnGap: gapValues.small,\n  },\n  gapForRowFlexSmaller: {\n    columnGap: gapValues.smaller,\n  },\n  gapForRowFlexMedium: {\n    columnGap: gapValues.medium,\n  },\n  gapForRowFlexLarge: {\n    columnGap: gapValues.large,\n  },\n  paddingMedium: {\n    padding: paddingValues.medium,\n  },\n});\n"],"names":["makeStyles","gapValues","smaller","small","medium","large","paddingValues","useFlexStyles","flex","display","inline","column","flexDirection","alignItemsFlexStart","alignItems","alignItemsCenter","alignItemsFlexEnd","alignItemsStretch","justifyContentFlexStart","justifyContent","justifyContentCenter","justifyContentFlexEnd","justifyContentStretch","justifyContentSpaceAround","justifyContentSpaceBetween","justifyContentSpaceEvenly","wrap","flexWrap","fill","width","height","gapForColumnFlexSmall","rowGap","gapForColumnFlexSmaller","gapForColumnFlexMedium","gapForColumnFlexLarge","gapForRowFlexSmall","columnGap","gapForRowFlexSmaller","gapForRowFlexMedium","gapForRowFlexLarge","paddingMedium","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,MAAMC,YAAY;IAChBC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,gBAAgB;IACpBF,QAAQ;AACV;AAEA,OAAO,MAAMG,gBAAgBP,WAAW;IACtCQ,MAAM;QACJC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,QAAQ;QACNC,eAAe;IACjB;IACAC,qBAAqB;QACnBC,YAAY;IACd;IACAC,kBAAkB;QAChBD,YAAY;IACd;IACAE,mBAAmB;QACjBF,YAAY;IACd;IACAG,mBAAmB;QACjBH,YAAY;IACd;IACAI,yBAAyB;QACvBC,gBAAgB;IAClB;IACAC,sBAAsB;QACpBD,gBAAgB;IAClB;IACAE,uBAAuB;QACrBF,gBAAgB;IAClB;IACAG,uBAAuB;QACrBH,gBAAgB;IAClB;IACAI,2BAA2B;QACzBJ,gBAAgB;IAClB;IACAK,4BAA4B;QAC1BL,gBAAgB;IAClB;IACAM,2BAA2B;QACzBN,gBAAgB;IAClB;IACAO,MAAM;QACJC,UAAU;IACZ;IACAC,MAAM;QACJC,OAAO;QACPC,QAAQ;IACV;IACAC,uBAAuB;QACrBC,QAAQ/B,UAAUE,KAAK;IACzB;IACA8B,yBAAyB;QACvBD,QAAQ/B,UAAUC,OAAO;IAC3B;IACAgC,wBAAwB;QACtBF,QAAQ/B,UAAUG,MAAM;IAC1B;IACA+B,uBAAuB;QACrBH,QAAQ/B,UAAUI,KAAK;IACzB;IACA+B,oBAAoB;QAClBC,WAAWpC,UAAUE,KAAK;IAC5B;IACAmC,sBAAsB;QACpBD,WAAWpC,UAAUC,OAAO;IAC9B;IACAqC,qBAAqB;QACnBF,WAAWpC,UAAUG,MAAM;IAC7B;IACAoC,oBAAoB;QAClBH,WAAWpC,UAAUI,KAAK;IAC5B;IACAoC,eAAe;QACbC,SAASpC,cAAcF,MAAM;IAC/B;AACF,GAAG"}

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

@@ -0,0 +1,31 @@
+import { makeStyles } from '@fluentui/react-components';
+export const useGridStyles = makeStyles({
+    grid: {
+        display: 'grid',
+        justifyContent: 'space-evenly'
+    },
+    onlyRows: {
+        gridAutoFlow: 'column'
+    },
+    rows1: {
+        gridTemplateRows: 'repeat(1, 1fr)'
+    },
+    rows2: {
+        gridTemplateRows: 'repeat(2, 1fr)'
+    },
+    rows3: {
+        gridTemplateRows: 'repeat(3, 1fr)'
+    },
+    columns1: {
+        gridTemplateColumns: 'repeat(1, 1fr)'
+    },
+    columns2: {
+        gridTemplateColumns: 'repeat(2, 1fr)'
+    },
+    columns3: {
+        gridTemplateColumns: 'repeat(3, 1fr)'
+    },
+    columnsDefault: {
+        gridTemplateColumns: 'repeat(5, 1fr)'
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Grid/Grid.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useGridStyles = makeStyles({\n  grid: {\n    display: 'grid',\n    justifyContent: 'space-evenly',\n  },\n  onlyRows: {\n    gridAutoFlow: 'column',\n  },\n  rows1: {\n    gridTemplateRows: 'repeat(1, 1fr)',\n  },\n  rows2: {\n    gridTemplateRows: 'repeat(2, 1fr)',\n  },\n  rows3: {\n    gridTemplateRows: 'repeat(3, 1fr)',\n  },\n  columns1: {\n    gridTemplateColumns: 'repeat(1, 1fr)',\n  },\n  columns2: {\n    gridTemplateColumns: 'repeat(2, 1fr)',\n  },\n  columns3: {\n    gridTemplateColumns: 'repeat(3, 1fr)',\n  },\n  columnsDefault: {\n    gridTemplateColumns: 'repeat(5, 1fr)',\n  },\n});\n"],"names":["makeStyles","useGridStyles","grid","display","justifyContent","onlyRows","gridAutoFlow","rows1","gridTemplateRows","rows2","rows3","columns1","gridTemplateColumns","columns2","columns3","columnsDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,OAAO,MAAMC,gBAAgBD,WAAW;IACtCE,MAAM;QACJC,SAAS;QACTC,gBAAgB;IAClB;IACAC,UAAU;QACRC,cAAc;IAChB;IACAC,OAAO;QACLC,kBAAkB;IACpB;IACAC,OAAO;QACLD,kBAAkB;IACpB;IACAE,OAAO;QACLF,kBAAkB;IACpB;IACAG,UAAU;QACRC,qBAAqB;IACvB;IACAC,UAAU;QACRD,qBAAqB;IACvB;IACAE,UAAU;QACRF,qBAAqB;IACvB;IACAG,gBAAgB;QACdH,qBAAqB;IACvB;AACF,GAAG"}

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

@@ -0,0 +1,60 @@
+import { makeStyles } from '@fluentui/react-components';
+export const useItemLayoutStyles = makeStyles({
+    root: {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr auto auto',
+        minHeight: '48px'
+    },
+    contentMedia: {
+        alignSelf: 'start',
+        gridColumnStart: 3,
+        gridColumnEnd: 4,
+        gridRowStart: 2,
+        gridRowEnd: 3,
+        fontSize: '12px',
+        lineHeight: 1.3333
+    },
+    contentWrapper: {
+        alignSelf: 'start',
+        gridColumnStart: 2,
+        gridColumnEnd: 3,
+        gridRowStart: 2,
+        gridRowEnd: 3,
+        marginRight: '8px',
+        fontSize: '12px',
+        lineHeight: 1.3333
+    },
+    header: {
+        alignSelf: 'end',
+        gridColumnStart: 2,
+        gridColumnEnd: 3,
+        gridRowStart: 1,
+        gridRowEnd: 2,
+        fontSize: '14px',
+        marginRight: '8px'
+    },
+    headerMedia: {
+        alignSelf: 'end',
+        gridColumnStart: 3,
+        gridColumnEnd: 4,
+        gridRowStart: 1,
+        gridRowEnd: 2,
+        fontSize: '12px',
+        lineHeight: 1.3333
+    },
+    startMedia: {
+        alignSelf: 'center',
+        gridColumnStart: 1,
+        gridColumnEnd: 2,
+        gridRowStart: 1,
+        gridRowEnd: 3,
+        marginRight: '8px'
+    },
+    endMedia: {
+        alignSelf: 'center',
+        gridColumnStart: 4,
+        gridColumnEnd: 5,
+        gridRowStart: 1,
+        gridRowEnd: 3
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ItemLayout/ItemLayout.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useItemLayoutStyles = makeStyles({\n  root: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto auto',\n    minHeight: '48px',\n  },\n  contentMedia: {\n    alignSelf: 'start',\n    gridColumnStart: 3,\n    gridColumnEnd: 4,\n    gridRowStart: 2,\n    gridRowEnd: 3,\n    fontSize: '12px',\n    lineHeight: 1.3333,\n  },\n  contentWrapper: {\n    alignSelf: 'start',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    gridRowStart: 2,\n    gridRowEnd: 3,\n    marginRight: '8px',\n    fontSize: '12px',\n    lineHeight: 1.3333,\n  },\n  header: {\n    alignSelf: 'end',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    gridRowStart: 1,\n    gridRowEnd: 2,\n    fontSize: '14px',\n    marginRight: '8px',\n  },\n  headerMedia: {\n    alignSelf: 'end',\n    gridColumnStart: 3,\n    gridColumnEnd: 4,\n    gridRowStart: 1,\n    gridRowEnd: 2,\n    fontSize: '12px',\n    lineHeight: 1.3333,\n  },\n  startMedia: {\n    alignSelf: 'center',\n    gridColumnStart: 1,\n    gridColumnEnd: 2,\n    gridRowStart: 1,\n    gridRowEnd: 3,\n    marginRight: '8px',\n  },\n  endMedia: {\n    alignSelf: 'center',\n    gridColumnStart: 4,\n    gridColumnEnd: 5,\n    gridRowStart: 1,\n    gridRowEnd: 3,\n  },\n});\n"],"names":["makeStyles","useItemLayoutStyles","root","display","gridTemplateColumns","minHeight","contentMedia","alignSelf","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","fontSize","lineHeight","contentWrapper","marginRight","header","headerMedia","startMedia","endMedia"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,OAAO,MAAMC,sBAAsBD,WAAW;IAC5CE,MAAM;QACJC,SAAS;QACTC,qBAAqB;QACrBC,WAAW;IACb;IACAC,cAAc;QACZC,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,UAAU;QACVC,YAAY;IACd;IACAC,gBAAgB;QACdP,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZI,aAAa;QACbH,UAAU;QACVC,YAAY;IACd;IACAG,QAAQ;QACNT,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,UAAU;QACVG,aAAa;IACf;IACAE,aAAa;QACXV,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,UAAU;QACVC,YAAY;IACd;IACAK,YAAY;QACVX,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;QACZI,aAAa;IACf;IACAI,UAAU;QACRZ,WAAW;QACXC,iBAAiB;QACjBC,eAAe;QACfC,cAAc;QACdC,YAAY;IACd;AACF,GAAG"}

package/lib/components/List/List/useListStyles.styles.raw.js

@@ -0,0 +1,34 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+export const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none'
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    rootHorizontal: {
+        display: 'flex'
+    },
+    rootGrid: {
+        display: 'grid'
+    }
+});
+/**
+ * Apply styling to the List slots based on the state
+ */ export const useListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootStyles = useRootBaseStyles();
+    const styles = useStyles();
+    const layoutToStyles = {
+        ['horizontal']: styles.rootHorizontal,
+        ['grid']: styles.rootGrid,
+        ['vertical']: undefined
+    };
+    state.root.className = mergeClasses(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);
+    return state;
+};

package/lib/components/List/List/useListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/List/useListStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n  root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: 0,\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rootHorizontal: {\n    display: 'flex',\n  },\n\n  rootGrid: {\n    display: 'grid',\n  },\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n  'use no memo';\n\n  const rootStyles = useRootBaseStyles();\n  const styles = useStyles();\n\n  const layoutToStyles = {\n    ['horizontal']: styles.rootHorizontal,\n    ['grid']: styles.rootGrid,\n    ['vertical']: undefined, // no extra styles needed, keep it in for completeness and type safety\n  };\n\n  state.root.className = mergeClasses(\n    listClassNames.root,\n    rootStyles,\n    layoutToStyles[state.layout],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useStyles","rootHorizontal","display","rootGrid","useListStyles_unstable","state","rootStyles","styles","layoutToStyles","undefined","className","layout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BW,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaX;IACnB,MAAMY,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAON,cAAc;QACrC,CAAC,OAAO,EAAEM,OAAOJ,QAAQ;QACzB,CAAC,WAAW,EAAEM;IAChB;IAEAJ,MAAMX,IAAI,CAACgB,SAAS,GAAGlB,aACrBC,eAAeC,IAAI,EACnBY,YACAE,cAAc,CAACH,MAAMM,MAAM,CAAC,EAC5BN,MAAMX,IAAI,CAACgB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/List/ListItem/useListItemStyles.styles.raw.js

@@ -0,0 +1,66 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const listItemClassNames = {
+    root: 'fui-ListItem',
+    media: 'fui-ListItem__media',
+    header: 'fui-ListItem__header',
+    contentWrapper: 'fui-ListItem__contentWrapper',
+    headerMedia: 'fui-ListItem__headerMedia',
+    contentMedia: 'fui-ListItem__contentMedia',
+    endMedia: 'fui-ListItem__endMedia'
+};
+const useRootBaseStyles = makeResetStyles({
+    padding: '0 10px',
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none',
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        borderRadius: tokens.borderRadiusMedium
+    }, {
+        selector: 'focus'
+    })
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    contentWrapper: {
+        fontSize: tokens.fontSizeBase200
+    },
+    // The content should go all the way to the end if the content media is not present
+    contentWrapperWithoutMedia: {
+        gridColumnEnd: 4
+    },
+    truncate: {
+        overflow: 'hidden',
+        textWrap: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    rootSelected: {
+        backgroundColor: tokens.colorNeutralBackground1Selected
+    },
+    rootClickable: {
+        cursor: 'pointer',
+        '&:hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover
+        }
+    }
+});
+/**
+ * Apply styling to the ListItem slots based on the state
+ */ export const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const styles = useStyles();
+    state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);
+    if (state.header) {
+        var _state_header;
+        state.header.className = mergeClasses(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);
+    }
+    if (state.contentWrapper) {
+        var _state_contentWrapper;
+        state.contentWrapper.className = mergeClasses(styles.contentWrapper, state.truncateContent && styles.truncate, !state.contentMedia && styles.contentWrapperWithoutMedia, (_state_contentWrapper = state.contentWrapper) === null || _state_contentWrapper === void 0 ? void 0 : _state_contentWrapper.className);
+    }
+    return state;
+};

package/lib/components/List/ListItem/useListItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n  root: 'fui-ListItem',\n  media: 'fui-ListItem__media',\n  header: 'fui-ListItem__header',\n  contentWrapper: 'fui-ListItem__contentWrapper',\n  headerMedia: 'fui-ListItem__headerMedia',\n  contentMedia: 'fui-ListItem__contentMedia',\n  endMedia: 'fui-ListItem__endMedia',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  padding: '0 10px',\n  margin: 0,\n  textIndent: 0,\n  listStyleType: 'none',\n  ...createCustomFocusIndicatorStyle(\n    {\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n    },\n    { selector: 'focus' },\n  ),\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  contentWrapper: {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  // The content should go all the way to the end if the content media is not present\n  contentWrapperWithoutMedia: {\n    gridColumnEnd: 4,\n  },\n  truncate: {\n    overflow: 'hidden',\n    textWrap: 'nowrap',\n    textOverflow: 'ellipsis',\n  },\n  rootSelected: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n  },\n  rootClickable: {\n    cursor: 'pointer',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n  },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    listItemClassNames.root,\n    rootBaseStyles,\n    (state.selectable || state.navigable) && styles.rootClickable,\n    state.selected && styles.rootSelected,\n    state.root.className,\n  );\n\n  if (state.header) {\n    state.header.className = mergeClasses(state.truncateHeader && styles.truncate, state.header?.className);\n  }\n\n  if (state.contentWrapper) {\n    state.contentWrapper.className = mergeClasses(\n      styles.contentWrapper,\n      state.truncateContent && styles.truncate,\n      !state.contentMedia && styles.contentWrapperWithoutMedia,\n      state.contentWrapper?.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","useListItemStyles_unstable","state","rootBaseStyles","styles","className","selectable","navigable","selected","truncateHeader","truncateContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBZ,gBAAgB;IACxCa,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGd,gCACD;QACEe,SAAS,CAAC,EAAEd,OAAOe,gBAAgB,CAAC,OAAO,EAAEf,OAAOgB,iBAAiB,CAAC,CAAC;QACvEC,cAAcjB,OAAOkB,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BS,gBAAgB;QACdgB,UAAUrB,OAAOsB,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiB9B,OAAO+B,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiB9B,OAAOkC,4BAA4B;QACtD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiB5B;IACvB,MAAM6B,SAASlB;IAEfgB,MAAMlC,IAAI,CAACqC,SAAS,GAAGzC,aACrBG,mBAAmBC,IAAI,EACvBmC,gBACA,AAACD,CAAAA,MAAMI,UAAU,IAAIJ,MAAMK,SAAS,AAAD,KAAMH,OAAON,aAAa,EAC7DI,MAAMM,QAAQ,IAAIJ,OAAOT,YAAY,EACrCO,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMhC,MAAM,EAAE;YAC+DgC;QAA/EA,MAAMhC,MAAM,CAACmC,SAAS,GAAGzC,aAAasC,MAAMO,cAAc,IAAIL,OAAOb,QAAQ,GAAEW,gBAAAA,MAAMhC,MAAM,cAAZgC,oCAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAM/B,cAAc,EAAE;YAKtB+B;QAJFA,MAAM/B,cAAc,CAACkC,SAAS,GAAGzC,aAC/BwC,OAAOjC,cAAc,EACrB+B,MAAMQ,eAAe,IAAIN,OAAOb,QAAQ,EACxC,CAACW,MAAM7B,YAAY,IAAI+B,OAAOf,0BAA0B,GACxDa,wBAAAA,MAAM/B,cAAc,cAApB+B,4CAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT,EAAE"}

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

@@ -0,0 +1,11 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+export const useSegmentStyles = makeStyles({
+    segment: {
+        padding: '1em',
+        ...shorthands.borderWidth('2px', 0, 0),
+        ...shorthands.borderColor('transparent'),
+        ...shorthands.borderStyle('solid'),
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: `0 1px 1px 1px ${tokens.colorNeutralShadowKey}`
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Segment/Segment.styles.ts"],"sourcesContent":["import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\n\nexport const useSegmentStyles = makeStyles({\n  segment: {\n    padding: '1em',\n    ...shorthands.borderWidth('2px', 0, 0),\n    ...shorthands.borderColor('transparent'),\n    ...shorthands.borderStyle('solid'),\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: `0 1px 1px 1px ${tokens.colorNeutralShadowKey}`,\n  },\n});\n"],"names":["makeStyles","shorthands","tokens","useSegmentStyles","segment","padding","borderWidth","borderColor","borderStyle","backgroundColor","colorNeutralBackground1","boxShadow","colorNeutralShadowKey"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAE5E,OAAO,MAAMC,mBAAmBH,WAAW;IACzCI,SAAS;QACPC,SAAS;QACT,GAAGJ,WAAWK,WAAW,CAAC,OAAO,GAAG,EAAE;QACtC,GAAGL,WAAWM,WAAW,CAAC,cAAc;QACxC,GAAGN,WAAWO,WAAW,CAAC,QAAQ;QAClCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,WAAW,CAAC,cAAc,EAAET,OAAOU,qBAAqB,CAAC,CAAC;IAC5D;AACF,GAAG"}

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

@@ -0,0 +1,95 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+export const useSizeStyles = makeStyles({
+    base100: {
+        fontSize: tokens.fontSizeBase100,
+        lineHeight: tokens.lineHeightBase100
+    },
+    base200: {
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200
+    },
+    base300: {
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300
+    },
+    base400: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400
+    },
+    base500: {
+        fontSize: tokens.fontSizeBase500,
+        lineHeight: tokens.lineHeightBase500
+    },
+    base600: {
+        fontSize: tokens.fontSizeBase600,
+        lineHeight: tokens.lineHeightBase600
+    },
+    hero700: {
+        fontSize: tokens.fontSizeHero700,
+        lineHeight: tokens.lineHeightHero700
+    }
+});
+export const useWeightStyles = makeStyles({
+    light: {
+        fontWeight: 200
+    },
+    semilight: {
+        fontWeight: 300
+    },
+    regular: {
+        fontWeight: 400
+    },
+    medium: {
+        fontWeight: 500
+    },
+    semibold: {
+        fontWeight: 600
+    },
+    bold: {
+        fontWeight: 700
+    }
+});
+export const useStyles = makeStyles({
+    mention: {
+        color: tokens.colorBrandForegroundLink
+    },
+    mentionMe: {
+        color: tokens.colorPalettePumpkinBorderActive,
+        fontWeight: 700
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    error: {
+        color: tokens.colorPaletteRedForeground3
+    },
+    important: {
+        color: tokens.colorPaletteDarkOrangeForeground3,
+        fontWeight: 700
+    },
+    success: {
+        color: tokens.colorPaletteGreenForeground3
+    },
+    temporary: {
+        fontStyle: 'italic'
+    },
+    timestamp: {
+        color: tokens.colorNeutralForeground3
+    },
+    nowrap: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+    },
+    truncate: {
+        textOverflow: 'ellipsis'
+    },
+    alignCenter: {
+        textAlign: 'center'
+    },
+    alignEnd: {
+        textAlign: 'end'
+    },
+    alignJustify: {
+        textAlign: 'justify'
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/StyledText/StyledText.styles.ts"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\n\nexport const useSizeStyles = makeStyles({\n  base100: {\n    fontSize: tokens.fontSizeBase100,\n    lineHeight: tokens.lineHeightBase100,\n  },\n  base200: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  base300: {\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  base400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n  base500: {\n    fontSize: tokens.fontSizeBase500,\n    lineHeight: tokens.lineHeightBase500,\n  },\n  base600: {\n    fontSize: tokens.fontSizeBase600,\n    lineHeight: tokens.lineHeightBase600,\n  },\n  hero700: {\n    fontSize: tokens.fontSizeHero700,\n    lineHeight: tokens.lineHeightHero700,\n  },\n});\n\nexport const useWeightStyles = makeStyles({\n  light: {\n    fontWeight: 200,\n  },\n  semilight: {\n    fontWeight: 300,\n  },\n  regular: {\n    fontWeight: 400,\n  },\n  medium: {\n    fontWeight: 500,\n  },\n  semibold: {\n    fontWeight: 600,\n  },\n  bold: {\n    fontWeight: 700,\n  },\n});\n\nexport const useStyles = makeStyles({\n  mention: {\n    color: tokens.colorBrandForegroundLink,\n  },\n  mentionMe: {\n    color: tokens.colorPalettePumpkinBorderActive,\n    fontWeight: 700,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  error: {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  important: {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n    fontWeight: 700,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  temporary: {\n    fontStyle: 'italic',\n  },\n  timestamp: {\n    color: tokens.colorNeutralForeground3,\n  },\n  nowrap: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n  truncate: {\n    textOverflow: 'ellipsis',\n  },\n  alignCenter: {\n    textAlign: 'center',\n  },\n  alignEnd: {\n    textAlign: 'end',\n  },\n  alignJustify: {\n    textAlign: 'justify',\n  },\n});\n"],"names":["makeStyles","tokens","useSizeStyles","base100","fontSize","fontSizeBase100","lineHeight","lineHeightBase100","base200","fontSizeBase200","lineHeightBase200","base300","fontSizeBase300","lineHeightBase300","base400","fontSizeBase400","lineHeightBase400","base500","fontSizeBase500","lineHeightBase500","base600","fontSizeBase600","lineHeightBase600","hero700","fontSizeHero700","lineHeightHero700","useWeightStyles","light","fontWeight","semilight","regular","medium","semibold","bold","useStyles","mention","color","colorBrandForegroundLink","mentionMe","colorPalettePumpkinBorderActive","disabled","colorNeutralForegroundDisabled","error","colorPaletteRedForeground3","important","colorPaletteDarkOrangeForeground3","success","colorPaletteGreenForeground3","temporary","fontStyle","timestamp","colorNeutralForeground3","nowrap","whiteSpace","overflow","truncate","textOverflow","alignCenter","textAlign","alignEnd","alignJustify"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAEhE,OAAO,MAAMC,gBAAgBF,WAAW;IACtCG,SAAS;QACPC,UAAUH,OAAOI,eAAe;QAChCC,YAAYL,OAAOM,iBAAiB;IACtC;IACAC,SAAS;QACPJ,UAAUH,OAAOQ,eAAe;QAChCH,YAAYL,OAAOS,iBAAiB;IACtC;IACAC,SAAS;QACPP,UAAUH,OAAOW,eAAe;QAChCN,YAAYL,OAAOY,iBAAiB;IACtC;IACAC,SAAS;QACPV,UAAUH,OAAOc,eAAe;QAChCT,YAAYL,OAAOe,iBAAiB;IACtC;IACAC,SAAS;QACPb,UAAUH,OAAOiB,eAAe;QAChCZ,YAAYL,OAAOkB,iBAAiB;IACtC;IACAC,SAAS;QACPhB,UAAUH,OAAOoB,eAAe;QAChCf,YAAYL,OAAOqB,iBAAiB;IACtC;IACAC,SAAS;QACPnB,UAAUH,OAAOuB,eAAe;QAChClB,YAAYL,OAAOwB,iBAAiB;IACtC;AACF,GAAG;AAEH,OAAO,MAAMC,kBAAkB1B,WAAW;IACxC2B,OAAO;QACLC,YAAY;IACd;IACAC,WAAW;QACTD,YAAY;IACd;IACAE,SAAS;QACPF,YAAY;IACd;IACAG,QAAQ;QACNH,YAAY;IACd;IACAI,UAAU;QACRJ,YAAY;IACd;IACAK,MAAM;QACJL,YAAY;IACd;AACF,GAAG;AAEH,OAAO,MAAMM,YAAYlC,WAAW;IAClCmC,SAAS;QACPC,OAAOnC,OAAOoC,wBAAwB;IACxC;IACAC,WAAW;QACTF,OAAOnC,OAAOsC,+BAA+B;QAC7CX,YAAY;IACd;IACAY,UAAU;QACRJ,OAAOnC,OAAOwC,8BAA8B;IAC9C;IACAC,OAAO;QACLN,OAAOnC,OAAO0C,0BAA0B;IAC1C;IACAC,WAAW;QACTR,OAAOnC,OAAO4C,iCAAiC;QAC/CjB,YAAY;IACd;IACAkB,SAAS;QACPV,OAAOnC,OAAO8C,4BAA4B;IAC5C;IACAC,WAAW;QACTC,WAAW;IACb;IACAC,WAAW;QACTd,OAAOnC,OAAOkD,uBAAuB;IACvC;IACAC,QAAQ;QACNC,YAAY;QACZC,UAAU;IACZ;IACAC,UAAU;QACRC,cAAc;IAChB;IACAC,aAAa;QACXC,WAAW;IACb;IACAC,UAAU;QACRD,WAAW;IACb;IACAE,cAAc;QACZF,WAAW;IACb;AACF,GAAG"}