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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +23 -2
  2. package/lib/components/Attachment/Attachment.styles.raw.js +57 -0
  3. package/lib/components/Attachment/Attachment.styles.raw.js.map +1 -0
  4. package/lib/components/Attachment/AttachmentAction.styles.raw.js +17 -0
  5. package/lib/components/Attachment/AttachmentAction.styles.raw.js.map +1 -0
  6. package/lib/components/Attachment/AttachmentBody.styles.raw.js +6 -0
  7. package/lib/components/Attachment/AttachmentBody.styles.raw.js.map +1 -0
  8. package/lib/components/Attachment/AttachmentDescription.styles.raw.js +9 -0
  9. package/lib/components/Attachment/AttachmentDescription.styles.raw.js.map +1 -0
  10. package/lib/components/Attachment/AttachmentHeader.styles.raw.js +9 -0
  11. package/lib/components/Attachment/AttachmentHeader.styles.raw.js.map +1 -0
  12. package/lib/components/Attachment/AttachmentIcon.styles.raw.js +15 -0
  13. package/lib/components/Attachment/AttachmentIcon.styles.raw.js.map +1 -0
  14. package/lib/components/Flex/Flex.styles.raw.js +88 -0
  15. package/lib/components/Flex/Flex.styles.raw.js.map +1 -0
  16. package/lib/components/Grid/Grid.styles.raw.js +31 -0
  17. package/lib/components/Grid/Grid.styles.raw.js.map +1 -0
  18. package/lib/components/ItemLayout/ItemLayout.styles.raw.js +60 -0
  19. package/lib/components/ItemLayout/ItemLayout.styles.raw.js.map +1 -0
  20. package/lib/components/List/List/useListStyles.styles.raw.js +34 -0
  21. package/lib/components/List/List/useListStyles.styles.raw.js.map +1 -0
  22. package/lib/components/List/ListItem/useListItemStyles.styles.raw.js +66 -0
  23. package/lib/components/List/ListItem/useListItemStyles.styles.raw.js.map +1 -0
  24. package/lib/components/Segment/Segment.styles.raw.js +11 -0
  25. package/lib/components/Segment/Segment.styles.raw.js.map +1 -0
  26. package/lib/components/StyledText/StyledText.styles.raw.js +95 -0
  27. package/lib/components/StyledText/StyledText.styles.raw.js.map +1 -0
  28. package/lib/components/Video/Video.styles.raw.js +9 -0
  29. package/lib/components/Video/Video.styles.raw.js.map +1 -0
  30. package/lib-commonjs/components/Attachment/Attachment.styles.raw.js +75 -0
  31. package/lib-commonjs/components/Attachment/Attachment.styles.raw.js.map +1 -0
  32. package/lib-commonjs/components/Attachment/AttachmentAction.styles.raw.js +27 -0
  33. package/lib-commonjs/components/Attachment/AttachmentAction.styles.raw.js.map +1 -0
  34. package/lib-commonjs/components/Attachment/AttachmentBody.styles.raw.js +16 -0
  35. package/lib-commonjs/components/Attachment/AttachmentBody.styles.raw.js.map +1 -0
  36. package/lib-commonjs/components/Attachment/AttachmentDescription.styles.raw.js +19 -0
  37. package/lib-commonjs/components/Attachment/AttachmentDescription.styles.raw.js.map +1 -0
  38. package/lib-commonjs/components/Attachment/AttachmentHeader.styles.raw.js +19 -0
  39. package/lib-commonjs/components/Attachment/AttachmentHeader.styles.raw.js.map +1 -0
  40. package/lib-commonjs/components/Attachment/AttachmentIcon.styles.raw.js +25 -0
  41. package/lib-commonjs/components/Attachment/AttachmentIcon.styles.raw.js.map +1 -0
  42. package/lib-commonjs/components/Flex/Flex.styles.raw.js +98 -0
  43. package/lib-commonjs/components/Flex/Flex.styles.raw.js.map +1 -0
  44. package/lib-commonjs/components/Grid/Grid.styles.raw.js +41 -0
  45. package/lib-commonjs/components/Grid/Grid.styles.raw.js.map +1 -0
  46. package/lib-commonjs/components/ItemLayout/ItemLayout.styles.raw.js +70 -0
  47. package/lib-commonjs/components/ItemLayout/ItemLayout.styles.raw.js.map +1 -0
  48. package/lib-commonjs/components/List/List/useListStyles.styles.raw.js +50 -0
  49. package/lib-commonjs/components/List/List/useListStyles.styles.raw.js.map +1 -0
  50. package/lib-commonjs/components/List/ListItem/useListItemStyles.styles.raw.js +82 -0
  51. package/lib-commonjs/components/List/ListItem/useListItemStyles.styles.raw.js.map +1 -0
  52. package/lib-commonjs/components/Segment/Segment.styles.raw.js +21 -0
  53. package/lib-commonjs/components/Segment/Segment.styles.raw.js.map +1 -0
  54. package/lib-commonjs/components/StyledText/StyledText.styles.raw.js +116 -0
  55. package/lib-commonjs/components/StyledText/StyledText.styles.raw.js.map +1 -0
  56. package/lib-commonjs/components/Video/Video.styles.raw.js +19 -0
  57. package/lib-commonjs/components/Video/Video.styles.raw.js.map +1 -0
  58. package/package.json +4 -4
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,9 @@
1
+ import { makeStyles } from '@fluentui/react-components';
2
+ export const useVideoStyles = makeStyles({
3
+ root: {
4
+ display: 'inline-block',
5
+ verticalAlign: 'middle',
6
+ width: '100%',
7
+ height: 'auto'
8
+ }
9
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ useAttachmentBaseStyles: function() {
13
+ return useAttachmentBaseStyles;
14
+ },
15
+ useAttachmentStyles: function() {
16
+ return useAttachmentStyles;
17
+ }
18
+ });
19
+ const _reactcomponents = require("@fluentui/react-components");
20
+ const _AttachmentAction = require("./AttachmentAction");
21
+ const _AttachmentIcon = require("./AttachmentIcon");
22
+ const useAttachmentBaseStyles = (0, _reactcomponents.makeResetStyles)({
23
+ ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
24
+ outline: `${_reactcomponents.tokens.strokeWidthThick} solid ${_reactcomponents.tokens.colorStrokeFocus2}`,
25
+ borderRadius: _reactcomponents.tokens.borderRadiusMedium,
26
+ backgroundColor: undefined,
27
+ color: undefined,
28
+ [`& .${_AttachmentAction.attachmentActionClassName}`]: {
29
+ color: undefined
30
+ },
31
+ [`& .${_AttachmentIcon.attachmentIconClassName}`]: {
32
+ color: undefined
33
+ }
34
+ }, {
35
+ selector: 'focus'
36
+ }),
37
+ position: 'relative',
38
+ display: 'inline-flex',
39
+ alignItems: 'center',
40
+ width: '100%',
41
+ maxWidth: '424px',
42
+ minHeight: '32px',
43
+ ..._reactcomponents.shorthands.padding('7px', '3px', '7px', '11px'),
44
+ marginBottom: '2px',
45
+ marginRight: '2px',
46
+ backgroundColor: _reactcomponents.tokens.colorNeutralBackground6,
47
+ color: _reactcomponents.tokens.colorNeutralForeground1,
48
+ boxShadow: `0 .2rem .4rem -.075rem ${_reactcomponents.tokens.colorNeutralShadowAmbient}`,
49
+ ..._reactcomponents.shorthands.border('1px', 'solid', _reactcomponents.tokens.colorNeutralStroke3),
50
+ borderRadius: '4px'
51
+ });
52
+ const useAttachmentStyles = (0, _reactcomponents.makeStyles)({
53
+ actionable: {
54
+ cursor: 'pointer',
55
+ ':hover': {
56
+ backgroundColor: _reactcomponents.tokens.colorNeutralBackground4Hover
57
+ }
58
+ },
59
+ progressContainer: {
60
+ borderBottomLeftRadius: '4px',
61
+ borderBottomRightRadius: '4px',
62
+ bottom: 0,
63
+ height: '4px',
64
+ left: 0,
65
+ overflow: 'hidden',
66
+ position: 'absolute',
67
+ right: 0
68
+ },
69
+ progressBar: {
70
+ backgroundColor: _reactcomponents.tokens.colorPaletteLightGreenBackground3,
71
+ height: '100%',
72
+ maxWidth: '100%',
73
+ transition: 'width 0.2s'
74
+ }
75
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useAttachmentActionStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useAttachmentActionStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const useAttachmentActionStyles = (0, _reactcomponents.makeStyles)({
13
+ root: {
14
+ height: '32px',
15
+ maxWidth: '280px',
16
+ minWidth: '32px',
17
+ display: 'inline-flex',
18
+ justifyContent: 'center',
19
+ alignItems: 'center',
20
+ position: 'relative',
21
+ verticalAlign: 'middle',
22
+ cursor: 'pointer'
23
+ },
24
+ disabled: {
25
+ cursor: 'default'
26
+ }
27
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useAttachmentBodyStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useAttachmentBodyStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const useAttachmentBodyStyles = (0, _reactcomponents.makeStyles)({
13
+ root: {
14
+ flex: '1 1 0'
15
+ }
16
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useAttachmentDescriptionStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useAttachmentDescriptionStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const useAttachmentDescriptionStyles = (0, _reactcomponents.makeStyles)({
13
+ root: {
14
+ display: 'block',
15
+ fontSize: _reactcomponents.tokens.fontSizeBase200,
16
+ fontWeight: _reactcomponents.tokens.fontWeightRegular,
17
+ lineHeight: 1
18
+ }
19
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useAttachmentHeaderStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useAttachmentHeaderStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const useAttachmentHeaderStyles = (0, _reactcomponents.makeStyles)({
13
+ root: {
14
+ display: 'block',
15
+ fontSize: _reactcomponents.tokens.fontSizeBase300,
16
+ fontWeight: _reactcomponents.tokens.fontWeightSemibold,
17
+ lineHeight: 1.4286
18
+ }
19
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useAttachmentIconStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useAttachmentIconStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const useAttachmentIconStyles = (0, _reactcomponents.makeStyles)({
13
+ root: {
14
+ height: '32px',
15
+ width: '32px',
16
+ marginRight: '12px',
17
+ display: 'inline-flex',
18
+ alignItems: 'center',
19
+ justifyContent: 'center',
20
+ '& svg': {
21
+ height: '100%',
22
+ width: '100%'
23
+ }
24
+ }
25
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useFlexStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useFlexStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const gapValues = {
13
+ smaller: '8px',
14
+ small: '10px',
15
+ medium: '15px',
16
+ large: '30px'
17
+ };
18
+ const paddingValues = {
19
+ medium: '10px'
20
+ };
21
+ const useFlexStyles = (0, _reactcomponents.makeStyles)({
22
+ flex: {
23
+ display: 'flex'
24
+ },
25
+ inline: {
26
+ display: 'inline-flex'
27
+ },
28
+ column: {
29
+ flexDirection: 'column'
30
+ },
31
+ alignItemsFlexStart: {
32
+ alignItems: 'flex-start'
33
+ },
34
+ alignItemsCenter: {
35
+ alignItems: 'center'
36
+ },
37
+ alignItemsFlexEnd: {
38
+ alignItems: 'flex-end'
39
+ },
40
+ alignItemsStretch: {
41
+ alignItems: 'stretch'
42
+ },
43
+ justifyContentFlexStart: {
44
+ justifyContent: 'flex-start'
45
+ },
46
+ justifyContentCenter: {
47
+ justifyContent: 'center'
48
+ },
49
+ justifyContentFlexEnd: {
50
+ justifyContent: 'flex-end'
51
+ },
52
+ justifyContentStretch: {
53
+ justifyContent: 'stretch'
54
+ },
55
+ justifyContentSpaceAround: {
56
+ justifyContent: 'space-around'
57
+ },
58
+ justifyContentSpaceBetween: {
59
+ justifyContent: 'space-between'
60
+ },
61
+ justifyContentSpaceEvenly: {
62
+ justifyContent: 'space-evenly'
63
+ },
64
+ wrap: {
65
+ flexWrap: 'wrap'
66
+ },
67
+ fill: {
68
+ width: '100%',
69
+ height: '100%'
70
+ },
71
+ gapForColumnFlexSmall: {
72
+ rowGap: gapValues.small
73
+ },
74
+ gapForColumnFlexSmaller: {
75
+ rowGap: gapValues.smaller
76
+ },
77
+ gapForColumnFlexMedium: {
78
+ rowGap: gapValues.medium
79
+ },
80
+ gapForColumnFlexLarge: {
81
+ rowGap: gapValues.large
82
+ },
83
+ gapForRowFlexSmall: {
84
+ columnGap: gapValues.small
85
+ },
86
+ gapForRowFlexSmaller: {
87
+ columnGap: gapValues.smaller
88
+ },
89
+ gapForRowFlexMedium: {
90
+ columnGap: gapValues.medium
91
+ },
92
+ gapForRowFlexLarge: {
93
+ columnGap: gapValues.large
94
+ },
95
+ paddingMedium: {
96
+ padding: paddingValues.medium
97
+ }
98
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useGridStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useGridStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const useGridStyles = (0, _reactcomponents.makeStyles)({
13
+ grid: {
14
+ display: 'grid',
15
+ justifyContent: 'space-evenly'
16
+ },
17
+ onlyRows: {
18
+ gridAutoFlow: 'column'
19
+ },
20
+ rows1: {
21
+ gridTemplateRows: 'repeat(1, 1fr)'
22
+ },
23
+ rows2: {
24
+ gridTemplateRows: 'repeat(2, 1fr)'
25
+ },
26
+ rows3: {
27
+ gridTemplateRows: 'repeat(3, 1fr)'
28
+ },
29
+ columns1: {
30
+ gridTemplateColumns: 'repeat(1, 1fr)'
31
+ },
32
+ columns2: {
33
+ gridTemplateColumns: 'repeat(2, 1fr)'
34
+ },
35
+ columns3: {
36
+ gridTemplateColumns: 'repeat(3, 1fr)'
37
+ },
38
+ columnsDefault: {
39
+ gridTemplateColumns: 'repeat(5, 1fr)'
40
+ }
41
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useItemLayoutStyles", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useItemLayoutStyles;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const useItemLayoutStyles = (0, _reactcomponents.makeStyles)({
13
+ root: {
14
+ display: 'grid',
15
+ gridTemplateColumns: 'auto 1fr auto auto',
16
+ minHeight: '48px'
17
+ },
18
+ contentMedia: {
19
+ alignSelf: 'start',
20
+ gridColumnStart: 3,
21
+ gridColumnEnd: 4,
22
+ gridRowStart: 2,
23
+ gridRowEnd: 3,
24
+ fontSize: '12px',
25
+ lineHeight: 1.3333
26
+ },
27
+ contentWrapper: {
28
+ alignSelf: 'start',
29
+ gridColumnStart: 2,
30
+ gridColumnEnd: 3,
31
+ gridRowStart: 2,
32
+ gridRowEnd: 3,
33
+ marginRight: '8px',
34
+ fontSize: '12px',
35
+ lineHeight: 1.3333
36
+ },
37
+ header: {
38
+ alignSelf: 'end',
39
+ gridColumnStart: 2,
40
+ gridColumnEnd: 3,
41
+ gridRowStart: 1,
42
+ gridRowEnd: 2,
43
+ fontSize: '14px',
44
+ marginRight: '8px'
45
+ },
46
+ headerMedia: {
47
+ alignSelf: 'end',
48
+ gridColumnStart: 3,
49
+ gridColumnEnd: 4,
50
+ gridRowStart: 1,
51
+ gridRowEnd: 2,
52
+ fontSize: '12px',
53
+ lineHeight: 1.3333
54
+ },
55
+ startMedia: {
56
+ alignSelf: 'center',
57
+ gridColumnStart: 1,
58
+ gridColumnEnd: 2,
59
+ gridRowStart: 1,
60
+ gridRowEnd: 3,
61
+ marginRight: '8px'
62
+ },
63
+ endMedia: {
64
+ alignSelf: 'center',
65
+ gridColumnStart: 4,
66
+ gridColumnEnd: 5,
67
+ gridRowStart: 1,
68
+ gridRowEnd: 3
69
+ }
70
+ });
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ listClassNames: function() {
13
+ return listClassNames;
14
+ },
15
+ useListStyles_unstable: function() {
16
+ return useListStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const listClassNames = {
21
+ root: 'fui-List'
22
+ };
23
+ const useRootBaseStyles = (0, _react.makeResetStyles)({
24
+ padding: 0,
25
+ margin: 0,
26
+ textIndent: 0,
27
+ listStyleType: 'none'
28
+ });
29
+ /**
30
+ * Styles for the root slot
31
+ */ const useStyles = (0, _react.makeStyles)({
32
+ rootHorizontal: {
33
+ display: 'flex'
34
+ },
35
+ rootGrid: {
36
+ display: 'grid'
37
+ }
38
+ });
39
+ const useListStyles_unstable = (state)=>{
40
+ 'use no memo';
41
+ const rootStyles = useRootBaseStyles();
42
+ const styles = useStyles();
43
+ const layoutToStyles = {
44
+ ['horizontal']: styles.rootHorizontal,
45
+ ['grid']: styles.rootGrid,
46
+ ['vertical']: undefined
47
+ };
48
+ state.root.className = (0, _react.mergeClasses)(listClassNames.root, rootStyles, layoutToStyles[state.layout], state.root.className);
49
+ return state;
50
+ };
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ listItemClassNames: function() {
13
+ return listItemClassNames;
14
+ },
15
+ useListItemStyles_unstable: function() {
16
+ return useListItemStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttabster = require("@fluentui/react-tabster");
21
+ const _reacttheme = require("@fluentui/react-theme");
22
+ const listItemClassNames = {
23
+ root: 'fui-ListItem',
24
+ media: 'fui-ListItem__media',
25
+ header: 'fui-ListItem__header',
26
+ contentWrapper: 'fui-ListItem__contentWrapper',
27
+ headerMedia: 'fui-ListItem__headerMedia',
28
+ contentMedia: 'fui-ListItem__contentMedia',
29
+ endMedia: 'fui-ListItem__endMedia'
30
+ };
31
+ const useRootBaseStyles = (0, _react.makeResetStyles)({
32
+ padding: '0 10px',
33
+ margin: 0,
34
+ textIndent: 0,
35
+ listStyleType: 'none',
36
+ ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
37
+ outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
38
+ borderRadius: _reacttheme.tokens.borderRadiusMedium
39
+ }, {
40
+ selector: 'focus'
41
+ })
42
+ });
43
+ /**
44
+ * Styles for the root slot
45
+ */ const useStyles = (0, _react.makeStyles)({
46
+ contentWrapper: {
47
+ fontSize: _reacttheme.tokens.fontSizeBase200
48
+ },
49
+ // The content should go all the way to the end if the content media is not present
50
+ contentWrapperWithoutMedia: {
51
+ gridColumnEnd: 4
52
+ },
53
+ truncate: {
54
+ overflow: 'hidden',
55
+ textWrap: 'nowrap',
56
+ textOverflow: 'ellipsis'
57
+ },
58
+ rootSelected: {
59
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected
60
+ },
61
+ rootClickable: {
62
+ cursor: 'pointer',
63
+ '&:hover': {
64
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover
65
+ }
66
+ }
67
+ });
68
+ const useListItemStyles_unstable = (state)=>{
69
+ 'use no memo';
70
+ const rootBaseStyles = useRootBaseStyles();
71
+ const styles = useStyles();
72
+ state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickable, state.selected && styles.rootSelected, state.root.className);
73
+ if (state.header) {
74
+ var _state_header;
75
+ state.header.className = (0, _react.mergeClasses)(state.truncateHeader && styles.truncate, (_state_header = state.header) === null || _state_header === void 0 ? void 0 : _state_header.className);
76
+ }
77
+ if (state.contentWrapper) {
78
+ var _state_contentWrapper;
79
+ 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);
80
+ }
81
+ return state;
82
+ };
@@ -0,0 +1 @@
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"}