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

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

@@ -0,0 +1,9 @@
+import { makeStyles } from '@fluentui/react-components';
+export const useVideoStyles = makeStyles({
+    root: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        width: '100%',
+        height: 'auto'
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Video/Video.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\n\nexport const useVideoStyles = makeStyles({\n  root: {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    width: '100%',\n    height: 'auto',\n  },\n});\n"],"names":["makeStyles","useVideoStyles","root","display","verticalAlign","width","height"],"rangeMappings":";;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AAExD,OAAO,MAAMC,iBAAiBD,WAAW;IACvCE,MAAM;QACJC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;IACV;AACF,GAAG"}

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

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

package/lib-commonjs/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":["useAttachmentBaseStyles","useAttachmentStyles","makeResetStyles","createCustomFocusIndicatorStyle","outline","tokens","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","backgroundColor","undefined","color","attachmentActionClassName","attachmentIconClassName","selector","position","display","alignItems","width","maxWidth","minHeight","shorthands","padding","marginBottom","marginRight","colorNeutralBackground6","colorNeutralForeground1","boxShadow","colorNeutralShadowAmbient","border","colorNeutralStroke3","makeStyles","actionable","cursor","colorNeutralBackground4Hover","progressContainer","borderBottomLeftRadius","borderBottomRightRadius","bottom","height","left","overflow","right","progressBar","colorPaletteLightGreenBackground3","transition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUaA,uBAAAA;eAAAA;;IAiCAC,mBAAAA;eAAAA;;;iCArCN;kCACmC;gCACF;AAEjC,MAAMD,0BAA0BE,IAAAA,gCAAAA,EAAgB;IACrD,GAAGC,IAAAA,gDAAAA,EACD;QACEC,SAAS,CAAC,EAAEC,uBAAAA,CAAOC,gBAAgB,CAAC,OAAO,EAAED,uBAAAA,CAAOE,iBAAiB,CAAC,CAAC;QACvEC,cAAcH,uBAAAA,CAAOI,kBAAkB;QACvCC,iBAAiBC;QACjBC,OAAOD;QACP,CAAC,CAAC,GAAG,EAAEE,2CAAAA,CAA0B,CAAC,CAAC,EAAE;YACnCD,OAAOD;QACT;QAEA,CAAC,CAAC,GAAG,EAAEG,uCAAAA,CAAwB,CAAC,CAAC,EAAE;YACjCF,OAAOD;QACT;IACF,GACA;QAAEI,UAAU;IAAQ,EACrB;IACDC,UAAU;IACVC,SAAS;IACTC,YAAY;IACZC,OAAO;IACPC,UAAU;IACVC,WAAW;IACX,GAAGC,2BAAAA,CAAWC,OAAO,CAAC,OAAO,OAAO,OAAO,OAAO;IAClDC,cAAc;IACdC,aAAa;IACbf,iBAAiBL,uBAAAA,CAAOqB,uBAAuB;IAC/Cd,OAAOP,uBAAAA,CAAOsB,uBAAuB;IACrCC,WAAW,CAAC,uBAAuB,EAAEvB,uBAAAA,CAAOwB,yBAAyB,CAAC,CAAC;IACvE,GAAGP,2BAAAA,CAAWQ,MAAM,CAAC,OAAO,SAASzB,uBAAAA,CAAO0B,mBAAmB,CAAC;IAChEvB,cAAc;AAChB;AAEO,MAAMP,sBAAsB+B,IAAAA,2BAAAA,EAAW;IAC5CC,YAAY;QACVC,QAAQ;QACR,UAAU;YACRxB,iBAAiBL,uBAAAA,CAAO8B,4BAA4B;QACtD;IACF;IACAC,mBAAmB;QACjBC,wBAAwB;QACxBC,yBAAyB;QACzBC,QAAQ;QACRC,QAAQ;QACRC,MAAM;QACNC,UAAU;QACV1B,UAAU;QACV2B,OAAO;IACT;IACAC,aAAa;QACXlC,iBAAiBL,uBAAAA,CAAOwC,iCAAiC;QACzDL,QAAQ;QACRpB,UAAU;QACV0B,YAAY;IACd;AACF"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAttachmentActionStyles", {
+    enumerable: true,
+    get: function() {
+        return useAttachmentActionStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useAttachmentActionStyles = (0, _reactcomponents.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-commonjs/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":["useAttachmentActionStyles","makeStyles","root","height","maxWidth","minWidth","display","justifyContent","alignItems","position","verticalAlign","cursor","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFc;AAEpB,MAAMA,4BAA4BC,IAAAA,2BAAAA,EAAW;IAClDC,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"}

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

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

package/lib-commonjs/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":["useAttachmentBodyStyles","makeStyles","root","flex"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFc;AAEpB,MAAMA,0BAA0BC,IAAAA,2BAAAA,EAAW;IAChDC,MAAM;QACJC,MAAM;IACR;AACF"}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAttachmentDescriptionStyles", {
+    enumerable: true,
+    get: function() {
+        return useAttachmentDescriptionStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useAttachmentDescriptionStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        display: 'block',
+        fontSize: _reactcomponents.tokens.fontSizeBase200,
+        fontWeight: _reactcomponents.tokens.fontWeightRegular,
+        lineHeight: 1
+    }
+});

package/lib-commonjs/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":["useAttachmentDescriptionStyles","makeStyles","root","display","fontSize","tokens","fontSizeBase200","fontWeight","fontWeightRegular","lineHeight"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFsB;AAE5B,MAAMA,iCAAiCC,IAAAA,2BAAAA,EAAW;IACvDC,MAAM;QACJC,SAAS;QACTC,UAAUC,uBAAAA,CAAOC,eAAe;QAChCC,YAAYF,uBAAAA,CAAOG,iBAAiB;QACpCC,YAAY;IACd;AACF"}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAttachmentHeaderStyles", {
+    enumerable: true,
+    get: function() {
+        return useAttachmentHeaderStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useAttachmentHeaderStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        display: 'block',
+        fontSize: _reactcomponents.tokens.fontSizeBase300,
+        fontWeight: _reactcomponents.tokens.fontWeightSemibold,
+        lineHeight: 1.4286
+    }
+});

package/lib-commonjs/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":["useAttachmentHeaderStyles","makeStyles","root","display","fontSize","tokens","fontSizeBase300","fontWeight","fontWeightSemibold","lineHeight"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFsB;AAE5B,MAAMA,4BAA4BC,IAAAA,2BAAAA,EAAW;IAClDC,MAAM;QACJC,SAAS;QACTC,UAAUC,uBAAAA,CAAOC,eAAe;QAChCC,YAAYF,uBAAAA,CAAOG,kBAAkB;QACrCC,YAAY;IACd;AACF"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAttachmentIconStyles", {
+    enumerable: true,
+    get: function() {
+        return useAttachmentIconStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useAttachmentIconStyles = (0, _reactcomponents.makeStyles)({
+    root: {
+        height: '32px',
+        width: '32px',
+        marginRight: '12px',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& svg': {
+            height: '100%',
+            width: '100%'
+        }
+    }
+});

package/lib-commonjs/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":["useAttachmentIconStyles","makeStyles","root","height","width","marginRight","display","alignItems","justifyContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFc;AAEpB,MAAMA,0BAA0BC,IAAAA,2BAAAA,EAAW;IAChDC,MAAM;QACJC,QAAQ;QACRC,OAAO;QACPC,aAAa;QACbC,SAAS;QACTC,YAAY;QACZC,gBAAgB;QAChB,SAAS;YACPL,QAAQ;YACRC,OAAO;QACT;IACF;AACF"}

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFlexStyles", {
+    enumerable: true,
+    get: function() {
+        return useFlexStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const gapValues = {
+    smaller: '8px',
+    small: '10px',
+    medium: '15px',
+    large: '30px'
+};
+const paddingValues = {
+    medium: '10px'
+};
+const useFlexStyles = (0, _reactcomponents.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-commonjs/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":["useFlexStyles","gapValues","smaller","small","medium","large","paddingValues","makeStyles","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":";;;;+BAaaA;;;eAAAA;;;iCAbc;AAE3B,MAAMC,YAAY;IAChBC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,gBAAgB;IACpBF,QAAQ;AACV;AAEO,MAAMJ,gBAAgBO,IAAAA,2BAAAA,EAAW;IACtCC,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"}

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useGridStyles", {
+    enumerable: true,
+    get: function() {
+        return useGridStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useGridStyles = (0, _reactcomponents.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-commonjs/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":["useGridStyles","makeStyles","grid","display","justifyContent","onlyRows","gridAutoFlow","rows1","gridTemplateRows","rows2","rows3","columns1","gridTemplateColumns","columns2","columns3","columnsDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFc;AAEpB,MAAMA,gBAAgBC,IAAAA,2BAAAA,EAAW;IACtCC,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"}

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useItemLayoutStyles", {
+    enumerable: true,
+    get: function() {
+        return useItemLayoutStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useItemLayoutStyles = (0, _reactcomponents.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-commonjs/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":["useItemLayoutStyles","makeStyles","root","display","gridTemplateColumns","minHeight","contentMedia","alignSelf","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","fontSize","lineHeight","contentWrapper","marginRight","header","headerMedia","startMedia","endMedia"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;iCAFc;AAEpB,MAAMA,sBAAsBC,IAAAA,2BAAAA,EAAW;IAC5CC,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"}

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

@@ -0,0 +1,50 @@
+"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, {
+    listClassNames: function() {
+        return listClassNames;
+    },
+    useListStyles_unstable: function() {
+        return useListStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const listClassNames = {
+    root: 'fui-List'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    padding: 0,
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none'
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    rootHorizontal: {
+        display: 'flex'
+    },
+    rootGrid: {
+        display: 'grid'
+    }
+});
+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 = (0, _react.mergeClasses)(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);
+    return state;
+};

package/lib-commonjs/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":["listClassNames","useListStyles_unstable","root","useRootBaseStyles","makeResetStyles","padding","margin","textIndent","listStyleType","useStyles","makeStyles","rootHorizontal","display","rootGrid","state","rootStyles","styles","layoutToStyles","undefined","className","mergeClasses","layout"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,cAAAA;eAAAA;;IA2BAC,sBAAAA;eAAAA;;;uBA9B6C;AAGnD,MAAMD,iBAA4C;IACvDE,MAAM;AACR;AAEA,MAAMC,oBAAoBC,IAAAA,sBAAAA,EAAgB;IACxCC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,gBAAgB;QACdC,SAAS;IACX;IAEAC,UAAU;QACRD,SAAS;IACX;AACF;AAKO,MAAMX,yBAAyB,CAACa;IACrC;IAEA,MAAMC,aAAaZ;IACnB,MAAMa,SAASP;IAEf,MAAMQ,iBAAiB;QACrB,CAAC,aAAa,EAAED,OAAOL,cAAc;QACrC,CAAC,OAAO,EAAEK,OAAOH,QAAQ;QACzB,CAAC,WAAW,EAAEK;IAChB;IAEAJ,MAAMZ,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAAA,EACrBpB,eAAeE,IAAI,EACnBa,YACAE,cAAc,CAACH,MAAMO,MAAM,CAAC,EAC5BP,MAAMZ,IAAI,CAACiB,SAAS;IAGtB,OAAOL;AACT"}

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

@@ -0,0 +1,82 @@
+"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, {
+    listItemClassNames: function() {
+        return listItemClassNames;
+    },
+    useListItemStyles_unstable: function() {
+        return useListItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+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 = (0, _react.makeResetStyles)({
+    padding: '0 10px',
+    margin: 0,
+    textIndent: 0,
+    listStyleType: 'none',
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    }, {
+        selector: 'focus'
+    })
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    contentWrapper: {
+        fontSize: _reacttheme.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: _reacttheme.tokens.colorNeutralBackground1Selected
+    },
+    rootClickable: {
+        cursor: 'pointer',
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover
+        }
+    }
+});
+const useListItemStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.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 = (0, _react.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 = (0, _react.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-commonjs/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":["listItemClassNames","useListItemStyles_unstable","root","media","header","contentWrapper","headerMedia","contentMedia","endMedia","useRootBaseStyles","makeResetStyles","padding","margin","textIndent","listStyleType","createCustomFocusIndicatorStyle","outline","tokens","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useStyles","makeStyles","fontSize","fontSizeBase200","contentWrapperWithoutMedia","gridColumnEnd","truncate","overflow","textWrap","textOverflow","rootSelected","backgroundColor","colorNeutralBackground1Selected","rootClickable","cursor","colorNeutralBackground1Hover","state","rootBaseStyles","styles","className","mergeClasses","selectable","navigable","selected","truncateHeader","truncateContent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,kBAAAA;eAAAA;;IAwDAC,0BAAAA;eAAAA;;;uBA7D6C;8BACV;4BAEzB;AAEhB,MAAMD,qBAAoD;IAC/DE,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,cAAc;IACdC,UAAU;AACZ;AAEA,MAAMC,oBAAoBC,IAAAA,sBAAAA,EAAgB;IACxCC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGC,IAAAA,6CAAAA,EACD;QACEC,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,gBAAgB,CAAC,OAAO,EAAED,kBAAAA,CAAOE,iBAAiB,CAAC,CAAC;QACvEC,cAAcH,kBAAAA,CAAOI,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BnB,gBAAgB;QACdoB,UAAUR,kBAAAA,CAAOS,eAAe;IAClC;IAEA,mFAAmF;IACnFC,4BAA4B;QAC1BC,eAAe;IACjB;IACAC,UAAU;QACRC,UAAU;QACVC,UAAU;QACVC,cAAc;IAChB;IACAC,cAAc;QACZC,iBAAiBjB,kBAAAA,CAAOkB,+BAA+B;IACzD;IACAC,eAAe;QACbC,QAAQ;QAER,WAAW;YACTH,iBAAiBjB,kBAAAA,CAAOqB,4BAA4B;QACtD;IACF;AACF;AAKO,MAAMrC,6BAA6B,CAACsC;IACzC;IAEA,MAAMC,iBAAiB/B;IACvB,MAAMgC,SAASlB;IAEfgB,MAAMrC,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAAA,EACrB3C,mBAAmBE,IAAI,EACvBsC,gBACA,AAACD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAS,AAATA,KAAcJ,OAAOL,aAAa,EAC7DG,MAAMO,QAAQ,IAAIL,OAAOR,YAAY,EACrCM,MAAMrC,IAAI,CAACwC,SAAS;IAGtB,IAAIH,MAAMnC,MAAM,EAAE;YAC+DmC;QAA/EA,MAAMnC,MAAM,CAACsC,SAAS,GAAGC,IAAAA,mBAAAA,EAAaJ,MAAMQ,cAAc,IAAIN,OAAOZ,QAAQ,EAAA,AAAEU,CAAAA,gBAAAA,MAAMnC,MAAM,AAANA,MAAM,QAAZmC,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAcG,SAAS;IACxG;IAEA,IAAIH,MAAMlC,cAAc,EAAE;YAKtBkC;QAJFA,MAAMlC,cAAc,CAACqC,SAAS,GAAGC,IAAAA,mBAAAA,EAC/BF,OAAOpC,cAAc,EACrBkC,MAAMS,eAAe,IAAIP,OAAOZ,QAAQ,EACxC,CAACU,MAAMhC,YAAY,IAAIkC,OAAOd,0BAA0B,EAAA,AACxDY,CAAAA,wBAAAA,MAAMlC,cAAc,AAAdA,MAAc,QAApBkC,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBG,SAAS;IAEnC;IAEA,OAAOH;AACT"}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSegmentStyles", {
+    enumerable: true,
+    get: function() {
+        return useSegmentStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useSegmentStyles = (0, _reactcomponents.makeStyles)({
+    segment: {
+        padding: '1em',
+        ..._reactcomponents.shorthands.borderWidth('2px', 0, 0),
+        ..._reactcomponents.shorthands.borderColor('transparent'),
+        ..._reactcomponents.shorthands.borderStyle('solid'),
+        backgroundColor: _reactcomponents.tokens.colorNeutralBackground1,
+        boxShadow: `0 1px 1px 1px ${_reactcomponents.tokens.colorNeutralShadowKey}`
+    }
+});